@tessera-ui/core 0.4.0 → 0.5.0

package/dist/collection/components/switch-group/switch-group.stories.js

@@ -1,132 +0,0 @@
-// Hand-written stories for ts-switch-group
-export default {
-    title: 'Components/SwitchGroup',
-    tags: ['autodocs'],
-    argTypes: {
-        value: {
-            control: 'text',
-            description: 'The currently active segment value.',
-        },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg'],
-            description: 'The size of the switch group.',
-        },
-        disabled: {
-            control: 'boolean',
-            description: 'Disables the entire group.',
-        },
-        fullWidth: {
-            control: 'boolean',
-            description: 'Stretch to fill the container width.',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.value !== undefined)
-        attrs.push(`value="${args.value}"`);
-    if (args.size !== undefined)
-        attrs.push(`size="${args.size}"`);
-    if (args.disabled)
-        attrs.push('disabled');
-    if (args.fullWidth)
-        attrs.push('full-width');
-    return `
-    <ts-switch-group ${attrs.join(' ')}>
-      <ts-switch-option value="daily">Daily</ts-switch-option>
-      <ts-switch-option value="weekly">Weekly</ts-switch-option>
-      <ts-switch-option value="monthly">Monthly</ts-switch-option>
-    </ts-switch-group>
-  `;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        value: 'weekly',
-        size: 'md',
-        disabled: false,
-        fullWidth: false,
-    },
-});
-export const Sizes = () => `
-  <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;">Small</p>
-      <ts-switch-group value="weekly" size="sm">
-        <ts-switch-option value="daily">Daily</ts-switch-option>
-        <ts-switch-option value="weekly">Weekly</ts-switch-option>
-        <ts-switch-option value="monthly">Monthly</ts-switch-option>
-      </ts-switch-group>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Medium (default)</p>
-      <ts-switch-group value="weekly" size="md">
-        <ts-switch-option value="daily">Daily</ts-switch-option>
-        <ts-switch-option value="weekly">Weekly</ts-switch-option>
-        <ts-switch-option value="monthly">Monthly</ts-switch-option>
-      </ts-switch-group>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Large</p>
-      <ts-switch-group value="weekly" size="lg">
-        <ts-switch-option value="daily">Daily</ts-switch-option>
-        <ts-switch-option value="weekly">Weekly</ts-switch-option>
-        <ts-switch-option value="monthly">Monthly</ts-switch-option>
-      </ts-switch-group>
-    </div>
-  </div>
-`;
-export const States = () => `
-  <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;">Active selection</p>
-      <ts-switch-group value="weekly">
-        <ts-switch-option value="daily">Daily</ts-switch-option>
-        <ts-switch-option value="weekly">Weekly</ts-switch-option>
-        <ts-switch-option value="monthly">Monthly</ts-switch-option>
-      </ts-switch-group>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Disabled group</p>
-      <ts-switch-group value="weekly" disabled>
-        <ts-switch-option value="daily">Daily</ts-switch-option>
-        <ts-switch-option value="weekly">Weekly</ts-switch-option>
-        <ts-switch-option value="monthly">Monthly</ts-switch-option>
-      </ts-switch-group>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">With disabled option</p>
-      <ts-switch-group value="daily">
-        <ts-switch-option value="daily">Daily</ts-switch-option>
-        <ts-switch-option value="weekly">Weekly</ts-switch-option>
-        <ts-switch-option value="monthly" disabled>Monthly</ts-switch-option>
-      </ts-switch-group>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Full width</p>
-      <ts-switch-group value="weekly" full-width>
-        <ts-switch-option value="daily">Daily</ts-switch-option>
-        <ts-switch-option value="weekly">Weekly</ts-switch-option>
-        <ts-switch-option value="monthly">Monthly</ts-switch-option>
-      </ts-switch-group>
-    </div>
-  </div>
-`;
-export const Composition = () => `
-  <div style="max-width: 500px; font-family: sans-serif;">
-    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px;">
-      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
-        <h4 style="margin: 0;">Analytics Overview</h4>
-        <ts-switch-group value="weekly" size="sm">
-          <ts-switch-option value="daily">Daily</ts-switch-option>
-          <ts-switch-option value="weekly">Weekly</ts-switch-option>
-          <ts-switch-option value="monthly">Monthly</ts-switch-option>
-        </ts-switch-group>
-      </div>
-      <div style="height: 200px; background: #f8fafc; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #94a3b8;">
-        Chart placeholder
-      </div>
-    </div>
-  </div>
-`;
-//# sourceMappingURL=switch-group.stories.js.map

