@tessera-ui/core 0.4.0

package/dist/esm/ts-switch-group.entry.js

@@ -0,0 +1,107 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+
+const switchGroupCss = () => `:host{display:inline-flex;font-family:var(--ts-font-family-base);--ts-switch-group-bg:var(--ts-color-neutral-100);--ts-switch-group-active-bg:var(--ts-color-bg-elevated);--ts-switch-group-radius:var(--ts-shape-interactive)}:host([full-width]){display:flex;inline-size:100%}.switch-group__base{display:inline-flex;align-items:center;gap:var(--ts-spacing-1);padding:var(--ts-spacing-1);background-color:var(--ts-switch-group-bg);border-radius:var(--ts-switch-group-radius);inline-size:100%}:host([size="sm"]) .switch-group__base{font-size:var(--ts-font-size-sm)}:host([size="md"]) .switch-group__base{font-size:var(--ts-font-size-md)}:host([size="lg"]) .switch-group__base{font-size:var(--ts-font-size-lg)}:host([disabled]){opacity:0.5;pointer-events:none}`;
+
+const TsSwitchGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tsChange = createEvent(this, "tsChange");
+    }
+    get hostEl() { return getElement(this); }
+    /** The currently active segment value. */
+    value;
+    /** The size of the switch group. */
+    size = 'md';
+    /** Disables the entire group. */
+    disabled = false;
+    /** Stretch to fill the container width. */
+    fullWidth = false;
+    /** Emitted when the active value changes. */
+    tsChange;
+    onValueChange() {
+        this.syncOptions();
+    }
+    handleOptionSelect(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.selectOption(event.detail.value);
+    }
+    handleKeyDown(event) {
+        if (this.disabled)
+            return;
+        const options = this.getOptions();
+        const enabledOptions = options.filter(o => !o.disabled);
+        if (enabledOptions.length === 0)
+            return;
+        const currentIndex = enabledOptions.findIndex(o => o.value === this.value);
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                event.preventDefault();
+                {
+                    const nextIndex = (currentIndex + 1) % enabledOptions.length;
+                    this.selectOption(enabledOptions[nextIndex].value);
+                }
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                event.preventDefault();
+                {
+                    const prevIndex = (currentIndex - 1 + enabledOptions.length) % enabledOptions.length;
+                    this.selectOption(enabledOptions[prevIndex].value);
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.selectOption(enabledOptions[0].value);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.selectOption(enabledOptions[enabledOptions.length - 1].value);
+                break;
+        }
+    }
+    componentDidLoad() {
+        this.syncOptions();
+    }
+    getOptions() {
+        return Array.from(this.hostEl.querySelectorAll('ts-switch-option'));
+    }
+    selectOption(value) {
+        if (value !== this.value) {
+            this.value = value;
+            this.tsChange.emit({ value });
+        }
+        this.syncOptions();
+    }
+    syncOptions() {
+        const options = this.getOptions();
+        options.forEach(option => {
+            option.active = option.value === this.value;
+        });
+    }
+    handleSlotChange = () => {
+        this.syncOptions();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '211ffe406ac11e248971c5485d88e2855cdcdb77', class: {
+                'ts-switch-group': true,
+                [`ts-switch-group--${this.size}`]: true,
+                'ts-switch-group--disabled': this.disabled,
+                'ts-switch-group--full-width': this.fullWidth,
+            }, role: "radiogroup" }, h("div", { key: '82e39f308c359e8d60cc8349de380fcb08f6b252', class: "switch-group__base", part: "base" }, h("slot", { key: '81748d90d92184c0fa3b9c6cf55f32dff3267b46', onSlotchange: this.handleSlotChange }))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+TsSwitchGroup.style = switchGroupCss();
+
+export { TsSwitchGroup as ts_switch_group };
+//# sourceMappingURL=ts-switch-group.entry.js.map
+
+//# sourceMappingURL=ts-switch-group.entry.js.map

