@tessera-ui/core 0.4.0

package/dist/cjs/ts-tabs.cjs.entry.js

@@ -0,0 +1,124 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const tabsCss = () => `: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)}.tabs__tablist{display:flex;gap:var(--ts-spacing-1);border-block-end:2px solid var(--ts-tabs-border-color)}.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)}.tabs__tab--active{color:var(--ts-tabs-active-color);border-block-end-color:var(--ts-tabs-active-color)}.tabs__tab--disabled{opacity:0.5;cursor:not-allowed}: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)}: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)}: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)}.tabs__panels{padding-block-start:var(--ts-spacing-4)}.tabs__tab-icon{font-size:1em}`;
+
+const TsTabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsChange = index.createEvent(this, "tsChange");
+    }
+    get hostEl() { return index.getElement(this); }
+    /** 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 (index.h(index.Host, { key: '4494e457803734a1e75439fce33da557d2aa9b2e', class: {
+                'ts-tabs': true,
+                [`ts-tabs--${this.variant}`]: true,
+                [`ts-tabs--${this.size}`]: true,
+            } }, index.h("div", { key: '761806ffca4e983be0e85fa711eb30124a42a283', class: "tabs__tablist", part: "tablist", role: "tablist", onKeyDown: this.handleKeydown }, tabs.map((t) => {
+            const isActive = t.value === this.value;
+            return (index.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 && index.h("ts-icon", { name: t.icon, class: "tabs__tab-icon" }), t.tab));
+        })), index.h("div", { key: '3e6bb533aee14347410a621435fa695233bacb33', class: "tabs__panels", part: "panels" }, index.h("slot", { key: 'ccf531fbebef82784b1d412ef72828072595f7ee' }))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }]
+    }; }
+};
+TsTabs.style = tabsCss();
+
+exports.ts_tabs = TsTabs;
+//# sourceMappingURL=ts-tabs.entry.cjs.js.map
+
+//# sourceMappingURL=ts-tabs.cjs.entry.js.map

package/dist/cjs/ts-tabs.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-tabs.cjs.entry.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,+7EAA+7E,CAAC;;MCgB18E,MAAM,GAAA,MAAA;;;;;;;AAIuB,IAAA,KAAK;;IAGpB,OAAO,GAAiC,MAAM;;IAG9C,IAAI,GAAuB,IAAI;;AAGtB,IAAA,QAAQ;IAG1C,iBAAiB,GAAA;QACf,IAAI,CAAC,qBAAqB,EAAE;;IAG9B,gBAAgB,GAAA;;AAEd,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;AACf,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE;AAC/B,YAAA,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;YACpE,IAAI,YAAY,EAAE;gBAChB,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE;;;QAGzD,IAAI,CAAC,qBAAqB,EAAE;;IAGtB,SAAS,GAAA;AACf,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;;IAGzD,UAAU,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,MAAM;YACtC,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE;YACpC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE;AACxC,YAAA,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC;YACxC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,SAAS;AAC9C,SAAA,CAAC,CAAC;;IAGG,qBAAqB,GAAA;QAC3B,IAAI,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACjC,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,KAAK;AAC1D,YAAA,KAAqB,CAAC,KAAK,CAAC,OAAO,GAAG,QAAQ,GAAG,EAAE,GAAG,MAAM;AAC/D,SAAC,CAAC;;IAGI,cAAc,CAAC,QAAgB,EAAE,QAAiB,EAAA;AACxD,QAAA,IAAI,QAAQ,IAAI,QAAQ,KAAK,IAAI,CAAC,KAAK;YAAE;AACzC,QAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;QACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;QACvC,IAAI,CAAC,qBAAqB,EAAE;;AAGtB,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAU;AACrD,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE;AAC9B,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;AACnD,QAAA,MAAM,YAAY,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QAEzE,IAAI,QAAQ,GAAG,YAAY;AAE3B,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,YAAY;AACjB,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;gBACtB,QAAQ,GAAG,CAAC,YAAY,GAAG,CAAC,IAAI,WAAW,CAAC,MAAM;gBAClD;AACF,YAAA,KAAK,WAAW;AAChB,YAAA,KAAK,SAAS;gBACZ,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,CAAC,YAAY,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,IAAI,WAAW,CAAC,MAAM;gBACvE;AACF,YAAA,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE;gBACtB,QAAQ,GAAG,CAAC;gBACZ;AACF,YAAA,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC;gBACjC;AACF,YAAA;gBACE;;AAGJ,QAAA,MAAM,MAAM,GAAG,WAAW,CAAC,QAAQ,CAAC;QACpC,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;AACzB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;YAC3C,IAAI,CAAC,qBAAqB,EAAE;;AAG5B,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,gBAAgB,CAAoB,cAAc,CAAC;AAC9F,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC;AACnE,YAAA,UAAU,GAAG,WAAW,CAAC,EAAE,KAAK,EAAE;;AAEtC,KAAC;;IAGD,MAAM,GAAA;AACJ,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE;QAE9B,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,CAAC,YAAY,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AAClC,gBAAA,CAAC,YAAY,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;AAChC,aAAA,EAAA,EAEDD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,SAAS,EAAE,IAAI,CAAC,aAAa,EAAA,EACnF,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAI;YACd,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;AACvC,YAAA,QACEA,OAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAE;AACL,oBAAA,WAAW,EAAE,IAAI;AACjB,oBAAA,mBAAmB,EAAE,QAAQ;oBAC7B,qBAAqB,EAAE,CAAC,CAAC,QAAQ;iBAClC,EACD,IAAI,EAAE,QAAQ,GAAG,gBAAgB,GAAG,KAAK,EACzC,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EAAA,eAAA,EACE,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC3B,CAAC,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EAC9C,QAAQ,EAAE,QAAQ,GAAG,CAAC,GAAG,EAAE,EAC3B,QAAQ,EAAE,CAAC,CAAC,QAAQ,EACpB,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAA,EAEtD,CAAC,CAAC,IAAI,IAAIA,OAAA,CAAA,SAAA,EAAA,EAAS,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,EAAA,CAAG,EAC1D,CAAC,CAAC,GAAG,CACC;AAEb,SAAC,CAAC,CACE,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAA,EACrCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/tabs/tabs.css?tag=ts-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-tabs — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-tabs-border-color   Border color for tab bar\n     --ts-tabs-active-color   Active tab indicator color\n     --ts-tabs-radius         Border radius for enclosed/pill tabs\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-tabs-border-color: var(--ts-color-border-default);\n  --ts-tabs-active-color: var(--ts-color-interactive-primary);\n  --ts-tabs-radius: var(--ts-radius-md);\n}\n\n/* ---- Tab list ---- */\n.tabs__tablist {\n  display: flex;\n  gap: var(--ts-spacing-1);\n  border-block-end: 2px solid var(--ts-tabs-border-color);\n}\n\n/* ---- Tab button base ---- */\n.tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ts-spacing-1);\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  font-weight: var(--ts-font-weight-semi);\n  color: var(--ts-color-text-secondary);\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  transition:\n    color var(--ts-transition-fast),\n    background-color var(--ts-transition-fast),\n    border-color var(--ts-transition-fast);\n  outline: none;\n  margin-block-end: -2px;\n  border-block-end: 2px solid transparent;\n}\n\n.tabs__tab:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n}\n\n.tabs__tab:hover:not([disabled]) {\n  color: var(--ts-color-text-primary);\n}\n\n/* ---- Active tab (line variant) ---- */\n.tabs__tab--active {\n  color: var(--ts-tabs-active-color);\n  border-block-end-color: var(--ts-tabs-active-color);\n}\n\n/* ---- Disabled ---- */\n.tabs__tab--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) .tabs__tab {\n  padding: var(--ts-spacing-1) var(--ts-spacing-3);\n  font-size: var(--ts-font-size-sm);\n}\n\n:host([size=\"md\"]) .tabs__tab {\n  padding: var(--ts-spacing-2) var(--ts-spacing-4);\n  font-size: var(--ts-font-size-md);\n}\n\n:host([size=\"lg\"]) .tabs__tab {\n  padding: var(--ts-spacing-3) var(--ts-spacing-5);\n  font-size: var(--ts-font-size-lg);\n}\n\n/* ---- Enclosed variant ---- */\n:host([variant=\"enclosed\"]) .tabs__tablist {\n  gap: 0;\n  border-block-end: 2px solid var(--ts-tabs-border-color);\n}\n\n:host([variant=\"enclosed\"]) .tabs__tab {\n  border: 2px solid transparent;\n  border-block-end: 2px solid var(--ts-tabs-border-color);\n  border-start-start-radius: var(--ts-tabs-radius);\n  border-start-end-radius: var(--ts-tabs-radius);\n  margin-block-end: -2px;\n}\n\n:host([variant=\"enclosed\"]) .tabs__tab--active {\n  border-color: var(--ts-tabs-border-color);\n  border-block-end-color: var(--ts-color-bg-surface);\n  background-color: var(--ts-color-bg-surface);\n  color: var(--ts-tabs-active-color);\n}\n\n/* ---- Pill variant ---- */\n:host([variant=\"pill\"]) .tabs__tablist {\n  border-block-end: none;\n  gap: var(--ts-spacing-1);\n  background-color: var(--ts-color-bg-subtle);\n  border-radius: var(--ts-tabs-radius);\n  padding: var(--ts-spacing-1);\n}\n\n:host([variant=\"pill\"]) .tabs__tab {\n  border-block-end: none;\n  border-radius: var(--ts-tabs-radius);\n  margin-block-end: 0;\n}\n\n:host([variant=\"pill\"]) .tabs__tab--active {\n  background-color: var(--ts-color-bg-surface);\n  color: var(--ts-tabs-active-color);\n  box-shadow: var(--ts-shadow-sm);\n}\n\n/* ---- Panels ---- */\n.tabs__panels {\n  padding-block-start: var(--ts-spacing-4);\n}\n\n/* ---- Tab icon ---- */\n.tabs__tab-icon {\n  font-size: 1em;\n}\n","import { Component, Prop, Event, h, Host, Element, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for `ts-tab-panel` children.\n *\n * @part tablist - The tab button container.\n * @part tab - Each individual tab button.\n * @part tab-active - The currently active tab button.\n * @part panels - The panel container.\n */\n@Component({\n  tag: 'ts-tabs',\n  styleUrl: 'tabs.css',\n  shadow: true,\n})\nexport class TsTabs {\n  @Element() hostEl!: HTMLElement;\n\n  /** The value of the currently active tab. */\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  /** Visual variant of the tab bar. */\n  @Prop({ reflect: true }) variant: 'line' | 'enclosed' | 'pill' = 'line';\n\n  /** The size of the tab buttons. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Emitted when the active tab changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<{ value: string }>;\n\n  @Watch('value')\n  handleValueChange(): void {\n    this.updatePanelVisibility();\n  }\n\n  componentDidLoad(): void {\n    // Default to first non-disabled tab if no value set\n    if (!this.value) {\n      const panels = this.getPanels();\n      const firstEnabled = panels.find((p) => !p.hasAttribute('disabled'));\n      if (firstEnabled) {\n        this.value = firstEnabled.getAttribute('value') || '';\n      }\n    }\n    this.updatePanelVisibility();\n  }\n\n  private getPanels(): Element[] {\n    return Array.from(this.hostEl.querySelectorAll('ts-tab-panel'));\n  }\n\n  private getTabData(): Array<{ tab: string; value: string; disabled: boolean; icon?: string }> {\n    return this.getPanels().map((panel) => ({\n      tab: panel.getAttribute('tab') || '',\n      value: panel.getAttribute('value') || '',\n      disabled: panel.hasAttribute('disabled'),\n      icon: panel.getAttribute('icon') || undefined,\n    }));\n  }\n\n  private updatePanelVisibility(): void {\n    this.getPanels().forEach((panel) => {\n      const isActive = panel.getAttribute('value') === this.value;\n      (panel as HTMLElement).style.display = isActive ? '' : 'none';\n    });\n  }\n\n  private handleTabClick(tabValue: string, disabled: boolean): void {\n    if (disabled || tabValue === this.value) return;\n    this.value = tabValue;\n    this.tsChange.emit({ value: tabValue });\n    this.updatePanelVisibility();\n  }\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    const tabs = this.getTabData();\n    const enabledTabs = tabs.filter((t) => !t.disabled);\n    const currentIndex = enabledTabs.findIndex((t) => t.value === this.value);\n\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        newIndex = (currentIndex + 1) % enabledTabs.length;\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        newIndex = (currentIndex - 1 + enabledTabs.length) % enabledTabs.length;\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = enabledTabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    const newTab = enabledTabs[newIndex];\n    if (newTab) {\n      this.value = newTab.value;\n      this.tsChange.emit({ value: newTab.value });\n      this.updatePanelVisibility();\n\n      // Focus the new tab button\n      const tabButtons = this.hostEl.shadowRoot?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]');\n      const allTabIndex = tabs.findIndex((t) => t.value === newTab.value);\n      tabButtons?.[allTabIndex]?.focus();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const tabs = this.getTabData();\n\n    return (\n      <Host\n        class={{\n          'ts-tabs': true,\n          [`ts-tabs--${this.variant}`]: true,\n          [`ts-tabs--${this.size}`]: true,\n        }}\n      >\n        <div class=\"tabs__tablist\" part=\"tablist\" role=\"tablist\" onKeyDown={this.handleKeydown}>\n          {tabs.map((t) => {\n            const isActive = t.value === this.value;\n            return (\n              <button\n                class={{\n                  'tabs__tab': true,\n                  'tabs__tab--active': isActive,\n                  'tabs__tab--disabled': t.disabled,\n                }}\n                part={isActive ? 'tab tab-active' : 'tab'}\n                role=\"tab\"\n                type=\"button\"\n                aria-selected={isActive ? 'true' : 'false'}\n                aria-disabled={t.disabled ? 'true' : undefined}\n                tabindex={isActive ? 0 : -1}\n                disabled={t.disabled}\n                onClick={() => this.handleTabClick(t.value, t.disabled)}\n              >\n                {t.icon && <ts-icon name={t.icon} class=\"tabs__tab-icon\" />}\n                {t.tab}\n              </button>\n            );\n          })}\n        </div>\n        <div class=\"tabs__panels\" part=\"panels\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ts-textarea.cjs.entry.js

@@ -0,0 +1,117 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+var aria = require('./aria-CeYIvz3U.js');
+
+const textareaCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-textarea-bg:var(--ts-color-bg-surface);--ts-textarea-border-color:var(--ts-color-border-default);--ts-textarea-radius:var(--ts-radius-md);--ts-textarea-focus-ring:var(--ts-focus-ring)}.textarea__label{display:block;margin-block-end:var(--ts-spacing-1);font-size:var(--ts-font-size-sm);font-weight:var(--ts-font-weight-medium);color:var(--ts-color-text-secondary);line-height:var(--ts-line-height-normal)}.textarea__required{color:var(--ts-color-danger-500)}.textarea__wrapper{display:flex;border:2px solid var(--ts-textarea-border-color);border-radius:var(--ts-textarea-radius);background-color:var(--ts-textarea-bg);transition:border-color var(--ts-transition-fast),     box-shadow var(--ts-transition-fast);overflow:hidden}.textarea__wrapper--focused{border-color:var(--ts-color-primary-500);box-shadow:var(--ts-textarea-focus-ring)}.textarea__wrapper--error{border-color:var(--ts-color-danger-500)}.textarea__wrapper--error.textarea__wrapper--focused{box-shadow:0 0 0 3px var(--ts-color-focus-ring-danger)}.textarea__wrapper--disabled{background-color:var(--ts-color-bg-disabled);opacity:0.6;cursor:not-allowed}.textarea__native{flex:1;border:none;outline:none;background:transparent;font-family:inherit;color:var(--ts-color-text-primary);width:100%;min-width:0;line-height:var(--ts-line-height-normal)}.textarea__native::placeholder{color:var(--ts-color-text-tertiary)}.textarea__native:disabled{cursor:not-allowed}:host([resize="none"]) .textarea__native{resize:none}:host([resize="vertical"]) .textarea__native{resize:vertical}:host([resize="horizontal"]) .textarea__native{resize:horizontal}:host([resize="both"]) .textarea__native{resize:both}:host([size="sm"]) .textarea__wrapper{border-radius:var(--ts-radius-sm)}:host([size="sm"]) .textarea__native{padding:var(--ts-spacing-1) var(--ts-spacing-2);font-size:var(--ts-font-size-sm)}:host([size="md"]) .textarea__native{padding:var(--ts-spacing-2) var(--ts-spacing-3);font-size:var(--ts-font-size-md)}:host([size="lg"]) .textarea__native{padding:var(--ts-spacing-3) var(--ts-spacing-4);font-size:var(--ts-font-size-lg)}:host([size="xl"]) .textarea__wrapper{border-radius:var(--ts-radius-lg)}:host([size="xl"]) .textarea__native{padding:var(--ts-spacing-4) var(--ts-spacing-5);font-size:var(--ts-font-size-xl)}.textarea__help,.textarea__error{margin-block-start:var(--ts-spacing-1);font-size:var(--ts-font-size-xs);line-height:var(--ts-line-height-normal)}.textarea__help{color:var(--ts-color-text-tertiary)}.textarea__error{color:var(--ts-color-danger-600);font-weight:var(--ts-font-weight-medium)}`;
+
+const TsTextarea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsInput = index.createEvent(this, "tsInput");
+        this.tsChange = index.createEvent(this, "tsChange");
+        this.tsFocus = index.createEvent(this, "tsFocus");
+        this.tsBlur = index.createEvent(this, "tsBlur");
+    }
+    get hostEl() { return index.getElement(this); }
+    textareaEl;
+    inputId = aria.generateId('ts-textarea');
+    /** The textarea's value. */
+    value = '';
+    /** Placeholder text. */
+    placeholder;
+    /** Renders the textarea as disabled. */
+    disabled = false;
+    /** Renders the textarea as readonly. */
+    readonly = false;
+    /** The textarea size. */
+    size = 'md';
+    /** Label text displayed above the textarea. */
+    label;
+    /** Help text displayed below the textarea. */
+    helpText;
+    /** Renders the textarea in an error state. */
+    error = false;
+    /** Error message displayed below the textarea. */
+    errorMessage;
+    /** Makes the textarea required. */
+    required = false;
+    /** Name attribute for form submission. */
+    name;
+    /** Number of visible text rows. */
+    rows = 3;
+    /** Resize behavior. */
+    resize = 'vertical';
+    /** Maximum character length. */
+    maxlength;
+    /** Whether the textarea is currently focused. */
+    hasFocus = false;
+    /** Emitted on every keystroke. */
+    tsInput;
+    /** Emitted when the value changes (on blur / commit). */
+    tsChange;
+    /** Emitted when the textarea gains focus. */
+    tsFocus;
+    /** Emitted when the textarea loses focus. */
+    tsBlur;
+    handleValueChange(newValue, oldValue) {
+        if (newValue !== oldValue && this.textareaEl) {
+            this.textareaEl.value = newValue;
+        }
+    }
+    /** Programmatically focus the textarea. */
+    async setFocus() {
+        this.textareaEl?.focus();
+    }
+    /** Programmatically select the textarea text. */
+    async selectText() {
+        this.textareaEl?.select();
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        const previousValue = this.value;
+        this.value = target.value;
+        this.tsInput.emit({ value: this.value, previousValue });
+    };
+    handleChange = () => {
+        this.tsChange.emit({ value: this.value, previousValue: this.value });
+    };
+    handleFocus = () => {
+        this.hasFocus = true;
+        this.tsFocus.emit();
+    };
+    handleBlur = () => {
+        this.hasFocus = false;
+        this.tsBlur.emit();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const hasError = this.error && !!this.errorMessage;
+        const labelId = `${this.inputId}-label`;
+        const helpId = `${this.inputId}-help`;
+        const errorId = `${this.inputId}-error`;
+        return (index.h(index.Host, { key: '7bdc41a5aa35af6300e17a214ef1a2606cc57acc', class: {
+                'ts-textarea': true,
+                [`ts-textarea--${this.size}`]: true,
+                'ts-textarea--focused': this.hasFocus,
+                'ts-textarea--disabled': this.disabled,
+                'ts-textarea--error': this.error,
+            } }, this.label && (index.h("label", { key: 'b3e4691906f93a375c9064f28810c1f21b4ef465', class: "textarea__label", part: "label", id: labelId, htmlFor: this.inputId }, this.label, this.required && index.h("span", { key: 'f69fe7f1f6dce0815a987517f426bc9064a82bff', class: "textarea__required", "aria-hidden": "true" }, " *"))), index.h("div", { key: '3af1749e1566071c6bb786a8f69d14be554ee393', class: {
+                'textarea__wrapper': true,
+                'textarea__wrapper--focused': this.hasFocus,
+                'textarea__wrapper--error': this.error,
+                'textarea__wrapper--disabled': this.disabled,
+            }, part: "base" }, index.h("textarea", { key: '91722d413599317ffa74aca132d62e7f4e301340', ref: (el) => (this.textareaEl = el), id: this.inputId, class: "textarea__native", part: "textarea", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, name: this.name, rows: this.rows, "aria-labelledby": this.label ? labelId : undefined, "aria-describedby": hasError ? errorId : this.helpText ? helpId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), hasError && (index.h("div", { key: '6b269961eec546d027f64bc2d44ef1790f72a42c', class: "textarea__error", part: "error-text", id: errorId, role: "alert" }, this.errorMessage)), !hasError && this.helpText && (index.h("div", { key: 'ec535a5669fa2dec0b0a4b2aa85233b6f84c136a', class: "textarea__help", part: "help-text", id: helpId }, this.helpText))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }]
+    }; }
+};
+TsTextarea.style = textareaCss();
+
+exports.ts_textarea = TsTextarea;
+//# sourceMappingURL=ts-textarea.entry.cjs.js.map
+
+//# sourceMappingURL=ts-textarea.cjs.entry.js.map

package/dist/cjs/ts-textarea.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-textarea.cjs.entry.js","mappings":"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","names":["generateId","h","Host"],"sources":["src/components/textarea/textarea.css?tag=ts-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-textarea — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-textarea-bg              Textarea background\n     --ts-textarea-border-color    Default border color\n     --ts-textarea-radius          Border radius\n     --ts-textarea-focus-ring      Focus ring box-shadow\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-textarea-bg: var(--ts-color-bg-surface);\n  --ts-textarea-border-color: var(--ts-color-border-default);\n  --ts-textarea-radius: var(--ts-radius-md);\n  --ts-textarea-focus-ring: var(--ts-focus-ring);\n}\n\n/* ---- Label ---- */\n.textarea__label {\n  display: block;\n  margin-block-end: var(--ts-spacing-1);\n  font-size: var(--ts-font-size-sm);\n  font-weight: var(--ts-font-weight-medium);\n  color: var(--ts-color-text-secondary);\n  line-height: var(--ts-line-height-normal);\n}\n\n.textarea__required {\n  color: var(--ts-color-danger-500);\n}\n\n/* ---- Wrapper ---- */\n.textarea__wrapper {\n  display: flex;\n  border: 2px solid var(--ts-textarea-border-color);\n  border-radius: var(--ts-textarea-radius);\n  background-color: var(--ts-textarea-bg);\n  transition:\n    border-color var(--ts-transition-fast),\n    box-shadow var(--ts-transition-fast);\n  overflow: hidden;\n}\n\n.textarea__wrapper--focused {\n  border-color: var(--ts-color-primary-500);\n  box-shadow: var(--ts-textarea-focus-ring);\n}\n\n.textarea__wrapper--error {\n  border-color: var(--ts-color-danger-500);\n}\n\n.textarea__wrapper--error.textarea__wrapper--focused {\n  box-shadow: 0 0 0 3px var(--ts-color-focus-ring-danger);\n}\n\n.textarea__wrapper--disabled {\n  background-color: var(--ts-color-bg-disabled);\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n/* ---- Native Textarea ---- */\n.textarea__native {\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-family: inherit;\n  color: var(--ts-color-text-primary);\n  width: 100%;\n  min-width: 0;\n  line-height: var(--ts-line-height-normal);\n}\n\n.textarea__native::placeholder {\n  color: var(--ts-color-text-tertiary);\n}\n\n.textarea__native:disabled {\n  cursor: not-allowed;\n}\n\n/* ---- Resize ---- */\n:host([resize=\"none\"]) .textarea__native {\n  resize: none;\n}\n\n:host([resize=\"vertical\"]) .textarea__native {\n  resize: vertical;\n}\n\n:host([resize=\"horizontal\"]) .textarea__native {\n  resize: horizontal;\n}\n\n:host([resize=\"both\"]) .textarea__native {\n  resize: both;\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) .textarea__wrapper {\n  border-radius: var(--ts-radius-sm);\n}\n:host([size=\"sm\"]) .textarea__native {\n  padding: var(--ts-spacing-1) var(--ts-spacing-2);\n  font-size: var(--ts-font-size-sm);\n}\n\n:host([size=\"md\"]) .textarea__native {\n  padding: var(--ts-spacing-2) var(--ts-spacing-3);\n  font-size: var(--ts-font-size-md);\n}\n\n:host([size=\"lg\"]) .textarea__native {\n  padding: var(--ts-spacing-3) var(--ts-spacing-4);\n  font-size: var(--ts-font-size-lg);\n}\n\n:host([size=\"xl\"]) .textarea__wrapper {\n  border-radius: var(--ts-radius-lg);\n}\n:host([size=\"xl\"]) .textarea__native {\n  padding: var(--ts-spacing-4) var(--ts-spacing-5);\n  font-size: var(--ts-font-size-xl);\n}\n\n/* ---- Help & Error Text ---- */\n.textarea__help,\n.textarea__error {\n  margin-block-start: var(--ts-spacing-1);\n  font-size: var(--ts-font-size-xs);\n  line-height: var(--ts-line-height-normal);\n}\n\n.textarea__help {\n  color: var(--ts-color-text-tertiary);\n}\n\n.textarea__error {\n  color: var(--ts-color-danger-600);\n  font-weight: var(--ts-font-weight-medium);\n}\n","import { Component, Prop, State, Event, Watch, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsChangeEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @part base - The outer wrapper.\n * @part label - The label element.\n * @part textarea - The native textarea element.\n * @part help-text - The help text wrapper.\n * @part error-text - The error message wrapper.\n */\n@Component({\n  tag: 'ts-textarea',\n  styleUrl: 'textarea.css',\n  shadow: true,\n})\nexport class TsTextarea {\n  @Element() hostEl!: HTMLElement;\n\n  private textareaEl?: HTMLTextAreaElement;\n  private inputId = generateId('ts-textarea');\n\n  /** The textarea's value. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Renders the textarea as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Renders the textarea as readonly. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The textarea size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Label text displayed above the textarea. */\n  @Prop() label?: string;\n\n  /** Help text displayed below the textarea. */\n  @Prop() helpText?: string;\n\n  /** Renders the textarea in an error state. */\n  @Prop({ reflect: true }) error = false;\n\n  /** Error message displayed below the textarea. */\n  @Prop() errorMessage?: string;\n\n  /** Makes the textarea required. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Name attribute for form submission. */\n  @Prop() name?: string;\n\n  /** Number of visible text rows. */\n  @Prop() rows = 3;\n\n  /** Resize behavior. */\n  @Prop({ reflect: true }) resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical';\n\n  /** Maximum character length. */\n  @Prop() maxlength?: number;\n\n  /** Whether the textarea is currently focused. */\n  @State() hasFocus = false;\n\n  /** Emitted on every keystroke. */\n  @Event({ eventName: 'tsInput' }) tsInput!: EventEmitter<TsChangeEventDetail<string>>;\n\n  /** Emitted when the value changes (on blur / commit). */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsChangeEventDetail<string>>;\n\n  /** Emitted when the textarea gains focus. */\n  @Event({ eventName: 'tsFocus' }) tsFocus!: EventEmitter<void>;\n\n  /** Emitted when the textarea loses focus. */\n  @Event({ eventName: 'tsBlur' }) tsBlur!: EventEmitter<void>;\n\n  @Watch('value')\n  handleValueChange(newValue: string, oldValue: string): void {\n    if (newValue !== oldValue && this.textareaEl) {\n      this.textareaEl.value = newValue;\n    }\n  }\n\n  /** Programmatically focus the textarea. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.textareaEl?.focus();\n  }\n\n  /** Programmatically select the textarea text. */\n  @Method()\n  async selectText(): Promise<void> {\n    this.textareaEl?.select();\n  }\n\n  private handleInput = (event: Event): void => {\n    const target = event.target as HTMLTextAreaElement;\n    const previousValue = this.value;\n    this.value = target.value;\n    this.tsInput.emit({ value: this.value, previousValue });\n  };\n\n  private handleChange = (): void => {\n    this.tsChange.emit({ value: this.value, previousValue: this.value });\n  };\n\n  private handleFocus = (): void => {\n    this.hasFocus = true;\n    this.tsFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.hasFocus = false;\n    this.tsBlur.emit();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const hasError = this.error && !!this.errorMessage;\n    const labelId = `${this.inputId}-label`;\n    const helpId = `${this.inputId}-help`;\n    const errorId = `${this.inputId}-error`;\n\n    return (\n      <Host\n        class={{\n          'ts-textarea': true,\n          [`ts-textarea--${this.size}`]: true,\n          'ts-textarea--focused': this.hasFocus,\n          'ts-textarea--disabled': this.disabled,\n          'ts-textarea--error': this.error,\n        }}\n      >\n        {this.label && (\n          <label class=\"textarea__label\" part=\"label\" id={labelId} htmlFor={this.inputId}>\n            {this.label}\n            {this.required && <span class=\"textarea__required\" aria-hidden=\"true\"> *</span>}\n          </label>\n        )}\n\n        <div\n          class={{\n            'textarea__wrapper': true,\n            'textarea__wrapper--focused': this.hasFocus,\n            'textarea__wrapper--error': this.error,\n            'textarea__wrapper--disabled': this.disabled,\n          }}\n          part=\"base\"\n        >\n          <textarea\n            ref={(el) => (this.textareaEl = el)}\n            id={this.inputId}\n            class=\"textarea__native\"\n            part=\"textarea\"\n            value={this.value}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            required={this.required}\n            maxlength={this.maxlength}\n            name={this.name}\n            rows={this.rows}\n            aria-labelledby={this.label ? labelId : undefined}\n            aria-describedby={hasError ? errorId : this.helpText ? helpId : undefined}\n            aria-invalid={this.error ? 'true' : undefined}\n            aria-required={this.required ? 'true' : undefined}\n            onInput={this.handleInput}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n\n        {hasError && (\n          <div class=\"textarea__error\" part=\"error-text\" id={errorId} role=\"alert\">\n            {this.errorMessage}\n          </div>\n        )}\n\n        {!hasError && this.helpText && (\n          <div class=\"textarea__help\" part=\"help-text\" id={helpId}>\n            {this.helpText}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ts-toast.cjs.entry.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const toastCss = () => `:host{display:block;position:fixed;z-index:var(--ts-z-toast, 9000);font-family:var(--ts-font-family-base);pointer-events:none;--ts-toast-radius:var(--ts-radius-xl);--ts-toast-shadow:var(--ts-shadow-lg);--ts-toast-max-width:420px}:host([position="top-right"]){inset-block-start:var(--ts-spacing-4);inset-inline-end:var(--ts-spacing-4)}:host([position="top-left"]){inset-block-start:var(--ts-spacing-4);inset-inline-start:var(--ts-spacing-4)}:host([position="bottom-right"]){inset-block-end:var(--ts-spacing-4);inset-inline-end:var(--ts-spacing-4)}:host([position="bottom-left"]){inset-block-end:var(--ts-spacing-4);inset-inline-start:var(--ts-spacing-4)}:host([position="top-center"]){inset-block-start:var(--ts-spacing-4);inset-inline-start:50%;transform:translateX(-50%)}:host([position="bottom-center"]){inset-block-end:var(--ts-spacing-4);inset-inline-start:50%;transform:translateX(-50%)}.toast__base{display:flex;align-items:flex-start;gap:var(--ts-spacing-3);padding:var(--ts-spacing-3) var(--ts-spacing-4);border-radius:var(--ts-toast-radius);box-shadow:var(--ts-toast-shadow);max-inline-size:var(--ts-toast-max-width);pointer-events:auto;border:1px solid transparent;font-size:var(--ts-font-size-sm);line-height:var(--ts-line-height-normal);animation:ts-toast-slide-in 0.3s ease-out}@keyframes ts-toast-slide-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host([variant="info"]) .toast__base{background-color:var(--ts-color-info-bg);border-color:var(--ts-color-info-border);color:var(--ts-color-info-600)}:host([variant="success"]) .toast__base{background-color:var(--ts-color-success-bg);border-color:var(--ts-color-success-border);color:var(--ts-color-success-600)}:host([variant="warning"]) .toast__base{background-color:var(--ts-color-warning-bg);border-color:var(--ts-color-warning-border);color:var(--ts-color-warning-600)}:host([variant="danger"]) .toast__base{background-color:var(--ts-color-danger-bg);border-color:var(--ts-color-danger-border);color:var(--ts-color-danger-600)}:host([variant="neutral"]) .toast__base{background-color:var(--ts-color-bg-subtle);border-color:var(--ts-color-border-subtle);color:var(--ts-color-text-secondary)}.toast__icon{display:flex;align-items:center;font-size:1.15em;flex-shrink:0;margin-block-start:1px}.toast__message{flex:1;min-inline-size:0}.toast__action{display:flex;align-items:center;flex-shrink:0}.toast__action:empty{display:none}.toast__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;inline-size:1.5rem;block-size:1.5rem;border:none;border-radius:var(--ts-radius-sm);background:transparent;color:currentColor;opacity:0.6;cursor:pointer;font-size:0.8em;transition:opacity var(--ts-transition-fast);padding:0;line-height:1}.toast__close:hover{opacity:1}.toast__close:focus-visible{box-shadow:var(--ts-focus-ring);opacity:1}`;
+
+const TsToast = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsClose = index.createEvent(this, "tsClose");
+    }
+    autoCloseTimer;
+    /** The toast's visual variant. */
+    variant = 'info';
+    /** Auto-dismiss duration in ms. Set 0 to disable. */
+    duration = 5000;
+    /** Whether the toast shows a close button. */
+    dismissible = true;
+    /** Whether the toast is visible. */
+    open = false;
+    /** Position of the toast on screen. */
+    position = 'top-right';
+    /** Emitted when the toast is dismissed. */
+    tsClose;
+    isVisible = false;
+    handleOpenChange(newValue) {
+        if (newValue) {
+            this.isVisible = true;
+            this.startAutoClose();
+        }
+        else {
+            this.isVisible = false;
+            this.clearAutoClose();
+        }
+    }
+    connectedCallback() {
+        if (this.open) {
+            this.isVisible = true;
+            this.startAutoClose();
+        }
+    }
+    disconnectedCallback() {
+        this.clearAutoClose();
+    }
+    /** Programmatically close the toast. */
+    async close() {
+        this.open = false;
+        this.isVisible = false;
+        this.clearAutoClose();
+        this.tsClose.emit();
+    }
+    /** Programmatically show the toast. */
+    async show() {
+        this.open = true;
+    }
+    startAutoClose() {
+        this.clearAutoClose();
+        if (this.duration > 0) {
+            this.autoCloseTimer = setTimeout(() => {
+                this.close();
+            }, this.duration);
+        }
+    }
+    clearAutoClose() {
+        if (this.autoCloseTimer) {
+            clearTimeout(this.autoCloseTimer);
+            this.autoCloseTimer = undefined;
+        }
+    }
+    handleClose = () => {
+        this.close();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    renderIcon() {
+        const icons = {
+            info: '\u2139',
+            success: '\u2713',
+            warning: '\u26A0',
+            danger: '\u2715',
+            neutral: '\u2139',
+        };
+        return index.h("span", { class: "toast__icon-symbol", "aria-hidden": "true" }, icons[this.variant] || '\u2139');
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        if (!this.isVisible)
+            return null;
+        const ariaLive = this.variant === 'danger' ? 'assertive' : 'polite';
+        return (index.h(index.Host, { class: {
+                'ts-toast': true,
+                [`ts-toast--${this.variant}`]: true,
+                [`ts-toast--${this.position}`]: true,
+                'ts-toast--open': this.isVisible,
+            }, role: "status", "aria-live": ariaLive }, index.h("div", { class: "toast__base", part: "base" }, index.h("div", { class: "toast__icon", part: "icon" }, this.renderIcon()), index.h("div", { class: "toast__message", part: "message" }, index.h("slot", null)), index.h("div", { class: "toast__action", part: "action" }, index.h("slot", { name: "action" })), this.dismissible && (index.h("button", { class: "toast__close", part: "close", type: "button", "aria-label": "Dismiss notification", onClick: this.handleClose }, "\\u2715")))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+TsToast.style = toastCss();
+
+exports.ts_toast = TsToast;
+//# sourceMappingURL=ts-toast.entry.cjs.js.map
+
+//# sourceMappingURL=ts-toast.cjs.entry.js.map

package/dist/cjs/ts-toast.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-toast.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,kyFAAkyF,CAAC;;MCqB9yF,OAAO,GAAA,MAAA;;;;;AACV,IAAA,cAAc;;IAGG,OAAO,GAAmB,MAAM;;IAGjD,QAAQ,GAAG,IAAI;;IAGf,WAAW,GAAG,IAAI;;IAGc,IAAI,GAAG,KAAK;;IAG3B,QAAQ,GAAoB,WAAW;;AAG/B,IAAA,OAAO;IAE/B,SAAS,GAAG,KAAK;AAG1B,IAAA,gBAAgB,CAAC,QAAiB,EAAA;QAChC,IAAI,QAAQ,EAAE;AACZ,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;YACrB,IAAI,CAAC,cAAc,EAAE;;aAChB;AACL,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;YACtB,IAAI,CAAC,cAAc,EAAE;;;IAIzB,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;YACrB,IAAI,CAAC,cAAc,EAAE;;;IAIzB,oBAAoB,GAAA;QAClB,IAAI,CAAC,cAAc,EAAE;;;AAKvB,IAAA,MAAM,KAAK,GAAA;AACT,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;QACtB,IAAI,CAAC,cAAc,EAAE;AACrB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;;AAKrB,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;;IAGV,cAAc,GAAA;QACpB,IAAI,CAAC,cAAc,EAAE;AACrB,QAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE;AACrB,YAAA,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,MAAK;gBACpC,IAAI,CAAC,KAAK,EAAE;AACd,aAAC,EAAE,IAAI,CAAC,QAAQ,CAAC;;;IAIb,cAAc,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC;AACjC,YAAA,IAAI,CAAC,cAAc,GAAG,SAAS;;;IAI3B,WAAW,GAAG,MAAW;QAC/B,IAAI,CAAC,KAAK,EAAE;AACd,KAAC;;IAGO,UAAU,GAAA;AAChB,QAAA,MAAM,KAAK,GAA2B;AACpC,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,OAAO,EAAE,QAAQ;SAClB;QACD,OAAOA,kBAAM,KAAK,EAAC,oBAAoB,EAAA,aAAA,EAAa,MAAM,EAAA,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAQ;;;IAIrG,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,SAAS;AAAE,YAAA,OAAO,IAAI;AAEhC,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ,GAAG,WAAW,GAAG,QAAQ;AAEnE,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EACH,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,IAAI;AAChB,gBAAA,CAAC,aAAa,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACnC,gBAAA,CAAC,aAAa,IAAI,CAAC,QAAQ,CAAA,CAAE,GAAG,IAAI;gBACpC,gBAAgB,EAAE,IAAI,CAAC,SAAS;AACjC,aAAA,EACD,IAAI,EAAC,QAAQ,EAAA,WAAA,EACF,QAAQ,EAAA,EAEnBD,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAA,EAClCA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAA,EACjC,IAAI,CAAC,UAAU,EAAE,CACd,EAENA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAA,EACxCA,OAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACJ,EAENA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,EAAA,EACtCA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,EAEL,IAAI,CAAC,WAAW,KACfA,OAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,sBAAsB,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAAA,SAAA,CAGlB,CACV,CACG,CACD;;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/toast/toast.css?tag=ts-toast&encapsulation=shadow","src/components/toast/toast.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-toast — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-toast-radius      Border radius\n     --ts-toast-shadow      Box shadow\n     --ts-toast-max-width   Maximum width\n   ========================================================================== */\n\n:host {\n  display: block;\n  position: fixed;\n  z-index: var(--ts-z-toast, 9000);\n  font-family: var(--ts-font-family-base);\n  pointer-events: none;\n\n  --ts-toast-radius: var(--ts-radius-xl);\n  --ts-toast-shadow: var(--ts-shadow-lg);\n  --ts-toast-max-width: 420px;\n}\n\n/* ---- Positions ---- */\n:host([position=\"top-right\"]) {\n  inset-block-start: var(--ts-spacing-4);\n  inset-inline-end: var(--ts-spacing-4);\n}\n\n:host([position=\"top-left\"]) {\n  inset-block-start: var(--ts-spacing-4);\n  inset-inline-start: var(--ts-spacing-4);\n}\n\n:host([position=\"bottom-right\"]) {\n  inset-block-end: var(--ts-spacing-4);\n  inset-inline-end: var(--ts-spacing-4);\n}\n\n:host([position=\"bottom-left\"]) {\n  inset-block-end: var(--ts-spacing-4);\n  inset-inline-start: var(--ts-spacing-4);\n}\n\n:host([position=\"top-center\"]) {\n  inset-block-start: var(--ts-spacing-4);\n  inset-inline-start: 50%;\n  transform: translateX(-50%);\n}\n\n:host([position=\"bottom-center\"]) {\n  inset-block-end: var(--ts-spacing-4);\n  inset-inline-start: 50%;\n  transform: translateX(-50%);\n}\n\n/* ---- Base ---- */\n.toast__base {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--ts-spacing-3);\n  padding: var(--ts-spacing-3) var(--ts-spacing-4);\n  border-radius: var(--ts-toast-radius);\n  box-shadow: var(--ts-toast-shadow);\n  max-inline-size: var(--ts-toast-max-width);\n  pointer-events: auto;\n  border: 1px solid transparent;\n  font-size: var(--ts-font-size-sm);\n  line-height: var(--ts-line-height-normal);\n  animation: ts-toast-slide-in 0.3s ease-out;\n}\n\n@keyframes ts-toast-slide-in {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* ---- Variants ---- */\n:host([variant=\"info\"]) .toast__base {\n  background-color: var(--ts-color-info-bg);\n  border-color: var(--ts-color-info-border);\n  color: var(--ts-color-info-600);\n}\n\n:host([variant=\"success\"]) .toast__base {\n  background-color: var(--ts-color-success-bg);\n  border-color: var(--ts-color-success-border);\n  color: var(--ts-color-success-600);\n}\n\n:host([variant=\"warning\"]) .toast__base {\n  background-color: var(--ts-color-warning-bg);\n  border-color: var(--ts-color-warning-border);\n  color: var(--ts-color-warning-600);\n}\n\n:host([variant=\"danger\"]) .toast__base {\n  background-color: var(--ts-color-danger-bg);\n  border-color: var(--ts-color-danger-border);\n  color: var(--ts-color-danger-600);\n}\n\n:host([variant=\"neutral\"]) .toast__base {\n  background-color: var(--ts-color-bg-subtle);\n  border-color: var(--ts-color-border-subtle);\n  color: var(--ts-color-text-secondary);\n}\n\n/* ---- Icon ---- */\n.toast__icon {\n  display: flex;\n  align-items: center;\n  font-size: 1.15em;\n  flex-shrink: 0;\n  margin-block-start: 1px;\n}\n\n/* ---- Message ---- */\n.toast__message {\n  flex: 1;\n  min-inline-size: 0;\n}\n\n/* ---- Action ---- */\n.toast__action {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.toast__action:empty {\n  display: none;\n}\n\n/* ---- Close button ---- */\n.toast__close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  inline-size: 1.5rem;\n  block-size: 1.5rem;\n  border: none;\n  border-radius: var(--ts-radius-sm);\n  background: transparent;\n  color: currentColor;\n  opacity: 0.6;\n  cursor: pointer;\n  font-size: 0.8em;\n  transition: opacity var(--ts-transition-fast);\n  padding: 0;\n  line-height: 1;\n}\n\n.toast__close:hover {\n  opacity: 1;\n}\n\n.toast__close:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n  opacity: 1;\n}\n","import { Component, Prop, Event, State, h, Host, Watch, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\ntype TsToastVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';\ntype TsToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';\n\n/**\n * @slot - Default slot for message content.\n * @slot action - Optional action button.\n *\n * @part base - The toast container.\n * @part icon - The variant icon wrapper.\n * @part message - The message wrapper.\n * @part action - The action slot wrapper.\n * @part close - The close button.\n */\n@Component({\n  tag: 'ts-toast',\n  styleUrl: 'toast.css',\n  shadow: true,\n})\nexport class TsToast {\n  private autoCloseTimer?: ReturnType<typeof setTimeout>;\n\n  /** The toast's visual variant. */\n  @Prop({ reflect: true }) variant: TsToastVariant = 'info';\n\n  /** Auto-dismiss duration in ms. Set 0 to disable. */\n  @Prop() duration = 5000;\n\n  /** Whether the toast shows a close button. */\n  @Prop() dismissible = true;\n\n  /** Whether the toast is visible. */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  /** Position of the toast on screen. */\n  @Prop({ reflect: true }) position: TsToastPosition = 'top-right';\n\n  /** Emitted when the toast is dismissed. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  @State() isVisible = false;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean): void {\n    if (newValue) {\n      this.isVisible = true;\n      this.startAutoClose();\n    } else {\n      this.isVisible = false;\n      this.clearAutoClose();\n    }\n  }\n\n  connectedCallback(): void {\n    if (this.open) {\n      this.isVisible = true;\n      this.startAutoClose();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.clearAutoClose();\n  }\n\n  /** Programmatically close the toast. */\n  @Method()\n  async close(): Promise<void> {\n    this.open = false;\n    this.isVisible = false;\n    this.clearAutoClose();\n    this.tsClose.emit();\n  }\n\n  /** Programmatically show the toast. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  private startAutoClose(): void {\n    this.clearAutoClose();\n    if (this.duration > 0) {\n      this.autoCloseTimer = setTimeout(() => {\n        this.close();\n      }, this.duration);\n    }\n  }\n\n  private clearAutoClose(): void {\n    if (this.autoCloseTimer) {\n      clearTimeout(this.autoCloseTimer);\n      this.autoCloseTimer = undefined;\n    }\n  }\n\n  private handleClose = (): void => {\n    this.close();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderIcon() {\n    const icons: Record<string, string> = {\n      info: '\\u2139',\n      success: '\\u2713',\n      warning: '\\u26A0',\n      danger: '\\u2715',\n      neutral: '\\u2139',\n    };\n    return <span class=\"toast__icon-symbol\" 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 ariaLive = this.variant === 'danger' ? 'assertive' : 'polite';\n\n    return (\n      <Host\n        class={{\n          'ts-toast': true,\n          [`ts-toast--${this.variant}`]: true,\n          [`ts-toast--${this.position}`]: true,\n          'ts-toast--open': this.isVisible,\n        }}\n        role=\"status\"\n        aria-live={ariaLive}\n      >\n        <div class=\"toast__base\" part=\"base\">\n          <div class=\"toast__icon\" part=\"icon\">\n            {this.renderIcon()}\n          </div>\n\n          <div class=\"toast__message\" part=\"message\">\n            <slot />\n          </div>\n\n          <div class=\"toast__action\" part=\"action\">\n            <slot name=\"action\" />\n          </div>\n\n          {this.dismissible && (\n            <button\n              class=\"toast__close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Dismiss notification\"\n              onClick={this.handleClose}\n            >\n              \\u2715\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ts-toggle.cjs.entry.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+var aria = require('./aria-CeYIvz3U.js');
+
+const toggleCss = () => `:host{display:inline-block;font-family:var(--ts-font-family-base);--ts-toggle-track-bg:var(--ts-color-neutral-200);--ts-toggle-track-bg-checked:var(--ts-color-primary-600);--ts-toggle-thumb-bg:var(--ts-color-bg-elevated);--ts-toggle-focus-ring:var(--ts-focus-ring)}.toggle__base{display:inline-flex;align-items:center;gap:var(--ts-spacing-2);cursor:pointer;outline:none}.toggle__base:focus-visible .toggle__track{box-shadow:var(--ts-toggle-focus-ring)}:host(.ts-toggle--disabled) .toggle__base{opacity:0.5;cursor:not-allowed}.toggle__track{position:relative;background-color:var(--ts-toggle-track-bg);border-radius:var(--ts-radius-full);border:2px solid var(--ts-color-border-default);box-shadow:none;transition:background-color var(--ts-transition-fast),     border-color var(--ts-transition-fast),     box-shadow var(--ts-transition-fast);flex-shrink:0}:host(.ts-toggle--checked) .toggle__track{background-color:var(--ts-toggle-track-bg-checked);border-color:var(--ts-toggle-track-bg-checked);box-shadow:none}.toggle__thumb{position:absolute;top:50%;transform:translateY(-50%) scale(1);background-color:var(--ts-toggle-thumb-bg);border-radius:var(--ts-radius-full);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06);transition:inset-inline-start var(--ts-transition-fast),     transform var(--ts-transition-fast),     box-shadow var(--ts-transition-fast)}:host(.ts-toggle--checked) .toggle__thumb{box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.06)}:host([size="sm"]) .toggle__track{width:32px;height:18px}:host([size="sm"]) .toggle__thumb{width:14px;height:14px;inset-inline-start:2px}:host(.ts-toggle--checked[size="sm"]) .toggle__thumb{inset-inline-start:16px}:host([size="md"]) .toggle__track{width:40px;height:22px}:host([size="md"]) .toggle__thumb{width:18px;height:18px;inset-inline-start:2px}:host(.ts-toggle--checked[size="md"]) .toggle__thumb{inset-inline-start:20px}:host([size="lg"]) .toggle__track{width:50px;height:28px}:host([size="lg"]) .toggle__thumb{width:24px;height:24px;inset-inline-start:2px}:host(.ts-toggle--checked[size="lg"]) .toggle__thumb{inset-inline-start:24px}.toggle__label{font-size:var(--ts-font-size-sm);color:var(--ts-color-text-secondary);cursor:inherit;user-select:none}:host([size="lg"]) .toggle__label{font-size:var(--ts-font-size-md)}`;
+
+const TsToggle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsChange = index.createEvent(this, "tsChange");
+    }
+    get hostEl() { return index.getElement(this); }
+    inputId = aria.generateId('ts-toggle');
+    /** Whether the toggle is checked. */
+    checked = false;
+    /** The toggle's size. */
+    size = 'md';
+    /** Renders the toggle as disabled. */
+    disabled = false;
+    /** Name for form submission. */
+    name;
+    /** Value for form submission. */
+    value;
+    /** Emitted when the toggle state changes. */
+    tsChange;
+    /** Programmatically toggle the checked state. */
+    async toggle() {
+        if (!this.disabled) {
+            this.checked = !this.checked;
+            this.tsChange.emit({ checked: this.checked });
+        }
+    }
+    handleClick = () => {
+        this.toggle();
+    };
+    handleKeydown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.toggle();
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (index.h(index.Host, { key: '37d1c8601478c83ad4be39acedfd4bb84ca9024c', class: {
+                'ts-toggle': true,
+                [`ts-toggle--${this.size}`]: true,
+                'ts-toggle--checked': this.checked,
+                'ts-toggle--disabled': this.disabled,
+            } }, index.h("div", { key: 'cc01df27c45a311485395e58d06b57cbaddace77', class: "toggle__base", part: "base", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeydown }, index.h("div", { key: '4e275c1ff9564119b2f3e7e8e2407f285fc0c27a', class: "toggle__track", part: "track" }, index.h("div", { key: 'e4213d681cef167a7e9db7ef001f83d12c618df4', class: "toggle__thumb", part: "thumb" })), index.h("label", { key: 'dcd922600a2af35a59ef59822f40a86db0dd94d8', class: "toggle__label", part: "label", id: `${this.inputId}-label` }, index.h("slot", { key: '7f15cc140376af0b8b9337a0517a9559dbf7d5b8' })))));
+    }
+};
+TsToggle.style = toggleCss();
+
+exports.ts_toggle = TsToggle;
+//# sourceMappingURL=ts-toggle.entry.cjs.js.map
+
+//# sourceMappingURL=ts-toggle.cjs.entry.js.map

package/dist/cjs/ts-toggle.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-toggle.cjs.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,otEAAotE,CAAC;;MCkBjuE,QAAQ,GAAA,MAAA;;;;;;AAGX,IAAA,OAAO,GAAGA,eAAU,CAAC,WAAW,CAAC;;IAGD,OAAO,GAAG,KAAK;;IAG9B,IAAI,GAAW,IAAI;;IAGnB,QAAQ,GAAG,KAAK;;AAGjC,IAAA,IAAI;;AAGJ,IAAA,KAAK;;AAGqB,IAAA,QAAQ;;AAI1C,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;AAC5B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;;;IAIzC,WAAW,GAAG,MAAW;QAC/B,IAAI,CAAC,MAAM,EAAE;AACf,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAU;AACrD,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,MAAM,EAAE;;AAEjB,KAAC;;IAGD,MAAM,GAAA;QACJ,QACEC,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,CAAC,cAAc,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;gBACjC,oBAAoB,EAAE,IAAI,CAAC,OAAO;gBAClC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;AACrC,aAAA,EAAA,EAEDD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EAAA,cAAA,EACC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAC9B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAAA,EAE7BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,EAAA,EACrCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,GAAG,CACtC,EAENA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,CAAA,MAAA,CAAQ,EAAA,EACnEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACF,CACJ,CACD;;;;;;;","names":["generateId","h","Host"],"sources":["src/components/toggle/toggle.css?tag=ts-toggle&encapsulation=shadow","src/components/toggle/toggle.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-toggle — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-toggle-track-bg          Unchecked track background\n     --ts-toggle-track-bg-checked  Checked track background\n     --ts-toggle-thumb-bg          Thumb background\n     --ts-toggle-focus-ring        Focus ring box-shadow\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-toggle-track-bg: var(--ts-color-neutral-200);\n  --ts-toggle-track-bg-checked: var(--ts-color-primary-600);\n  --ts-toggle-thumb-bg: var(--ts-color-bg-elevated);\n  --ts-toggle-focus-ring: var(--ts-focus-ring);\n}\n\n.toggle__base {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ts-spacing-2);\n  cursor: pointer;\n  outline: none;\n}\n\n.toggle__base:focus-visible .toggle__track {\n  box-shadow: var(--ts-toggle-focus-ring);\n}\n\n:host(.ts-toggle--disabled) .toggle__base {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ---- Track (M3 — outlined when unchecked) ---- */\n.toggle__track {\n  position: relative;\n  background-color: var(--ts-toggle-track-bg);\n  border-radius: var(--ts-radius-full);\n  border: 2px solid var(--ts-color-border-default);\n  box-shadow: none;\n  transition:\n    background-color var(--ts-transition-fast),\n    border-color var(--ts-transition-fast),\n    box-shadow var(--ts-transition-fast);\n  flex-shrink: 0;\n}\n\n:host(.ts-toggle--checked) .toggle__track {\n  background-color: var(--ts-toggle-track-bg-checked);\n  border-color: var(--ts-toggle-track-bg-checked);\n  box-shadow: none;\n}\n\n/* ---- Thumb ---- */\n.toggle__thumb {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%) scale(1);\n  background-color: var(--ts-toggle-thumb-bg);\n  border-radius: var(--ts-radius-full);\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n  transition:\n    inset-inline-start var(--ts-transition-fast),\n    transform var(--ts-transition-fast),\n    box-shadow var(--ts-transition-fast);\n}\n\n:host(.ts-toggle--checked) .toggle__thumb {\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) .toggle__track { width: 32px; height: 18px; }\n:host([size=\"sm\"]) .toggle__thumb { width: 14px; height: 14px; inset-inline-start: 2px; }\n:host(.ts-toggle--checked[size=\"sm\"]) .toggle__thumb { inset-inline-start: 16px; }\n\n:host([size=\"md\"]) .toggle__track { width: 40px; height: 22px; }\n:host([size=\"md\"]) .toggle__thumb { width: 18px; height: 18px; inset-inline-start: 2px; }\n:host(.ts-toggle--checked[size=\"md\"]) .toggle__thumb { inset-inline-start: 20px; }\n\n:host([size=\"lg\"]) .toggle__track { width: 50px; height: 28px; }\n:host([size=\"lg\"]) .toggle__thumb { width: 24px; height: 24px; inset-inline-start: 2px; }\n:host(.ts-toggle--checked[size=\"lg\"]) .toggle__thumb { inset-inline-start: 24px; }\n\n/* ---- Label ---- */\n.toggle__label {\n  font-size: var(--ts-font-size-sm);\n  color: var(--ts-color-text-secondary);\n  cursor: inherit;\n  user-select: none;\n}\n\n:host([size=\"lg\"]) .toggle__label {\n  font-size: var(--ts-font-size-md);\n}\n","import { Component, Prop, Event, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsToggleEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot - Default slot for the toggle label.\n *\n * @part base - The toggle container.\n * @part track - The toggle track.\n * @part thumb - The toggle thumb/knob.\n * @part label - The label wrapper.\n */\n@Component({\n  tag: 'ts-toggle',\n  styleUrl: 'toggle.css',\n  shadow: true,\n})\nexport class TsToggle {\n  @Element() hostEl!: HTMLElement;\n\n  private inputId = generateId('ts-toggle');\n\n  /** Whether the toggle is checked. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** The toggle's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Renders the toggle as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Name for form submission. */\n  @Prop() name?: string;\n\n  /** Value for form submission. */\n  @Prop() value?: string;\n\n  /** Emitted when the toggle state changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsToggleEventDetail>;\n\n  /** Programmatically toggle the checked state. */\n  @Method()\n  async toggle(): Promise<void> {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.tsChange.emit({ checked: this.checked });\n    }\n  }\n\n  private handleClick = (): void => {\n    this.toggle();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-toggle': true,\n          [`ts-toggle--${this.size}`]: true,\n          'ts-toggle--checked': this.checked,\n          'ts-toggle--disabled': this.disabled,\n        }}\n      >\n        <div\n          class=\"toggle__base\"\n          part=\"base\"\n          role=\"switch\"\n          aria-checked={this.checked ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n        >\n          <div class=\"toggle__track\" part=\"track\">\n            <div class=\"toggle__thumb\" part=\"thumb\" />\n          </div>\n\n          <label class=\"toggle__label\" part=\"label\" id={`${this.inputId}-label`}>\n            <slot />\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ts-toolbar.cjs.entry.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const toolbarCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-toolbar-bg:var(--ts-color-bg-surface);--ts-toolbar-border-color:var(--ts-color-border-subtle);--ts-toolbar-padding:var(--ts-spacing-3);--ts-toolbar-gap:var(--ts-spacing-2)}.toolbar__base{display:flex;align-items:center;gap:var(--ts-toolbar-gap);padding-inline:var(--ts-toolbar-padding);padding-block:var(--ts-toolbar-padding);background-color:var(--ts-toolbar-bg)}:host([variant="bordered"]) .toolbar__base{border-block-end:1px solid var(--ts-toolbar-border-color)}:host([variant="elevated"]) .toolbar__base{box-shadow:var(--ts-shadow-sm);border-radius:var(--ts-radius-md)}:host([size="sm"]) .toolbar__base{padding-inline:var(--ts-spacing-2);padding-block:var(--ts-spacing-1);gap:var(--ts-spacing-1);font-size:var(--ts-font-size-sm)}:host([size="md"]) .toolbar__base{padding-inline:var(--ts-spacing-3);padding-block:var(--ts-spacing-2);gap:var(--ts-spacing-2);font-size:var(--ts-font-size-md)}:host([size="lg"]) .toolbar__base{padding-inline:var(--ts-spacing-4);padding-block:var(--ts-spacing-3);gap:var(--ts-spacing-3);font-size:var(--ts-font-size-lg)}.toolbar__start{display:flex;align-items:center;gap:var(--ts-toolbar-gap);flex-shrink:0}.toolbar__center{display:flex;align-items:center;gap:var(--ts-toolbar-gap);flex:1;min-inline-size:0}.toolbar__end{display:flex;align-items:center;gap:var(--ts-toolbar-gap);flex-shrink:0;margin-inline-start:auto}.toolbar__start:empty,.toolbar__end:empty{display:none}`;
+
+const TsToolbar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** The toolbar variant style. */
+    variant = 'default';
+    /** The toolbar size. */
+    size = 'md';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (index.h(index.Host, { key: '83f2c4baba0daca4e9ce04179c0a135ce7c015b9', class: {
+                'ts-toolbar': true,
+                [`ts-toolbar--${this.variant}`]: true,
+                [`ts-toolbar--${this.size}`]: true,
+            }, role: "toolbar", "aria-orientation": "horizontal" }, index.h("div", { key: '5c2b6c4b0050c0ca000aa475fedff456efee66c3', class: "toolbar__base", part: "base" }, index.h("div", { key: '2e1e1f97c6ba0481cc039aee8c5407c2eb4b55b5', class: "toolbar__start", part: "start" }, index.h("slot", { key: 'e147cb24308e4bc2de5bcd2d6bd0dbbed48bb029', name: "start" })), index.h("div", { key: '727603e4bfed0642feeba89288c64315cc0b1dbf', class: "toolbar__center", part: "center" }, index.h("slot", { key: 'b323e21f9290c0b07e2dae640287aabb739b71b6' })), index.h("div", { key: '33040658c7a58b1df7b16c2c01bf8a8460307efe', class: "toolbar__end", part: "end" }, index.h("slot", { key: '05209ec0a17ec31a4de2193d84456cdcb3207608', name: "end" })))));
+    }
+};
+TsToolbar.style = toolbarCss();
+
+exports.ts_toolbar = TsToolbar;
+//# sourceMappingURL=ts-toolbar.entry.cjs.js.map
+
+//# sourceMappingURL=ts-toolbar.cjs.entry.js.map

