chore: v11 Tabs

In v11 [Tabs](https://carbondesignsystem.com/migrating/guide/design/#tabs-breaking) received some additional modifiers. In this commit we only want to make sure that the Svelte v10 tabs still work using v11 styles. This probably needs additional testing.

COMPONENT_INDEX.md

@@ -3943,13 +3943,11 @@ None.
 
 ### Props
 
-| Prop name       | Required | Kind             | Reactive | Type                                      | Default value                    | Description                                  |
+| Prop name | Required | Kind             | Reactive | Type                 | Default value      | Description                                  |
-| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | -------------------------------- | -------------------------------------------- |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | -------------------------------------------- |
-| selected        | No       | <code>let</code> | Yes      | <code>number</code>                       | <code>0</code>                   | Specify the selected tab index               |
+| selected  | No       | <code>let</code> | Yes      | <code>number</code>  | <code>0</code>     | Specify the selected tab index               |
-| type            | No       | <code>let</code> | No       | <code>"default" &#124; "container"</code> | <code>"default"</code>           | Specify the type of tabs                     |
+| contained | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` for tabs to be contained       |
-| autoWidth       | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>               | Set to `true` for tabs to have an auto-width |
+| autoWidth | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` for tabs to have an auto-width |
-| iconDescription | No       | <code>let</code> | No       | <code>string</code>                       | <code>"Show menu options"</code> | Specify the ARIA label for the chevron icon  |
-| triggerHref     | No       | <code>let</code> | No       | <code>string</code>                       | <code>"#"</code>                 | Specify the tab trigger href attribute       |
 
 ### Slots
 
@@ -3962,8 +3960,6 @@ None.
 
 | Event name | Type       | Detail |
 | :--------- | :--------- | :----- |
-| keypress   | forwarded  | --     |
-| click      | forwarded  | --     |
 | change     | dispatched | --     |
 
 ## `TabsSkeleton`

docs/src/COMPONENT_API.json

@@ -11834,13 +11834,13 @@
         }
       ],
       "events": [
-        { "type": "forwarded", "name": "click", "element": "li" },
+        { "type": "forwarded", "name": "click", "element": "a" },
-        { "type": "forwarded", "name": "mouseover", "element": "li" },
+        { "type": "forwarded", "name": "mouseover", "element": "a" },
-        { "type": "forwarded", "name": "mouseenter", "element": "li" },
+        { "type": "forwarded", "name": "mouseenter", "element": "a" },
-        { "type": "forwarded", "name": "mouseleave", "element": "li" }
+        { "type": "forwarded", "name": "mouseleave", "element": "a" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "li" }
+      "rest_props": { "type": "Element", "name": "a" }
     },
     {
       "moduleName": "TabContent",
@@ -12165,11 +12165,11 @@
           "reactive": true
         },
         {
-          "name": "type",
+          "name": "contained",
           "kind": "let",
-          "description": "Specify the type of tabs",
+          "description": "Set to `true` for tabs to be contained",
-          "type": "\"default\" | \"container\"",
+          "type": "boolean",
-          "value": "\"default\"",
+          "value": "false",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -12187,30 +12187,6 @@
           "isRequired": false,
           "constant": false,
           "reactive": false
-        },
-        {
-          "name": "iconDescription",
-          "kind": "let",
-          "description": "Specify the ARIA label for the chevron icon",
-          "type": "string",
-          "value": "\"Show menu options\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "triggerHref",
-          "kind": "let",
-          "description": "Specify the tab trigger href attribute",
-          "type": "string",
-          "value": "\"#\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
         }
       ],
       "moduleExports": [],
@@ -12218,11 +12194,7 @@
         { "name": "__default__", "default": true, "slot_props": "{}" },
         { "name": "content", "default": false, "slot_props": "{}" }
       ],
-      "events": [
+      "events": [{ "type": "dispatched", "name": "change" }],
-        { "type": "forwarded", "name": "keypress", "element": "div" },
-        { "type": "forwarded", "name": "click", "element": "a" },
-        { "type": "dispatched", "name": "change" }
-      ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },

docs/src/pages/components/Tabs.svx

@@ -60,9 +60,9 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non-
   </svelte:fragment>
 </Tabs>
 
-## Container type
+## Contained
 
-<Tabs type="container">
+<Tabs contained>
   <Tab label="Tab label 1" />
   <Tab label="Tab label 2" />
   <Tab label="Tab label 3" />
@@ -77,6 +77,6 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non-
 
 <TabsSkeleton count={3} />
 
-## Skeleton (container)
+## Skeleton (contained)
 
-<TabsSkeleton type="container" count={3} />
+<TabsSkeleton contained count={3} />

src/Tabs/Tab.svelte

@@ -30,12 +30,19 @@
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<li
+<a
-  tabindex="-1"
+  bind:this="{ref}"
-  role="presentation"
+  tabindex="{disabled ? '-1' : tabindex}"
+  role="tab"
   class:bx--tabs__nav-item="{true}"
+  class:bx--tabs__nav-link="{true}"
   class:bx--tabs__nav-item--disabled="{disabled}"
   class:bx--tabs__nav-item--selected="{selected}"
+  aria-selected="{selected}"
+  aria-disabled="{disabled}"
+  id="{id}"
+  href="{href}"
+  style="{$useAutoWidth ? 'width: auto' : undefined}"
   {...$$restProps}
   on:click|preventDefault
   on:click|preventDefault="{() => {
@@ -58,17 +65,5 @@
     }
   }}"
 >