package/dist/esm/ts-switch-group.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-switch-group.entry.js","sources":["src/components/switch-group/switch-group.css?tag=ts-switch-group&encapsulation=shadow","src/components/switch-group/switch-group.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-switch-group — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-switch-group-bg          Background color\n     --ts-switch-group-active-bg   Active segment background\n     --ts-switch-group-radius      Border radius\n   ========================================================================== */\n\n:host {\n  display: inline-flex;\n  font-family: var(--ts-font-family-base);\n\n  --ts-switch-group-bg: var(--ts-color-neutral-100);\n  --ts-switch-group-active-bg: var(--ts-color-bg-elevated);\n  --ts-switch-group-radius: var(--ts-shape-interactive);\n}\n\n:host([full-width]) {\n  display: flex;\n  inline-size: 100%;\n}\n\n.switch-group__base {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ts-spacing-1);\n  padding: var(--ts-spacing-1);\n  background-color: var(--ts-switch-group-bg);\n  border-radius: var(--ts-switch-group-radius);\n  inline-size: 100%;\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) .switch-group__base {\n  font-size: var(--ts-font-size-sm);\n}\n\n:host([size=\"md\"]) .switch-group__base {\n  font-size: var(--ts-font-size-md);\n}\n\n:host([size=\"lg\"]) .switch-group__base {\n  font-size: var(--ts-font-size-lg);\n}\n\n/* ---- Disabled ---- */\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n","import { Component, Prop, Event, h, Host, Element, Listen, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize } from '../../types';\n\n/**\n * @slot - Default slot for ts-switch-option children.\n *\n * @part base - The switch group container.\n */\n@Component({\n  tag: 'ts-switch-group',\n  styleUrl: 'switch-group.css',\n  shadow: true,\n})\nexport class TsSwitchGroup {\n  @Element() hostEl!: HTMLElement;\n\n  /** The currently active segment value. */\n  @Prop({ reflect: true, mutable: true }) value?: string;\n\n  /** The size of the switch group. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Disables the entire group. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Stretch to fill the container width. */\n  @Prop({ reflect: true }) fullWidth = false;\n\n  /** Emitted when the active value changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<{ value: string }>;\n\n  @Watch('value')\n  onValueChange(): void {\n    this.syncOptions();\n  }\n\n  @Listen('tsOptionSelect')\n  handleOptionSelect(event: CustomEvent<{ value: string }>): void {\n    event.stopPropagation();\n    if (this.disabled) return;\n    this.selectOption(event.detail.value);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent): void {\n    if (this.disabled) return;\n\n    const options = this.getOptions();\n    const enabledOptions = options.filter(o => !o.disabled);\n    if (enabledOptions.length === 0) return;\n\n    const currentIndex = enabledOptions.findIndex(o => o.value === this.value);\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        {\n          const nextIndex = (currentIndex + 1) % enabledOptions.length;\n          this.selectOption(enabledOptions[nextIndex].value);\n        }\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        {\n          const prevIndex = (currentIndex - 1 + enabledOptions.length) % enabledOptions.length;\n          this.selectOption(enabledOptions[prevIndex].value);\n        }\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.selectOption(enabledOptions[0].value);\n        break;\n      case 'End':\n        event.preventDefault();\n        this.selectOption(enabledOptions[enabledOptions.length - 1].value);\n        break;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.syncOptions();\n  }\n\n  private getOptions(): HTMLTsSwitchOptionElement[] {\n    return Array.from(this.hostEl.querySelectorAll('ts-switch-option')) as HTMLTsSwitchOptionElement[];\n  }\n\n  private selectOption(value: string): void {\n    if (value !== this.value) {\n      this.value = value;\n      this.tsChange.emit({ value });\n    }\n    this.syncOptions();\n  }\n\n  private syncOptions(): void {\n    const options = this.getOptions();\n    options.forEach(option => {\n      (option as unknown as { active: boolean }).active = option.value === this.value;\n    });\n  }\n\n  private handleSlotChange = (): void => {\n    this.syncOptions();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-switch-group': true,\n          [`ts-switch-group--${this.size}`]: true,\n          'ts-switch-group--disabled': this.disabled,\n          'ts-switch-group--full-width': this.fullWidth,\n        }}\n        role=\"radiogroup\"\n      >\n        <div class=\"switch-group__base\" part=\"base\">\n          <slot onSlotchange={this.handleSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n}\n\ninterface HTMLTsSwitchOptionElement extends HTMLElement {\n  value: string;\n  disabled: boolean;\n  active: boolean;\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ts-switch-option.entry.js

@@ -0,0 +1,40 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+
+const switchOptionCss = () => `:host{display:inline-flex;flex:1;outline:none}.switch-option__base{display:inline-flex;align-items:center;justify-content:center;gap:var(--ts-spacing-1);inline-size:100%;padding-inline:var(--ts-spacing-3);padding-block:var(--ts-spacing-1);border-radius:calc(var(--ts-switch-group-radius, var(--ts-shape-interactive)) - 2px);cursor:pointer;user-select:none;white-space:nowrap;font-weight:var(--ts-font-weight-medium);color:var(--ts-color-text-secondary);transition:background-color var(--ts-transition-fast),     color var(--ts-transition-fast),     box-shadow var(--ts-transition-fast)}.switch-option__base:hover{color:var(--ts-color-text-primary)}:host(:focus-visible) .switch-option__base{box-shadow:var(--ts-focus-ring)}:host([active]) .switch-option__base{background-color:var(--ts-switch-group-active-bg, var(--ts-color-bg-elevated));color:var(--ts-color-text-primary);box-shadow:var(--ts-shadow-sm)}:host([disabled]) .switch-option__base{opacity:0.5;cursor:not-allowed;pointer-events:none}.switch-option__icon{display:inline-flex;align-items:center;flex-shrink:0}.switch-option__label{display:inline-flex;align-items:center}`;
+
+const TsSwitchOption = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tsOptionSelect = createEvent(this, "tsOptionSelect");
+    }
+    get hostEl() { return getElement(this); }
+    /** Unique identifier for this option. */
+    value;
+    /** Disables this option. */
+    disabled = false;
+    /** Optional icon name. */
+    icon;
+    /** Whether this option is the active selection (set by parent). */
+    active = false;
+    /** @internal Emitted when this option is clicked. */
+    tsOptionSelect;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.tsOptionSelect.emit({ value: this.value || '' });
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '21e9caaea440e37c291991ef7e7cbde9446a4078', class: {
+                'ts-switch-option': true,
+                'ts-switch-option--active': this.active,
+                'ts-switch-option--disabled': this.disabled,
+            }, role: "radio", tabindex: this.active ? 0 : -1, "aria-checked": String(this.active), "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick }, h("div", { key: '8633d6def560f44c4f6c8dae01b42d187f590149', class: "switch-option__base", part: "base" }, this.icon && (h("span", { key: '0c1ceca3c3f57e0dbf6841bad79136d93818d342', class: "switch-option__icon", part: "icon", "aria-hidden": "true" }, h("ts-icon", { key: '141990f023740c72e9aa7ccc40f9479ad7986cca', name: this.icon, size: "sm" }))), h("span", { key: 'a11e04f99cda8742f27251c58c5e65402c52597b', class: "switch-option__label" }, h("slot", { key: '3d0a210f02eccfa6c5f68ab7f5cb6f41dc5413a9' })))));
+    }
+};
+TsSwitchOption.style = switchOptionCss();
+
+export { TsSwitchOption as ts_switch_option };
+//# sourceMappingURL=ts-switch-option.entry.js.map
+
+//# sourceMappingURL=ts-switch-option.entry.js.map

