@tessera-ui/core 0.4.0

package/dist/collection/components/banner/banner.js

@@ -0,0 +1,226 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for message content.
+ * @slot action - CTA button.
+ *
+ * @part base - The banner container.
+ * @part icon - The icon wrapper.
+ * @part message - The message wrapper.
+ * @part action - The action slot wrapper.
+ * @part close - The close/dismiss button.
+ */
+export class TsBanner {
+    /** The banner's semantic variant. */
+    variant = 'info';
+    /** Whether the banner can be dismissed. */
+    dismissible = false;
+    /** Optional Lucide icon name. */
+    icon;
+    /** Whether the banner sticks to the top of the viewport. */
+    sticky = false;
+    /** Whether the banner is currently visible. */
+    isVisible = true;
+    /** Emitted when the banner is dismissed. */
+    tsClose;
+    /** Programmatically close the banner. */
+    async close() {
+        this.isVisible = false;
+        this.tsClose.emit();
+    }
+    /** Programmatically show the banner. */
+    async show() {
+        this.isVisible = true;
+    }
+    handleClose = () => {
+        this.close();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    renderDefaultIcon() {
+        const icons = {
+            info: '\u2139',
+            success: '\u2713',
+            warning: '\u26A0',
+            danger: '\u2715',
+            primary: '\u2139',
+            secondary: '\u2139',
+            neutral: '\u2139',
+        };
+        return h("span", { "aria-hidden": "true" }, icons[this.variant] || '\u2139');
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        if (!this.isVisible)
+            return null;
+        const role = this.variant === 'danger' ? 'alert' : 'banner';
+        const ariaLive = this.variant === 'danger' ? 'assertive' : 'polite';
+        return (h(Host, { class: {
+                'ts-banner': true,
+                [`ts-banner--${this.variant}`]: true,
+                'ts-banner--sticky': this.sticky,
+            }, role: role, "aria-live": ariaLive }, h("div", { class: "banner__base", part: "base" }, h("div", { class: "banner__icon", part: "icon" }, this.icon ? h("ts-icon", { name: this.icon }) : this.renderDefaultIcon()), h("div", { class: "banner__message", part: "message" }, h("slot", null)), h("div", { class: "banner__action", part: "action" }, h("slot", { name: "action" })), this.dismissible && (h("button", { class: "banner__close", part: "close", type: "button", "aria-label": "Dismiss banner", onClick: this.handleClose }, "\\u2715")))));
+    }
+    static get is() { return "ts-banner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["banner.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["banner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsVariant",
+                    "resolved": "\"danger\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "TsVariant": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsVariant",
+                            "referenceLocation": "TsVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The banner's semantic variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'info'"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the banner can be dismissed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dismissible",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional Lucide icon name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "sticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the banner sticks to the top of the viewport."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sticky",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsClose",
+                "name": "tsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the banner is dismissed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically close the banner.",
+                    "tags": []
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically show the banner.",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=banner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../src/components/banner/banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, State, h, Host, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsVariant } from '../../types';\n\n/**\n * @slot - Default slot for message content.\n * @slot action - CTA button.\n *\n * @part base - The banner container.\n * @part icon - The icon wrapper.\n * @part message - The message wrapper.\n * @part action - The action slot wrapper.\n * @part close - The close/dismiss button.\n */\n@Component({\n  tag: 'ts-banner',\n  styleUrl: 'banner.css',\n  shadow: true,\n})\nexport class TsBanner {\n  /** The banner's semantic variant. */\n  @Prop({ reflect: true }) variant: TsVariant = 'info';\n\n  /** Whether the banner can be dismissed. */\n  @Prop({ reflect: true }) dismissible = false;\n\n  /** Optional Lucide icon name. */\n  @Prop() icon?: string;\n\n  /** Whether the banner sticks to the top of the viewport. */\n  @Prop({ reflect: true }) sticky = false;\n\n  /** Whether the banner is currently visible. */\n  @State() isVisible = true;\n\n  /** Emitted when the banner is dismissed. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  /** Programmatically close the banner. */\n  @Method()\n  async close(): Promise<void> {\n    this.isVisible = false;\n    this.tsClose.emit();\n  }\n\n  /** Programmatically show the banner. */\n  @Method()\n  async show(): Promise<void> {\n    this.isVisible = true;\n  }\n\n  private handleClose = (): void => {\n    this.close();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderDefaultIcon() {\n    const icons: Record<string, string> = {\n      info: '\\u2139',\n      success: '\\u2713',\n      warning: '\\u26A0',\n      danger: '\\u2715',\n      primary: '\\u2139',\n      secondary: '\\u2139',\n      neutral: '\\u2139',\n    };\n    return <span aria-hidden=\"true\">{icons[this.variant] || '\\u2139'}</span>;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    if (!this.isVisible) return null;\n\n    const role = this.variant === 'danger' ? 'alert' : 'banner';\n    const ariaLive = this.variant === 'danger' ? 'assertive' : 'polite';\n\n    return (\n      <Host\n        class={{\n          'ts-banner': true,\n          [`ts-banner--${this.variant}`]: true,\n          'ts-banner--sticky': this.sticky,\n        }}\n        role={role}\n        aria-live={ariaLive}\n      >\n        <div class=\"banner__base\" part=\"base\">\n          <div class=\"banner__icon\" part=\"icon\">\n            {this.icon ? <ts-icon name={this.icon} /> : this.renderDefaultIcon()}\n          </div>\n\n          <div class=\"banner__message\" part=\"message\">\n            <slot />\n          </div>\n\n          <div class=\"banner__action\" part=\"action\">\n            <slot name=\"action\" />\n          </div>\n\n          {this.dismissible && (\n            <button\n              class=\"banner__close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Dismiss banner\"\n              onClick={this.handleClose}\n            >\n              \\u2715\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,92 @@
+// Hand-written stories for ts-banner
+export default {
+    title: 'Components/Banner',
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],
+            description: 'The banner\'s semantic variant.',
+        },
+        dismissible: {
+            control: 'boolean',
+            description: 'Whether the banner can be dismissed.',
+        },
+        icon: {
+            control: 'text',
+            description: 'Optional Lucide icon name.',
+        },
+        sticky: {
+            control: 'boolean',
+            description: 'Whether the banner sticks to the top of the viewport.',
+        },
+        slotContent: {
+            control: 'text',
+            description: 'Default slot content',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.variant !== undefined)
+        attrs.push(`variant="${args.variant}"`);
+    if (args.dismissible)
+        attrs.push('dismissible');
+    if (args.icon !== undefined && args.icon !== '')
+        attrs.push(`icon="${args.icon}"`);
+    if (args.sticky)
+        attrs.push('sticky');
+    return `<ts-banner ${attrs.join(' ')}>${args.slotContent || ''}</ts-banner>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        variant: 'info',
+        dismissible: true,
+        slotContent: 'System maintenance scheduled for Sunday, March 29 at 2:00 AM UTC.',
+    },
+});
+export const Variants = () => `
+  <div style="display: flex; flex-direction: column; gap: 12px;">
+    <ts-banner variant="info">A new version of the application is available.</ts-banner>
+    <ts-banner variant="success">Your payment was processed successfully.</ts-banner>
+    <ts-banner variant="warning">Your storage is almost full. Consider upgrading your plan.</ts-banner>
+    <ts-banner variant="danger">Your account has been flagged for suspicious activity.</ts-banner>
+    <ts-banner variant="neutral">We have updated our terms of service.</ts-banner>
+    <ts-banner variant="primary">New feature available: Try our advanced analytics dashboard.</ts-banner>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; flex-direction: column; gap: 12px;">
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Dismissible</p>
+      <ts-banner variant="info" dismissible>System maintenance scheduled for Sunday at 2:00 AM UTC.</ts-banner>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Not dismissible</p>
+      <ts-banner variant="warning">This banner cannot be dismissed.</ts-banner>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">With action</p>
+      <ts-banner variant="info" dismissible>
+        A new feature is available.
+        <ts-button slot="action" size="sm" appearance="outline">Learn More</ts-button>
+      </ts-banner>
+    </div>
+  </div>
+`;
+export const Composition = () => `
+  <div style="display: flex; flex-direction: column; gap: 12px;">
+    <ts-banner variant="warning" dismissible>
+      Your trial expires in 3 days. Upgrade now to keep access to all features.
+      <ts-button slot="action" size="sm" variant="warning" appearance="outline">Upgrade Plan</ts-button>
+    </ts-banner>
+    <ts-banner variant="success" dismissible>
+      Welcome! Your account has been verified successfully.
+    </ts-banner>
+    <ts-banner variant="danger">
+      Action required: Please verify your email address to continue.
+      <ts-button slot="action" size="sm" variant="danger" appearance="outline">Verify Email</ts-button>
+    </ts-banner>
+  </div>
+`;
+//# sourceMappingURL=banner.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner.stories.js","sourceRoot":"","sources":["../../../src/components/banner/banner.stories.ts"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC;YACpF,WAAW,EAAE,iCAAiC;SAC/C;QACD,WAAW,EAAE;YACX,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,sCAAsC;SACpD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4BAA4B;SAC1C;QACD,MAAM,EAAE;YACN,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,uDAAuD;SACrE;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sBAAsB;SACpC;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,WAAW;QAAE,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAChD,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IACnF,IAAI,IAAI,CAAC,MAAM;QAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,OAAO,cAAc,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,cAAc,CAAC;AAC/E,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,MAAM;QACf,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,mEAAmE;KACjF;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;CASrC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;CAkBnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;CAcxC,CAAC","sourcesContent":["// Hand-written stories for ts-banner\n\nexport default {\n  title: 'Components/Banner',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],\n      description: 'The banner\\'s semantic variant.',\n    },\n    dismissible: {\n      control: 'boolean',\n      description: 'Whether the banner can be dismissed.',\n    },\n    icon: {\n      control: 'text',\n      description: 'Optional Lucide icon name.',\n    },\n    sticky: {\n      control: 'boolean',\n      description: 'Whether the banner sticks to the top of the viewport.',\n    },\n    slotContent: {\n      control: 'text',\n      description: 'Default slot content',\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.dismissible) attrs.push('dismissible');\n  if (args.icon !== undefined && args.icon !== '') attrs.push(`icon=\"${args.icon}\"`);\n  if (args.sticky) attrs.push('sticky');\n  return `<ts-banner ${attrs.join(' ')}>${args.slotContent || ''}</ts-banner>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    variant: 'info',\n    dismissible: true,\n    slotContent: 'System maintenance scheduled for Sunday, March 29 at 2:00 AM UTC.',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n    <ts-banner variant=\"info\">A new version of the application is available.</ts-banner>\n    <ts-banner variant=\"success\">Your payment was processed successfully.</ts-banner>\n    <ts-banner variant=\"warning\">Your storage is almost full. Consider upgrading your plan.</ts-banner>\n    <ts-banner variant=\"danger\">Your account has been flagged for suspicious activity.</ts-banner>\n    <ts-banner variant=\"neutral\">We have updated our terms of service.</ts-banner>\n    <ts-banner variant=\"primary\">New feature available: Try our advanced analytics dashboard.</ts-banner>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Dismissible</p>\n      <ts-banner variant=\"info\" dismissible>System maintenance scheduled for Sunday at 2:00 AM UTC.</ts-banner>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Not dismissible</p>\n      <ts-banner variant=\"warning\">This banner cannot be dismissed.</ts-banner>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">With action</p>\n      <ts-banner variant=\"info\" dismissible>\n        A new feature is available.\n        <ts-button slot=\"action\" size=\"sm\" appearance=\"outline\">Learn More</ts-button>\n      </ts-banner>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n    <ts-banner variant=\"warning\" dismissible>\n      Your trial expires in 3 days. Upgrade now to keep access to all features.\n      <ts-button slot=\"action\" size=\"sm\" variant=\"warning\" appearance=\"outline\">Upgrade Plan</ts-button>\n    </ts-banner>\n    <ts-banner variant=\"success\" dismissible>\n      Welcome! Your account has been verified successfully.\n    </ts-banner>\n    <ts-banner variant=\"danger\">\n      Action required: Please verify your email address to continue.\n      <ts-button slot=\"action\" size=\"sm\" variant=\"danger\" appearance=\"outline\">Verify Email</ts-button>\n    </ts-banner>\n  </div>\n`;\n"]}

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

@@ -0,0 +1,44 @@
+/* ==========================================================================
+   ts-breadcrumb-item — Shadow DOM Scoped Styles
+   ========================================================================== */
+
+:host {
+  display: contents;
+}
+
+.breadcrumb-item__li {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ts-spacing-1);
+}
+
+.breadcrumb-item__link {
+  color: var(--ts-breadcrumb-link-color, var(--ts-color-interactive-primary));
+  text-decoration: none;
+  transition: color var(--ts-transition-fast);
+}
+
+.breadcrumb-item__link:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.breadcrumb-item__link:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+  border-radius: var(--ts-radius-sm);
+  outline: none;
+}
+
+.breadcrumb-item__text {
+  color: var(--ts-color-text-primary);
+}
+
+:host(.ts-breadcrumb-item--current) .breadcrumb-item__text {
+  font-weight: var(--ts-font-weight-semi);
+}
+
+.breadcrumb-item__separator {
+  color: var(--ts-breadcrumb-separator-color, var(--ts-color-text-tertiary));
+  margin-inline: var(--ts-spacing-1);
+  user-select: none;
+}

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

