@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-stepper-horizontal/diwa-stepper-horizontal-styles.js

@@ -0,0 +1,22 @@
+export const getComponentCss = () => `
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .stepper {
+    display: flex;
+    align-items: flex-start;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .stepper::-webkit-scrollbar {
+    display: none;
+  }
+`;
+//# sourceMappingURL=diwa-stepper-horizontal-styles.js.map

package/dist/collection/components/diwa-stepper-horizontal/diwa-stepper-horizontal-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-stepper-horizontal-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-stepper-horizontal/diwa-stepper-horizontal-styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;CAoB5C,CAAC","sourcesContent":["export const getComponentCss = (): string => `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .stepper {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    overflow-x: auto;\r\n    scrollbar-width: none;\r\n  }\r\n\r\n  .stepper::-webkit-scrollbar {\r\n    display: none;\r\n  }\r\n`;\r\n"]}

package/dist/collection/components/diwa-stepper-horizontal/diwa-stepper-horizontal.js

@@ -0,0 +1,140 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-stepper-horizontal-styles";
+/**
+ * @component diwa-stepper-horizontal
+ *
+ * Displays a horizontal sequence of steps, indicating progress through a
+ * multi-step workflow. Accepts `diwa-stepper-horizontal-item` children and
+ * manages their `state` (complete/current/incomplete) based on `activeStepIndex`.
+ *
+ * Usage:
+ *   <diwa-stepper-horizontal active-step-index={1}>
+ *     <diwa-stepper-horizontal-item>Account</diwa-stepper-horizontal-item>
+ *     <diwa-stepper-horizontal-item>Details</diwa-stepper-horizontal-item>
+ *     <diwa-stepper-horizontal-item>Review</diwa-stepper-horizontal-item>
+ *   </diwa-stepper-horizontal>
+ */
+export class DiwaStepperHorizontal {
+    constructor() {
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** Zero-based index of the current active step. */
+        this.activeStepIndex = 0;
+    }
+    handleIndexChange() {
+        this.syncItems();
+    }
+    componentDidLoad() {
+        this.syncItems();
+    }
+    componentDidUpdate() {
+        this.syncItems();
+    }
+    getItems() {
+        return Array.from(this.host.querySelectorAll('diwa-stepper-horizontal-item'));
+    }
+    syncItems() {
+        const items = this.getItems();
+        const total = items.length;
+        items.forEach((item, i) => {
+            if (i < this.activeStepIndex) {
+                item.state = 'complete';
+            }
+            else if (i === this.activeStepIndex) {
+                item.state = 'current';
+            }
+            else {
+                item.state = 'incomplete';
+            }
+            item.stepNumber = i + 1;
+            item.isLast = i === total - 1;
+        });
+    }
+    render() {
+        return (h(Host, { key: '1757e9375f388f949957317c856cc8607f941b04', "data-theme": this.theme }, h("style", { key: 'e5aa89e60aa678cd2d607aee67c4c8bc81058a0c', innerHTML: getComponentCss() }), h("div", { key: 'e5ca0a96129a84534d286781b80036ce9c3033db', class: "stepper", role: "list", "aria-label": "Progress" }, h("slot", { key: '157ae71fb67eeab4979cf7c0eb441e83e0c35cc6' }))));
+    }
+    static get is() { return "diwa-stepper-horizontal"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Per-component theme override."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            },
+            "activeStepIndex": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Zero-based index of the current active step."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active-step-index",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "update",
+                "name": "update",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the active step index changes (e.g. the consumer calls\r\nnext/prev). This component does not auto-advance \u2014 use this event\r\nto update `activeStepIndex` externally."
+                },
+                "complexType": {
+                    "original": "StepperHorizontalUpdateEventDetail",
+                    "resolved": "StepperHorizontalUpdateEventDetail",
+                    "references": {
+                        "StepperHorizontalUpdateEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-stepper-horizontal/types.ts::StepperHorizontalUpdateEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "activeStepIndex",
+                "methodName": "handleIndexChange"
+            }];
+    }
+}
+//# sourceMappingURL=diwa-stepper-horizontal.js.map

