@tessera-ui/core 0.4.0

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

@@ -0,0 +1,34 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const stackCss = () => `:host{display:flex;flex-direction:column}`;
+
+const TsStack = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Spacing token number controlling the gap between items. */
+    gap = '3';
+    /** Cross-axis alignment of items. */
+    align = 'stretch';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const alignMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+        };
+        return (index.h(index.Host, { key: 'e3a85d1cdd874e8e09e069d6d5e22502b494fbef', style: {
+                gap: `var(--ts-spacing-${this.gap})`,
+                alignItems: alignMap[this.align] || 'stretch',
+            } }, index.h("slot", { key: 'eb4127e0dfded8841de2951976461f0ec2ec1f88' })));
+    }
+};
+TsStack.style = stackCss();
+
+exports.ts_stack = TsStack;
+//# sourceMappingURL=ts-stack.entry.cjs.js.map
+
+//# sourceMappingURL=ts-stack.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ts-stack.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yCAAyC,CAAC;;MCYrD,OAAO,GAAA,MAAA;;;;;IAEO,GAAG,GAAW,GAAG;;IAGjB,KAAK,GAA2C,SAAS;;IAGlF,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAA2B;AACvC,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,SAAS;SACnB;QAED,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,GAAG,EAAE,CAAA,iBAAA,EAAoB,IAAI,CAAC,GAAG,CAAA,CAAA,CAAG;gBACpC,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,SAAS;AAC9C,aAAA,EAAA,EAEDD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;","names":["h","Host"],"sources":["src/components/stack/stack.css?tag=ts-stack&encapsulation=shadow","src/components/stack/stack.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-stack — Shadow DOM Scoped Styles\n\n   A vertical stack layout primitive with consistent gap spacing.\n   ========================================================================== */\n\n:host {\n  display: flex;\n  flex-direction: column;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for stacked content.\n *\n * @part base - The stack container.\n */\n@Component({\n  tag: 'ts-stack',\n  styleUrl: 'stack.css',\n  shadow: true,\n})\nexport class TsStack {\n  /** Spacing token number controlling the gap between items. */\n  @Prop({ reflect: true }) gap: string = '3';\n\n  /** Cross-axis alignment of items. */\n  @Prop({ reflect: true }) align: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const alignMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n    };\n\n    return (\n      <Host\n        style={{\n          gap: `var(--ts-spacing-${this.gap})`,\n          alignItems: alignMap[this.align] || 'stretch',\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,74 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const stepCss = () => `:host{display:flex;font-family:var(--ts-font-family-base)}:host(.ts-step--horizontal){flex:1;flex-direction:column}:host(.ts-step--vertical){flex-direction:column}.step__wrapper{display:flex;flex-direction:column}:host(.ts-step--horizontal) .step__wrapper{flex-direction:column;align-items:center}:host(.ts-step--vertical) .step__wrapper{flex-direction:row;align-items:flex-start}.step__header{display:flex;align-items:center;gap:var(--ts-spacing-2)}:host(.ts-step--horizontal) .step__header{flex-direction:column;text-align:center}:host(.ts-step--vertical) .step__header{flex-direction:row}.step__indicator{display:flex;align-items:center;justify-content:center;inline-size:2rem;block-size:2rem;border-radius:var(--ts-radius-full);border:2px solid var(--ts-color-border-default);background-color:var(--ts-color-bg-elevated);color:var(--ts-color-text-tertiary);font-size:var(--ts-font-size-sm);font-weight:var(--ts-font-weight-semi);flex-shrink:0;transition:background-color var(--ts-transition-fast),     border-color var(--ts-transition-fast),     color var(--ts-transition-fast)}.step__indicator--active{border-color:var(--ts-stepper-active-color, var(--ts-color-interactive-primary));background-color:var(--ts-stepper-active-color, var(--ts-color-interactive-primary));color:var(--ts-color-text-on-primary, #fff)}.step__indicator--completed{border-color:var(--ts-stepper-completed-color, var(--ts-color-success-600));background-color:var(--ts-stepper-completed-color, var(--ts-color-success-600));color:#ffffff}.step__indicator--error{border-color:var(--ts-color-danger-500);background-color:var(--ts-color-danger-500);color:#ffffff}.step__icon{inline-size:1em;block-size:1em}.step__text{display:flex;flex-direction:column;gap:var(--ts-spacing-0, 2px)}.step__label{font-size:var(--ts-font-size-sm);font-weight:var(--ts-font-weight-semi);color:var(--ts-color-text-primary)}:host(.ts-step--active) .step__label{color:var(--ts-stepper-active-color, var(--ts-color-interactive-primary))}:host(.ts-step--disabled) .step__label{color:var(--ts-color-text-tertiary)}.step__description{font-size:var(--ts-font-size-xs);color:var(--ts-color-text-tertiary)}.step__connector{display:flex;align-items:center;justify-content:center;flex:1}:host(.ts-step--horizontal) .step__connector{padding-inline:var(--ts-spacing-2);min-inline-size:var(--ts-spacing-4);padding-block-start:var(--ts-spacing-4)}:host(.ts-step--vertical) .step__connector{padding-block:var(--ts-spacing-2);min-block-size:var(--ts-spacing-4);margin-inline-start:calc(1rem - 1px)}.step__connector-line{background-color:var(--ts-stepper-connector-color, var(--ts-color-border-default));transition:background-color var(--ts-transition-fast)}:host(.ts-step--horizontal) .step__connector-line{block-size:2px;inline-size:100%}:host(.ts-step--vertical) .step__connector-line{inline-size:2px;block-size:100%;min-block-size:var(--ts-spacing-6)}.step__connector-line--completed{background-color:var(--ts-stepper-completed-color, var(--ts-color-success-600))}.step__content{padding-block-start:var(--ts-spacing-2)}.step__content:empty{display:none}:host(.ts-step--disabled){opacity:0.5}`;
+
+const TsStep = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get hostEl() { return index.getElement(this); }
+    /** The step label text. */
+    label;
+    /** Optional description text below the label. */
+    description;
+    /** Whether this step is completed. */
+    completed = false;
+    /** Whether this step has an error. */
+    error = false;
+    /** Whether this step is disabled. */
+    disabled = false;
+    /** Optional custom icon name. */
+    icon;
+    get index() {
+        return parseInt(this.hostEl.getAttribute('data-index') || '0', 10);
+    }
+    get isActive() {
+        return this.hostEl.hasAttribute('data-active');
+    }
+    get hasConnector() {
+        return this.hostEl.hasAttribute('data-has-connector');
+    }
+    get orientation() {
+        return this.hostEl.getAttribute('data-orientation') || 'horizontal';
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    renderIndicatorContent() {
+        if (this.completed) {
+            return (index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", class: "step__icon" }, index.h("polyline", { points: "20 6 9 17 4 12" })));
+        }
+        if (this.error) {
+            return (index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", class: "step__icon" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })));
+        }
+        if (this.icon) {
+            return index.h("ts-icon", { name: this.icon, size: "sm" });
+        }
+        return index.h("span", null, this.index + 1);
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (index.h(index.Host, { key: '7746197313bcd00092bbd43bb8e590d9dc363b4e', class: {
+                'ts-step': true,
+                'ts-step--active': this.isActive,
+                'ts-step--completed': this.completed,
+                'ts-step--error': this.error,
+                'ts-step--disabled': this.disabled,
+                [`ts-step--${this.orientation}`]: true,
+            }, role: "listitem", "aria-current": this.isActive ? 'step' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, index.h("div", { key: 'b01e2dc30f9b3c4c5422fc9f58055b4e29e660c0', class: "step__wrapper", part: "step" }, index.h("div", { key: 'e8dc194bffaf1ad7dc73d0d7c3890059e39d23bc', class: "step__header" }, index.h("div", { key: 'b0b54d952b3882db999f62d04d942b9ff92f9566', class: {
+                'step__indicator': true,
+                'step__indicator--active': this.isActive,
+                'step__indicator--completed': this.completed,
+                'step__indicator--error': this.error,
+            }, part: "indicator" }, this.renderIndicatorContent()), index.h("div", { key: 'c634d466d5d1f6bab4a0f2a9dbe450d4b60a0c8b', class: "step__text" }, this.label && (index.h("span", { key: '96dc52bcb324e4e2c96f5c09be2cebb0a4b0fdaf', class: "step__label", part: "label" }, this.label)), this.description && (index.h("span", { key: '863aac22befd3bb4f92c87ee7b5c24ab8d9c789a', class: "step__description", part: "description" }, this.description)))), this.hasConnector && (index.h("div", { key: '45ac15eac777bf1c38e0ffc3da8b667a55a584f7', class: "step__connector", part: "connector" }, index.h("div", { key: '15375de53bfae186638eaa9af95574d7875868b8', class: {
+                'step__connector-line': true,
+                'step__connector-line--completed': this.completed,
+            } }))), index.h("div", { key: 'd5efc013d5b97850a2768464868eade08b953784', class: "step__content", part: "content" }, index.h("slot", { key: '3b84a7d0ebe30fbce3cf5c16b7e515d33436d675' })))));
+    }
+};
+TsStep.style = stepCss();
+
+exports.ts_step = TsStep;
+//# sourceMappingURL=ts-step.entry.cjs.js.map
+
+//# sourceMappingURL=ts-step.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ts-step.cjs.entry.js","mappings":"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","names":["h","Host"],"sources":["src/components/stepper/step.css?tag=ts-step&encapsulation=shadow","src/components/stepper/step.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-step — Shadow DOM Scoped Styles\n   ========================================================================== */\n\n:host {\n  display: flex;\n  font-family: var(--ts-font-family-base);\n}\n\n/* ---- Horizontal layout ---- */\n:host(.ts-step--horizontal) {\n  flex: 1;\n  flex-direction: column;\n}\n\n/* ---- Vertical layout ---- */\n:host(.ts-step--vertical) {\n  flex-direction: column;\n}\n\n.step__wrapper {\n  display: flex;\n  flex-direction: column;\n}\n\n:host(.ts-step--horizontal) .step__wrapper {\n  flex-direction: column;\n  align-items: center;\n}\n\n:host(.ts-step--vertical) .step__wrapper {\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.step__header {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-spacing-2);\n}\n\n:host(.ts-step--horizontal) .step__header {\n  flex-direction: column;\n  text-align: center;\n}\n\n:host(.ts-step--vertical) .step__header {\n  flex-direction: row;\n}\n\n/* ---- Indicator ---- */\n.step__indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 2rem;\n  block-size: 2rem;\n  border-radius: var(--ts-radius-full);\n  border: 2px solid var(--ts-color-border-default);\n  background-color: var(--ts-color-bg-elevated);\n  color: var(--ts-color-text-tertiary);\n  font-size: var(--ts-font-size-sm);\n  font-weight: var(--ts-font-weight-semi);\n  flex-shrink: 0;\n  transition:\n    background-color var(--ts-transition-fast),\n    border-color var(--ts-transition-fast),\n    color var(--ts-transition-fast);\n}\n\n.step__indicator--active {\n  border-color: var(--ts-stepper-active-color, var(--ts-color-interactive-primary));\n  background-color: var(--ts-stepper-active-color, var(--ts-color-interactive-primary));\n  color: var(--ts-color-text-on-primary, #fff);\n}\n\n.step__indicator--completed {\n  border-color: var(--ts-stepper-completed-color, var(--ts-color-success-600));\n  background-color: var(--ts-stepper-completed-color, var(--ts-color-success-600));\n  color: #ffffff;\n}\n\n.step__indicator--error {\n  border-color: var(--ts-color-danger-500);\n  background-color: var(--ts-color-danger-500);\n  color: #ffffff;\n}\n\n.step__icon {\n  inline-size: 1em;\n  block-size: 1em;\n}\n\n/* ---- Text ---- */\n.step__text {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ts-spacing-0, 2px);\n}\n\n.step__label {\n  font-size: var(--ts-font-size-sm);\n  font-weight: var(--ts-font-weight-semi);\n  color: var(--ts-color-text-primary);\n}\n\n:host(.ts-step--active) .step__label {\n  color: var(--ts-stepper-active-color, var(--ts-color-interactive-primary));\n}\n\n:host(.ts-step--disabled) .step__label {\n  color: var(--ts-color-text-tertiary);\n}\n\n.step__description {\n  font-size: var(--ts-font-size-xs);\n  color: var(--ts-color-text-tertiary);\n}\n\n/* ---- Connector ---- */\n.step__connector {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n}\n\n:host(.ts-step--horizontal) .step__connector {\n  padding-inline: var(--ts-spacing-2);\n  min-inline-size: var(--ts-spacing-4);\n  padding-block-start: var(--ts-spacing-4);\n}\n\n:host(.ts-step--vertical) .step__connector {\n  padding-block: var(--ts-spacing-2);\n  min-block-size: var(--ts-spacing-4);\n  margin-inline-start: calc(1rem - 1px);\n}\n\n.step__connector-line {\n  background-color: var(--ts-stepper-connector-color, var(--ts-color-border-default));\n  transition: background-color var(--ts-transition-fast);\n}\n\n:host(.ts-step--horizontal) .step__connector-line {\n  block-size: 2px;\n  inline-size: 100%;\n}\n\n:host(.ts-step--vertical) .step__connector-line {\n  inline-size: 2px;\n  block-size: 100%;\n  min-block-size: var(--ts-spacing-6);\n}\n\n.step__connector-line--completed {\n  background-color: var(--ts-stepper-completed-color, var(--ts-color-success-600));\n}\n\n/* ---- Content ---- */\n.step__content {\n  padding-block-start: var(--ts-spacing-2);\n}\n\n.step__content:empty {\n  display: none;\n}\n\n/* ---- Disabled ---- */\n:host(.ts-step--disabled) {\n  opacity: 0.5;\n}\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n/**\n * @slot - Default slot for step content.\n *\n * @part step - The step wrapper.\n * @part indicator - The step number/icon circle.\n * @part label - The step label.\n * @part description - The step description.\n * @part connector - The connector line between steps.\n * @part content - The step content area.\n */\n@Component({\n  tag: 'ts-step',\n  styleUrl: 'step.css',\n  shadow: true,\n})\nexport class TsStep {\n  @Element() hostEl!: HTMLElement;\n\n  /** The step label text. */\n  @Prop() label?: string;\n\n  /** Optional description text below the label. */\n  @Prop() description?: string;\n\n  /** Whether this step is completed. */\n  @Prop({ reflect: true }) completed = false;\n\n  /** Whether this step has an error. */\n  @Prop({ reflect: true }) error = false;\n\n  /** Whether this step is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Optional custom icon name. */\n  @Prop() icon?: string;\n\n  private get index(): number {\n    return parseInt(this.hostEl.getAttribute('data-index') || '0', 10);\n  }\n\n  private get isActive(): boolean {\n    return this.hostEl.hasAttribute('data-active');\n  }\n\n  private get hasConnector(): boolean {\n    return this.hostEl.hasAttribute('data-has-connector');\n  }\n\n  private get orientation(): string {\n    return this.hostEl.getAttribute('data-orientation') || 'horizontal';\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderIndicatorContent() {\n    if (this.completed) {\n      return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"step__icon\">\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      );\n    }\n    if (this.error) {\n      return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"step__icon\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n        </svg>\n      );\n    }\n    if (this.icon) {\n      return <ts-icon name={this.icon} size=\"sm\" />;\n    }\n    return <span>{this.index + 1}</span>;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-step': true,\n          'ts-step--active': this.isActive,\n          'ts-step--completed': this.completed,\n          'ts-step--error': this.error,\n          'ts-step--disabled': this.disabled,\n          [`ts-step--${this.orientation}`]: true,\n        }}\n        role=\"listitem\"\n        aria-current={this.isActive ? 'step' : undefined}\n        aria-disabled={this.disabled ? 'true' : undefined}\n      >\n        <div class=\"step__wrapper\" part=\"step\">\n          <div class=\"step__header\">\n            <div\n              class={{\n                'step__indicator': true,\n                'step__indicator--active': this.isActive,\n                'step__indicator--completed': this.completed,\n                'step__indicator--error': this.error,\n              }}\n              part=\"indicator\"\n            >\n              {this.renderIndicatorContent()}\n            </div>\n\n            <div class=\"step__text\">\n              {this.label && (\n                <span class=\"step__label\" part=\"label\">\n                  {this.label}\n                </span>\n              )}\n              {this.description && (\n                <span class=\"step__description\" part=\"description\">\n                  {this.description}\n                </span>\n              )}\n            </div>\n          </div>\n\n          {this.hasConnector && (\n            <div class=\"step__connector\" part=\"connector\">\n              <div\n                class={{\n                  'step__connector-line': true,\n                  'step__connector-line--completed': this.completed,\n                }}\n              />\n            </div>\n          )}\n\n          <div class=\"step__content\" part=\"content\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,67 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const stepperCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-stepper-active-color:var(--ts-color-interactive-primary);--ts-stepper-completed-color:var(--ts-color-success-600);--ts-stepper-connector-color:var(--ts-color-border-default)}.stepper__container{display:flex}:host([orientation="horizontal"]) .stepper__container{flex-direction:row;align-items:flex-start}:host([orientation="vertical"]) .stepper__container{flex-direction:column}`;
+
+const TsStepper = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get hostEl() { return index.getElement(this); }
+    /** The index of the currently active step (0-based). */
+    activeStep = 0;
+    /** The layout orientation. */
+    orientation = 'horizontal';
+    /** If true, steps must be completed in order. */
+    linear = false;
+    handleActiveStepChange() {
+        this.updateStepStates();
+    }
+    componentDidLoad() {
+        this.updateStepStates();
+    }
+    updateStepStates() {
+        const steps = Array.from(this.hostEl.querySelectorAll('ts-step'));
+        steps.forEach((step, index) => {
+            step.setAttribute('data-index', String(index));
+            step.setAttribute('data-orientation', this.orientation);
+            if (index === this.activeStep) {
+                step.setAttribute('data-active', '');
+            }
+            else {
+                step.removeAttribute('data-active');
+            }
+            if (this.linear && index > this.activeStep) {
+                step.setAttribute('disabled', '');
+            }
+            else if (this.linear) {
+                step.removeAttribute('disabled');
+            }
+            if (index < steps.length - 1) {
+                step.setAttribute('data-has-connector', '');
+            }
+            else {
+                step.removeAttribute('data-has-connector');
+            }
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (index.h(index.Host, { key: '202c3f1869c3010f5c6f8b5ee52850bcbbce5891', class: {
+                'ts-stepper': true,
+                [`ts-stepper--${this.orientation}`]: true,
+            } }, index.h("div", { key: '32b8444cf38f04152a1e288241d703aa5e483379', class: "stepper__container", part: "container", role: "list" }, index.h("slot", { key: '399b699aa4133bb1bb6d93fdc56b45d9bffb234d' }))));
+    }
+    static get watchers() { return {
+        "activeStep": [{
+                "handleActiveStepChange": 0
+            }]
+    }; }
+};
+TsStepper.style = stepperCss();
+
+exports.ts_stepper = TsStepper;
+//# sourceMappingURL=ts-stepper.entry.cjs.js.map
+
+//# sourceMappingURL=ts-stepper.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ts-stepper.cjs.entry.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,ybAAyb,CAAC;;MCYvc,SAAS,GAAA,MAAA;;;;;;IAIK,UAAU,GAAG,CAAC;;IAGd,WAAW,GAA8B,YAAY;;IAGtE,MAAM,GAAG,KAAK;IAGtB,sBAAsB,GAAA;QACpB,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,EAAE;;IAGjB,gBAAgB,GAAA;AACtB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QACjE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;YAC5B,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;YAC9C,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,WAAW,CAAC;AACvD,YAAA,IAAI,KAAK,KAAK,IAAI,CAAC,UAAU,EAAE;AAC7B,gBAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;;iBAC/B;AACL,gBAAA,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC;;YAErC,IAAI,IAAI,CAAC,MAAM,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;AAC1C,gBAAA,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;;AAC5B,iBAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACtB,gBAAA,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC;;YAElC,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AAC5B,gBAAA,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,EAAE,CAAC;;iBACtC;AACL,gBAAA,IAAI,CAAC,eAAe,CAAC,oBAAoB,CAAC;;AAE9C,SAAC,CAAC;;;IAIJ,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,WAAW,CAAA,CAAE,GAAG,IAAI;AAC1C,aAAA,EAAA,EAEDD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC1DA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;;;;;;","names":["h","Host"],"sources":["src/components/stepper/stepper.css?tag=ts-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-stepper — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-stepper-active-color     Active step indicator color\n     --ts-stepper-completed-color  Completed step indicator color\n     --ts-stepper-connector-color  Connector line color\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-stepper-active-color: var(--ts-color-interactive-primary);\n  --ts-stepper-completed-color: var(--ts-color-success-600);\n  --ts-stepper-connector-color: var(--ts-color-border-default);\n}\n\n.stepper__container {\n  display: flex;\n}\n\n/* ---- Horizontal ---- */\n:host([orientation=\"horizontal\"]) .stepper__container {\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n/* ---- Vertical ---- */\n:host([orientation=\"vertical\"]) .stepper__container {\n  flex-direction: column;\n}\n","import { Component, Prop, h, Host, Element, Watch } from '@stencil/core';\n\n/**\n * @slot - Default slot for ts-step children.\n *\n * @part container - The stepper container.\n */\n@Component({\n  tag: 'ts-stepper',\n  styleUrl: 'stepper.css',\n  shadow: true,\n})\nexport class TsStepper {\n  @Element() hostEl!: HTMLElement;\n\n  /** The index of the currently active step (0-based). */\n  @Prop({ reflect: true }) activeStep = 0;\n\n  /** The layout orientation. */\n  @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** If true, steps must be completed in order. */\n  @Prop() linear = false;\n\n  @Watch('activeStep')\n  handleActiveStepChange(): void {\n    this.updateStepStates();\n  }\n\n  componentDidLoad(): void {\n    this.updateStepStates();\n  }\n\n  private updateStepStates(): void {\n    const steps = Array.from(this.hostEl.querySelectorAll('ts-step'));\n    steps.forEach((step, index) => {\n      step.setAttribute('data-index', String(index));\n      step.setAttribute('data-orientation', this.orientation);\n      if (index === this.activeStep) {\n        step.setAttribute('data-active', '');\n      } else {\n        step.removeAttribute('data-active');\n      }\n      if (this.linear && index > this.activeStep) {\n        step.setAttribute('disabled', '');\n      } else if (this.linear) {\n        step.removeAttribute('disabled');\n      }\n      if (index < steps.length - 1) {\n        step.setAttribute('data-has-connector', '');\n      } else {\n        step.removeAttribute('data-has-connector');\n      }\n    });\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-stepper': true,\n          [`ts-stepper--${this.orientation}`]: true,\n        }}\n      >\n        <div class=\"stepper__container\" part=\"container\" role=\"list\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,109 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.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) {
+        index.registerInstance(this, hostRef);
+        this.tsChange = index.createEvent(this, "tsChange");
+    }
+    get hostEl() { return index.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 (index.h(index.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" }, index.h("div", { key: '82e39f308c359e8d60cc8349de380fcb08f6b252', class: "switch-group__base", part: "base" }, index.h("slot", { key: '81748d90d92184c0fa3b9c6cf55f32dff3267b46', onSlotchange: this.handleSlotChange }))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+TsSwitchGroup.style = switchGroupCss();
+
+exports.ts_switch_group = TsSwitchGroup;
+//# sourceMappingURL=ts-switch-group.entry.cjs.js.map
+
+//# sourceMappingURL=ts-switch-group.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ts-switch-group.cjs.entry.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,kvBAAkvB,CAAC;;MCcpwB,aAAa,GAAA,MAAA;;;;;;;AAIgB,IAAA,KAAK;;IAGpB,IAAI,GAAW,IAAI;;IAGnB,QAAQ,GAAG,KAAK;;IAGhB,SAAS,GAAG,KAAK;;AAGR,IAAA,QAAQ;IAG1C,aAAa,GAAA;QACX,IAAI,CAAC,WAAW,EAAE;;AAIpB,IAAA,kBAAkB,CAAC,KAAqC,EAAA;QACtD,KAAK,CAAC,eAAe,EAAE;QACvB,IAAI,IAAI,CAAC,QAAQ;YAAE;QACnB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;AAIvC,IAAA,aAAa,CAAC,KAAoB,EAAA;QAChC,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE;AACjC,QAAA,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;AACvD,QAAA,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC;YAAE;AAEjC,QAAA,MAAM,YAAY,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;AAE1E,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,YAAY;AACjB,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;gBACtB;oBACE,MAAM,SAAS,GAAG,CAAC,YAAY,GAAG,CAAC,IAAI,cAAc,CAAC,MAAM;oBAC5D,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;;gBAEpD;AACF,YAAA,KAAK,WAAW;AAChB,YAAA,KAAK,SAAS;gBACZ,KAAK,CAAC,cAAc,EAAE;gBACtB;AACE,oBAAA,MAAM,SAAS,GAAG,CAAC,YAAY,GAAG,CAAC,GAAG,cAAc,CAAC,MAAM,IAAI,cAAc,CAAC,MAAM;oBACpF,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC;;gBAEpD;AACF,YAAA,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;gBAC1C;AACF,YAAA,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;gBAClE;;;IAIN,gBAAgB,GAAA;QACd,IAAI,CAAC,WAAW,EAAE;;IAGZ,UAAU,GAAA;AAChB,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAgC;;AAG5F,IAAA,YAAY,CAAC,KAAa,EAAA;AAChC,QAAA,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE;AACxB,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;YAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC;;QAE/B,IAAI,CAAC,WAAW,EAAE;;IAGZ,WAAW,GAAA;AACjB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE;AACjC,QAAA,OAAO,CAAC,OAAO,CAAC,MAAM,IAAG;YACtB,MAAyC,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;AACjF,SAAC,CAAC;;IAGI,gBAAgB,GAAG,MAAW;QACpC,IAAI,CAAC,WAAW,EAAE;AACpB,KAAC;;IAGD,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;gBACvC,2BAA2B,EAAE,IAAI,CAAC,QAAQ;gBAC1C,6BAA6B,EAAE,IAAI,CAAC,SAAS;AAC9C,aAAA,EACD,IAAI,EAAC,YAAY,EAAA,EAEjBD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,MAAM,EAAA,EACzCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,CAAI,CACzC,CACD;;;;;;;;;;;;","names":["h","Host"],"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"],"version":3}

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

@@ -0,0 +1,42 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.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) {
+        index.registerInstance(this, hostRef);
+        this.tsOptionSelect = index.createEvent(this, "tsOptionSelect");
+    }
+    get hostEl() { return index.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 (index.h(index.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 }, index.h("div", { key: '8633d6def560f44c4f6c8dae01b42d187f590149', class: "switch-option__base", part: "base" }, this.icon && (index.h("span", { key: '0c1ceca3c3f57e0dbf6841bad79136d93818d342', class: "switch-option__icon", part: "icon", "aria-hidden": "true" }, index.h("ts-icon", { key: '141990f023740c72e9aa7ccc40f9479ad7986cca', name: this.icon, size: "sm" }))), index.h("span", { key: 'a11e04f99cda8742f27251c58c5e65402c52597b', class: "switch-option__label" }, index.h("slot", { key: '3d0a210f02eccfa6c5f68ab7f5cb6f41dc5413a9' })))));
+    }
+};
+TsSwitchOption.style = switchOptionCss();
+
+exports.ts_switch_option = TsSwitchOption;
+//# sourceMappingURL=ts-switch-option.entry.cjs.js.map
+
+//# sourceMappingURL=ts-switch-option.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ts-switch-option.cjs.entry.js","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,QACEA,OAAA,CAACC,UAAI,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,EAEzBD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,EAAA,EACzC,IAAI,CAAC,IAAI,KACRA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAA,EAC9DA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,CACjC,CACR,EACDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,sBAAsB,EAAA,EAChCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,CACH,CACD;;;;;;;","names":["h","Host"],"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"],"version":3}

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

@@ -0,0 +1,30 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const tabPanelCss = () => `:host{display:block}.tab-panel{outline:none}`;
+
+const TsTabPanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get hostEl() { return index.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 (index.h(index.Host, { key: 'dec8c9d7d1f32e6f5aef0d4bfbde8d62dd91d865' }, index.h("div", { key: '14de5c9f6ff8c8d56733fc53088da96064e6bdc6', class: "tab-panel", part: "panel", role: "tabpanel" }, index.h("slot", { key: '9a715c140d76ef238952f5b399cb1443af399432' }))));
+    }
+};
+TsTabPanel.style = tabPanelCss();
+
+exports.ts_tab_panel = TsTabPanel;
+//# sourceMappingURL=ts-tab-panel.entry.cjs.js.map
+
+//# sourceMappingURL=ts-tab-panel.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ts-tab-panel.cjs.entry.js","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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU,EAAA,EACjDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;","names":["h","Host"],"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"],"version":3}

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

@@ -0,0 +1,39 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.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) {
+        index.registerInstance(this, hostRef);
+    }
+    get hostEl() { return index.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 (index.h(index.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,
+            } }, index.h("div", { key: 'e98054b22f0f106888cbb3751d77abf5fd55a8ee', class: "table__wrapper", role: "region", tabindex: 0 }, index.h("slot", { key: 'cd5b905f8142ce381442abef895daa39ef14431e' }))));
+    }
+};
+TsTable.style = tableCss();
+
+exports.ts_table = TsTable;
+//# sourceMappingURL=ts-table.entry.cjs.js.map
+
+//# sourceMappingURL=ts-table.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ts-table.cjs.entry.js","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,QACEA,OAAA,CAACC,UAAI,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,EAEDD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,EAAA,EACnDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;","names":["h","Host"],"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"],"version":3}