@tessera-ui/core 0.4.0 → 0.5.0

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

@@ -1,147 +0,0 @@
-// Hand-written stories for ts-dialog
-export default {
-    title: 'Components/Dialog',
-    tags: ['autodocs'],
-    argTypes: {
-        open: { control: 'boolean', description: 'Whether the dialog is open.' },
-        heading: { control: 'text', description: 'The dialog heading text.' },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg'],
-            description: "The dialog's width size preset.",
-        },
-        dismissible: { control: 'boolean', description: 'Whether the dialog can be dismissed via close button, Escape, or overlay click.' },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.open)
-        attrs.push('open');
-    if (args.heading !== undefined && args.heading !== null)
-        attrs.push(`heading="${args.heading}"`);
-    if (args.size !== undefined && args.size !== null)
-        attrs.push(`size="${args.size}"`);
-    if (args.dismissible === false)
-        attrs.push('dismissible="false"');
-    return `
-    <ts-button onclick="this.nextElementSibling.show()">Open Dialog</ts-button>
-    <ts-dialog ${attrs.join(' ')}>
-      <p style="margin: 0; font-family: sans-serif;">This is the dialog body content. You can place any content here.</p>
-      <div slot="footer">
-        <ts-row gap="2" justify="end">
-          <ts-button appearance="outline" onclick="this.closest('ts-dialog').close()">Cancel</ts-button>
-          <ts-button variant="primary" onclick="this.closest('ts-dialog').close()">Confirm</ts-button>
-        </ts-row>
-      </div>
-    </ts-dialog>
-  `;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        open: false,
-        heading: 'Dialog Title',
-        size: 'sm',
-        dismissible: true,
-    },
-});
-export const Sizes = () => `
-  <ts-row gap="2">
-    <div>
-      <ts-button onclick="this.nextElementSibling.show()">Small Dialog</ts-button>
-      <ts-dialog heading="Small Dialog" size="sm">
-        <p style="margin: 0; font-family: sans-serif;">This is a small dialog, suitable for simple confirmations.</p>
-        <div slot="footer">
-          <ts-row gap="2" justify="end">
-            <ts-button appearance="outline" onclick="this.closest('ts-dialog').close()">Close</ts-button>
-          </ts-row>
-        </div>
-      </ts-dialog>
-    </div>
-    <div>
-      <ts-button onclick="this.nextElementSibling.show()">Medium Dialog</ts-button>
-      <ts-dialog heading="Medium Dialog" size="md">
-        <p style="margin: 0; font-family: sans-serif;">This is a medium dialog with more room for content. It works well for forms and moderate amounts of information.</p>
-        <div slot="footer">
-          <ts-row gap="2" justify="end">
-            <ts-button appearance="outline" onclick="this.closest('ts-dialog').close()">Close</ts-button>
-          </ts-row>
-        </div>
-      </ts-dialog>
-    </div>
-    <div>
-      <ts-button onclick="this.nextElementSibling.show()">Large Dialog</ts-button>
-      <ts-dialog heading="Large Dialog" size="lg">
-        <p style="margin: 0; font-family: sans-serif;">This is a large dialog, ideal for complex content like data tables, multi-step forms, or detailed previews.</p>
-        <div slot="footer">
-          <ts-row gap="2" justify="end">
-            <ts-button appearance="outline" onclick="this.closest('ts-dialog').close()">Close</ts-button>
-          </ts-row>
-        </div>
-      </ts-dialog>
-    </div>
-  </ts-row>
-`;
-export const DeleteConfirmation = () => `
-  <ts-button variant="danger" onclick="this.nextElementSibling.show()">Delete Item</ts-button>
-  <ts-dialog heading="Delete this item?" size="sm">
-    <p style="margin: 0; font-family: sans-serif; color: #555;">
-      Are you sure you want to delete this item? This action cannot be undone and all associated data will be permanently removed.
-    </p>
-    <div slot="footer">
-      <ts-row gap="2" justify="end">
-        <ts-button appearance="outline" onclick="this.closest('ts-dialog').close()">Cancel</ts-button>
-        <ts-button variant="danger" onclick="this.closest('ts-dialog').close()">Delete</ts-button>
-      </ts-row>
-    </div>
-  </ts-dialog>
-`;
-export const UnsavedChanges = () => `
-  <ts-button onclick="this.nextElementSibling.show()">Leave Page</ts-button>
-  <ts-dialog heading="Unsaved changes" size="sm">
-    <p style="margin: 0; font-family: sans-serif; color: #555;">
-      You have unsaved changes. If you leave this page, your changes will be lost. Would you like to save before leaving?
-    </p>
-    <div slot="footer">
-      <ts-row gap="2" justify="end">
-        <ts-button appearance="outline" onclick="this.closest('ts-dialog').close()">Discard</ts-button>
-        <ts-button variant="primary" onclick="this.closest('ts-dialog').close()">Save Changes</ts-button>
-      </ts-row>
-    </div>
-  </ts-dialog>
-`;
-export const NonDismissible = () => `
-  <ts-button onclick="this.nextElementSibling.show()">Open Non-Dismissible</ts-button>
-  <ts-dialog heading="Terms of Service" size="md" dismissible="false">
-    <div style="font-family: sans-serif; color: #555;">
-      <p style="margin: 0 0 12px;">Please read and accept the terms of service to continue using this application.</p>
-      <div style="padding: 12px; background: #f9fafb; border-radius: 6px; max-height: 150px; overflow-y: auto; font-size: 14px;">
-        <p style="margin: 0 0 8px;">1. You agree to use this software responsibly.</p>
-        <p style="margin: 0 0 8px;">2. You will not share your credentials with others.</p>
-        <p style="margin: 0 0 8px;">3. Data uploaded remains your intellectual property.</p>
-        <p style="margin: 0;">4. We reserve the right to update these terms.</p>
-      </div>
-    </div>
-    <div slot="footer">
-      <ts-row gap="2" justify="end">
-        <ts-button variant="primary" onclick="this.closest('ts-dialog').close()">I Accept</ts-button>
-      </ts-row>
-    </div>
-  </ts-dialog>
-`;
-export const FormDialog = () => `
-  <ts-button onclick="this.nextElementSibling.show()">Edit Profile</ts-button>
-  <ts-dialog heading="Edit Profile" size="md">
-    <ts-stack gap="3">
-      <ts-input label="Full Name" placeholder="Enter your name" value="James Kennedy"></ts-input>
-      <ts-input label="Email" placeholder="Enter your email" value="james@example.com"></ts-input>
-      <ts-textarea label="Bio" placeholder="Tell us about yourself..." rows="3"></ts-textarea>
-    </ts-stack>
-    <div slot="footer">
-      <ts-row gap="2" justify="end">
-        <ts-button appearance="outline" onclick="this.closest('ts-dialog').close()">Cancel</ts-button>
-        <ts-button variant="primary" onclick="this.closest('ts-dialog').close()">Save</ts-button>
-      </ts-row>
-    </div>
-  </ts-dialog>
-`;
-//# sourceMappingURL=dialog.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"dialog.stories.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.stories.ts"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,6BAA6B,EAAE;QACxE,OAAO,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,0BAA0B,EAAE;QACrE,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,WAAW,EAAE,iCAAiC;SAC/C;QACD,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,iFAAiF,EAAE;KACpI;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,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACjG,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,WAAW,KAAK,KAAK;QAAE,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAClE,OAAO;;iBAEQ,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;GAS7B,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,OAAO,EAAE,cAAc;QACvB,IAAI,EAAE,IAAI;QACV,WAAW,EAAE,IAAI;KAClB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoClC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;CAa/C,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;CAa3C,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;CAkB3C,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAevC,CAAC","sourcesContent":["// Hand-written stories for ts-dialog\n\nexport default {\n  title: 'Components/Dialog',\n  tags: ['autodocs'],\n  argTypes: {\n    open: { control: 'boolean', description: 'Whether the dialog is open.' },\n    heading: { control: 'text', description: 'The dialog heading text.' },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: \"The dialog's width size preset.\",\n    },\n    dismissible: { control: 'boolean', description: 'Whether the dialog can be dismissed via close button, Escape, or overlay click.' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.open) attrs.push('open');\n  if (args.heading !== undefined && args.heading !== null) attrs.push(`heading=\"${args.heading}\"`);\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.dismissible === false) attrs.push('dismissible=\"false\"');\n  return `\n    <ts-button onclick=\"this.nextElementSibling.show()\">Open Dialog</ts-button>\n    <ts-dialog ${attrs.join(' ')}>\n      <p style=\"margin: 0; font-family: sans-serif;\">This is the dialog body content. You can place any content here.</p>\n      <div slot=\"footer\">\n        <ts-row gap=\"2\" justify=\"end\">\n          <ts-button appearance=\"outline\" onclick=\"this.closest('ts-dialog').close()\">Cancel</ts-button>\n          <ts-button variant=\"primary\" onclick=\"this.closest('ts-dialog').close()\">Confirm</ts-button>\n        </ts-row>\n      </div>\n    </ts-dialog>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    open: false,\n    heading: 'Dialog Title',\n    size: 'sm',\n    dismissible: true,\n  },\n});\n\nexport const Sizes = (): string => `\n  <ts-row gap=\"2\">\n    <div>\n      <ts-button onclick=\"this.nextElementSibling.show()\">Small Dialog</ts-button>\n      <ts-dialog heading=\"Small Dialog\" size=\"sm\">\n        <p style=\"margin: 0; font-family: sans-serif;\">This is a small dialog, suitable for simple confirmations.</p>\n        <div slot=\"footer\">\n          <ts-row gap=\"2\" justify=\"end\">\n            <ts-button appearance=\"outline\" onclick=\"this.closest('ts-dialog').close()\">Close</ts-button>\n          </ts-row>\n        </div>\n      </ts-dialog>\n    </div>\n    <div>\n      <ts-button onclick=\"this.nextElementSibling.show()\">Medium Dialog</ts-button>\n      <ts-dialog heading=\"Medium Dialog\" size=\"md\">\n        <p style=\"margin: 0; font-family: sans-serif;\">This is a medium dialog with more room for content. It works well for forms and moderate amounts of information.</p>\n        <div slot=\"footer\">\n          <ts-row gap=\"2\" justify=\"end\">\n            <ts-button appearance=\"outline\" onclick=\"this.closest('ts-dialog').close()\">Close</ts-button>\n          </ts-row>\n        </div>\n      </ts-dialog>\n    </div>\n    <div>\n      <ts-button onclick=\"this.nextElementSibling.show()\">Large Dialog</ts-button>\n      <ts-dialog heading=\"Large Dialog\" size=\"lg\">\n        <p style=\"margin: 0; font-family: sans-serif;\">This is a large dialog, ideal for complex content like data tables, multi-step forms, or detailed previews.</p>\n        <div slot=\"footer\">\n          <ts-row gap=\"2\" justify=\"end\">\n            <ts-button appearance=\"outline\" onclick=\"this.closest('ts-dialog').close()\">Close</ts-button>\n          </ts-row>\n        </div>\n      </ts-dialog>\n    </div>\n  </ts-row>\n`;\n\nexport const DeleteConfirmation = (): string => `\n  <ts-button variant=\"danger\" onclick=\"this.nextElementSibling.show()\">Delete Item</ts-button>\n  <ts-dialog heading=\"Delete this item?\" size=\"sm\">\n    <p style=\"margin: 0; font-family: sans-serif; color: #555;\">\n      Are you sure you want to delete this item? This action cannot be undone and all associated data will be permanently removed.\n    </p>\n    <div slot=\"footer\">\n      <ts-row gap=\"2\" justify=\"end\">\n        <ts-button appearance=\"outline\" onclick=\"this.closest('ts-dialog').close()\">Cancel</ts-button>\n        <ts-button variant=\"danger\" onclick=\"this.closest('ts-dialog').close()\">Delete</ts-button>\n      </ts-row>\n    </div>\n  </ts-dialog>\n`;\n\nexport const UnsavedChanges = (): string => `\n  <ts-button onclick=\"this.nextElementSibling.show()\">Leave Page</ts-button>\n  <ts-dialog heading=\"Unsaved changes\" size=\"sm\">\n    <p style=\"margin: 0; font-family: sans-serif; color: #555;\">\n      You have unsaved changes. If you leave this page, your changes will be lost. Would you like to save before leaving?\n    </p>\n    <div slot=\"footer\">\n      <ts-row gap=\"2\" justify=\"end\">\n        <ts-button appearance=\"outline\" onclick=\"this.closest('ts-dialog').close()\">Discard</ts-button>\n        <ts-button variant=\"primary\" onclick=\"this.closest('ts-dialog').close()\">Save Changes</ts-button>\n      </ts-row>\n    </div>\n  </ts-dialog>\n`;\n\nexport const NonDismissible = (): string => `\n  <ts-button onclick=\"this.nextElementSibling.show()\">Open Non-Dismissible</ts-button>\n  <ts-dialog heading=\"Terms of Service\" size=\"md\" dismissible=\"false\">\n    <div style=\"font-family: sans-serif; color: #555;\">\n      <p style=\"margin: 0 0 12px;\">Please read and accept the terms of service to continue using this application.</p>\n      <div style=\"padding: 12px; background: #f9fafb; border-radius: 6px; max-height: 150px; overflow-y: auto; font-size: 14px;\">\n        <p style=\"margin: 0 0 8px;\">1. You agree to use this software responsibly.</p>\n        <p style=\"margin: 0 0 8px;\">2. You will not share your credentials with others.</p>\n        <p style=\"margin: 0 0 8px;\">3. Data uploaded remains your intellectual property.</p>\n        <p style=\"margin: 0;\">4. We reserve the right to update these terms.</p>\n      </div>\n    </div>\n    <div slot=\"footer\">\n      <ts-row gap=\"2\" justify=\"end\">\n        <ts-button variant=\"primary\" onclick=\"this.closest('ts-dialog').close()\">I Accept</ts-button>\n      </ts-row>\n    </div>\n  </ts-dialog>\n`;\n\nexport const FormDialog = (): string => `\n  <ts-button onclick=\"this.nextElementSibling.show()\">Edit Profile</ts-button>\n  <ts-dialog heading=\"Edit Profile\" size=\"md\">\n    <ts-stack gap=\"3\">\n      <ts-input label=\"Full Name\" placeholder=\"Enter your name\" value=\"James Kennedy\"></ts-input>\n      <ts-input label=\"Email\" placeholder=\"Enter your email\" value=\"james@example.com\"></ts-input>\n      <ts-textarea label=\"Bio\" placeholder=\"Tell us about yourself...\" rows=\"3\"></ts-textarea>\n    </ts-stack>\n    <div slot=\"footer\">\n      <ts-row gap=\"2\" justify=\"end\">\n        <ts-button appearance=\"outline\" onclick=\"this.closest('ts-dialog').close()\">Cancel</ts-button>\n        <ts-button variant=\"primary\" onclick=\"this.closest('ts-dialog').close()\">Save</ts-button>\n      </ts-row>\n    </div>\n  </ts-dialog>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/components/divider/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,SAAS;IACpB,+BAA+B;IACN,WAAW,GAA8B,YAAY,CAAC;IAE/E,8BAA8B;IACL,OAAO,GAAkC,OAAO,CAAC;IAE1E,kEAAkE;IAC1D,KAAK,CAAU;IAEvB,4EAA4E;IAC5E,MAAM;QACJ,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAE9B,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;gBACzC,CAAC,eAAe,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACrC,uBAAuB,EAAE,QAAQ;aAClC,EACD,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,WAAW,IAEjC,QAAQ,IAAI,IAAI,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,CAC/C,WAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM;YACpC,YAAM,KAAK,EAAC,oCAAoC,GAAG;YACnD,YAAM,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;YAC7D,YAAM,KAAK,EAAC,kCAAkC,GAAG,CAC7C,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM;YACpC,YAAM,KAAK,EAAC,eAAe,GAAG,CAC1B,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @part base - The divider line element.\n * @part label - The optional label text.\n */\n@Component({\n  tag: 'ts-divider',\n  styleUrl: 'divider.css',\n  shadow: true,\n})\nexport class TsDivider {\n  /** The divider orientation. */\n  @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** The line style variant. */\n  @Prop({ reflect: true }) variant: 'solid' | 'dashed' | 'dotted' = 'solid';\n\n  /** Optional label text displayed in the center of the divider. */\n  @Prop() label?: string;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const hasLabel = !!this.label;\n\n    return (\n      <Host\n        class={{\n          'ts-divider': true,\n          [`ts-divider--${this.orientation}`]: true,\n          [`ts-divider--${this.variant}`]: true,\n          'ts-divider--has-label': hasLabel,\n        }}\n        role=\"separator\"\n        aria-orientation={this.orientation}\n      >\n        {hasLabel && this.orientation === 'horizontal' ? (\n          <div class=\"divider__base\" part=\"base\">\n            <span class=\"divider__line divider__line--start\" />\n            <span class=\"divider__label\" part=\"label\">{this.label}</span>\n            <span class=\"divider__line divider__line--end\" />\n          </div>\n        ) : (\n          <div class=\"divider__base\" part=\"base\">\n            <span class=\"divider__line\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,94 +0,0 @@
-// Hand-written stories for ts-divider
-export default {
-    title: 'Components/Divider',
-    tags: ['autodocs'],
-    argTypes: {
-        orientation: {
-            control: 'select',
-            options: ['horizontal', 'vertical'],
-            description: 'The divider orientation.',
-        },
-        variant: {
-            control: 'select',
-            options: ['solid', 'dashed', 'dotted'],
-            description: 'The line style variant.',
-        },
-        label: {
-            control: 'text',
-            description: 'Optional label text displayed in the center of the divider.',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.orientation !== undefined)
-        attrs.push(`orientation="${args.orientation}"`);
-    if (args.variant !== undefined)
-        attrs.push(`variant="${args.variant}"`);
-    if (args.label !== undefined && args.label !== '')
-        attrs.push(`label="${args.label}"`);
-    return `<ts-divider ${attrs.join(' ')}></ts-divider>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        orientation: 'horizontal',
-        variant: 'solid',
-        label: '',
-    },
-});
-export const Variants = () => `
-  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Solid</p>
-      <ts-divider variant="solid"></ts-divider>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Dashed</p>
-      <ts-divider variant="dashed"></ts-divider>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Dotted</p>
-      <ts-divider variant="dotted"></ts-divider>
-    </div>
-  </div>
-`;
-export const States = () => `
-  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Without label</p>
-      <ts-divider></ts-divider>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">With label</p>
-      <ts-divider label="OR"></ts-divider>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Vertical (in flex container)</p>
-      <div style="display: flex; gap: 16px; align-items: center; height: 40px;">
-        <span style="font-family: sans-serif;">Section A</span>
-        <ts-divider orientation="vertical"></ts-divider>
-        <span style="font-family: sans-serif;">Section B</span>
-        <ts-divider orientation="vertical"></ts-divider>
-        <span style="font-family: sans-serif;">Section C</span>
-      </div>
-    </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 12px;">Sign in</h4>
-      <div style="display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px;">
-        <ts-button variant="neutral" appearance="outline" block>Continue with Google</ts-button>
-        <ts-button variant="neutral" appearance="outline" block>Continue with GitHub</ts-button>
-      </div>
-      <ts-divider label="or continue with email"></ts-divider>
-      <div style="margin-top: 16px; display: flex; flex-direction: column; gap: 12px;">
-        <ts-input label="Email" placeholder="you@example.com"></ts-input>
-        <ts-input label="Password" type="password"></ts-input>
-        <ts-button variant="primary" block>Sign in</ts-button>
-      </div>
-    </div>
-  </div>
-`;
-//# sourceMappingURL=divider.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"divider.stories.js","sourceRoot":"","sources":["../../../src/components/divider/divider.stories.ts"],"names":[],"mappings":"AAAA,sCAAsC;AAEtC,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;YACnC,WAAW,EAAE,0BAA0B;SACxC;QACD,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC;YACtC,WAAW,EAAE,yBAAyB;SACvC;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,6DAA6D;SAC3E;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IACpF,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACvF,OAAO,eAAe,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC;AACxD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,WAAW,EAAE,YAAY;QACzB,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,EAAE;KACV;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAerC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;CAqBnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;CAgBxC,CAAC","sourcesContent":["// Hand-written stories for ts-divider\n\nexport default {\n  title: 'Components/Divider',\n  tags: ['autodocs'],\n  argTypes: {\n    orientation: {\n      control: 'select',\n      options: ['horizontal', 'vertical'],\n      description: 'The divider orientation.',\n    },\n    variant: {\n      control: 'select',\n      options: ['solid', 'dashed', 'dotted'],\n      description: 'The line style variant.',\n    },\n    label: {\n      control: 'text',\n      description: 'Optional label text displayed in the center of the divider.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.orientation !== undefined) attrs.push(`orientation=\"${args.orientation}\"`);\n  if (args.variant !== undefined) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.label !== undefined && args.label !== '') attrs.push(`label=\"${args.label}\"`);\n  return `<ts-divider ${attrs.join(' ')}></ts-divider>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    orientation: 'horizontal',\n    variant: 'solid',\n    label: '',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; max-width: 400px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Solid</p>\n      <ts-divider variant=\"solid\"></ts-divider>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Dashed</p>\n      <ts-divider variant=\"dashed\"></ts-divider>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Dotted</p>\n      <ts-divider variant=\"dotted\"></ts-divider>\n    </div>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; max-width: 400px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Without label</p>\n      <ts-divider></ts-divider>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">With label</p>\n      <ts-divider label=\"OR\"></ts-divider>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Vertical (in flex container)</p>\n      <div style=\"display: flex; gap: 16px; align-items: center; height: 40px;\">\n        <span style=\"font-family: sans-serif;\">Section A</span>\n        <ts-divider orientation=\"vertical\"></ts-divider>\n        <span style=\"font-family: sans-serif;\">Section B</span>\n        <ts-divider orientation=\"vertical\"></ts-divider>\n        <span style=\"font-family: sans-serif;\">Section C</span>\n      </div>\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 12px;\">Sign in</h4>\n      <div style=\"display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px;\">\n        <ts-button variant=\"neutral\" appearance=\"outline\" block>Continue with Google</ts-button>\n        <ts-button variant=\"neutral\" appearance=\"outline\" block>Continue with GitHub</ts-button>\n      </div>\n      <ts-divider label=\"or continue with email\"></ts-divider>\n      <div style=\"margin-top: 16px; display: flex; flex-direction: column; gap: 12px;\">\n        <ts-input label=\"Email\" placeholder=\"you@example.com\"></ts-input>\n        <ts-input label=\"Password\" type=\"password\"></ts-input>\n        <ts-button variant=\"primary\" block>Sign in</ts-button>\n      </div>\n    </div>\n  </div>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, h, Host, Element, Method, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport { generateId, trapFocus } from '../../utils/aria';\n\n/**\n * @slot - Default slot for drawer body content.\n * @slot footer - Drawer footer content (e.g., action buttons).\n *\n * @part overlay - The backdrop overlay.\n * @part panel - The slide-in panel container.\n * @part header - The header wrapper.\n * @part body - The body wrapper.\n * @part footer - The footer wrapper.\n * @part close - The close button.\n */\n@Component({\n  tag: 'ts-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class TsDrawer {\n  @Element() hostEl!: HTMLElement;\n\n  private panelEl?: HTMLElement;\n  private removeFocusTrap?: () => void;\n  private previouslyFocused?: HTMLElement;\n  private drawerId = generateId('ts-drawer');\n\n  /** Whether the drawer is open. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Which edge the drawer slides in from. */\n  @Prop({ reflect: true }) placement: 'start' | 'end' | 'top' | 'bottom' = 'end';\n\n  /** The drawer's width/height preset. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'full' = 'md';\n\n  /** Whether clicking the overlay or pressing Escape closes the drawer. */\n  @Prop() dismissible = true;\n\n  /** Accessible heading for the drawer. */\n  @Prop() heading?: string;\n\n  /** Emitted when the drawer closes. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  /** Internal animation state. */\n  @State() isAnimating = false;\n\n  @Watch('open')\n  handleOpenChange(isOpen: boolean): void {\n    if (isOpen) {\n      this.openDrawer();\n    } else {\n      this.closeDrawer();\n    }\n  }\n\n  /** Programmatically open the drawer. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Programmatically close the drawer. */\n  @Method()\n  async close(): Promise<void> {\n    this.open = false;\n  }\n\n  private openDrawer(): void {\n    this.previouslyFocused = document.activeElement as HTMLElement;\n    this.isAnimating = true;\n\n    document.body.style.overflow = 'hidden';\n\n    requestAnimationFrame(() => {\n      if (this.panelEl) {\n        this.removeFocusTrap = trapFocus(this.panelEl);\n        this.panelEl.focus();\n      }\n    });\n  }\n\n  private closeDrawer(): void {\n    this.isAnimating = false;\n    this.tsClose.emit();\n\n    document.body.style.overflow = '';\n    this.removeFocusTrap?.();\n    this.previouslyFocused?.focus();\n  }\n\n  disconnectedCallback(): void {\n    this.removeFocusTrap?.();\n    document.body.style.overflow = '';\n  }\n\n  private handleOverlayClick = (): void => {\n    if (this.dismissible) {\n      this.close();\n    }\n  };\n\n  private handlePanelClick = (event: MouseEvent): void => {\n    event.stopPropagation();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape' && this.dismissible) {\n      event.stopPropagation();\n      this.close();\n    }\n  };\n\n  private handleCloseClick = (): void => {\n    this.close();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    if (!this.open) return null;\n\n    return (\n      <Host\n        class={{\n          'ts-drawer': true,\n          'ts-drawer--open': this.open,\n          [`ts-drawer--${this.placement}`]: true,\n          [`ts-drawer--${this.size}`]: true,\n        }}\n        onKeyDown={this.handleKeydown}\n      >\n        <div class=\"drawer__overlay\" part=\"overlay\" onClick={this.handleOverlayClick}>\n          <div\n            ref={(el) => (this.panelEl = el)}\n            class={{\n              'drawer__panel': true,\n              [`drawer__panel--${this.placement}`]: true,\n              [`drawer__panel--${this.size}`]: true,\n            }}\n            part=\"panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={this.heading}\n            aria-labelledby={!this.heading ? `${this.drawerId}-header` : undefined}\n            tabindex={-1}\n            onClick={this.handlePanelClick}\n          >\n            <div class=\"drawer__header\" part=\"header\" id={`${this.drawerId}-header`}>\n              {this.heading && <span class=\"drawer__title\">{this.heading}</span>}\n              {this.dismissible && (\n                <button\n                  class=\"drawer__close\"\n                  part=\"close\"\n                  type=\"button\"\n                  aria-label=\"Close drawer\"\n                  onClick={this.handleCloseClick}\n                >\n                  &#x2715;\n                </button>\n              )}\n            </div>\n\n            <div class=\"drawer__body\" part=\"body\">\n              <slot />\n            </div>\n\n            <div class=\"drawer__footer\" part=\"footer\">\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,143 +0,0 @@
-// Hand-written stories for ts-drawer
-export default {
-    title: 'Components/Drawer',
-    tags: ['autodocs'],
-    argTypes: {
-        open: {
-            control: 'boolean',
-            description: 'Whether the drawer is open.',
-        },
-        placement: {
-            control: 'select',
-            options: ['start', 'end', 'top', 'bottom'],
-            description: 'Which edge the drawer slides in from.',
-        },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg', 'full'],
-            description: 'The drawer\'s width/height preset.',
-        },
-        dismissible: {
-            control: 'boolean',
-            description: 'Whether clicking the overlay or pressing Escape closes the drawer.',
-        },
-        heading: {
-            control: 'text',
-            description: 'Accessible heading for the drawer.',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.open)
-        attrs.push('open');
-    if (args.placement !== undefined)
-        attrs.push(`placement="${args.placement}"`);
-    if (args.size !== undefined)
-        attrs.push(`size="${args.size}"`);
-    if (args.dismissible !== undefined && !args.dismissible) {
-        // dismissible defaults to true
-    }
-    else {
-        attrs.push('dismissible');
-    }
-    if (args.heading !== undefined)
-        attrs.push(`heading="${args.heading}"`);
-    return `
-    <ts-button onclick="this.nextElementSibling.setAttribute('open','')">Open Drawer</ts-button>
-    <ts-drawer ${attrs.join(' ')}>
-      <p style="font-family: sans-serif; margin: 0;">This is the drawer content area.</p>
-      <div slot="footer" style="display: flex; gap: 8px; justify-content: flex-end;">
-        <ts-button appearance="outline" onclick="this.closest('ts-drawer').removeAttribute('open')">Cancel</ts-button>
-        <ts-button variant="primary" onclick="this.closest('ts-drawer').removeAttribute('open')">Save</ts-button>
-      </div>
-    </ts-drawer>
-  `;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        open: false,
-        placement: 'end',
-        size: 'md',
-        dismissible: true,
-        heading: 'Settings',
-    },
-});
-export const Sizes = () => `
-  <div style="display: flex; gap: 8px;">
-    <ts-button appearance="outline" onclick="document.getElementById('drawer-sm').setAttribute('open','')">Small</ts-button>
-    <ts-button appearance="outline" onclick="document.getElementById('drawer-md').setAttribute('open','')">Medium</ts-button>
-    <ts-button appearance="outline" onclick="document.getElementById('drawer-lg').setAttribute('open','')">Large</ts-button>
-    <ts-button appearance="outline" onclick="document.getElementById('drawer-full').setAttribute('open','')">Full</ts-button>
-  </div>
-  <ts-drawer id="drawer-sm" heading="Small Drawer" size="sm" dismissible>
-    <p style="font-family: sans-serif;">Small drawer content.</p>
-  </ts-drawer>
-  <ts-drawer id="drawer-md" heading="Medium Drawer" size="md" dismissible>
-    <p style="font-family: sans-serif;">Medium drawer content.</p>
-  </ts-drawer>
-  <ts-drawer id="drawer-lg" heading="Large Drawer" size="lg" dismissible>
-    <p style="font-family: sans-serif;">Large drawer content.</p>
-  </ts-drawer>
-  <ts-drawer id="drawer-full" heading="Full Drawer" size="full" dismissible>
-    <p style="font-family: sans-serif;">Full-width drawer content.</p>
-  </ts-drawer>
-`;
-export const States = () => `
-  <div style="display: flex; gap: 8px;">
-    <ts-button onclick="document.getElementById('drawer-start').setAttribute('open','')">From Start</ts-button>
-    <ts-button onclick="document.getElementById('drawer-end').setAttribute('open','')">From End</ts-button>
-    <ts-button onclick="document.getElementById('drawer-top').setAttribute('open','')">From Top</ts-button>
-    <ts-button onclick="document.getElementById('drawer-bottom').setAttribute('open','')">From Bottom</ts-button>
-  </div>
-  <ts-drawer id="drawer-start" heading="Start Drawer" placement="start" dismissible>
-    <p style="font-family: sans-serif;">Slides in from the start (left) edge.</p>
-  </ts-drawer>
-  <ts-drawer id="drawer-end" heading="End Drawer" placement="end" dismissible>
-    <p style="font-family: sans-serif;">Slides in from the end (right) edge.</p>
-  </ts-drawer>
-  <ts-drawer id="drawer-top" heading="Top Drawer" placement="top" dismissible>
-    <p style="font-family: sans-serif;">Slides in from the top edge.</p>
-  </ts-drawer>
-  <ts-drawer id="drawer-bottom" heading="Bottom Drawer" placement="bottom" dismissible>
-    <p style="font-family: sans-serif;">Slides in from the bottom edge.</p>
-  </ts-drawer>
-`;
-export const Composition = () => `
-  <ts-button variant="primary" onclick="document.getElementById('drawer-settings').setAttribute('open','')">Open Settings Panel</ts-button>
-  <ts-drawer id="drawer-settings" heading="Settings" placement="end" size="md" dismissible>
-    <div style="font-family: sans-serif; display: flex; flex-direction: column; gap: 20px;">
-      <div>
-        <h4 style="margin: 0 0 12px;">Notifications</h4>
-        <div style="display: flex; flex-direction: column; gap: 8px;">
-          <ts-toggle label="Email notifications"></ts-toggle>
-          <ts-toggle label="Push notifications"></ts-toggle>
-          <ts-toggle label="SMS alerts"></ts-toggle>
-        </div>
-      </div>
-      <ts-divider></ts-divider>
-      <div>
-        <h4 style="margin: 0 0 12px;">Appearance</h4>
-        <ts-select label="Theme" placeholder="Choose theme">
-          <option value="light">Light</option>
-          <option value="dark">Dark</option>
-          <option value="auto">System</option>
-        </ts-select>
-      </div>
-      <ts-divider></ts-divider>
-      <div>
-        <h4 style="margin: 0 0 12px;">Language</h4>
-        <ts-select label="Preferred language" placeholder="Select language">
-          <option value="en">English</option>
-          <option value="es">Spanish</option>
-          <option value="fr">French</option>
-        </ts-select>
-      </div>
-    </div>
-    <div slot="footer" style="display: flex; gap: 8px; justify-content: flex-end;">
-      <ts-button appearance="outline" onclick="document.getElementById('drawer-settings').removeAttribute('open')">Cancel</ts-button>
-      <ts-button variant="primary" onclick="document.getElementById('drawer-settings').removeAttribute('open')">Save Changes</ts-button>
-    </div>
-  </ts-drawer>
-`;
-//# sourceMappingURL=drawer.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"drawer.stories.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.stories.ts"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6BAA6B;SAC3C;QACD,SAAS,EAAE;YACT,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC;YAC1C,WAAW,EAAE,uCAAuC;SACrD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC;YACnC,WAAW,EAAE,oCAAoC;SAClD;QACD,WAAW,EAAE;YACX,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,oEAAoE;SAClF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,oCAAoC;SAClD;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,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QACxD,+BAA+B;IACjC,CAAC;SAAM,CAAC;QACN,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC5B,CAAC;IACD,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACxE,OAAO;;iBAEQ,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;GAO7B,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,KAAK;QAChB,IAAI,EAAE,IAAI;QACV,WAAW,EAAE,IAAI;QACjB,OAAO,EAAE,UAAU;KACpB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;CAmBlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;CAmBnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCxC,CAAC","sourcesContent":["// Hand-written stories for ts-drawer\n\nexport default {\n  title: 'Components/Drawer',\n  tags: ['autodocs'],\n  argTypes: {\n    open: {\n      control: 'boolean',\n      description: 'Whether the drawer is open.',\n    },\n    placement: {\n      control: 'select',\n      options: ['start', 'end', 'top', 'bottom'],\n      description: 'Which edge the drawer slides in from.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg', 'full'],\n      description: 'The drawer\\'s width/height preset.',\n    },\n    dismissible: {\n      control: 'boolean',\n      description: 'Whether clicking the overlay or pressing Escape closes the drawer.',\n    },\n    heading: {\n      control: 'text',\n      description: 'Accessible heading for the drawer.',\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.size !== undefined) attrs.push(`size=\"${args.size}\"`);\n  if (args.dismissible !== undefined && !args.dismissible) {\n    // dismissible defaults to true\n  } else {\n    attrs.push('dismissible');\n  }\n  if (args.heading !== undefined) attrs.push(`heading=\"${args.heading}\"`);\n  return `\n    <ts-button onclick=\"this.nextElementSibling.setAttribute('open','')\">Open Drawer</ts-button>\n    <ts-drawer ${attrs.join(' ')}>\n      <p style=\"font-family: sans-serif; margin: 0;\">This is the drawer content area.</p>\n      <div slot=\"footer\" style=\"display: flex; gap: 8px; justify-content: flex-end;\">\n        <ts-button appearance=\"outline\" onclick=\"this.closest('ts-drawer').removeAttribute('open')\">Cancel</ts-button>\n        <ts-button variant=\"primary\" onclick=\"this.closest('ts-drawer').removeAttribute('open')\">Save</ts-button>\n      </div>\n    </ts-drawer>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    open: false,\n    placement: 'end',\n    size: 'md',\n    dismissible: true,\n    heading: 'Settings',\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; gap: 8px;\">\n    <ts-button appearance=\"outline\" onclick=\"document.getElementById('drawer-sm').setAttribute('open','')\">Small</ts-button>\n    <ts-button appearance=\"outline\" onclick=\"document.getElementById('drawer-md').setAttribute('open','')\">Medium</ts-button>\n    <ts-button appearance=\"outline\" onclick=\"document.getElementById('drawer-lg').setAttribute('open','')\">Large</ts-button>\n    <ts-button appearance=\"outline\" onclick=\"document.getElementById('drawer-full').setAttribute('open','')\">Full</ts-button>\n  </div>\n  <ts-drawer id=\"drawer-sm\" heading=\"Small Drawer\" size=\"sm\" dismissible>\n    <p style=\"font-family: sans-serif;\">Small drawer content.</p>\n  </ts-drawer>\n  <ts-drawer id=\"drawer-md\" heading=\"Medium Drawer\" size=\"md\" dismissible>\n    <p style=\"font-family: sans-serif;\">Medium drawer content.</p>\n  </ts-drawer>\n  <ts-drawer id=\"drawer-lg\" heading=\"Large Drawer\" size=\"lg\" dismissible>\n    <p style=\"font-family: sans-serif;\">Large drawer content.</p>\n  </ts-drawer>\n  <ts-drawer id=\"drawer-full\" heading=\"Full Drawer\" size=\"full\" dismissible>\n    <p style=\"font-family: sans-serif;\">Full-width drawer content.</p>\n  </ts-drawer>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; gap: 8px;\">\n    <ts-button onclick=\"document.getElementById('drawer-start').setAttribute('open','')\">From Start</ts-button>\n    <ts-button onclick=\"document.getElementById('drawer-end').setAttribute('open','')\">From End</ts-button>\n    <ts-button onclick=\"document.getElementById('drawer-top').setAttribute('open','')\">From Top</ts-button>\n    <ts-button onclick=\"document.getElementById('drawer-bottom').setAttribute('open','')\">From Bottom</ts-button>\n  </div>\n  <ts-drawer id=\"drawer-start\" heading=\"Start Drawer\" placement=\"start\" dismissible>\n    <p style=\"font-family: sans-serif;\">Slides in from the start (left) edge.</p>\n  </ts-drawer>\n  <ts-drawer id=\"drawer-end\" heading=\"End Drawer\" placement=\"end\" dismissible>\n    <p style=\"font-family: sans-serif;\">Slides in from the end (right) edge.</p>\n  </ts-drawer>\n  <ts-drawer id=\"drawer-top\" heading=\"Top Drawer\" placement=\"top\" dismissible>\n    <p style=\"font-family: sans-serif;\">Slides in from the top edge.</p>\n  </ts-drawer>\n  <ts-drawer id=\"drawer-bottom\" heading=\"Bottom Drawer\" placement=\"bottom\" dismissible>\n    <p style=\"font-family: sans-serif;\">Slides in from the bottom edge.</p>\n  </ts-drawer>\n`;\n\nexport const Composition = (): string => `\n  <ts-button variant=\"primary\" onclick=\"document.getElementById('drawer-settings').setAttribute('open','')\">Open Settings Panel</ts-button>\n  <ts-drawer id=\"drawer-settings\" heading=\"Settings\" placement=\"end\" size=\"md\" dismissible>\n    <div style=\"font-family: sans-serif; display: flex; flex-direction: column; gap: 20px;\">\n      <div>\n        <h4 style=\"margin: 0 0 12px;\">Notifications</h4>\n        <div style=\"display: flex; flex-direction: column; gap: 8px;\">\n          <ts-toggle label=\"Email notifications\"></ts-toggle>\n          <ts-toggle label=\"Push notifications\"></ts-toggle>\n          <ts-toggle label=\"SMS alerts\"></ts-toggle>\n        </div>\n      </div>\n      <ts-divider></ts-divider>\n      <div>\n        <h4 style=\"margin: 0 0 12px;\">Appearance</h4>\n        <ts-select label=\"Theme\" placeholder=\"Choose theme\">\n          <option value=\"light\">Light</option>\n          <option value=\"dark\">Dark</option>\n          <option value=\"auto\">System</option>\n        </ts-select>\n      </div>\n      <ts-divider></ts-divider>\n      <div>\n        <h4 style=\"margin: 0 0 12px;\">Language</h4>\n        <ts-select label=\"Preferred language\" placeholder=\"Select language\">\n          <option value=\"en\">English</option>\n          <option value=\"es\">Spanish</option>\n          <option value=\"fr\">French</option>\n        </ts-select>\n      </div>\n    </div>\n    <div slot=\"footer\" style=\"display: flex; gap: 8px; justify-content: flex-end;\">\n      <ts-button appearance=\"outline\" onclick=\"document.getElementById('drawer-settings').removeAttribute('open')\">Cancel</ts-button>\n      <ts-button variant=\"primary\" onclick=\"document.getElementById('drawer-settings').removeAttribute('open')\">Save Changes</ts-button>\n    </div>\n  </ts-drawer>\n`;\n"]}

