@tessera-ui/core 0.4.0

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

@@ -0,0 +1,91 @@
+// Hand-written stories for ts-toast
+export default {
+    title: 'Components/Toast',
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['info', 'success', 'warning', 'danger', 'neutral'],
+            description: 'The toast\'s visual variant.',
+        },
+        duration: {
+            control: 'number',
+            description: 'Auto-dismiss duration in ms. Set 0 to disable.',
+        },
+        dismissible: {
+            control: 'boolean',
+            description: 'Whether the toast shows a close button.',
+        },
+        open: {
+            control: 'boolean',
+            description: 'Whether the toast is visible.',
+        },
+        position: {
+            control: 'select',
+            options: ['top-right', 'top-left', 'bottom-right', 'bottom-left', 'top-center', 'bottom-center'],
+            description: 'Position of the toast on screen.',
+        },
+        slotContent: {
+            control: 'text',
+            description: 'Default slot content',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.variant !== undefined)
+        attrs.push(`variant="${args.variant}"`);
+    if (args.duration !== undefined)
+        attrs.push(`duration="${args.duration}"`);
+    if (args.dismissible !== undefined && args.dismissible)
+        attrs.push('dismissible');
+    if (args.open)
+        attrs.push('open');
+    if (args.position !== undefined)
+        attrs.push(`position="${args.position}"`);
+    return `<ts-toast ${attrs.join(' ')}>${args.slotContent || ''}</ts-toast>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        variant: 'success',
+        duration: 0,
+        dismissible: true,
+        open: true,
+        position: 'top-right',
+        slotContent: 'Changes saved successfully',
+    },
+});
+export const Variants = () => `
+  <div style="display: flex; flex-direction: column; gap: 12px; position: relative; min-height: 300px;">
+    <ts-toast variant="success" open duration="0" style="position: relative;">Changes saved successfully</ts-toast>
+    <ts-toast variant="danger" open duration="0" style="position: relative;">Error: Connection failed</ts-toast>
+    <ts-toast variant="warning" open duration="0" style="position: relative;">Your session will expire in 5 minutes</ts-toast>
+    <ts-toast variant="info" open duration="0" style="position: relative;">A new version is available</ts-toast>
+    <ts-toast variant="neutral" open duration="0" style="position: relative;">3 items were moved to archive</ts-toast>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; flex-direction: column; gap: 12px; position: relative;">
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Dismissible</p>
+      <ts-toast variant="info" open duration="0" dismissible style="position: relative;">Click the X to dismiss this toast</ts-toast>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Not dismissible</p>
+      <ts-toast variant="warning" open duration="0" style="position: relative;">This toast cannot be manually dismissed</ts-toast>
+    </div>
+  </div>
+`;
+export const Composition = () => `
+  <div style="display: flex; flex-direction: column; gap: 12px; position: relative;">
+    <ts-toast variant="success" open duration="0" dismissible style="position: relative;">
+      Your profile has been updated
+      <ts-button slot="action" size="sm" variant="success" appearance="ghost">Undo</ts-button>
+    </ts-toast>
+    <ts-toast variant="danger" open duration="0" dismissible style="position: relative;">
+      Failed to upload file. Please try again.
+      <ts-button slot="action" size="sm" variant="danger" appearance="ghost">Retry</ts-button>
+    </ts-toast>
+  </div>
+`;
+//# sourceMappingURL=toast.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.stories.js","sourceRoot":"","sources":["../../../src/components/toast/toast.stories.ts"],"names":[],"mappings":"AAAA,oCAAoC;AAEpC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YAC5D,WAAW,EAAE,8BAA8B;SAC5C;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,gDAAgD;SAC9D;QACD,WAAW,EAAE;YACX,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,yCAAyC;SACvD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,+BAA+B;SAC7C;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,CAAC;YAChG,WAAW,EAAE,kCAAkC;SAChD;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sBAAsB;SACpC;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IAC3E,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW;QAAE,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAClF,IAAI,IAAI,CAAC,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IAC3E,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,aAAa,CAAC;AAC7E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,CAAC;QACX,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,WAAW;QACrB,WAAW,EAAE,4BAA4B;KAC1C;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQrC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;CAWnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;CAWxC,CAAC","sourcesContent":["// Hand-written stories for ts-toast\n\nexport default {\n  title: 'Components/Toast',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['info', 'success', 'warning', 'danger', 'neutral'],\n      description: 'The toast\\'s visual variant.',\n    },\n    duration: {\n      control: 'number',\n      description: 'Auto-dismiss duration in ms. Set 0 to disable.',\n    },\n    dismissible: {\n      control: 'boolean',\n      description: 'Whether the toast shows a close button.',\n    },\n    open: {\n      control: 'boolean',\n      description: 'Whether the toast is visible.',\n    },\n    position: {\n      control: 'select',\n      options: ['top-right', 'top-left', 'bottom-right', 'bottom-left', 'top-center', 'bottom-center'],\n      description: 'Position of the toast on screen.',\n    },\n    slotContent: {\n      control: 'text',\n      description: 'Default slot content',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.variant !== undefined) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.duration !== undefined) attrs.push(`duration=\"${args.duration}\"`);\n  if (args.dismissible !== undefined && args.dismissible) attrs.push('dismissible');\n  if (args.open) attrs.push('open');\n  if (args.position !== undefined) attrs.push(`position=\"${args.position}\"`);\n  return `<ts-toast ${attrs.join(' ')}>${args.slotContent || ''}</ts-toast>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    variant: 'success',\n    duration: 0,\n    dismissible: true,\n    open: true,\n    position: 'top-right',\n    slotContent: 'Changes saved successfully',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px; position: relative; min-height: 300px;\">\n    <ts-toast variant=\"success\" open duration=\"0\" style=\"position: relative;\">Changes saved successfully</ts-toast>\n    <ts-toast variant=\"danger\" open duration=\"0\" style=\"position: relative;\">Error: Connection failed</ts-toast>\n    <ts-toast variant=\"warning\" open duration=\"0\" style=\"position: relative;\">Your session will expire in 5 minutes</ts-toast>\n    <ts-toast variant=\"info\" open duration=\"0\" style=\"position: relative;\">A new version is available</ts-toast>\n    <ts-toast variant=\"neutral\" open duration=\"0\" style=\"position: relative;\">3 items were moved to archive</ts-toast>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px; position: relative;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Dismissible</p>\n      <ts-toast variant=\"info\" open duration=\"0\" dismissible style=\"position: relative;\">Click the X to dismiss this toast</ts-toast>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Not dismissible</p>\n      <ts-toast variant=\"warning\" open duration=\"0\" style=\"position: relative;\">This toast cannot be manually dismissed</ts-toast>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px; position: relative;\">\n    <ts-toast variant=\"success\" open duration=\"0\" dismissible style=\"position: relative;\">\n      Your profile has been updated\n      <ts-button slot=\"action\" size=\"sm\" variant=\"success\" appearance=\"ghost\">Undo</ts-button>\n    </ts-toast>\n    <ts-toast variant=\"danger\" open duration=\"0\" dismissible style=\"position: relative;\">\n      Failed to upload file. Please try again.\n      <ts-button slot=\"action\" size=\"sm\" variant=\"danger\" appearance=\"ghost\">Retry</ts-button>\n    </ts-toast>\n  </div>\n`;\n"]}