package/dist/collection/components/diwa-stepper-horizontal/diwa-stepper-horizontal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-stepper-horizontal.js","sourceRoot":"","sources":["../../../src/components/diwa-stepper-horizontal/diwa-stepper-horizontal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAqB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGnG,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAEnE;;;;;;;;;;;;;GAaG;AAKH,MAAM,OAAO,qBAAqB;IAJlC;QAOE,oCAAoC;QACX,UAAK,GAAU,MAAM,CAAC;QAE/C,mDAAmD;QAEnD,oBAAe,GAAW,CAAC,CAAC;KAuD7B;IA5CC,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAEO,QAAQ;QACd,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,CACjB,CAAC;IAC9C,CAAC;IAEO,SAAS;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;QAC3B,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACxB,IAAI,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;gBAC5B,IAAY,CAAC,KAAK,GAAG,UAAU,CAAC;YACnC,CAAC;iBAAM,IAAI,CAAC,KAAK,IAAI,CAAC,eAAe,EAAE,CAAC;gBACrC,IAAY,CAAC,KAAK,GAAG,SAAS,CAAC;YAClC,CAAC;iBAAM,CAAC;gBACL,IAAY,CAAC,KAAK,GAAG,YAAY,CAAC;YACrC,CAAC;YACA,IAAY,CAAC,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;YAChC,IAAY,CAAC,MAAM,GAAG,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK;YAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI;YACvC,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,gBAAY,UAAU;gBACpD,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, type EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\r\nimport type { StepperHorizontalUpdateEventDetail } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-stepper-horizontal-styles';\r\n\r\n/**\r\n * @component diwa-stepper-horizontal\r\n *\r\n * Displays a horizontal sequence of steps, indicating progress through a\r\n * multi-step workflow. Accepts `diwa-stepper-horizontal-item` children and\r\n * manages their `state` (complete/current/incomplete) based on `activeStepIndex`.\r\n *\r\n * Usage:\r\n *   <diwa-stepper-horizontal active-step-index={1}>\r\n *     <diwa-stepper-horizontal-item>Account</diwa-stepper-horizontal-item>\r\n *     <diwa-stepper-horizontal-item>Details</diwa-stepper-horizontal-item>\r\n *     <diwa-stepper-horizontal-item>Review</diwa-stepper-horizontal-item>\r\n *   </diwa-stepper-horizontal>\r\n */\r\n@Component({\r\n  tag: 'diwa-stepper-horizontal',\r\n  shadow: true,\r\n})\r\nexport class DiwaStepperHorizontal {\r\n  @Element() host!: HTMLDiwaStepperHorizontalElement;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Zero-based index of the current active step. */\r\n  @Prop({ mutable: true, attribute: 'active-step-index' })\r\n  activeStepIndex: number = 0;\r\n\r\n  /**\r\n   * Emitted when the active step index changes (e.g. the consumer calls\r\n   * next/prev). This component does not auto-advance — use this event\r\n   * to update `activeStepIndex` externally.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<StepperHorizontalUpdateEventDetail>;\r\n\r\n  @Watch('activeStepIndex')\r\n  handleIndexChange() {\r\n    this.syncItems();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.syncItems();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.syncItems();\r\n  }\r\n\r\n  private getItems(): HTMLDiwaStepperHorizontalItemElement[] {\r\n    return Array.from(\r\n      this.host.querySelectorAll('diwa-stepper-horizontal-item'),\r\n    ) as HTMLDiwaStepperHorizontalItemElement[];\r\n  }\r\n\r\n  private syncItems() {\r\n    const items = this.getItems();\r\n    const total = items.length;\r\n    items.forEach((item, i) => {\r\n      if (i < this.activeStepIndex) {\r\n        (item as any).state = 'complete';\r\n      } else if (i === this.activeStepIndex) {\r\n        (item as any).state = 'current';\r\n      } else {\r\n        (item as any).state = 'incomplete';\r\n      }\r\n      (item as any).stepNumber = i + 1;\r\n      (item as any).isLast = i === total - 1;\r\n    });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <div class=\"stepper\" role=\"list\" aria-label=\"Progress\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/diwa-stepper-horizontal/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/diwa-stepper-horizontal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-stepper-horizontal/types.ts"],"names":[],"mappings":"AAAA;;GAEG","sourcesContent":["/**\r\n * diwa-stepper-horizontal — Public TypeScript types\r\n */\r\n\r\nexport interface StepperHorizontalUpdateEventDetail {\r\n  activeStepIndex: number;\r\n}\r\n"]}

