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.

src/Tabs/Tab.svelte

@@ -30,12 +30,19 @@
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<li
-  tabindex="-1"
-  role="presentation"
+<a
+  bind:this="{ref}"
+  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
-    bind:this="{ref}"
-    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>
+  <slot>{label}</slot>
+</a>

src/Tabs/Tabs.svelte

@@ -3,26 +3,15 @@
   export let selected = 0;
 
   /**
-   * Specify the type of tabs
-   * @type {"default" | "container"}
+   * Set to `true` for tabs to be contained
    */
-  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
-    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}"
-  >
+  <div bind:this="{refTabList}" role="tablist" class:bx--tab--list="{true}">
     <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--scrollable--container="{type === 'container'}"
+  class:bx--tabs--contained="{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}">
-        <div class:bx--tabs__nav-link="{true}">
-          <span></span>
-        </div>
-      </li>
+      <span class:bx--tabs__nav-item="{true}" class:bx--tabs__nav-link="{true}">
+        <span></span>
+      </span>
     {/each}
-  </ul>
+  </div>
 </div>