feat(tabs): support "container" type for TabsSkeleton

COMPONENT_INDEX.md

@@ -3682,9 +3682,10 @@ None.
 
 ### Props
 
-| Prop name | Kind             | Reactive | Type                | Default value  | Description                          |
+| Prop name | Kind             | Reactive | Type                                      | Default value          | Description                          |
-| :-------- | :--------------- | :------- | :------------------ | -------------- | ------------------------------------ |
+| :-------- | :--------------- | :------- | :---------------------------------------- | ---------------------- | ------------------------------------ |
-| count     | <code>let</code> | No       | <code>number</code> | <code>4</code> | Specify the number of tabs to render |
+| count     | <code>let</code> | No       | <code>number</code>                       | <code>4</code>         | Specify the number of tabs to render |
+| type      | <code>let</code> | No       | <code>"default" &#124; "container"</code> | <code>"default"</code> | Specify the type of tabs             |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -9148,6 +9148,16 @@
           "isFunction": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "type",
+          "kind": "let",
+          "description": "Specify the type of tabs",
+          "type": "\"default\" | \"container\"",
+          "value": "\"default\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [],

docs/src/pages/components/Tabs.svx

@@ -37,6 +37,10 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
   </div>
 </Tabs>
 
-### Skeleton
+### Skeleton (default)
 
 <TabsSkeleton count={3} />
+
+### Skeleton (container)
+
+<TabsSkeleton type="container" count={3} />

src/Tabs/TabsSkeleton.svelte

@@ -1,27 +1,31 @@
 <script>
   /** Specify the number of tabs to render */
   export let count = 4;
+
+  /**
+   * Specify the type of tabs
+   * @type {"default" | "container"}
+   */
+  export let type = "default";
 </script>
 
 <div
   class:bx--tabs="{true}"
   class:bx--skeleton="{true}"
+  class:bx--tabs--scrollable="{true}"
+  class:bx--tabs--scrollable--container="{type === 'container'}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--tabs-trigger="{true}">
+  <ul class:bx--tabs--scrollable__nav="{true}">
-    <div class:bx--tabs-trigger-text="{true}">&nbsp;</div>
+    {#each Array.from({ length: count }, (_, i) => i) as item}
-    <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+      <li class:bx--tabs--scrollable__nav-item="{true}">
-      <path d="M10 0L5 5 0 0z"></path>
+        <div class:bx--tabs__nav-link="{true}">
-    </svg>
+          <span></span>
-  </div>
+        </div>
-  <ul class:bx--tabs__nav="{true}" class:bx--tabs__nav--hidden="{true}">
-    {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
-      <li class:bx--tabs__nav-item="{true}">
-        <div class:bx--tabs__nav-link="{true}">&nbsp;</div>
       </li>
     {/each}
   </ul>

types/Tabs/TabsSkeleton.d.ts

@@ -8,6 +8,12 @@ export interface TabsSkeletonProps
    * @default 4
    */
   count?: number;
+
+  /**
+   * Specify the type of tabs
+   * @default "default"
+   */
+  type?: "default" | "container";
 }
 
 export default class TabsSkeleton extends SvelteComponentTyped<