@tessera-ui/core 0.4.0 → 0.5.0

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

@@ -1,112 +0,0 @@
-// Hand-written stories for ts-popover
-export default {
-    title: 'Components/Popover',
-    tags: ['autodocs'],
-    argTypes: {
-        open: {
-            control: 'boolean',
-            description: 'Whether the popover is currently visible.',
-        },
-        placement: {
-            control: 'select',
-            options: ['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end'],
-            description: 'Placement of the popover relative to the trigger.',
-        },
-        trigger: {
-            control: 'select',
-            options: ['click', 'hover', 'manual'],
-            description: 'How the popover is triggered.',
-        },
-        dismissible: {
-            control: 'boolean',
-            description: 'Whether the popover closes on outside click or Escape.',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.open)
-        attrs.push('open');
-    if (args.placement !== undefined)
-        attrs.push(`placement="${args.placement}"`);
-    if (args.trigger !== undefined)
-        attrs.push(`trigger="${args.trigger}"`);
-    if (args.dismissible !== undefined && !args.dismissible)
-        attrs.push('dismissible="false"');
-    return `
-    <div style="display: flex; justify-content: center; padding: 100px 0;">
-      <ts-popover ${attrs.join(' ')}>
-        <ts-button slot="trigger">Click me</ts-button>
-        <div style="padding: 16px; max-width: 240px;">
-          <h4 style="margin: 0 0 8px; font-family: sans-serif;">Popover Title</h4>
-          <p style="margin: 0; font-family: sans-serif; font-size: 14px; color: #666;">
-            This is a rich content popover with some helpful information.
-          </p>
-        </div>
-      </ts-popover>
-    </div>
-  `;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        open: false,
-        placement: 'bottom',
-        trigger: 'click',
-        dismissible: true,
-    },
-});
-export const Variants = () => `
-  <div style="display: flex; gap: 24px; justify-content: center; padding: 120px 0;">
-    <ts-popover placement="top" trigger="click">
-      <ts-button slot="trigger" appearance="outline">Top</ts-button>
-      <div style="padding: 12px; font-family: sans-serif;">Popover on top</div>
-    </ts-popover>
-    <ts-popover placement="bottom" trigger="click">
-      <ts-button slot="trigger" appearance="outline">Bottom</ts-button>
-      <div style="padding: 12px; font-family: sans-serif;">Popover on bottom</div>
-    </ts-popover>
-    <ts-popover placement="left" trigger="click">
-      <ts-button slot="trigger" appearance="outline">Left</ts-button>
-      <div style="padding: 12px; font-family: sans-serif;">Popover on left</div>
-    </ts-popover>
-    <ts-popover placement="right" trigger="click">
-      <ts-button slot="trigger" appearance="outline">Right</ts-button>
-      <div style="padding: 12px; font-family: sans-serif;">Popover on right</div>
-    </ts-popover>
-  </div>
-`;
-export const States = () => `
-  <div style="display: flex; gap: 24px; justify-content: center; padding: 120px 0;">
-    <ts-popover trigger="click">
-      <ts-button slot="trigger">Click trigger</ts-button>
-      <div style="padding: 12px; font-family: sans-serif;">Opened by click</div>
-    </ts-popover>
-    <ts-popover trigger="hover">
-      <ts-button slot="trigger" appearance="outline">Hover trigger</ts-button>
-      <div style="padding: 12px; font-family: sans-serif;">Opened by hover</div>
-    </ts-popover>
-  </div>
-`;
-export const Composition = () => `
-  <div style="display: flex; justify-content: center; padding: 80px 0 200px;">
-    <ts-popover placement="bottom-start" trigger="click">
-      <ts-button slot="trigger" variant="primary">User Profile</ts-button>
-      <div style="padding: 16px; min-width: 240px; font-family: sans-serif;">
-        <div style="display: flex; gap: 12px; align-items: center; margin-bottom: 12px;">
-          <ts-avatar name="Jane Doe" size="md"></ts-avatar>
-          <div>
-            <div style="font-weight: 600;">Jane Doe</div>
-            <div style="font-size: 13px; color: #666;">jane@example.com</div>
-          </div>
-        </div>
-        <ts-divider></ts-divider>
-        <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 12px;">
-          <ts-button appearance="ghost" block size="sm">View Profile</ts-button>
-          <ts-button appearance="ghost" block size="sm">Settings</ts-button>
-          <ts-button appearance="ghost" block size="sm" variant="danger">Sign out</ts-button>
-        </div>
-      </div>
-    </ts-popover>
-  </div>
-`;
-//# sourceMappingURL=popover.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"popover.stories.js","sourceRoot":"","sources":["../../../src/components/popover/popover.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,SAAS;YAClB,WAAW,EAAE,2CAA2C;SACzD;QACD,SAAS,EAAE;YACT,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,CAAC;YACjG,WAAW,EAAE,mDAAmD;SACjE;QACD,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC;YACrC,WAAW,EAAE,+BAA+B;SAC7C;QACD,WAAW,EAAE;YACX,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,wDAAwD;SACtE;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IAC9E,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW;QAAE,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAC3F,OAAO;;oBAEW,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;;GAUhC,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,KAAK;QACX,SAAS,EAAE,QAAQ;QACnB,OAAO,EAAE,OAAO;QAChB,WAAW,EAAE,IAAI;KAClB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;CAmBrC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;CAWnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;CAqBxC,CAAC","sourcesContent":["// Hand-written stories for ts-popover\n\nexport default {\n  title: 'Components/Popover',\n  tags: ['autodocs'],\n  argTypes: {\n    open: {\n      control: 'boolean',\n      description: 'Whether the popover is currently visible.',\n    },\n    placement: {\n      control: 'select',\n      options: ['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end'],\n      description: 'Placement of the popover relative to the trigger.',\n    },\n    trigger: {\n      control: 'select',\n      options: ['click', 'hover', 'manual'],\n      description: 'How the popover is triggered.',\n    },\n    dismissible: {\n      control: 'boolean',\n      description: 'Whether the popover closes on outside click or Escape.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.open) attrs.push('open');\n  if (args.placement !== undefined) attrs.push(`placement=\"${args.placement}\"`);\n  if (args.trigger !== undefined) attrs.push(`trigger=\"${args.trigger}\"`);\n  if (args.dismissible !== undefined && !args.dismissible) attrs.push('dismissible=\"false\"');\n  return `\n    <div style=\"display: flex; justify-content: center; padding: 100px 0;\">\n      <ts-popover ${attrs.join(' ')}>\n        <ts-button slot=\"trigger\">Click me</ts-button>\n        <div style=\"padding: 16px; max-width: 240px;\">\n          <h4 style=\"margin: 0 0 8px; font-family: sans-serif;\">Popover Title</h4>\n          <p style=\"margin: 0; font-family: sans-serif; font-size: 14px; color: #666;\">\n            This is a rich content popover with some helpful information.\n          </p>\n        </div>\n      </ts-popover>\n    </div>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    open: false,\n    placement: 'bottom',\n    trigger: 'click',\n    dismissible: true,\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; gap: 24px; justify-content: center; padding: 120px 0;\">\n    <ts-popover placement=\"top\" trigger=\"click\">\n      <ts-button slot=\"trigger\" appearance=\"outline\">Top</ts-button>\n      <div style=\"padding: 12px; font-family: sans-serif;\">Popover on top</div>\n    </ts-popover>\n    <ts-popover placement=\"bottom\" trigger=\"click\">\n      <ts-button slot=\"trigger\" appearance=\"outline\">Bottom</ts-button>\n      <div style=\"padding: 12px; font-family: sans-serif;\">Popover on bottom</div>\n    </ts-popover>\n    <ts-popover placement=\"left\" trigger=\"click\">\n      <ts-button slot=\"trigger\" appearance=\"outline\">Left</ts-button>\n      <div style=\"padding: 12px; font-family: sans-serif;\">Popover on left</div>\n    </ts-popover>\n    <ts-popover placement=\"right\" trigger=\"click\">\n      <ts-button slot=\"trigger\" appearance=\"outline\">Right</ts-button>\n      <div style=\"padding: 12px; font-family: sans-serif;\">Popover on right</div>\n    </ts-popover>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; gap: 24px; justify-content: center; padding: 120px 0;\">\n    <ts-popover trigger=\"click\">\n      <ts-button slot=\"trigger\">Click trigger</ts-button>\n      <div style=\"padding: 12px; font-family: sans-serif;\">Opened by click</div>\n    </ts-popover>\n    <ts-popover trigger=\"hover\">\n      <ts-button slot=\"trigger\" appearance=\"outline\">Hover trigger</ts-button>\n      <div style=\"padding: 12px; font-family: sans-serif;\">Opened by hover</div>\n    </ts-popover>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"display: flex; justify-content: center; padding: 80px 0 200px;\">\n    <ts-popover placement=\"bottom-start\" trigger=\"click\">\n      <ts-button slot=\"trigger\" variant=\"primary\">User Profile</ts-button>\n      <div style=\"padding: 16px; min-width: 240px; font-family: sans-serif;\">\n        <div style=\"display: flex; gap: 12px; align-items: center; margin-bottom: 12px;\">\n          <ts-avatar name=\"Jane Doe\" size=\"md\"></ts-avatar>\n          <div>\n            <div style=\"font-weight: 600;\">Jane Doe</div>\n            <div style=\"font-size: 13px; color: #666;\">jane@example.com</div>\n          </div>\n        </div>\n        <ts-divider></ts-divider>\n        <div style=\"display: flex; flex-direction: column; gap: 8px; margin-top: 12px;\">\n          <ts-button appearance=\"ghost\" block size=\"sm\">View Profile</ts-button>\n          <ts-button appearance=\"ghost\" block size=\"sm\">Settings</ts-button>\n          <ts-button appearance=\"ghost\" block size=\"sm\" variant=\"danger\">Sign out</ts-button>\n        </div>\n      </div>\n    </ts-popover>\n  </div>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../src/components/progress/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD;;;;GAIG;AAMH,MAAM,OAAO,UAAU;IACrB,yCAAyC;IACjC,KAAK,GAAG,CAAC,CAAC;IAElB,qBAAqB;IACb,GAAG,GAAG,GAAG,CAAC;IAElB,yBAAyB;IACA,OAAO,GAAsB,SAAS,CAAC;IAEhE,oCAAoC;IACX,IAAI,GAAW,IAAI,CAAC;IAE7C,6CAA6C;IACpB,aAAa,GAAG,KAAK,CAAC;IAE/C,6CAA6C;IACrC,KAAK,CAAU;IAEvB,+CAA+C;IACtB,SAAS,GAAG,KAAK,CAAC;IAE3C,IAAY,UAAU;QACpB,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC;YAAE,OAAO,CAAC,CAAC;QAC5B,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;IACnE,CAAC;IAED,4EAA4E;IAC5E,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC;QAEhC,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,gBAAgB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACtC,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBACnC,4BAA4B,EAAE,IAAI,CAAC,aAAa;aACjD;YAED,4DACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,aAAa,mBACH,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,mBAC3C,CAAC,mBACD,IAAI,CAAC,GAAG,gBACX,IAAI,CAAC,KAAK,IAAI,SAAS;gBAEnC,4DACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,OAAO,GAAG,EAAE,GAChE,CACE;YACL,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CACxC,6DAAM,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,OAAO,iBAAa,MAAM;gBAC1D,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;oBACf,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { TsSize } from '../../types';\n\ntype TsProgressVariant = 'primary' | 'success' | 'warning' | 'danger' | 'info';\n\n/**\n * @part track - The progress track.\n * @part fill - The progress fill bar.\n * @part label - The value label text.\n */\n@Component({\n  tag: 'ts-progress',\n  styleUrl: 'progress.css',\n  shadow: true,\n})\nexport class TsProgress {\n  /** Current progress value (0 to max). */\n  @Prop() value = 0;\n\n  /** Maximum value. */\n  @Prop() max = 100;\n\n  /** The color variant. */\n  @Prop({ reflect: true }) variant: TsProgressVariant = 'primary';\n\n  /** The size of the progress bar. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Whether the progress is indeterminate. */\n  @Prop({ reflect: true }) indeterminate = false;\n\n  /** Accessible label for the progress bar. */\n  @Prop() label?: string;\n\n  /** Whether to display the percentage value. */\n  @Prop({ reflect: true }) showValue = false;\n\n  private get percentage(): number {\n    if (this.max <= 0) return 0;\n    return Math.min(100, Math.max(0, (this.value / this.max) * 100));\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const percent = this.percentage;\n\n    return (\n      <Host\n        class={{\n          'ts-progress': true,\n          [`ts-progress--${this.variant}`]: true,\n          [`ts-progress--${this.size}`]: true,\n          'ts-progress--indeterminate': this.indeterminate,\n        }}\n      >\n        <div\n          class=\"progress__track\"\n          part=\"track\"\n          role=\"progressbar\"\n          aria-valuenow={this.indeterminate ? undefined : this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          aria-label={this.label || undefined}\n        >\n          <div\n            class=\"progress__fill\"\n            part=\"fill\"\n            style={this.indeterminate ? undefined : { width: `${percent}%` }}\n          />\n        </div>\n        {this.showValue && !this.indeterminate && (\n          <span class=\"progress__label\" part=\"label\" aria-hidden=\"true\">\n            {Math.round(percent)}%\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,132 +0,0 @@
-// Hand-written stories for ts-progress
-export default {
-    title: 'Components/Progress',
-    tags: ['autodocs'],
-    argTypes: {
-        value: {
-            control: { type: 'range', min: 0, max: 100, step: 1 },
-            description: 'Current progress value (0 to max).',
-        },
-        max: {
-            control: 'number',
-            description: 'Maximum value.',
-        },
-        variant: {
-            control: 'select',
-            options: ['primary', 'success', 'warning', 'danger', 'info'],
-            description: 'The color variant.',
-        },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg'],
-            description: 'The size of the progress bar.',
-        },
-        indeterminate: {
-            control: 'boolean',
-            description: 'Whether the progress is indeterminate.',
-        },
-        label: {
-            control: 'text',
-            description: 'Accessible label for the progress bar.',
-        },
-        showValue: {
-            control: 'boolean',
-            description: 'Whether to display the percentage value.',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.value !== undefined)
-        attrs.push(`value="${args.value}"`);
-    if (args.max !== undefined)
-        attrs.push(`max="${args.max}"`);
-    if (args.variant !== undefined)
-        attrs.push(`variant="${args.variant}"`);
-    if (args.size !== undefined)
-        attrs.push(`size="${args.size}"`);
-    if (args.indeterminate)
-        attrs.push('indeterminate');
-    if (args.label !== undefined)
-        attrs.push(`label="${args.label}"`);
-    if (args.showValue)
-        attrs.push('show-value');
-    return `<ts-progress ${attrs.join(' ')}></ts-progress>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        value: 65,
-        max: 100,
-        variant: 'primary',
-        size: 'md',
-        indeterminate: false,
-        label: 'Upload progress',
-        showValue: true,
-    },
-});
-export const Variants = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
-    <div>
-      <p style="margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;">Primary</p>
-      <ts-progress value="65" variant="primary" show-value></ts-progress>
-    </div>
-    <div>
-      <p style="margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;">Success</p>
-      <ts-progress value="100" variant="success" show-value></ts-progress>
-    </div>
-    <div>
-      <p style="margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;">Warning</p>
-      <ts-progress value="75" variant="warning" show-value></ts-progress>
-    </div>
-    <div>
-      <p style="margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;">Danger</p>
-      <ts-progress value="30" variant="danger" show-value></ts-progress>
-    </div>
-    <div>
-      <p style="margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;">Info</p>
-      <ts-progress value="50" variant="info" show-value></ts-progress>
-    </div>
-  </div>
-`;
-export const Sizes = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
-    <div>
-      <p style="margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;">Small</p>
-      <ts-progress value="60" size="sm"></ts-progress>
-    </div>
-    <div>
-      <p style="margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;">Medium (default)</p>
-      <ts-progress value="60" size="md"></ts-progress>
-    </div>
-    <div>
-      <p style="margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;">Large</p>
-      <ts-progress value="60" size="lg"></ts-progress>
-    </div>
-  </div>
-`;
-export const States = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
-    <div>
-      <p style="margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;">Upload progress 65%</p>
-      <ts-progress value="65" label="Upload progress" show-value></ts-progress>
-    </div>
-    <div>
-      <p style="margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;">Profile completion 40%</p>
-      <ts-progress value="40" variant="warning" label="Profile completion" show-value></ts-progress>
-    </div>
-    <div>
-      <p style="margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;">Indeterminate</p>
-      <ts-progress indeterminate label="Loading..."></ts-progress>
-    </div>
-  </div>
-`;
-export const Composition = () => `
-  <div style="max-width: 400px; font-family: sans-serif;">
-    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px;">
-      <h4 style="margin: 0 0 4px;">Uploading files...</h4>
-      <p style="margin: 0 0 12px; font-size: 14px; color: #666;">3 of 5 files uploaded</p>
-      <ts-progress value="60" variant="primary" show-value label="File upload progress"></ts-progress>
-    </div>
-  </div>
-`;
-//# sourceMappingURL=progress.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"progress.stories.js","sourceRoot":"","sources":["../../../src/components/progress/progress.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-progress\n\nexport default {\n  title: 'Components/Progress',\n  tags: ['autodocs'],\n  argTypes: {\n    value: {\n      control: { type: 'range', min: 0, max: 100, step: 1 },\n      description: 'Current progress value (0 to max).',\n    },\n    max: {\n      control: 'number',\n      description: 'Maximum value.',\n    },\n    variant: {\n      control: 'select',\n      options: ['primary', 'success', 'warning', 'danger', 'info'],\n      description: 'The color variant.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The size of the progress bar.',\n    },\n    indeterminate: {\n      control: 'boolean',\n      description: 'Whether the progress is indeterminate.',\n    },\n    label: {\n      control: 'text',\n      description: 'Accessible label for the progress bar.',\n    },\n    showValue: {\n      control: 'boolean',\n      description: 'Whether to display the percentage value.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.value !== undefined) attrs.push(`value=\"${args.value}\"`);\n  if (args.max !== undefined) attrs.push(`max=\"${args.max}\"`);\n  if (args.variant !== undefined) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.size !== undefined) attrs.push(`size=\"${args.size}\"`);\n  if (args.indeterminate) attrs.push('indeterminate');\n  if (args.label !== undefined) attrs.push(`label=\"${args.label}\"`);\n  if (args.showValue) attrs.push('show-value');\n  return `<ts-progress ${attrs.join(' ')}></ts-progress>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    value: 65,\n    max: 100,\n    variant: 'primary',\n    size: 'md',\n    indeterminate: false,\n    label: 'Upload progress',\n    showValue: true,\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 400px;\">\n    <div>\n      <p style=\"margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;\">Primary</p>\n      <ts-progress value=\"65\" variant=\"primary\" show-value></ts-progress>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;\">Success</p>\n      <ts-progress value=\"100\" variant=\"success\" show-value></ts-progress>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;\">Warning</p>\n      <ts-progress value=\"75\" variant=\"warning\" show-value></ts-progress>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;\">Danger</p>\n      <ts-progress value=\"30\" variant=\"danger\" show-value></ts-progress>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;\">Info</p>\n      <ts-progress value=\"50\" variant=\"info\" show-value></ts-progress>\n    </div>\n  </div>\n`;\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 400px;\">\n    <div>\n      <p style=\"margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;\">Small</p>\n      <ts-progress value=\"60\" size=\"sm\"></ts-progress>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;\">Medium (default)</p>\n      <ts-progress value=\"60\" size=\"md\"></ts-progress>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;\">Large</p>\n      <ts-progress value=\"60\" size=\"lg\"></ts-progress>\n    </div>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 400px;\">\n    <div>\n      <p style=\"margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;\">Upload progress 65%</p>\n      <ts-progress value=\"65\" label=\"Upload progress\" show-value></ts-progress>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;\">Profile completion 40%</p>\n      <ts-progress value=\"40\" variant=\"warning\" label=\"Profile completion\" show-value></ts-progress>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 4px; font-family: sans-serif; font-size: 14px; color: #666;\">Indeterminate</p>\n      <ts-progress indeterminate label=\"Loading...\"></ts-progress>\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: 20px;\">\n      <h4 style=\"margin: 0 0 4px;\">Uploading files...</h4>\n      <p style=\"margin: 0 0 12px; font-size: 14px; color: #666;\">3 of 5 files uploaded</p>\n      <ts-progress value=\"60\" variant=\"primary\" show-value label=\"File upload progress\"></ts-progress>\n    </div>\n  </div>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGjF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;;;;;GAMG;AAMH,MAAM,OAAO,OAAO;IACP,MAAM,CAAe;IAExB,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IAEzC,oCAAoC;IACI,OAAO,GAAG,KAAK,CAAC;IAExD,qCAAqC;IACZ,QAAQ,GAAG,KAAK,CAAC;IAE1C,4CAA4C;IACpC,KAAK,GAAG,EAAE,CAAC;IAEnB,0CAA0C;IAClC,IAAI,CAAU;IAEtB,oDAAoD;IAC5C,KAAK,CAAU;IAEvB,sBAAsB;IACG,IAAI,GAAuB,IAAI,CAAC;IAEzD,0CAA0C;IACR,QAAQ,CAA6C;IAEvF,yCAAyC;IAEzC,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACpC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACnE,CAAC;IACH,CAAC;IAEO,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC,CAAC;IAEM,aAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;QACrD,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACtB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;IACH,CAAC,CAAC;IAEF,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,CAAC,aAAa,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBAChC,mBAAmB,EAAE,IAAI,CAAC,OAAO;gBACjC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;aACpC;YAED,4DACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,kBACE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC9B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa;gBAE7B,4DAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS;oBACxC,4DAAK,KAAK,EAAC,YAAY,GAAG,CACtB;gBAEN,8DAAO,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,QAAQ,IACjE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,eAAQ,CAC7B,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsCheckboxChangeEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot - Default slot for the radio label.\n *\n * @part base - The radio container.\n * @part control - The visual radio circle.\n * @part label - The label wrapper.\n */\n@Component({\n  tag: 'ts-radio',\n  styleUrl: 'radio.css',\n  shadow: true,\n})\nexport class TsRadio {\n  @Element() hostEl!: HTMLElement;\n\n  private inputId = generateId('ts-radio');\n\n  /** Whether the radio is checked. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Renders the radio as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The value associated with this radio. */\n  @Prop() value = '';\n\n  /** Name attribute for form submission. */\n  @Prop() name?: string;\n\n  /** Label text. If omitted, use the default slot. */\n  @Prop() label?: string;\n\n  /** The radio size. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Emitted when the radio is selected. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsCheckboxChangeEventDetail>;\n\n  /** Programmatically select the radio. */\n  @Method()\n  async select(): Promise<void> {\n    if (!this.disabled && !this.checked) {\n      this.checked = true;\n      this.tsChange.emit({ checked: this.checked, value: this.value });\n    }\n  }\n\n  private handleClick = (): void => {\n    this.select();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      this.select();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-radio': true,\n          [`ts-radio--${this.size}`]: true,\n          'ts-radio--checked': this.checked,\n          'ts-radio--disabled': this.disabled,\n        }}\n      >\n        <div\n          class=\"radio__base\"\n          part=\"base\"\n          role=\"radio\"\n          aria-checked={this.checked ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n        >\n          <div class=\"radio__control\" part=\"control\">\n            <div class=\"radio__dot\" />\n          </div>\n\n          <label class=\"radio__label\" part=\"label\" id={`${this.inputId}-label`}>\n            {this.label ? this.label : <slot />}\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,77 +0,0 @@
-// Hand-written stories for ts-radio
-export default {
-    title: 'Components/Radio',
-    tags: ['autodocs'],
-    argTypes: {
-        checked: { control: 'boolean', description: 'Whether the radio is checked.' },
-        disabled: { control: 'boolean', description: 'Renders the radio as disabled.' },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg'],
-            description: 'The radio size.',
-        },
-        label: { control: 'text', description: 'Label text. If omitted, use the default slot.' },
-        value: { control: 'text', description: 'The value associated with this radio.' },
-        name: { control: 'text', description: 'Name attribute for form submission.' },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.checked)
-        attrs.push('checked');
-    if (args.disabled)
-        attrs.push('disabled');
-    if (args.size !== undefined && args.size !== null)
-        attrs.push(`size="${args.size}"`);
-    if (args.label !== undefined && args.label !== null)
-        attrs.push(`label="${args.label}"`);
-    if (args.value !== undefined && args.value !== null)
-        attrs.push(`value="${args.value}"`);
-    if (args.name !== undefined && args.name !== null)
-        attrs.push(`name="${args.name}"`);
-    return `<ts-radio ${attrs.join(' ')}></ts-radio>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        checked: false,
-        disabled: false,
-        size: 'md',
-        label: 'Standard shipping',
-        value: 'standard',
-        name: 'shipping',
-    },
-});
-export const Sizes = () => `
-  <ts-stack gap="2">
-    <ts-radio size="sm" label="Small radio" name="size-demo" value="sm"></ts-radio>
-    <ts-radio size="md" label="Medium radio" name="size-demo" value="md"></ts-radio>
-    <ts-radio size="lg" label="Large radio" name="size-demo" value="lg"></ts-radio>
-  </ts-stack>
-`;
-export const States = () => `
-  <ts-stack gap="2">
-    <ts-radio label="Unchecked" name="states-demo" value="unchecked"></ts-radio>
-    <ts-radio checked label="Checked" name="states-checked" value="checked"></ts-radio>
-    <ts-radio disabled label="Disabled" name="states-disabled" value="disabled"></ts-radio>
-    <ts-radio disabled checked label="Disabled checked" name="states-disabled-checked" value="disabled-checked"></ts-radio>
-  </ts-stack>
-`;
-export const ShippingOptions = () => `
-  <ts-stack gap="2" style="max-width: 400px;">
-    <h3 style="margin: 0; font-family: sans-serif;">Select Shipping Method</h3>
-    <ts-radio name="shipping" value="standard" checked label="Standard shipping (5-7 business days)"></ts-radio>
-    <ts-radio name="shipping" value="express" label="Express shipping (2-3 business days)"></ts-radio>
-    <ts-radio name="shipping" value="overnight" label="Overnight shipping (next business day)"></ts-radio>
-    <ts-radio name="shipping" value="pickup" disabled label="In-store pickup (unavailable in your area)"></ts-radio>
-  </ts-stack>
-`;
-export const PaymentMethod = () => `
-  <ts-stack gap="2" style="max-width: 400px;">
-    <h3 style="margin: 0; font-family: sans-serif;">Payment Method</h3>
-    <ts-radio name="payment" value="credit" checked label="Credit card"></ts-radio>
-    <ts-radio name="payment" value="debit" label="Debit card"></ts-radio>
-    <ts-radio name="payment" value="paypal" label="PayPal"></ts-radio>
-    <ts-radio name="payment" value="bank" label="Bank transfer"></ts-radio>
-  </ts-stack>
-`;
-//# sourceMappingURL=radio.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"radio.stories.js","sourceRoot":"","sources":["../../../src/components/radio/radio.stories.ts"],"names":[],"mappings":"AAAA,oCAAoC;AAEpC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,+BAA+B,EAAE;QAC7E,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,gCAAgC,EAAE;QAC/E,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,WAAW,EAAE,iBAAiB;SAC/B;QACD,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,+CAA+C,EAAE;QACxF,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,uCAAuC,EAAE;QAChF,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,qCAAqC,EAAE;KAC9E;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxC,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,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;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACzF,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,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,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,mBAAmB;QAC1B,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,UAAU;KACjB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;CAMlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;CAOnC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQ5C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQ1C,CAAC","sourcesContent":["// Hand-written stories for ts-radio\n\nexport default {\n  title: 'Components/Radio',\n  tags: ['autodocs'],\n  argTypes: {\n    checked: { control: 'boolean', description: 'Whether the radio is checked.' },\n    disabled: { control: 'boolean', description: 'Renders the radio as disabled.' },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The radio size.',\n    },\n    label: { control: 'text', description: 'Label text. If omitted, use the default slot.' },\n    value: { control: 'text', description: 'The value associated with this radio.' },\n    name: { control: 'text', description: 'Name attribute for form submission.' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.checked) attrs.push('checked');\n  if (args.disabled) attrs.push('disabled');\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.label !== undefined && args.label !== null) attrs.push(`label=\"${args.label}\"`);\n  if (args.value !== undefined && args.value !== null) attrs.push(`value=\"${args.value}\"`);\n  if (args.name !== undefined && args.name !== null) attrs.push(`name=\"${args.name}\"`);\n  return `<ts-radio ${attrs.join(' ')}></ts-radio>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    checked: false,\n    disabled: false,\n    size: 'md',\n    label: 'Standard shipping',\n    value: 'standard',\n    name: 'shipping',\n  },\n});\n\nexport const Sizes = (): string => `\n  <ts-stack gap=\"2\">\n    <ts-radio size=\"sm\" label=\"Small radio\" name=\"size-demo\" value=\"sm\"></ts-radio>\n    <ts-radio size=\"md\" label=\"Medium radio\" name=\"size-demo\" value=\"md\"></ts-radio>\n    <ts-radio size=\"lg\" label=\"Large radio\" name=\"size-demo\" value=\"lg\"></ts-radio>\n  </ts-stack>\n`;\n\nexport const States = (): string => `\n  <ts-stack gap=\"2\">\n    <ts-radio label=\"Unchecked\" name=\"states-demo\" value=\"unchecked\"></ts-radio>\n    <ts-radio checked label=\"Checked\" name=\"states-checked\" value=\"checked\"></ts-radio>\n    <ts-radio disabled label=\"Disabled\" name=\"states-disabled\" value=\"disabled\"></ts-radio>\n    <ts-radio disabled checked label=\"Disabled checked\" name=\"states-disabled-checked\" value=\"disabled-checked\"></ts-radio>\n  </ts-stack>\n`;\n\nexport const ShippingOptions = (): string => `\n  <ts-stack gap=\"2\" style=\"max-width: 400px;\">\n    <h3 style=\"margin: 0; font-family: sans-serif;\">Select Shipping Method</h3>\n    <ts-radio name=\"shipping\" value=\"standard\" checked label=\"Standard shipping (5-7 business days)\"></ts-radio>\n    <ts-radio name=\"shipping\" value=\"express\" label=\"Express shipping (2-3 business days)\"></ts-radio>\n    <ts-radio name=\"shipping\" value=\"overnight\" label=\"Overnight shipping (next business day)\"></ts-radio>\n    <ts-radio name=\"shipping\" value=\"pickup\" disabled label=\"In-store pickup (unavailable in your area)\"></ts-radio>\n  </ts-stack>\n`;\n\nexport const PaymentMethod = (): string => `\n  <ts-stack gap=\"2\" style=\"max-width: 400px;\">\n    <h3 style=\"margin: 0; font-family: sans-serif;\">Payment Method</h3>\n    <ts-radio name=\"payment\" value=\"credit\" checked label=\"Credit card\"></ts-radio>\n    <ts-radio name=\"payment\" value=\"debit\" label=\"Debit card\"></ts-radio>\n    <ts-radio name=\"payment\" value=\"paypal\" label=\"PayPal\"></ts-radio>\n    <ts-radio name=\"payment\" value=\"bank\" label=\"Bank transfer\"></ts-radio>\n  </ts-stack>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../src/components/row/row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,KAAK;IAChB,8DAA8D;IACrC,GAAG,GAAW,GAAG,CAAC;IAE3C,qCAAqC;IACZ,KAAK,GAAwD,QAAQ,CAAC;IAE/F,oCAAoC;IACX,OAAO,GAAiE,OAAO,CAAC;IAEzG,kDAAkD;IACzB,IAAI,GAAY,IAAI,CAAC;IAE9C,iCAAiC;IACR,OAAO,GAAY,KAAK,CAAC;IAElD,qDAAqD;IACL,OAAO,GAAiC,OAAO,CAAC;IAEhG,4EAA4E;IAC5E,MAAM;QACJ,MAAM,QAAQ,GAA2B;YACvC,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,UAAU;SACrB,CAAC;QAEF,MAAM,UAAU,GAA2B;YACzC,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,eAAe;YACxB,MAAM,EAAE,cAAc;YACtB,MAAM,EAAE,cAAc;SACvB,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,QAAQ;gBAC5C,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,YAAY;gBACxD,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;aACxC;YAED,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for row content.\n */\n@Component({\n  tag: 'ts-row',\n  styleUrl: 'row.css',\n  shadow: true,\n})\nexport class TsRow {\n  /** Spacing token number controlling the gap between items. */\n  @Prop({ reflect: true }) gap: string = '2';\n\n  /** Cross-axis alignment of items. */\n  @Prop({ reflect: true }) align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'center';\n\n  /** Main-axis alignment of items. */\n  @Prop({ reflect: true }) justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' = 'start';\n\n  /** Whether items should wrap to the next line. */\n  @Prop({ reflect: true }) wrap: boolean = true;\n\n  /** Reverse the row direction. */\n  @Prop({ reflect: true }) reverse: boolean = false;\n\n  /** Breakpoint at which the row stacks vertically. */\n  @Prop({ reflect: true, attribute: 'stack-at' }) stackAt: 'sm' | 'md' | 'lg' | 'never' = 'never';\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      baseline: 'baseline',\n    };\n\n    const justifyMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      between: 'space-between',\n      around: 'space-around',\n      evenly: 'space-evenly',\n    };\n\n    return (\n      <Host\n        style={{\n          gap: `var(--ts-spacing-${this.gap})`,\n          alignItems: alignMap[this.align] || 'center',\n          justifyContent: justifyMap[this.justify] || 'flex-start',\n          flexWrap: this.wrap ? 'wrap' : 'nowrap',\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,172 +0,0 @@
-// Hand-written stories for ts-row
-export default {
-    title: 'Layout/Row',
-    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', 'baseline'],
-            description: 'Cross-axis alignment of items.',
-        },
-        justify: {
-            control: 'select',
-            options: ['start', 'center', 'end', 'between', 'around', 'evenly'],
-            description: 'Main-axis alignment of items.',
-        },
-        wrap: {
-            control: 'boolean',
-            description: 'Whether items should wrap to the next line.',
-        },
-        reverse: {
-            control: 'boolean',
-            description: 'Reverse the row direction.',
-        },
-        stackAt: {
-            control: 'select',
-            options: ['sm', 'md', 'lg', 'never'],
-            description: 'Breakpoint at which the row stacks vertically.',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.gap !== undefined)
-        attrs.push(`gap="${args.gap}"`);
-    if (args.align !== undefined)
-        attrs.push(`align="${args.align}"`);
-    if (args.justify !== undefined)
-        attrs.push(`justify="${args.justify}"`);
-    if (args.wrap === false)
-        attrs.push(`wrap="false"`);
-    if (args.reverse)
-        attrs.push(`reverse`);
-    if (args.stackAt !== undefined && args.stackAt !== 'never')
-        attrs.push(`stack-at="${args.stackAt}"`);
-    return `
-    <ts-row ${attrs.join(' ')}>
-      <ts-button variant="primary">Save</ts-button>
-      <ts-button variant="neutral" appearance="outline">Cancel</ts-button>
-      <ts-button variant="danger" appearance="ghost">Delete</ts-button>
-    </ts-row>
-  `;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        gap: '2',
-        align: 'center',
-        justify: 'start',
-        wrap: true,
-        reverse: false,
-        stackAt: 'never',
-    },
-});
-export const Justify = () => `
-  <div style="display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;">
-    <div>
-      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">justify="start"</p>
-      <ts-row justify="start" gap="2" style="border: 1px dashed #cbd5e1; padding: 8px;">
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">A</div>
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">B</div>
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">C</div>
-      </ts-row>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">justify="center"</p>
-      <ts-row justify="center" gap="2" style="border: 1px dashed #cbd5e1; padding: 8px;">
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">A</div>
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">B</div>
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">C</div>
-      </ts-row>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">justify="end"</p>
-      <ts-row justify="end" gap="2" style="border: 1px dashed #cbd5e1; padding: 8px;">
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">A</div>
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">B</div>
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">C</div>
-      </ts-row>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">justify="between"</p>
-      <ts-row justify="between" gap="2" style="border: 1px dashed #cbd5e1; padding: 8px;">
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">A</div>
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">B</div>
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">C</div>
-      </ts-row>
-    </div>
-  </div>
-`;
-export const Alignment = () => `
-  <div style="display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;">
-    <div>
-      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">align="start"</p>
-      <ts-row align="start" gap="2" style="border: 1px dashed #cbd5e1; padding: 8px; min-height: 80px;">
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Short</div>
-        <div style="padding: 16px; background: #dbeafe; border-radius: 4px;">Tall item</div>
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Short</div>
-      </ts-row>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">align="center"</p>
-      <ts-row align="center" gap="2" style="border: 1px dashed #cbd5e1; padding: 8px; min-height: 80px;">
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Short</div>
-        <div style="padding: 16px; background: #dbeafe; border-radius: 4px;">Tall item</div>
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Short</div>
-      </ts-row>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">align="stretch"</p>
-      <ts-row align="stretch" gap="2" style="border: 1px dashed #cbd5e1; padding: 8px; min-height: 80px;">
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Short</div>
-        <div style="padding: 16px; background: #dbeafe; border-radius: 4px;">Tall item</div>
-        <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Short</div>
-      </ts-row>
-    </div>
-  </div>
-`;
-export const Wrap = () => `
-  <div style="font-family: sans-serif;">
-    <p style="margin: 0 0 8px; font-size: 14px; color: #666;">Resize browser to see wrapping behavior</p>
-    <ts-row gap="2" style="border: 1px dashed #cbd5e1; padding: 8px; max-width: 300px;">
-      <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Item 1</div>
-      <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Item 2</div>
-      <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Item 3</div>
-      <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Item 4</div>
-      <div style="padding: 8px 16px; background: #dbeafe; border-radius: 4px;">Item 5</div>
-    </ts-row>
-  </div>
-`;
-export const StackAt = () => `
-  <div style="font-family: sans-serif;">
-    <p style="margin: 0 0 8px; font-size: 14px; color: #666;">Resize the browser to see stacking at md breakpoint (767px)</p>
-    <ts-row stack-at="md" gap="3" style="border: 1px dashed #cbd5e1; padding: 8px;">
-      <div style="padding: 12px 24px; background: #dbeafe; border-radius: 4px;">Navigation</div>
-      <div style="padding: 12px 24px; background: #dbeafe; border-radius: 4px;">Content</div>
-      <div style="padding: 12px 24px; background: #dbeafe; border-radius: 4px;">Sidebar</div>
-    </ts-row>
-  </div>
-`;
-export const Composition = () => `
-  <div style="font-family: sans-serif;">
-    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px;">
-      <ts-row justify="between" align="center">
-        <div style="font-weight: 600; font-size: 18px;">My App</div>
-        <ts-row gap="3">
-          <a href="#" style="text-decoration: none; color: #475569;">Home</a>
-          <a href="#" style="text-decoration: none; color: #475569;">About</a>
-          <a href="#" style="text-decoration: none; color: #475569;">Contact</a>
-        </ts-row>
-        <ts-row gap="2">
-          <ts-button variant="neutral" appearance="ghost" size="sm">Sign in</ts-button>
-          <ts-button variant="primary" size="sm">Sign up</ts-button>
-        </ts-row>
-      </ts-row>
-    </div>
-  </div>
-`;
-//# sourceMappingURL=row.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"row.stories.js","sourceRoot":"","sources":["../../../src/components/row/row.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-row\n\nexport default {\n  title: 'Layout/Row',\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', 'baseline'],\n      description: 'Cross-axis alignment of items.',\n    },\n    justify: {\n      control: 'select',\n      options: ['start', 'center', 'end', 'between', 'around', 'evenly'],\n      description: 'Main-axis alignment of items.',\n    },\n    wrap: {\n      control: 'boolean',\n      description: 'Whether items should wrap to the next line.',\n    },\n    reverse: {\n      control: 'boolean',\n      description: 'Reverse the row direction.',\n    },\n    stackAt: {\n      control: 'select',\n      options: ['sm', 'md', 'lg', 'never'],\n      description: 'Breakpoint at which the row stacks vertically.',\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  if (args.justify !== undefined) attrs.push(`justify=\"${args.justify}\"`);\n  if (args.wrap === false) attrs.push(`wrap=\"false\"`);\n  if (args.reverse) attrs.push(`reverse`);\n  if (args.stackAt !== undefined && args.stackAt !== 'never') attrs.push(`stack-at=\"${args.stackAt}\"`);\n  return `\n    <ts-row ${attrs.join(' ')}>\n      <ts-button variant=\"primary\">Save</ts-button>\n      <ts-button variant=\"neutral\" appearance=\"outline\">Cancel</ts-button>\n      <ts-button variant=\"danger\" appearance=\"ghost\">Delete</ts-button>\n    </ts-row>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    gap: '2',\n    align: 'center',\n    justify: 'start',\n    wrap: true,\n    reverse: false,\n    stackAt: 'never',\n  },\n});\n\nexport const Justify = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">justify=\"start\"</p>\n      <ts-row justify=\"start\" gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px;\">\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">A</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">B</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">C</div>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">justify=\"center\"</p>\n      <ts-row justify=\"center\" gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px;\">\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">A</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">B</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">C</div>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">justify=\"end\"</p>\n      <ts-row justify=\"end\" gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px;\">\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">A</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">B</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">C</div>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">justify=\"between\"</p>\n      <ts-row justify=\"between\" gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px;\">\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">A</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">B</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">C</div>\n      </ts-row>\n    </div>\n  </div>\n`;\n\nexport const Alignment = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">align=\"start\"</p>\n      <ts-row align=\"start\" gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px; min-height: 80px;\">\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Short</div>\n        <div style=\"padding: 16px; background: #dbeafe; border-radius: 4px;\">Tall item</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Short</div>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">align=\"center\"</p>\n      <ts-row align=\"center\" gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px; min-height: 80px;\">\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Short</div>\n        <div style=\"padding: 16px; background: #dbeafe; border-radius: 4px;\">Tall item</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Short</div>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">align=\"stretch\"</p>\n      <ts-row align=\"stretch\" gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px; min-height: 80px;\">\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Short</div>\n        <div style=\"padding: 16px; background: #dbeafe; border-radius: 4px;\">Tall item</div>\n        <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Short</div>\n      </ts-row>\n    </div>\n  </div>\n`;\n\nexport const Wrap = (): string => `\n  <div style=\"font-family: sans-serif;\">\n    <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">Resize browser to see wrapping behavior</p>\n    <ts-row gap=\"2\" style=\"border: 1px dashed #cbd5e1; padding: 8px; max-width: 300px;\">\n      <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Item 1</div>\n      <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Item 2</div>\n      <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Item 3</div>\n      <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Item 4</div>\n      <div style=\"padding: 8px 16px; background: #dbeafe; border-radius: 4px;\">Item 5</div>\n    </ts-row>\n  </div>\n`;\n\nexport const StackAt = (): string => `\n  <div style=\"font-family: sans-serif;\">\n    <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">Resize the browser to see stacking at md breakpoint (767px)</p>\n    <ts-row stack-at=\"md\" gap=\"3\" style=\"border: 1px dashed #cbd5e1; padding: 8px;\">\n      <div style=\"padding: 12px 24px; background: #dbeafe; border-radius: 4px;\">Navigation</div>\n      <div style=\"padding: 12px 24px; background: #dbeafe; border-radius: 4px;\">Content</div>\n      <div style=\"padding: 12px 24px; background: #dbeafe; border-radius: 4px;\">Sidebar</div>\n    </ts-row>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"font-family: sans-serif;\">\n    <div style=\"border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px;\">\n      <ts-row justify=\"between\" align=\"center\">\n        <div style=\"font-weight: 600; font-size: 18px;\">My App</div>\n        <ts-row gap=\"3\">\n          <a href=\"#\" style=\"text-decoration: none; color: #475569;\">Home</a>\n          <a href=\"#\" style=\"text-decoration: none; color: #475569;\">About</a>\n          <a href=\"#\" style=\"text-decoration: none; color: #475569;\">Contact</a>\n        </ts-row>\n        <ts-row gap=\"2\">\n          <ts-button variant=\"neutral\" appearance=\"ghost\" size=\"sm\">Sign in</ts-button>\n          <ts-button variant=\"primary\" size=\"sm\">Sign up</ts-button>\n        </ts-row>\n      </ts-row>\n    </div>\n  </div>\n`;\n"]}