package/dist/esm/ts-switch-option.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-switch-option.entry.js","sources":["src/components/switch-group/switch-option.css?tag=ts-switch-option&encapsulation=shadow","src/components/switch-group/switch-option.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-switch-option — Shadow DOM Scoped Styles\n   ========================================================================== */\n\n:host {\n  display: inline-flex;\n  flex: 1;\n  outline: none;\n}\n\n.switch-option__base {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ts-spacing-1);\n  inline-size: 100%;\n  padding-inline: var(--ts-spacing-3);\n  padding-block: var(--ts-spacing-1);\n  border-radius: calc(var(--ts-switch-group-radius, var(--ts-shape-interactive)) - 2px);\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n  font-weight: var(--ts-font-weight-medium);\n  color: var(--ts-color-text-secondary);\n  transition:\n    background-color var(--ts-transition-fast),\n    color var(--ts-transition-fast),\n    box-shadow var(--ts-transition-fast);\n}\n\n.switch-option__base:hover {\n  color: var(--ts-color-text-primary);\n}\n\n:host(:focus-visible) .switch-option__base {\n  box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Active ---- */\n:host([active]) .switch-option__base {\n  background-color: var(--ts-switch-group-active-bg, var(--ts-color-bg-elevated));\n  color: var(--ts-color-text-primary);\n  box-shadow: var(--ts-shadow-sm);\n}\n\n/* ---- Disabled ---- */\n:host([disabled]) .switch-option__base {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ---- Icon ---- */\n.switch-option__icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ---- Label ---- */\n.switch-option__label {\n  display: inline-flex;\n  align-items: center;\n}\n","import { Component, Prop, Event, h, Host, Element } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for label text.\n *\n * @part base - The option container.\n * @part icon - The icon wrapper.\n */\n@Component({\n  tag: 'ts-switch-option',\n  styleUrl: 'switch-option.css',\n  shadow: true,\n})\nexport class TsSwitchOption {\n  @Element() hostEl!: HTMLElement;\n\n  /** Unique identifier for this option. */\n  @Prop({ reflect: true }) value?: string;\n\n  /** Disables this option. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Optional icon name. */\n  @Prop() icon?: string;\n\n  /** Whether this option is the active selection (set by parent). */\n  @Prop({ reflect: true, mutable: true }) active = false;\n\n  /** @internal Emitted when this option is clicked. */\n  @Event({ eventName: 'tsOptionSelect', bubbles: true }) tsOptionSelect!: EventEmitter<{ value: string }>;\n\n  private handleClick = (): void => {\n    if (this.disabled) return;\n    this.tsOptionSelect.emit({ value: this.value || '' });\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-switch-option': true,\n          'ts-switch-option--active': this.active,\n          'ts-switch-option--disabled': this.disabled,\n        }}\n        role=\"radio\"\n        tabindex={this.active ? 0 : -1}\n        aria-checked={String(this.active)}\n        aria-disabled={this.disabled ? 'true' : undefined}\n        onClick={this.handleClick}\n      >\n        <div class=\"switch-option__base\" part=\"base\">\n          {this.icon && (\n            <span class=\"switch-option__icon\" part=\"icon\" aria-hidden=\"true\">\n              <ts-icon name={this.icon} size=\"sm\" />\n            </span>\n          )}\n          <span class=\"switch-option__label\">\n            <slot />\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,0mCAA0mC,CAAC;;MCc7nC,cAAc,GAAA,MAAA;;;;;;;AAIA,IAAA,KAAK;;IAGL,QAAQ,GAAG,KAAK;;AAGjC,IAAA,IAAI;;IAG4B,MAAM,GAAG,KAAK;;AAGC,IAAA,cAAc;IAE7D,WAAW,GAAG,MAAW;QAC/B,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,CAAC;AACvD,KAAC;;IAGD,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,kBAAkB,EAAE,IAAI;gBACxB,0BAA0B,EAAE,IAAI,CAAC,MAAM;gBACvC,4BAA4B,EAAE,IAAI,CAAC,QAAQ;AAC5C,aAAA,EACD,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,kBAChB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAA,eAAA,EAClB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAEzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,EAAA,EACzC,IAAI,CAAC,IAAI,KACR,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAA,EAC9D,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,CACjC,CACR,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,sBAAsB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,CACH,CACD;;;;;;;"}

package/dist/esm/ts-tab-panel.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+
+const tabPanelCss = () => `:host{display:block}.tab-panel{outline:none}`;
+
+const TsTabPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get hostEl() { return getElement(this); }
+    /** The label text displayed in the tab button. */
+    tab;
+    /** Unique identifier for this tab panel. */
+    value;
+    /** Whether this tab is disabled. */
+    disabled = false;
+    /** Optional icon name displayed before the tab label. */
+    icon;
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: 'dec8c9d7d1f32e6f5aef0d4bfbde8d62dd91d865' }, h("div", { key: '14de5c9f6ff8c8d56733fc53088da96064e6bdc6', class: "tab-panel", part: "panel", role: "tabpanel" }, h("slot", { key: '9a715c140d76ef238952f5b399cb1443af399432' }))));
+    }
+};
+TsTabPanel.style = tabPanelCss();
+
+export { TsTabPanel as ts_tab_panel };
+//# sourceMappingURL=ts-tab-panel.entry.js.map
+
+//# sourceMappingURL=ts-tab-panel.entry.js.map

