@tessera-ui/core 0.4.0

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

@@ -0,0 +1,121 @@
+// Hand-written stories for ts-stack
+export default {
+    title: 'Layout/Stack',
+    tags: ['autodocs'],
+    argTypes: {
+        gap: {
+            control: 'select',
+            options: ['0', '1', '2', '3', '4', '5', '6', '8', '10', '12', '16'],
+            description: 'Spacing token number controlling the gap between items.',
+        },
+        align: {
+            control: 'select',
+            options: ['start', 'center', 'end', 'stretch'],
+            description: 'Cross-axis alignment of items.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.gap !== undefined)
+        attrs.push(`gap="${args.gap}"`);
+    if (args.align !== undefined)
+        attrs.push(`align="${args.align}"`);
+    return `
+    <ts-stack ${attrs.join(' ')} style="max-width: 320px;">
+      <input type="text" placeholder="First name" style="padding: 8px; border: 1px solid #ccc; border-radius: 4px;" />
+      <input type="text" placeholder="Last name" style="padding: 8px; border: 1px solid #ccc; border-radius: 4px;" />
+      <input type="email" placeholder="Email" style="padding: 8px; border: 1px solid #ccc; border-radius: 4px;" />
+      <ts-button variant="primary" block>Submit</ts-button>
+    </ts-stack>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        gap: '3',
+        align: 'stretch',
+    },
+});
+export const Sizes = () => `
+  <div style="display: flex; gap: 48px; font-family: sans-serif;">
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">gap="1"</p>
+      <ts-stack gap="1" style="max-width: 200px;">
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Item</div>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Item</div>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Item</div>
+      </ts-stack>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">gap="3"</p>
+      <ts-stack gap="3" style="max-width: 200px;">
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Item</div>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Item</div>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Item</div>
+      </ts-stack>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">gap="6"</p>
+      <ts-stack gap="6" style="max-width: 200px;">
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Item</div>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Item</div>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Item</div>
+      </ts-stack>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">gap="10"</p>
+      <ts-stack gap="10" style="max-width: 200px;">
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Item</div>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Item</div>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Item</div>
+      </ts-stack>
+    </div>
+  </div>
+`;
+export const Alignment = () => `
+  <div style="display: flex; gap: 48px; font-family: sans-serif;">
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">align="start"</p>
+      <ts-stack align="start" gap="2" style="width: 200px; border: 1px dashed #cbd5e1; padding: 8px;">
+        <div style="padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;">Short</div>
+        <div style="padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;">Medium text</div>
+        <div style="padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;">Long text here</div>
+      </ts-stack>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">align="center"</p>
+      <ts-stack align="center" gap="2" style="width: 200px; border: 1px dashed #cbd5e1; padding: 8px;">
+        <div style="padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;">Short</div>
+        <div style="padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;">Medium text</div>
+        <div style="padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;">Long text here</div>
+      </ts-stack>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">align="end"</p>
+      <ts-stack align="end" gap="2" style="width: 200px; border: 1px dashed #cbd5e1; padding: 8px;">
+        <div style="padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;">Short</div>
+        <div style="padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;">Medium text</div>
+        <div style="padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;">Long text here</div>
+      </ts-stack>
+    </div>
+  </div>
+`;
+export const Composition = () => `
+  <div style="max-width: 400px; font-family: sans-serif;">
+    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px;">
+      <h3 style="margin: 0 0 4px;">Create Account</h3>
+      <p style="margin: 0 0 16px; color: #64748b; font-size: 14px;">Fill in the details below</p>
+      <ts-stack gap="3">
+        <input type="text" placeholder="Full Name" style="padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;" />
+        <input type="email" placeholder="Email" style="padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;" />
+        <input type="password" placeholder="Password" style="padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;" />
+        <input type="password" placeholder="Confirm Password" style="padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;" />
+        <ts-row justify="end" gap="2">
+          <ts-button variant="neutral" appearance="outline">Cancel</ts-button>
+          <ts-button variant="primary">Create Account</ts-button>
+        </ts-row>
+      </ts-stack>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=stack.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stack.stories.js","sourceRoot":"","sources":["../../../src/components/stack/stack.stories.ts"],"names":[],"mappings":"AAAA,oCAAoC;AAEpC,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YACnE,WAAW,EAAE,yDAAyD;SACvE;QACD,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,CAAC;YAC9C,WAAW,EAAE,gCAAgC;SAC9C;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC;IAC5D,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAClE,OAAO;gBACO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;GAM5B,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,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,SAAS;KACjB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmClC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BtC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;CAiBxC,CAAC","sourcesContent":["// Hand-written stories for ts-stack\n\nexport default {\n  title: 'Layout/Stack',\n  tags: ['autodocs'],\n  argTypes: {\n    gap: {\n      control: 'select',\n      options: ['0', '1', '2', '3', '4', '5', '6', '8', '10', '12', '16'],\n      description: 'Spacing token number controlling the gap between items.',\n    },\n    align: {\n      control: 'select',\n      options: ['start', 'center', 'end', 'stretch'],\n      description: 'Cross-axis alignment of items.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.gap !== undefined) attrs.push(`gap=\"${args.gap}\"`);\n  if (args.align !== undefined) attrs.push(`align=\"${args.align}\"`);\n  return `\n    <ts-stack ${attrs.join(' ')} style=\"max-width: 320px;\">\n      <input type=\"text\" placeholder=\"First name\" style=\"padding: 8px; border: 1px solid #ccc; border-radius: 4px;\" />\n      <input type=\"text\" placeholder=\"Last name\" style=\"padding: 8px; border: 1px solid #ccc; border-radius: 4px;\" />\n      <input type=\"email\" placeholder=\"Email\" style=\"padding: 8px; border: 1px solid #ccc; border-radius: 4px;\" />\n      <ts-button variant=\"primary\" block>Submit</ts-button>\n    </ts-stack>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    gap: '3',\n    align: 'stretch',\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; gap: 48px; font-family: sans-serif;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">gap=\"1\"</p>\n      <ts-stack gap=\"1\" style=\"max-width: 200px;\">\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Item</div>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Item</div>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Item</div>\n      </ts-stack>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">gap=\"3\"</p>\n      <ts-stack gap=\"3\" style=\"max-width: 200px;\">\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Item</div>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Item</div>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Item</div>\n      </ts-stack>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">gap=\"6\"</p>\n      <ts-stack gap=\"6\" style=\"max-width: 200px;\">\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Item</div>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Item</div>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Item</div>\n      </ts-stack>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">gap=\"10\"</p>\n      <ts-stack gap=\"10\" style=\"max-width: 200px;\">\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Item</div>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Item</div>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Item</div>\n      </ts-stack>\n    </div>\n  </div>\n`;\n\nexport const Alignment = (): string => `\n  <div style=\"display: flex; gap: 48px; font-family: sans-serif;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">align=\"start\"</p>\n      <ts-stack align=\"start\" gap=\"2\" style=\"width: 200px; border: 1px dashed #cbd5e1; padding: 8px;\">\n        <div style=\"padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;\">Short</div>\n        <div style=\"padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;\">Medium text</div>\n        <div style=\"padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;\">Long text here</div>\n      </ts-stack>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">align=\"center\"</p>\n      <ts-stack align=\"center\" gap=\"2\" style=\"width: 200px; border: 1px dashed #cbd5e1; padding: 8px;\">\n        <div style=\"padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;\">Short</div>\n        <div style=\"padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;\">Medium text</div>\n        <div style=\"padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;\">Long text here</div>\n      </ts-stack>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">align=\"end\"</p>\n      <ts-stack align=\"end\" gap=\"2\" style=\"width: 200px; border: 1px dashed #cbd5e1; padding: 8px;\">\n        <div style=\"padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;\">Short</div>\n        <div style=\"padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;\">Medium text</div>\n        <div style=\"padding: 8px; background: #dbeafe; border-radius: 4px; width: fit-content;\">Long text here</div>\n      </ts-stack>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"max-width: 400px; font-family: sans-serif;\">\n    <div style=\"border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px;\">\n      <h3 style=\"margin: 0 0 4px;\">Create Account</h3>\n      <p style=\"margin: 0 0 16px; color: #64748b; font-size: 14px;\">Fill in the details below</p>\n      <ts-stack gap=\"3\">\n        <input type=\"text\" placeholder=\"Full Name\" style=\"padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;\" />\n        <input type=\"email\" placeholder=\"Email\" style=\"padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;\" />\n        <input type=\"password\" placeholder=\"Password\" style=\"padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;\" />\n        <input type=\"password\" placeholder=\"Confirm Password\" style=\"padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;\" />\n        <ts-row justify=\"end\" gap=\"2\">\n          <ts-button variant=\"neutral\" appearance=\"outline\">Cancel</ts-button>\n          <ts-button variant=\"primary\">Create Account</ts-button>\n        </ts-row>\n      </ts-stack>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/stepper/step.css

@@ -0,0 +1,172 @@
+/* ==========================================================================
+   ts-step — Shadow DOM Scoped Styles
+   ========================================================================== */
+
+:host {
+  display: flex;
+  font-family: var(--ts-font-family-base);
+}
+
+/* ---- Horizontal layout ---- */
+:host(.ts-step--horizontal) {
+  flex: 1;
+  flex-direction: column;
+}
+
+/* ---- Vertical layout ---- */
+: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;
+}
+
+/* ---- Indicator ---- */
+.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;
+}
+
+/* ---- Text ---- */
+.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);
+}
+
+/* ---- Connector ---- */
+.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));
+}
+
+/* ---- Content ---- */
+.step__content {
+  padding-block-start: var(--ts-spacing-2);
+}
+
+.step__content:empty {
+  display: none;
+}
+
+/* ---- Disabled ---- */
+:host(.ts-step--disabled) {
+  opacity: 0.5;
+}

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