-  <a
+  <slot>{label}</slot>
-    bind:this="{ref}"
+</a>
-    role="tab"
-    tabindex="{disabled ? '-1' : tabindex}"
-    aria-selected="{selected}"
-    aria-disabled="{disabled}"
-    id="{id}"
-    href="{href}"
-    class:bx--tabs__nav-link="{true}"
-    style:width="{$useAutoWidth ? "auto" : undefined}"
-  >
-    <slot>{label}</slot>
-  </a>
-</li>

src/Tabs/Tabs.svelte

@@ -3,26 +3,15 @@
   export let selected = 0;
 
   /**
-   * Specify the type of tabs
+   * Set to `true` for tabs to be contained
-   * @type {"default" | "container"}
    */
-  export let type = "default";
+  export let contained = false;
 
   /** Set to `true` for tabs to have an auto-width */
   export let autoWidth = false;
 
-  /**
-   * Specify the ARIA label for the chevron icon
-   * @type {string}
-   */
-  export let iconDescription = "Show menu options";
-
-  /** Specify the tab trigger href attribute */
-  export let triggerHref = "#";
-
   import { createEventDispatcher, afterUpdate, setContext, tick } from "svelte";
   import { writable, derived } from "svelte/store";
-  import ChevronDown from "../icons/ChevronDown.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -122,43 +111,11 @@
 <div
   role="navigation"
   class:bx--tabs="{true}"
-  class:bx--tabs--container="{type === 'container'}"
+  class:bx--tabs--contained="{contained}"
   {...$$restProps}
 >
-  <div
+  <div bind:this="{refTabList}" role="tablist" class:bx--tab--list="{true}">
-    role="listbox"
-    tabindex="0"
-    class:bx--tabs-trigger="{true}"
-    aria-label="{$$props['aria-label'] || 'listbox'}"
-    on:click="{() => {
-      dropdownHidden = !dropdownHidden;
-    }}"
-    on:keypress
-    on:keypress="{() => {
-      dropdownHidden = !dropdownHidden;
-    }}"
-  >
-    <a
-      tabindex="-1"
-      class:bx--tabs-trigger-text="{true}"
-      href="{triggerHref}"
-      on:click|preventDefault
-      on:click|preventDefault|stopPropagation="{() => {
-        dropdownHidden = !dropdownHidden;
-      }}"
-    >
-      {#if currentTab}{currentTab.label}{/if}
-    </a>
-    <ChevronDown aria-hidden="true" title="{iconDescription}" />
-  </div>
-  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
-  <ul
-    bind:this="{refTabList}"
-    role="tablist"
-    class:bx--tabs__nav="{true}"
-    class:bx--tabs__nav--hidden="{dropdownHidden}"
-  >
     <slot />
-  </ul>
+  </div>
 </div>
 <slot name="content" />

src/Tabs/TabsSkeleton.svelte

@@ -14,21 +14,18 @@
 <div
   class:bx--tabs="{true}"
   class:bx--skeleton="{true}"
-  class:bx--tabs--scrollable="{true}"
+  class:bx--tabs--contained="{type === 'container'}"
-  class:bx--tabs--scrollable--container="{type === 'container'}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <ul class:bx--tabs--scrollable__nav="{true}">
+  <div class:bx--tab--list="{true}">
     {#each Array.from({ length: count }, (_, i) => i) as item}
-      <li class:bx--tabs--scrollable__nav-item="{true}">
+      <span class:bx--tabs__nav-item="{true}" class:bx--tabs__nav-link="{true}">
-        <div class:bx--tabs__nav-link="{true}">
+        <span></span>
-          <span></span>
+      </span>
-        </div>
-      </li>
     {/each}
-  </ul>
+  </div>
 </div>

tests/Tabs.test.svelte

@@ -19,7 +19,7 @@
 
 <TabContent>Content 3</TabContent>
 
-<Tabs type="container">
+<Tabs contained>
   <Tab label="Tab label 1" />
   <Tab label="Tab label 2" />
   <Tab label="Tab label 3" />

types/Tabs/Tab.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { SvelteComponentTyped } from "svelte";
 import type { SvelteHTMLElements } from "svelte/elements";
 
-type RestProps = SvelteHTMLElements["li"];
+type RestProps = SvelteHTMLElements["a"];
 
 export interface TabProps extends RestProps {
   /**

types/Tabs/Tabs.svelte.d.ts

@@ -11,10 +11,10 @@ export interface TabsProps extends RestProps {
   selected?: number;
 
   /**
-   * Specify the type of tabs
+   * Set to `true` for tabs to be contained
-   * @default "default"
+   * @default false
    */
-  type?: "default" | "container";
+  contained?: boolean;
 
   /**
    * Set to `true` for tabs to have an auto-width
@@ -22,27 +22,11 @@ export interface TabsProps extends RestProps {
    */
   autoWidth?: boolean;
 
-  /**
-   * Specify the ARIA label for the chevron icon
-   * @default "Show menu options"
-   */
-  iconDescription?: string;
-
-  /**
-   * Specify the tab trigger href attribute
-   * @default "#"
-   */
-  triggerHref?: string;
-
   [key: `data-${string}`]: any;
 }
 
 export default class Tabs extends SvelteComponentTyped<
   TabsProps,
-  {
+  { change: CustomEvent<any> },
-    keypress: WindowEventMap["keypress"];
-    click: WindowEventMap["click"];
-    change: CustomEvent<any>;
-  },
   { default: {}; content: {} }
 > {}