package/dist/esm/ts-tab-panel.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-tab-panel.entry.js","sources":["src/components/tabs/tab-panel.css?tag=ts-tab-panel&encapsulation=shadow","src/components/tabs/tab-panel.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-tab-panel — Shadow DOM Scoped Styles\n   ========================================================================== */\n\n:host {\n  display: block;\n}\n\n.tab-panel {\n  outline: none;\n}\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n/**\n * @slot - Default slot for panel content.\n *\n * @part panel - The panel container element.\n */\n@Component({\n  tag: 'ts-tab-panel',\n  styleUrl: 'tab-panel.css',\n  shadow: true,\n})\nexport class TsTabPanel {\n  @Element() hostEl!: HTMLElement;\n\n  /** The label text displayed in the tab button. */\n  @Prop() tab!: string;\n\n  /** Unique identifier for this tab panel. */\n  @Prop({ reflect: true }) value!: string;\n\n  /** Whether this tab is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Optional icon name displayed before the tab label. */\n  @Prop() icon?: string;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host>\n        <div class=\"tab-panel\" part=\"panel\" role=\"tabpanel\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,4CAA4C,CAAC;;MCY3D,UAAU,GAAA,MAAA;;;;;;AAIb,IAAA,GAAG;;AAGc,IAAA,KAAK;;IAGL,QAAQ,GAAG,KAAK;;AAGjC,IAAA,IAAI;;IAGZ,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU,EAAA,EACjD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;"}