package/dist/collection/components/empty-state/empty-state.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"empty-state.js","sourceRoot":"","sources":["../../../src/components/empty-state/empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,YAAY;IACvB,wBAAwB;IAChB,OAAO,CAAU;IAEzB,4BAA4B;IACpB,WAAW,CAAU;IAE7B,wCAAwC;IAChC,IAAI,CAAU;IAEtB,mCAAmC;IACV,IAAI,GAAW,IAAI,CAAC;IAE7C,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;aACvC;YAED,4DAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM;gBACxC,4DAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM;oBACxC,6DAAM,IAAI,EAAC,MAAM,IACd,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACrC,CACH;gBAEL,IAAI,CAAC,OAAO,IAAI,CACf,2DAAI,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,SAAS,IAC5C,IAAI,CAAC,OAAO,CACV,CACN;gBAEA,IAAI,CAAC,WAAW,IAAI,CACnB,0DAAG,KAAK,EAAC,0BAA0B,EAAC,IAAI,EAAC,aAAa,IACnD,IAAI,CAAC,WAAW,CACf,CACL;gBAED,4DAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,SAAS;oBAC9C,8DAAQ,CACJ;gBAEN,4DAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,QAAQ;oBAC5C,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { TsSize } from '../../types';\n\n/**\n * @slot - Custom content below the description.\n * @slot action - CTA buttons.\n * @slot icon - Custom icon or illustration.\n *\n * @part base - The empty state container.\n * @part icon - The icon wrapper.\n * @part heading - The heading element.\n * @part description - The description text.\n * @part content - The custom content wrapper.\n * @part action - The action slot wrapper.\n */\n@Component({\n  tag: 'ts-empty-state',\n  styleUrl: 'empty-state.css',\n  shadow: true,\n})\nexport class TsEmptyState {\n  /** The heading text. */\n  @Prop() heading?: string;\n\n  /** The description text. */\n  @Prop() description?: string;\n\n  /** Lucide icon name displayed large. */\n  @Prop() icon?: string;\n\n  /** The size of the empty state. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-empty-state': true,\n          [`ts-empty-state--${this.size}`]: true,\n        }}\n      >\n        <div class=\"empty-state__base\" part=\"base\">\n          <div class=\"empty-state__icon\" part=\"icon\">\n            <slot name=\"icon\">\n              {this.icon && <ts-icon name={this.icon} />}\n            </slot>\n          </div>\n\n          {this.heading && (\n            <h3 class=\"empty-state__heading\" part=\"heading\">\n              {this.heading}\n            </h3>\n          )}\n\n          {this.description && (\n            <p class=\"empty-state__description\" part=\"description\">\n              {this.description}\n            </p>\n          )}\n\n          <div class=\"empty-state__content\" part=\"content\">\n            <slot />\n          </div>\n\n          <div class=\"empty-state__action\" part=\"action\">\n            <slot name=\"action\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/empty-state/empty-state.stories.js

@@ -1,113 +0,0 @@
-// Hand-written stories for ts-empty-state
-export default {
-    title: 'Components/EmptyState',
-    tags: ['autodocs'],
-    argTypes: {
-        heading: {
-            control: 'text',
-            description: 'The heading text.',
-        },
-        description: {
-            control: 'text',
-            description: 'The description text.',
-        },
-        icon: {
-            control: 'text',
-            description: 'Lucide icon name displayed large.',
-        },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg'],
-            description: 'The size of the empty state.',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.heading !== undefined)
-        attrs.push(`heading="${args.heading}"`);
-    if (args.description !== undefined)
-        attrs.push(`description="${args.description}"`);
-    if (args.icon !== undefined)
-        attrs.push(`icon="${args.icon}"`);
-    if (args.size !== undefined)
-        attrs.push(`size="${args.size}"`);
-    return `
-    <ts-empty-state ${attrs.join(' ')}>
-      <ts-button slot="action" variant="primary">Create Project</ts-button>
-    </ts-empty-state>
-  `;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        heading: 'No results found',
-        description: 'Try adjusting your search or filter criteria to find what you are looking for.',
-        icon: 'search',
-        size: 'md',
-    },
-});
-export const Variants = () => `
-  <div style="display: flex; flex-direction: column; gap: 32px;">
-    <ts-empty-state
-      heading="No results found"
-      description="Try adjusting your search or filter criteria to find what you are looking for."
-      icon="search"
-    >
-      <ts-button slot="action" appearance="outline">Clear Filters</ts-button>
-    </ts-empty-state>
-
-    <ts-divider></ts-divider>
-
-    <ts-empty-state
-      heading="Create your first project"
-      description="Projects help you organize your work and collaborate with your team."
-      icon="folder-plus"
-    >
-      <ts-button slot="action" variant="primary">New Project</ts-button>
-    </ts-empty-state>
-
-    <ts-divider></ts-divider>
-
-    <ts-empty-state
-      heading="No notifications"
-      description="When you receive notifications, they will appear here."
-      icon="bell-off"
-    >
-    </ts-empty-state>
-  </div>
-`;
-export const Sizes = () => `
-  <div style="display: flex; flex-direction: column; gap: 32px;">
-    <div>
-      <p style="margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;">Small</p>
-      <ts-empty-state heading="No items" description="Nothing to display." icon="inbox" size="sm"></ts-empty-state>
-    </div>
-    <ts-divider></ts-divider>
-    <div>
-      <p style="margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;">Medium (default)</p>
-      <ts-empty-state heading="No items" description="Nothing to display." icon="inbox" size="md"></ts-empty-state>
-    </div>
-    <ts-divider></ts-divider>
-    <div>
-      <p style="margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;">Large</p>
-      <ts-empty-state heading="No items" description="Nothing to display." icon="inbox" size="lg"></ts-empty-state>
-    </div>
-  </div>
-`;
-export const Composition = () => `
-  <div style="max-width: 500px; font-family: sans-serif;">
-    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 48px 24px;">
-      <ts-empty-state
-        heading="Create your first project"
-        description="Projects let you group related tasks, track progress, and collaborate with your team. Get started by creating a new project."
-        icon="rocket"
-      >
-        <div slot="action" style="display: flex; gap: 8px;">
-          <ts-button appearance="outline">Learn More</ts-button>
-          <ts-button variant="primary">Create Project</ts-button>
-        </div>
-      </ts-empty-state>
-    </div>
-  </div>
-`;
-//# sourceMappingURL=empty-state.stories.js.map