package/dist/collection/components/switch-group/switch-group.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"switch-group.stories.js","sourceRoot":"","sources":["../../../src/components/switch-group/switch-group.stories.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAE3C,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,qCAAqC;SACnD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,WAAW,EAAE,+BAA+B;SAC7C;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,4BAA4B;SAC1C;QACD,SAAS,EAAE;YACT,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,sCAAsC;SACpD;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAClE,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,IAAI,CAAC,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7C,OAAO;uBACc,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;GAKnC,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,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,KAAK;KACjB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BlC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCnC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;CAgBxC,CAAC","sourcesContent":["// Hand-written stories for ts-switch-group\n\nexport default {\n  title: 'Components/SwitchGroup',\n  tags: ['autodocs'],\n  argTypes: {\n    value: {\n      control: 'text',\n      description: 'The currently active segment value.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The size of the switch group.',\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Disables the entire group.',\n    },\n    fullWidth: {\n      control: 'boolean',\n      description: 'Stretch to fill the container width.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.value !== undefined) attrs.push(`value=\"${args.value}\"`);\n  if (args.size !== undefined) attrs.push(`size=\"${args.size}\"`);\n  if (args.disabled) attrs.push('disabled');\n  if (args.fullWidth) attrs.push('full-width');\n  return `\n    <ts-switch-group ${attrs.join(' ')}>\n      <ts-switch-option value=\"daily\">Daily</ts-switch-option>\n      <ts-switch-option value=\"weekly\">Weekly</ts-switch-option>\n      <ts-switch-option value=\"monthly\">Monthly</ts-switch-option>\n    </ts-switch-group>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    value: 'weekly',\n    size: 'md',\n    disabled: false,\n    fullWidth: false,\n  },\n});\n\nexport const Sizes = (): 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;\">Small</p>\n      <ts-switch-group value=\"weekly\" size=\"sm\">\n        <ts-switch-option value=\"daily\">Daily</ts-switch-option>\n        <ts-switch-option value=\"weekly\">Weekly</ts-switch-option>\n        <ts-switch-option value=\"monthly\">Monthly</ts-switch-option>\n      </ts-switch-group>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Medium (default)</p>\n      <ts-switch-group value=\"weekly\" size=\"md\">\n        <ts-switch-option value=\"daily\">Daily</ts-switch-option>\n        <ts-switch-option value=\"weekly\">Weekly</ts-switch-option>\n        <ts-switch-option value=\"monthly\">Monthly</ts-switch-option>\n      </ts-switch-group>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Large</p>\n      <ts-switch-group value=\"weekly\" size=\"lg\">\n        <ts-switch-option value=\"daily\">Daily</ts-switch-option>\n        <ts-switch-option value=\"weekly\">Weekly</ts-switch-option>\n        <ts-switch-option value=\"monthly\">Monthly</ts-switch-option>\n      </ts-switch-group>\n    </div>\n  </div>\n`;\n\nexport const States = (): 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;\">Active selection</p>\n      <ts-switch-group value=\"weekly\">\n        <ts-switch-option value=\"daily\">Daily</ts-switch-option>\n        <ts-switch-option value=\"weekly\">Weekly</ts-switch-option>\n        <ts-switch-option value=\"monthly\">Monthly</ts-switch-option>\n      </ts-switch-group>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Disabled group</p>\n      <ts-switch-group value=\"weekly\" disabled>\n        <ts-switch-option value=\"daily\">Daily</ts-switch-option>\n        <ts-switch-option value=\"weekly\">Weekly</ts-switch-option>\n        <ts-switch-option value=\"monthly\">Monthly</ts-switch-option>\n      </ts-switch-group>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">With disabled option</p>\n      <ts-switch-group value=\"daily\">\n        <ts-switch-option value=\"daily\">Daily</ts-switch-option>\n        <ts-switch-option value=\"weekly\">Weekly</ts-switch-option>\n        <ts-switch-option value=\"monthly\" disabled>Monthly</ts-switch-option>\n      </ts-switch-group>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Full width</p>\n      <ts-switch-group value=\"weekly\" full-width>\n        <ts-switch-option value=\"daily\">Daily</ts-switch-option>\n        <ts-switch-option value=\"weekly\">Weekly</ts-switch-option>\n        <ts-switch-option value=\"monthly\">Monthly</ts-switch-option>\n      </ts-switch-group>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"max-width: 500px; font-family: sans-serif;\">\n    <div style=\"border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px;\">\n      <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;\">\n        <h4 style=\"margin: 0;\">Analytics Overview</h4>\n        <ts-switch-group value=\"weekly\" size=\"sm\">\n          <ts-switch-option value=\"daily\">Daily</ts-switch-option>\n          <ts-switch-option value=\"weekly\">Weekly</ts-switch-option>\n          <ts-switch-option value=\"monthly\">Monthly</ts-switch-option>\n        </ts-switch-group>\n      </div>\n      <div style=\"height: 200px; background: #f8fafc; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #94a3b8;\">\n        Chart placeholder\n      </div>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/switch-group/switch-option.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"switch-option.js","sourceRoot":"","sources":["../../../src/components/switch-group/switch-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGzE;;;;;GAKG;AAMH,MAAM,OAAO,cAAc;IACd,MAAM,CAAe;IAEhC,yCAAyC;IAChB,KAAK,CAAU;IAExC,4BAA4B;IACH,QAAQ,GAAG,KAAK,CAAC;IAE1C,0BAA0B;IAClB,IAAI,CAAU;IAEtB,mEAAmE;IAC3B,MAAM,GAAG,KAAK,CAAC;IAEvD,qDAAqD;IACE,cAAc,CAAmC;IAEhG,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,0BAA0B,EAAE,IAAI,CAAC,MAAM;gBACvC,4BAA4B,EAAE,IAAI,CAAC,QAAQ;aAC5C,EACD,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kBAChB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,mBAClB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,WAAW;YAEzB,4DAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM;gBACzC,IAAI,CAAC,IAAI,IAAI,CACZ,6DAAM,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM;oBAC9D,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACjC,CACR;gBACD,6DAAM,KAAK,EAAC,sBAAsB;oBAChC,8DAAQ,CACH,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, h, Host, Element } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for label text.\n *\n * @part base - The option container.\n * @part icon - The icon wrapper.\n */\n@Component({\n  tag: 'ts-switch-option',\n  styleUrl: 'switch-option.css',\n  shadow: true,\n})\nexport class TsSwitchOption {\n  @Element() hostEl!: HTMLElement;\n\n  /** Unique identifier for this option. */\n  @Prop({ reflect: true }) value?: string;\n\n  /** Disables this option. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Optional icon name. */\n  @Prop() icon?: string;\n\n  /** Whether this option is the active selection (set by parent). */\n  @Prop({ reflect: true, mutable: true }) active = false;\n\n  /** @internal Emitted when this option is clicked. */\n  @Event({ eventName: 'tsOptionSelect', bubbles: true }) tsOptionSelect!: EventEmitter<{ value: string }>;\n\n  private handleClick = (): void => {\n    if (this.disabled) return;\n    this.tsOptionSelect.emit({ value: this.value || '' });\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-switch-option': true,\n          'ts-switch-option--active': this.active,\n          'ts-switch-option--disabled': this.disabled,\n        }}\n        role=\"radio\"\n        tabindex={this.active ? 0 : -1}\n        aria-checked={String(this.active)}\n        aria-disabled={this.disabled ? 'true' : undefined}\n        onClick={this.handleClick}\n      >\n        <div class=\"switch-option__base\" part=\"base\">\n          {this.icon && (\n            <span class=\"switch-option__icon\" part=\"icon\" aria-hidden=\"true\">\n              <ts-icon name={this.icon} size=\"sm\" />\n            </span>\n          )}\n          <span class=\"switch-option__label\">\n            <slot />\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/switch-group/switch-option.stories.js

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

package/dist/collection/components/switch-group/switch-option.stories.js.map

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE;;;;;;;;GAQG;AAMH,MAAM,OAAO,OAAO;IACP,MAAM,CAAe;IAEhC,iDAAiD;IACxB,OAAO,GAAG,KAAK,CAAC;IAEzC,iCAAiC;IACR,QAAQ,GAAG,KAAK,CAAC;IAE1C,gCAAgC;IACP,SAAS,GAAG,KAAK,CAAC;IAE3C,+CAA+C;IACtB,OAAO,GAAG,KAAK,CAAC;IAEzC,yDAAyD;IAChC,YAAY,GAAG,KAAK,CAAC;IAE9C,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,mBAAmB,EAAE,IAAI,CAAC,OAAO;gBACjC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;gBACnC,qBAAqB,EAAE,IAAI,CAAC,SAAS;gBACrC,mBAAmB,EAAE,IAAI,CAAC,OAAO;gBACjC,yBAAyB,EAAE,IAAI,CAAC,YAAY;aAC7C;YAED,4DAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC;gBACnD,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n/**\n * A styled wrapper for native HTML tables. Consumers place standard\n * `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>` elements inside.\n *\n * Uses light DOM (no Shadow DOM) so nested table elements can be\n * styled directly via the component's CSS.\n *\n * @slot - Default slot for the native `<table>` element.\n */\n@Component({\n  tag: 'ts-table',\n  styleUrl: 'table.css',\n  shadow: false,\n})\nexport class TsTable {\n  @Element() hostEl!: HTMLElement;\n\n  /** Applies alternating row background colors. */\n  @Prop({ reflect: true }) striped = false;\n\n  /** Adds borders to all cells. */\n  @Prop({ reflect: true }) bordered = false;\n\n  /** Highlights rows on hover. */\n  @Prop({ reflect: true }) hoverable = false;\n\n  /** Reduces cell padding for denser display. */\n  @Prop({ reflect: true }) compact = false;\n\n  /** Makes the table header stick to the top on scroll. */\n  @Prop({ reflect: true }) stickyHeader = false;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-table': true,\n          'ts-table--striped': this.striped,\n          'ts-table--bordered': this.bordered,\n          'ts-table--hoverable': this.hoverable,\n          'ts-table--compact': this.compact,\n          'ts-table--sticky-header': this.stickyHeader,\n        }}\n      >\n        <div class=\"table__wrapper\" role=\"region\" tabindex={0}>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,147 +0,0 @@
-// Hand-written stories for ts-table
-export default {
-    title: 'Components/Table',
-    tags: ['autodocs'],
-    argTypes: {
-        striped: { control: 'boolean', description: 'Applies alternating row background colors.' },
-        bordered: { control: 'boolean', description: 'Adds borders to all cells.' },
-        hoverable: { control: 'boolean', description: 'Highlights rows on hover.' },
-        compact: { control: 'boolean', description: 'Reduces cell padding for denser display.' },
-        stickyHeader: { control: 'boolean', description: 'Makes the table header stick to the top on scroll.' },
-    },
-};
-const sampleTable = `
-  <table>
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Email</th>
-        <th>Role</th>
-        <th>Status</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>James Kennedy</td>
-        <td>james@example.com</td>
-        <td>Admin</td>
-        <td>Active</td>
-      </tr>
-      <tr>
-        <td>Alice Smith</td>
-        <td>alice@example.com</td>
-        <td>Editor</td>
-        <td>Active</td>
-      </tr>
-      <tr>
-        <td>Robert Chen</td>
-        <td>robert@example.com</td>
-        <td>Viewer</td>
-        <td>Inactive</td>
-      </tr>
-      <tr>
-        <td>Maria Garcia</td>
-        <td>maria@example.com</td>
-        <td>Editor</td>
-        <td>Active</td>
-      </tr>
-      <tr>
-        <td>David Lee</td>
-        <td>david@example.com</td>
-        <td>Viewer</td>
-        <td>Pending</td>
-      </tr>
-    </tbody>
-  </table>
-`;
-const Template = (args) => {
-    const attrs = [];
-    if (args.striped)
-        attrs.push('striped');
-    if (args.bordered)
-        attrs.push('bordered');
-    if (args.hoverable)
-        attrs.push('hoverable');
-    if (args.compact)
-        attrs.push('compact');
-    if (args.stickyHeader)
-        attrs.push('sticky-header');
-    return `<ts-table ${attrs.join(' ')}>${sampleTable}</ts-table>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        striped: false,
-        bordered: false,
-        hoverable: false,
-        compact: false,
-        stickyHeader: false,
-    },
-});
-export const Striped = () => `
-  <ts-table striped>${sampleTable}</ts-table>
-`;
-export const Bordered = () => `
-  <ts-table bordered>${sampleTable}</ts-table>
-`;
-export const Hoverable = () => `
-  <ts-table hoverable>${sampleTable}</ts-table>
-`;
-export const Compact = () => `
-  <ts-table compact>${sampleTable}</ts-table>
-`;
-export const AllFeatures = () => `
-  <ts-table striped bordered hoverable>${sampleTable}</ts-table>
-`;
-export const StickyHeader = () => `
-  <div style="max-height: 250px; overflow: auto;">
-    <ts-table sticky-header hoverable>
-      <table>
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Email</th>
-            <th>Role</th>
-            <th>Department</th>
-            <th>Status</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr><td>James Kennedy</td><td>james@example.com</td><td>Admin</td><td>Engineering</td><td>Active</td></tr>
-          <tr><td>Alice Smith</td><td>alice@example.com</td><td>Editor</td><td>Marketing</td><td>Active</td></tr>
-          <tr><td>Robert Chen</td><td>robert@example.com</td><td>Viewer</td><td>Sales</td><td>Inactive</td></tr>
-          <tr><td>Maria Garcia</td><td>maria@example.com</td><td>Editor</td><td>Design</td><td>Active</td></tr>
-          <tr><td>David Lee</td><td>david@example.com</td><td>Viewer</td><td>Support</td><td>Pending</td></tr>
-          <tr><td>Sarah Wilson</td><td>sarah@example.com</td><td>Admin</td><td>Engineering</td><td>Active</td></tr>
-          <tr><td>Tom Brown</td><td>tom@example.com</td><td>Editor</td><td>Content</td><td>Active</td></tr>
-          <tr><td>Lisa Wang</td><td>lisa@example.com</td><td>Viewer</td><td>HR</td><td>Inactive</td></tr>
-          <tr><td>Michael Park</td><td>michael@example.com</td><td>Editor</td><td>Finance</td><td>Active</td></tr>
-          <tr><td>Emma Davis</td><td>emma@example.com</td><td>Admin</td><td>Operations</td><td>Active</td></tr>
-        </tbody>
-      </table>
-    </ts-table>
-  </div>
-`;
-export const CompactBordered = () => `
-  <ts-table compact bordered striped>
-    <table>
-      <thead>
-        <tr>
-          <th>Order ID</th>
-          <th>Customer</th>
-          <th>Product</th>
-          <th>Quantity</th>
-          <th>Total</th>
-          <th>Status</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr><td>#ORD-001</td><td>James Kennedy</td><td>Widget Pro</td><td>3</td><td>$149.97</td><td>Shipped</td></tr>
-        <tr><td>#ORD-002</td><td>Alice Smith</td><td>Gadget Plus</td><td>1</td><td>$79.99</td><td>Processing</td></tr>
-        <tr><td>#ORD-003</td><td>Robert Chen</td><td>Tool Kit</td><td>2</td><td>$199.98</td><td>Delivered</td></tr>
-        <tr><td>#ORD-004</td><td>Maria Garcia</td><td>Widget Pro</td><td>5</td><td>$249.95</td><td>Shipped</td></tr>
-        <tr><td>#ORD-005</td><td>David Lee</td><td>Gadget Plus</td><td>1</td><td>$79.99</td><td>Cancelled</td></tr>
-      </tbody>
-    </table>
-  </ts-table>
-`;
-//# sourceMappingURL=table.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table/table.stories.ts"],"names":[],"mappings":"AAAA,oCAAoC;AAEpC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,4CAA4C,EAAE;QAC1F,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,4BAA4B,EAAE;QAC3E,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,2BAA2B,EAAE;QAC3E,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,0CAA0C,EAAE;QACxF,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,oDAAoD,EAAE;KACxG;CACF,CAAC;AAEF,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CnB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxC,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,IAAI,CAAC,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC5C,IAAI,IAAI,CAAC,OAAO;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxC,IAAI,IAAI,CAAC,YAAY;QAAE,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACnD,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,WAAW,aAAa,CAAC;AAClE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,KAAK;QACd,YAAY,EAAE,KAAK;KACpB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAW,EAAE,CAAC;sBACf,WAAW;CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;uBACf,WAAW;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;wBACf,WAAW;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAW,EAAE,CAAC;sBACf,WAAW;CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;yCACA,WAAW;CACnD,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BzC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;CAsB5C,CAAC","sourcesContent":["// Hand-written stories for ts-table\n\nexport default {\n  title: 'Components/Table',\n  tags: ['autodocs'],\n  argTypes: {\n    striped: { control: 'boolean', description: 'Applies alternating row background colors.' },\n    bordered: { control: 'boolean', description: 'Adds borders to all cells.' },\n    hoverable: { control: 'boolean', description: 'Highlights rows on hover.' },\n    compact: { control: 'boolean', description: 'Reduces cell padding for denser display.' },\n    stickyHeader: { control: 'boolean', description: 'Makes the table header stick to the top on scroll.' },\n  },\n};\n\nconst sampleTable = `\n  <table>\n    <thead>\n      <tr>\n        <th>Name</th>\n        <th>Email</th>\n        <th>Role</th>\n        <th>Status</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>James Kennedy</td>\n        <td>james@example.com</td>\n        <td>Admin</td>\n        <td>Active</td>\n      </tr>\n      <tr>\n        <td>Alice Smith</td>\n        <td>alice@example.com</td>\n        <td>Editor</td>\n        <td>Active</td>\n      </tr>\n      <tr>\n        <td>Robert Chen</td>\n        <td>robert@example.com</td>\n        <td>Viewer</td>\n        <td>Inactive</td>\n      </tr>\n      <tr>\n        <td>Maria Garcia</td>\n        <td>maria@example.com</td>\n        <td>Editor</td>\n        <td>Active</td>\n      </tr>\n      <tr>\n        <td>David Lee</td>\n        <td>david@example.com</td>\n        <td>Viewer</td>\n        <td>Pending</td>\n      </tr>\n    </tbody>\n  </table>\n`;\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.striped) attrs.push('striped');\n  if (args.bordered) attrs.push('bordered');\n  if (args.hoverable) attrs.push('hoverable');\n  if (args.compact) attrs.push('compact');\n  if (args.stickyHeader) attrs.push('sticky-header');\n  return `<ts-table ${attrs.join(' ')}>${sampleTable}</ts-table>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    striped: false,\n    bordered: false,\n    hoverable: false,\n    compact: false,\n    stickyHeader: false,\n  },\n});\n\nexport const Striped = (): string => `\n  <ts-table striped>${sampleTable}</ts-table>\n`;\n\nexport const Bordered = (): string => `\n  <ts-table bordered>${sampleTable}</ts-table>\n`;\n\nexport const Hoverable = (): string => `\n  <ts-table hoverable>${sampleTable}</ts-table>\n`;\n\nexport const Compact = (): string => `\n  <ts-table compact>${sampleTable}</ts-table>\n`;\n\nexport const AllFeatures = (): string => `\n  <ts-table striped bordered hoverable>${sampleTable}</ts-table>\n`;\n\nexport const StickyHeader = (): string => `\n  <div style=\"max-height: 250px; overflow: auto;\">\n    <ts-table sticky-header hoverable>\n      <table>\n        <thead>\n          <tr>\n            <th>Name</th>\n            <th>Email</th>\n            <th>Role</th>\n            <th>Department</th>\n            <th>Status</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr><td>James Kennedy</td><td>james@example.com</td><td>Admin</td><td>Engineering</td><td>Active</td></tr>\n          <tr><td>Alice Smith</td><td>alice@example.com</td><td>Editor</td><td>Marketing</td><td>Active</td></tr>\n          <tr><td>Robert Chen</td><td>robert@example.com</td><td>Viewer</td><td>Sales</td><td>Inactive</td></tr>\n          <tr><td>Maria Garcia</td><td>maria@example.com</td><td>Editor</td><td>Design</td><td>Active</td></tr>\n          <tr><td>David Lee</td><td>david@example.com</td><td>Viewer</td><td>Support</td><td>Pending</td></tr>\n          <tr><td>Sarah Wilson</td><td>sarah@example.com</td><td>Admin</td><td>Engineering</td><td>Active</td></tr>\n          <tr><td>Tom Brown</td><td>tom@example.com</td><td>Editor</td><td>Content</td><td>Active</td></tr>\n          <tr><td>Lisa Wang</td><td>lisa@example.com</td><td>Viewer</td><td>HR</td><td>Inactive</td></tr>\n          <tr><td>Michael Park</td><td>michael@example.com</td><td>Editor</td><td>Finance</td><td>Active</td></tr>\n          <tr><td>Emma Davis</td><td>emma@example.com</td><td>Admin</td><td>Operations</td><td>Active</td></tr>\n        </tbody>\n      </table>\n    </ts-table>\n  </div>\n`;\n\nexport const CompactBordered = (): string => `\n  <ts-table compact bordered striped>\n    <table>\n      <thead>\n        <tr>\n          <th>Order ID</th>\n          <th>Customer</th>\n          <th>Product</th>\n          <th>Quantity</th>\n          <th>Total</th>\n          <th>Status</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr><td>#ORD-001</td><td>James Kennedy</td><td>Widget Pro</td><td>3</td><td>$149.97</td><td>Shipped</td></tr>\n        <tr><td>#ORD-002</td><td>Alice Smith</td><td>Gadget Plus</td><td>1</td><td>$79.99</td><td>Processing</td></tr>\n        <tr><td>#ORD-003</td><td>Robert Chen</td><td>Tool Kit</td><td>2</td><td>$199.98</td><td>Delivered</td></tr>\n        <tr><td>#ORD-004</td><td>Maria Garcia</td><td>Widget Pro</td><td>5</td><td>$249.95</td><td>Shipped</td></tr>\n        <tr><td>#ORD-005</td><td>David Lee</td><td>Gadget Plus</td><td>1</td><td>$79.99</td><td>Cancelled</td></tr>\n      </tbody>\n    </table>\n  </ts-table>\n`;\n"]}

package/dist/collection/components/tabs/tab-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE;;;;GAIG;AAMH,MAAM,OAAO,UAAU;IACV,MAAM,CAAe;IAEhC,kDAAkD;IAC1C,GAAG,CAAU;IAErB,4CAA4C;IACnB,KAAK,CAAU;IAExC,oCAAoC;IACX,QAAQ,GAAG,KAAK,CAAC;IAE1C,yDAAyD;IACjD,IAAI,CAAU;IAEtB,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU;gBACjD,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Element } from '@stencil/core';\n\n/**\n * @slot - Default slot for panel content.\n *\n * @part panel - The panel container element.\n */\n@Component({\n  tag: 'ts-tab-panel',\n  styleUrl: 'tab-panel.css',\n  shadow: true,\n})\nexport class TsTabPanel {\n  @Element() hostEl!: HTMLElement;\n\n  /** The label text displayed in the tab button. */\n  @Prop() tab!: string;\n\n  /** Unique identifier for this tab panel. */\n  @Prop({ reflect: true }) value!: string;\n\n  /** Whether this tab is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Optional icon name displayed before the tab label. */\n  @Prop() icon?: string;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host>\n        <div class=\"tab-panel\" part=\"panel\" role=\"tabpanel\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tabs/tab-panel.stories.js

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

package/dist/collection/components/tabs/tab-panel.stories.js.map

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host, Element, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for `ts-tab-panel` children.\n *\n * @part tablist - The tab button container.\n * @part tab - Each individual tab button.\n * @part tab-active - The currently active tab button.\n * @part panels - The panel container.\n */\n@Component({\n  tag: 'ts-tabs',\n  styleUrl: 'tabs.css',\n  shadow: true,\n})\nexport class TsTabs {\n  @Element() hostEl!: HTMLElement;\n\n  /** The value of the currently active tab. */\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  /** Visual variant of the tab bar. */\n  @Prop({ reflect: true }) variant: 'line' | 'enclosed' | 'pill' = 'line';\n\n  /** The size of the tab buttons. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Emitted when the active tab changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<{ value: string }>;\n\n  @Watch('value')\n  handleValueChange(): void {\n    this.updatePanelVisibility();\n  }\n\n  componentDidLoad(): void {\n    // Default to first non-disabled tab if no value set\n    if (!this.value) {\n      const panels = this.getPanels();\n      const firstEnabled = panels.find((p) => !p.hasAttribute('disabled'));\n      if (firstEnabled) {\n        this.value = firstEnabled.getAttribute('value') || '';\n      }\n    }\n    this.updatePanelVisibility();\n  }\n\n  private getPanels(): Element[] {\n    return Array.from(this.hostEl.querySelectorAll('ts-tab-panel'));\n  }\n\n  private getTabData(): Array<{ tab: string; value: string; disabled: boolean; icon?: string }> {\n    return this.getPanels().map((panel) => ({\n      tab: panel.getAttribute('tab') || '',\n      value: panel.getAttribute('value') || '',\n      disabled: panel.hasAttribute('disabled'),\n      icon: panel.getAttribute('icon') || undefined,\n    }));\n  }\n\n  private updatePanelVisibility(): void {\n    this.getPanels().forEach((panel) => {\n      const isActive = panel.getAttribute('value') === this.value;\n      (panel as HTMLElement).style.display = isActive ? '' : 'none';\n    });\n  }\n\n  private handleTabClick(tabValue: string, disabled: boolean): void {\n    if (disabled || tabValue === this.value) return;\n    this.value = tabValue;\n    this.tsChange.emit({ value: tabValue });\n    this.updatePanelVisibility();\n  }\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    const tabs = this.getTabData();\n    const enabledTabs = tabs.filter((t) => !t.disabled);\n    const currentIndex = enabledTabs.findIndex((t) => t.value === this.value);\n\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        newIndex = (currentIndex + 1) % enabledTabs.length;\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        newIndex = (currentIndex - 1 + enabledTabs.length) % enabledTabs.length;\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = enabledTabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    const newTab = enabledTabs[newIndex];\n    if (newTab) {\n      this.value = newTab.value;\n      this.tsChange.emit({ value: newTab.value });\n      this.updatePanelVisibility();\n\n      // Focus the new tab button\n      const tabButtons = this.hostEl.shadowRoot?.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]');\n      const allTabIndex = tabs.findIndex((t) => t.value === newTab.value);\n      tabButtons?.[allTabIndex]?.focus();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const tabs = this.getTabData();\n\n    return (\n      <Host\n        class={{\n          'ts-tabs': true,\n          [`ts-tabs--${this.variant}`]: true,\n          [`ts-tabs--${this.size}`]: true,\n        }}\n      >\n        <div class=\"tabs__tablist\" part=\"tablist\" role=\"tablist\" onKeyDown={this.handleKeydown}>\n          {tabs.map((t) => {\n            const isActive = t.value === this.value;\n            return (\n              <button\n                class={{\n                  'tabs__tab': true,\n                  'tabs__tab--active': isActive,\n                  'tabs__tab--disabled': t.disabled,\n                }}\n                part={isActive ? 'tab tab-active' : 'tab'}\n                role=\"tab\"\n                type=\"button\"\n                aria-selected={isActive ? 'true' : 'false'}\n                aria-disabled={t.disabled ? 'true' : undefined}\n                tabindex={isActive ? 0 : -1}\n                disabled={t.disabled}\n                onClick={() => this.handleTabClick(t.value, t.disabled)}\n              >\n                {t.icon && <ts-icon name={t.icon} class=\"tabs__tab-icon\" />}\n                {t.tab}\n              </button>\n            );\n          })}\n        </div>\n        <div class=\"tabs__panels\" part=\"panels\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,187 +0,0 @@
-// Hand-written stories for ts-tabs
-export default {
-    title: 'Components/Tabs',
-    tags: ['autodocs'],
-    argTypes: {
-        value: { control: 'text', description: 'The value of the currently active tab.' },
-        variant: {
-            control: 'select',
-            options: ['line', 'enclosed', 'pill'],
-            description: 'Visual variant of the tab bar.',
-        },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg'],
-            description: 'The size of the tab buttons.',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.value !== undefined && args.value !== null && args.value !== '')
-        attrs.push(`value="${args.value}"`);
-    if (args.variant !== undefined && args.variant !== null)
-        attrs.push(`variant="${args.variant}"`);
-    if (args.size !== undefined && args.size !== null)
-        attrs.push(`size="${args.size}"`);
-    return `
-    <ts-tabs ${attrs.join(' ')}>
-      <ts-tab-panel tab="Profile" value="profile">
-        <div style="padding: 16px; font-family: sans-serif;">
-          <h4 style="margin: 0 0 8px;">Profile Information</h4>
-          <p style="margin: 0; color: #555;">Manage your name, email address, and personal details.</p>
-        </div>
-      </ts-tab-panel>
-      <ts-tab-panel tab="Settings" value="settings">
-        <div style="padding: 16px; font-family: sans-serif;">
-          <h4 style="margin: 0 0 8px;">Account Settings</h4>
-          <p style="margin: 0; color: #555;">Configure notifications, privacy, and security preferences.</p>
-        </div>
-      </ts-tab-panel>
-      <ts-tab-panel tab="Billing" value="billing">
-        <div style="padding: 16px; font-family: sans-serif;">
-          <h4 style="margin: 0 0 8px;">Billing &amp; Plans</h4>
-          <p style="margin: 0; color: #555;">View invoices, update payment methods, and manage your subscription.</p>
-        </div>
-      </ts-tab-panel>
-    </ts-tabs>
-  `;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        value: 'profile',
-        variant: 'line',
-        size: 'md',
-    },
-});
-export const Variants = () => `
-  <div style="display: flex; flex-direction: column; gap: 32px;">
-    <div>
-      <h4 style="margin: 0 0 8px; font-family: sans-serif;">Line (default)</h4>
-      <ts-tabs variant="line" value="tab1">
-        <ts-tab-panel tab="Overview" value="tab1">
-          <div style="padding: 16px; font-family: sans-serif;">Overview content with line-style tabs.</div>
-        </ts-tab-panel>
-        <ts-tab-panel tab="Details" value="tab2">
-          <div style="padding: 16px;">Details content.</div>
-        </ts-tab-panel>
-        <ts-tab-panel tab="History" value="tab3">
-          <div style="padding: 16px;">History content.</div>
-        </ts-tab-panel>
-      </ts-tabs>
-    </div>
-    <div>
-      <h4 style="margin: 0 0 8px; font-family: sans-serif;">Enclosed</h4>
-      <ts-tabs variant="enclosed" value="tab1">
-        <ts-tab-panel tab="Overview" value="tab1">
-          <div style="padding: 16px; font-family: sans-serif;">Overview content with enclosed-style tabs.</div>
-        </ts-tab-panel>
-        <ts-tab-panel tab="Details" value="tab2">
-          <div style="padding: 16px;">Details content.</div>
-        </ts-tab-panel>
-        <ts-tab-panel tab="History" value="tab3">
-          <div style="padding: 16px;">History content.</div>
-        </ts-tab-panel>
-      </ts-tabs>
-    </div>
-    <div>
-      <h4 style="margin: 0 0 8px; font-family: sans-serif;">Pill</h4>
-      <ts-tabs variant="pill" value="tab1">
-        <ts-tab-panel tab="Overview" value="tab1">
-          <div style="padding: 16px; font-family: sans-serif;">Overview content with pill-style tabs.</div>
-        </ts-tab-panel>
-        <ts-tab-panel tab="Details" value="tab2">
-          <div style="padding: 16px;">Details content.</div>
-        </ts-tab-panel>
-        <ts-tab-panel tab="History" value="tab3">
-          <div style="padding: 16px;">History content.</div>
-        </ts-tab-panel>
-      </ts-tabs>
-    </div>
-  </div>
-`;
-export const Sizes = () => `
-  <div style="display: flex; flex-direction: column; gap: 32px;">
-    <div>
-      <h4 style="margin: 0 0 8px; font-family: sans-serif;">Small</h4>
-      <ts-tabs size="sm" value="tab1">
-        <ts-tab-panel tab="First" value="tab1"><div style="padding: 12px; font-family: sans-serif;">Small tabs content.</div></ts-tab-panel>
-        <ts-tab-panel tab="Second" value="tab2"><div style="padding: 12px;">Second panel.</div></ts-tab-panel>
-      </ts-tabs>
-    </div>
-    <div>
-      <h4 style="margin: 0 0 8px; font-family: sans-serif;">Medium</h4>
-      <ts-tabs size="md" value="tab1">
-        <ts-tab-panel tab="First" value="tab1"><div style="padding: 16px; font-family: sans-serif;">Medium tabs content.</div></ts-tab-panel>
-        <ts-tab-panel tab="Second" value="tab2"><div style="padding: 16px;">Second panel.</div></ts-tab-panel>
-      </ts-tabs>
-    </div>
-    <div>
-      <h4 style="margin: 0 0 8px; font-family: sans-serif;">Large</h4>
-      <ts-tabs size="lg" value="tab1">
-        <ts-tab-panel tab="First" value="tab1"><div style="padding: 20px; font-family: sans-serif;">Large tabs content.</div></ts-tab-panel>
-        <ts-tab-panel tab="Second" value="tab2"><div style="padding: 20px;">Second panel.</div></ts-tab-panel>
-      </ts-tabs>
-    </div>
-  </div>
-`;
-export const WithDisabledTab = () => `
-  <ts-tabs value="profile">
-    <ts-tab-panel tab="Profile" value="profile">
-      <div style="padding: 16px; font-family: sans-serif;">
-        <p style="margin: 0;">Your profile is active and visible to other users.</p>
-      </div>
-    </ts-tab-panel>
-    <ts-tab-panel tab="Settings" value="settings">
-      <div style="padding: 16px; font-family: sans-serif;">
-        <p style="margin: 0;">Adjust your account preferences here.</p>
-      </div>
-    </ts-tab-panel>
-    <ts-tab-panel tab="Admin" value="admin" disabled>
-      <div style="padding: 16px; font-family: sans-serif;">
-        <p style="margin: 0;">Admin panel content (restricted).</p>
-      </div>
-    </ts-tab-panel>
-    <ts-tab-panel tab="Billing" value="billing">
-      <div style="padding: 16px; font-family: sans-serif;">
-        <p style="margin: 0;">Manage your subscription and payment methods.</p>
-      </div>
-    </ts-tab-panel>
-  </ts-tabs>
-`;
-export const DashboardExample = () => `
-  <ts-tabs variant="enclosed" value="analytics">
-    <ts-tab-panel tab="Analytics" value="analytics">
-      <div style="padding: 20px; font-family: sans-serif;">
-        <h4 style="margin: 0 0 12px;">Monthly Analytics</h4>
-        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
-          <div style="padding: 16px; background: #f0f9ff; border-radius: 8px;">
-            <div style="font-size: 24px; font-weight: bold;">12,459</div>
-            <div style="color: #555; font-size: 14px;">Page Views</div>
-          </div>
-          <div style="padding: 16px; background: #f0fdf4; border-radius: 8px;">
-            <div style="font-size: 24px; font-weight: bold;">3,721</div>
-            <div style="color: #555; font-size: 14px;">Unique Visitors</div>
-          </div>
-          <div style="padding: 16px; background: #fefce8; border-radius: 8px;">
-            <div style="font-size: 24px; font-weight: bold;">2m 34s</div>
-            <div style="color: #555; font-size: 14px;">Avg. Session</div>
-          </div>
-        </div>
-      </div>
-    </ts-tab-panel>
-    <ts-tab-panel tab="Users" value="users">
-      <div style="padding: 20px; font-family: sans-serif;">
-        <h4 style="margin: 0 0 12px;">Active Users</h4>
-        <p style="margin: 0; color: #555;">User management and activity tracking.</p>
-      </div>
-    </ts-tab-panel>
-    <ts-tab-panel tab="Revenue" value="revenue">
-      <div style="padding: 20px; font-family: sans-serif;">
-        <h4 style="margin: 0 0 12px;">Revenue Overview</h4>
-        <p style="margin: 0; color: #555;">Track earnings, refunds, and projections.</p>
-      </div>
-    </ts-tab-panel>
-  </ts-tabs>
-`;
-//# sourceMappingURL=tabs.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.stories.ts"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,wCAAwC,EAAE;QACjF,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,MAAM,CAAC;YACrC,WAAW,EAAE,gCAAgC;SAC9C;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,WAAW,EAAE,8BAA8B;SAC5C;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAC9G,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,OAAO;eACM,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;GAoB3B,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,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,MAAM;QACf,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CrC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAwBlC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;CAuB5C,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC7C,CAAC","sourcesContent":["// Hand-written stories for ts-tabs\n\nexport default {\n  title: 'Components/Tabs',\n  tags: ['autodocs'],\n  argTypes: {\n    value: { control: 'text', description: 'The value of the currently active tab.' },\n    variant: {\n      control: 'select',\n      options: ['line', 'enclosed', 'pill'],\n      description: 'Visual variant of the tab bar.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The size of the tab buttons.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.value !== undefined && args.value !== null && args.value !== '') attrs.push(`value=\"${args.value}\"`);\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  return `\n    <ts-tabs ${attrs.join(' ')}>\n      <ts-tab-panel tab=\"Profile\" value=\"profile\">\n        <div style=\"padding: 16px; font-family: sans-serif;\">\n          <h4 style=\"margin: 0 0 8px;\">Profile Information</h4>\n          <p style=\"margin: 0; color: #555;\">Manage your name, email address, and personal details.</p>\n        </div>\n      </ts-tab-panel>\n      <ts-tab-panel tab=\"Settings\" value=\"settings\">\n        <div style=\"padding: 16px; font-family: sans-serif;\">\n          <h4 style=\"margin: 0 0 8px;\">Account Settings</h4>\n          <p style=\"margin: 0; color: #555;\">Configure notifications, privacy, and security preferences.</p>\n        </div>\n      </ts-tab-panel>\n      <ts-tab-panel tab=\"Billing\" value=\"billing\">\n        <div style=\"padding: 16px; font-family: sans-serif;\">\n          <h4 style=\"margin: 0 0 8px;\">Billing &amp; Plans</h4>\n          <p style=\"margin: 0; color: #555;\">View invoices, update payment methods, and manage your subscription.</p>\n        </div>\n      </ts-tab-panel>\n    </ts-tabs>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    value: 'profile',\n    variant: 'line',\n    size: 'md',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <div>\n      <h4 style=\"margin: 0 0 8px; font-family: sans-serif;\">Line (default)</h4>\n      <ts-tabs variant=\"line\" value=\"tab1\">\n        <ts-tab-panel tab=\"Overview\" value=\"tab1\">\n          <div style=\"padding: 16px; font-family: sans-serif;\">Overview content with line-style tabs.</div>\n        </ts-tab-panel>\n        <ts-tab-panel tab=\"Details\" value=\"tab2\">\n          <div style=\"padding: 16px;\">Details content.</div>\n        </ts-tab-panel>\n        <ts-tab-panel tab=\"History\" value=\"tab3\">\n          <div style=\"padding: 16px;\">History content.</div>\n        </ts-tab-panel>\n      </ts-tabs>\n    </div>\n    <div>\n      <h4 style=\"margin: 0 0 8px; font-family: sans-serif;\">Enclosed</h4>\n      <ts-tabs variant=\"enclosed\" value=\"tab1\">\n        <ts-tab-panel tab=\"Overview\" value=\"tab1\">\n          <div style=\"padding: 16px; font-family: sans-serif;\">Overview content with enclosed-style tabs.</div>\n        </ts-tab-panel>\n        <ts-tab-panel tab=\"Details\" value=\"tab2\">\n          <div style=\"padding: 16px;\">Details content.</div>\n        </ts-tab-panel>\n        <ts-tab-panel tab=\"History\" value=\"tab3\">\n          <div style=\"padding: 16px;\">History content.</div>\n        </ts-tab-panel>\n      </ts-tabs>\n    </div>\n    <div>\n      <h4 style=\"margin: 0 0 8px; font-family: sans-serif;\">Pill</h4>\n      <ts-tabs variant=\"pill\" value=\"tab1\">\n        <ts-tab-panel tab=\"Overview\" value=\"tab1\">\n          <div style=\"padding: 16px; font-family: sans-serif;\">Overview content with pill-style tabs.</div>\n        </ts-tab-panel>\n        <ts-tab-panel tab=\"Details\" value=\"tab2\">\n          <div style=\"padding: 16px;\">Details content.</div>\n        </ts-tab-panel>\n        <ts-tab-panel tab=\"History\" value=\"tab3\">\n          <div style=\"padding: 16px;\">History content.</div>\n        </ts-tab-panel>\n      </ts-tabs>\n    </div>\n  </div>\n`;\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <div>\n      <h4 style=\"margin: 0 0 8px; font-family: sans-serif;\">Small</h4>\n      <ts-tabs size=\"sm\" value=\"tab1\">\n        <ts-tab-panel tab=\"First\" value=\"tab1\"><div style=\"padding: 12px; font-family: sans-serif;\">Small tabs content.</div></ts-tab-panel>\n        <ts-tab-panel tab=\"Second\" value=\"tab2\"><div style=\"padding: 12px;\">Second panel.</div></ts-tab-panel>\n      </ts-tabs>\n    </div>\n    <div>\n      <h4 style=\"margin: 0 0 8px; font-family: sans-serif;\">Medium</h4>\n      <ts-tabs size=\"md\" value=\"tab1\">\n        <ts-tab-panel tab=\"First\" value=\"tab1\"><div style=\"padding: 16px; font-family: sans-serif;\">Medium tabs content.</div></ts-tab-panel>\n        <ts-tab-panel tab=\"Second\" value=\"tab2\"><div style=\"padding: 16px;\">Second panel.</div></ts-tab-panel>\n      </ts-tabs>\n    </div>\n    <div>\n      <h4 style=\"margin: 0 0 8px; font-family: sans-serif;\">Large</h4>\n      <ts-tabs size=\"lg\" value=\"tab1\">\n        <ts-tab-panel tab=\"First\" value=\"tab1\"><div style=\"padding: 20px; font-family: sans-serif;\">Large tabs content.</div></ts-tab-panel>\n        <ts-tab-panel tab=\"Second\" value=\"tab2\"><div style=\"padding: 20px;\">Second panel.</div></ts-tab-panel>\n      </ts-tabs>\n    </div>\n  </div>\n`;\n\nexport const WithDisabledTab = (): string => `\n  <ts-tabs value=\"profile\">\n    <ts-tab-panel tab=\"Profile\" value=\"profile\">\n      <div style=\"padding: 16px; font-family: sans-serif;\">\n        <p style=\"margin: 0;\">Your profile is active and visible to other users.</p>\n      </div>\n    </ts-tab-panel>\n    <ts-tab-panel tab=\"Settings\" value=\"settings\">\n      <div style=\"padding: 16px; font-family: sans-serif;\">\n        <p style=\"margin: 0;\">Adjust your account preferences here.</p>\n      </div>\n    </ts-tab-panel>\n    <ts-tab-panel tab=\"Admin\" value=\"admin\" disabled>\n      <div style=\"padding: 16px; font-family: sans-serif;\">\n        <p style=\"margin: 0;\">Admin panel content (restricted).</p>\n      </div>\n    </ts-tab-panel>\n    <ts-tab-panel tab=\"Billing\" value=\"billing\">\n      <div style=\"padding: 16px; font-family: sans-serif;\">\n        <p style=\"margin: 0;\">Manage your subscription and payment methods.</p>\n      </div>\n    </ts-tab-panel>\n  </ts-tabs>\n`;\n\nexport const DashboardExample = (): string => `\n  <ts-tabs variant=\"enclosed\" value=\"analytics\">\n    <ts-tab-panel tab=\"Analytics\" value=\"analytics\">\n      <div style=\"padding: 20px; font-family: sans-serif;\">\n        <h4 style=\"margin: 0 0 12px;\">Monthly Analytics</h4>\n        <div style=\"display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;\">\n          <div style=\"padding: 16px; background: #f0f9ff; border-radius: 8px;\">\n            <div style=\"font-size: 24px; font-weight: bold;\">12,459</div>\n            <div style=\"color: #555; font-size: 14px;\">Page Views</div>\n          </div>\n          <div style=\"padding: 16px; background: #f0fdf4; border-radius: 8px;\">\n            <div style=\"font-size: 24px; font-weight: bold;\">3,721</div>\n            <div style=\"color: #555; font-size: 14px;\">Unique Visitors</div>\n          </div>\n          <div style=\"padding: 16px; background: #fefce8; border-radius: 8px;\">\n            <div style=\"font-size: 24px; font-weight: bold;\">2m 34s</div>\n            <div style=\"color: #555; font-size: 14px;\">Avg. Session</div>\n          </div>\n        </div>\n      </div>\n    </ts-tab-panel>\n    <ts-tab-panel tab=\"Users\" value=\"users\">\n      <div style=\"padding: 20px; font-family: sans-serif;\">\n        <h4 style=\"margin: 0 0 12px;\">Active Users</h4>\n        <p style=\"margin: 0; color: #555;\">User management and activity tracking.</p>\n      </div>\n    </ts-tab-panel>\n    <ts-tab-panel tab=\"Revenue\" value=\"revenue\">\n      <div style=\"padding: 20px; font-family: sans-serif;\">\n        <h4 style=\"margin: 0 0 12px;\">Revenue Overview</h4>\n        <p style=\"margin: 0; color: #555;\">Track earnings, refunds, and projections.</p>\n      </div>\n    </ts-tab-panel>\n  </ts-tabs>\n`;\n"]}