feat(tabs): proof of concept for keyed tabs

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 155,
+  "total": 156,
   "components": [
     {
       "moduleName": "SkeletonText",
@@ -7637,6 +7637,104 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
+    {
+      "moduleName": "TabsV2",
+      "filePath": "/src/Tabs/TabsV2.svelte",
+      "props": [
+        {
+          "name": "items",
+          "kind": "let",
+          "description": "Provide the tab items",
+          "type": "TabsV2Item[]",
+          "value": "[]",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "selectedIndex",
+          "kind": "let",
+          "description": "Specify the selected tab index",
+          "type": "number",
+          "value": "0",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "selectedId",
+          "kind": "let",
+          "description": "Specify the selected tab id",
+          "type": "TabsV2ItemId",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "type",
+          "kind": "let",
+          "description": "Specify the type of tabs",
+          "type": "\"default\" | \"container\"",
+          "value": "\"default\"",
+          "isFunction": 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,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "triggerHref",
+          "kind": "let",
+          "description": "Specify the tab trigger href attribute",
+          "type": "string",
+          "value": "\"#\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [
+        {
+          "name": "__default__",
+          "default": true,
+          "slot_props": "{ id: TabsV2ItemId; index: number; item: TabsV2Item; }"
+        },
+        {
+          "name": "tab",
+          "default": false,
+          "fallback": "{item.label}",
+          "slot_props": "{}"
+        }
+      ],
+      "events": [
+        {
+          "type": "dispatched",
+          "name": "change",
+          "detail": "{ selectedIndex: number; selectedId: TabsV2ItemId; currentItem: TabsV2Item }"
+        }
+      ],
+      "typedefs": [
+        {
+          "type": "number | string",
+          "name": "TabsV2ItemId",
+          "ts": "type TabsV2ItemId = number | string"
+        },
+        {
+          "type": "{ id: TabsV2ItemId; label?: string; disabled?: boolean; }",
+          "name": "TabsV2Item",
+          "ts": "interface TabsV2Item { id: TabsV2ItemId; label?: string; disabled?: boolean; }"
+        }
+      ],
+      "rest_props": { "type": "Element", "name": "div" }
+    },
     {
       "moduleName": "TagSkeleton",
       "filePath": "/src/Tag/TagSkeleton.svelte",

docs/src/pages/framed/Tabs/TabsV2.svelte

@@ -0,0 +1,86 @@
+<script>
+  import { TabsV2, Button } from "carbon-components-svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
+  import { tick } from "svelte";
+
+  const initialItems = [
+    { id: "id" + 0, label: "Tab 1" },
+    { id: "id" + 1, label: "Tab 2", disabled: true },
+    { id: "id" + 3, label: "Tab 3" },
+  ];
+
+  const differentItems = [
+    { id: "id" + -1, label: "Diff Tab 0" },
+    { id: "id" + 0, label: "Diff Tab 1" },
+    { id: "id" + 1, label: "Diff Tab 2" },
+    { id: "id" + 3, label: "Diff Tab 3" },
+    { id: "id" + 4, label: "Diff Tab 4" },
+  ];
+
+  let selectedIndex;
+  let selectedId;
+  let items = initialItems;
+</script>
+
+<div><strong>selectedIndex:</strong> {selectedIndex}</div>
+
+<div><strong>selectedId:</strong> {selectedId}</div>
+
+<Button
+  on:click="{async () => {
+    items = differentItems;
+    tick().then(() => {
+      selectedId = 'id4';
+    });
+  }}"
+>
+  Update items
+</Button>
+
+<Button
+  on:click="{() => {
+    items = initialItems;
+  }}"
+>
+  Reset
+</Button>
+
+<Button
+  on:click="{() => {
+    selectedIndex = 1;
+  }}"
+>
+  Update selectedIndex
+</Button>
+
+<Button
+  on:click="{() => {
+    selectedId = 'id3';
+  }}"
+>
+  Update selectedId
+</Button>
+
+<TabsV2
+  bind:selectedId
+  bind:selectedIndex
+  items="{items}"
+  let:item
+  let:id
+  let:index
+  on:change="{(e) => {
+    console.log('change', e.detail);
+  }}"
+>
+  <span slot="tab" style="{!item.disabled && 'color: blue'}">
+    {#if index === 1}
+      <Add16 />
+    {/if}
+    {item.label}
+  </span>
+  {#if selectedIndex === 0}Tab content {id} {index}{/if}
+  {#if selectedIndex === 1}Tab content {id} {index}{/if}
+  {#if selectedIndex === 2}Tab content {id} {index}{/if}
+  {#if selectedIndex === 3}Tab content {id} {index}{/if}
+  {#if selectedIndex === 4}Tab content {id} {index}{/if}
+</TabsV2>