Make v10 Tabs work with v11 css classes

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

@@ -3942,8 +3942,6 @@ None.
 
 | Event name | Type       | Detail |
 | :--------- | :--------- | :----- |
-| keypress   | forwarded  | --     |
-| click      | forwarded  | --     |
 | change     | dispatched | --     |
 
 ## `TabsSkeleton`

docs/src/COMPONENT_API.json

@@ -11702,13 +11702,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",
@@ -12086,11 +12086,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" }
     },

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="{() => {
@@ -57,18 +64,6 @@
       }
     }
   }}"
->
-  <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="{$useAutoWidth ? 'width: auto' : undefined}"
 >
   <slot>{label}</slot>
 </a>
-</li>

src/Tabs/Tabs.svelte

@@ -125,39 +125,8 @@
   class:bx--tabs--container="{type === 'container'}"
   {...$$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>
-  <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

@@ -13,21 +13,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>
-        </div>
+      </span>
-      </li>
     {/each}
-  </ul>
+  </div>
 </div>

types/Tabs/Tab.svelte.d.ts

@@ -2,7 +2,7 @@
 import type { SvelteComponentTyped } from "svelte";
 
 export interface TabProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
   /**
    * Specify the tab label
    * Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>)
@@ -39,6 +39,30 @@ export interface TabProps
    * @default null
    */
   ref?: null | HTMLAnchorElement;
+
+  /**
+   * SvelteKit attribute to enable data prefetching
+   * if a link is hovered over or touched on mobile.
+   * @see https://kit.svelte.dev/docs/a-options#sveltekit-prefetch
+   * @default false
+   */
+  "sveltekit:prefetch"?: boolean;
+
+  /**
+   * SvelteKit attribute to trigger a full page
+   * reload after the link is clicked.
+   * @see https://kit.svelte.dev/docs/a-options#sveltekit-reload
+   * @default false
+   */
+  "sveltekit:reload"?: boolean;
+
+  /**
+   * SvelteKit attribute to prevent scrolling
+   * after the link is clicked.
+   * @see https://kit.svelte.dev/docs/a-options#sveltekit-noscroll
+   * @default false
+   */
+  "sveltekit:noscroll"?: boolean;
 }
 
 export default class Tab extends SvelteComponentTyped<

types/Tabs/Tabs.svelte.d.ts

@@ -36,10 +36,6 @@ export interface TabsProps
 
 export default class Tabs extends SvelteComponentTyped<
   TabsProps,
-  {
+  { change: CustomEvent<any> },
-    keypress: WindowEventMap["keypress"];
-    click: WindowEventMap["click"];
-    change: CustomEvent<any>;
-  },
   { default: {}; content: {} }
 > {}