package/dist/collection/components/toggle/toggle.css

@@ -0,0 +1,99 @@
+/* ==========================================================================
+   ts-toggle — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-toggle-track-bg          Unchecked track background
+     --ts-toggle-track-bg-checked  Checked track background
+     --ts-toggle-thumb-bg          Thumb background
+     --ts-toggle-focus-ring        Focus ring box-shadow
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-toggle-track-bg: var(--ts-color-neutral-200);
+  --ts-toggle-track-bg-checked: var(--ts-color-primary-600);
+  --ts-toggle-thumb-bg: var(--ts-color-bg-elevated);
+  --ts-toggle-focus-ring: var(--ts-focus-ring);
+}
+
+.toggle__base {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ts-spacing-2);
+  cursor: pointer;
+  outline: none;
+}
+
+.toggle__base:focus-visible .toggle__track {
+  box-shadow: var(--ts-toggle-focus-ring);
+}
+
+:host(.ts-toggle--disabled) .toggle__base {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---- Track (M3 — outlined when unchecked) ---- */
+.toggle__track {
+  position: relative;
+  background-color: var(--ts-toggle-track-bg);
+  border-radius: var(--ts-radius-full);
+  border: 2px solid var(--ts-color-border-default);
+  box-shadow: none;
+  transition:
+    background-color var(--ts-transition-fast),
+    border-color var(--ts-transition-fast),
+    box-shadow var(--ts-transition-fast);
+  flex-shrink: 0;
+}
+
+:host(.ts-toggle--checked) .toggle__track {
+  background-color: var(--ts-toggle-track-bg-checked);
+  border-color: var(--ts-toggle-track-bg-checked);
+  box-shadow: none;
+}
+
+/* ---- Thumb ---- */
+.toggle__thumb {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) scale(1);
+  background-color: var(--ts-toggle-thumb-bg);
+  border-radius: var(--ts-radius-full);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  transition:
+    inset-inline-start var(--ts-transition-fast),
+    transform var(--ts-transition-fast),
+    box-shadow var(--ts-transition-fast);
+}
+
+:host(.ts-toggle--checked) .toggle__thumb {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+/* ---- Sizes ---- */
+:host([size="sm"]) .toggle__track { width: 32px; height: 18px; }
+:host([size="sm"]) .toggle__thumb { width: 14px; height: 14px; inset-inline-start: 2px; }
+:host(.ts-toggle--checked[size="sm"]) .toggle__thumb { inset-inline-start: 16px; }
+
+:host([size="md"]) .toggle__track { width: 40px; height: 22px; }
+:host([size="md"]) .toggle__thumb { width: 18px; height: 18px; inset-inline-start: 2px; }
+:host(.ts-toggle--checked[size="md"]) .toggle__thumb { inset-inline-start: 20px; }
+
+:host([size="lg"]) .toggle__track { width: 50px; height: 28px; }
+:host([size="lg"]) .toggle__thumb { width: 24px; height: 24px; inset-inline-start: 2px; }
+:host(.ts-toggle--checked[size="lg"]) .toggle__thumb { inset-inline-start: 24px; }
+
+/* ---- Label ---- */
+.toggle__label {
+  font-size: var(--ts-font-size-sm);
+  color: var(--ts-color-text-secondary);
+  cursor: inherit;
+  user-select: none;
+}
+
+:host([size="lg"]) .toggle__label {
+  font-size: var(--ts-font-size-md);
+}

package/dist/collection/components/toggle/toggle.js

@@ -0,0 +1,220 @@
+import { h, Host } from "@stencil/core";
+import { generateId } from "../../utils/aria";
+/**
+ * @slot - Default slot for the toggle label.
+ *
+ * @part base - The toggle container.
+ * @part track - The toggle track.
+ * @part thumb - The toggle thumb/knob.
+ * @part label - The label wrapper.
+ */
+export class TsToggle {
+    hostEl;
+    inputId = generateId('ts-toggle');
+    /** Whether the toggle is checked. */
+    checked = false;
+    /** The toggle's size. */
+    size = 'md';
+    /** Renders the toggle as disabled. */
+    disabled = false;
+    /** Name for form submission. */
+    name;
+    /** Value for form submission. */
+    value;
+    /** Emitted when the toggle state changes. */
+    tsChange;
+    /** Programmatically toggle the checked state. */
+    async toggle() {
+        if (!this.disabled) {
+            this.checked = !this.checked;
+            this.tsChange.emit({ checked: this.checked });
+        }
+    }
+    handleClick = () => {
+        this.toggle();
+    };
+    handleKeydown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.toggle();
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '37d1c8601478c83ad4be39acedfd4bb84ca9024c', class: {
+                'ts-toggle': true,
+                [`ts-toggle--${this.size}`]: true,
+                'ts-toggle--checked': this.checked,
+                'ts-toggle--disabled': this.disabled,
+            } }, h("div", { key: 'cc01df27c45a311485395e58d06b57cbaddace77', class: "toggle__base", part: "base", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeydown }, h("div", { key: '4e275c1ff9564119b2f3e7e8e2407f285fc0c27a', class: "toggle__track", part: "track" }, h("div", { key: 'e4213d681cef167a7e9db7ef001f83d12c618df4', class: "toggle__thumb", part: "thumb" })), h("label", { key: 'dcd922600a2af35a59ef59822f40a86db0dd94d8', class: "toggle__label", part: "label", id: `${this.inputId}-label` }, h("slot", { key: '7f15cc140376af0b8b9337a0517a9559dbf7d5b8' })))));
+    }
+    static get is() { return "ts-toggle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["toggle.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["toggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the toggle is checked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "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 toggle's size."
+                },
+                "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": "Renders the toggle as disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsChange",
+                "name": "tsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the toggle state changes."
+                },
+                "complexType": {
+                    "original": "TsToggleEventDetail",
+                    "resolved": "TsToggleEventDetail",
+                    "references": {
+                        "TsToggleEventDetail": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsToggleEventDetail",
+                            "referenceLocation": "TsToggleEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically toggle the checked state.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+}
+//# sourceMappingURL=toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGjF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;;;;;;GAOG;AAMH,MAAM,OAAO,QAAQ;IACR,MAAM,CAAe;IAExB,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE1C,qCAAqC;IACG,OAAO,GAAG,KAAK,CAAC;IAExD,yBAAyB;IACA,IAAI,GAAW,IAAI,CAAC;IAE7C,sCAAsC;IACb,QAAQ,GAAG,KAAK,CAAC;IAE1C,gCAAgC;IACxB,IAAI,CAAU;IAEtB,iCAAiC;IACzB,KAAK,CAAU;IAEvB,6CAA6C;IACX,QAAQ,CAAqC;IAE/E,iDAAiD;IAEjD,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAEO,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC,CAAC;IAEM,aAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;QACrD,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;IACH,CAAC,CAAC;IAEF,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBACjC,oBAAoB,EAAE,IAAI,CAAC,OAAO;gBAClC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACrC;YAED,4DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC9B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa;gBAE7B,4DAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO;oBACrC,4DAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,GAAG,CACtC;gBAEN,8DAAO,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,QAAQ;oBACnE,8DAAQ,CACF,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsToggleEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot - Default slot for the toggle label.\n *\n * @part base - The toggle container.\n * @part track - The toggle track.\n * @part thumb - The toggle thumb/knob.\n * @part label - The label wrapper.\n */\n@Component({\n  tag: 'ts-toggle',\n  styleUrl: 'toggle.css',\n  shadow: true,\n})\nexport class TsToggle {\n  @Element() hostEl!: HTMLElement;\n\n  private inputId = generateId('ts-toggle');\n\n  /** Whether the toggle is checked. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** The toggle's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Renders the toggle as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Name for form submission. */\n  @Prop() name?: string;\n\n  /** Value for form submission. */\n  @Prop() value?: string;\n\n  /** Emitted when the toggle state changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsToggleEventDetail>;\n\n  /** Programmatically toggle the checked state. */\n  @Method()\n  async toggle(): Promise<void> {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.tsChange.emit({ checked: this.checked });\n    }\n  }\n\n  private handleClick = (): void => {\n    this.toggle();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-toggle': true,\n          [`ts-toggle--${this.size}`]: true,\n          'ts-toggle--checked': this.checked,\n          'ts-toggle--disabled': this.disabled,\n        }}\n      >\n        <div\n          class=\"toggle__base\"\n          part=\"base\"\n          role=\"switch\"\n          aria-checked={this.checked ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n        >\n          <div class=\"toggle__track\" part=\"track\">\n            <div class=\"toggle__thumb\" part=\"thumb\" />\n          </div>\n\n          <label class=\"toggle__label\" part=\"label\" id={`${this.inputId}-label`}>\n            <slot />\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,145 @@
+// Hand-written stories for ts-toggle
+export default {
+    title: 'Components/Toggle',
+    tags: ['autodocs'],
+    argTypes: {
+        checked: { control: 'boolean', description: 'Whether the toggle is checked.' },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'The toggle\'s size.',
+        },
+        disabled: { control: 'boolean', description: 'Renders the toggle as disabled.' },
+        name: { control: 'text', description: 'Name for form submission.' },
+        value: { control: 'text', description: 'Value for form submission.' },
+        slotContent: { control: 'text', description: 'Toggle label text' },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.checked)
+        attrs.push('checked');
+    if (args.size !== undefined && args.size !== null)
+        attrs.push(`size="${args.size}"`);
+    if (args.disabled)
+        attrs.push('disabled');
+    if (args.name !== undefined && args.name !== null && args.name !== '')
+        attrs.push(`name="${args.name}"`);
+    if (args.value !== undefined && args.value !== null && args.value !== '')
+        attrs.push(`value="${args.value}"`);
+    return `<ts-toggle ${attrs.join(' ')}>${args.slotContent || ''}</ts-toggle>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        checked: false,
+        size: 'md',
+        disabled: false,
+        slotContent: 'Enable notifications',
+    },
+});
+export const Sizes = () => `
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <ts-toggle size="xs">Extra Small</ts-toggle>
+    <ts-toggle size="sm">Small</ts-toggle>
+    <ts-toggle size="md">Medium</ts-toggle>
+    <ts-toggle size="lg">Large</ts-toggle>
+    <ts-toggle size="xl">Extra Large</ts-toggle>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <ts-toggle>Unchecked</ts-toggle>
+    <ts-toggle checked>Checked</ts-toggle>
+    <ts-toggle disabled>Disabled (unchecked)</ts-toggle>
+    <ts-toggle disabled checked>Disabled (checked)</ts-toggle>
+  </div>
+`;
+export const WithIcons = () => `
+  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
+    <div style="display: flex; align-items: center; gap: 12px;">
+      <ts-icon name="moon" size="sm"></ts-icon>
+      <ts-toggle checked>Dark Mode</ts-toggle>
+    </div>
+    <div style="display: flex; align-items: center; gap: 12px;">
+      <ts-icon name="wifi" size="sm"></ts-icon>
+      <ts-toggle checked>Wi-Fi</ts-toggle>
+    </div>
+    <div style="display: flex; align-items: center; gap: 12px;">
+      <ts-icon name="bluetooth" size="sm"></ts-icon>
+      <ts-toggle>Bluetooth</ts-toggle>
+    </div>
+    <div style="display: flex; align-items: center; gap: 12px;">
+      <ts-icon name="map-pin" size="sm"></ts-icon>
+      <ts-toggle>Location Services</ts-toggle>
+    </div>
+  </div>
+`;
+export const Composition = () => `
+  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 500px;">
+    <ts-card bordered padding="lg">
+      <span slot="header"><h3 style="margin: 0;">Notification Preferences</h3></span>
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ts-color-border-default); padding-bottom: 12px;">
+          <div>
+            <div style="font-weight: 600;">Email Notifications</div>
+            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Receive updates about your account via email.</div>
+          </div>
+          <ts-toggle checked></ts-toggle>
+        </div>
+        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ts-color-border-default); padding-bottom: 12px;">
+          <div>
+            <div style="font-weight: 600;">Push Notifications</div>
+            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Get real-time alerts on your device.</div>
+          </div>
+          <ts-toggle checked></ts-toggle>
+        </div>
+        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ts-color-border-default); padding-bottom: 12px;">
+          <div>
+            <div style="font-weight: 600;">SMS Alerts</div>
+            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Critical alerts sent to your phone number.</div>
+          </div>
+          <ts-toggle></ts-toggle>
+        </div>
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <div>
+            <div style="font-weight: 600;">Marketing Emails</div>
+            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Receive tips, product updates, and promotions.</div>
+          </div>
+          <ts-toggle></ts-toggle>
+        </div>
+      </div>
+      <span slot="footer">
+        <div style="display: flex; justify-content: flex-end; gap: 12px; padding-top: 8px;">
+          <ts-button appearance="outline" variant="neutral">Reset to Defaults</ts-button>
+          <ts-button variant="primary">Save Preferences</ts-button>
+        </div>
+      </span>
+    </ts-card>
+
+    <ts-card bordered padding="lg">
+      <span slot="header">
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <ts-icon name="shield" size="sm"></ts-icon>
+          <h3 style="margin: 0;">Privacy & Security</h3>
+        </div>
+      </span>
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <div>
+            <div style="font-weight: 600;">Two-Factor Authentication</div>
+            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Add an extra layer of security to your account.</div>
+          </div>
+          <ts-toggle checked></ts-toggle>
+        </div>
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <div>
+            <div style="font-weight: 600;">Activity Log</div>
+            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Track all login sessions and API usage.</div>
+          </div>
+          <ts-toggle checked></ts-toggle>
+        </div>
+      </div>
+    </ts-card>
+  </div>
+`;
+//# sourceMappingURL=toggle.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.stories.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.stories.ts"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,gCAAgC,EAAE;QAC9E,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YACvC,WAAW,EAAE,qBAAqB;SACnC;QACD,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,iCAAiC,EAAE;QAChF,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,2BAA2B,EAAE;QACnE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,4BAA4B,EAAE;QACrE,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,mBAAmB,EAAE;KACnE;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxC,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IACrF,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IACzG,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAC9G,OAAO,cAAc,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,cAAc,CAAC;AAC/E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,KAAK;QACf,WAAW,EAAE,sBAAsB;KACpC;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;CAOnC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;CAmBtC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmExC,CAAC","sourcesContent":["// Hand-written stories for ts-toggle\n\nexport default {\n  title: 'Components/Toggle',\n  tags: ['autodocs'],\n  argTypes: {\n    checked: { control: 'boolean', description: 'Whether the toggle is checked.' },\n    size: {\n      control: 'select',\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\n      description: 'The toggle\\'s size.',\n    },\n    disabled: { control: 'boolean', description: 'Renders the toggle as disabled.' },\n    name: { control: 'text', description: 'Name for form submission.' },\n    value: { control: 'text', description: 'Value for form submission.' },\n    slotContent: { control: 'text', description: 'Toggle label text' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.checked) attrs.push('checked');\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.disabled) attrs.push('disabled');\n  if (args.name !== undefined && args.name !== null && args.name !== '') attrs.push(`name=\"${args.name}\"`);\n  if (args.value !== undefined && args.value !== null && args.value !== '') attrs.push(`value=\"${args.value}\"`);\n  return `<ts-toggle ${attrs.join(' ')}>${args.slotContent || ''}</ts-toggle>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    checked: false,\n    size: 'md',\n    disabled: false,\n    slotContent: 'Enable notifications',\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n    <ts-toggle size=\"xs\">Extra Small</ts-toggle>\n    <ts-toggle size=\"sm\">Small</ts-toggle>\n    <ts-toggle size=\"md\">Medium</ts-toggle>\n    <ts-toggle size=\"lg\">Large</ts-toggle>\n    <ts-toggle size=\"xl\">Extra Large</ts-toggle>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n    <ts-toggle>Unchecked</ts-toggle>\n    <ts-toggle checked>Checked</ts-toggle>\n    <ts-toggle disabled>Disabled (unchecked)</ts-toggle>\n    <ts-toggle disabled checked>Disabled (checked)</ts-toggle>\n  </div>\n`;\n\nexport const WithIcons = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 400px;\">\n    <div style=\"display: flex; align-items: center; gap: 12px;\">\n      <ts-icon name=\"moon\" size=\"sm\"></ts-icon>\n      <ts-toggle checked>Dark Mode</ts-toggle>\n    </div>\n    <div style=\"display: flex; align-items: center; gap: 12px;\">\n      <ts-icon name=\"wifi\" size=\"sm\"></ts-icon>\n      <ts-toggle checked>Wi-Fi</ts-toggle>\n    </div>\n    <div style=\"display: flex; align-items: center; gap: 12px;\">\n      <ts-icon name=\"bluetooth\" size=\"sm\"></ts-icon>\n      <ts-toggle>Bluetooth</ts-toggle>\n    </div>\n    <div style=\"display: flex; align-items: center; gap: 12px;\">\n      <ts-icon name=\"map-pin\" size=\"sm\"></ts-icon>\n      <ts-toggle>Location Services</ts-toggle>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; max-width: 500px;\">\n    <ts-card bordered padding=\"lg\">\n      <span slot=\"header\"><h3 style=\"margin: 0;\">Notification Preferences</h3></span>\n      <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n        <div style=\"display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ts-color-border-default); padding-bottom: 12px;\">\n          <div>\n            <div style=\"font-weight: 600;\">Email Notifications</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Receive updates about your account via email.</div>\n          </div>\n          <ts-toggle checked></ts-toggle>\n        </div>\n        <div style=\"display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ts-color-border-default); padding-bottom: 12px;\">\n          <div>\n            <div style=\"font-weight: 600;\">Push Notifications</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Get real-time alerts on your device.</div>\n          </div>\n          <ts-toggle checked></ts-toggle>\n        </div>\n        <div style=\"display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ts-color-border-default); padding-bottom: 12px;\">\n          <div>\n            <div style=\"font-weight: 600;\">SMS Alerts</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Critical alerts sent to your phone number.</div>\n          </div>\n          <ts-toggle></ts-toggle>\n        </div>\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <div>\n            <div style=\"font-weight: 600;\">Marketing Emails</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Receive tips, product updates, and promotions.</div>\n          </div>\n          <ts-toggle></ts-toggle>\n        </div>\n      </div>\n      <span slot=\"footer\">\n        <div style=\"display: flex; justify-content: flex-end; gap: 12px; padding-top: 8px;\">\n          <ts-button appearance=\"outline\" variant=\"neutral\">Reset to Defaults</ts-button>\n          <ts-button variant=\"primary\">Save Preferences</ts-button>\n        </div>\n      </span>\n    </ts-card>\n\n    <ts-card bordered padding=\"lg\">\n      <span slot=\"header\">\n        <div style=\"display: flex; align-items: center; gap: 8px;\">\n          <ts-icon name=\"shield\" size=\"sm\"></ts-icon>\n          <h3 style=\"margin: 0;\">Privacy & Security</h3>\n        </div>\n      </span>\n      <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <div>\n            <div style=\"font-weight: 600;\">Two-Factor Authentication</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Add an extra layer of security to your account.</div>\n          </div>\n          <ts-toggle checked></ts-toggle>\n        </div>\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <div>\n            <div style=\"font-weight: 600;\">Activity Log</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Track all login sessions and API usage.</div>\n          </div>\n          <ts-toggle checked></ts-toggle>\n        </div>\n      </div>\n    </ts-card>\n  </div>\n`;\n"]}