@tessera-ui/core 0.4.0

package/dist/collection/components/table/table.stories.js

@@ -0,0 +1,147 @@
+// Hand-written stories for ts-table
+export default {
+    title: 'Components/Table',
+    tags: ['autodocs'],
+    argTypes: {
+        striped: { control: 'boolean', description: 'Applies alternating row background colors.' },
+        bordered: { control: 'boolean', description: 'Adds borders to all cells.' },
+        hoverable: { control: 'boolean', description: 'Highlights rows on hover.' },
+        compact: { control: 'boolean', description: 'Reduces cell padding for denser display.' },
+        stickyHeader: { control: 'boolean', description: 'Makes the table header stick to the top on scroll.' },
+    },
+};
+const sampleTable = `
+  <table>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Email</th>
+        <th>Role</th>
+        <th>Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>James Kennedy</td>
+        <td>james@example.com</td>
+        <td>Admin</td>
+        <td>Active</td>
+      </tr>
+      <tr>
+        <td>Alice Smith</td>
+        <td>alice@example.com</td>
+        <td>Editor</td>
+        <td>Active</td>
+      </tr>
+      <tr>
+        <td>Robert Chen</td>
+        <td>robert@example.com</td>
+        <td>Viewer</td>
+        <td>Inactive</td>
+      </tr>
+      <tr>
+        <td>Maria Garcia</td>
+        <td>maria@example.com</td>
+        <td>Editor</td>
+        <td>Active</td>
+      </tr>
+      <tr>
+        <td>David Lee</td>
+        <td>david@example.com</td>
+        <td>Viewer</td>
+        <td>Pending</td>
+      </tr>
+    </tbody>
+  </table>
+`;
+const Template = (args) => {
+    const attrs = [];
+    if (args.striped)
+        attrs.push('striped');
+    if (args.bordered)
+        attrs.push('bordered');
+    if (args.hoverable)
+        attrs.push('hoverable');
+    if (args.compact)
+        attrs.push('compact');
+    if (args.stickyHeader)
+        attrs.push('sticky-header');
+    return `<ts-table ${attrs.join(' ')}>${sampleTable}</ts-table>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        striped: false,
+        bordered: false,
+        hoverable: false,
+        compact: false,
+        stickyHeader: false,
+    },
+});
+export const Striped = () => `
+  <ts-table striped>${sampleTable}</ts-table>
+`;
+export const Bordered = () => `
+  <ts-table bordered>${sampleTable}</ts-table>
+`;
+export const Hoverable = () => `
+  <ts-table hoverable>${sampleTable}</ts-table>
+`;
+export const Compact = () => `
+  <ts-table compact>${sampleTable}</ts-table>
+`;
+export const AllFeatures = () => `
+  <ts-table striped bordered hoverable>${sampleTable}</ts-table>
+`;
+export const StickyHeader = () => `
+  <div style="max-height: 250px; overflow: auto;">
+    <ts-table sticky-header hoverable>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th>Department</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><td>James Kennedy</td><td>james@example.com</td><td>Admin</td><td>Engineering</td><td>Active</td></tr>
+          <tr><td>Alice Smith</td><td>alice@example.com</td><td>Editor</td><td>Marketing</td><td>Active</td></tr>
+          <tr><td>Robert Chen</td><td>robert@example.com</td><td>Viewer</td><td>Sales</td><td>Inactive</td></tr>
+          <tr><td>Maria Garcia</td><td>maria@example.com</td><td>Editor</td><td>Design</td><td>Active</td></tr>
+          <tr><td>David Lee</td><td>david@example.com</td><td>Viewer</td><td>Support</td><td>Pending</td></tr>
+          <tr><td>Sarah Wilson</td><td>sarah@example.com</td><td>Admin</td><td>Engineering</td><td>Active</td></tr>
+          <tr><td>Tom Brown</td><td>tom@example.com</td><td>Editor</td><td>Content</td><td>Active</td></tr>
+          <tr><td>Lisa Wang</td><td>lisa@example.com</td><td>Viewer</td><td>HR</td><td>Inactive</td></tr>
+          <tr><td>Michael Park</td><td>michael@example.com</td><td>Editor</td><td>Finance</td><td>Active</td></tr>
+          <tr><td>Emma Davis</td><td>emma@example.com</td><td>Admin</td><td>Operations</td><td>Active</td></tr>
+        </tbody>
+      </table>
+    </ts-table>
+  </div>
+`;
+export const CompactBordered = () => `
+  <ts-table compact bordered striped>
+    <table>
+      <thead>
+        <tr>
+          <th>Order ID</th>
+          <th>Customer</th>
+          <th>Product</th>
+          <th>Quantity</th>
+          <th>Total</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><td>#ORD-001</td><td>James Kennedy</td><td>Widget Pro</td><td>3</td><td>$149.97</td><td>Shipped</td></tr>
+        <tr><td>#ORD-002</td><td>Alice Smith</td><td>Gadget Plus</td><td>1</td><td>$79.99</td><td>Processing</td></tr>
+        <tr><td>#ORD-003</td><td>Robert Chen</td><td>Tool Kit</td><td>2</td><td>$199.98</td><td>Delivered</td></tr>
+        <tr><td>#ORD-004</td><td>Maria Garcia</td><td>Widget Pro</td><td>5</td><td>$249.95</td><td>Shipped</td></tr>
+        <tr><td>#ORD-005</td><td>David Lee</td><td>Gadget Plus</td><td>1</td><td>$79.99</td><td>Cancelled</td></tr>
+      </tbody>
+    </table>
+  </ts-table>
+`;
+//# sourceMappingURL=table.stories.js.map

package/dist/collection/components/table/table.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table/table.stories.ts"],"names":[],"mappings":"AAAA,oCAAoC;AAEpC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,4CAA4C,EAAE;QAC1F,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,4BAA4B,EAAE;QAC3E,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,2BAA2B,EAAE;QAC3E,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,0CAA0C,EAAE;QACxF,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,oDAAoD,EAAE;KACxG;CACF,CAAC;AAEF,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CnB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxC,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,IAAI,CAAC,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5C,IAAI,IAAI,CAAC,OAAO;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxC,IAAI,IAAI,CAAC,YAAY;QAAE,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,WAAW,aAAa,CAAC;AAClE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,KAAK;QACd,YAAY,EAAE,KAAK;KACpB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAW,EAAE,CAAC;sBACf,WAAW;CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;uBACf,WAAW;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;wBACf,WAAW;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAW,EAAE,CAAC;sBACf,WAAW;CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;yCACA,WAAW;CACnD,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BzC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;CAsB5C,CAAC","sourcesContent":["// Hand-written stories for ts-table\n\nexport default {\n  title: 'Components/Table',\n  tags: ['autodocs'],\n  argTypes: {\n    striped: { control: 'boolean', description: 'Applies alternating row background colors.' },\n    bordered: { control: 'boolean', description: 'Adds borders to all cells.' },\n    hoverable: { control: 'boolean', description: 'Highlights rows on hover.' },\n    compact: { control: 'boolean', description: 'Reduces cell padding for denser display.' },\n    stickyHeader: { control: 'boolean', description: 'Makes the table header stick to the top on scroll.' },\n  },\n};\n\nconst sampleTable = `\n  <table>\n    <thead>\n      <tr>\n        <th>Name</th>\n        <th>Email</th>\n        <th>Role</th>\n        <th>Status</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>James Kennedy</td>\n        <td>james@example.com</td>\n        <td>Admin</td>\n        <td>Active</td>\n      </tr>\n      <tr>\n        <td>Alice Smith</td>\n        <td>alice@example.com</td>\n        <td>Editor</td>\n        <td>Active</td>\n      </tr>\n      <tr>\n        <td>Robert Chen</td>\n        <td>robert@example.com</td>\n        <td>Viewer</td>\n        <td>Inactive</td>\n      </tr>\n      <tr>\n        <td>Maria Garcia</td>\n        <td>maria@example.com</td>\n        <td>Editor</td>\n        <td>Active</td>\n      </tr>\n      <tr>\n        <td>David Lee</td>\n        <td>david@example.com</td>\n        <td>Viewer</td>\n        <td>Pending</td>\n      </tr>\n    </tbody>\n  </table>\n`;\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.striped) attrs.push('striped');\n  if (args.bordered) attrs.push('bordered');\n  if (args.hoverable) attrs.push('hoverable');\n  if (args.compact) attrs.push('compact');\n  if (args.stickyHeader) attrs.push('sticky-header');\n  return `<ts-table ${attrs.join(' ')}>${sampleTable}</ts-table>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    striped: false,\n    bordered: false,\n    hoverable: false,\n    compact: false,\n    stickyHeader: false,\n  },\n});\n\nexport const Striped = (): string => `\n  <ts-table striped>${sampleTable}</ts-table>\n`;\n\nexport const Bordered = (): string => `\n  <ts-table bordered>${sampleTable}</ts-table>\n`;\n\nexport const Hoverable = (): string => `\n  <ts-table hoverable>${sampleTable}</ts-table>\n`;\n\nexport const Compact = (): string => `\n  <ts-table compact>${sampleTable}</ts-table>\n`;\n\nexport const AllFeatures = (): string => `\n  <ts-table striped bordered hoverable>${sampleTable}</ts-table>\n`;\n\nexport const StickyHeader = (): string => `\n  <div style=\"max-height: 250px; overflow: auto;\">\n    <ts-table sticky-header hoverable>\n      <table>\n        <thead>\n          <tr>\n            <th>Name</th>\n            <th>Email</th>\n            <th>Role</th>\n            <th>Department</th>\n            <th>Status</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr><td>James Kennedy</td><td>james@example.com</td><td>Admin</td><td>Engineering</td><td>Active</td></tr>\n          <tr><td>Alice Smith</td><td>alice@example.com</td><td>Editor</td><td>Marketing</td><td>Active</td></tr>\n          <tr><td>Robert Chen</td><td>robert@example.com</td><td>Viewer</td><td>Sales</td><td>Inactive</td></tr>\n          <tr><td>Maria Garcia</td><td>maria@example.com</td><td>Editor</td><td>Design</td><td>Active</td></tr>\n          <tr><td>David Lee</td><td>david@example.com</td><td>Viewer</td><td>Support</td><td>Pending</td></tr>\n          <tr><td>Sarah Wilson</td><td>sarah@example.com</td><td>Admin</td><td>Engineering</td><td>Active</td></tr>\n          <tr><td>Tom Brown</td><td>tom@example.com</td><td>Editor</td><td>Content</td><td>Active</td></tr>\n          <tr><td>Lisa Wang</td><td>lisa@example.com</td><td>Viewer</td><td>HR</td><td>Inactive</td></tr>\n          <tr><td>Michael Park</td><td>michael@example.com</td><td>Editor</td><td>Finance</td><td>Active</td></tr>\n          <tr><td>Emma Davis</td><td>emma@example.com</td><td>Admin</td><td>Operations</td><td>Active</td></tr>\n        </tbody>\n      </table>\n    </ts-table>\n  </div>\n`;\n\nexport const CompactBordered = (): string => `\n  <ts-table compact bordered striped>\n    <table>\n      <thead>\n        <tr>\n          <th>Order ID</th>\n          <th>Customer</th>\n          <th>Product</th>\n          <th>Quantity</th>\n          <th>Total</th>\n          <th>Status</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr><td>#ORD-001</td><td>James Kennedy</td><td>Widget Pro</td><td>3</td><td>$149.97</td><td>Shipped</td></tr>\n        <tr><td>#ORD-002</td><td>Alice Smith</td><td>Gadget Plus</td><td>1</td><td>$79.99</td><td>Processing</td></tr>\n        <tr><td>#ORD-003</td><td>Robert Chen</td><td>Tool Kit</td><td>2</td><td>$199.98</td><td>Delivered</td></tr>\n        <tr><td>#ORD-004</td><td>Maria Garcia</td><td>Widget Pro</td><td>5</td><td>$249.95</td><td>Shipped</td></tr>\n        <tr><td>#ORD-005</td><td>David Lee</td><td>Gadget Plus</td><td>1</td><td>$79.99</td><td>Cancelled</td></tr>\n      </tbody>\n    </table>\n  </ts-table>\n`;\n"]}