package/dist/cjs/ts-toolbar.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-toolbar.cjs.entry.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,+7CAA+7C,CAAC;;MCkB78C,SAAS,GAAA,MAAA;;;;;IAEK,OAAO,GAAwC,SAAS;;IAGxD,IAAI,GAAW,IAAI;;IAG5C,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,YAAY,EAAE,IAAI;AAClB,gBAAA,CAAC,eAAe,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACrC,gBAAA,CAAC,eAAe,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;AACnC,aAAA,EACD,IAAI,EAAC,SAAS,EAAA,kBAAA,EACG,YAAY,EAAA,EAE7BD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,EAAA,EACpCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,EAAA,EACtCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CACjB,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,EAAA,EACxCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,KAAK,EAAA,EAClCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,KAAK,EAAA,CAAG,CACf,CACF,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/toolbar/toolbar.css?tag=ts-toolbar&encapsulation=shadow","src/components/toolbar/toolbar.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-toolbar — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-toolbar-bg            Background color\n     --ts-toolbar-border-color  Border color\n     --ts-toolbar-padding       Padding\n     --ts-toolbar-gap           Gap between items\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-toolbar-bg: var(--ts-color-bg-surface);\n  --ts-toolbar-border-color: var(--ts-color-border-subtle);\n  --ts-toolbar-padding: var(--ts-spacing-3);\n  --ts-toolbar-gap: var(--ts-spacing-2);\n}\n\n.toolbar__base {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-toolbar-gap);\n  padding-inline: var(--ts-toolbar-padding);\n  padding-block: var(--ts-toolbar-padding);\n  background-color: var(--ts-toolbar-bg);\n}\n\n/* ---- Variants ---- */\n:host([variant=\"bordered\"]) .toolbar__base {\n  border-block-end: 1px solid var(--ts-toolbar-border-color);\n}\n\n:host([variant=\"elevated\"]) .toolbar__base {\n  box-shadow: var(--ts-shadow-sm);\n  border-radius: var(--ts-radius-md);\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) .toolbar__base {\n  padding-inline: var(--ts-spacing-2);\n  padding-block: var(--ts-spacing-1);\n  gap: var(--ts-spacing-1);\n  font-size: var(--ts-font-size-sm);\n}\n\n:host([size=\"md\"]) .toolbar__base {\n  padding-inline: var(--ts-spacing-3);\n  padding-block: var(--ts-spacing-2);\n  gap: var(--ts-spacing-2);\n  font-size: var(--ts-font-size-md);\n}\n\n:host([size=\"lg\"]) .toolbar__base {\n  padding-inline: var(--ts-spacing-4);\n  padding-block: var(--ts-spacing-3);\n  gap: var(--ts-spacing-3);\n  font-size: var(--ts-font-size-lg);\n}\n\n/* ---- Layout sections ---- */\n.toolbar__start {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-toolbar-gap);\n  flex-shrink: 0;\n}\n\n.toolbar__center {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-toolbar-gap);\n  flex: 1;\n  min-inline-size: 0;\n}\n\n.toolbar__end {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-toolbar-gap);\n  flex-shrink: 0;\n  margin-inline-start: auto;\n}\n\n.toolbar__start:empty,\n.toolbar__end:empty {\n  display: none;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { TsSize } from '../../types';\n\n/**\n * @slot - Default slot for toolbar items (center).\n * @slot start - Left/start-aligned items.\n * @slot end - Right/end-aligned items.\n *\n * @part base - The toolbar container.\n * @part start - The start slot wrapper.\n * @part center - The center/default slot wrapper.\n * @part end - The end slot wrapper.\n */\n@Component({\n  tag: 'ts-toolbar',\n  styleUrl: 'toolbar.css',\n  shadow: true,\n})\nexport class TsToolbar {\n  /** The toolbar variant style. */\n  @Prop({ reflect: true }) variant: 'default' | 'bordered' | 'elevated' = 'default';\n\n  /** The toolbar size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-toolbar': true,\n          [`ts-toolbar--${this.variant}`]: true,\n          [`ts-toolbar--${this.size}`]: true,\n        }}\n        role=\"toolbar\"\n        aria-orientation=\"horizontal\"\n      >\n        <div class=\"toolbar__base\" part=\"base\">\n          <div class=\"toolbar__start\" part=\"start\">\n            <slot name=\"start\" />\n          </div>\n\n          <div class=\"toolbar__center\" part=\"center\">\n            <slot />\n          </div>\n\n          <div class=\"toolbar__end\" part=\"end\">\n            <slot name=\"end\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}