package/dist/collection/components/empty-state/empty-state.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"empty-state.stories.js","sourceRoot":"","sources":["../../../src/components/empty-state/empty-state.stories.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAE1C,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,mBAAmB;SACjC;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uBAAuB;SACrC;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,mCAAmC;SACjD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,WAAW,EAAE,8BAA8B;SAC5C;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IACpF,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,OAAO;sBACa,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;GAGlC,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,OAAO,EAAE,kBAAkB;QAC3B,WAAW,EAAE,gFAAgF;QAC7F,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BrC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;CAiBlC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAexC,CAAC","sourcesContent":["// Hand-written stories for ts-empty-state\n\nexport default {\n  title: 'Components/EmptyState',\n  tags: ['autodocs'],\n  argTypes: {\n    heading: {\n      control: 'text',\n      description: 'The heading text.',\n    },\n    description: {\n      control: 'text',\n      description: 'The description text.',\n    },\n    icon: {\n      control: 'text',\n      description: 'Lucide icon name displayed large.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The size of the empty state.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.heading !== undefined) attrs.push(`heading=\"${args.heading}\"`);\n  if (args.description !== undefined) attrs.push(`description=\"${args.description}\"`);\n  if (args.icon !== undefined) attrs.push(`icon=\"${args.icon}\"`);\n  if (args.size !== undefined) attrs.push(`size=\"${args.size}\"`);\n  return `\n    <ts-empty-state ${attrs.join(' ')}>\n      <ts-button slot=\"action\" variant=\"primary\">Create Project</ts-button>\n    </ts-empty-state>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    heading: 'No results found',\n    description: 'Try adjusting your search or filter criteria to find what you are looking for.',\n    icon: 'search',\n    size: 'md',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <ts-empty-state\n      heading=\"No results found\"\n      description=\"Try adjusting your search or filter criteria to find what you are looking for.\"\n      icon=\"search\"\n    >\n      <ts-button slot=\"action\" appearance=\"outline\">Clear Filters</ts-button>\n    </ts-empty-state>\n\n    <ts-divider></ts-divider>\n\n    <ts-empty-state\n      heading=\"Create your first project\"\n      description=\"Projects help you organize your work and collaborate with your team.\"\n      icon=\"folder-plus\"\n    >\n      <ts-button slot=\"action\" variant=\"primary\">New Project</ts-button>\n    </ts-empty-state>\n\n    <ts-divider></ts-divider>\n\n    <ts-empty-state\n      heading=\"No notifications\"\n      description=\"When you receive notifications, they will appear here.\"\n      icon=\"bell-off\"\n    >\n    </ts-empty-state>\n  </div>\n`;\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <div>\n      <p style=\"margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;\">Small</p>\n      <ts-empty-state heading=\"No items\" description=\"Nothing to display.\" icon=\"inbox\" size=\"sm\"></ts-empty-state>\n    </div>\n    <ts-divider></ts-divider>\n    <div>\n      <p style=\"margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;\">Medium (default)</p>\n      <ts-empty-state heading=\"No items\" description=\"Nothing to display.\" icon=\"inbox\" size=\"md\"></ts-empty-state>\n    </div>\n    <ts-divider></ts-divider>\n    <div>\n      <p style=\"margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;\">Large</p>\n      <ts-empty-state heading=\"No items\" description=\"Nothing to display.\" icon=\"inbox\" size=\"lg\"></ts-empty-state>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"max-width: 500px; font-family: sans-serif;\">\n    <div style=\"border: 1px solid #e2e8f0; border-radius: 8px; padding: 48px 24px;\">\n      <ts-empty-state\n        heading=\"Create your first project\"\n        description=\"Projects let you group related tasks, track progress, and collaborate with your team. Get started by creating a new project.\"\n        icon=\"rocket\"\n      >\n        <div slot=\"action\" style=\"display: flex; gap: 8px;\">\n          <ts-button appearance=\"outline\">Learn More</ts-button>\n          <ts-button variant=\"primary\">Create Project</ts-button>\n        </div>\n      </ts-empty-state>\n    </div>\n  </div>\n`;\n"]}