package/dist/esm/ts-table.entry.js

@@ -0,0 +1,37 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+
+const tableCss = () => `ts-table{display:block;font-family:var(--ts-font-family-base);--ts-table-bg:var(--ts-color-bg-surface);--ts-table-border-color:var(--ts-color-border-subtle);--ts-table-header-bg:var(--ts-color-bg-subtle);--ts-table-header-color:var(--ts-color-text-primary);--ts-table-row-hover-bg:var(--ts-color-bg-hover);--ts-table-stripe-bg:var(--ts-color-bg-subtle);--ts-table-cell-padding:var(--ts-spacing-3) var(--ts-spacing-4)}ts-table[compact]{--ts-table-cell-padding:var(--ts-spacing-1) var(--ts-spacing-2)}ts-table .table__wrapper{overflow-x:auto;background-color:var(--ts-table-bg);border-radius:var(--ts-shape-container);border:1px solid var(--ts-table-border-color)}ts-table .table__wrapper:focus-visible{box-shadow:var(--ts-focus-ring);outline:none}ts-table table{width:100%;border-collapse:collapse;border-spacing:0;font-size:var(--ts-font-size-sm);color:var(--ts-color-text-secondary)}ts-table th{padding:var(--ts-table-cell-padding);text-align:start;font-weight:var(--ts-font-weight-medium);font-size:var(--ts-font-size-xs);color:var(--ts-table-header-color);background-color:var(--ts-table-header-bg);border-bottom:1px solid var(--ts-table-border-color);white-space:nowrap;letter-spacing:var(--ts-letter-spacing-wide);text-transform:uppercase}ts-table td{padding:var(--ts-table-cell-padding);border-bottom:1px solid var(--ts-table-border-color);vertical-align:middle}ts-table tbody tr:last-child td{border-bottom:none}ts-table.ts-table--striped tbody tr:nth-child(even){background-color:var(--ts-table-stripe-bg)}ts-table.ts-table--hoverable tbody tr{transition:background-color var(--ts-transition-fast)}ts-table.ts-table--hoverable tbody tr:hover{background-color:var(--ts-table-row-hover-bg)}ts-table.ts-table--bordered th,ts-table.ts-table--bordered td{border:1px solid var(--ts-table-border-color)}ts-table.ts-table--sticky-header .table__wrapper{max-block-size:24rem;overflow-y:auto}ts-table.ts-table--sticky-header th{position:sticky;top:0;z-index:1}`;
+
+const TsTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get hostEl() { return getElement(this); }
+    /** Applies alternating row background colors. */
+    striped = false;
+    /** Adds borders to all cells. */
+    bordered = false;
+    /** Highlights rows on hover. */
+    hoverable = false;
+    /** Reduces cell padding for denser display. */
+    compact = false;
+    /** Makes the table header stick to the top on scroll. */
+    stickyHeader = false;
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: 'c866dae0b6964580df42d51748d98107e0d6baec', class: {
+                'ts-table': true,
+                'ts-table--striped': this.striped,
+                'ts-table--bordered': this.bordered,
+                'ts-table--hoverable': this.hoverable,
+                'ts-table--compact': this.compact,
+                'ts-table--sticky-header': this.stickyHeader,
+            } }, h("div", { key: 'e98054b22f0f106888cbb3751d77abf5fd55a8ee', class: "table__wrapper", role: "region", tabindex: 0 }, h("slot", { key: 'cd5b905f8142ce381442abef895daa39ef14431e' }))));
+    }
+};
+TsTable.style = tableCss();
+
+export { TsTable as ts_table };
+//# sourceMappingURL=ts-table.entry.js.map
+
+//# sourceMappingURL=ts-table.entry.js.map

