@tessera-ui/core 0.4.0

package/dist/collection/components/spacer/spacer.js

@@ -0,0 +1,74 @@
+import { h, Host } from "@stencil/core";
+/**
+ * An explicit spacing element for adding vertical or horizontal space.
+ */
+export class TsSpacer {
+    /** Spacing token number controlling the size of the spacer. */
+    size = '4';
+    /** The axis along which the spacer adds space. */
+    axis = 'vertical';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const style = this.axis === 'horizontal'
+            ? { width: `var(--ts-spacing-${this.size})`, height: '100%' }
+            : { height: `var(--ts-spacing-${this.size})`, width: '100%' };
+        return h(Host, { key: '967b57ba1224c79cd338795ec7fb5fe4008f4f5f', style: style });
+    }
+    static get is() { return "ts-spacer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spacer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spacer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing token number controlling the size of the spacer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'4'"
+            },
+            "axis": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The axis along which the spacer adds space."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "axis",
+                "defaultValue": "'vertical'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=spacer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.js","sourceRoot":"","sources":["../../../src/components/spacer/spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,QAAQ;IACnB,+DAA+D;IACtC,IAAI,GAAW,GAAG,CAAC;IAE5C,kDAAkD;IACzB,IAAI,GAA8B,UAAU,CAAC;IAEtE,4EAA4E;IAC5E,MAAM;QACJ,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,YAAY;YACxB,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,IAAI,CAAC,IAAI,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE;YAC7D,CAAC,CAAC,EAAE,MAAM,EAAE,oBAAoB,IAAI,CAAC,IAAI,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAElE,OAAO,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK,GAAS,CAAC;IACrC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * An explicit spacing element for adding vertical or horizontal space.\n */\n@Component({\n  tag: 'ts-spacer',\n  styleUrl: 'spacer.css',\n  shadow: true,\n})\nexport class TsSpacer {\n  /** Spacing token number controlling the size of the spacer. */\n  @Prop({ reflect: true }) size: string = '4';\n\n  /** The axis along which the spacer adds space. */\n  @Prop({ reflect: true }) axis: 'vertical' | 'horizontal' = 'vertical';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const style =\n      this.axis === 'horizontal'\n        ? { width: `var(--ts-spacing-${this.size})`, height: '100%' }\n        : { height: `var(--ts-spacing-${this.size})`, width: '100%' };\n\n    return <Host style={style}></Host>;\n  }\n}\n"]}

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

