@tessera-ui/core 0.4.1 → 0.5.0

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

@@ -1,219 +0,0 @@
-// Hand-written stories for ts-button
-export default {
-    title: 'Components/Button',
-    tags: ['autodocs'],
-    argTypes: {
-        variant: {
-            control: 'select',
-            options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],
-            description: 'The button\'s visual variant.',
-        },
-        appearance: {
-            control: 'select',
-            options: ['solid', 'outline', 'ghost', 'link'],
-            description: 'The button\'s visual weight / appearance.',
-        },
-        size: {
-            control: 'select',
-            options: ['xs', 'sm', 'md', 'lg', 'xl'],
-            description: 'The button\'s size.',
-        },
-        disabled: { control: 'boolean', description: 'Renders the button in a disabled state.' },
-        loading: { control: 'boolean', description: 'Renders a loading spinner and disables the button.' },
-        block: { control: 'boolean', description: 'Makes the button take the full width of its container.' },
-        type: {
-            control: 'select',
-            options: ['button', 'submit', 'reset'],
-            description: 'The type attribute for the native button.',
-        },
-        href: { control: 'text', description: 'An optional href — renders an anchor instead of a button.' },
-        target: {
-            control: 'select',
-            options: ['_blank', '_self', '_parent', '_top'],
-            description: 'Target attribute when href is set.',
-        },
-        slotContent: { control: 'text', description: 'Button label text' },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.variant !== undefined && args.variant !== null)
-        attrs.push(`variant="${args.variant}"`);
-    if (args.appearance !== undefined && args.appearance !== null)
-        attrs.push(`appearance="${args.appearance}"`);
-    if (args.size !== undefined && args.size !== null)
-        attrs.push(`size="${args.size}"`);
-    if (args.disabled)
-        attrs.push('disabled');
-    if (args.loading)
-        attrs.push('loading');
-    if (args.block)
-        attrs.push('block');
-    if (args.type !== undefined && args.type !== null)
-        attrs.push(`type="${args.type}"`);
-    if (args.href !== undefined && args.href !== null && args.href !== '')
-        attrs.push(`href="${args.href}"`);
-    if (args.target !== undefined && args.target !== null)
-        attrs.push(`target="${args.target}"`);
-    return `<ts-button ${attrs.join(' ')}>${args.slotContent || 'Save Changes'}</ts-button>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        variant: 'primary',
-        appearance: 'solid',
-        size: 'md',
-        disabled: false,
-        loading: false,
-        block: false,
-        type: 'button',
-        slotContent: 'Save Changes',
-    },
-});
-export const Variants = () => `
-  <ts-row gap="2">
-    <ts-button variant="primary">Primary</ts-button>
-    <ts-button variant="secondary">Secondary</ts-button>
-    <ts-button variant="success">Publish Now</ts-button>
-    <ts-button variant="warning">Proceed Anyway</ts-button>
-    <ts-button variant="danger">Delete Account</ts-button>
-    <ts-button variant="info">Learn More</ts-button>
-    <ts-button variant="neutral">Cancel</ts-button>
-  </ts-row>
-`;
-export const Sizes = () => `
-  <ts-row gap="2">
-    <ts-button size="xs">Extra Small</ts-button>
-    <ts-button size="sm">Small</ts-button>
-    <ts-button size="md">Medium</ts-button>
-    <ts-button size="lg">Large</ts-button>
-    <ts-button size="xl">Extra Large</ts-button>
-  </ts-row>
-`;
-export const Appearances = () => `
-  <ts-stack gap="4">
-    <div>
-      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Solid</p>
-      <ts-row gap="2">
-        <ts-button appearance="solid" variant="primary">Save Changes</ts-button>
-        <ts-button appearance="solid" variant="danger">Delete</ts-button>
-        <ts-button appearance="solid" variant="neutral">Cancel</ts-button>
-      </ts-row>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Outline</p>
-      <ts-row gap="2">
-        <ts-button appearance="outline" variant="primary">Edit Profile</ts-button>
-        <ts-button appearance="outline" variant="danger">Remove Item</ts-button>
-        <ts-button appearance="outline" variant="neutral">View Details</ts-button>
-      </ts-row>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Ghost</p>
-      <ts-row gap="2">
-        <ts-button appearance="ghost" variant="primary">Settings</ts-button>
-        <ts-button appearance="ghost" variant="neutral">More Options</ts-button>
-      </ts-row>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Link</p>
-      <ts-row gap="2">
-        <ts-button appearance="link" variant="primary">Forgot Password?</ts-button>
-        <ts-button appearance="link" variant="primary">View Documentation</ts-button>
-      </ts-row>
-    </div>
-  </ts-stack>
-`;
-export const States = () => `
-  <ts-stack gap="3">
-    <ts-row gap="2">
-      <ts-button>Default</ts-button>
-      <ts-button disabled>Disabled</ts-button>
-      <ts-button loading>Saving...</ts-button>
-      <ts-button loading variant="danger">Deleting...</ts-button>
-    </ts-row>
-    <div>
-      <ts-button block>Full Width Submit</ts-button>
-    </div>
-    <div>
-      <ts-button block loading>Processing Payment...</ts-button>
-    </div>
-  </ts-stack>
-`;
-export const WithIcons = () => `
-  <ts-row gap="2">
-    <ts-button variant="primary">
-      <ts-icon slot="prefix" name="plus" size="sm"></ts-icon>
-      New Project
-    </ts-button>
-    <ts-button variant="danger">
-      <ts-icon slot="prefix" name="trash-2" size="sm"></ts-icon>
-      Delete
-    </ts-button>
-    <ts-button appearance="outline" variant="neutral">
-      <ts-icon slot="prefix" name="download" size="sm"></ts-icon>
-      Export CSV
-    </ts-button>
-    <ts-button variant="success">
-      <ts-icon slot="prefix" name="check" size="sm"></ts-icon>
-      Approve
-    </ts-button>
-    <ts-button appearance="ghost" variant="primary">
-      Settings
-      <ts-icon slot="suffix" name="chevron-right" size="sm"></ts-icon>
-    </ts-button>
-    <ts-button appearance="outline" variant="primary">
-      <ts-icon slot="prefix" name="log-in" size="sm"></ts-icon>
-      Sign In
-    </ts-button>
-  </ts-row>
-`;
-export const AsLink = () => `
-  <ts-row gap="2">
-    <ts-button href="https://example.com" target="_blank">
-      Visit Website
-      <ts-icon slot="suffix" name="external-link" size="sm"></ts-icon>
-    </ts-button>
-    <ts-button href="https://example.com/docs" appearance="outline" variant="neutral">
-      <ts-icon slot="prefix" name="book-open" size="sm"></ts-icon>
-      Documentation
-    </ts-button>
-  </ts-row>
-`;
-export const Composition = () => `
-  <ts-stack gap="4" style="max-width: 400px;">
-    <ts-row gap="2" justify="end">
-      <ts-button appearance="outline" variant="neutral">Cancel</ts-button>
-      <ts-button variant="primary">
-        <ts-icon slot="prefix" name="save" size="sm"></ts-icon>
-        Save Changes
-      </ts-button>
-    </ts-row>
-
-    <ts-card bordered>
-      <span slot="header"><h3 style="margin: 0;">Danger Zone</h3></span>
-      <p style="margin: 0; color: var(--ts-color-text-secondary);">Once you delete your account, there is no going back. Please be certain.</p>
-      <span slot="footer">
-        <ts-row gap="2" justify="end">
-          <ts-button variant="danger" appearance="outline">
-            <ts-icon slot="prefix" name="trash-2" size="sm"></ts-icon>
-            Delete Account
-          </ts-button>
-        </ts-row>
-      </span>
-    </ts-card>
-
-    <ts-row gap="1">
-      <ts-button size="sm" appearance="ghost" variant="neutral">
-        <ts-icon slot="prefix" name="chevron-left" size="sm"></ts-icon>
-        Back
-      </ts-button>
-      <ts-spacer></ts-spacer>
-      <ts-button size="sm" appearance="outline" variant="neutral">Skip</ts-button>
-      <ts-button size="sm" variant="primary">
-        Continue
-        <ts-icon slot="suffix" name="chevron-right" size="sm"></ts-icon>
-      </ts-button>
-    </ts-row>
-  </ts-stack>
-`;
-//# sourceMappingURL=button.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-button\n\nexport default {\n  title: 'Components/Button',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],\n      description: 'The button\\'s visual variant.',\n    },\n    appearance: {\n      control: 'select',\n      options: ['solid', 'outline', 'ghost', 'link'],\n      description: 'The button\\'s visual weight / appearance.',\n    },\n    size: {\n      control: 'select',\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\n      description: 'The button\\'s size.',\n    },\n    disabled: { control: 'boolean', description: 'Renders the button in a disabled state.' },\n    loading: { control: 'boolean', description: 'Renders a loading spinner and disables the button.' },\n    block: { control: 'boolean', description: 'Makes the button take the full width of its container.' },\n    type: {\n      control: 'select',\n      options: ['button', 'submit', 'reset'],\n      description: 'The type attribute for the native button.',\n    },\n    href: { control: 'text', description: 'An optional href — renders an anchor instead of a button.' },\n    target: {\n      control: 'select',\n      options: ['_blank', '_self', '_parent', '_top'],\n      description: 'Target attribute when href is set.',\n    },\n    slotContent: { control: 'text', description: 'Button label text' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.variant !== undefined && args.variant !== null) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.appearance !== undefined && args.appearance !== null) attrs.push(`appearance=\"${args.appearance}\"`);\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.disabled) attrs.push('disabled');\n  if (args.loading) attrs.push('loading');\n  if (args.block) attrs.push('block');\n  if (args.type !== undefined && args.type !== null) attrs.push(`type=\"${args.type}\"`);\n  if (args.href !== undefined && args.href !== null && args.href !== '') attrs.push(`href=\"${args.href}\"`);\n  if (args.target !== undefined && args.target !== null) attrs.push(`target=\"${args.target}\"`);\n  return `<ts-button ${attrs.join(' ')}>${args.slotContent || 'Save Changes'}</ts-button>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    variant: 'primary',\n    appearance: 'solid',\n    size: 'md',\n    disabled: false,\n    loading: false,\n    block: false,\n    type: 'button',\n    slotContent: 'Save Changes',\n  },\n});\n\nexport const Variants = (): string => `\n  <ts-row gap=\"2\">\n    <ts-button variant=\"primary\">Primary</ts-button>\n    <ts-button variant=\"secondary\">Secondary</ts-button>\n    <ts-button variant=\"success\">Publish Now</ts-button>\n    <ts-button variant=\"warning\">Proceed Anyway</ts-button>\n    <ts-button variant=\"danger\">Delete Account</ts-button>\n    <ts-button variant=\"info\">Learn More</ts-button>\n    <ts-button variant=\"neutral\">Cancel</ts-button>\n  </ts-row>\n`;\n\nexport const Sizes = (): string => `\n  <ts-row gap=\"2\">\n    <ts-button size=\"xs\">Extra Small</ts-button>\n    <ts-button size=\"sm\">Small</ts-button>\n    <ts-button size=\"md\">Medium</ts-button>\n    <ts-button size=\"lg\">Large</ts-button>\n    <ts-button size=\"xl\">Extra Large</ts-button>\n  </ts-row>\n`;\n\nexport const Appearances = (): string => `\n  <ts-stack gap=\"4\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Solid</p>\n      <ts-row gap=\"2\">\n        <ts-button appearance=\"solid\" variant=\"primary\">Save Changes</ts-button>\n        <ts-button appearance=\"solid\" variant=\"danger\">Delete</ts-button>\n        <ts-button appearance=\"solid\" variant=\"neutral\">Cancel</ts-button>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Outline</p>\n      <ts-row gap=\"2\">\n        <ts-button appearance=\"outline\" variant=\"primary\">Edit Profile</ts-button>\n        <ts-button appearance=\"outline\" variant=\"danger\">Remove Item</ts-button>\n        <ts-button appearance=\"outline\" variant=\"neutral\">View Details</ts-button>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Ghost</p>\n      <ts-row gap=\"2\">\n        <ts-button appearance=\"ghost\" variant=\"primary\">Settings</ts-button>\n        <ts-button appearance=\"ghost\" variant=\"neutral\">More Options</ts-button>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Link</p>\n      <ts-row gap=\"2\">\n        <ts-button appearance=\"link\" variant=\"primary\">Forgot Password?</ts-button>\n        <ts-button appearance=\"link\" variant=\"primary\">View Documentation</ts-button>\n      </ts-row>\n    </div>\n  </ts-stack>\n`;\n\nexport const States = (): string => `\n  <ts-stack gap=\"3\">\n    <ts-row gap=\"2\">\n      <ts-button>Default</ts-button>\n      <ts-button disabled>Disabled</ts-button>\n      <ts-button loading>Saving...</ts-button>\n      <ts-button loading variant=\"danger\">Deleting...</ts-button>\n    </ts-row>\n    <div>\n      <ts-button block>Full Width Submit</ts-button>\n    </div>\n    <div>\n      <ts-button block loading>Processing Payment...</ts-button>\n    </div>\n  </ts-stack>\n`;\n\nexport const WithIcons = (): string => `\n  <ts-row gap=\"2\">\n    <ts-button variant=\"primary\">\n      <ts-icon slot=\"prefix\" name=\"plus\" size=\"sm\"></ts-icon>\n      New Project\n    </ts-button>\n    <ts-button variant=\"danger\">\n      <ts-icon slot=\"prefix\" name=\"trash-2\" size=\"sm\"></ts-icon>\n      Delete\n    </ts-button>\n    <ts-button appearance=\"outline\" variant=\"neutral\">\n      <ts-icon slot=\"prefix\" name=\"download\" size=\"sm\"></ts-icon>\n      Export CSV\n    </ts-button>\n    <ts-button variant=\"success\">\n      <ts-icon slot=\"prefix\" name=\"check\" size=\"sm\"></ts-icon>\n      Approve\n    </ts-button>\n    <ts-button appearance=\"ghost\" variant=\"primary\">\n      Settings\n      <ts-icon slot=\"suffix\" name=\"chevron-right\" size=\"sm\"></ts-icon>\n    </ts-button>\n    <ts-button appearance=\"outline\" variant=\"primary\">\n      <ts-icon slot=\"prefix\" name=\"log-in\" size=\"sm\"></ts-icon>\n      Sign In\n    </ts-button>\n  </ts-row>\n`;\n\nexport const AsLink = (): string => `\n  <ts-row gap=\"2\">\n    <ts-button href=\"https://example.com\" target=\"_blank\">\n      Visit Website\n      <ts-icon slot=\"suffix\" name=\"external-link\" size=\"sm\"></ts-icon>\n    </ts-button>\n    <ts-button href=\"https://example.com/docs\" appearance=\"outline\" variant=\"neutral\">\n      <ts-icon slot=\"prefix\" name=\"book-open\" size=\"sm\"></ts-icon>\n      Documentation\n    </ts-button>\n  </ts-row>\n`;\n\nexport const Composition = (): string => `\n  <ts-stack gap=\"4\" style=\"max-width: 400px;\">\n    <ts-row gap=\"2\" justify=\"end\">\n      <ts-button appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n      <ts-button variant=\"primary\">\n        <ts-icon slot=\"prefix\" name=\"save\" size=\"sm\"></ts-icon>\n        Save Changes\n      </ts-button>\n    </ts-row>\n\n    <ts-card bordered>\n      <span slot=\"header\"><h3 style=\"margin: 0;\">Danger Zone</h3></span>\n      <p style=\"margin: 0; color: var(--ts-color-text-secondary);\">Once you delete your account, there is no going back. Please be certain.</p>\n      <span slot=\"footer\">\n        <ts-row gap=\"2\" justify=\"end\">\n          <ts-button variant=\"danger\" appearance=\"outline\">\n            <ts-icon slot=\"prefix\" name=\"trash-2\" size=\"sm\"></ts-icon>\n            Delete Account\n          </ts-button>\n        </ts-row>\n      </span>\n    </ts-card>\n\n    <ts-row gap=\"1\">\n      <ts-button size=\"sm\" appearance=\"ghost\" variant=\"neutral\">\n        <ts-icon slot=\"prefix\" name=\"chevron-left\" size=\"sm\"></ts-icon>\n        Back\n      </ts-button>\n      <ts-spacer></ts-spacer>\n      <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Skip</ts-button>\n      <ts-button size=\"sm\" variant=\"primary\">\n        Continue\n        <ts-icon slot=\"suffix\" name=\"chevron-right\" size=\"sm\"></ts-icon>\n      </ts-button>\n    </ts-row>\n  </ts-stack>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,MAAM;IACjB,oDAAoD;IAC3B,SAAS,GAAuC,IAAI,CAAC;IAE9E,iEAAiE;IACxC,WAAW,GAAG,KAAK,CAAC;IAE7C,4BAA4B;IACH,QAAQ,GAAG,KAAK,CAAC;IAE1C,sCAAsC;IACb,OAAO,GAAgC,IAAI,CAAC;IAErE,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,sBAAsB,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;gBAC9C,CAAC,oBAAoB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBAC1C,sBAAsB,EAAE,IAAI,CAAC,WAAW;gBACxC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;aACnC,EACD,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC7C,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS;YAE5C,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM;gBACjC,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO;oBACnC,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB;gBAEN,4DAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ;oBACrC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB;gBAEN,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM;oBACjC,8DAAQ,CACJ;gBAEN,4DAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ;oBACrC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for card body content.\n * @slot header - Card header content.\n * @slot footer - Card footer content.\n * @slot media - Media content (image, video) displayed at the top.\n *\n * @part base - The card container.\n * @part header - The header wrapper.\n * @part body - The body wrapper.\n * @part footer - The footer wrapper.\n * @part media - The media wrapper.\n */\n@Component({\n  tag: 'ts-card',\n  styleUrl: 'card.css',\n  shadow: true,\n})\nexport class TsCard {\n  /** Elevation level controlling the shadow depth. */\n  @Prop({ reflect: true }) elevation: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /** Makes the card interactive (hover effect, cursor pointer). */\n  @Prop({ reflect: true }) interactive = false;\n\n  /** Border style variant. */\n  @Prop({ reflect: true }) bordered = false;\n\n  /** Padding size for the card body. */\n  @Prop({ reflect: true }) padding: 'none' | 'sm' | 'md' | 'lg' = 'md';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-card': true,\n          [`ts-card--elevation-${this.elevation}`]: true,\n          [`ts-card--padding-${this.padding}`]: true,\n          'ts-card--interactive': this.interactive,\n          'ts-card--bordered': this.bordered,\n        }}\n        role={this.interactive ? 'button' : undefined}\n        tabindex={this.interactive ? '0' : undefined}\n      >\n        <div class=\"card__base\" part=\"base\">\n          <div class=\"card__media\" part=\"media\">\n            <slot name=\"media\" />\n          </div>\n\n          <div class=\"card__header\" part=\"header\">\n            <slot name=\"header\" />\n          </div>\n\n          <div class=\"card__body\" part=\"body\">\n            <slot />\n          </div>\n\n          <div class=\"card__footer\" part=\"footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,221 +0,0 @@
-// Hand-written stories for ts-card
-export default {
-    title: 'Components/Card',
-    tags: ['autodocs'],
-    argTypes: {
-        elevation: {
-            control: 'select',
-            options: ['none', 'sm', 'md', 'lg', 'xl'],
-            description: 'Elevation level controlling the shadow depth.',
-        },
-        interactive: { control: 'boolean', description: 'Makes the card interactive (hover effect, cursor pointer).' },
-        bordered: { control: 'boolean', description: 'Border style variant.' },
-        padding: {
-            control: 'select',
-            options: ['none', 'sm', 'md', 'lg'],
-            description: 'Padding size for the card body.',
-        },
-        slotContent: { control: 'text', description: 'Default slot content' },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.elevation !== undefined && args.elevation !== null)
-        attrs.push(`elevation="${args.elevation}"`);
-    if (args.interactive)
-        attrs.push('interactive');
-    if (args.bordered)
-        attrs.push('bordered');
-    if (args.padding !== undefined && args.padding !== null)
-        attrs.push(`padding="${args.padding}"`);
-    return `<div style="max-width: 400px;">
-    <ts-card ${attrs.join(' ')}>
-      ${args.slotContent || '<p style="margin: 0;">Card body content goes here.</p>'}
-    </ts-card>
-  </div>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        elevation: 'sm',
-        interactive: false,
-        bordered: false,
-        padding: 'md',
-        slotContent: '<p style="margin: 0;">This is a basic card with default settings. Cards are versatile containers for grouping related content.</p>',
-    },
-});
-export const Elevations = () => `
-  <ts-row gap="4" align="start">
-    <div style="text-align: center;">
-      <ts-card elevation="none" style="width: 160px;">
-        <p style="margin: 0; font-size: 14px;">None</p>
-      </ts-card>
-    </div>
-    <div style="text-align: center;">
-      <ts-card elevation="sm" style="width: 160px;">
-        <p style="margin: 0; font-size: 14px;">Small</p>
-      </ts-card>
-    </div>
-    <div style="text-align: center;">
-      <ts-card elevation="md" style="width: 160px;">
-        <p style="margin: 0; font-size: 14px;">Medium</p>
-      </ts-card>
-    </div>
-    <div style="text-align: center;">
-      <ts-card elevation="lg" style="width: 160px;">
-        <p style="margin: 0; font-size: 14px;">Large</p>
-      </ts-card>
-    </div>
-    <div style="text-align: center;">
-      <ts-card elevation="xl" style="width: 160px;">
-        <p style="margin: 0; font-size: 14px;">Extra Large</p>
-      </ts-card>
-    </div>
-  </ts-row>
-`;
-export const Padding = () => `
-  <ts-stack gap="3" style="max-width: 400px;">
-    <ts-card bordered padding="none">
-      <p style="margin: 0;">Padding: none</p>
-    </ts-card>
-    <ts-card bordered padding="sm">
-      <p style="margin: 0;">Padding: small</p>
-    </ts-card>
-    <ts-card bordered padding="md">
-      <p style="margin: 0;">Padding: medium</p>
-    </ts-card>
-    <ts-card bordered padding="lg">
-      <p style="margin: 0;">Padding: large</p>
-    </ts-card>
-  </ts-stack>
-`;
-export const States = () => `
-  <ts-row gap="4" align="start">
-    <ts-card bordered style="width: 240px;">
-      <p style="margin: 0;">Bordered card</p>
-    </ts-card>
-    <ts-card interactive style="width: 240px;">
-      <p style="margin: 0;">Interactive card (hover me)</p>
-    </ts-card>
-    <ts-card interactive bordered style="width: 240px;">
-      <p style="margin: 0;">Interactive + bordered</p>
-    </ts-card>
-  </ts-row>
-`;
-export const WithSlots = () => `
-  <div style="max-width: 400px;">
-    <ts-card bordered>
-      <span slot="header">
-        <ts-row gap="2" justify="between" align="center">
-          <h3 style="margin: 0;">Team Members</h3>
-          <ts-badge variant="primary" pill>3 online</ts-badge>
-        </ts-row>
-      </span>
-      <ts-stack gap="2">
-        <ts-row gap="2">
-          <ts-icon name="user" size="sm"></ts-icon>
-          <div>
-            <div style="font-weight: 600;">Sarah Chen</div>
-            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Engineering Lead</div>
-          </div>
-          <ts-badge variant="success" pill size="sm" style="margin-left: auto;">Active</ts-badge>
-        </ts-row>
-        <ts-row gap="2">
-          <ts-icon name="user" size="sm"></ts-icon>
-          <div>
-            <div style="font-weight: 600;">Alex Rivera</div>
-            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Product Designer</div>
-          </div>
-          <ts-badge variant="success" pill size="sm" style="margin-left: auto;">Active</ts-badge>
-        </ts-row>
-        <ts-row gap="2">
-          <ts-icon name="user" size="sm"></ts-icon>
-          <div>
-            <div style="font-weight: 600;">Jordan Lee</div>
-            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">Backend Developer</div>
-          </div>
-          <ts-badge variant="neutral" pill size="sm" style="margin-left: auto;">Away</ts-badge>
-        </ts-row>
-      </ts-stack>
-      <span slot="footer">
-        <ts-row gap="1" justify="end">
-          <ts-button size="sm" appearance="ghost" variant="primary">
-            <ts-icon slot="prefix" name="user-plus" size="sm"></ts-icon>
-            Invite Member
-          </ts-button>
-        </ts-row>
-      </span>
-    </ts-card>
-  </div>
-`;
-export const WithMedia = () => `
-  <ts-grid columns="auto" min-column-width="280px" gap="4">
-    <ts-card bordered style="width: 300px;" padding="none">
-      <span slot="media">
-        <div style="height: 160px; background: linear-gradient(135deg, var(--ts-color-primary-400), var(--ts-color-primary-700)); display: flex; align-items: center; justify-content: center;">
-          <ts-icon name="image" size="xl" color="white"></ts-icon>
-        </div>
-      </span>
-      <div style="padding: 16px;">
-        <h3 style="margin: 0 0 8px;">Project Aurora</h3>
-        <p style="margin: 0; font-size: 14px; color: var(--ts-color-text-secondary);">A next-generation design system built for speed and accessibility.</p>
-      </div>
-      <span slot="footer">
-        <ts-row gap="2" justify="between" style="padding: 0 16px 16px;">
-          <ts-badge variant="info" pill size="sm">In Progress</ts-badge>
-          <ts-button size="sm" appearance="ghost" variant="primary">View Project</ts-button>
-        </ts-row>
-      </span>
-    </ts-card>
-
-    <ts-card bordered style="width: 300px;" padding="none">
-      <span slot="media">
-        <div style="height: 160px; background: linear-gradient(135deg, var(--ts-color-success-400), var(--ts-color-success-700)); display: flex; align-items: center; justify-content: center;">
-          <ts-icon name="check-circle" size="xl" color="white"></ts-icon>
-        </div>
-      </span>
-      <div style="padding: 16px;">
-        <h3 style="margin: 0 0 8px;">Project Nebula</h3>
-        <p style="margin: 0; font-size: 14px; color: var(--ts-color-text-secondary);">Analytics dashboard with real-time data visualization and reporting.</p>
-      </div>
-      <span slot="footer">
-        <ts-row gap="2" justify="between" style="padding: 0 16px 16px;">
-          <ts-badge variant="success" pill size="sm">Completed</ts-badge>
-          <ts-button size="sm" appearance="ghost" variant="primary">View Project</ts-button>
-        </ts-row>
-      </span>
-    </ts-card>
-  </ts-grid>
-`;
-export const Composition = () => `
-  <ts-stack gap="3" style="max-width: 400px;">
-    <ts-card bordered padding="lg">
-      <span slot="header">
-        <ts-row gap="1">
-          <ts-icon name="credit-card" size="sm"></ts-icon>
-          <h3 style="margin: 0;">Payment Method</h3>
-        </ts-row>
-      </span>
-      <ts-stack gap="2">
-        <ts-input label="Card Number" placeholder="4242 4242 4242 4242">
-          <ts-icon slot="prefix" name="credit-card" size="sm"></ts-icon>
-        </ts-input>
-        <ts-row gap="2">
-          <ts-input label="Expiry" placeholder="MM/YY" style="flex: 1;"></ts-input>
-          <ts-input label="CVC" placeholder="123" style="flex: 1;">
-            <ts-icon slot="suffix" name="lock" size="sm"></ts-icon>
-          </ts-input>
-        </ts-row>
-      </ts-stack>
-      <span slot="footer">
-        <ts-row gap="2" justify="end" style="padding-top: 8px;">
-          <ts-button appearance="outline" variant="neutral">Cancel</ts-button>
-          <ts-button variant="primary">
-            <ts-icon slot="prefix" name="lock" size="sm"></ts-icon>
-            Pay $49.99
-          </ts-button>
-        </ts-row>
-      </span>
-    </ts-card>
-  </ts-stack>
-`;
-//# sourceMappingURL=card.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/components/card/card.stories.ts"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YACzC,WAAW,EAAE,+CAA+C;SAC7D;QACD,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,4DAA4D,EAAE;QAC9G,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,uBAAuB,EAAE;QACtE,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YACnC,WAAW,EAAE,iCAAiC;SAC/C;QACD,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,sBAAsB,EAAE;KACtE;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IACzG,IAAI,IAAI,CAAC,WAAW;QAAE,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAChD,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACjG,OAAO;eACM,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,WAAW,IAAI,wDAAwD;;SAE3E,CAAC;AACV,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,SAAS,EAAE,IAAI;QACf,WAAW,EAAE,KAAK;QAClB,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,oIAAoI;KAClJ;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BvC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAepC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;CAYnC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CtC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCtC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BxC,CAAC","sourcesContent":["// Hand-written stories for ts-card\n\nexport default {\n  title: 'Components/Card',\n  tags: ['autodocs'],\n  argTypes: {\n    elevation: {\n      control: 'select',\n      options: ['none', 'sm', 'md', 'lg', 'xl'],\n      description: 'Elevation level controlling the shadow depth.',\n    },\n    interactive: { control: 'boolean', description: 'Makes the card interactive (hover effect, cursor pointer).' },\n    bordered: { control: 'boolean', description: 'Border style variant.' },\n    padding: {\n      control: 'select',\n      options: ['none', 'sm', 'md', 'lg'],\n      description: 'Padding size for the card body.',\n    },\n    slotContent: { control: 'text', description: 'Default slot content' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.elevation !== undefined && args.elevation !== null) attrs.push(`elevation=\"${args.elevation}\"`);\n  if (args.interactive) attrs.push('interactive');\n  if (args.bordered) attrs.push('bordered');\n  if (args.padding !== undefined && args.padding !== null) attrs.push(`padding=\"${args.padding}\"`);\n  return `<div style=\"max-width: 400px;\">\n    <ts-card ${attrs.join(' ')}>\n      ${args.slotContent || '<p style=\"margin: 0;\">Card body content goes here.</p>'}\n    </ts-card>\n  </div>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    elevation: 'sm',\n    interactive: false,\n    bordered: false,\n    padding: 'md',\n    slotContent: '<p style=\"margin: 0;\">This is a basic card with default settings. Cards are versatile containers for grouping related content.</p>',\n  },\n});\n\nexport const Elevations = (): string => `\n  <ts-row gap=\"4\" align=\"start\">\n    <div style=\"text-align: center;\">\n      <ts-card elevation=\"none\" style=\"width: 160px;\">\n        <p style=\"margin: 0; font-size: 14px;\">None</p>\n      </ts-card>\n    </div>\n    <div style=\"text-align: center;\">\n      <ts-card elevation=\"sm\" style=\"width: 160px;\">\n        <p style=\"margin: 0; font-size: 14px;\">Small</p>\n      </ts-card>\n    </div>\n    <div style=\"text-align: center;\">\n      <ts-card elevation=\"md\" style=\"width: 160px;\">\n        <p style=\"margin: 0; font-size: 14px;\">Medium</p>\n      </ts-card>\n    </div>\n    <div style=\"text-align: center;\">\n      <ts-card elevation=\"lg\" style=\"width: 160px;\">\n        <p style=\"margin: 0; font-size: 14px;\">Large</p>\n      </ts-card>\n    </div>\n    <div style=\"text-align: center;\">\n      <ts-card elevation=\"xl\" style=\"width: 160px;\">\n        <p style=\"margin: 0; font-size: 14px;\">Extra Large</p>\n      </ts-card>\n    </div>\n  </ts-row>\n`;\n\nexport const Padding = (): string => `\n  <ts-stack gap=\"3\" style=\"max-width: 400px;\">\n    <ts-card bordered padding=\"none\">\n      <p style=\"margin: 0;\">Padding: none</p>\n    </ts-card>\n    <ts-card bordered padding=\"sm\">\n      <p style=\"margin: 0;\">Padding: small</p>\n    </ts-card>\n    <ts-card bordered padding=\"md\">\n      <p style=\"margin: 0;\">Padding: medium</p>\n    </ts-card>\n    <ts-card bordered padding=\"lg\">\n      <p style=\"margin: 0;\">Padding: large</p>\n    </ts-card>\n  </ts-stack>\n`;\n\nexport const States = (): string => `\n  <ts-row gap=\"4\" align=\"start\">\n    <ts-card bordered style=\"width: 240px;\">\n      <p style=\"margin: 0;\">Bordered card</p>\n    </ts-card>\n    <ts-card interactive style=\"width: 240px;\">\n      <p style=\"margin: 0;\">Interactive card (hover me)</p>\n    </ts-card>\n    <ts-card interactive bordered style=\"width: 240px;\">\n      <p style=\"margin: 0;\">Interactive + bordered</p>\n    </ts-card>\n  </ts-row>\n`;\n\nexport const WithSlots = (): string => `\n  <div style=\"max-width: 400px;\">\n    <ts-card bordered>\n      <span slot=\"header\">\n        <ts-row gap=\"2\" justify=\"between\" align=\"center\">\n          <h3 style=\"margin: 0;\">Team Members</h3>\n          <ts-badge variant=\"primary\" pill>3 online</ts-badge>\n        </ts-row>\n      </span>\n      <ts-stack gap=\"2\">\n        <ts-row gap=\"2\">\n          <ts-icon name=\"user\" size=\"sm\"></ts-icon>\n          <div>\n            <div style=\"font-weight: 600;\">Sarah Chen</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Engineering Lead</div>\n          </div>\n          <ts-badge variant=\"success\" pill size=\"sm\" style=\"margin-left: auto;\">Active</ts-badge>\n        </ts-row>\n        <ts-row gap=\"2\">\n          <ts-icon name=\"user\" size=\"sm\"></ts-icon>\n          <div>\n            <div style=\"font-weight: 600;\">Alex Rivera</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Product Designer</div>\n          </div>\n          <ts-badge variant=\"success\" pill size=\"sm\" style=\"margin-left: auto;\">Active</ts-badge>\n        </ts-row>\n        <ts-row gap=\"2\">\n          <ts-icon name=\"user\" size=\"sm\"></ts-icon>\n          <div>\n            <div style=\"font-weight: 600;\">Jordan Lee</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">Backend Developer</div>\n          </div>\n          <ts-badge variant=\"neutral\" pill size=\"sm\" style=\"margin-left: auto;\">Away</ts-badge>\n        </ts-row>\n      </ts-stack>\n      <span slot=\"footer\">\n        <ts-row gap=\"1\" justify=\"end\">\n          <ts-button size=\"sm\" appearance=\"ghost\" variant=\"primary\">\n            <ts-icon slot=\"prefix\" name=\"user-plus\" size=\"sm\"></ts-icon>\n            Invite Member\n          </ts-button>\n        </ts-row>\n      </span>\n    </ts-card>\n  </div>\n`;\n\nexport const WithMedia = (): string => `\n  <ts-grid columns=\"auto\" min-column-width=\"280px\" gap=\"4\">\n    <ts-card bordered style=\"width: 300px;\" padding=\"none\">\n      <span slot=\"media\">\n        <div style=\"height: 160px; background: linear-gradient(135deg, var(--ts-color-primary-400), var(--ts-color-primary-700)); display: flex; align-items: center; justify-content: center;\">\n          <ts-icon name=\"image\" size=\"xl\" color=\"white\"></ts-icon>\n        </div>\n      </span>\n      <div style=\"padding: 16px;\">\n        <h3 style=\"margin: 0 0 8px;\">Project Aurora</h3>\n        <p style=\"margin: 0; font-size: 14px; color: var(--ts-color-text-secondary);\">A next-generation design system built for speed and accessibility.</p>\n      </div>\n      <span slot=\"footer\">\n        <ts-row gap=\"2\" justify=\"between\" style=\"padding: 0 16px 16px;\">\n          <ts-badge variant=\"info\" pill size=\"sm\">In Progress</ts-badge>\n          <ts-button size=\"sm\" appearance=\"ghost\" variant=\"primary\">View Project</ts-button>\n        </ts-row>\n      </span>\n    </ts-card>\n\n    <ts-card bordered style=\"width: 300px;\" padding=\"none\">\n      <span slot=\"media\">\n        <div style=\"height: 160px; background: linear-gradient(135deg, var(--ts-color-success-400), var(--ts-color-success-700)); display: flex; align-items: center; justify-content: center;\">\n          <ts-icon name=\"check-circle\" size=\"xl\" color=\"white\"></ts-icon>\n        </div>\n      </span>\n      <div style=\"padding: 16px;\">\n        <h3 style=\"margin: 0 0 8px;\">Project Nebula</h3>\n        <p style=\"margin: 0; font-size: 14px; color: var(--ts-color-text-secondary);\">Analytics dashboard with real-time data visualization and reporting.</p>\n      </div>\n      <span slot=\"footer\">\n        <ts-row gap=\"2\" justify=\"between\" style=\"padding: 0 16px 16px;\">\n          <ts-badge variant=\"success\" pill size=\"sm\">Completed</ts-badge>\n          <ts-button size=\"sm\" appearance=\"ghost\" variant=\"primary\">View Project</ts-button>\n        </ts-row>\n      </span>\n    </ts-card>\n  </ts-grid>\n`;\n\nexport const Composition = (): string => `\n  <ts-stack gap=\"3\" style=\"max-width: 400px;\">\n    <ts-card bordered padding=\"lg\">\n      <span slot=\"header\">\n        <ts-row gap=\"1\">\n          <ts-icon name=\"credit-card\" size=\"sm\"></ts-icon>\n          <h3 style=\"margin: 0;\">Payment Method</h3>\n        </ts-row>\n      </span>\n      <ts-stack gap=\"2\">\n        <ts-input label=\"Card Number\" placeholder=\"4242 4242 4242 4242\">\n          <ts-icon slot=\"prefix\" name=\"credit-card\" size=\"sm\"></ts-icon>\n        </ts-input>\n        <ts-row gap=\"2\">\n          <ts-input label=\"Expiry\" placeholder=\"MM/YY\" style=\"flex: 1;\"></ts-input>\n          <ts-input label=\"CVC\" placeholder=\"123\" style=\"flex: 1;\">\n            <ts-icon slot=\"suffix\" name=\"lock\" size=\"sm\"></ts-icon>\n          </ts-input>\n        </ts-row>\n      </ts-stack>\n      <span slot=\"footer\">\n        <ts-row gap=\"2\" justify=\"end\" style=\"padding-top: 8px;\">\n          <ts-button appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n          <ts-button variant=\"primary\">\n            <ts-icon slot=\"prefix\" name=\"lock\" size=\"sm\"></ts-icon>\n            Pay $49.99\n          </ts-button>\n        </ts-row>\n      </span>\n    </ts-card>\n  </ts-stack>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","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 checkbox label.\n *\n * @part base - The checkbox container.\n * @part control - The visual checkbox box.\n * @part label - The label wrapper.\n */\n@Component({\n  tag: 'ts-checkbox',\n  styleUrl: 'checkbox.css',\n  shadow: true,\n})\nexport class TsCheckbox {\n  @Element() hostEl!: HTMLElement;\n\n  private inputId = generateId('ts-checkbox');\n\n  /** Whether the checkbox is checked. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Whether the checkbox is in an indeterminate state. */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /** Renders the checkbox as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The value associated with this checkbox. */\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 checkbox size. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Renders the checkbox in an error state. */\n  @Prop({ reflect: true }) error = false;\n\n  /** Emitted when the checked state changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsCheckboxChangeEventDetail>;\n\n  /** Programmatically toggle the checkbox. */\n  @Method()\n  async toggle(): Promise<void> {\n    if (!this.disabled) {\n      this.indeterminate = false;\n      this.checked = !this.checked;\n      this.tsChange.emit({ checked: this.checked, value: this.value });\n    }\n  }\n\n  private handleClick = (): void => {\n    this.toggle();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      this.toggle();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';\n\n    return (\n      <Host\n        class={{\n          'ts-checkbox': true,\n          [`ts-checkbox--${this.size}`]: true,\n          'ts-checkbox--checked': this.checked,\n          'ts-checkbox--indeterminate': this.indeterminate,\n          'ts-checkbox--disabled': this.disabled,\n          'ts-checkbox--error': this.error,\n        }}\n      >\n        <div\n          class=\"checkbox__base\"\n          part=\"base\"\n          role=\"checkbox\"\n          aria-checked={ariaChecked}\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=\"checkbox__control\" part=\"control\">\n            {this.checked && !this.indeterminate && (\n              <svg class=\"checkbox__icon\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n                <path\n                  d=\"M3.5 8L6.5 11L12.5 5\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            )}\n            {this.indeterminate && (\n              <svg class=\"checkbox__icon\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n                <path\n                  d=\"M4 8H12\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            )}\n          </div>\n\n          <label class=\"checkbox__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/checkbox/checkbox.stories.js

@@ -1,90 +0,0 @@
-// Hand-written stories for ts-checkbox
-export default {
-    title: 'Components/Checkbox',
-    tags: ['autodocs'],
-    argTypes: {
-        checked: { control: 'boolean', description: 'Whether the checkbox is checked.' },
-        indeterminate: { control: 'boolean', description: 'Whether the checkbox is in an indeterminate state.' },
-        disabled: { control: 'boolean', description: 'Renders the checkbox as disabled.' },
-        error: { control: 'boolean', description: 'Renders the checkbox in an error state.' },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg'],
-            description: 'The checkbox size.',
-        },
-        label: { control: 'text', description: 'Label text. If omitted, use the default slot.' },
-        value: { control: 'text', description: 'The value associated with this checkbox.' },
-        name: { control: 'text', description: 'Name attribute for form submission.' },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.checked)
-        attrs.push('checked');
-    if (args.indeterminate)
-        attrs.push('indeterminate');
-    if (args.disabled)
-        attrs.push('disabled');
-    if (args.error)
-        attrs.push('error');
-    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-checkbox ${attrs.join(' ')}></ts-checkbox>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        checked: false,
-        indeterminate: false,
-        disabled: false,
-        error: false,
-        size: 'md',
-        label: 'I agree to the terms and conditions',
-        value: 'agree',
-        name: 'agreement',
-    },
-});
-export const Sizes = () => `
-  <ts-stack gap="2">
-    <ts-checkbox size="sm" label="Small checkbox"></ts-checkbox>
-    <ts-checkbox size="md" label="Medium checkbox"></ts-checkbox>
-    <ts-checkbox size="lg" label="Large checkbox"></ts-checkbox>
-  </ts-stack>
-`;
-export const States = () => `
-  <ts-stack gap="2">
-    <ts-checkbox label="Unchecked"></ts-checkbox>
-    <ts-checkbox checked label="Checked"></ts-checkbox>
-    <ts-checkbox indeterminate label="Indeterminate"></ts-checkbox>
-    <ts-checkbox disabled label="Disabled unchecked"></ts-checkbox>
-    <ts-checkbox disabled checked label="Disabled checked"></ts-checkbox>
-    <ts-checkbox error label="Error state"></ts-checkbox>
-    <ts-checkbox error checked label="Error checked"></ts-checkbox>
-  </ts-stack>
-`;
-export const FormExample = () => `
-  <ts-stack gap="3" style="max-width: 400px;">
-    <h3 style="margin: 0; font-family: sans-serif;">Newsletter Preferences</h3>
-    <ts-checkbox name="terms" value="terms" label="I agree to the terms and conditions"></ts-checkbox>
-    <ts-checkbox name="newsletter" value="newsletter" checked label="Subscribe to weekly newsletter"></ts-checkbox>
-    <ts-checkbox name="remember" value="remember" label="Remember me on this device"></ts-checkbox>
-    <ts-checkbox name="marketing" value="marketing" label="Receive marketing communications"></ts-checkbox>
-    <ts-checkbox name="beta" value="beta" disabled label="Join beta program (currently unavailable)"></ts-checkbox>
-  </ts-stack>
-`;
-export const WithSlotContent = () => `
-  <ts-stack gap="2">
-    <ts-checkbox value="custom">
-      Accept the <a href="#" style="color: #2563eb;">privacy policy</a>
-    </ts-checkbox>
-    <ts-checkbox value="styled">
-      <strong>Important:</strong> Enable two-factor authentication
-    </ts-checkbox>
-  </ts-stack>
-`;
-//# sourceMappingURL=checkbox.stories.js.map