From 286f014df47747531fb5eb74213761d399a13d36 Mon Sep 17 00:00:00 2001
From: mabentley85 <mabentley85@gmail.com>
Date: Tue, 2 Apr 2024 15:34:17 -0700
Subject: [PATCH] Started refactoring AspectRatio for V11 Styles

---
 src/AspectRatio/AspectRatio.svelte | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/AspectRatio/AspectRatio.svelte b/src/AspectRatio/AspectRatio.svelte
index e48418be..b320c276 100644
--- a/src/AspectRatio/AspectRatio.svelte
+++ b/src/AspectRatio/AspectRatio.svelte
@@ -1,23 +1,12 @@
 <script>
   /**
-   * Specify the aspect ratio
+   * Specify the ratio to be used by the aspect ratio container.
+   * This will determine what aspect ratio your content will be displayed in.
    * @type {"2x1" | "2x3" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"}
    */
   export let ratio = "2x1";
 </script>
 
-<div
-  class:bx--aspect-ratio="{true}"
-  class:bx--aspect-ratio--2x1="{ratio === '2x1'}"
-  class:bx--aspect-ratio--2x3="{ratio === '2x3'}"
-  class:bx--aspect-ratio--16x9="{ratio === '16x9'}"
-  class:bx--aspect-ratio--4x3="{ratio === '4x3'}"
-  class:bx--aspect-ratio--1x1="{ratio === '1x1'}"
-  class:bx--aspect-ratio--3x4="{ratio === '3x4'}"
-  class:bx--aspect-ratio--3x2="{ratio === '3x2'}"
-  class:bx--aspect-ratio--9x16="{ratio === '9x16'}"
-  class:bx--aspect-ratio--1x2="{ratio === '1x2'}"
-  {...$$restProps}
->
+<div class="{`bx--aspect-ratio bx--aspect-ratio--${ratio}`}" {...$$restProps}>
   <slot />
 </div>