@@ -0,0 +1,90 @@
+// Hand-written stories for ts-spacer
+export default {
+    title: 'Layout/Spacer',
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['0', '1', '2', '3', '4', '5', '6', '8', '10', '12', '16'],
+            description: 'Spacing token number controlling the size of the spacer.',
+        },
+        axis: {
+            control: 'select',
+            options: ['vertical', 'horizontal'],
+            description: 'The axis along which the spacer adds space.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.size !== undefined)
+        attrs.push(`size="${args.size}"`);
+    if (args.axis !== undefined)
+        attrs.push(`axis="${args.axis}"`);
+    return `
+    <div style="font-family: sans-serif;">
+      <div style="padding: 12px; background: #e2e8f0; border-radius: 4px;">Above spacer</div>
+      <ts-spacer ${attrs.join(' ')} style="background: rgba(59, 130, 246, 0.15);"></ts-spacer>
+      <div style="padding: 12px; background: #e2e8f0; border-radius: 4px;">Below spacer</div>
+    </div>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        size: '4',
+        axis: 'vertical',
+    },
+});
+export const Vertical = () => `
+  <div style="font-family: sans-serif; max-width: 400px;">
+    <h2 style="margin: 0;">First Section</h2>
+    <p style="margin: 0; color: #64748b;">Some content in the first section.</p>
+    <ts-spacer size="6" style="background: rgba(59, 130, 246, 0.1);"></ts-spacer>
+    <h2 style="margin: 0;">Second Section</h2>
+    <p style="margin: 0; color: #64748b;">Some content in the second section.</p>
+    <ts-spacer size="6" style="background: rgba(59, 130, 246, 0.1);"></ts-spacer>
+    <h2 style="margin: 0;">Third Section</h2>
+    <p style="margin: 0; color: #64748b;">Some content in the third section.</p>
+  </div>
+`;
+export const Horizontal = () => `
+  <div style="display: flex; align-items: center; font-family: sans-serif;">
+    <span style="padding: 8px 16px; background: #e2e8f0; border-radius: 4px;">Left</span>
+    <ts-spacer axis="horizontal" size="4" style="background: rgba(59, 130, 246, 0.15);"></ts-spacer>
+    <span style="padding: 8px 16px; background: #e2e8f0; border-radius: 4px;">Middle</span>
+    <ts-spacer axis="horizontal" size="8" style="background: rgba(59, 130, 246, 0.15);"></ts-spacer>
+    <span style="padding: 8px 16px; background: #e2e8f0; border-radius: 4px;">Right</span>
+  </div>
+`;
+export const Sizes = () => `
+  <div style="font-family: sans-serif;">
+    <p style="margin: 0 0 16px; font-size: 14px; color: #666;">Different vertical spacer sizes (highlighted in blue)</p>
+    <div style="display: flex; gap: 32px;">
+      <div style="flex: 1;">
+        <p style="margin: 0 0 4px; font-size: 12px; color: #999;">size="1"</p>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Top</div>
+        <ts-spacer size="1" style="background: rgba(59, 130, 246, 0.2);"></ts-spacer>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Bottom</div>
+      </div>
+      <div style="flex: 1;">
+        <p style="margin: 0 0 4px; font-size: 12px; color: #999;">size="4"</p>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Top</div>
+        <ts-spacer size="4" style="background: rgba(59, 130, 246, 0.2);"></ts-spacer>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Bottom</div>
+      </div>
+      <div style="flex: 1;">
+        <p style="margin: 0 0 4px; font-size: 12px; color: #999;">size="8"</p>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Top</div>
+        <ts-spacer size="8" style="background: rgba(59, 130, 246, 0.2);"></ts-spacer>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Bottom</div>
+      </div>
+      <div style="flex: 1;">
+        <p style="margin: 0 0 4px; font-size: 12px; color: #999;">size="12"</p>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Top</div>
+        <ts-spacer size="12" style="background: rgba(59, 130, 246, 0.2);"></ts-spacer>
+        <div style="padding: 8px; background: #e2e8f0; border-radius: 4px;">Bottom</div>
+      </div>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=spacer.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.stories.js","sourceRoot":"","sources":["../../../src/components/spacer/spacer.stories.ts"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,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,0DAA0D;SACxE;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC;YACnC,WAAW,EAAE,6CAA6C;SAC3D;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,OAAO;;;mBAGU,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;GAG/B,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,IAAI,EAAE,GAAG;QACT,IAAI,EAAE,UAAU;KACjB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;CAWrC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQvC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BlC,CAAC","sourcesContent":["// Hand-written stories for ts-spacer\n\nexport default {\n  title: 'Layout/Spacer',\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['0', '1', '2', '3', '4', '5', '6', '8', '10', '12', '16'],\n      description: 'Spacing token number controlling the size of the spacer.',\n    },\n    axis: {\n      control: 'select',\n      options: ['vertical', 'horizontal'],\n      description: 'The axis along which the spacer adds space.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.size !== undefined) attrs.push(`size=\"${args.size}\"`);\n  if (args.axis !== undefined) attrs.push(`axis=\"${args.axis}\"`);\n  return `\n    <div style=\"font-family: sans-serif;\">\n      <div style=\"padding: 12px; background: #e2e8f0; border-radius: 4px;\">Above spacer</div>\n      <ts-spacer ${attrs.join(' ')} style=\"background: rgba(59, 130, 246, 0.15);\"></ts-spacer>\n      <div style=\"padding: 12px; background: #e2e8f0; border-radius: 4px;\">Below spacer</div>\n    </div>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    size: '4',\n    axis: 'vertical',\n  },\n});\n\nexport const Vertical = (): string => `\n  <div style=\"font-family: sans-serif; max-width: 400px;\">\n    <h2 style=\"margin: 0;\">First Section</h2>\n    <p style=\"margin: 0; color: #64748b;\">Some content in the first section.</p>\n    <ts-spacer size=\"6\" style=\"background: rgba(59, 130, 246, 0.1);\"></ts-spacer>\n    <h2 style=\"margin: 0;\">Second Section</h2>\n    <p style=\"margin: 0; color: #64748b;\">Some content in the second section.</p>\n    <ts-spacer size=\"6\" style=\"background: rgba(59, 130, 246, 0.1);\"></ts-spacer>\n    <h2 style=\"margin: 0;\">Third Section</h2>\n    <p style=\"margin: 0; color: #64748b;\">Some content in the third section.</p>\n  </div>\n`;\n\nexport const Horizontal = (): string => `\n  <div style=\"display: flex; align-items: center; font-family: sans-serif;\">\n    <span style=\"padding: 8px 16px; background: #e2e8f0; border-radius: 4px;\">Left</span>\n    <ts-spacer axis=\"horizontal\" size=\"4\" style=\"background: rgba(59, 130, 246, 0.15);\"></ts-spacer>\n    <span style=\"padding: 8px 16px; background: #e2e8f0; border-radius: 4px;\">Middle</span>\n    <ts-spacer axis=\"horizontal\" size=\"8\" style=\"background: rgba(59, 130, 246, 0.15);\"></ts-spacer>\n    <span style=\"padding: 8px 16px; background: #e2e8f0; border-radius: 4px;\">Right</span>\n  </div>\n`;\n\nexport const Sizes = (): string => `\n  <div style=\"font-family: sans-serif;\">\n    <p style=\"margin: 0 0 16px; font-size: 14px; color: #666;\">Different vertical spacer sizes (highlighted in blue)</p>\n    <div style=\"display: flex; gap: 32px;\">\n      <div style=\"flex: 1;\">\n        <p style=\"margin: 0 0 4px; font-size: 12px; color: #999;\">size=\"1\"</p>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Top</div>\n        <ts-spacer size=\"1\" style=\"background: rgba(59, 130, 246, 0.2);\"></ts-spacer>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Bottom</div>\n      </div>\n      <div style=\"flex: 1;\">\n        <p style=\"margin: 0 0 4px; font-size: 12px; color: #999;\">size=\"4\"</p>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Top</div>\n        <ts-spacer size=\"4\" style=\"background: rgba(59, 130, 246, 0.2);\"></ts-spacer>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Bottom</div>\n      </div>\n      <div style=\"flex: 1;\">\n        <p style=\"margin: 0 0 4px; font-size: 12px; color: #999;\">size=\"8\"</p>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Top</div>\n        <ts-spacer size=\"8\" style=\"background: rgba(59, 130, 246, 0.2);\"></ts-spacer>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Bottom</div>\n      </div>\n      <div style=\"flex: 1;\">\n        <p style=\"margin: 0 0 4px; font-size: 12px; color: #999;\">size=\"12\"</p>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Top</div>\n        <ts-spacer size=\"12\" style=\"background: rgba(59, 130, 246, 0.2);\"></ts-spacer>\n        <div style=\"padding: 8px; background: #e2e8f0; border-radius: 4px;\">Bottom</div>\n      </div>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/spinner/spinner.css

@@ -0,0 +1,49 @@
+/* ==========================================================================
+   ts-spinner — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-spinner-size          Spinner dimensions
+     --ts-spinner-color         Spinning indicator color
+     --ts-spinner-track-color   Background track color
+   ========================================================================== */
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  --ts-spinner-size: 1.5rem;
+  --ts-spinner-color: var(--ts-color-interactive-primary);
+  --ts-spinner-track-color: var(--ts-color-neutral-200);
+}
+
+/* ---- Sizes ---- */
+:host([size="xs"]) { --ts-spinner-size: 0.875rem; }
+:host([size="sm"]) { --ts-spinner-size: 1.125rem; }
+:host([size="md"]) { --ts-spinner-size: 1.5rem; }
+:host([size="lg"]) { --ts-spinner-size: 2rem; }
+:host([size="xl"]) { --ts-spinner-size: 3rem; }
+
+/* ---- SVG ---- */
+.spinner__svg {
+  width: var(--ts-spinner-size);
+  height: var(--ts-spinner-size);
+  animation: ts-spinner-rotate 0.75s linear infinite;
+}
+
+/* ---- Track ---- */
+.spinner__track {
+  stroke: var(--ts-spinner-track-color);
+}
+
+/* ---- Indicator ---- */
+.spinner__indicator {
+  stroke: var(--ts-spinner-color);
+}
+
+/* ---- Animation ---- */
+@keyframes ts-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/collection/components/spinner/spinner.js

@@ -0,0 +1,98 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @part svg - The SVG element.
+ * @part track - The background track circle.
+ * @part indicator - The spinning indicator arc.
+ */
+export class TsSpinner {
+    /** The size of the spinner. */
+    size = 'md';
+    /** The color of the spinning indicator. */
+    color = 'currentColor';
+    /** Accessible label for screen readers. */
+    label = 'Loading';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '6d0183cc6a829afd067c51502cbc119cf8e89c23', class: {
+                'ts-spinner': true,
+                [`ts-spinner--${this.size}`]: true,
+            }, role: "status", "aria-label": this.label }, h("svg", { key: '0bb8dc344532457d26f820a6761aba232ad7ed3f', class: "spinner__svg", part: "svg", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '3431186c9235e4538634217cc4652e5c5d4e2959', class: "spinner__track", part: "track", cx: "16", cy: "16", r: "13", "stroke-width": "3" }), h("circle", { key: 'b2c69fc866b5d17de8664a8be40750c5a541a374', class: "spinner__indicator", part: "indicator", cx: "16", cy: "16", r: "13", "stroke-width": "3", "stroke-linecap": "round", "stroke-dasharray": "20 61.68", style: { stroke: this.color !== 'currentColor' ? this.color : undefined } }))));
+    }
+    static get is() { return "ts-spinner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spinner.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spinner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the spinner."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the spinning indicator."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'currentColor'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Loading'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;GAIG;AAMH,MAAM,OAAO,SAAS;IACpB,+BAA+B;IACN,IAAI,GAAqC,IAAI,CAAC;IAEvE,2CAA2C;IACnC,KAAK,GAAW,cAAc,CAAC;IAEvC,2CAA2C;IACnC,KAAK,GAAW,SAAS,CAAC;IAElC,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;aACnC,EACD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK;YAEtB,4DAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;gBACrG,+DACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,kBACO,GAAG,GAChB;gBACF,+DACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,WAAW,EAChB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,kBACO,GAAG,oBACD,OAAO,sBACL,UAAU,EAC3B,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE,GACzE,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @part svg - The SVG element.\n * @part track - The background track circle.\n * @part indicator - The spinning indicator arc.\n */\n@Component({\n  tag: 'ts-spinner',\n  styleUrl: 'spinner.css',\n  shadow: true,\n})\nexport class TsSpinner {\n  /** The size of the spinner. */\n  @Prop({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n  /** The color of the spinning indicator. */\n  @Prop() color: string = 'currentColor';\n\n  /** Accessible label for screen readers. */\n  @Prop() label: string = 'Loading';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-spinner': true,\n          [`ts-spinner--${this.size}`]: true,\n        }}\n        role=\"status\"\n        aria-label={this.label}\n      >\n        <svg class=\"spinner__svg\" part=\"svg\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle\n            class=\"spinner__track\"\n            part=\"track\"\n            cx=\"16\"\n            cy=\"16\"\n            r=\"13\"\n            stroke-width=\"3\"\n          />\n          <circle\n            class=\"spinner__indicator\"\n            part=\"indicator\"\n            cx=\"16\"\n            cy=\"16\"\n            r=\"13\"\n            stroke-width=\"3\"\n            stroke-linecap=\"round\"\n            stroke-dasharray=\"20 61.68\"\n            style={{ stroke: this.color !== 'currentColor' ? this.color : undefined }}\n          />\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,88 @@
+// Hand-written stories for ts-spinner
+export default {
+    title: 'Components/Spinner',
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'The size of the spinner.',
+        },
+        color: { control: 'color', description: 'The color of the spinning indicator.' },
+        label: { control: 'text', description: 'Accessible label for screen readers.' },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.size !== undefined && args.size !== null)
+        attrs.push(`size="${args.size}"`);
+    if (args.color !== undefined && args.color !== null && args.color !== 'currentColor')
+        attrs.push(`color="${args.color}"`);
+    if (args.label !== undefined && args.label !== null)
+        attrs.push(`label="${args.label}"`);
+    return `<ts-spinner ${attrs.join(' ')}></ts-spinner>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        size: 'md',
+        color: 'currentColor',
+        label: 'Loading',
+    },
+});
+export const Sizes = () => `
+  <div style="display: flex; gap: 16px; align-items: center;">
+    <div style="text-align: center; font-family: sans-serif;">
+      <ts-spinner size="xs"></ts-spinner>
+      <div style="font-size: 12px; margin-top: 4px; color: #666;">XS</div>
+    </div>
+    <div style="text-align: center; font-family: sans-serif;">
+      <ts-spinner size="sm"></ts-spinner>
+      <div style="font-size: 12px; margin-top: 4px; color: #666;">SM</div>
+    </div>
+    <div style="text-align: center; font-family: sans-serif;">
+      <ts-spinner size="md"></ts-spinner>
+      <div style="font-size: 12px; margin-top: 4px; color: #666;">MD</div>
+    </div>
+    <div style="text-align: center; font-family: sans-serif;">
+      <ts-spinner size="lg"></ts-spinner>
+      <div style="font-size: 12px; margin-top: 4px; color: #666;">LG</div>
+    </div>
+    <div style="text-align: center; font-family: sans-serif;">
+      <ts-spinner size="xl"></ts-spinner>
+      <div style="font-size: 12px; margin-top: 4px; color: #666;">XL</div>
+    </div>
+  </div>
+`;
+export const CustomColors = () => `
+  <div style="display: flex; gap: 24px; align-items: center;">
+    <ts-spinner color="#2563eb" label="Loading primary content"></ts-spinner>
+    <ts-spinner color="#16a34a" label="Loading success data"></ts-spinner>
+    <ts-spinner color="#dc2626" label="Loading error details"></ts-spinner>
+    <ts-spinner color="#f59e0b" label="Loading warnings"></ts-spinner>
+    <ts-spinner color="#8b5cf6" label="Loading custom data"></ts-spinner>
+  </div>
+`;
+export const LoadingState = () => `
+  <div style="display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;">
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <ts-spinner size="sm" label="Saving changes"></ts-spinner>
+      <span>Saving changes...</span>
+    </div>
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <ts-spinner size="sm" label="Uploading file"></ts-spinner>
+      <span>Uploading file...</span>
+    </div>
+    <div style="padding: 48px; border: 1px solid #e5e7eb; border-radius: 8px; text-align: center;">
+      <ts-spinner size="lg" label="Loading dashboard data"></ts-spinner>
+      <div style="margin-top: 12px; color: #555;">Loading dashboard data...</div>
+    </div>
+  </div>
+`;
+export const OnDarkBackground = () => `
+  <div style="display: flex; gap: 24px; align-items: center; padding: 32px; background: #1e293b; border-radius: 8px;">
+    <ts-spinner size="sm" color="#ffffff" label="Loading"></ts-spinner>
+    <ts-spinner size="md" color="#ffffff" label="Loading"></ts-spinner>
+    <ts-spinner size="lg" color="#38bdf8" label="Loading"></ts-spinner>
+  </div>
+`;
+//# sourceMappingURL=spinner.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.ts"],"names":[],"mappings":"AAAA,sCAAsC;AAEtC,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YACvC,WAAW,EAAE,0BAA0B;SACxC;QACD,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,sCAAsC,EAAE;QAChF,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,sCAAsC,EAAE;KAChF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,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,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,cAAc;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAC1H,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACzF,OAAO,eAAe,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC;AACxD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,cAAc;QACrB,KAAK,EAAE,SAAS;KACjB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;CAuBlC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQzC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAezC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAW,EAAE,CAAC;;;;;;CAM7C,CAAC","sourcesContent":["// Hand-written stories for ts-spinner\n\nexport default {\n  title: 'Components/Spinner',\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\n      description: 'The size of the spinner.',\n    },\n    color: { control: 'color', description: 'The color of the spinning indicator.' },\n    label: { control: 'text', description: 'Accessible label for screen readers.' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.color !== undefined && args.color !== null && args.color !== 'currentColor') attrs.push(`color=\"${args.color}\"`);\n  if (args.label !== undefined && args.label !== null) attrs.push(`label=\"${args.label}\"`);\n  return `<ts-spinner ${attrs.join(' ')}></ts-spinner>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    size: 'md',\n    color: 'currentColor',\n    label: 'Loading',\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center;\">\n    <div style=\"text-align: center; font-family: sans-serif;\">\n      <ts-spinner size=\"xs\"></ts-spinner>\n      <div style=\"font-size: 12px; margin-top: 4px; color: #666;\">XS</div>\n    </div>\n    <div style=\"text-align: center; font-family: sans-serif;\">\n      <ts-spinner size=\"sm\"></ts-spinner>\n      <div style=\"font-size: 12px; margin-top: 4px; color: #666;\">SM</div>\n    </div>\n    <div style=\"text-align: center; font-family: sans-serif;\">\n      <ts-spinner size=\"md\"></ts-spinner>\n      <div style=\"font-size: 12px; margin-top: 4px; color: #666;\">MD</div>\n    </div>\n    <div style=\"text-align: center; font-family: sans-serif;\">\n      <ts-spinner size=\"lg\"></ts-spinner>\n      <div style=\"font-size: 12px; margin-top: 4px; color: #666;\">LG</div>\n    </div>\n    <div style=\"text-align: center; font-family: sans-serif;\">\n      <ts-spinner size=\"xl\"></ts-spinner>\n      <div style=\"font-size: 12px; margin-top: 4px; color: #666;\">XL</div>\n    </div>\n  </div>\n`;\n\nexport const CustomColors = (): string => `\n  <div style=\"display: flex; gap: 24px; align-items: center;\">\n    <ts-spinner color=\"#2563eb\" label=\"Loading primary content\"></ts-spinner>\n    <ts-spinner color=\"#16a34a\" label=\"Loading success data\"></ts-spinner>\n    <ts-spinner color=\"#dc2626\" label=\"Loading error details\"></ts-spinner>\n    <ts-spinner color=\"#f59e0b\" label=\"Loading warnings\"></ts-spinner>\n    <ts-spinner color=\"#8b5cf6\" label=\"Loading custom data\"></ts-spinner>\n  </div>\n`;\n\nexport const LoadingState = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;\">\n    <div style=\"display: flex; align-items: center; gap: 8px;\">\n      <ts-spinner size=\"sm\" label=\"Saving changes\"></ts-spinner>\n      <span>Saving changes...</span>\n    </div>\n    <div style=\"display: flex; align-items: center; gap: 8px;\">\n      <ts-spinner size=\"sm\" label=\"Uploading file\"></ts-spinner>\n      <span>Uploading file...</span>\n    </div>\n    <div style=\"padding: 48px; border: 1px solid #e5e7eb; border-radius: 8px; text-align: center;\">\n      <ts-spinner size=\"lg\" label=\"Loading dashboard data\"></ts-spinner>\n      <div style=\"margin-top: 12px; color: #555;\">Loading dashboard data...</div>\n    </div>\n  </div>\n`;\n\nexport const OnDarkBackground = (): string => `\n  <div style=\"display: flex; gap: 24px; align-items: center; padding: 32px; background: #1e293b; border-radius: 8px;\">\n    <ts-spinner size=\"sm\" color=\"#ffffff\" label=\"Loading\"></ts-spinner>\n    <ts-spinner size=\"md\" color=\"#ffffff\" label=\"Loading\"></ts-spinner>\n    <ts-spinner size=\"lg\" color=\"#38bdf8\" label=\"Loading\"></ts-spinner>\n  </div>\n`;\n"]}