@@ -0,0 +1,205 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for step content.
+ *
+ * @part step - The step wrapper.
+ * @part indicator - The step number/icon circle.
+ * @part label - The step label.
+ * @part description - The step description.
+ * @part connector - The connector line between steps.
+ * @part content - The step content area.
+ */
+export class TsStep {
+    hostEl;
+    /** 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 (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", class: "step__icon" }, h("polyline", { points: "20 6 9 17 4 12" })));
+        }
+        if (this.error) {
+            return (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", class: "step__icon" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })));
+        }
+        if (this.icon) {
+            return h("ts-icon", { name: this.icon, size: "sm" });
+        }
+        return h("span", null, this.index + 1);
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(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 }, h("div", { key: 'b01e2dc30f9b3c4c5422fc9f58055b4e29e660c0', class: "step__wrapper", part: "step" }, h("div", { key: 'e8dc194bffaf1ad7dc73d0d7c3890059e39d23bc', class: "step__header" }, 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()), h("div", { key: 'c634d466d5d1f6bab4a0f2a9dbe450d4b60a0c8b', class: "step__text" }, this.label && (h("span", { key: '96dc52bcb324e4e2c96f5c09be2cebb0a4b0fdaf', class: "step__label", part: "label" }, this.label)), this.description && (h("span", { key: '863aac22befd3bb4f92c87ee7b5c24ab8d9c789a', class: "step__description", part: "description" }, this.description)))), this.hasConnector && (h("div", { key: '45ac15eac777bf1c38e0ffc3da8b667a55a584f7', class: "step__connector", part: "connector" }, h("div", { key: '15375de53bfae186638eaa9af95574d7875868b8', class: {
+                'step__connector-line': true,
+                'step__connector-line--completed': this.completed,
+            } }))), h("div", { key: 'd5efc013d5b97850a2768464868eade08b953784', class: "step__content", part: "content" }, h("slot", { key: '3b84a7d0ebe30fbce3cf5c16b7e515d33436d675' })))));
+    }
+    static get is() { return "ts-step"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["step.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["step.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The step label text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional description text below the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "completed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this step is completed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "completed",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this step has an error."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this step is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional custom icon name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+}
+//# sourceMappingURL=step.js.map

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

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

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

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

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

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

package/dist/collection/components/stepper/stepper.css

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   ts-stepper — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-stepper-active-color     Active step indicator color
+     --ts-stepper-completed-color  Completed step indicator color
+     --ts-stepper-connector-color  Connector line color
+   ========================================================================== */
+
+: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;
+}
+
+/* ---- Horizontal ---- */
+:host([orientation="horizontal"]) .stepper__container {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+/* ---- Vertical ---- */
+:host([orientation="vertical"]) .stepper__container {
+  flex-direction: column;
+}