@tessera-ui/core 0.4.0 → 0.5.0

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIhE;;;;;;;;GAQG;AAMH,MAAM,OAAO,MAAM;IACjB,mCAAmC;IACV,OAAO,GAAc,SAAS,CAAC;IAExD,uBAAuB;IACE,IAAI,GAAW,IAAI,CAAC;IAE7C,8CAA8C;IACrB,SAAS,GAAG,KAAK,CAAC;IAE3C,oCAAoC;IACX,QAAQ,GAAG,KAAK,CAAC;IAE1C,oCAAoC;IACX,QAAQ,GAAG,KAAK,CAAC;IAE1C,0CAA0C;IACjB,OAAO,GAAG,KAAK,CAAC;IAEzC,iDAAiD;IACf,QAAQ,CAAsB;IAEhE,6CAA6C;IACZ,OAAO,CAAsB;IAEtD,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,CAAC;IAEM,YAAY,GAAG,CAAC,KAAiB,EAAQ,EAAE;QACjD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;IAEM,aAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;QACrD,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAEM,mBAAmB,GAAG,CAAC,KAAoB,EAAQ,EAAE;QAC3D,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IAEF,4EAA4E;IAC5E,MAAM;QACJ,MAAM,aAAa,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAErC,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,YAAY,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBAClC,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBAC/B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;gBAClC,kBAAkB,EAAE,IAAI,CAAC,OAAO;gBAChC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;gBAClC,oBAAoB,EAAE,IAAI,CAAC,SAAS;aACrC;YAED,6DACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,mBAC1B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,kBACnC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa;gBAE7B,6DAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ;oBACtC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACjB;gBAEP,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO;oBACpC,8DAAQ,CACH;gBAEN,IAAI,CAAC,SAAS,IAAI,CACjB,+DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,gBACF,QAAQ,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,mBAAmB,cAG5B,CACV,CACI,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, h, Host } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsVariant, TsSize } from '../../types';\n\n/**\n * @slot - Default slot for chip label.\n * @slot prefix - Icon or content before the label.\n *\n * @part base - The chip container.\n * @part label - The label wrapper.\n * @part prefix - The prefix slot wrapper.\n * @part remove - The remove button.\n */\n@Component({\n  tag: 'ts-chip',\n  styleUrl: 'chip.css',\n  shadow: true,\n})\nexport class TsChip {\n  /** The chip's semantic variant. */\n  @Prop({ reflect: true }) variant: TsVariant = 'neutral';\n\n  /** The chip's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Whether the chip shows a remove button. */\n  @Prop({ reflect: true }) removable = false;\n\n  /** Whether the chip is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Whether the chip is selected. */\n  @Prop({ reflect: true }) selected = false;\n\n  /** Whether to render as outline style. */\n  @Prop({ reflect: true }) outline = false;\n\n  /** Emitted when the remove button is clicked. */\n  @Event({ eventName: 'tsRemove' }) tsRemove!: EventEmitter<void>;\n\n  /** Emitted when the chip body is clicked. */\n  @Event({ eventName: 'tsClick' }) tsClick!: EventEmitter<void>;\n\n  private handleClick = (): void => {\n    if (this.disabled) return;\n    this.tsClick.emit();\n  };\n\n  private handleRemove = (event: MouseEvent): void => {\n    event.stopPropagation();\n    if (this.disabled) return;\n    this.tsRemove.emit();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (this.disabled) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.tsClick.emit();\n    }\n  };\n\n  private handleRemoveKeydown = (event: KeyboardEvent): void => {\n    if (this.disabled) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.tsRemove.emit();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const isInteractive = !this.disabled;\n\n    return (\n      <Host\n        class={{\n          'ts-chip': true,\n          [`ts-chip--${this.variant}`]: true,\n          [`ts-chip--${this.size}`]: true,\n          'ts-chip--selected': this.selected,\n          'ts-chip--outline': this.outline,\n          'ts-chip--disabled': this.disabled,\n          'ts-chip--removable': this.removable,\n        }}\n      >\n        <span\n          class=\"chip__base\"\n          part=\"base\"\n          role=\"button\"\n          tabindex={isInteractive ? '0' : undefined}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          aria-pressed={this.selected ? 'true' : undefined}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n        >\n          <span class=\"chip__prefix\" part=\"prefix\">\n            <slot name=\"prefix\" />\n          </span>\n\n          <span class=\"chip__label\" part=\"label\">\n            <slot />\n          </span>\n\n          {this.removable && (\n            <button\n              class=\"chip__remove\"\n              part=\"remove\"\n              type=\"button\"\n              aria-label=\"Remove\"\n              disabled={this.disabled}\n              onClick={this.handleRemove}\n              onKeyDown={this.handleRemoveKeydown}\n            >\n              \\u2715\n            </button>\n          )}\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,139 +0,0 @@
-// Hand-written stories for ts-chip
-export default {
-    title: 'Components/Chip',
-    tags: ['autodocs'],
-    argTypes: {
-        variant: {
-            control: 'select',
-            options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],
-            description: 'The chip\'s semantic variant.',
-        },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg'],
-            description: 'The chip\'s size.',
-        },
-        removable: {
-            control: 'boolean',
-            description: 'Whether the chip shows a remove button.',
-        },
-        disabled: {
-            control: 'boolean',
-            description: 'Whether the chip is disabled.',
-        },
-        selected: {
-            control: 'boolean',
-            description: 'Whether the chip is selected.',
-        },
-        outline: {
-            control: 'boolean',
-            description: 'Whether to render as outline style.',
-        },
-        slotContent: {
-            control: 'text',
-            description: 'Default slot content',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.variant !== undefined)
-        attrs.push(`variant="${args.variant}"`);
-    if (args.size !== undefined)
-        attrs.push(`size="${args.size}"`);
-    if (args.removable)
-        attrs.push('removable');
-    if (args.disabled)
-        attrs.push('disabled');
-    if (args.selected)
-        attrs.push('selected');
-    if (args.outline)
-        attrs.push('outline');
-    return `<ts-chip ${attrs.join(' ')}>${args.slotContent || ''}</ts-chip>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        variant: 'primary',
-        size: 'md',
-        removable: false,
-        disabled: false,
-        selected: false,
-        outline: false,
-        slotContent: 'React',
-    },
-});
-export const Variants = () => `
-  <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
-    <ts-chip variant="primary">Primary</ts-chip>
-    <ts-chip variant="secondary">Secondary</ts-chip>
-    <ts-chip variant="success">Success</ts-chip>
-    <ts-chip variant="warning">Warning</ts-chip>
-    <ts-chip variant="danger">Danger</ts-chip>
-    <ts-chip variant="info">Info</ts-chip>
-    <ts-chip variant="neutral">Neutral</ts-chip>
-  </div>
-`;
-export const Sizes = () => `
-  <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
-    <ts-chip size="sm">Small</ts-chip>
-    <ts-chip size="md">Medium</ts-chip>
-    <ts-chip size="lg">Large</ts-chip>
-  </div>
-`;
-export const States = () => `
-  <div style="display: flex; flex-direction: column; gap: 12px;">
-    <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
-      <p style="margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;">Default</p>
-      <ts-chip>React</ts-chip>
-      <ts-chip>Vue</ts-chip>
-      <ts-chip>Angular</ts-chip>
-    </div>
-    <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
-      <p style="margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;">Selected</p>
-      <ts-chip selected>React</ts-chip>
-      <ts-chip selected>Vue</ts-chip>
-      <ts-chip>Angular</ts-chip>
-    </div>
-    <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
-      <p style="margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;">Disabled</p>
-      <ts-chip disabled>React</ts-chip>
-      <ts-chip disabled>Vue</ts-chip>
-    </div>
-    <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
-      <p style="margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;">Outline</p>
-      <ts-chip outline>React</ts-chip>
-      <ts-chip outline variant="success">Vue</ts-chip>
-      <ts-chip outline variant="danger">Angular</ts-chip>
-    </div>
-    <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
-      <p style="margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;">Removable</p>
-      <ts-chip removable>React</ts-chip>
-      <ts-chip removable>Vue</ts-chip>
-      <ts-chip removable>Angular</ts-chip>
-    </div>
-  </div>
-`;
-export const Composition = () => `
-  <div style="font-family: sans-serif;">
-    <div style="margin-bottom: 24px;">
-      <p style="margin: 0 0 8px; font-weight: 600;">Tech Stack</p>
-      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-        <ts-chip variant="primary" removable>React</ts-chip>
-        <ts-chip variant="success" removable>Node.js</ts-chip>
-        <ts-chip variant="info" removable>TypeScript</ts-chip>
-        <ts-chip variant="warning" removable>PostgreSQL</ts-chip>
-      </div>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-weight: 600;">Filter by category</p>
-      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-        <ts-chip selected outline>All</ts-chip>
-        <ts-chip outline>Frontend</ts-chip>
-        <ts-chip outline>Backend</ts-chip>
-        <ts-chip outline>DevOps</ts-chip>
-        <ts-chip outline>Design</ts-chip>
-      </div>
-    </div>
-  </div>
-`;
-//# sourceMappingURL=chip.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"chip.stories.js","sourceRoot":"","sources":["../../../src/components/chip/chip.stories.ts"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,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,+BAA+B;SAC7C;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,WAAW,EAAE,mBAAmB;SACjC;QACD,SAAS,EAAE;YACT,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,yCAAyC;SACvD;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,+BAA+B;SAC7C;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,+BAA+B;SAC7C;QACD,OAAO,EAAE;YACP,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,qCAAqC;SACnD;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,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,IAAI,IAAI,CAAC,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5C,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,IAAI,CAAC,OAAO;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxC,OAAO,YAAY,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,YAAY,CAAC;AAC3E,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,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,WAAW,EAAE,OAAO;KACrB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;CAUrC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;CAMlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;CAsBxC,CAAC","sourcesContent":["// Hand-written stories for ts-chip\n\nexport default {\n  title: 'Components/Chip',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],\n      description: 'The chip\\'s semantic variant.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The chip\\'s size.',\n    },\n    removable: {\n      control: 'boolean',\n      description: 'Whether the chip shows a remove button.',\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Whether the chip is disabled.',\n    },\n    selected: {\n      control: 'boolean',\n      description: 'Whether the chip is selected.',\n    },\n    outline: {\n      control: 'boolean',\n      description: 'Whether to render as outline style.',\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.size !== undefined) attrs.push(`size=\"${args.size}\"`);\n  if (args.removable) attrs.push('removable');\n  if (args.disabled) attrs.push('disabled');\n  if (args.selected) attrs.push('selected');\n  if (args.outline) attrs.push('outline');\n  return `<ts-chip ${attrs.join(' ')}>${args.slotContent || ''}</ts-chip>`;\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    removable: false,\n    disabled: false,\n    selected: false,\n    outline: false,\n    slotContent: 'React',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; gap: 8px; flex-wrap: wrap; align-items: center;\">\n    <ts-chip variant=\"primary\">Primary</ts-chip>\n    <ts-chip variant=\"secondary\">Secondary</ts-chip>\n    <ts-chip variant=\"success\">Success</ts-chip>\n    <ts-chip variant=\"warning\">Warning</ts-chip>\n    <ts-chip variant=\"danger\">Danger</ts-chip>\n    <ts-chip variant=\"info\">Info</ts-chip>\n    <ts-chip variant=\"neutral\">Neutral</ts-chip>\n  </div>\n`;\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; gap: 8px; flex-wrap: wrap; align-items: center;\">\n    <ts-chip size=\"sm\">Small</ts-chip>\n    <ts-chip size=\"md\">Medium</ts-chip>\n    <ts-chip size=\"lg\">Large</ts-chip>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n    <div style=\"display: flex; gap: 8px; flex-wrap: wrap; align-items: center;\">\n      <p style=\"margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;\">Default</p>\n      <ts-chip>React</ts-chip>\n      <ts-chip>Vue</ts-chip>\n      <ts-chip>Angular</ts-chip>\n    </div>\n    <div style=\"display: flex; gap: 8px; flex-wrap: wrap; align-items: center;\">\n      <p style=\"margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;\">Selected</p>\n      <ts-chip selected>React</ts-chip>\n      <ts-chip selected>Vue</ts-chip>\n      <ts-chip>Angular</ts-chip>\n    </div>\n    <div style=\"display: flex; gap: 8px; flex-wrap: wrap; align-items: center;\">\n      <p style=\"margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;\">Disabled</p>\n      <ts-chip disabled>React</ts-chip>\n      <ts-chip disabled>Vue</ts-chip>\n    </div>\n    <div style=\"display: flex; gap: 8px; flex-wrap: wrap; align-items: center;\">\n      <p style=\"margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;\">Outline</p>\n      <ts-chip outline>React</ts-chip>\n      <ts-chip outline variant=\"success\">Vue</ts-chip>\n      <ts-chip outline variant=\"danger\">Angular</ts-chip>\n    </div>\n    <div style=\"display: flex; gap: 8px; flex-wrap: wrap; align-items: center;\">\n      <p style=\"margin: 0; font-family: sans-serif; font-size: 14px; color: #666; min-width: 80px;\">Removable</p>\n      <ts-chip removable>React</ts-chip>\n      <ts-chip removable>Vue</ts-chip>\n      <ts-chip removable>Angular</ts-chip>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"font-family: sans-serif;\">\n    <div style=\"margin-bottom: 24px;\">\n      <p style=\"margin: 0 0 8px; font-weight: 600;\">Tech Stack</p>\n      <div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n        <ts-chip variant=\"primary\" removable>React</ts-chip>\n        <ts-chip variant=\"success\" removable>Node.js</ts-chip>\n        <ts-chip variant=\"info\" removable>TypeScript</ts-chip>\n        <ts-chip variant=\"warning\" removable>PostgreSQL</ts-chip>\n      </div>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600;\">Filter by category</p>\n      <div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n        <ts-chip selected outline>All</ts-chip>\n        <ts-chip outline>Frontend</ts-chip>\n        <ts-chip outline>Backend</ts-chip>\n        <ts-chip outline>DevOps</ts-chip>\n        <ts-chip outline>Design</ts-chip>\n      </div>\n    </div>\n  </div>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/components/container/container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;GAIG;AAMH,MAAM,OAAO,WAAW;IACtB,0CAA0C;IACjB,IAAI,GAAuC,IAAI,CAAC;IAEzE,2CAA2C;IAClB,OAAO,GAAY,IAAI,CAAC;IAEjD,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,0BAA0B,EAAE,CAAC,IAAI,CAAC,OAAO;aAC1C;YAED,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for container content.\n *\n * @part base - The container element.\n */\n@Component({\n  tag: 'ts-container',\n  styleUrl: 'container.css',\n  shadow: true,\n})\nexport class TsContainer {\n  /** The maximum width of the container. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' | 'full' = 'lg';\n\n  /** Whether to apply horizontal padding. */\n  @Prop({ reflect: true }) padding: boolean = true;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-container': true,\n          'ts-container--no-padding': !this.padding,\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,138 +0,0 @@
-// Hand-written stories for ts-container
-export default {
-    title: 'Layout/Container',
-    tags: ['autodocs'],
-    argTypes: {
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg', 'xl', 'full'],
-            description: 'The maximum width of the container.',
-        },
-        padding: {
-            control: 'boolean',
-            description: 'Whether to apply horizontal padding.',
-        },
-    },
-};
-const contentStyle = 'padding: 24px; background: #f1f5f9; border-radius: 8px; font-family: sans-serif;';
-export const Default = () => `
-  <ts-container>
-    <div style="${contentStyle}">
-      <h2 style="margin: 0 0 8px;">Centered Container</h2>
-      <p style="margin: 0; color: #64748b;">This content is centered within a max-width container with responsive padding.</p>
-    </div>
-  </ts-container>
-`;
-export const Sizes = () => `
-  <div style="display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;">
-    <div>
-      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">sm (640px)</p>
-      <ts-container size="sm">
-        <div style="${contentStyle}">Small container</div>
-      </ts-container>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">md (768px)</p>
-      <ts-container size="md">
-        <div style="${contentStyle}">Medium container</div>
-      </ts-container>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">lg (1024px)</p>
-      <ts-container size="lg">
-        <div style="${contentStyle}">Large container</div>
-      </ts-container>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">xl (1280px)</p>
-      <ts-container size="xl">
-        <div style="${contentStyle}">Extra large container</div>
-      </ts-container>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">full (100%)</p>
-      <ts-container size="full">
-        <div style="${contentStyle}">Full width container</div>
-      </ts-container>
-    </div>
-  </div>
-`;
-export const NoPadding = () => `
-  <div style="display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;">
-    <div>
-      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">With padding (default)</p>
-      <ts-container size="md">
-        <div style="${contentStyle}">Padded container</div>
-      </ts-container>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-size: 14px; color: #666;">Without padding</p>
-      <ts-container size="md" padding="false">
-        <div style="${contentStyle}">Flush container - no horizontal padding</div>
-      </ts-container>
-    </div>
-  </div>
-`;
-export const Composition = () => `
-  <ts-container size="lg">
-    <div style="display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;">
-      <h1 style="margin: 0;">Page Title</h1>
-      <p style="margin: 0; color: #64748b;">A full page layout using container, grid, and buttons.</p>
-      <ts-grid columns="3" gap="4">
-        <div style="padding: 20px; background: #eff6ff; border-radius: 8px;">
-          <h3 style="margin: 0 0 8px;">Feature One</h3>
-          <p style="margin: 0; color: #64748b; font-size: 14px;">Description of the first feature.</p>
-        </div>
-        <div style="padding: 20px; background: #f0fdf4; border-radius: 8px;">
-          <h3 style="margin: 0 0 8px;">Feature Two</h3>
-          <p style="margin: 0; color: #64748b; font-size: 14px;">Description of the second feature.</p>
-        </div>
-        <div style="padding: 20px; background: #fef3c7; border-radius: 8px;">
-          <h3 style="margin: 0 0 8px;">Feature Three</h3>
-          <p style="margin: 0; color: #64748b; font-size: 14px;">Description of the third feature.</p>
-        </div>
-      </ts-grid>
-      <div style="display: flex; gap: 12px;">
-        <ts-button variant="primary">Get Started</ts-button>
-        <ts-button variant="neutral" appearance="outline">Learn More</ts-button>
-      </div>
-    </div>
-  </ts-container>
-`;
-export const DashboardLayout = () => `
-  <ts-container size="xl">
-    <div style="display: flex; gap: 24px; font-family: sans-serif;">
-      <nav style="width: 200px; flex-shrink: 0; padding: 16px; background: #f8fafc; border-radius: 8px;">
-        <h3 style="margin: 0 0 16px; font-size: 14px; text-transform: uppercase; color: #94a3b8;">Navigation</h3>
-        <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px;">
-          <li><a href="#" style="display: block; padding: 8px 12px; border-radius: 6px; background: #e2e8f0; color: #1e293b; text-decoration: none; font-size: 14px;">Dashboard</a></li>
-          <li><a href="#" style="display: block; padding: 8px 12px; border-radius: 6px; color: #64748b; text-decoration: none; font-size: 14px;">Analytics</a></li>
-          <li><a href="#" style="display: block; padding: 8px 12px; border-radius: 6px; color: #64748b; text-decoration: none; font-size: 14px;">Reports</a></li>
-          <li><a href="#" style="display: block; padding: 8px 12px; border-radius: 6px; color: #64748b; text-decoration: none; font-size: 14px;">Settings</a></li>
-        </ul>
-      </nav>
-      <main style="flex: 1; display: flex; flex-direction: column; gap: 20px;">
-        <h2 style="margin: 0;">Dashboard Overview</h2>
-        <ts-grid columns="3" gap="3">
-          <div style="padding: 16px; background: #f1f5f9; border-radius: 8px;">
-            <p style="margin: 0 0 4px; font-size: 13px; color: #94a3b8;">Total Users</p>
-            <p style="margin: 0; font-size: 28px; font-weight: bold;">2,847</p>
-          </div>
-          <div style="padding: 16px; background: #f1f5f9; border-radius: 8px;">
-            <p style="margin: 0 0 4px; font-size: 13px; color: #94a3b8;">Revenue</p>
-            <p style="margin: 0; font-size: 28px; font-weight: bold;">$48.2k</p>
-          </div>
-          <div style="padding: 16px; background: #f1f5f9; border-radius: 8px;">
-            <p style="margin: 0 0 4px; font-size: 13px; color: #94a3b8;">Active Now</p>
-            <p style="margin: 0; font-size: 28px; font-weight: bold;">142</p>
-          </div>
-        </ts-grid>
-        <div style="padding: 24px; background: #f8fafc; border-radius: 8px; min-height: 200px;">
-          <h3 style="margin: 0 0 12px;">Recent Activity</h3>
-          <p style="margin: 0; color: #94a3b8;">Activity feed would go here...</p>
-        </div>
-      </main>
-    </div>
-  </ts-container>
-`;
-//# sourceMappingURL=container.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"container.stories.js","sourceRoot":"","sources":["../../../src/components/container/container.stories.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC;YACzC,WAAW,EAAE,qCAAqC;SACnD;QACD,OAAO,EAAE;YACP,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,sCAAsC;SACpD;KACF;CACF,CAAC;AAEF,MAAM,YAAY,GAAG,kFAAkF,CAAC;AAExG,MAAM,CAAC,MAAM,OAAO,GAAG,GAAW,EAAE,CAAC;;kBAEnB,YAAY;;;;;CAK7B,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;sBAKb,YAAY;;;;;;sBAMZ,YAAY;;;;;;sBAMZ,YAAY;;;;;;sBAMZ,YAAY;;;;;;sBAMZ,YAAY;;;;CAIjC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;;;;;sBAKjB,YAAY;;;;;;sBAMZ,YAAY;;;;CAIjC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAyBxC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC5C,CAAC","sourcesContent":["// Hand-written stories for ts-container\n\nexport default {\n  title: 'Layout/Container',\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg', 'xl', 'full'],\n      description: 'The maximum width of the container.',\n    },\n    padding: {\n      control: 'boolean',\n      description: 'Whether to apply horizontal padding.',\n    },\n  },\n};\n\nconst contentStyle = 'padding: 24px; background: #f1f5f9; border-radius: 8px; font-family: sans-serif;';\n\nexport const Default = (): string => `\n  <ts-container>\n    <div style=\"${contentStyle}\">\n      <h2 style=\"margin: 0 0 8px;\">Centered Container</h2>\n      <p style=\"margin: 0; color: #64748b;\">This content is centered within a max-width container with responsive padding.</p>\n    </div>\n  </ts-container>\n`;\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">sm (640px)</p>\n      <ts-container size=\"sm\">\n        <div style=\"${contentStyle}\">Small container</div>\n      </ts-container>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">md (768px)</p>\n      <ts-container size=\"md\">\n        <div style=\"${contentStyle}\">Medium container</div>\n      </ts-container>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">lg (1024px)</p>\n      <ts-container size=\"lg\">\n        <div style=\"${contentStyle}\">Large container</div>\n      </ts-container>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">xl (1280px)</p>\n      <ts-container size=\"xl\">\n        <div style=\"${contentStyle}\">Extra large container</div>\n      </ts-container>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">full (100%)</p>\n      <ts-container size=\"full\">\n        <div style=\"${contentStyle}\">Full width container</div>\n      </ts-container>\n    </div>\n  </div>\n`;\n\nexport const NoPadding = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">With padding (default)</p>\n      <ts-container size=\"md\">\n        <div style=\"${contentStyle}\">Padded container</div>\n      </ts-container>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-size: 14px; color: #666;\">Without padding</p>\n      <ts-container size=\"md\" padding=\"false\">\n        <div style=\"${contentStyle}\">Flush container - no horizontal padding</div>\n      </ts-container>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <ts-container size=\"lg\">\n    <div style=\"display: flex; flex-direction: column; gap: 24px; font-family: sans-serif;\">\n      <h1 style=\"margin: 0;\">Page Title</h1>\n      <p style=\"margin: 0; color: #64748b;\">A full page layout using container, grid, and buttons.</p>\n      <ts-grid columns=\"3\" gap=\"4\">\n        <div style=\"padding: 20px; background: #eff6ff; border-radius: 8px;\">\n          <h3 style=\"margin: 0 0 8px;\">Feature One</h3>\n          <p style=\"margin: 0; color: #64748b; font-size: 14px;\">Description of the first feature.</p>\n        </div>\n        <div style=\"padding: 20px; background: #f0fdf4; border-radius: 8px;\">\n          <h3 style=\"margin: 0 0 8px;\">Feature Two</h3>\n          <p style=\"margin: 0; color: #64748b; font-size: 14px;\">Description of the second feature.</p>\n        </div>\n        <div style=\"padding: 20px; background: #fef3c7; border-radius: 8px;\">\n          <h3 style=\"margin: 0 0 8px;\">Feature Three</h3>\n          <p style=\"margin: 0; color: #64748b; font-size: 14px;\">Description of the third feature.</p>\n        </div>\n      </ts-grid>\n      <div style=\"display: flex; gap: 12px;\">\n        <ts-button variant=\"primary\">Get Started</ts-button>\n        <ts-button variant=\"neutral\" appearance=\"outline\">Learn More</ts-button>\n      </div>\n    </div>\n  </ts-container>\n`;\n\nexport const DashboardLayout = (): string => `\n  <ts-container size=\"xl\">\n    <div style=\"display: flex; gap: 24px; font-family: sans-serif;\">\n      <nav style=\"width: 200px; flex-shrink: 0; padding: 16px; background: #f8fafc; border-radius: 8px;\">\n        <h3 style=\"margin: 0 0 16px; font-size: 14px; text-transform: uppercase; color: #94a3b8;\">Navigation</h3>\n        <ul style=\"list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px;\">\n          <li><a href=\"#\" style=\"display: block; padding: 8px 12px; border-radius: 6px; background: #e2e8f0; color: #1e293b; text-decoration: none; font-size: 14px;\">Dashboard</a></li>\n          <li><a href=\"#\" style=\"display: block; padding: 8px 12px; border-radius: 6px; color: #64748b; text-decoration: none; font-size: 14px;\">Analytics</a></li>\n          <li><a href=\"#\" style=\"display: block; padding: 8px 12px; border-radius: 6px; color: #64748b; text-decoration: none; font-size: 14px;\">Reports</a></li>\n          <li><a href=\"#\" style=\"display: block; padding: 8px 12px; border-radius: 6px; color: #64748b; text-decoration: none; font-size: 14px;\">Settings</a></li>\n        </ul>\n      </nav>\n      <main style=\"flex: 1; display: flex; flex-direction: column; gap: 20px;\">\n        <h2 style=\"margin: 0;\">Dashboard Overview</h2>\n        <ts-grid columns=\"3\" gap=\"3\">\n          <div style=\"padding: 16px; background: #f1f5f9; border-radius: 8px;\">\n            <p style=\"margin: 0 0 4px; font-size: 13px; color: #94a3b8;\">Total Users</p>\n            <p style=\"margin: 0; font-size: 28px; font-weight: bold;\">2,847</p>\n          </div>\n          <div style=\"padding: 16px; background: #f1f5f9; border-radius: 8px;\">\n            <p style=\"margin: 0 0 4px; font-size: 13px; color: #94a3b8;\">Revenue</p>\n            <p style=\"margin: 0; font-size: 28px; font-weight: bold;\">$48.2k</p>\n          </div>\n          <div style=\"padding: 16px; background: #f1f5f9; border-radius: 8px;\">\n            <p style=\"margin: 0 0 4px; font-size: 13px; color: #94a3b8;\">Active Now</p>\n            <p style=\"margin: 0; font-size: 28px; font-weight: bold;\">142</p>\n          </div>\n        </ts-grid>\n        <div style=\"padding: 24px; background: #f8fafc; border-radius: 8px; min-height: 200px;\">\n          <h3 style=\"margin: 0 0 12px;\">Recent Activity</h3>\n          <p style=\"margin: 0; color: #94a3b8;\">Activity feed would go here...</p>\n        </div>\n      </main>\n    </div>\n  </ts-container>\n`;\n"]}

package/dist/collection/components/date-picker/date-picker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, h, Host, Element, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport { generateId } from '../../utils/aria';\n\nconst WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n\n/**\n * @part trigger - The input trigger element.\n * @part calendar - The calendar dropdown container.\n * @part header - The month/year navigation header.\n * @part grid - The day grid.\n * @part day - Individual day cell.\n * @part label - The label element.\n * @part error - The error message.\n */\n@Component({\n  tag: 'ts-date-picker',\n  styleUrl: 'date-picker.css',\n  shadow: true,\n})\nexport class TsDatePicker {\n  @Element() hostEl!: HTMLElement;\n\n  private pickerId = generateId('ts-date-picker');\n  private triggerEl?: HTMLInputElement;\n\n  /** The selected date value in ISO format (YYYY-MM-DD). */\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  /** Placeholder text for the input. */\n  @Prop() placeholder = 'Select date';\n\n  /** Whether the date picker is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Minimum selectable date in ISO format. */\n  @Prop() min?: string;\n\n  /** Maximum selectable date in ISO format. */\n  @Prop() max?: string;\n\n  /** Label text for the input. */\n  @Prop() label?: string;\n\n  /** Whether the input is in an error state. */\n  @Prop({ reflect: true }) error = false;\n\n  /** Error message to display. */\n  @Prop() errorMessage?: string;\n\n  /** The input size. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Form field name. */\n  @Prop() name?: string;\n\n  /** Emitted when a date is selected. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<{ value: string }>;\n\n  /** Whether the calendar dropdown is open. */\n  @State() isOpen = false;\n\n  /** The month currently being viewed (0-11). */\n  @State() viewMonth = new Date().getMonth();\n\n  /** The year currently being viewed. */\n  @State() viewYear = new Date().getFullYear();\n\n  /** Currently focused day in the grid for keyboard navigation. */\n  @State() focusedDay: number | null = null;\n\n  @Watch('value')\n  handleValueChange(): void {\n    if (this.value) {\n      const date = new Date(this.value + 'T00:00:00');\n      if (!isNaN(date.getTime())) {\n        this.viewMonth = date.getMonth();\n        this.viewYear = date.getFullYear();\n      }\n    }\n  }\n\n  connectedCallback(): void {\n    this.handleValueChange();\n  }\n\n  private toggleCalendar = (): void => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) {\n      this.handleValueChange();\n    }\n  };\n\n  private closeCalendar = (): void => {\n    this.isOpen = false;\n    this.focusedDay = null;\n  };\n\n  private prevMonth = (): void => {\n    if (this.viewMonth === 0) {\n      this.viewMonth = 11;\n      this.viewYear -= 1;\n    } else {\n      this.viewMonth -= 1;\n    }\n  };\n\n  private nextMonth = (): void => {\n    if (this.viewMonth === 11) {\n      this.viewMonth = 0;\n      this.viewYear += 1;\n    } else {\n      this.viewMonth += 1;\n    }\n  };\n\n  private selectDay = (day: number): void => {\n    const month = String(this.viewMonth + 1).padStart(2, '0');\n    const dayStr = String(day).padStart(2, '0');\n    const newValue = `${this.viewYear}-${month}-${dayStr}`;\n    this.value = newValue;\n    this.tsChange.emit({ value: newValue });\n    this.closeCalendar();\n    this.triggerEl?.focus();\n  };\n\n  private isDayDisabled(day: number): boolean {\n    const dateStr = `${this.viewYear}-${String(this.viewMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;\n    if (this.min && dateStr < this.min) return true;\n    if (this.max && dateStr > this.max) return true;\n    return false;\n  }\n\n  private isToday(day: number): boolean {\n    const today = new Date();\n    return (\n      day === today.getDate() &&\n      this.viewMonth === today.getMonth() &&\n      this.viewYear === today.getFullYear()\n    );\n  }\n\n  private isSelected(day: number): boolean {\n    if (!this.value) return false;\n    const date = new Date(this.value + 'T00:00:00');\n    return (\n      day === date.getDate() &&\n      this.viewMonth === date.getMonth() &&\n      this.viewYear === date.getFullYear()\n    );\n  }\n\n  private getDaysInMonth(): number {\n    return new Date(this.viewYear, this.viewMonth + 1, 0).getDate();\n  }\n\n  private getFirstDayOfWeek(): number {\n    return new Date(this.viewYear, this.viewMonth, 1).getDay();\n  }\n\n  private getMonthName(): string {\n    return new Date(this.viewYear, this.viewMonth).toLocaleString('default', { month: 'long' });\n  }\n\n  private handleTriggerKeydown = (event: KeyboardEvent): void => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.toggleCalendar();\n    } else if (event.key === 'Escape' && this.isOpen) {\n      this.closeCalendar();\n    }\n  };\n\n  private handleCalendarKeydown = (event: KeyboardEvent): void => {\n    const daysInMonth = this.getDaysInMonth();\n\n    if (event.key === 'Escape') {\n      this.closeCalendar();\n      this.triggerEl?.focus();\n      return;\n    }\n\n    if (this.focusedDay === null) {\n      this.focusedDay = 1;\n      return;\n    }\n\n    let newDay = this.focusedDay;\n\n    switch (event.key) {\n      case 'ArrowRight':\n        event.preventDefault();\n        newDay = Math.min(this.focusedDay + 1, daysInMonth);\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n        newDay = Math.max(this.focusedDay - 1, 1);\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n        newDay = Math.min(this.focusedDay + 7, daysInMonth);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        newDay = Math.max(this.focusedDay - 7, 1);\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (!this.isDayDisabled(this.focusedDay)) {\n          this.selectDay(this.focusedDay);\n        }\n        return;\n      default:\n        return;\n    }\n\n    this.focusedDay = newDay;\n  };\n\n  private handleDocumentClick = (event: MouseEvent): void => {\n    const path = event.composedPath();\n    if (!path.includes(this.hostEl)) {\n      this.closeCalendar();\n    }\n  };\n\n  componentDidLoad(): void {\n    document.addEventListener('click', this.handleDocumentClick);\n  }\n\n  disconnectedCallback(): void {\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderCalendar() {\n    const daysInMonth = this.getDaysInMonth();\n    const firstDay = this.getFirstDayOfWeek();\n    const days: (number | null)[] = [];\n\n    for (let i = 0; i < firstDay; i++) {\n      days.push(null);\n    }\n    for (let d = 1; d <= daysInMonth; d++) {\n      days.push(d);\n    }\n\n    return (\n      <div\n        class=\"date-picker__calendar\"\n        part=\"calendar\"\n        role=\"dialog\"\n        aria-label={`${this.getMonthName()} ${this.viewYear}`}\n        onKeyDown={this.handleCalendarKeydown}\n      >\n        <div class=\"date-picker__header\" part=\"header\">\n          <button\n            class=\"date-picker__nav-btn\"\n            type=\"button\"\n            aria-label=\"Previous month\"\n            onClick={this.prevMonth}\n          >\n            &#x2039;\n          </button>\n          <span class=\"date-picker__month-year\">\n            {this.getMonthName()} {this.viewYear}\n          </span>\n          <button\n            class=\"date-picker__nav-btn\"\n            type=\"button\"\n            aria-label=\"Next month\"\n            onClick={this.nextMonth}\n          >\n            &#x203A;\n          </button>\n        </div>\n\n        <div class=\"date-picker__grid\" role=\"grid\" aria-label=\"Calendar\">\n          <div class=\"date-picker__weekdays\">\n            {WEEKDAYS.map((wd) => (\n              <span class=\"date-picker__weekday\" role=\"columnheader\" key={wd}>\n                {wd}\n              </span>\n            ))}\n          </div>\n          <div class=\"date-picker__days\">\n            {days.map((day, index) =>\n              day === null ? (\n                <span class=\"date-picker__day date-picker__day--empty\" key={`empty-${index}`} />\n              ) : (\n                <button\n                  class={{\n                    'date-picker__day': true,\n                    'date-picker__day--today': this.isToday(day),\n                    'date-picker__day--selected': this.isSelected(day),\n                    'date-picker__day--disabled': this.isDayDisabled(day),\n                    'date-picker__day--focused': this.focusedDay === day,\n                  }}\n                  part=\"day\"\n                  type=\"button\"\n                  disabled={this.isDayDisabled(day)}\n                  tabindex={this.focusedDay === day ? 0 : -1}\n                  aria-label={`${day} ${this.getMonthName()} ${this.viewYear}`}\n                  aria-selected={this.isSelected(day) ? 'true' : undefined}\n                  key={`day-${day}`}\n                  onClick={() => this.selectDay(day)}\n                >\n                  {day}\n                </button>\n              ),\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-date-picker': true,\n          'ts-date-picker--open': this.isOpen,\n          'ts-date-picker--error': this.error,\n          [`ts-date-picker--${this.size}`]: true,\n        }}\n      >\n        {this.label && (\n          <label class=\"date-picker__label\" part=\"label\" htmlFor={this.pickerId}>\n            {this.label}\n          </label>\n        )}\n\n        <input\n          ref={(el) => (this.triggerEl = el)}\n          class=\"date-picker__trigger\"\n          part=\"trigger\"\n          type=\"text\"\n          id={this.pickerId}\n          name={this.name}\n          value={this.value || ''}\n          placeholder={this.placeholder}\n          disabled={this.disabled}\n          readOnly\n          aria-haspopup=\"dialog\"\n          aria-expanded={this.isOpen ? 'true' : 'false'}\n          aria-invalid={this.error ? 'true' : undefined}\n          onClick={this.toggleCalendar}\n          onKeyDown={this.handleTriggerKeydown}\n        />\n\n        {this.isOpen && this.renderCalendar()}\n\n        {this.error && this.errorMessage && (\n          <span class=\"date-picker__error\" part=\"error\" role=\"alert\">\n            {this.errorMessage}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/date-picker/date-picker.stories.js

@@ -1,119 +0,0 @@
-// Hand-written stories for ts-date-picker
-export default {
-    title: 'Components/DatePicker',
-    tags: ['autodocs'],
-    argTypes: {
-        value: {
-            control: 'text',
-            description: 'The selected date value in ISO format (YYYY-MM-DD).',
-        },
-        placeholder: {
-            control: 'text',
-            description: 'Placeholder text for the input.',
-        },
-        disabled: {
-            control: 'boolean',
-            description: 'Whether the date picker is disabled.',
-        },
-        min: {
-            control: 'text',
-            description: 'Minimum selectable date in ISO format.',
-        },
-        max: {
-            control: 'text',
-            description: 'Maximum selectable date in ISO format.',
-        },
-        label: {
-            control: 'text',
-            description: 'Label text for the input.',
-        },
-        error: {
-            control: 'boolean',
-            description: 'Whether the input is in an error state.',
-        },
-        errorMessage: {
-            control: 'text',
-            description: 'Error message to display.',
-        },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg'],
-            description: 'The input size.',
-        },
-        name: {
-            control: 'text',
-            description: 'Form field name.',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.value !== undefined && args.value !== '')
-        attrs.push(`value="${args.value}"`);
-    if (args.placeholder !== undefined)
-        attrs.push(`placeholder="${args.placeholder}"`);
-    if (args.disabled)
-        attrs.push('disabled');
-    if (args.min !== undefined && args.min !== '')
-        attrs.push(`min="${args.min}"`);
-    if (args.max !== undefined && args.max !== '')
-        attrs.push(`max="${args.max}"`);
-    if (args.label !== undefined)
-        attrs.push(`label="${args.label}"`);
-    if (args.error)
-        attrs.push('error');
-    if (args.errorMessage !== undefined && args.errorMessage !== '')
-        attrs.push(`error-message="${args.errorMessage}"`);
-    if (args.size !== undefined)
-        attrs.push(`size="${args.size}"`);
-    if (args.name !== undefined && args.name !== '')
-        attrs.push(`name="${args.name}"`);
-    return `<ts-date-picker ${attrs.join(' ')}></ts-date-picker>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        label: 'Start date',
-        placeholder: 'Select date',
-        size: 'md',
-        disabled: false,
-        error: false,
-    },
-});
-export const Sizes = () => `
-  <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;">
-    <ts-date-picker label="Small" size="sm" placeholder="Select date"></ts-date-picker>
-    <ts-date-picker label="Medium" size="md" placeholder="Select date"></ts-date-picker>
-    <ts-date-picker label="Large" size="lg" placeholder="Select date"></ts-date-picker>
-  </div>
-`;
-export const States = () => `
-  <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;">
-    <ts-date-picker label="Default" placeholder="Select date"></ts-date-picker>
-    <ts-date-picker label="With value" value="2026-03-15" placeholder="Select date"></ts-date-picker>
-    <ts-date-picker label="Disabled" placeholder="Select date" disabled></ts-date-picker>
-    <ts-date-picker label="Error state" placeholder="Select date" error error-message="Please select a valid date"></ts-date-picker>
-  </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 16px;">Travel Dates</h4>
-      <div style="display: flex; flex-direction: column; gap: 16px;">
-        <ts-date-picker
-          label="Departure"
-          placeholder="Select departure date"
-          min="2026-03-24"
-          name="departure"
-        ></ts-date-picker>
-        <ts-date-picker
-          label="Return"
-          placeholder="Select return date"
-          min="2026-03-25"
-          name="return"
-        ></ts-date-picker>
-        <ts-button variant="primary" block>Search Flights</ts-button>
-      </div>
-    </div>
-  </div>
-`;
-//# sourceMappingURL=date-picker.stories.js.map