@@ -0,0 +1,95 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for label text.
+ *
+ * @part link - The anchor or span element.
+ * @part separator - The separator element.
+ */
+export class TsBreadcrumbItem {
+    /** If set, renders as a link. */
+    href;
+    /** Marks this item as the current page. */
+    current = false;
+    /** Separator character (set by parent ts-breadcrumb). */
+    separator;
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const isLink = !!this.href && !this.current;
+        return (h(Host, { key: 'dd4faad961e0208052a4bac87ea55a7ee7c21cb1', class: { 'ts-breadcrumb-item': true, 'ts-breadcrumb-item--current': this.current } }, h("li", { key: '044de74c3a547b7384bb37b9c0a9899e19ad121a', class: "breadcrumb-item__li" }, isLink ? (h("a", { href: this.href, part: "link", class: "breadcrumb-item__link" }, h("slot", null))) : (h("span", { part: "link", class: "breadcrumb-item__text", "aria-current": this.current ? 'page' : undefined }, h("slot", null))), this.separator && (h("span", { key: '429becb1278bd5db6b050535e70811f922a6ffbc', class: "breadcrumb-item__separator", part: "separator", "aria-hidden": "true" }, this.separator)))));
+    }
+    static get is() { return "ts-breadcrumb-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["breadcrumb-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["breadcrumb-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": "If set, renders as a link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "current": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks this item as the current page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current",
+                "defaultValue": "false"
+            },
+            "separator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Separator character (set by parent ts-breadcrumb)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "separator"
+            }
+        };
+    }
+}
+//# sourceMappingURL=breadcrumb-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;GAKG;AAMH,MAAM,OAAO,gBAAgB;IAC3B,iCAAiC;IACzB,IAAI,CAAU;IAEtB,2CAA2C;IAClB,OAAO,GAAG,KAAK,CAAC;IAEzC,yDAAyD;IACjD,SAAS,CAAU;IAE3B,4EAA4E;IAC5E,MAAM;QACJ,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;QAE5C,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,OAAO,EAAE;YACtF,2DAAI,KAAK,EAAC,qBAAqB;gBAC5B,MAAM,CAAC,CAAC,CAAC,CACR,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,uBAAuB;oBAC3D,eAAQ,CACN,CACL,CAAC,CAAC,CAAC,CACF,YACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,uBAAuB,kBACf,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;oBAE/C,eAAQ,CACH,CACR;gBACA,IAAI,CAAC,SAAS,IAAI,CACjB,6DAAM,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,WAAW,iBAAa,MAAM,IACzE,IAAI,CAAC,SAAS,CACV,CACR,CACE,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for label text.\n *\n * @part link - The anchor or span element.\n * @part separator - The separator element.\n */\n@Component({\n  tag: 'ts-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.css',\n  shadow: true,\n})\nexport class TsBreadcrumbItem {\n  /** If set, renders as a link. */\n  @Prop() href?: string;\n\n  /** Marks this item as the current page. */\n  @Prop({ reflect: true }) current = false;\n\n  /** Separator character (set by parent ts-breadcrumb). */\n  @Prop() separator?: string;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const isLink = !!this.href && !this.current;\n\n    return (\n      <Host class={{ 'ts-breadcrumb-item': true, 'ts-breadcrumb-item--current': this.current }}>\n        <li class=\"breadcrumb-item__li\">\n          {isLink ? (\n            <a href={this.href} part=\"link\" class=\"breadcrumb-item__link\">\n              <slot />\n            </a>\n          ) : (\n            <span\n              part=\"link\"\n              class=\"breadcrumb-item__text\"\n              aria-current={this.current ? 'page' : undefined}\n            >\n              <slot />\n            </span>\n          )}\n          {this.separator && (\n            <span class=\"breadcrumb-item__separator\" part=\"separator\" aria-hidden=\"true\">\n              {this.separator}\n            </span>\n          )}\n        </li>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

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

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,26 @@
+/* ==========================================================================
+   ts-breadcrumb — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-breadcrumb-separator-color   Separator color
+     --ts-breadcrumb-link-color        Link color
+   ========================================================================== */
+
+:host {
+  display: block;
+
+  --ts-breadcrumb-separator-color: var(--ts-color-text-tertiary);
+  --ts-breadcrumb-link-color: var(--ts-color-interactive-primary);
+}
+
+.breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ts-spacing-1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-family: var(--ts-font-family-base);
+  font-size: var(--ts-font-size-sm);
+}

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,65 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for ts-breadcrumb-item children.
+ *
+ * @part nav - The nav element.
+ * @part list - The ordered list element.
+ */
+export class TsBreadcrumb {
+    hostEl;
+    /** The separator character between breadcrumb items. */
+    separator = '/';
+    componentDidRender() {
+        const items = this.hostEl.querySelectorAll('ts-breadcrumb-item');
+        items.forEach((item, index) => {
+            if (index < items.length - 1) {
+                item.setAttribute('separator', this.separator);
+            }
+            else {
+                item.removeAttribute('separator');
+            }
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: 'c11ecfd52a2cdd8782fcb6015b3cefbda9739af0', class: "ts-breadcrumb" }, h("nav", { key: '70b0109d5706643be765d9e73559c6bb9447da81', part: "nav", "aria-label": "Breadcrumb" }, h("ol", { key: 'ebca2980c9c6376bdeb44b7743f7894355f2e9c4', part: "list", class: "breadcrumb__list" }, h("slot", { key: '876f0e6f5b11df1e4b5145676adf16f5462c0e72' })))));
+    }
+    static get is() { return "ts-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["breadcrumb.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["breadcrumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "separator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The separator character between breadcrumb items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "separator",
+                "defaultValue": "'/'"
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+}
+//# sourceMappingURL=breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE;;;;;GAKG;AAMH,MAAM,OAAO,YAAY;IACZ,MAAM,CAAe;IAEhC,wDAAwD;IAChD,SAAS,GAAG,GAAG,CAAC;IAExB,kBAAkB;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;QACjE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC5B,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC7B,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YACjD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;YACpC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe;YACzB,4DAAK,IAAI,EAAC,KAAK,gBAAY,YAAY;gBACrC,2DAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB;oBACtC,8DAAQ,CACL,CACD,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n/**\n * @slot - Default slot for ts-breadcrumb-item children.\n *\n * @part nav - The nav element.\n * @part list - The ordered list element.\n */\n@Component({\n  tag: 'ts-breadcrumb',\n  styleUrl: 'breadcrumb.css',\n  shadow: true,\n})\nexport class TsBreadcrumb {\n  @Element() hostEl!: HTMLElement;\n\n  /** The separator character between breadcrumb items. */\n  @Prop() separator = '/';\n\n  componentDidRender(): void {\n    const items = this.hostEl.querySelectorAll('ts-breadcrumb-item');\n    items.forEach((item, index) => {\n      if (index < items.length - 1) {\n        item.setAttribute('separator', this.separator);\n      } else {\n        item.removeAttribute('separator');\n      }\n    });\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host class=\"ts-breadcrumb\">\n        <nav part=\"nav\" aria-label=\"Breadcrumb\">\n          <ol part=\"list\" class=\"breadcrumb__list\">\n            <slot />\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}