package/dist/collection/components/tabs/tab-panel.css

@@ -0,0 +1,11 @@
+/* ==========================================================================
+   ts-tab-panel — Shadow DOM Scoped Styles
+   ========================================================================== */
+
+:host {
+  display: block;
+}
+
+.tab-panel {
+  outline: none;
+}

package/dist/collection/components/tabs/tab-panel.js

@@ -0,0 +1,116 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for panel content.
+ *
+ * @part panel - The panel container element.
+ */
+export class TsTabPanel {
+    hostEl;
+    /** The label text displayed in the tab button. */
+    tab;
+    /** Unique identifier for this tab panel. */
+    value;
+    /** Whether this tab is disabled. */
+    disabled = false;
+    /** Optional icon name displayed before the tab label. */
+    icon;
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: 'dec8c9d7d1f32e6f5aef0d4bfbde8d62dd91d865' }, h("div", { key: '14de5c9f6ff8c8d56733fc53088da96064e6bdc6', class: "tab-panel", part: "panel", role: "tabpanel" }, h("slot", { key: '9a715c140d76ef238952f5b399cb1443af399432' }))));
+    }
+    static get is() { return "ts-tab-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tab-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tab-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tab": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text displayed in the tab button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tab"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique identifier for this tab panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this tab is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon name displayed before the tab label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+}
+//# sourceMappingURL=tab-panel.js.map

package/dist/collection/components/tabs/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE;;;;GAIG;AAMH,MAAM,OAAO,UAAU;IACV,MAAM,CAAe;IAEhC,kDAAkD;IAC1C,GAAG,CAAU;IAErB,4CAA4C;IACnB,KAAK,CAAU;IAExC,oCAAoC;IACX,QAAQ,GAAG,KAAK,CAAC;IAE1C,yDAAyD;IACjD,IAAI,CAAU;IAEtB,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU;gBACjD,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n/**\n * @slot - Default slot for panel content.\n *\n * @part panel - The panel container element.\n */\n@Component({\n  tag: 'ts-tab-panel',\n  styleUrl: 'tab-panel.css',\n  shadow: true,\n})\nexport class TsTabPanel {\n  @Element() hostEl!: HTMLElement;\n\n  /** The label text displayed in the tab button. */\n  @Prop() tab!: string;\n\n  /** Unique identifier for this tab panel. */\n  @Prop({ reflect: true }) value!: string;\n\n  /** Whether this tab is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Optional icon name displayed before the tab label. */\n  @Prop() icon?: string;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host>\n        <div class=\"tab-panel\" part=\"panel\" role=\"tabpanel\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tabs/tab-panel.stories.js

@@ -0,0 +1,4 @@
+// Stories for ts-tab-panel are in the parent component's stories file
+// This file exists only to prevent auto-generation
+export default { title: 'Internal/tab-panel', tags: ['!autodocs'] };
+//# sourceMappingURL=tab-panel.stories.js.map

package/dist/collection/components/tabs/tab-panel.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.stories.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,mDAAmD;AAEnD,eAAe,EAAE,KAAK,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC","sourcesContent":["// Stories for ts-tab-panel are in the parent component's stories file\n// This file exists only to prevent auto-generation\n\nexport default { title: 'Internal/tab-panel', tags: ['!autodocs'] };\n"]}

package/dist/collection/components/tabs/tabs.css

@@ -0,0 +1,134 @@
+/* ==========================================================================
+   ts-tabs — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-tabs-border-color   Border color for tab bar
+     --ts-tabs-active-color   Active tab indicator color
+     --ts-tabs-radius         Border radius for enclosed/pill tabs
+   ========================================================================== */
+
+:host {
+  display: block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-tabs-border-color: var(--ts-color-border-default);
+  --ts-tabs-active-color: var(--ts-color-interactive-primary);
+  --ts-tabs-radius: var(--ts-radius-md);
+}
+
+/* ---- Tab list ---- */
+.tabs__tablist {
+  display: flex;
+  gap: var(--ts-spacing-1);
+  border-block-end: 2px solid var(--ts-tabs-border-color);
+}
+
+/* ---- Tab button base ---- */
+.tabs__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ts-spacing-1);
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-weight: var(--ts-font-weight-semi);
+  color: var(--ts-color-text-secondary);
+  cursor: pointer;
+  position: relative;
+  white-space: nowrap;
+  transition:
+    color var(--ts-transition-fast),
+    background-color var(--ts-transition-fast),
+    border-color var(--ts-transition-fast);
+  outline: none;
+  margin-block-end: -2px;
+  border-block-end: 2px solid transparent;
+}
+
+.tabs__tab:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+}
+
+.tabs__tab:hover:not([disabled]) {
+  color: var(--ts-color-text-primary);
+}
+
+/* ---- Active tab (line variant) ---- */
+.tabs__tab--active {
+  color: var(--ts-tabs-active-color);
+  border-block-end-color: var(--ts-tabs-active-color);
+}
+
+/* ---- Disabled ---- */
+.tabs__tab--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---- Sizes ---- */
+:host([size="sm"]) .tabs__tab {
+  padding: var(--ts-spacing-1) var(--ts-spacing-3);
+  font-size: var(--ts-font-size-sm);
+}
+
+:host([size="md"]) .tabs__tab {
+  padding: var(--ts-spacing-2) var(--ts-spacing-4);
+  font-size: var(--ts-font-size-md);
+}
+
+:host([size="lg"]) .tabs__tab {
+  padding: var(--ts-spacing-3) var(--ts-spacing-5);
+  font-size: var(--ts-font-size-lg);
+}
+
+/* ---- Enclosed variant ---- */
+:host([variant="enclosed"]) .tabs__tablist {
+  gap: 0;
+  border-block-end: 2px solid var(--ts-tabs-border-color);
+}
+
+:host([variant="enclosed"]) .tabs__tab {
+  border: 2px solid transparent;
+  border-block-end: 2px solid var(--ts-tabs-border-color);
+  border-start-start-radius: var(--ts-tabs-radius);
+  border-start-end-radius: var(--ts-tabs-radius);
+  margin-block-end: -2px;
+}
+
+:host([variant="enclosed"]) .tabs__tab--active {
+  border-color: var(--ts-tabs-border-color);
+  border-block-end-color: var(--ts-color-bg-surface);
+  background-color: var(--ts-color-bg-surface);
+  color: var(--ts-tabs-active-color);
+}
+
+/* ---- Pill variant ---- */
+:host([variant="pill"]) .tabs__tablist {
+  border-block-end: none;
+  gap: var(--ts-spacing-1);
+  background-color: var(--ts-color-bg-subtle);
+  border-radius: var(--ts-tabs-radius);
+  padding: var(--ts-spacing-1);
+}
+
+:host([variant="pill"]) .tabs__tab {
+  border-block-end: none;
+  border-radius: var(--ts-tabs-radius);
+  margin-block-end: 0;
+}
+
+:host([variant="pill"]) .tabs__tab--active {
+  background-color: var(--ts-color-bg-surface);
+  color: var(--ts-tabs-active-color);
+  box-shadow: var(--ts-shadow-sm);
+}
+
+/* ---- Panels ---- */
+.tabs__panels {
+  padding-block-start: var(--ts-spacing-4);
+}
+
+/* ---- Tab icon ---- */
+.tabs__tab-icon {
+  font-size: 1em;
+}