package/dist/esm/ts-table.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-table.entry.js","sources":["src/components/table/table.css?tag=ts-table","src/components/table/table.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-table — Light DOM Styles\n\n   Uses light DOM (no Shadow DOM) so nested <table>, <th>, <td>, <tr>\n   elements can be styled directly.\n\n   Component tokens (Tier 3):\n     --ts-table-bg             Table background color\n     --ts-table-border-color   Border color for cells and edges\n     --ts-table-header-bg      Header row background\n     --ts-table-header-color   Header text color\n     --ts-table-row-hover-bg   Row hover background\n     --ts-table-stripe-bg      Alternating row background\n     --ts-table-cell-padding   Cell padding\n   ========================================================================== */\n\nts-table {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-table-bg: var(--ts-color-bg-surface);\n  --ts-table-border-color: var(--ts-color-border-subtle);\n  --ts-table-header-bg: var(--ts-color-bg-subtle);\n  --ts-table-header-color: var(--ts-color-text-primary);\n  --ts-table-row-hover-bg: var(--ts-color-bg-hover);\n  --ts-table-stripe-bg: var(--ts-color-bg-subtle);\n  --ts-table-cell-padding: var(--ts-spacing-3) var(--ts-spacing-4);\n}\n\nts-table[compact] {\n  --ts-table-cell-padding: var(--ts-spacing-1) var(--ts-spacing-2);\n}\n\n/* ---- Scrollable Wrapper ---- */\nts-table .table__wrapper {\n  overflow-x: auto;\n  background-color: var(--ts-table-bg);\n  border-radius: var(--ts-shape-container);\n  border: 1px solid var(--ts-table-border-color);\n}\n\nts-table .table__wrapper:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n  outline: none;\n}\n\n/* ---- Table ---- */\nts-table table {\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 0;\n  font-size: var(--ts-font-size-sm);\n  color: var(--ts-color-text-secondary);\n}\n\n/* ---- Header ---- */\nts-table th {\n  padding: var(--ts-table-cell-padding);\n  text-align: start;\n  font-weight: var(--ts-font-weight-medium);\n  font-size: var(--ts-font-size-xs);\n  color: var(--ts-table-header-color);\n  background-color: var(--ts-table-header-bg);\n  border-bottom: 1px solid var(--ts-table-border-color);\n  white-space: nowrap;\n  letter-spacing: var(--ts-letter-spacing-wide);\n  text-transform: uppercase;\n}\n\n/* ---- Cells ---- */\nts-table td {\n  padding: var(--ts-table-cell-padding);\n  border-bottom: 1px solid var(--ts-table-border-color);\n  vertical-align: middle;\n}\n\n/* ---- Last row — no bottom border ---- */\nts-table tbody tr:last-child td {\n  border-bottom: none;\n}\n\n/* ---- Striped ---- */\nts-table.ts-table--striped tbody tr:nth-child(even) {\n  background-color: var(--ts-table-stripe-bg);\n}\n\n/* ---- Hoverable ---- */\nts-table.ts-table--hoverable tbody tr {\n  transition: background-color var(--ts-transition-fast);\n}\n\nts-table.ts-table--hoverable tbody tr:hover {\n  background-color: var(--ts-table-row-hover-bg);\n}\n\n/* ---- Bordered ---- */\nts-table.ts-table--bordered th,\nts-table.ts-table--bordered td {\n  border: 1px solid var(--ts-table-border-color);\n}\n\n/* ---- Sticky header ---- */\nts-table.ts-table--sticky-header .table__wrapper {\n  max-block-size: 24rem;\n  overflow-y: auto;\n}\n\nts-table.ts-table--sticky-header th {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n/**\n * A styled wrapper for native HTML tables. Consumers place standard\n * `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>` elements inside.\n *\n * Uses light DOM (no Shadow DOM) so nested table elements can be\n * styled directly via the component's CSS.\n *\n * @slot - Default slot for the native `<table>` element.\n */\n@Component({\n  tag: 'ts-table',\n  styleUrl: 'table.css',\n  shadow: false,\n})\nexport class TsTable {\n  @Element() hostEl!: HTMLElement;\n\n  /** Applies alternating row background colors. */\n  @Prop({ reflect: true }) striped = false;\n\n  /** Adds borders to all cells. */\n  @Prop({ reflect: true }) bordered = false;\n\n  /** Highlights rows on hover. */\n  @Prop({ reflect: true }) hoverable = false;\n\n  /** Reduces cell padding for denser display. */\n  @Prop({ reflect: true }) compact = false;\n\n  /** Makes the table header stick to the top on scroll. */\n  @Prop({ reflect: true }) stickyHeader = false;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-table': true,\n          'ts-table--striped': this.striped,\n          'ts-table--bordered': this.bordered,\n          'ts-table--hoverable': this.hoverable,\n          'ts-table--compact': this.compact,\n          'ts-table--sticky-header': this.stickyHeader,\n        }}\n      >\n        <div class=\"table__wrapper\" role=\"region\" tabindex={0}>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,s6DAAs6D,CAAC;;MCgBl7D,OAAO,GAAA,MAAA;;;;;;IAIO,OAAO,GAAG,KAAK;;IAGf,QAAQ,GAAG,KAAK;;IAGhB,SAAS,GAAG,KAAK;;IAGjB,OAAO,GAAG,KAAK;;IAGf,YAAY,GAAG,KAAK;;IAG7C,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,IAAI;gBAChB,mBAAmB,EAAE,IAAI,CAAC,OAAO;gBACjC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;gBACnC,qBAAqB,EAAE,IAAI,CAAC,SAAS;gBACrC,mBAAmB,EAAE,IAAI,CAAC,OAAO;gBACjC,yBAAyB,EAAE,IAAI,CAAC,YAAY;AAC7C,aAAA,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAA,EACnD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;"}

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

@@ -0,0 +1,122 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-V8-ENixA.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) {
+        registerInstance(this, hostRef);
+        this.tsChange = createEvent(this, "tsChange");
+    }
+    get hostEl() { return 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 (h(Host, { key: '4494e457803734a1e75439fce33da557d2aa9b2e', class: {
+                'ts-tabs': true,
+                [`ts-tabs--${this.variant}`]: true,
+                [`ts-tabs--${this.size}`]: true,
+            } }, h("div", { key: '761806ffca4e983be0e85fa711eb30124a42a283', class: "tabs__tablist", part: "tablist", role: "tablist", onKeyDown: this.handleKeydown }, tabs.map((t) => {
+            const isActive = t.value === this.value;
+            return (h("button", { class: {
+                    'tabs__tab': true,
+                    'tabs__tab--active': isActive,
+                    'tabs__tab--disabled': t.disabled,
+                }, part: isActive ? 'tab tab-active' : 'tab', role: "tab", type: "button", "aria-selected": isActive ? 'true' : 'false', "aria-disabled": t.disabled ? 'true' : undefined, tabindex: isActive ? 0 : -1, disabled: t.disabled, onClick: () => this.handleTabClick(t.value, t.disabled) }, t.icon && h("ts-icon", { name: t.icon, class: "tabs__tab-icon" }), t.tab));
+        })), h("div", { key: '3e6bb533aee14347410a621435fa695233bacb33', class: "tabs__panels", part: "panels" }, h("slot", { key: 'ccf531fbebef82784b1d412ef72828072595f7ee' }))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }]
+    }; }
+};
+TsTabs.style = tabsCss();
+
+export { TsTabs as ts_tabs };
+//# sourceMappingURL=ts-tabs.entry.js.map
+
+//# sourceMappingURL=ts-tabs.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-tabs.entry.js","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"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,115 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+import { g as generateId } from './aria-lpqZSiIf.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) {
+        registerInstance(this, hostRef);
+        this.tsInput = createEvent(this, "tsInput");
+        this.tsChange = createEvent(this, "tsChange");
+        this.tsFocus = createEvent(this, "tsFocus");
+        this.tsBlur = createEvent(this, "tsBlur");
+    }
+    get hostEl() { return getElement(this); }
+    textareaEl;
+    inputId = 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 (h(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 && (h("label", { key: 'b3e4691906f93a375c9064f28810c1f21b4ef465', class: "textarea__label", part: "label", id: labelId, htmlFor: this.inputId }, this.label, this.required && h("span", { key: 'f69fe7f1f6dce0815a987517f426bc9064a82bff', class: "textarea__required", "aria-hidden": "true" }, " *"))), 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" }, 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 && (h("div", { key: '6b269961eec546d027f64bc2d44ef1790f72a42c', class: "textarea__error", part: "error-text", id: errorId, role: "alert" }, this.errorMessage)), !hasError && this.helpText && (h("div", { key: 'ec535a5669fa2dec0b0a4b2aa85233b6f84c136a', class: "textarea__help", part: "help-text", id: helpId }, this.helpText))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }]
+    }; }
+};
+TsTextarea.style = textareaCss();
+
+export { TsTextarea as ts_textarea };
+//# sourceMappingURL=ts-textarea.entry.js.map
+
+//# sourceMappingURL=ts-textarea.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ts-textarea.entry.js","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"],"names":[],"mappings":"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"}