@tessera-ui/core 0.4.0 → 0.5.0

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

@@ -1 +0,0 @@
-{"version":3,"file":"avatar.stories.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-avatar\n\nexport default {\n  title: 'Components/Avatar',\n  tags: ['autodocs'],\n  argTypes: {\n    src: { control: 'text', description: 'Image URL for the avatar.' },\n    alt: { control: 'text', description: 'Alt text for the avatar image.' },\n    name: { control: 'text', description: 'Name used to generate initials fallback.' },\n    size: {\n      control: 'select',\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\n      description: 'The size of the avatar.',\n    },\n    variant: {\n      control: 'select',\n      options: ['circle', 'square'],\n      description: 'Shape variant of the avatar.',\n    },\n    color: { control: 'color', description: 'Background color for the initials fallback.' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.src !== undefined && args.src !== null && args.src !== '') attrs.push(`src=\"${args.src}\"`);\n  if (args.alt !== undefined && args.alt !== null && args.alt !== '') attrs.push(`alt=\"${args.alt}\"`);\n  if (args.name !== undefined && args.name !== null) attrs.push(`name=\"${args.name}\"`);\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.variant !== undefined && args.variant !== null) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.color !== undefined && args.color !== null) attrs.push(`color=\"${args.color}\"`);\n  return `<ts-avatar ${attrs.join(' ')}></ts-avatar>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    src: '',\n    alt: '',\n    name: 'James Kennedy',\n    size: 'md',\n    variant: 'circle',\n    color: '#6366f1',\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; gap: 12px; align-items: center;\">\n    <ts-avatar size=\"xs\" name=\"Alice Smith\" color=\"#6366f1\"></ts-avatar>\n    <ts-avatar size=\"sm\" name=\"Alice Smith\" color=\"#6366f1\"></ts-avatar>\n    <ts-avatar size=\"md\" name=\"Alice Smith\" color=\"#6366f1\"></ts-avatar>\n    <ts-avatar size=\"lg\" name=\"Alice Smith\" color=\"#6366f1\"></ts-avatar>\n    <ts-avatar size=\"xl\" name=\"Alice Smith\" color=\"#6366f1\"></ts-avatar>\n  </div>\n`;\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center;\">\n    <div style=\"text-align: center; font-family: sans-serif;\">\n      <ts-avatar variant=\"circle\" name=\"James Kennedy\" color=\"#2563eb\" size=\"lg\"></ts-avatar>\n      <div style=\"font-size: 12px; margin-top: 4px; color: #666;\">Circle</div>\n    </div>\n    <div style=\"text-align: center; font-family: sans-serif;\">\n      <ts-avatar variant=\"square\" name=\"James Kennedy\" color=\"#2563eb\" size=\"lg\"></ts-avatar>\n      <div style=\"font-size: 12px; margin-top: 4px; color: #666;\">Square</div>\n    </div>\n  </div>\n`;\n\nexport const InitialsFallback = (): string => `\n  <div style=\"display: flex; gap: 12px; align-items: center;\">\n    <ts-avatar name=\"James Kennedy\" color=\"#6366f1\" size=\"lg\"></ts-avatar>\n    <ts-avatar name=\"Alice Smith\" color=\"#ec4899\" size=\"lg\"></ts-avatar>\n    <ts-avatar name=\"Robert Chen\" color=\"#14b8a6\" size=\"lg\"></ts-avatar>\n    <ts-avatar name=\"Maria\" color=\"#f59e0b\" size=\"lg\"></ts-avatar>\n    <ts-avatar name=\"David Lee Park\" color=\"#8b5cf6\" size=\"lg\"></ts-avatar>\n  </div>\n`;\n\nexport const WithImages = (): string => `\n  <div style=\"display: flex; gap: 12px; align-items: center;\">\n    <ts-avatar\n      src=\"https://i.pravatar.cc/150?u=user1\"\n      alt=\"User profile photo\"\n      name=\"Jane Doe\"\n      size=\"lg\"\n    ></ts-avatar>\n    <ts-avatar\n      src=\"https://i.pravatar.cc/150?u=user2\"\n      alt=\"User profile photo\"\n      name=\"John Smith\"\n      size=\"lg\"\n    ></ts-avatar>\n    <ts-avatar\n      src=\"https://i.pravatar.cc/150?u=user3\"\n      alt=\"User profile photo\"\n      name=\"Alex Johnson\"\n      size=\"lg\"\n    ></ts-avatar>\n  </div>\n`;\n\nexport const ImageErrorFallback = (): string => `\n  <div style=\"display: flex; gap: 12px; align-items: center; font-family: sans-serif;\">\n    <div style=\"text-align: center;\">\n      <ts-avatar\n        src=\"https://invalid-url.example.com/photo.jpg\"\n        name=\"Broken Image\"\n        color=\"#ef4444\"\n        size=\"lg\"\n      ></ts-avatar>\n      <div style=\"font-size: 12px; margin-top: 4px; color: #666;\">Falls back to initials</div>\n    </div>\n  </div>\n`;\n\nexport const UserList = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px; max-width: 320px; font-family: sans-serif;\">\n    <div style=\"display: flex; align-items: center; gap: 12px; padding: 8px;\">\n      <ts-avatar name=\"James Kennedy\" color=\"#6366f1\" size=\"sm\"></ts-avatar>\n      <div>\n        <div style=\"font-weight: 500;\">James Kennedy</div>\n        <div style=\"font-size: 13px; color: #666;\">james@example.com</div>\n      </div>\n    </div>\n    <div style=\"display: flex; align-items: center; gap: 12px; padding: 8px;\">\n      <ts-avatar name=\"Alice Smith\" color=\"#ec4899\" size=\"sm\"></ts-avatar>\n      <div>\n        <div style=\"font-weight: 500;\">Alice Smith</div>\n        <div style=\"font-size: 13px; color: #666;\">alice@example.com</div>\n      </div>\n    </div>\n    <div style=\"display: flex; align-items: center; gap: 12px; padding: 8px;\">\n      <ts-avatar name=\"Robert Chen\" color=\"#14b8a6\" size=\"sm\"></ts-avatar>\n      <div>\n        <div style=\"font-weight: 500;\">Robert Chen</div>\n        <div style=\"font-size: 13px; color: #666;\">robert@example.com</div>\n      </div>\n    </div>\n  </div>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;GAIG;AAMH,MAAM,OAAO,OAAO;IAClB,iCAAiC;IACR,OAAO,GAAc,SAAS,CAAC;IAExD,wBAAwB;IACC,IAAI,GAAW,IAAI,CAAC;IAE7C,iDAAiD;IACxB,IAAI,GAAG,KAAK,CAAC;IAEtC,sEAAsE;IAC7C,GAAG,GAAG,KAAK,CAAC;IAErC,kDAAkD;IACzB,OAAO,GAAG,KAAK,CAAC;IAEzC,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,CAAC,aAAa,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACnC,CAAC,aAAa,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBAChC,gBAAgB,EAAE,IAAI,CAAC,IAAI;gBAC3B,eAAe,EAAE,IAAI,CAAC,GAAG;gBACzB,mBAAmB,EAAE,IAAI,CAAC,OAAO;aAClC;YAED,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,IAClC,CAAC,IAAI,CAAC,GAAG,IAAI,8DAAQ,CACjB,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { TsSize, TsVariant } from '../../types';\n\n/**\n * @slot - Default slot for badge content.\n *\n * @part base - The badge element.\n */\n@Component({\n  tag: 'ts-badge',\n  styleUrl: 'badge.css',\n  shadow: true,\n})\nexport class TsBadge {\n  /** The badge's color variant. */\n  @Prop({ reflect: true }) variant: TsVariant = 'primary';\n\n  /** The badge's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Renders the badge with rounded-pill shape. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Renders the badge as a small dot indicator (content is hidden). */\n  @Prop({ reflect: true }) dot = false;\n\n  /** Renders an outlined style instead of solid. */\n  @Prop({ reflect: true }) outline = false;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-badge': true,\n          [`ts-badge--${this.variant}`]: true,\n          [`ts-badge--${this.size}`]: true,\n          'ts-badge--pill': this.pill,\n          'ts-badge--dot': this.dot,\n          'ts-badge--outline': this.outline,\n        }}\n      >\n        <span class=\"badge__base\" part=\"base\">\n          {!this.dot && <slot />}\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,193 +0,0 @@
-// Hand-written stories for ts-badge
-export default {
-    title: 'Components/Badge',
-    tags: ['autodocs'],
-    argTypes: {
-        variant: {
-            control: 'select',
-            options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],
-            description: 'The badge\'s color variant.',
-        },
-        size: {
-            control: 'select',
-            options: ['xs', 'sm', 'md', 'lg', 'xl'],
-            description: 'The badge\'s size.',
-        },
-        pill: { control: 'boolean', description: 'Renders the badge with rounded-pill shape.' },
-        dot: { control: 'boolean', description: 'Renders the badge as a small dot indicator (content is hidden).' },
-        outline: { control: 'boolean', description: 'Renders an outlined style instead of solid.' },
-        slotContent: { control: 'text', description: 'Badge label text' },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.variant !== undefined && args.variant !== null)
-        attrs.push(`variant="${args.variant}"`);
-    if (args.size !== undefined && args.size !== null)
-        attrs.push(`size="${args.size}"`);
-    if (args.pill)
-        attrs.push('pill');
-    if (args.dot)
-        attrs.push('dot');
-    if (args.outline)
-        attrs.push('outline');
-    return `<ts-badge ${attrs.join(' ')}>${args.slotContent || 'Badge'}</ts-badge>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        variant: 'primary',
-        size: 'md',
-        pill: false,
-        dot: false,
-        outline: false,
-        slotContent: 'New',
-    },
-});
-export const Variants = () => `
-  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
-    <ts-badge variant="primary">Primary</ts-badge>
-    <ts-badge variant="secondary">Secondary</ts-badge>
-    <ts-badge variant="success">Success</ts-badge>
-    <ts-badge variant="warning">Warning</ts-badge>
-    <ts-badge variant="danger">Danger</ts-badge>
-    <ts-badge variant="info">Info</ts-badge>
-    <ts-badge variant="neutral">Neutral</ts-badge>
-  </div>
-`;
-export const Sizes = () => `
-  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
-    <ts-badge size="xs">Extra Small</ts-badge>
-    <ts-badge size="sm">Small</ts-badge>
-    <ts-badge size="md">Medium</ts-badge>
-    <ts-badge size="lg">Large</ts-badge>
-    <ts-badge size="xl">Extra Large</ts-badge>
-  </div>
-`;
-export const States = () => `
-  <div style="display: flex; flex-direction: column; gap: 24px;">
-    <div>
-      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Solid (default)</p>
-      <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
-        <ts-badge variant="primary">Active</ts-badge>
-        <ts-badge variant="success">Completed</ts-badge>
-        <ts-badge variant="warning">Pending</ts-badge>
-        <ts-badge variant="danger">Failed</ts-badge>
-      </div>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Outline</p>
-      <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
-        <ts-badge variant="primary" outline>Active</ts-badge>
-        <ts-badge variant="success" outline>Completed</ts-badge>
-        <ts-badge variant="warning" outline>Pending</ts-badge>
-        <ts-badge variant="danger" outline>Failed</ts-badge>
-      </div>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Pill</p>
-      <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
-        <ts-badge variant="primary" pill>12</ts-badge>
-        <ts-badge variant="danger" pill>99+</ts-badge>
-        <ts-badge variant="success" pill>Online</ts-badge>
-        <ts-badge variant="neutral" pill>Draft</ts-badge>
-      </div>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Dot Indicator</p>
-      <div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap;">
-        <span style="display: inline-flex; align-items: center; gap: 8px;">
-          <ts-badge variant="success" dot></ts-badge> Online
-        </span>
-        <span style="display: inline-flex; align-items: center; gap: 8px;">
-          <ts-badge variant="warning" dot></ts-badge> Away
-        </span>
-        <span style="display: inline-flex; align-items: center; gap: 8px;">
-          <ts-badge variant="danger" dot></ts-badge> Busy
-        </span>
-        <span style="display: inline-flex; align-items: center; gap: 8px;">
-          <ts-badge variant="neutral" dot></ts-badge> Offline
-        </span>
-      </div>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Outline + Pill</p>
-      <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
-        <ts-badge variant="primary" outline pill>v2.1.0</ts-badge>
-        <ts-badge variant="info" outline pill>Beta</ts-badge>
-        <ts-badge variant="warning" outline pill>Experimental</ts-badge>
-        <ts-badge variant="neutral" outline pill>Archived</ts-badge>
-      </div>
-    </div>
-  </div>
-`;
-export const WithIcons = () => `
-  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
-    <span style="display: inline-flex; align-items: center; gap: 6px;">
-      <ts-icon name="bell" size="sm"></ts-icon>
-      Notifications
-      <ts-badge variant="danger" pill size="sm">5</ts-badge>
-    </span>
-    <span style="display: inline-flex; align-items: center; gap: 6px;">
-      <ts-icon name="mail" size="sm"></ts-icon>
-      Messages
-      <ts-badge variant="primary" pill size="sm">23</ts-badge>
-    </span>
-    <span style="display: inline-flex; align-items: center; gap: 6px;">
-      <ts-icon name="git-pull-request" size="sm"></ts-icon>
-      Pull Requests
-      <ts-badge variant="success" pill size="sm">2</ts-badge>
-    </span>
-  </div>
-`;
-export const Composition = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 500px;">
-    <ts-card bordered>
-      <span slot="header">
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <h3 style="margin: 0;">Deployments</h3>
-          <ts-badge variant="success" pill size="sm">3 active</ts-badge>
-        </div>
-      </span>
-      <div style="display: flex; flex-direction: column; gap: 12px;">
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <div>
-            <div style="font-weight: 600;">Production</div>
-            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">main @ a1b2c3d</div>
-          </div>
-          <ts-badge variant="success" pill size="sm">Live</ts-badge>
-        </div>
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <div>
-            <div style="font-weight: 600;">Staging</div>
-            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">develop @ e4f5g6h</div>
-          </div>
-          <ts-badge variant="info" pill size="sm">Building</ts-badge>
-        </div>
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <div>
-            <div style="font-weight: 600;">Preview</div>
-            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">feature/auth @ i7j8k9l</div>
-          </div>
-          <ts-badge variant="warning" pill size="sm">Queued</ts-badge>
-        </div>
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <div>
-            <div style="font-weight: 600;">Canary</div>
-            <div style="font-size: 13px; color: var(--ts-color-text-secondary);">release/v3 @ m0n1o2p</div>
-          </div>
-          <ts-badge variant="danger" pill size="sm">Failed</ts-badge>
-        </div>
-      </div>
-    </ts-card>
-
-    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-      <ts-badge variant="primary" outline pill>React</ts-badge>
-      <ts-badge variant="success" outline pill>Node.js</ts-badge>
-      <ts-badge variant="info" outline pill>TypeScript</ts-badge>
-      <ts-badge variant="warning" outline pill>GraphQL</ts-badge>
-      <ts-badge variant="danger" outline pill>Redis</ts-badge>
-      <ts-badge variant="neutral" outline pill>Docker</ts-badge>
-    </div>
-  </div>
-`;
-//# sourceMappingURL=badge.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"badge.stories.js","sourceRoot":"","sources":["../../../src/components/badge/badge.stories.ts"],"names":[],"mappings":"AAAA,oCAAoC;AAEpC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC;YACpF,WAAW,EAAE,6BAA6B;SAC3C;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YACvC,WAAW,EAAE,oBAAoB;SAClC;QACD,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,4CAA4C,EAAE;QACvF,GAAG,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,iEAAiE,EAAE;QAC3G,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,6CAA6C,EAAE;QAC3F,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,kBAAkB,EAAE;KAClE;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,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,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,IAAI,CAAC,GAAG;QAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,IAAI,IAAI,CAAC,OAAO;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,OAAO,aAAa,CAAC;AAClF,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,SAAS;QAClB,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,KAAK;QACX,GAAG,EAAE,KAAK;QACV,OAAO,EAAE,KAAK;QACd,WAAW,EAAE,KAAK;KACnB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;CAUrC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDnC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;CAkBtC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDxC,CAAC","sourcesContent":["// Hand-written stories for ts-badge\n\nexport default {\n  title: 'Components/Badge',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],\n      description: 'The badge\\'s color variant.',\n    },\n    size: {\n      control: 'select',\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\n      description: 'The badge\\'s size.',\n    },\n    pill: { control: 'boolean', description: 'Renders the badge with rounded-pill shape.' },\n    dot: { control: 'boolean', description: 'Renders the badge as a small dot indicator (content is hidden).' },\n    outline: { control: 'boolean', description: 'Renders an outlined style instead of solid.' },\n    slotContent: { control: 'text', description: 'Badge 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.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.pill) attrs.push('pill');\n  if (args.dot) attrs.push('dot');\n  if (args.outline) attrs.push('outline');\n  return `<ts-badge ${attrs.join(' ')}>${args.slotContent || 'Badge'}</ts-badge>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    variant: 'primary',\n    size: 'md',\n    pill: false,\n    dot: false,\n    outline: false,\n    slotContent: 'New',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center; flex-wrap: wrap;\">\n    <ts-badge variant=\"primary\">Primary</ts-badge>\n    <ts-badge variant=\"secondary\">Secondary</ts-badge>\n    <ts-badge variant=\"success\">Success</ts-badge>\n    <ts-badge variant=\"warning\">Warning</ts-badge>\n    <ts-badge variant=\"danger\">Danger</ts-badge>\n    <ts-badge variant=\"info\">Info</ts-badge>\n    <ts-badge variant=\"neutral\">Neutral</ts-badge>\n  </div>\n`;\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center; flex-wrap: wrap;\">\n    <ts-badge size=\"xs\">Extra Small</ts-badge>\n    <ts-badge size=\"sm\">Small</ts-badge>\n    <ts-badge size=\"md\">Medium</ts-badge>\n    <ts-badge size=\"lg\">Large</ts-badge>\n    <ts-badge size=\"xl\">Extra Large</ts-badge>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Solid (default)</p>\n      <div style=\"display: flex; gap: 12px; align-items: center; flex-wrap: wrap;\">\n        <ts-badge variant=\"primary\">Active</ts-badge>\n        <ts-badge variant=\"success\">Completed</ts-badge>\n        <ts-badge variant=\"warning\">Pending</ts-badge>\n        <ts-badge variant=\"danger\">Failed</ts-badge>\n      </div>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Outline</p>\n      <div style=\"display: flex; gap: 12px; align-items: center; flex-wrap: wrap;\">\n        <ts-badge variant=\"primary\" outline>Active</ts-badge>\n        <ts-badge variant=\"success\" outline>Completed</ts-badge>\n        <ts-badge variant=\"warning\" outline>Pending</ts-badge>\n        <ts-badge variant=\"danger\" outline>Failed</ts-badge>\n      </div>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Pill</p>\n      <div style=\"display: flex; gap: 12px; align-items: center; flex-wrap: wrap;\">\n        <ts-badge variant=\"primary\" pill>12</ts-badge>\n        <ts-badge variant=\"danger\" pill>99+</ts-badge>\n        <ts-badge variant=\"success\" pill>Online</ts-badge>\n        <ts-badge variant=\"neutral\" pill>Draft</ts-badge>\n      </div>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Dot Indicator</p>\n      <div style=\"display: flex; gap: 24px; align-items: center; flex-wrap: wrap;\">\n        <span style=\"display: inline-flex; align-items: center; gap: 8px;\">\n          <ts-badge variant=\"success\" dot></ts-badge> Online\n        </span>\n        <span style=\"display: inline-flex; align-items: center; gap: 8px;\">\n          <ts-badge variant=\"warning\" dot></ts-badge> Away\n        </span>\n        <span style=\"display: inline-flex; align-items: center; gap: 8px;\">\n          <ts-badge variant=\"danger\" dot></ts-badge> Busy\n        </span>\n        <span style=\"display: inline-flex; align-items: center; gap: 8px;\">\n          <ts-badge variant=\"neutral\" dot></ts-badge> Offline\n        </span>\n      </div>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Outline + Pill</p>\n      <div style=\"display: flex; gap: 12px; align-items: center; flex-wrap: wrap;\">\n        <ts-badge variant=\"primary\" outline pill>v2.1.0</ts-badge>\n        <ts-badge variant=\"info\" outline pill>Beta</ts-badge>\n        <ts-badge variant=\"warning\" outline pill>Experimental</ts-badge>\n        <ts-badge variant=\"neutral\" outline pill>Archived</ts-badge>\n      </div>\n    </div>\n  </div>\n`;\n\nexport const WithIcons = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center; flex-wrap: wrap;\">\n    <span style=\"display: inline-flex; align-items: center; gap: 6px;\">\n      <ts-icon name=\"bell\" size=\"sm\"></ts-icon>\n      Notifications\n      <ts-badge variant=\"danger\" pill size=\"sm\">5</ts-badge>\n    </span>\n    <span style=\"display: inline-flex; align-items: center; gap: 6px;\">\n      <ts-icon name=\"mail\" size=\"sm\"></ts-icon>\n      Messages\n      <ts-badge variant=\"primary\" pill size=\"sm\">23</ts-badge>\n    </span>\n    <span style=\"display: inline-flex; align-items: center; gap: 6px;\">\n      <ts-icon name=\"git-pull-request\" size=\"sm\"></ts-icon>\n      Pull Requests\n      <ts-badge variant=\"success\" pill size=\"sm\">2</ts-badge>\n    </span>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 500px;\">\n    <ts-card bordered>\n      <span slot=\"header\">\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <h3 style=\"margin: 0;\">Deployments</h3>\n          <ts-badge variant=\"success\" pill size=\"sm\">3 active</ts-badge>\n        </div>\n      </span>\n      <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <div>\n            <div style=\"font-weight: 600;\">Production</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">main @ a1b2c3d</div>\n          </div>\n          <ts-badge variant=\"success\" pill size=\"sm\">Live</ts-badge>\n        </div>\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <div>\n            <div style=\"font-weight: 600;\">Staging</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">develop @ e4f5g6h</div>\n          </div>\n          <ts-badge variant=\"info\" pill size=\"sm\">Building</ts-badge>\n        </div>\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <div>\n            <div style=\"font-weight: 600;\">Preview</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">feature/auth @ i7j8k9l</div>\n          </div>\n          <ts-badge variant=\"warning\" pill size=\"sm\">Queued</ts-badge>\n        </div>\n        <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n          <div>\n            <div style=\"font-weight: 600;\">Canary</div>\n            <div style=\"font-size: 13px; color: var(--ts-color-text-secondary);\">release/v3 @ m0n1o2p</div>\n          </div>\n          <ts-badge variant=\"danger\" pill size=\"sm\">Failed</ts-badge>\n        </div>\n      </div>\n    </ts-card>\n\n    <div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n      <ts-badge variant=\"primary\" outline pill>React</ts-badge>\n      <ts-badge variant=\"success\" outline pill>Node.js</ts-badge>\n      <ts-badge variant=\"info\" outline pill>TypeScript</ts-badge>\n      <ts-badge variant=\"warning\" outline pill>GraphQL</ts-badge>\n      <ts-badge variant=\"danger\" outline pill>Redis</ts-badge>\n      <ts-badge variant=\"neutral\" outline pill>Docker</ts-badge>\n    </div>\n  </div>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../src/components/banner/banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, State, h, Host, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsVariant } from '../../types';\n\n/**\n * @slot - Default slot for message content.\n * @slot action - CTA button.\n *\n * @part base - The banner container.\n * @part icon - The icon wrapper.\n * @part message - The message wrapper.\n * @part action - The action slot wrapper.\n * @part close - The close/dismiss button.\n */\n@Component({\n  tag: 'ts-banner',\n  styleUrl: 'banner.css',\n  shadow: true,\n})\nexport class TsBanner {\n  /** The banner's semantic variant. */\n  @Prop({ reflect: true }) variant: TsVariant = 'info';\n\n  /** Whether the banner can be dismissed. */\n  @Prop({ reflect: true }) dismissible = false;\n\n  /** Optional Lucide icon name. */\n  @Prop() icon?: string;\n\n  /** Whether the banner sticks to the top of the viewport. */\n  @Prop({ reflect: true }) sticky = false;\n\n  /** Whether the banner is currently visible. */\n  @State() isVisible = true;\n\n  /** Emitted when the banner is dismissed. */\n  @Event({ eventName: 'tsClose' }) tsClose!: EventEmitter<void>;\n\n  /** Programmatically close the banner. */\n  @Method()\n  async close(): Promise<void> {\n    this.isVisible = false;\n    this.tsClose.emit();\n  }\n\n  /** Programmatically show the banner. */\n  @Method()\n  async show(): Promise<void> {\n    this.isVisible = true;\n  }\n\n  private handleClose = (): void => {\n    this.close();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderDefaultIcon() {\n    const icons: Record<string, string> = {\n      info: '\\u2139',\n      success: '\\u2713',\n      warning: '\\u26A0',\n      danger: '\\u2715',\n      primary: '\\u2139',\n      secondary: '\\u2139',\n      neutral: '\\u2139',\n    };\n    return <span aria-hidden=\"true\">{icons[this.variant] || '\\u2139'}</span>;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    if (!this.isVisible) return null;\n\n    const role = this.variant === 'danger' ? 'alert' : 'banner';\n    const ariaLive = this.variant === 'danger' ? 'assertive' : 'polite';\n\n    return (\n      <Host\n        class={{\n          'ts-banner': true,\n          [`ts-banner--${this.variant}`]: true,\n          'ts-banner--sticky': this.sticky,\n        }}\n        role={role}\n        aria-live={ariaLive}\n      >\n        <div class=\"banner__base\" part=\"base\">\n          <div class=\"banner__icon\" part=\"icon\">\n            {this.icon ? <ts-icon name={this.icon} /> : this.renderDefaultIcon()}\n          </div>\n\n          <div class=\"banner__message\" part=\"message\">\n            <slot />\n          </div>\n\n          <div class=\"banner__action\" part=\"action\">\n            <slot name=\"action\" />\n          </div>\n\n          {this.dismissible && (\n            <button\n              class=\"banner__close\"\n              part=\"close\"\n              type=\"button\"\n              aria-label=\"Dismiss banner\"\n              onClick={this.handleClose}\n            >\n              \\u2715\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,92 +0,0 @@
-// Hand-written stories for ts-banner
-export default {
-    title: 'Components/Banner',
-    tags: ['autodocs'],
-    argTypes: {
-        variant: {
-            control: 'select',
-            options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],
-            description: 'The banner\'s semantic variant.',
-        },
-        dismissible: {
-            control: 'boolean',
-            description: 'Whether the banner can be dismissed.',
-        },
-        icon: {
-            control: 'text',
-            description: 'Optional Lucide icon name.',
-        },
-        sticky: {
-            control: 'boolean',
-            description: 'Whether the banner sticks to the top of the viewport.',
-        },
-        slotContent: {
-            control: 'text',
-            description: 'Default slot content',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.variant !== undefined)
-        attrs.push(`variant="${args.variant}"`);
-    if (args.dismissible)
-        attrs.push('dismissible');
-    if (args.icon !== undefined && args.icon !== '')
-        attrs.push(`icon="${args.icon}"`);
-    if (args.sticky)
-        attrs.push('sticky');
-    return `<ts-banner ${attrs.join(' ')}>${args.slotContent || ''}</ts-banner>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        variant: 'info',
-        dismissible: true,
-        slotContent: 'System maintenance scheduled for Sunday, March 29 at 2:00 AM UTC.',
-    },
-});
-export const Variants = () => `
-  <div style="display: flex; flex-direction: column; gap: 12px;">
-    <ts-banner variant="info">A new version of the application is available.</ts-banner>
-    <ts-banner variant="success">Your payment was processed successfully.</ts-banner>
-    <ts-banner variant="warning">Your storage is almost full. Consider upgrading your plan.</ts-banner>
-    <ts-banner variant="danger">Your account has been flagged for suspicious activity.</ts-banner>
-    <ts-banner variant="neutral">We have updated our terms of service.</ts-banner>
-    <ts-banner variant="primary">New feature available: Try our advanced analytics dashboard.</ts-banner>
-  </div>
-`;
-export const States = () => `
-  <div style="display: flex; flex-direction: column; gap: 12px;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Dismissible</p>
-      <ts-banner variant="info" dismissible>System maintenance scheduled for Sunday at 2:00 AM UTC.</ts-banner>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Not dismissible</p>
-      <ts-banner variant="warning">This banner cannot be dismissed.</ts-banner>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">With action</p>
-      <ts-banner variant="info" dismissible>
-        A new feature is available.
-        <ts-button slot="action" size="sm" appearance="outline">Learn More</ts-button>
-      </ts-banner>
-    </div>
-  </div>
-`;
-export const Composition = () => `
-  <div style="display: flex; flex-direction: column; gap: 12px;">
-    <ts-banner variant="warning" dismissible>
-      Your trial expires in 3 days. Upgrade now to keep access to all features.
-      <ts-button slot="action" size="sm" variant="warning" appearance="outline">Upgrade Plan</ts-button>
-    </ts-banner>
-    <ts-banner variant="success" dismissible>
-      Welcome! Your account has been verified successfully.
-    </ts-banner>
-    <ts-banner variant="danger">
-      Action required: Please verify your email address to continue.
-      <ts-button slot="action" size="sm" variant="danger" appearance="outline">Verify Email</ts-button>
-    </ts-banner>
-  </div>
-`;
-//# sourceMappingURL=banner.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"banner.stories.js","sourceRoot":"","sources":["../../../src/components/banner/banner.stories.ts"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC;YACpF,WAAW,EAAE,iCAAiC;SAC/C;QACD,WAAW,EAAE;YACX,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,sCAAsC;SACpD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4BAA4B;SAC1C;QACD,MAAM,EAAE;YACN,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,uDAAuD;SACrE;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sBAAsB;SACpC;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;QAAE,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAChD,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IACnF,IAAI,IAAI,CAAC,MAAM;QAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,OAAO,cAAc,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,cAAc,CAAC;AAC/E,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,MAAM;QACf,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,mEAAmE;KACjF;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;CASrC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;CAkBnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;CAcxC,CAAC","sourcesContent":["// Hand-written stories for ts-banner\n\nexport default {\n  title: 'Components/Banner',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],\n      description: 'The banner\\'s semantic variant.',\n    },\n    dismissible: {\n      control: 'boolean',\n      description: 'Whether the banner can be dismissed.',\n    },\n    icon: {\n      control: 'text',\n      description: 'Optional Lucide icon name.',\n    },\n    sticky: {\n      control: 'boolean',\n      description: 'Whether the banner sticks to the top of the viewport.',\n    },\n    slotContent: {\n      control: 'text',\n      description: 'Default slot content',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.variant !== undefined) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.dismissible) attrs.push('dismissible');\n  if (args.icon !== undefined && args.icon !== '') attrs.push(`icon=\"${args.icon}\"`);\n  if (args.sticky) attrs.push('sticky');\n  return `<ts-banner ${attrs.join(' ')}>${args.slotContent || ''}</ts-banner>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    variant: 'info',\n    dismissible: true,\n    slotContent: 'System maintenance scheduled for Sunday, March 29 at 2:00 AM UTC.',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n    <ts-banner variant=\"info\">A new version of the application is available.</ts-banner>\n    <ts-banner variant=\"success\">Your payment was processed successfully.</ts-banner>\n    <ts-banner variant=\"warning\">Your storage is almost full. Consider upgrading your plan.</ts-banner>\n    <ts-banner variant=\"danger\">Your account has been flagged for suspicious activity.</ts-banner>\n    <ts-banner variant=\"neutral\">We have updated our terms of service.</ts-banner>\n    <ts-banner variant=\"primary\">New feature available: Try our advanced analytics dashboard.</ts-banner>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Dismissible</p>\n      <ts-banner variant=\"info\" dismissible>System maintenance scheduled for Sunday at 2:00 AM UTC.</ts-banner>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Not dismissible</p>\n      <ts-banner variant=\"warning\">This banner cannot be dismissed.</ts-banner>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">With action</p>\n      <ts-banner variant=\"info\" dismissible>\n        A new feature is available.\n        <ts-button slot=\"action\" size=\"sm\" appearance=\"outline\">Learn More</ts-button>\n      </ts-banner>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n    <ts-banner variant=\"warning\" dismissible>\n      Your trial expires in 3 days. Upgrade now to keep access to all features.\n      <ts-button slot=\"action\" size=\"sm\" variant=\"warning\" appearance=\"outline\">Upgrade Plan</ts-button>\n    </ts-banner>\n    <ts-banner variant=\"success\" dismissible>\n      Welcome! Your account has been verified successfully.\n    </ts-banner>\n    <ts-banner variant=\"danger\">\n      Action required: Please verify your email address to continue.\n      <ts-button slot=\"action\" size=\"sm\" variant=\"danger\" appearance=\"outline\">Verify Email</ts-button>\n    </ts-banner>\n  </div>\n`;\n"]}