package/dist/collection/components/tabs/tabs.js

@@ -0,0 +1,213 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for `ts-tab-panel` children.
+ *
+ * @part tablist - The tab button container.
+ * @part tab - Each individual tab button.
+ * @part tab-active - The currently active tab button.
+ * @part panels - The panel container.
+ */
+export class TsTabs {
+    hostEl;
+    /** The value of the currently active tab. */
+    value;
+    /** Visual variant of the tab bar. */
+    variant = 'line';
+    /** The size of the tab buttons. */
+    size = 'md';
+    /** Emitted when the active tab changes. */
+    tsChange;
+    handleValueChange() {
+        this.updatePanelVisibility();
+    }
+    componentDidLoad() {
+        // Default to first non-disabled tab if no value set
+        if (!this.value) {
+            const panels = this.getPanels();
+            const firstEnabled = panels.find((p) => !p.hasAttribute('disabled'));
+            if (firstEnabled) {
+                this.value = firstEnabled.getAttribute('value') || '';
+            }
+        }
+        this.updatePanelVisibility();
+    }
+    getPanels() {
+        return Array.from(this.hostEl.querySelectorAll('ts-tab-panel'));
+    }
+    getTabData() {
+        return this.getPanels().map((panel) => ({
+            tab: panel.getAttribute('tab') || '',
+            value: panel.getAttribute('value') || '',
+            disabled: panel.hasAttribute('disabled'),
+            icon: panel.getAttribute('icon') || undefined,
+        }));
+    }
+    updatePanelVisibility() {
+        this.getPanels().forEach((panel) => {
+            const isActive = panel.getAttribute('value') === this.value;
+            panel.style.display = isActive ? '' : 'none';
+        });
+    }
+    handleTabClick(tabValue, disabled) {
+        if (disabled || tabValue === this.value)
+            return;
+        this.value = tabValue;
+        this.tsChange.emit({ value: tabValue });
+        this.updatePanelVisibility();
+    }
+    handleKeydown = (event) => {
+        const tabs = this.getTabData();
+        const enabledTabs = tabs.filter((t) => !t.disabled);
+        const currentIndex = enabledTabs.findIndex((t) => t.value === this.value);
+        let newIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                newIndex = (currentIndex + 1) % enabledTabs.length;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                newIndex = (currentIndex - 1 + enabledTabs.length) % enabledTabs.length;
+                break;
+            case 'Home':
+                event.preventDefault();
+                newIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                newIndex = enabledTabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        const newTab = enabledTabs[newIndex];
+        if (newTab) {
+            this.value = newTab.value;
+            this.tsChange.emit({ value: newTab.value });
+            this.updatePanelVisibility();
+            // Focus the new tab button
+            const tabButtons = this.hostEl.shadowRoot?.querySelectorAll('[role="tab"]');
+            const allTabIndex = tabs.findIndex((t) => t.value === newTab.value);
+            tabButtons?.[allTabIndex]?.focus();
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const tabs = this.getTabData();
+        return (h(Host, { key: '4494e457803734a1e75439fce33da557d2aa9b2e', class: {
+                'ts-tabs': true,
+                [`ts-tabs--${this.variant}`]: true,
+                [`ts-tabs--${this.size}`]: true,
+            } }, h("div", { key: '761806ffca4e983be0e85fa711eb30124a42a283', class: "tabs__tablist", part: "tablist", role: "tablist", onKeyDown: this.handleKeydown }, tabs.map((t) => {
+            const isActive = t.value === this.value;
+            return (h("button", { class: {
+                    'tabs__tab': true,
+                    'tabs__tab--active': isActive,
+                    'tabs__tab--disabled': t.disabled,
+                }, part: isActive ? 'tab tab-active' : 'tab', role: "tab", type: "button", "aria-selected": isActive ? 'true' : 'false', "aria-disabled": t.disabled ? 'true' : undefined, tabindex: isActive ? 0 : -1, disabled: t.disabled, onClick: () => this.handleTabClick(t.value, t.disabled) }, t.icon && h("ts-icon", { name: t.icon, class: "tabs__tab-icon" }), t.tab));
+        })), h("div", { key: '3e6bb533aee14347410a621435fa695233bacb33', class: "tabs__panels", part: "panels" }, h("slot", { key: 'ccf531fbebef82784b1d412ef72828072595f7ee' }))));
+    }
+    static get is() { return "ts-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the currently active tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'line' | 'enclosed' | 'pill'",
+                    "resolved": "\"enclosed\" | \"line\" | \"pill\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant of the tab bar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'line'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the tab buttons."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsChange",
+                "name": "tsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the active tab changes."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=tabs.js.map