@tessera-ui/core 0.4.0

package/dist/collection/components/stepper/stepper.js

@@ -0,0 +1,137 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for ts-step children.
+ *
+ * @part container - The stepper container.
+ */
+export class TsStepper {
+    hostEl;
+    /** 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 (h(Host, { key: '202c3f1869c3010f5c6f8b5ee52850bcbbce5891', class: {
+                'ts-stepper': true,
+                [`ts-stepper--${this.orientation}`]: true,
+            } }, h("div", { key: '32b8444cf38f04152a1e288241d703aa5e483379', class: "stepper__container", part: "container", role: "list" }, h("slot", { key: '399b699aa4133bb1bb6d93fdc56b45d9bffb234d' }))));
+    }
+    static get is() { return "ts-stepper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["stepper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "activeStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The index of the currently active step (0-based)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active-step",
+                "defaultValue": "0"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The layout orientation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "linear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, steps must be completed in order."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "linear",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "activeStep",
+                "methodName": "handleActiveStepChange"
+            }];
+    }
+}
+//# sourceMappingURL=stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE;;;;GAIG;AAMH,MAAM,OAAO,SAAS;IACT,MAAM,CAAe;IAEhC,wDAAwD;IAC/B,UAAU,GAAG,CAAC,CAAC;IAExC,8BAA8B;IACL,WAAW,GAA8B,YAAY,CAAC;IAE/E,iDAAiD;IACzC,MAAM,GAAG,KAAK,CAAC;IAGvB,sBAAsB;QACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,gBAAgB;QACtB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC;QAClE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC5B,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;YAC/C,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACxD,IAAI,KAAK,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;gBAC9B,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YACvC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACtC,CAAC;YACD,IAAI,IAAI,CAAC,MAAM,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;gBAC3C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YACpC,CAAC;iBAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBACvB,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YACnC,CAAC;YACD,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC7B,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;YAC9C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,oBAAoB,CAAC,CAAC;YAC7C,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;aAC1C;YAED,4DAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;gBAC1D,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -0,0 +1,130 @@
+// Hand-written stories for ts-stepper
+export default {
+    title: 'Components/Stepper',
+    tags: ['autodocs'],
+    argTypes: {
+        activeStep: {
+            control: { type: 'number', min: 0, max: 3 },
+            description: 'The index of the currently active step (0-based).',
+        },
+        orientation: {
+            control: 'select',
+            options: ['horizontal', 'vertical'],
+            description: 'The layout orientation.',
+        },
+        linear: {
+            control: 'boolean',
+            description: 'If true, steps must be completed in order.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.activeStep !== undefined)
+        attrs.push(`active-step="${args.activeStep}"`);
+    if (args.orientation !== undefined)
+        attrs.push(`orientation="${args.orientation}"`);
+    if (args.linear)
+        attrs.push('linear');
+    return `
+    <ts-stepper ${attrs.join(' ')}>
+      <ts-step label="Account" description="Create your account"></ts-step>
+      <ts-step label="Profile" description="Set up your profile"></ts-step>
+      <ts-step label="Confirmation" description="Review and confirm"></ts-step>
+    </ts-stepper>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        activeStep: 1,
+        orientation: 'horizontal',
+        linear: false,
+    },
+});
+export const Variants = () => `
+  <div style="display: flex; flex-direction: column; gap: 32px;">
+    <div>
+      <p style="margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;">Horizontal</p>
+      <ts-stepper active-step="1" orientation="horizontal">
+        <ts-step label="Account" description="Create your account" completed></ts-step>
+        <ts-step label="Profile" description="Set up your profile"></ts-step>
+        <ts-step label="Confirmation" description="Review and confirm"></ts-step>
+      </ts-stepper>
+    </div>
+    <div>
+      <p style="margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;">Vertical</p>
+      <ts-stepper active-step="1" orientation="vertical">
+        <ts-step label="Account" description="Create your account" completed></ts-step>
+        <ts-step label="Profile" description="Set up your profile"></ts-step>
+        <ts-step label="Confirmation" description="Review and confirm"></ts-step>
+      </ts-stepper>
+    </div>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; flex-direction: column; gap: 32px;">
+    <div>
+      <p style="margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;">Step 1 active (no completed steps)</p>
+      <ts-stepper active-step="0">
+        <ts-step label="Account" description="Create your account"></ts-step>
+        <ts-step label="Profile" description="Set up your profile"></ts-step>
+        <ts-step label="Confirmation" description="Review and confirm"></ts-step>
+      </ts-stepper>
+    </div>
+    <div>
+      <p style="margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;">Step 2 active (first completed)</p>
+      <ts-stepper active-step="1">
+        <ts-step label="Account" description="Create your account" completed></ts-step>
+        <ts-step label="Profile" description="Set up your profile"></ts-step>
+        <ts-step label="Confirmation" description="Review and confirm"></ts-step>
+      </ts-stepper>
+    </div>
+    <div>
+      <p style="margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;">All completed</p>
+      <ts-stepper active-step="2">
+        <ts-step label="Account" completed></ts-step>
+        <ts-step label="Profile" completed></ts-step>
+        <ts-step label="Confirmation" completed></ts-step>
+      </ts-stepper>
+    </div>
+    <div>
+      <p style="margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;">With error</p>
+      <ts-stepper active-step="1">
+        <ts-step label="Account" completed></ts-step>
+        <ts-step label="Profile" error description="Validation failed"></ts-step>
+        <ts-step label="Confirmation"></ts-step>
+      </ts-stepper>
+    </div>
+    <div>
+      <p style="margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;">Linear (future steps disabled)</p>
+      <ts-stepper active-step="1" linear>
+        <ts-step label="Account" completed></ts-step>
+        <ts-step label="Profile" description="Currently editing"></ts-step>
+        <ts-step label="Confirmation" description="Locked until profile is complete"></ts-step>
+      </ts-stepper>
+    </div>
+  </div>
+`;
+export const Composition = () => `
+  <div style="max-width: 700px; font-family: sans-serif;">
+    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px;">
+      <ts-stepper active-step="1">
+        <ts-step label="Account" description="Create your account" completed></ts-step>
+        <ts-step label="Profile" description="Set up your profile"></ts-step>
+        <ts-step label="Confirmation" description="Review and confirm"></ts-step>
+      </ts-stepper>
+      <ts-divider style="margin: 24px 0;"></ts-divider>
+      <h3 style="margin: 0 0 16px;">Set Up Your Profile</h3>
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <ts-input label="Full Name" placeholder="John Doe"></ts-input>
+        <ts-input label="Company" placeholder="Acme Inc."></ts-input>
+        <ts-textarea label="Bio" placeholder="Tell us about yourself..."></ts-textarea>
+      </div>
+      <div style="margin-top: 24px; display: flex; gap: 8px; justify-content: flex-end;">
+        <ts-button appearance="outline">Back</ts-button>
+        <ts-button variant="primary">Continue</ts-button>
+      </div>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=stepper.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.stories.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.stories.ts"],"names":[],"mappings":"AAAA,sCAAsC;AAEtC,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE;YAC3C,WAAW,EAAE,mDAAmD;SACjE;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;YACnC,WAAW,EAAE,yBAAyB;SACvC;QACD,MAAM,EAAE;YACN,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,4CAA4C;SAC1D;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;IAClF,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IACpF,IAAI,IAAI,CAAC,MAAM;QAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,OAAO;kBACS,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;GAK9B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,YAAY;QACzB,MAAM,EAAE,KAAK;KACd;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;CAmBrC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;CAqBxC,CAAC","sourcesContent":["// Hand-written stories for ts-stepper\n\nexport default {\n  title: 'Components/Stepper',\n  tags: ['autodocs'],\n  argTypes: {\n    activeStep: {\n      control: { type: 'number', min: 0, max: 3 },\n      description: 'The index of the currently active step (0-based).',\n    },\n    orientation: {\n      control: 'select',\n      options: ['horizontal', 'vertical'],\n      description: 'The layout orientation.',\n    },\n    linear: {\n      control: 'boolean',\n      description: 'If true, steps must be completed in order.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.activeStep !== undefined) attrs.push(`active-step=\"${args.activeStep}\"`);\n  if (args.orientation !== undefined) attrs.push(`orientation=\"${args.orientation}\"`);\n  if (args.linear) attrs.push('linear');\n  return `\n    <ts-stepper ${attrs.join(' ')}>\n      <ts-step label=\"Account\" description=\"Create your account\"></ts-step>\n      <ts-step label=\"Profile\" description=\"Set up your profile\"></ts-step>\n      <ts-step label=\"Confirmation\" description=\"Review and confirm\"></ts-step>\n    </ts-stepper>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    activeStep: 1,\n    orientation: 'horizontal',\n    linear: false,\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <div>\n      <p style=\"margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;\">Horizontal</p>\n      <ts-stepper active-step=\"1\" orientation=\"horizontal\">\n        <ts-step label=\"Account\" description=\"Create your account\" completed></ts-step>\n        <ts-step label=\"Profile\" description=\"Set up your profile\"></ts-step>\n        <ts-step label=\"Confirmation\" description=\"Review and confirm\"></ts-step>\n      </ts-stepper>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;\">Vertical</p>\n      <ts-stepper active-step=\"1\" orientation=\"vertical\">\n        <ts-step label=\"Account\" description=\"Create your account\" completed></ts-step>\n        <ts-step label=\"Profile\" description=\"Set up your profile\"></ts-step>\n        <ts-step label=\"Confirmation\" description=\"Review and confirm\"></ts-step>\n      </ts-stepper>\n    </div>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <div>\n      <p style=\"margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;\">Step 1 active (no completed steps)</p>\n      <ts-stepper active-step=\"0\">\n        <ts-step label=\"Account\" description=\"Create your account\"></ts-step>\n        <ts-step label=\"Profile\" description=\"Set up your profile\"></ts-step>\n        <ts-step label=\"Confirmation\" description=\"Review and confirm\"></ts-step>\n      </ts-stepper>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;\">Step 2 active (first completed)</p>\n      <ts-stepper active-step=\"1\">\n        <ts-step label=\"Account\" description=\"Create your account\" completed></ts-step>\n        <ts-step label=\"Profile\" description=\"Set up your profile\"></ts-step>\n        <ts-step label=\"Confirmation\" description=\"Review and confirm\"></ts-step>\n      </ts-stepper>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;\">All completed</p>\n      <ts-stepper active-step=\"2\">\n        <ts-step label=\"Account\" completed></ts-step>\n        <ts-step label=\"Profile\" completed></ts-step>\n        <ts-step label=\"Confirmation\" completed></ts-step>\n      </ts-stepper>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;\">With error</p>\n      <ts-stepper active-step=\"1\">\n        <ts-step label=\"Account\" completed></ts-step>\n        <ts-step label=\"Profile\" error description=\"Validation failed\"></ts-step>\n        <ts-step label=\"Confirmation\"></ts-step>\n      </ts-stepper>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;\">Linear (future steps disabled)</p>\n      <ts-stepper active-step=\"1\" linear>\n        <ts-step label=\"Account\" completed></ts-step>\n        <ts-step label=\"Profile\" description=\"Currently editing\"></ts-step>\n        <ts-step label=\"Confirmation\" description=\"Locked until profile is complete\"></ts-step>\n      </ts-stepper>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"max-width: 700px; font-family: sans-serif;\">\n    <div style=\"border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px;\">\n      <ts-stepper active-step=\"1\">\n        <ts-step label=\"Account\" description=\"Create your account\" completed></ts-step>\n        <ts-step label=\"Profile\" description=\"Set up your profile\"></ts-step>\n        <ts-step label=\"Confirmation\" description=\"Review and confirm\"></ts-step>\n      </ts-stepper>\n      <ts-divider style=\"margin: 24px 0;\"></ts-divider>\n      <h3 style=\"margin: 0 0 16px;\">Set Up Your Profile</h3>\n      <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n        <ts-input label=\"Full Name\" placeholder=\"John Doe\"></ts-input>\n        <ts-input label=\"Company\" placeholder=\"Acme Inc.\"></ts-input>\n        <ts-textarea label=\"Bio\" placeholder=\"Tell us about yourself...\"></ts-textarea>\n      </div>\n      <div style=\"margin-top: 24px; display: flex; gap: 8px; justify-content: flex-end;\">\n        <ts-button appearance=\"outline\">Back</ts-button>\n        <ts-button variant=\"primary\">Continue</ts-button>\n      </div>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/switch-group/switch-group.css

@@ -0,0 +1,51 @@
+/* ==========================================================================
+   ts-switch-group — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-switch-group-bg          Background color
+     --ts-switch-group-active-bg   Active segment background
+     --ts-switch-group-radius      Border radius
+   ========================================================================== */
+
+: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%;
+}
+
+/* ---- Sizes ---- */
+: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);
+}
+
+/* ---- Disabled ---- */
+:host([disabled]) {
+  opacity: 0.5;
+  pointer-events: none;
+}

package/dist/collection/components/switch-group/switch-group.js

@@ -0,0 +1,237 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for ts-switch-option children.
+ *
+ * @part base - The switch group container.
+ */
+export class TsSwitchGroup {
+    hostEl;
+    /** 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 is() { return "ts-switch-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["switch-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["switch-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The currently active segment value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "TsSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsSize",
+                            "referenceLocation": "TsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the switch group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the entire group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stretch to fill the container width."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsChange",
+                "name": "tsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the active value changes."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "tsOptionSelect",
+                "method": "handleOptionSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=switch-group.js.map

package/dist/collection/components/switch-group/switch-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-group.js","sourceRoot":"","sources":["../../../src/components/switch-group/switch-group.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}