feat(tabs): proof of concept for keyed tabs

types/Tabs/TabsV2.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="svelte" />
+
+export type TabsV2ItemId = number | string;
+
+export interface TabsV2Item {
+  id: TabsV2ItemId;
+  label?: string;
+  disabled?: boolean;
+}
+
+export interface TabsV2Props extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Provide the tab items
+   * @default []
+   */
+  items?: TabsV2Item[];
+
+  /**
+   * Specify the selected tab index
+   * @default 0
+   */
+  selectedIndex?: number;
+
+  /**
+   * Specify the selected tab id
+   */
+  selectedId?: TabsV2ItemId;
+
+  /**
+   * Specify the type of tabs
+   * @default "default"
+   */
+  type?: "default" | "container";
+
+  /**
+   * Specify the ARIA label for the chevron icon
+   * @default "Show menu options"
+   */
+  iconDescription?: string;
+
+  /**
+   * Specify the tab trigger href attribute
+   * @default "#"
+   */
+  triggerHref?: string;
+}
+
+export default class TabsV2 {
+  $$prop_def: TabsV2Props;
+  $$slot_def: {
+    default: { id: TabsV2ItemId; index: number; item: TabsV2Item };
+    tab: {};
+  };
+
+  $on(
+    eventname: "change",
+    cb: (event: CustomEvent<{ selectedIndex: number; selectedId: TabsV2ItemId; currentItem: TabsV2Item }>) => void
+  ): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}