package/dist/collection/components/breadcrumb/breadcrumb-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;GAKG;AAMH,MAAM,OAAO,gBAAgB;IAC3B,iCAAiC;IACzB,IAAI,CAAU;IAEtB,2CAA2C;IAClB,OAAO,GAAG,KAAK,CAAC;IAEzC,yDAAyD;IACjD,SAAS,CAAU;IAE3B,4EAA4E;IAC5E,MAAM;QACJ,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;QAE5C,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,OAAO,EAAE;YACtF,2DAAI,KAAK,EAAC,qBAAqB;gBAC5B,MAAM,CAAC,CAAC,CAAC,CACR,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,uBAAuB;oBAC3D,eAAQ,CACN,CACL,CAAC,CAAC,CAAC,CACF,YACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,uBAAuB,kBACf,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;oBAE/C,eAAQ,CACH,CACR;gBACA,IAAI,CAAC,SAAS,IAAI,CACjB,6DAAM,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,WAAW,iBAAa,MAAM,IACzE,IAAI,CAAC,SAAS,CACV,CACR,CACE,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for label text.\n *\n * @part link - The anchor or span element.\n * @part separator - The separator element.\n */\n@Component({\n  tag: 'ts-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.css',\n  shadow: true,\n})\nexport class TsBreadcrumbItem {\n  /** If set, renders as a link. */\n  @Prop() href?: string;\n\n  /** Marks this item as the current page. */\n  @Prop({ reflect: true }) current = false;\n\n  /** Separator character (set by parent ts-breadcrumb). */\n  @Prop() separator?: string;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const isLink = !!this.href && !this.current;\n\n    return (\n      <Host class={{ 'ts-breadcrumb-item': true, 'ts-breadcrumb-item--current': this.current }}>\n        <li class=\"breadcrumb-item__li\">\n          {isLink ? (\n            <a href={this.href} part=\"link\" class=\"breadcrumb-item__link\">\n              <slot />\n            </a>\n          ) : (\n            <span\n              part=\"link\"\n              class=\"breadcrumb-item__text\"\n              aria-current={this.current ? 'page' : undefined}\n            >\n              <slot />\n            </span>\n          )}\n          {this.separator && (\n            <span class=\"breadcrumb-item__separator\" part=\"separator\" aria-hidden=\"true\">\n              {this.separator}\n            </span>\n          )}\n        </li>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/breadcrumb/breadcrumb-item.stories.js

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

package/dist/collection/components/breadcrumb/breadcrumb-item.stories.js.map

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE;;;;;GAKG;AAMH,MAAM,OAAO,YAAY;IACZ,MAAM,CAAe;IAEhC,wDAAwD;IAChD,SAAS,GAAG,GAAG,CAAC;IAExB,kBAAkB;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;QACjE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC5B,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC7B,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YACjD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;YACpC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe;YACzB,4DAAK,IAAI,EAAC,KAAK,gBAAY,YAAY;gBACrC,2DAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB;oBACtC,8DAAQ,CACL,CACD,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n/**\n * @slot - Default slot for ts-breadcrumb-item children.\n *\n * @part nav - The nav element.\n * @part list - The ordered list element.\n */\n@Component({\n  tag: 'ts-breadcrumb',\n  styleUrl: 'breadcrumb.css',\n  shadow: true,\n})\nexport class TsBreadcrumb {\n  @Element() hostEl!: HTMLElement;\n\n  /** The separator character between breadcrumb items. */\n  @Prop() separator = '/';\n\n  componentDidRender(): void {\n    const items = this.hostEl.querySelectorAll('ts-breadcrumb-item');\n    items.forEach((item, index) => {\n      if (index < items.length - 1) {\n        item.setAttribute('separator', this.separator);\n      } else {\n        item.removeAttribute('separator');\n      }\n    });\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host class=\"ts-breadcrumb\">\n        <nav part=\"nav\" aria-label=\"Breadcrumb\">\n          <ol part=\"list\" class=\"breadcrumb__list\">\n            <slot />\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,88 +0,0 @@
-// Hand-written stories for ts-breadcrumb
-export default {
-    title: 'Components/Breadcrumb',
-    tags: ['autodocs'],
-    argTypes: {
-        separator: {
-            control: 'text',
-            description: 'The separator character between breadcrumb items.',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.separator !== undefined && args.separator !== null)
-        attrs.push(`separator="${args.separator}"`);
-    return `
-    <ts-breadcrumb ${attrs.join(' ')}>
-      <ts-breadcrumb-item href="/">Home</ts-breadcrumb-item>
-      <ts-breadcrumb-item href="/products">Products</ts-breadcrumb-item>
-      <ts-breadcrumb-item href="/products/electronics">Electronics</ts-breadcrumb-item>
-      <ts-breadcrumb-item current>Headphones</ts-breadcrumb-item>
-    </ts-breadcrumb>
-  `;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        separator: '/',
-    },
-});
-export const Variants = () => `
-  <div style="display: flex; flex-direction: column; gap: 16px;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Slash separator (default)</p>
-      <ts-breadcrumb>
-        <ts-breadcrumb-item href="/">Home</ts-breadcrumb-item>
-        <ts-breadcrumb-item href="/docs">Docs</ts-breadcrumb-item>
-        <ts-breadcrumb-item current>Getting Started</ts-breadcrumb-item>
-      </ts-breadcrumb>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Arrow separator</p>
-      <ts-breadcrumb separator=">">
-        <ts-breadcrumb-item href="/">Home</ts-breadcrumb-item>
-        <ts-breadcrumb-item href="/docs">Docs</ts-breadcrumb-item>
-        <ts-breadcrumb-item current>Getting Started</ts-breadcrumb-item>
-      </ts-breadcrumb>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Pipe separator</p>
-      <ts-breadcrumb separator="|">
-        <ts-breadcrumb-item href="/">Home</ts-breadcrumb-item>
-        <ts-breadcrumb-item href="/docs">Docs</ts-breadcrumb-item>
-        <ts-breadcrumb-item current>Getting Started</ts-breadcrumb-item>
-      </ts-breadcrumb>
-    </div>
-  </div>
-`;
-export const Composition = () => `
-  <div style="display: flex; flex-direction: column; gap: 24px;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">E-commerce navigation</p>
-      <ts-breadcrumb>
-        <ts-breadcrumb-item href="/">Home</ts-breadcrumb-item>
-        <ts-breadcrumb-item href="/products">Products</ts-breadcrumb-item>
-        <ts-breadcrumb-item href="/products/electronics">Electronics</ts-breadcrumb-item>
-        <ts-breadcrumb-item current>Headphones</ts-breadcrumb-item>
-      </ts-breadcrumb>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Admin panel</p>
-      <ts-breadcrumb separator=">">
-        <ts-breadcrumb-item href="/admin">Admin</ts-breadcrumb-item>
-        <ts-breadcrumb-item href="/admin/users">Users</ts-breadcrumb-item>
-        <ts-breadcrumb-item href="/admin/users/42">John Doe</ts-breadcrumb-item>
-        <ts-breadcrumb-item current>Edit Profile</ts-breadcrumb-item>
-      </ts-breadcrumb>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Documentation path</p>
-      <ts-breadcrumb>
-        <ts-breadcrumb-item href="/docs">Documentation</ts-breadcrumb-item>
-        <ts-breadcrumb-item href="/docs/components">Components</ts-breadcrumb-item>
-        <ts-breadcrumb-item current>Breadcrumb</ts-breadcrumb-item>
-      </ts-breadcrumb>
-    </div>
-  </div>
-`;
-//# sourceMappingURL=breadcrumb.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.stories.ts"],"names":[],"mappings":"AAAA,yCAAyC;AAEzC,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,mDAAmD;SACjE;KACF;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,OAAO;qBACY,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;GAMjC,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,SAAS,EAAE,GAAG;KACf;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BxC,CAAC","sourcesContent":["// Hand-written stories for ts-breadcrumb\n\nexport default {\n  title: 'Components/Breadcrumb',\n  tags: ['autodocs'],\n  argTypes: {\n    separator: {\n      control: 'text',\n      description: 'The separator character between breadcrumb items.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.separator !== undefined && args.separator !== null) attrs.push(`separator=\"${args.separator}\"`);\n  return `\n    <ts-breadcrumb ${attrs.join(' ')}>\n      <ts-breadcrumb-item href=\"/\">Home</ts-breadcrumb-item>\n      <ts-breadcrumb-item href=\"/products\">Products</ts-breadcrumb-item>\n      <ts-breadcrumb-item href=\"/products/electronics\">Electronics</ts-breadcrumb-item>\n      <ts-breadcrumb-item current>Headphones</ts-breadcrumb-item>\n    </ts-breadcrumb>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    separator: '/',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Slash separator (default)</p>\n      <ts-breadcrumb>\n        <ts-breadcrumb-item href=\"/\">Home</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/docs\">Docs</ts-breadcrumb-item>\n        <ts-breadcrumb-item current>Getting Started</ts-breadcrumb-item>\n      </ts-breadcrumb>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Arrow separator</p>\n      <ts-breadcrumb separator=\">\">\n        <ts-breadcrumb-item href=\"/\">Home</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/docs\">Docs</ts-breadcrumb-item>\n        <ts-breadcrumb-item current>Getting Started</ts-breadcrumb-item>\n      </ts-breadcrumb>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Pipe separator</p>\n      <ts-breadcrumb separator=\"|\">\n        <ts-breadcrumb-item href=\"/\">Home</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/docs\">Docs</ts-breadcrumb-item>\n        <ts-breadcrumb-item current>Getting Started</ts-breadcrumb-item>\n      </ts-breadcrumb>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">E-commerce navigation</p>\n      <ts-breadcrumb>\n        <ts-breadcrumb-item href=\"/\">Home</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/products\">Products</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/products/electronics\">Electronics</ts-breadcrumb-item>\n        <ts-breadcrumb-item current>Headphones</ts-breadcrumb-item>\n      </ts-breadcrumb>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Admin panel</p>\n      <ts-breadcrumb separator=\">\">\n        <ts-breadcrumb-item href=\"/admin\">Admin</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/admin/users\">Users</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/admin/users/42\">John Doe</ts-breadcrumb-item>\n        <ts-breadcrumb-item current>Edit Profile</ts-breadcrumb-item>\n      </ts-breadcrumb>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Documentation path</p>\n      <ts-breadcrumb>\n        <ts-breadcrumb-item href=\"/docs\">Documentation</ts-breadcrumb-item>\n        <ts-breadcrumb-item href=\"/docs/components\">Components</ts-breadcrumb-item>\n        <ts-breadcrumb-item current>Breadcrumb</ts-breadcrumb-item>\n      </ts-breadcrumb>\n    </div>\n  </div>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host, Element } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsVariant, TsAppearance } from '../../types';\n\n/**\n * @slot - Default slot for button label content.\n * @slot prefix - Content before the label (e.g., icon).\n * @slot suffix - Content after the label (e.g., icon).\n *\n * @part base - The native button element.\n * @part label - The label wrapper.\n * @part prefix - The prefix slot wrapper.\n * @part suffix - The suffix slot wrapper.\n * @part spinner - The loading spinner element.\n */\n@Component({\n  tag: 'ts-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class TsButton {\n  @Element() hostEl!: HTMLElement;\n\n  /** The button's visual variant. */\n  @Prop({ reflect: true }) variant: TsVariant = 'primary';\n\n  /** The button's visual weight / appearance. */\n  @Prop({ reflect: true }) appearance: TsAppearance = 'solid';\n\n  /** The button's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Renders the button in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Renders a loading spinner and disables the button. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Makes the button take the full width of its container. */\n  @Prop({ reflect: true }) block = false;\n\n  /** The type attribute for the native button. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** An optional href — renders an anchor instead of a button. */\n  @Prop() href?: string;\n\n  /** Target attribute when href is set. */\n  @Prop() target?: '_blank' | '_self' | '_parent' | '_top';\n\n  /** Emitted when the button is clicked (not fired when disabled/loading). */\n  @Event({ eventName: 'tsClick' }) tsClick!: EventEmitter<void>;\n\n  /** Emitted when the button receives focus. */\n  @Event({ eventName: 'tsFocus' }) tsFocus!: EventEmitter<void>;\n\n  /** Emitted when the button loses focus. */\n  @Event({ eventName: 'tsBlur' }) tsBlur!: EventEmitter<void>;\n\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.tsClick.emit();\n  };\n\n  private handleFocus = (): void => {\n    this.tsFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.tsBlur.emit();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderSpinner() {\n    return (\n      <span class=\"button__spinner\" part=\"spinner\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-dasharray=\"31.4 31.4\" />\n        </svg>\n      </span>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const isLink = !!this.href;\n    const Tag = isLink ? 'a' : 'button';\n\n    const attrs = isLink\n      ? {\n          href: this.disabled ? undefined : this.href,\n          target: this.target,\n          rel: this.target === '_blank' ? 'noopener noreferrer' : undefined,\n          role: 'button',\n        }\n      : {\n          type: this.type,\n          disabled: this.disabled || this.loading,\n        };\n\n    return (\n      <Host\n        class={{\n          'ts-button': true,\n          [`ts-button--${this.variant}`]: true,\n          [`ts-button--${this.appearance}`]: true,\n          [`ts-button--${this.size}`]: true,\n          'ts-button--disabled': this.disabled,\n          'ts-button--loading': this.loading,\n          'ts-button--block': this.block,\n        }}\n      >\n        <Tag\n          {...attrs}\n          class=\"button__native\"\n          part=\"base\"\n          aria-disabled={this.disabled || this.loading ? 'true' : undefined}\n          aria-busy={this.loading ? 'true' : undefined}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          {this.loading && this.renderSpinner()}\n\n          <span class=\"button__prefix\" part=\"prefix\">\n            <slot name=\"prefix\" />\n          </span>\n\n          <span class=\"button__label\" part=\"label\">\n            <slot />\n          </span>\n\n          <span class=\"button__suffix\" part=\"suffix\">\n            <slot name=\"suffix\" />\n          </span>\n        </Tag>\n      </Host>\n    );\n  }\n}\n"]}