@tessera-ui/core 0.4.0

package/dist/collection/components/nav/nav-item.css

@@ -0,0 +1,73 @@
+/* ==========================================================================
+   ts-nav-item — Shadow DOM Scoped Styles
+   ========================================================================== */
+
+:host {
+  display: block;
+  font-family: var(--ts-font-family-base);
+}
+
+.nav-item__wrapper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-item__link {
+  display: flex;
+  align-items: center;
+  gap: var(--ts-spacing-2);
+  padding: var(--ts-spacing-2) var(--ts-spacing-3);
+  border: none;
+  border-radius: var(--ts-radius-md);
+  background: transparent;
+  color: var(--ts-color-text-secondary);
+  font-family: var(--ts-font-family-base);
+  font-size: var(--ts-font-size-sm);
+  font-weight: var(--ts-font-weight-medium);
+  text-decoration: none;
+  cursor: pointer;
+  width: 100%;
+  text-align: start;
+  transition:
+    background-color var(--ts-transition-fast),
+    color var(--ts-transition-fast);
+}
+
+.nav-item__link:hover:not([disabled]):not([aria-disabled="true"]) {
+  background-color: var(--ts-color-bg-hover);
+  color: var(--ts-color-text-primary);
+}
+
+.nav-item__link:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+  outline: none;
+}
+
+/* ---- Active state ---- */
+:host([active]) .nav-item__link {
+  background-color: var(--ts-color-interactive-primary-subtle, rgba(59, 130, 246, 0.1));
+  color: var(--ts-color-interactive-primary);
+  font-weight: var(--ts-font-weight-semi);
+}
+
+/* ---- Disabled state ---- */
+:host([disabled]) .nav-item__link {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ---- Icon ---- */
+.nav-item__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ---- Label ---- */
+.nav-item__label {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}

package/dist/collection/components/nav/nav-item.js

@@ -0,0 +1,154 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for label text.
+ *
+ * @part item - The list item wrapper.
+ * @part link - The anchor or button element.
+ * @part icon - The icon wrapper.
+ * @part label - The label wrapper.
+ */
+export class TsNavItem {
+    /** The URL to navigate to. */
+    href;
+    /** Whether this item is currently active. */
+    active = false;
+    /** Whether this item is disabled. */
+    disabled = false;
+    /** Lucide icon name to display. */
+    icon;
+    /** Emitted when the nav item is selected. */
+    tsSelect;
+    handleClick = (event) => {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.tsSelect.emit();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const Tag = this.href ? 'a' : 'button';
+        const attrs = this.href
+            ? { href: this.disabled ? undefined : this.href }
+            : { type: 'button', disabled: this.disabled };
+        return (h(Host, { key: 'edc70c61d701ba9765e37d18e49f1f9d198dde85', class: {
+                'ts-nav-item': true,
+                'ts-nav-item--active': this.active,
+                'ts-nav-item--disabled': this.disabled,
+            } }, h("li", { key: 'fa4090e6dd631e6caaf89c84b7735c64f25d46d0', class: "nav-item__wrapper", part: "item", role: "listitem" }, h(Tag, { key: 'eb44e83812a47b281719155a49633de0e960a19e', ...attrs, class: "nav-item__link", part: "link", "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick }, this.icon && (h("span", { key: 'a12ec79c7dc7d7a1bf53c4d0c25fc7ed8c4d1fcc', class: "nav-item__icon", part: "icon", "aria-hidden": "true" }, h("ts-icon", { key: '5268366fada499e81d589b4b21c08065b6d83dd4', name: this.icon, size: "sm" }))), h("span", { key: 'bef8a388eab007fa739025fbb242f490204cad1f', class: "nav-item__label", part: "label" }, h("slot", { key: '9154d4a5f1075ecaa077998198bf6cd0258449d3' }))))));
+    }
+    static get is() { return "ts-nav-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nav-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nav-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL to navigate to."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this item is currently active."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this item 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": "Lucide icon name to display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsSelect",
+                "name": "tsSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the nav item is selected."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=nav-item.js.map

package/dist/collection/components/nav/nav-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-item.js","sourceRoot":"","sources":["../../../src/components/nav/nav-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGhE;;;;;;;GAOG;AAMH,MAAM,OAAO,SAAS;IACpB,8BAA8B;IACtB,IAAI,CAAU;IAEtB,6CAA6C;IACpB,MAAM,GAAG,KAAK,CAAC;IAExC,qCAAqC;IACZ,QAAQ,GAAG,KAAK,CAAC;IAE1C,mCAAmC;IAC3B,IAAI,CAAU;IAEtB,6CAA6C;IACX,QAAQ,CAAsB;IAExD,WAAW,GAAG,CAAC,KAAiB,EAAQ,EAAE;QAChD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;IAEF,4EAA4E;IAC5E,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QACvC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI;YACrB,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE;YACjD,CAAC,CAAC,EAAE,IAAI,EAAE,QAAiB,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEzD,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,qBAAqB,EAAE,IAAI,CAAC,MAAM;gBAClC,uBAAuB,EAAE,IAAI,CAAC,QAAQ;aACvC;YAED,2DAAI,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,UAAU;gBACvD,EAAC,GAAG,wDACE,KAAK,EACT,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,MAAM,kBACG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,WAAW;oBAExB,IAAI,CAAC,IAAI,IAAI,CACZ,6DAAM,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM;wBACzD,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACjC,CACR;oBACD,6DAAM,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,OAAO;wBACxC,8DAAQ,CACH,CACH,CACH,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, h, Host } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for label text.\n *\n * @part item - The list item wrapper.\n * @part link - The anchor or button element.\n * @part icon - The icon wrapper.\n * @part label - The label wrapper.\n */\n@Component({\n  tag: 'ts-nav-item',\n  styleUrl: 'nav-item.css',\n  shadow: true,\n})\nexport class TsNavItem {\n  /** The URL to navigate to. */\n  @Prop() href?: string;\n\n  /** Whether this item is currently active. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Whether this item is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Lucide icon name to display. */\n  @Prop() icon?: string;\n\n  /** Emitted when the nav item is selected. */\n  @Event({ eventName: 'tsSelect' }) tsSelect!: EventEmitter<void>;\n\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.tsSelect.emit();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const Tag = this.href ? 'a' : 'button';\n    const attrs = this.href\n      ? { href: this.disabled ? undefined : this.href }\n      : { type: 'button' as const, disabled: this.disabled };\n\n    return (\n      <Host\n        class={{\n          'ts-nav-item': true,\n          'ts-nav-item--active': this.active,\n          'ts-nav-item--disabled': this.disabled,\n        }}\n      >\n        <li class=\"nav-item__wrapper\" part=\"item\" role=\"listitem\">\n          <Tag\n            {...attrs}\n            class=\"nav-item__link\"\n            part=\"link\"\n            aria-current={this.active ? 'page' : undefined}\n            aria-disabled={this.disabled ? 'true' : undefined}\n            onClick={this.handleClick}\n          >\n            {this.icon && (\n              <span class=\"nav-item__icon\" part=\"icon\" aria-hidden=\"true\">\n                <ts-icon name={this.icon} size=\"sm\" />\n              </span>\n            )}\n            <span class=\"nav-item__label\" part=\"label\">\n              <slot />\n            </span>\n          </Tag>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/nav/nav-item.stories.js

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

package/dist/collection/components/nav/nav-item.stories.js.map

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

package/dist/collection/components/nav/nav.css

@@ -0,0 +1,48 @@
+/* ==========================================================================
+   ts-nav — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-nav-bg            Navigation background
+     --ts-nav-active-bg     Active item background
+     --ts-nav-active-color  Active item text color
+     --ts-nav-width         Sidebar width
+   ========================================================================== */
+
+:host {
+  display: block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-nav-bg: transparent;
+  --ts-nav-active-bg: var(--ts-color-interactive-primary-subtle);
+  --ts-nav-active-color: var(--ts-color-interactive-primary);
+  --ts-nav-width: 240px;
+}
+
+.nav__native {
+  background-color: var(--ts-nav-bg);
+}
+
+.nav__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+/* ---- Sidebar variant ---- */
+:host([variant="sidebar"]) .nav__list {
+  flex-direction: column;
+  gap: var(--ts-spacing-1);
+  inline-size: var(--ts-nav-width);
+}
+
+:host([variant="sidebar"][collapsed]) .nav__list {
+  inline-size: auto;
+}
+
+/* ---- Horizontal variant ---- */
+:host([variant="horizontal"]) .nav__list {
+  flex-direction: row;
+  gap: var(--ts-spacing-1);
+  align-items: center;
+}

package/dist/collection/components/nav/nav.js

@@ -0,0 +1,78 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for ts-nav-item children.
+ *
+ * @part nav - The native nav element.
+ * @part list - The list container.
+ */
+export class TsNav {
+    /** The navigation layout variant. */
+    variant = 'sidebar';
+    /** Whether the sidebar nav is collapsed (icons only). */
+    collapsed = false;
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: 'dcfbdce63e36faf81a1e4967837da40c9059530a', class: {
+                'ts-nav': true,
+                [`ts-nav--${this.variant}`]: true,
+                'ts-nav--collapsed': this.collapsed,
+            } }, h("nav", { key: 'f8c05146a0c6435b7382e12ce8c0b2c5a27a962a', class: "nav__native", part: "nav", "aria-label": "Navigation" }, h("ul", { key: 'dbd02ae09363b4c03832e5a8d5f60cc465626c55', class: "nav__list", part: "list", role: "list" }, h("slot", { key: '2b1aa23209f60b7bc382a630d910e4bada9c6adc' })))));
+    }
+    static get is() { return "ts-nav"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nav.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nav.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sidebar' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"sidebar\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The navigation layout variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'sidebar'"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the sidebar nav is collapsed (icons only)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "collapsed",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=nav.js.map

package/dist/collection/components/nav/nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav.js","sourceRoot":"","sources":["../../../src/components/nav/nav.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;GAKG;AAMH,MAAM,OAAO,KAAK;IAChB,qCAAqC;IACZ,OAAO,GAA6B,SAAS,CAAC;IAEvE,yDAAyD;IAChC,SAAS,GAAG,KAAK,CAAC;IAE3C,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACjC,mBAAmB,EAAE,IAAI,CAAC,SAAS;aACpC;YAED,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,KAAK,gBAAY,YAAY;gBACzD,2DAAI,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM;oBAC3C,8DAAQ,CACL,CACD,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for ts-nav-item children.\n *\n * @part nav - The native nav element.\n * @part list - The list container.\n */\n@Component({\n  tag: 'ts-nav',\n  styleUrl: 'nav.css',\n  shadow: true,\n})\nexport class TsNav {\n  /** The navigation layout variant. */\n  @Prop({ reflect: true }) variant: 'sidebar' | 'horizontal' = 'sidebar';\n\n  /** Whether the sidebar nav is collapsed (icons only). */\n  @Prop({ reflect: true }) collapsed = false;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-nav': true,\n          [`ts-nav--${this.variant}`]: true,\n          'ts-nav--collapsed': this.collapsed,\n        }}\n      >\n        <nav class=\"nav__native\" part=\"nav\" aria-label=\"Navigation\">\n          <ul class=\"nav__list\" part=\"list\" role=\"list\">\n            <slot />\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,106 @@
+// Hand-written stories for ts-nav
+export default {
+    title: 'Components/Nav',
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['sidebar', 'horizontal'],
+            description: 'The navigation layout variant.',
+        },
+        collapsed: {
+            control: 'boolean',
+            description: 'Whether the sidebar nav is collapsed (icons only).',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.variant !== undefined)
+        attrs.push(`variant="${args.variant}"`);
+    if (args.collapsed)
+        attrs.push('collapsed');
+    return `
+    <ts-nav ${attrs.join(' ')}>
+      <ts-nav-item icon="layout-dashboard" active>Dashboard</ts-nav-item>
+      <ts-nav-item icon="users">Users</ts-nav-item>
+      <ts-nav-item icon="settings">Settings</ts-nav-item>
+      <ts-nav-item icon="bar-chart-2">Reports</ts-nav-item>
+    </ts-nav>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        variant: 'sidebar',
+        collapsed: false,
+    },
+});
+export const Variants = () => `
+  <div style="display: flex; flex-direction: column; gap: 32px;">
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Sidebar variant</p>
+      <div style="width: 240px;">
+        <ts-nav variant="sidebar">
+          <ts-nav-item icon="layout-dashboard" active>Dashboard</ts-nav-item>
+          <ts-nav-item icon="users">Users</ts-nav-item>
+          <ts-nav-item icon="settings">Settings</ts-nav-item>
+          <ts-nav-item icon="bar-chart-2">Reports</ts-nav-item>
+        </ts-nav>
+      </div>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Horizontal variant</p>
+      <ts-nav variant="horizontal">
+        <ts-nav-item active>Dashboard</ts-nav-item>
+        <ts-nav-item>Users</ts-nav-item>
+        <ts-nav-item>Settings</ts-nav-item>
+        <ts-nav-item>Reports</ts-nav-item>
+      </ts-nav>
+    </div>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; flex-direction: column; gap: 32px;">
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Expanded sidebar</p>
+      <div style="width: 240px;">
+        <ts-nav variant="sidebar">
+          <ts-nav-item icon="layout-dashboard" active>Dashboard</ts-nav-item>
+          <ts-nav-item icon="users">Users</ts-nav-item>
+          <ts-nav-item icon="settings" disabled>Settings</ts-nav-item>
+          <ts-nav-item icon="bar-chart-2">Reports</ts-nav-item>
+        </ts-nav>
+      </div>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Collapsed sidebar (icons only)</p>
+      <div style="width: 64px;">
+        <ts-nav variant="sidebar" collapsed>
+          <ts-nav-item icon="layout-dashboard" active>Dashboard</ts-nav-item>
+          <ts-nav-item icon="users">Users</ts-nav-item>
+          <ts-nav-item icon="settings">Settings</ts-nav-item>
+          <ts-nav-item icon="bar-chart-2">Reports</ts-nav-item>
+        </ts-nav>
+      </div>
+    </div>
+  </div>
+`;
+export const Composition = () => `
+  <div style="display: flex; border: 1px solid #e2e8f0; border-radius: 8px; height: 400px; overflow: hidden;">
+    <div style="width: 240px; border-right: 1px solid #e2e8f0; padding: 16px 0; background: #f8fafc;">
+      <div style="padding: 0 16px 16px; font-family: sans-serif; font-weight: 700; font-size: 18px;">Acme App</div>
+      <ts-nav variant="sidebar">
+        <ts-nav-item icon="layout-dashboard" active href="#">Dashboard</ts-nav-item>
+        <ts-nav-item icon="users" href="#">Users</ts-nav-item>
+        <ts-nav-item icon="file-text" href="#">Documents</ts-nav-item>
+        <ts-nav-item icon="bar-chart-2" href="#">Analytics</ts-nav-item>
+        <ts-nav-item icon="settings" href="#">Settings</ts-nav-item>
+      </ts-nav>
+    </div>
+    <div style="flex: 1; padding: 24px; font-family: sans-serif;">
+      <h2 style="margin: 0 0 8px;">Dashboard</h2>
+      <p style="color: #666;">Welcome back! Here is an overview of your activity.</p>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=nav.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav.stories.js","sourceRoot":"","sources":["../../../src/components/nav/nav.stories.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAElC,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;YAClC,WAAW,EAAE,gCAAgC;SAC9C;QACD,SAAS,EAAE;YACT,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,oDAAoD;SAClE;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5C,OAAO;cACK,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;GAM1B,CAAC;AACJ,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,SAAS;QAClB,SAAS,EAAE,KAAK;KACjB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;CAuBrC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAyBnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;CAiBxC,CAAC","sourcesContent":["// Hand-written stories for ts-nav\n\nexport default {\n  title: 'Components/Nav',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['sidebar', 'horizontal'],\n      description: 'The navigation layout variant.',\n    },\n    collapsed: {\n      control: 'boolean',\n      description: 'Whether the sidebar nav is collapsed (icons only).',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.variant !== undefined) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.collapsed) attrs.push('collapsed');\n  return `\n    <ts-nav ${attrs.join(' ')}>\n      <ts-nav-item icon=\"layout-dashboard\" active>Dashboard</ts-nav-item>\n      <ts-nav-item icon=\"users\">Users</ts-nav-item>\n      <ts-nav-item icon=\"settings\">Settings</ts-nav-item>\n      <ts-nav-item icon=\"bar-chart-2\">Reports</ts-nav-item>\n    </ts-nav>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    variant: 'sidebar',\n    collapsed: false,\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Sidebar variant</p>\n      <div style=\"width: 240px;\">\n        <ts-nav variant=\"sidebar\">\n          <ts-nav-item icon=\"layout-dashboard\" active>Dashboard</ts-nav-item>\n          <ts-nav-item icon=\"users\">Users</ts-nav-item>\n          <ts-nav-item icon=\"settings\">Settings</ts-nav-item>\n          <ts-nav-item icon=\"bar-chart-2\">Reports</ts-nav-item>\n        </ts-nav>\n      </div>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Horizontal variant</p>\n      <ts-nav variant=\"horizontal\">\n        <ts-nav-item active>Dashboard</ts-nav-item>\n        <ts-nav-item>Users</ts-nav-item>\n        <ts-nav-item>Settings</ts-nav-item>\n        <ts-nav-item>Reports</ts-nav-item>\n      </ts-nav>\n    </div>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Expanded sidebar</p>\n      <div style=\"width: 240px;\">\n        <ts-nav variant=\"sidebar\">\n          <ts-nav-item icon=\"layout-dashboard\" active>Dashboard</ts-nav-item>\n          <ts-nav-item icon=\"users\">Users</ts-nav-item>\n          <ts-nav-item icon=\"settings\" disabled>Settings</ts-nav-item>\n          <ts-nav-item icon=\"bar-chart-2\">Reports</ts-nav-item>\n        </ts-nav>\n      </div>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Collapsed sidebar (icons only)</p>\n      <div style=\"width: 64px;\">\n        <ts-nav variant=\"sidebar\" collapsed>\n          <ts-nav-item icon=\"layout-dashboard\" active>Dashboard</ts-nav-item>\n          <ts-nav-item icon=\"users\">Users</ts-nav-item>\n          <ts-nav-item icon=\"settings\">Settings</ts-nav-item>\n          <ts-nav-item icon=\"bar-chart-2\">Reports</ts-nav-item>\n        </ts-nav>\n      </div>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"display: flex; border: 1px solid #e2e8f0; border-radius: 8px; height: 400px; overflow: hidden;\">\n    <div style=\"width: 240px; border-right: 1px solid #e2e8f0; padding: 16px 0; background: #f8fafc;\">\n      <div style=\"padding: 0 16px 16px; font-family: sans-serif; font-weight: 700; font-size: 18px;\">Acme App</div>\n      <ts-nav variant=\"sidebar\">\n        <ts-nav-item icon=\"layout-dashboard\" active href=\"#\">Dashboard</ts-nav-item>\n        <ts-nav-item icon=\"users\" href=\"#\">Users</ts-nav-item>\n        <ts-nav-item icon=\"file-text\" href=\"#\">Documents</ts-nav-item>\n        <ts-nav-item icon=\"bar-chart-2\" href=\"#\">Analytics</ts-nav-item>\n        <ts-nav-item icon=\"settings\" href=\"#\">Settings</ts-nav-item>\n      </ts-nav>\n    </div>\n    <div style=\"flex: 1; padding: 24px; font-family: sans-serif;\">\n      <h2 style=\"margin: 0 0 8px;\">Dashboard</h2>\n      <p style=\"color: #666;\">Welcome back! Here is an overview of your activity.</p>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/pagination/pagination.css

@@ -0,0 +1,102 @@
+/* ==========================================================================
+   ts-pagination — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-pagination-button-size    Button dimensions
+     --ts-pagination-active-bg      Active page background
+     --ts-pagination-active-color   Active page text color
+   ========================================================================== */
+
+:host {
+  display: block;
+
+  --ts-pagination-button-size: 2.25rem;
+  --ts-pagination-active-bg: var(--ts-color-interactive-primary);
+  --ts-pagination-active-color: var(--ts-color-text-on-primary);
+}
+
+.pagination__nav {
+  display: flex;
+  align-items: center;
+  gap: var(--ts-spacing-1);
+}
+
+/* ---- Buttons ---- */
+.pagination__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--ts-pagination-button-size);
+  block-size: var(--ts-pagination-button-size);
+  padding-inline: var(--ts-spacing-2);
+  border: 1px solid var(--ts-color-border-default);
+  border-radius: var(--ts-radius-md);
+  background: transparent;
+  color: var(--ts-color-text-primary);
+  font-family: var(--ts-font-family-base);
+  font-size: var(--ts-font-size-sm);
+  cursor: pointer;
+  transition:
+    background-color var(--ts-transition-fast),
+    border-color var(--ts-transition-fast),
+    color var(--ts-transition-fast);
+  outline: none;
+}
+
+.pagination__button:hover:not(:disabled):not(.pagination__button--active) {
+  background-color: var(--ts-color-bg-subtle);
+  border-color: var(--ts-color-border-strong);
+}
+
+.pagination__button:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+}
+
+.pagination__button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---- Active page ---- */
+.pagination__button--active {
+  background-color: var(--ts-pagination-active-bg);
+  border-color: var(--ts-pagination-active-bg);
+  color: var(--ts-pagination-active-color);
+  font-weight: var(--ts-font-weight-semi);
+}
+
+/* ---- Prev/Next arrows ---- */
+.pagination__prev svg,
+.pagination__next svg {
+  inline-size: 1em;
+  block-size: 1em;
+}
+
+/* ---- Ellipsis ---- */
+.pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--ts-pagination-button-size);
+  block-size: var(--ts-pagination-button-size);
+  color: var(--ts-color-text-tertiary);
+  font-size: var(--ts-font-size-sm);
+  user-select: none;
+}
+
+/* ---- Sizes ---- */
+:host([size="sm"]) {
+  --ts-pagination-button-size: 1.75rem;
+}
+
+:host([size="sm"]) .pagination__button {
+  font-size: var(--ts-font-size-xs);
+}
+
+:host([size="lg"]) {
+  --ts-pagination-button-size: 2.75rem;
+}
+
+:host([size="lg"]) .pagination__button {
+  font-size: var(--ts-font-size-md);
+}