package/dist/collection/components/diwa-stepper-horizontal-item/diwa-stepper-horizontal-item-styles.js

@@ -0,0 +1,80 @@
+export const getComponentCss = (state, isLast) => {
+    const circleColor = state === 'complete'
+        ? 'var(--diwa-notification-success)'
+        : state === 'current'
+            ? 'var(--diwa-accent)'
+            : 'var(--diwa-border)';
+    const labelColor = state === 'incomplete' ? 'var(--diwa-text-muted)' : 'var(--diwa-text-primary)';
+    return `
+  :host {
+    display: flex;
+    align-items: flex-start;
+    flex: 1;
+    min-width: 0;
+    font-family: var(--diwa-font-family-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    gap: var(--diwa-space-2);
+    position: relative;
+  }
+
+  /* Connector line to the right */
+  .connector {
+    display: ${isLast ? 'none' : 'block'};
+    position: absolute;
+    top: calc(var(--diwa-stepper-step-size) / 2);
+    left: calc(50% + var(--diwa-stepper-step-size) / 2 + var(--diwa-border-width-base));
+    right: calc(-50% + var(--diwa-stepper-step-size) / 2 + var(--diwa-border-width-base));
+    height: var(--diwa-border-width-thin);
+    background: ${state === 'complete' ? 'var(--diwa-notification-success)' : 'var(--diwa-border)'};
+  }
+
+  .circle {
+    width: var(--diwa-stepper-step-size);
+    height: var(--diwa-stepper-step-size);
+    border-radius: 50%;
+    background: ${circleColor};
+    color: var(--diwa-text-on-accent, #fff);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .circle-inner {
+    color: inherit;
+    font-size: var(--diwa-font-size-xs, 12px);
+    font-weight: var(--diwa-font-weight-medium);
+    line-height: 1;
+  }
+
+  .label {
+    font-size: var(--diwa-font-size-sm);
+    font-weight: ${state === 'current' ? 'var(--diwa-font-weight-medium)' : 'var(--diwa-font-weight-normal, 400)'};
+    color: ${labelColor};
+    text-align: center;
+    line-height: 1.3;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  .sublabel {
+    font-size: var(--diwa-font-size-xs, 11px);
+    color: var(--diwa-text-muted);
+    text-align: center;
+  }
+  `;
+};
+//# sourceMappingURL=diwa-stepper-horizontal-item-styles.js.map