package/dist/collection/components/date-picker/date-picker.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"date-picker.stories.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-date-picker\n\nexport default {\n  title: 'Components/DatePicker',\n  tags: ['autodocs'],\n  argTypes: {\n    value: {\n      control: 'text',\n      description: 'The selected date value in ISO format (YYYY-MM-DD).',\n    },\n    placeholder: {\n      control: 'text',\n      description: 'Placeholder text for the input.',\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Whether the date picker is disabled.',\n    },\n    min: {\n      control: 'text',\n      description: 'Minimum selectable date in ISO format.',\n    },\n    max: {\n      control: 'text',\n      description: 'Maximum selectable date in ISO format.',\n    },\n    label: {\n      control: 'text',\n      description: 'Label text for the input.',\n    },\n    error: {\n      control: 'boolean',\n      description: 'Whether the input is in an error state.',\n    },\n    errorMessage: {\n      control: 'text',\n      description: 'Error message to display.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The input size.',\n    },\n    name: {\n      control: 'text',\n      description: 'Form field name.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.value !== undefined && args.value !== '') attrs.push(`value=\"${args.value}\"`);\n  if (args.placeholder !== undefined) attrs.push(`placeholder=\"${args.placeholder}\"`);\n  if (args.disabled) attrs.push('disabled');\n  if (args.min !== undefined && args.min !== '') attrs.push(`min=\"${args.min}\"`);\n  if (args.max !== undefined && args.max !== '') attrs.push(`max=\"${args.max}\"`);\n  if (args.label !== undefined) attrs.push(`label=\"${args.label}\"`);\n  if (args.error) attrs.push('error');\n  if (args.errorMessage !== undefined && args.errorMessage !== '') attrs.push(`error-message=\"${args.errorMessage}\"`);\n  if (args.size !== undefined) attrs.push(`size=\"${args.size}\"`);\n  if (args.name !== undefined && args.name !== '') attrs.push(`name=\"${args.name}\"`);\n  return `<ts-date-picker ${attrs.join(' ')}></ts-date-picker>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    label: 'Start date',\n    placeholder: 'Select date',\n    size: 'md',\n    disabled: false,\n    error: false,\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;\">\n    <ts-date-picker label=\"Small\" size=\"sm\" placeholder=\"Select date\"></ts-date-picker>\n    <ts-date-picker label=\"Medium\" size=\"md\" placeholder=\"Select date\"></ts-date-picker>\n    <ts-date-picker label=\"Large\" size=\"lg\" placeholder=\"Select date\"></ts-date-picker>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;\">\n    <ts-date-picker label=\"Default\" placeholder=\"Select date\"></ts-date-picker>\n    <ts-date-picker label=\"With value\" value=\"2026-03-15\" placeholder=\"Select date\"></ts-date-picker>\n    <ts-date-picker label=\"Disabled\" placeholder=\"Select date\" disabled></ts-date-picker>\n    <ts-date-picker label=\"Error state\" placeholder=\"Select date\" error error-message=\"Please select a valid date\"></ts-date-picker>\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 16px;\">Travel Dates</h4>\n      <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n        <ts-date-picker\n          label=\"Departure\"\n          placeholder=\"Select departure date\"\n          min=\"2026-03-24\"\n          name=\"departure\"\n        ></ts-date-picker>\n        <ts-date-picker\n          label=\"Return\"\n          placeholder=\"Select return date\"\n          min=\"2026-03-25\"\n          name=\"return\"\n        ></ts-date-picker>\n        <ts-button variant=\"primary\" block>Search Flights</ts-button>\n      </div>\n    </div>\n  </div>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, h, Host, Element, Watch, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport { generateId, trapFocus } from '../../utils/aria';\n\n/**\n * @slot - Default slot for dialog body content.\n * @slot footer - Footer content (e.g., action buttons).\n *\n * @part overlay - The backdrop overlay.\n * @part dialog - The dialog container.\n * @part header - The heading wrapper.\n * @part body - The body content wrapper.\n * @part footer - The footer wrapper.\n * @part close - The close button.\n */\n@Component({\n  tag: 'ts-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class TsDialog {\n  @Element() hostEl!: HTMLElement;\n\n  private dialogEl?: HTMLElement;\n  private removeFocusTrap?: () => void;\n  private previouslyFocused?: HTMLElement;\n  private dialogId = generateId('ts-dialog');\n\n  /** Whether the dialog is open. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The dialog heading text. */\n  @Prop() heading?: string;\n\n  /** The dialog's width size preset. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'sm';\n\n  /** Whether the dialog can be dismissed via close button, Escape, or overlay click. */\n  @Prop() dismissible = true;\n\n  /** Emitted when the dialog is closed. */\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.openDialog();\n    } else {\n      this.closeDialog();\n    }\n  }\n\n  /** Programmatically open the dialog. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Programmatically close the dialog. */\n  @Method()\n  async close(): Promise<void> {\n    this.open = false;\n  }\n\n  private openDialog(): 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.dialogEl) {\n        this.removeFocusTrap = trapFocus(this.dialogEl);\n        this.dialogEl.focus();\n      }\n    });\n  }\n\n  private closeDialog(): void {\n    this.isAnimating = false;\n    this.tsClose.emit();\n\n    document.body.style.overflow = '';\n\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 handleDialogClick = (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    const headingId = `${this.dialogId}-heading`;\n\n    return (\n      <Host\n        class={{\n          'ts-dialog': true,\n          'ts-dialog--open': this.open,\n        }}\n        onKeyDown={this.handleKeydown}\n      >\n        <div class=\"dialog__overlay\" part=\"overlay\" onClick={this.handleOverlayClick}>\n          <div\n            ref={(el) => (this.dialogEl = el)}\n            class={{\n              'dialog__panel': true,\n              [`dialog__panel--${this.size}`]: true,\n            }}\n            part=\"dialog\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={this.heading ? headingId : undefined}\n            tabindex={-1}\n            onClick={this.handleDialogClick}\n          >\n            {this.dismissible && (\n              <button\n                class=\"dialog__close\"\n                part=\"close\"\n                type=\"button\"\n                aria-label=\"Close dialog\"\n                onClick={this.handleCloseClick}\n              >\n                &#x2715;\n              </button>\n            )}\n\n            {this.heading && (\n              <div class=\"dialog__header\" part=\"header\" id={headingId}>\n                {this.heading}\n              </div>\n            )}\n\n            <div class=\"dialog__body\" part=\"body\">\n              <slot />\n            </div>\n\n            <div class=\"dialog__footer\" part=\"footer\">\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}