package/dist/collection/components/stack/stack.css

@@ -0,0 +1,10 @@
+/* ==========================================================================
+   ts-stack — Shadow DOM Scoped Styles
+
+   A vertical stack layout primitive with consistent gap spacing.
+   ========================================================================== */
+
+:host {
+  display: flex;
+  flex-direction: column;
+}

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

@@ -0,0 +1,82 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for stacked content.
+ *
+ * @part base - The stack container.
+ */
+export class TsStack {
+    /** Spacing token number controlling the gap between items. */
+    gap = '3';
+    /** Cross-axis alignment of items. */
+    align = 'stretch';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const alignMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+        };
+        return (h(Host, { key: 'e3a85d1cdd874e8e09e069d6d5e22502b494fbef', style: {
+                gap: `var(--ts-spacing-${this.gap})`,
+                alignItems: alignMap[this.align] || 'stretch',
+            } }, h("slot", { key: 'eb4127e0dfded8841de2951976461f0ec2ec1f88' })));
+    }
+    static get is() { return "ts-stack"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["stack.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["stack.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing token number controlling the gap between items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "gap",
+                "defaultValue": "'3'"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'stretch'",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cross-axis alignment of items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "align",
+                "defaultValue": "'stretch'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=stack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sourceRoot":"","sources":["../../../src/components/stack/stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;GAIG;AAMH,MAAM,OAAO,OAAO;IAClB,8DAA8D;IACrC,GAAG,GAAW,GAAG,CAAC;IAE3C,qCAAqC;IACZ,KAAK,GAA2C,SAAS,CAAC;IAEnF,4EAA4E;IAC5E,MAAM;QACJ,MAAM,QAAQ,GAA2B;YACvC,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,SAAS;SACnB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,GAAG,EAAE,oBAAoB,IAAI,CAAC,GAAG,GAAG;gBACpC,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,SAAS;aAC9C;YAED,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for stacked content.\n *\n * @part base - The stack container.\n */\n@Component({\n  tag: 'ts-stack',\n  styleUrl: 'stack.css',\n  shadow: true,\n})\nexport class TsStack {\n  /** Spacing token number controlling the gap between items. */\n  @Prop({ reflect: true }) gap: string = '3';\n\n  /** Cross-axis alignment of items. */\n  @Prop({ reflect: true }) align: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const alignMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n    };\n\n    return (\n      <Host\n        style={{\n          gap: `var(--ts-spacing-${this.gap})`,\n          alignItems: alignMap[this.align] || 'stretch',\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}