package/dist/collection/components/diwa-stepper-horizontal-item/diwa-stepper-horizontal-item-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-stepper-horizontal-item-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-stepper-horizontal-item/diwa-stepper-horizontal-item-styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAgB,EAAE,MAAe,EAAU,EAAE;IAC3E,MAAM,WAAW,GACf,KAAK,KAAK,UAAU;QAClB,CAAC,CAAC,kCAAkC;QACpC,CAAC,CAAC,KAAK,KAAK,SAAS;YACnB,CAAC,CAAC,oBAAoB;YACtB,CAAC,CAAC,oBAAoB,CAAC;IAE7B,MAAM,UAAU,GAAG,KAAK,KAAK,YAAY,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,0BAA0B,CAAC;IAElG,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;eAyBM,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;;;;;kBAMtB,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,oBAAoB;;;;;;;kBAOhF,WAAW;;;;;;;;;;;;;;;;;mBAiBV,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,qCAAqC;aACpG,UAAU;;;;;;;;;;;;;;GAcpB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { StepState } from './types';\r\n\r\nexport const getComponentCss = (state: StepState, isLast: boolean): string => {\r\n  const circleColor =\r\n    state === 'complete'\r\n      ? 'var(--diwa-notification-success)'\r\n      : state === 'current'\r\n        ? 'var(--diwa-accent)'\r\n        : 'var(--diwa-border)';\r\n\r\n  const labelColor = state === 'incomplete' ? 'var(--diwa-text-muted)' : 'var(--diwa-text-primary)';\r\n\r\n  return `\r\n  :host {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    flex: 1;\r\n    min-width: 0;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .item {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    flex: 1;\r\n    min-width: 0;\r\n    gap: var(--diwa-space-2);\r\n    position: relative;\r\n  }\r\n\r\n  /* Connector line to the right */\r\n  .connector {\r\n    display: ${isLast ? 'none' : 'block'};\r\n    position: absolute;\r\n    top: calc(var(--diwa-stepper-step-size) / 2);\r\n    left: calc(50% + var(--diwa-stepper-step-size) / 2 + var(--diwa-border-width-base));\r\n    right: calc(-50% + var(--diwa-stepper-step-size) / 2 + var(--diwa-border-width-base));\r\n    height: var(--diwa-border-width-thin);\r\n    background: ${state === 'complete' ? 'var(--diwa-notification-success)' : 'var(--diwa-border)'};\r\n  }\r\n\r\n  .circle {\r\n    width: var(--diwa-stepper-step-size);\r\n    height: var(--diwa-stepper-step-size);\r\n    border-radius: 50%;\r\n    background: ${circleColor};\r\n    color: var(--diwa-text-on-accent, #fff);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .circle-inner {\r\n    color: inherit;\r\n    font-size: var(--diwa-font-size-xs, 12px);\r\n    font-weight: var(--diwa-font-weight-medium);\r\n    line-height: 1;\r\n  }\r\n\r\n  .label {\r\n    font-size: var(--diwa-font-size-sm);\r\n    font-weight: ${state === 'current' ? 'var(--diwa-font-weight-medium)' : 'var(--diwa-font-weight-normal, 400)'};\r\n    color: ${labelColor};\r\n    text-align: center;\r\n    line-height: 1.3;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    max-width: 100%;\r\n  }\r\n\r\n  .sublabel {\r\n    font-size: var(--diwa-font-size-xs, 11px);\r\n    color: var(--diwa-text-muted);\r\n    text-align: center;\r\n  }\r\n  `;\r\n};\r\n"]}

package/dist/collection/components/diwa-stepper-horizontal-item/diwa-stepper-horizontal-item.js

