@tessera-ui/core 0.4.0 → 0.5.0

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

@@ -1 +0,0 @@
-{"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.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,88 +0,0 @@
-// 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

@@ -1 +0,0 @@
-{"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.js.map

@@ -1 +0,0 @@
-{"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"]}

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"step.js","sourceRoot":"","sources":["../../../src/components/stepper/step.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n/**\n * @slot - Default slot for step content.\n *\n * @part step - The step wrapper.\n * @part indicator - The step number/icon circle.\n * @part label - The step label.\n * @part description - The step description.\n * @part connector - The connector line between steps.\n * @part content - The step content area.\n */\n@Component({\n  tag: 'ts-step',\n  styleUrl: 'step.css',\n  shadow: true,\n})\nexport class TsStep {\n  @Element() hostEl!: HTMLElement;\n\n  /** The step label text. */\n  @Prop() label?: string;\n\n  /** Optional description text below the label. */\n  @Prop() description?: string;\n\n  /** Whether this step is completed. */\n  @Prop({ reflect: true }) completed = false;\n\n  /** Whether this step has an error. */\n  @Prop({ reflect: true }) error = false;\n\n  /** Whether this step is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Optional custom icon name. */\n  @Prop() icon?: string;\n\n  private get index(): number {\n    return parseInt(this.hostEl.getAttribute('data-index') || '0', 10);\n  }\n\n  private get isActive(): boolean {\n    return this.hostEl.hasAttribute('data-active');\n  }\n\n  private get hasConnector(): boolean {\n    return this.hostEl.hasAttribute('data-has-connector');\n  }\n\n  private get orientation(): string {\n    return this.hostEl.getAttribute('data-orientation') || 'horizontal';\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderIndicatorContent() {\n    if (this.completed) {\n      return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"step__icon\">\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      );\n    }\n    if (this.error) {\n      return (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"step__icon\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n        </svg>\n      );\n    }\n    if (this.icon) {\n      return <ts-icon name={this.icon} size=\"sm\" />;\n    }\n    return <span>{this.index + 1}</span>;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-step': true,\n          'ts-step--active': this.isActive,\n          'ts-step--completed': this.completed,\n          'ts-step--error': this.error,\n          'ts-step--disabled': this.disabled,\n          [`ts-step--${this.orientation}`]: true,\n        }}\n        role=\"listitem\"\n        aria-current={this.isActive ? 'step' : undefined}\n        aria-disabled={this.disabled ? 'true' : undefined}\n      >\n        <div class=\"step__wrapper\" part=\"step\">\n          <div class=\"step__header\">\n            <div\n              class={{\n                'step__indicator': true,\n                'step__indicator--active': this.isActive,\n                'step__indicator--completed': this.completed,\n                'step__indicator--error': this.error,\n              }}\n              part=\"indicator\"\n            >\n              {this.renderIndicatorContent()}\n            </div>\n\n            <div class=\"step__text\">\n              {this.label && (\n                <span class=\"step__label\" part=\"label\">\n                  {this.label}\n                </span>\n              )}\n              {this.description && (\n                <span class=\"step__description\" part=\"description\">\n                  {this.description}\n                </span>\n              )}\n            </div>\n          </div>\n\n          {this.hasConnector && (\n            <div class=\"step__connector\" part=\"connector\">\n              <div\n                class={{\n                  'step__connector-line': true,\n                  'step__connector-line--completed': this.completed,\n                }}\n              />\n            </div>\n          )}\n\n          <div class=\"step__content\" part=\"content\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE;;;;GAIG;AAMH,MAAM,OAAO,SAAS;IACT,MAAM,CAAe;IAEhC,wDAAwD;IAC/B,UAAU,GAAG,CAAC,CAAC;IAExC,8BAA8B;IACL,WAAW,GAA8B,YAAY,CAAC;IAE/E,iDAAiD;IACzC,MAAM,GAAG,KAAK,CAAC;IAGvB,sBAAsB;QACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,gBAAgB;QACtB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC;QAClE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC5B,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;YAC/C,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACxD,IAAI,KAAK,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;gBAC9B,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YACvC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACtC,CAAC;YACD,IAAI,IAAI,CAAC,MAAM,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;gBAC3C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YACpC,CAAC;iBAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBACvB,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YACnC,CAAC;YACD,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC7B,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;YAC9C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,oBAAoB,CAAC,CAAC;YAC7C,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;aAC1C;YAED,4DAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;gBAC1D,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Element, Watch } from '@stencil/core';\n\n/**\n * @slot - Default slot for ts-step children.\n *\n * @part container - The stepper container.\n */\n@Component({\n  tag: 'ts-stepper',\n  styleUrl: 'stepper.css',\n  shadow: true,\n})\nexport class TsStepper {\n  @Element() hostEl!: HTMLElement;\n\n  /** The index of the currently active step (0-based). */\n  @Prop({ reflect: true }) activeStep = 0;\n\n  /** The layout orientation. */\n  @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** If true, steps must be completed in order. */\n  @Prop() linear = false;\n\n  @Watch('activeStep')\n  handleActiveStepChange(): void {\n    this.updateStepStates();\n  }\n\n  componentDidLoad(): void {\n    this.updateStepStates();\n  }\n\n  private updateStepStates(): void {\n    const steps = Array.from(this.hostEl.querySelectorAll('ts-step'));\n    steps.forEach((step, index) => {\n      step.setAttribute('data-index', String(index));\n      step.setAttribute('data-orientation', this.orientation);\n      if (index === this.activeStep) {\n        step.setAttribute('data-active', '');\n      } else {\n        step.removeAttribute('data-active');\n      }\n      if (this.linear && index > this.activeStep) {\n        step.setAttribute('disabled', '');\n      } else if (this.linear) {\n        step.removeAttribute('disabled');\n      }\n      if (index < steps.length - 1) {\n        step.setAttribute('data-has-connector', '');\n      } else {\n        step.removeAttribute('data-has-connector');\n      }\n    });\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-stepper': true,\n          [`ts-stepper--${this.orientation}`]: true,\n        }}\n      >\n        <div class=\"stepper__container\" part=\"container\" role=\"list\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"switch-group.js","sourceRoot":"","sources":["../../../src/components/switch-group/switch-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host, Element, Listen, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize } from '../../types';\n\n/**\n * @slot - Default slot for ts-switch-option children.\n *\n * @part base - The switch group container.\n */\n@Component({\n  tag: 'ts-switch-group',\n  styleUrl: 'switch-group.css',\n  shadow: true,\n})\nexport class TsSwitchGroup {\n  @Element() hostEl!: HTMLElement;\n\n  /** The currently active segment value. */\n  @Prop({ reflect: true, mutable: true }) value?: string;\n\n  /** The size of the switch group. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Disables the entire group. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Stretch to fill the container width. */\n  @Prop({ reflect: true }) fullWidth = false;\n\n  /** Emitted when the active value changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<{ value: string }>;\n\n  @Watch('value')\n  onValueChange(): void {\n    this.syncOptions();\n  }\n\n  @Listen('tsOptionSelect')\n  handleOptionSelect(event: CustomEvent<{ value: string }>): void {\n    event.stopPropagation();\n    if (this.disabled) return;\n    this.selectOption(event.detail.value);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent): void {\n    if (this.disabled) return;\n\n    const options = this.getOptions();\n    const enabledOptions = options.filter(o => !o.disabled);\n    if (enabledOptions.length === 0) return;\n\n    const currentIndex = enabledOptions.findIndex(o => o.value === this.value);\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        {\n          const nextIndex = (currentIndex + 1) % enabledOptions.length;\n          this.selectOption(enabledOptions[nextIndex].value);\n        }\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        {\n          const prevIndex = (currentIndex - 1 + enabledOptions.length) % enabledOptions.length;\n          this.selectOption(enabledOptions[prevIndex].value);\n        }\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.selectOption(enabledOptions[0].value);\n        break;\n      case 'End':\n        event.preventDefault();\n        this.selectOption(enabledOptions[enabledOptions.length - 1].value);\n        break;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.syncOptions();\n  }\n\n  private getOptions(): HTMLTsSwitchOptionElement[] {\n    return Array.from(this.hostEl.querySelectorAll('ts-switch-option')) as HTMLTsSwitchOptionElement[];\n  }\n\n  private selectOption(value: string): void {\n    if (value !== this.value) {\n      this.value = value;\n      this.tsChange.emit({ value });\n    }\n    this.syncOptions();\n  }\n\n  private syncOptions(): void {\n    const options = this.getOptions();\n    options.forEach(option => {\n      (option as unknown as { active: boolean }).active = option.value === this.value;\n    });\n  }\n\n  private handleSlotChange = (): void => {\n    this.syncOptions();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-switch-group': true,\n          [`ts-switch-group--${this.size}`]: true,\n          'ts-switch-group--disabled': this.disabled,\n          'ts-switch-group--full-width': this.fullWidth,\n        }}\n        role=\"radiogroup\"\n      >\n        <div class=\"switch-group__base\" part=\"base\">\n          <slot onSlotchange={this.handleSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n}\n\ninterface HTMLTsSwitchOptionElement extends HTMLElement {\n  value: string;\n  disabled: boolean;\n  active: boolean;\n}\n"]}