feat(aspect-ratio)!: integration with v11 (#1955)

COMPONENT_INDEX.md

@@ -250,6 +250,7 @@ None.
 | Prop name | Required | Kind             | Reactive | Type                                                                                                                         | Default value      | Description              |
 | :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ |
 | ratio     | No       | <code>let</code> | No       | <code>"2x1" &#124; "2x3" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "3x2" &#124; "9x16" &#124; "1x2"</code> | <code>"2x1"</code> | Specify the aspect ratio |
+| tag       | No       | <code>let</code> | No       | <code>keyof HTMLElementTagNameMap</code>                                                                                     | <code>"div"</code> | Specify the tag name     |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -217,13 +217,25 @@
           "isRequired": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "tag",
+          "kind": "let",
+          "description": "Specify the tag name",
+          "type": "keyof HTMLElementTagNameMap",
+          "value": "\"div\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "moduleExports": [],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "svelte:element" }
     },
     {
       "moduleName": "Breadcrumb",

docs/src/pages/components/AspectRatio.svx

@@ -7,7 +7,9 @@ The `AspectRatio` component is useful for constraining fluid content within an a
 
 Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
 
-## Default (2x1)
+## Ratio 2x1
+
+The default aspect ratio is `2x1`.
 
 <AspectRatio>
   2x1
@@ -61,8 +63,19 @@ Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"
   1x2
 </AspectRatio>
 
+## Custom tag
+
+By default, the `AspectRatio` component renders a `div` element. You can change this by specifying a `tag`.
+
+<AspectRatio tag="h1" ratio="16x9">
+  Content
+</AspectRatio>
+
 ## Tile (16x9)
 
 <AspectRatio ratio="16x9">
-  <Tile style="height: 100%">Content</Tile>
+  <Tile style="position: absolute; height: 100%; width: 100%">
-</AspectRatio>
+    Content
+  </Tile>
+</AspectRatio>
+

src/AspectRatio/AspectRatio.svelte

@@ -1,12 +1,21 @@
 <script>
+  // @ts-check
+
   /**
    * Specify the aspect ratio
    * @type {"2x1" | "2x3" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"}
    */
   export let ratio = "2x1";
+
+  /**
+   * Specify the tag name
+   * @type {keyof HTMLElementTagNameMap}
+   */
+  export let tag = "div";
 </script>
 
-<div
+<svelte:element
+  this="{tag}"
   class:bx--aspect-ratio="{true}"
   class:bx--aspect-ratio--2x1="{ratio === '2x1'}"
   class:bx--aspect-ratio--2x3="{ratio === '2x3'}"
@@ -20,4 +29,4 @@
   {...$$restProps}
 >
   <slot />
-</div>
+</svelte:element>

types/AspectRatio/AspectRatio.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { SvelteComponentTyped } from "svelte";
 import type { SvelteHTMLElements } from "svelte/elements";
 
-type RestProps = SvelteHTMLElements["div"];
+type RestProps = SvelteHTMLElements["svelte:element"];
 
 export interface AspectRatioProps extends RestProps {
   /**
@@ -19,6 +19,12 @@ export interface AspectRatioProps extends RestProps {
     | "9x16"
     | "1x2";
 
+  /**
+   * Specify the tag name
+   * @default "div"
+   */
+  tag?: keyof HTMLElementTagNameMap;
+
   [key: `data-${string}`]: any;
 }