@@ -0,0 +1,178 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-stepper-horizontal-item-styles";
+/**
+ * @component diwa-stepper-horizontal-item
+ *
+ * A single step in a `diwa-stepper-horizontal`. The parent manages `state`,
+ * `stepNumber`, and `isLast` automatically. Provide a step label via the
+ * `label` prop; additional context can be added with `sublabel`.
+ *
+ * Usage:
+ *   <diwa-stepper-horizontal-item label="Account">Create your account</diwa-stepper-horizontal-item>
+ */
+export class DiwaStepperHorizontalItem {
+    constructor() {
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** Step label text. */
+        this.label = '';
+        /** Optional secondary label (e.g. estimated time). */
+        this.sublabel = '';
+        /** Step state — managed by the parent stepper. */
+        this.state = 'incomplete';
+        /** 1-based step number icon — managed by the parent stepper. */
+        this.stepNumber = 1;
+        /** Whether this is the last step (hides the connector line) — managed by the parent. */
+        this.isLast = false;
+    }
+    renderIcon() {
+        if (this.state === 'complete') {
+            // Checkmark SVG
+            return (h("svg", { viewBox: "0 0 16 16", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "2,8 6,12 14,4" })));
+        }
+        return h("span", { class: "circle-inner" }, this.stepNumber);
+    }
+    render() {
+        return (h(Host, { key: 'f607bb4a3025642270b9fa62f32053f1f66cd7d5', role: "listitem", "aria-current": this.state === 'current' ? 'step' : undefined }, h("style", { key: 'eb24b7bb547f8b388e58203797047c9496d91c44', innerHTML: getComponentCss(this.state, this.isLast) }), h("div", { key: 'b40a388ae0a301cdd79d110a102318f9c053afec', class: "item" }, h("div", { key: '39470f2d8d52af9c7bd51bc4b628a2be85afeff1', class: "circle" }, this.renderIcon()), h("div", { key: '18f6fe713a9957b51131d34bb9feba346691efcf', class: "connector", "aria-hidden": "true" }), this.label && h("span", { key: '18cf0195b215688c238c9ca69fdeea790ea927fd', class: "label" }, this.label), this.sublabel && h("span", { key: '8841a928b2bf64c5055ad9ec9aad04bbe5251b8a', class: "sublabel" }, this.sublabel))));
+    }
+    static get is() { return "diwa-stepper-horizontal-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Per-component theme override."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step label text."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "sublabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional secondary label (e.g. estimated time)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "sublabel",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "state": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "StepState",
+                    "resolved": "\"complete\" | \"current\" | \"incomplete\"",
+                    "references": {
+                        "StepState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-stepper-horizontal-item/types.ts::StepState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step state \u2014 managed by the parent stepper."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "state",
+                "reflect": true,
+                "defaultValue": "'incomplete'"
+            },
+            "stepNumber": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "1-based step number icon \u2014 managed by the parent stepper."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "step-number",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "isLast": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this is the last step (hides the connector line) \u2014 managed by the parent."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-last",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=diwa-stepper-horizontal-item.js.map

package/dist/collection/components/diwa-stepper-horizontal-item/diwa-stepper-horizontal-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-stepper-horizontal-item.js","sourceRoot":"","sources":["../../../src/components/diwa-stepper-horizontal-item/diwa-stepper-horizontal-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlE,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE;;;;;;;;;GASG;AAKH,MAAM,OAAO,yBAAyB;IAJtC;QAOE,oCAAoC;QACX,UAAK,GAAU,MAAM,CAAC;QAE/C,uBAAuB;QACf,UAAK,GAAW,EAAE,CAAC;QAE3B,sDAAsD;QAC9C,aAAQ,GAAW,EAAE,CAAC;QAE9B,kDAAkD;QACV,UAAK,GAAc,YAAY,CAAC;QAExE,gEAAgE;QACvC,eAAU,GAAW,CAAC,CAAC;QAEhD,wFAAwF;QAC/D,WAAM,GAAY,KAAK,CAAC;KA6BlD;IA3BS,UAAU;QAChB,IAAI,IAAI,CAAC,KAAK,KAAK,UAAU,EAAE,CAAC;YAC9B,gBAAgB;YAChB,OAAO,CACL,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO;gBAC/I,gBAAU,MAAM,EAAC,eAAe,GAAG,CAC/B,CACP,CAAC;QACJ,CAAC;QACD,OAAO,YAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,UAAU,CAAQ,CAAC;IAC7D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,kBAAe,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAC/E,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,GAAI;YAC9D,4DAAK,KAAK,EAAC,MAAM;gBACf,4DAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,UAAU,EAAE,CACd;gBACN,4DAAK,KAAK,EAAC,WAAW,iBAAa,MAAM,GAAG;gBAC3C,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACrD,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,QAAQ,CAAQ,CAC3D,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from '@stencil/core';\r\nimport type { StepState } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-stepper-horizontal-item-styles';\r\n\r\n/**\r\n * @component diwa-stepper-horizontal-item\r\n *\r\n * A single step in a `diwa-stepper-horizontal`. The parent manages `state`,\r\n * `stepNumber`, and `isLast` automatically. Provide a step label via the\r\n * `label` prop; additional context can be added with `sublabel`.\r\n *\r\n * Usage:\r\n *   <diwa-stepper-horizontal-item label=\"Account\">Create your account</diwa-stepper-horizontal-item>\r\n */\r\n@Component({\r\n  tag: 'diwa-stepper-horizontal-item',\r\n  shadow: true,\r\n})\r\nexport class DiwaStepperHorizontalItem {\r\n  @Element() host!: HTMLDiwaStepperHorizontalItemElement;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Step label text. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Optional secondary label (e.g. estimated time). */\r\n  @Prop() sublabel: string = '';\r\n\r\n  /** Step state — managed by the parent stepper. */\r\n  @Prop({ mutable: true, reflect: true }) state: StepState = 'incomplete';\r\n\r\n  /** 1-based step number icon — managed by the parent stepper. */\r\n  @Prop({ mutable: true }) stepNumber: number = 1;\r\n\r\n  /** Whether this is the last step (hides the connector line) — managed by the parent. */\r\n  @Prop({ mutable: true }) isLast: boolean = false;\r\n\r\n  private renderIcon() {\r\n    if (this.state === 'complete') {\r\n      // Checkmark SVG\r\n      return (\r\n        <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <polyline points=\"2,8 6,12 14,4\" />\r\n        </svg>\r\n      );\r\n    }\r\n    return <span class=\"circle-inner\">{this.stepNumber}</span>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"listitem\" aria-current={this.state === 'current' ? 'step' : undefined}>\r\n        <style innerHTML={getComponentCss(this.state, this.isLast)} />\r\n        <div class=\"item\">\r\n          <div class=\"circle\">\r\n            {this.renderIcon()}\r\n          </div>\r\n          <div class=\"connector\" aria-hidden=\"true\" />\r\n          {this.label && <span class=\"label\">{this.label}</span>}\r\n          {this.sublabel && <span class=\"sublabel\">{this.sublabel}</span>}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/diwa-stepper-horizontal-item/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/diwa-stepper-horizontal-item/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-stepper-horizontal-item/types.ts"],"names":[],"mappings":"AAAA;;GAEG","sourcesContent":["/**\r\n * diwa-stepper-horizontal-item — Public TypeScript types\r\n */\r\n\r\nexport type StepState = 'complete' | 'current' | 'incomplete';\r\n"]}

package/dist/collection/components/diwa-switch/diwa-switch-styles.js

@@ -0,0 +1,91 @@
+import { getFocusStyle, getReducedMotionStyle } from "../../utils/styles";
+export const getComponentCss = (checked, disabled, loading, alignLabel, compact) => {
+    // Subtract border-width from inset: `top` on an absolutely-positioned child
+    // is measured from the *padding edge* (inside the border), so we must remove
+    // the border thickness to land exactly at the visual centre of the track.
+    const thumbInset = 'calc((var(--diwa-switch-track-height) - var(--diwa-switch-thumb-size)) / 2 - var(--diwa-border-width-base))';
+    const trackBg = checked
+        ? 'var(--diwa-accent)'
+        : 'var(--diwa-bg-elevated)';
+    const trackBorder = checked ? 'var(--diwa-accent)' : 'var(--diwa-border)';
+    const thumbTranslate = checked
+        ? `translateX(calc(var(--diwa-switch-track-width) - (2 * var(--diwa-border-width-base)) - var(--diwa-switch-thumb-size) - ${thumbInset}))`
+        : `translateX(${thumbInset})`;
+    const opacityRules = disabled || loading ? 'opacity: 0.5; pointer-events: none;' : '';
+    const flexDir = alignLabel === 'start' ? 'row-reverse' : 'row';
+    return `
+    :host {
+      display: inline-flex;
+      font-family: var(--diwa-font-family-base);
+      outline: none;
+      ${compact ? `
+      --diwa-switch-track-width:  32px;
+      --diwa-switch-track-height: 18px;
+      --diwa-switch-thumb-size:   12px;
+      ` : ''}
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .wrapper {
+      display: inline-flex;
+      flex-direction: ${flexDir};
+      align-items: center;
+      gap: var(--diwa-space-3);
+      min-height: ${compact ? 'var(--diwa-touch-target-min-size-compact, 32px)' : 'var(--diwa-touch-target-min-size, 44px)'};
+      cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};
+      ${opacityRules}
+    }
+    .track {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-start;
+      width: var(--diwa-switch-track-width);
+      height: var(--diwa-switch-track-height);
+      background: ${trackBg};
+      border: var(--diwa-border-width-base) solid ${trackBorder};
+      border-radius: var(--diwa-radius-xl);
+      box-sizing: border-box;
+      flex-shrink: 0;
+      transition: background var(--diwa-transition-base), border-color var(--diwa-transition-base), box-shadow var(--diwa-transition-fast);
+    }
+    @media (hover: hover) and (pointer: fine) {
+      .wrapper:hover .track {
+        border-color: ${checked ? 'var(--diwa-accent-hover)' : 'var(--diwa-text-secondary)'};
+        background: ${checked ? 'var(--diwa-accent-hover)' : 'var(--diwa-bg-hover)'};
+      }
+    }
+    ${getFocusStyle('.track')}
+    .thumb {
+      position: absolute;
+      top: ${thumbInset};
+      left: 0;
+      width: var(--diwa-switch-thumb-size);
+      height: var(--diwa-switch-thumb-size);
+      background: var(--diwa-bg-surface);
+      border-radius: 50%;
+      transform: ${thumbTranslate};
+      box-shadow: var(--diwa-shadow-sm);
+      transition: transform var(--diwa-transition-base), background var(--diwa-transition-base), box-shadow var(--diwa-transition-fast);
+      pointer-events: none;
+    }
+    .loading-indicator {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .label {
+      font-family: var(--diwa-font-family-base);
+      font-size: var(--diwa-font-size-base);
+      font-weight: var(--diwa-font-weight-medium);
+      line-height: var(--diwa-line-height-normal);
+      color: var(--diwa-text-primary);
+      user-select: none;
+    }
+
+    ${getReducedMotionStyle('.track', '.thumb')}
+  `;
+};
+//# sourceMappingURL=diwa-switch-styles.js.map

package/dist/collection/components/diwa-switch/diwa-switch-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-switch-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-switch/diwa-switch-styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE1E,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,OAAgB,EAChB,QAAiB,EACjB,OAAgB,EAChB,UAA4B,EAC5B,OAAgB,EACR,EAAE;IACV,4EAA4E;IAC5E,6EAA6E;IAC7E,0EAA0E;IAC1E,MAAM,UAAU,GAAG,6GAA6G,CAAC;IACjI,MAAM,OAAO,GAAG,OAAO;QACrB,CAAC,CAAC,oBAAoB;QACtB,CAAC,CAAC,yBAAyB,CAAC;IAC9B,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,CAAC;IAC1E,MAAM,cAAc,GAAG,OAAO;QAC5B,CAAC,CAAC,0HAA0H,UAAU,IAAI;QAC1I,CAAC,CAAC,cAAc,UAAU,GAAG,CAAC;IAChC,MAAM,YAAY,GAAG,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE,CAAC;IACtF,MAAM,OAAO,GAAG,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;IAE/D,OAAO;;;;;QAKD,OAAO,CAAC,CAAC,CAAC;;;;OAIX,CAAC,CAAC,CAAC,EAAE;;;;;;;wBAOY,OAAO;;;oBAGX,OAAO,CAAC,CAAC,CAAC,iDAAiD,CAAC,CAAC,CAAC,yCAAyC;gBAC3G,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;QACvD,YAAY;;;;;;;;;oBASA,OAAO;oDACyB,WAAW;;;;;;;;wBAQvC,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,4BAA4B;sBACrE,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,sBAAsB;;;MAG7E,aAAa,CAAC,QAAQ,CAAC;;;aAGhB,UAAU;;;;;;mBAMJ,cAAc;;;;;;;;;;;;;;;;;;;;MAoB3B,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC;GAC5C,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { SwitchAlignLabel } from './types';\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\n\r\nexport const getComponentCss = (\r\n  checked: boolean,\r\n  disabled: boolean,\r\n  loading: boolean,\r\n  alignLabel: SwitchAlignLabel,\r\n  compact: boolean,\r\n): string => {\r\n  // Subtract border-width from inset: `top` on an absolutely-positioned child\r\n  // is measured from the *padding edge* (inside the border), so we must remove\r\n  // the border thickness to land exactly at the visual centre of the track.\r\n  const thumbInset = 'calc((var(--diwa-switch-track-height) - var(--diwa-switch-thumb-size)) / 2 - var(--diwa-border-width-base))';\r\n  const trackBg = checked\r\n    ? 'var(--diwa-accent)'\r\n    : 'var(--diwa-bg-elevated)';\r\n  const trackBorder = checked ? 'var(--diwa-accent)' : 'var(--diwa-border)';\r\n  const thumbTranslate = checked\r\n    ? `translateX(calc(var(--diwa-switch-track-width) - (2 * var(--diwa-border-width-base)) - var(--diwa-switch-thumb-size) - ${thumbInset}))`\r\n    : `translateX(${thumbInset})`;\r\n  const opacityRules = disabled || loading ? 'opacity: 0.5; pointer-events: none;' : '';\r\n  const flexDir = alignLabel === 'start' ? 'row-reverse' : 'row';\r\n\r\n  return `\r\n    :host {\r\n      display: inline-flex;\r\n      font-family: var(--diwa-font-family-base);\r\n      outline: none;\r\n      ${compact ? `\r\n      --diwa-switch-track-width:  32px;\r\n      --diwa-switch-track-height: 18px;\r\n      --diwa-switch-thumb-size:   12px;\r\n      ` : ''}\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .wrapper {\n      display: inline-flex;\n      flex-direction: ${flexDir};\n      align-items: center;\n      gap: var(--diwa-space-3);\n      min-height: ${compact ? 'var(--diwa-touch-target-min-size-compact, 32px)' : 'var(--diwa-touch-target-min-size, 44px)'};\n      cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};\n      ${opacityRules}\n    }\n    .track {\r\n      position: relative;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: flex-start;\r\n      width: var(--diwa-switch-track-width);\r\n      height: var(--diwa-switch-track-height);\r\n      background: ${trackBg};\r\n      border: var(--diwa-border-width-base) solid ${trackBorder};\r\n      border-radius: var(--diwa-radius-xl);\r\n      box-sizing: border-box;\r\n      flex-shrink: 0;\r\n      transition: background var(--diwa-transition-base), border-color var(--diwa-transition-base), box-shadow var(--diwa-transition-fast);\r\n    }\r\n    @media (hover: hover) and (pointer: fine) {\n      .wrapper:hover .track {\n        border-color: ${checked ? 'var(--diwa-accent-hover)' : 'var(--diwa-text-secondary)'};\n        background: ${checked ? 'var(--diwa-accent-hover)' : 'var(--diwa-bg-hover)'};\n      }\n    }\n    ${getFocusStyle('.track')}\r\n    .thumb {\r\n      position: absolute;\r\n      top: ${thumbInset};\r\n      left: 0;\r\n      width: var(--diwa-switch-thumb-size);\r\n      height: var(--diwa-switch-thumb-size);\r\n      background: var(--diwa-bg-surface);\r\n      border-radius: 50%;\r\n      transform: ${thumbTranslate};\r\n      box-shadow: var(--diwa-shadow-sm);\r\n      transition: transform var(--diwa-transition-base), background var(--diwa-transition-base), box-shadow var(--diwa-transition-fast);\r\n      pointer-events: none;\r\n    }\r\n    .loading-indicator {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n    }\r\n    .label {\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: var(--diwa-font-size-base);\r\n      font-weight: var(--diwa-font-weight-medium);\r\n      line-height: var(--diwa-line-height-normal);\r\n      color: var(--diwa-text-primary);\r\n      user-select: none;\r\n    }\r\n\r\n    ${getReducedMotionStyle('.track', '.thumb')}\r\n  `;\r\n};\r\n"]}