@tessera-ui/core 0.4.1 → 0.5.0

package/dist/collection/components/file-upload/file-upload.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"file-upload.js","sourceRoot":"","sources":["../../../src/components/file-upload/file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, h, Host, Element } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for custom dropzone content.\n *\n * @part dropzone - The dropzone area.\n * @part label - The label text.\n * @part input - The hidden file input.\n */\n@Component({\n  tag: 'ts-file-upload',\n  styleUrl: 'file-upload.css',\n  shadow: true,\n})\nexport class TsFileUpload {\n  @Element() hostEl!: HTMLElement;\n\n  private fileInputEl?: HTMLInputElement;\n\n  /** Accepted file types (e.g. '.jpg,.png'). */\n  @Prop() accept?: string;\n\n  /** Whether multiple files can be selected. */\n  @Prop() multiple = false;\n\n  /** Maximum file size in bytes. */\n  @Prop() maxSize?: number;\n\n  /** Whether the file upload is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Label text for the dropzone. */\n  @Prop() label = 'Drop files here or click to upload';\n\n  /** Form field name. */\n  @Prop() name?: string;\n\n  /** Emitted when files are selected or dropped. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<{ files: File[] }>;\n\n  /** Whether a drag operation is over the dropzone. */\n  @State() isDragOver = false;\n\n  private handleClick = (): void => {\n    if (this.disabled) return;\n    this.fileInputEl?.click();\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.fileInputEl?.click();\n    }\n  };\n\n  private handleFileChange = (event: Event): void => {\n    const input = event.target as HTMLInputElement;\n    if (input.files) {\n      const files = this.validateFiles(Array.from(input.files));\n      if (files.length > 0) {\n        this.tsChange.emit({ files });\n      }\n    }\n    // Reset input so the same file can be selected again\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n  };\n\n  private handleDragOver = (event: DragEvent): void => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (!this.disabled) {\n      this.isDragOver = true;\n    }\n  };\n\n  private handleDragLeave = (event: DragEvent): void => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragOver = false;\n  };\n\n  private handleDrop = (event: DragEvent): void => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragOver = false;\n\n    if (this.disabled) return;\n\n    const droppedFiles = event.dataTransfer?.files;\n    if (droppedFiles) {\n      const files = this.validateFiles(Array.from(droppedFiles));\n      if (files.length > 0) {\n        this.tsChange.emit({ files });\n      }\n    }\n  };\n\n  private validateFiles(files: File[]): File[] {\n    let validFiles = files;\n\n    // Filter by accepted types\n    if (this.accept) {\n      const acceptedTypes = this.accept.split(',').map((t) => t.trim().toLowerCase());\n      validFiles = validFiles.filter((file) => {\n        const ext = '.' + file.name.split('.').pop()?.toLowerCase();\n        const mime = file.type.toLowerCase();\n        return acceptedTypes.some(\n          (accepted) =>\n            accepted === ext ||\n            accepted === mime ||\n            (accepted.endsWith('/*') && mime.startsWith(accepted.replace('/*', '/'))),\n        );\n      });\n    }\n\n    // Filter by max size\n    if (this.maxSize) {\n      validFiles = validFiles.filter((file) => file.size <= this.maxSize!);\n    }\n\n    // If not multiple, take only the first\n    if (!this.multiple && validFiles.length > 1) {\n      validFiles = [validFiles[0]];\n    }\n\n    return validFiles;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-file-upload': true,\n          'ts-file-upload--drag-over': this.isDragOver,\n          'ts-file-upload--disabled': this.disabled,\n        }}\n      >\n        <div\n          class={{\n            'file-upload__dropzone': true,\n            'file-upload__dropzone--drag-over': this.isDragOver,\n          }}\n          part=\"dropzone\"\n          role=\"button\"\n          tabindex={this.disabled ? -1 : 0}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          aria-label={this.label}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n          onDragOver={this.handleDragOver}\n          onDragLeave={this.handleDragLeave}\n          onDrop={this.handleDrop}\n        >\n          <span class=\"file-upload__label\" part=\"label\">\n            <slot>{this.label}</slot>\n          </span>\n\n          <input\n            ref={(el) => (this.fileInputEl = el)}\n            class=\"file-upload__input\"\n            part=\"input\"\n            type=\"file\"\n            name={this.name}\n            accept={this.accept}\n            multiple={this.multiple}\n            disabled={this.disabled}\n            tabindex={-1}\n            aria-hidden=\"true\"\n            onChange={this.handleFileChange}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/file-upload/file-upload.stories.js

@@ -1,107 +0,0 @@
-// Hand-written stories for ts-file-upload
-export default {
-    title: 'Components/FileUpload',
-    tags: ['autodocs'],
-    argTypes: {
-        accept: {
-            control: 'text',
-            description: 'Accepted file types (e.g. \'.jpg,.png\').',
-        },
-        multiple: {
-            control: 'boolean',
-            description: 'Whether multiple files can be selected.',
-        },
-        maxSize: {
-            control: 'number',
-            description: 'Maximum file size in bytes.',
-        },
-        disabled: {
-            control: 'boolean',
-            description: 'Whether the file upload is disabled.',
-        },
-        label: {
-            control: 'text',
-            description: 'Label text for the dropzone.',
-        },
-        name: {
-            control: 'text',
-            description: 'Form field name.',
-        },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.accept !== undefined && args.accept !== '')
-        attrs.push(`accept="${args.accept}"`);
-    if (args.multiple)
-        attrs.push('multiple');
-    if (args.maxSize !== undefined)
-        attrs.push(`max-size="${args.maxSize}"`);
-    if (args.disabled)
-        attrs.push('disabled');
-    if (args.label !== undefined)
-        attrs.push(`label="${args.label}"`);
-    if (args.name !== undefined && args.name !== '')
-        attrs.push(`name="${args.name}"`);
-    return `<div style="max-width: 500px;"><ts-file-upload ${attrs.join(' ')}></ts-file-upload></div>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        label: 'Drop files here or click to upload',
-        multiple: false,
-        disabled: false,
-    },
-});
-export const States = () => `
-  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 500px;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Default</p>
-      <ts-file-upload label="Drop files here or click to upload"></ts-file-upload>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Multiple files</p>
-      <ts-file-upload label="Drop multiple files here" multiple></ts-file-upload>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Disabled</p>
-      <ts-file-upload label="Upload is disabled" disabled></ts-file-upload>
-    </div>
-  </div>
-`;
-export const Variants = () => `
-  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 500px;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Images only</p>
-      <ts-file-upload accept=".jpg,.png,.gif,.webp" label="Drop images here (.jpg, .png, .gif, .webp)"></ts-file-upload>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Documents only</p>
-      <ts-file-upload accept=".pdf,.doc,.docx" label="Drop documents here (.pdf, .doc, .docx)"></ts-file-upload>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Max 5MB per file</p>
-      <ts-file-upload max-size="5242880" label="Drop files here (max 5MB each)" multiple></ts-file-upload>
-    </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;">
-      <h4 style="margin: 0 0 4px;">Upload Attachments</h4>
-      <p style="margin: 0 0 16px; font-size: 14px; color: #666;">
-        Supported formats: JPG, PNG, PDF. Maximum file size: 10MB.
-      </p>
-      <ts-file-upload
-        accept=".jpg,.png,.pdf"
-        multiple
-        max-size="10485760"
-        label="Drag and drop files here, or click to browse"
-        name="attachments"
-      ></ts-file-upload>
-      <div style="margin-top: 16px; display: flex; justify-content: flex-end;">
-        <ts-button variant="primary">Upload Files</ts-button>
-      </div>
-    </div>
-  </div>
-`;
-//# sourceMappingURL=file-upload.stories.js.map

package/dist/collection/components/file-upload/file-upload.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"file-upload.stories.js","sourceRoot":"","sources":["../../../src/components/file-upload/file-upload.stories.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAE1C,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,2CAA2C;SACzD;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,yCAAyC;SACvD;QACD,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,6BAA6B;SAC3C;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,sCAAsC;SACpD;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,8BAA8B;SAC5C;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kBAAkB;SAChC;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE;QAAE,KAAK,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;IAC3F,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACzE,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,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,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IACnF,OAAO,kDAAkD,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,0BAA0B,CAAC;AACrG,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,oCAAoC;QAC3C,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAenC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAerC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;CAmBxC,CAAC","sourcesContent":["// Hand-written stories for ts-file-upload\n\nexport default {\n  title: 'Components/FileUpload',\n  tags: ['autodocs'],\n  argTypes: {\n    accept: {\n      control: 'text',\n      description: 'Accepted file types (e.g. \\'.jpg,.png\\').',\n    },\n    multiple: {\n      control: 'boolean',\n      description: 'Whether multiple files can be selected.',\n    },\n    maxSize: {\n      control: 'number',\n      description: 'Maximum file size in bytes.',\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Whether the file upload is disabled.',\n    },\n    label: {\n      control: 'text',\n      description: 'Label text for the dropzone.',\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.accept !== undefined && args.accept !== '') attrs.push(`accept=\"${args.accept}\"`);\n  if (args.multiple) attrs.push('multiple');\n  if (args.maxSize !== undefined) attrs.push(`max-size=\"${args.maxSize}\"`);\n  if (args.disabled) attrs.push('disabled');\n  if (args.label !== undefined) attrs.push(`label=\"${args.label}\"`);\n  if (args.name !== undefined && args.name !== '') attrs.push(`name=\"${args.name}\"`);\n  return `<div style=\"max-width: 500px;\"><ts-file-upload ${attrs.join(' ')}></ts-file-upload></div>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    label: 'Drop files here or click to upload',\n    multiple: false,\n    disabled: false,\n  },\n});\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; max-width: 500px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Default</p>\n      <ts-file-upload label=\"Drop files here or click to upload\"></ts-file-upload>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Multiple files</p>\n      <ts-file-upload label=\"Drop multiple files here\" multiple></ts-file-upload>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Disabled</p>\n      <ts-file-upload label=\"Upload is disabled\" disabled></ts-file-upload>\n    </div>\n  </div>\n`;\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; max-width: 500px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Images only</p>\n      <ts-file-upload accept=\".jpg,.png,.gif,.webp\" label=\"Drop images here (.jpg, .png, .gif, .webp)\"></ts-file-upload>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Documents only</p>\n      <ts-file-upload accept=\".pdf,.doc,.docx\" label=\"Drop documents here (.pdf, .doc, .docx)\"></ts-file-upload>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Max 5MB per file</p>\n      <ts-file-upload max-size=\"5242880\" label=\"Drop files here (max 5MB each)\" multiple></ts-file-upload>\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      <h4 style=\"margin: 0 0 4px;\">Upload Attachments</h4>\n      <p style=\"margin: 0 0 16px; font-size: 14px; color: #666;\">\n        Supported formats: JPG, PNG, PDF. Maximum file size: 10MB.\n      </p>\n      <ts-file-upload\n        accept=\".jpg,.png,.pdf\"\n        multiple\n        max-size=\"10485760\"\n        label=\"Drag and drop files here, or click to browse\"\n        name=\"attachments\"\n      ></ts-file-upload>\n      <div style=\"margin-top: 16px; display: flex; justify-content: flex-end;\">\n        <ts-button variant=\"primary\">Upload Files</ts-button>\n      </div>\n    </div>\n  </div>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;GAIG;AAMH,MAAM,OAAO,MAAM;IACjB,4DAA4D;IACnC,OAAO,GAAW,MAAM,CAAC;IAElD,kDAAkD;IACzB,GAAG,GAAW,GAAG,CAAC;IAE3C,mDAAmD;IAC1B,cAAc,GAAW,OAAO,CAAC;IAE1D,wCAAwC;IACf,KAAK,GAA2C,SAAS,CAAC;IAEnF,4EAA4E;IAC5E,MAAM;QACJ,MAAM,mBAAmB,GACvB,IAAI,CAAC,OAAO,KAAK,MAAM;YACrB,CAAC,CAAC,4BAA4B,IAAI,CAAC,cAAc,SAAS;YAC1D,CAAC,CAAC,UAAU,IAAI,CAAC,OAAO,QAAQ,CAAC;QAErC,MAAM,KAAK,GAAG;YACZ,mBAAmB;YACnB,GAAG,EAAE,oBAAoB,IAAI,CAAC,GAAG,GAAG;YACpC,UAAU,EAAE,IAAI,CAAC,KAAK;SACvB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK;YAChB,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for grid items.\n *\n * @part base - The grid container.\n */\n@Component({\n  tag: 'ts-grid',\n  styleUrl: 'grid.css',\n  shadow: true,\n})\nexport class TsGrid {\n  /** Number of columns or 'auto' for responsive auto-fill. */\n  @Prop({ reflect: true }) columns: string = 'auto';\n\n  /** Spacing token number for gap between items. */\n  @Prop({ reflect: true }) gap: string = '4';\n\n  /** Minimum column width when columns is 'auto'. */\n  @Prop({ reflect: true }) minColumnWidth: string = '280px';\n\n  /** Vertical alignment of grid items. */\n  @Prop({ reflect: true }) align: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const gridTemplateColumns =\n      this.columns === 'auto'\n        ? `repeat(auto-fill, minmax(${this.minColumnWidth}, 1fr))`\n        : `repeat(${this.columns}, 1fr)`;\n\n    const style = {\n      gridTemplateColumns,\n      gap: `var(--ts-spacing-${this.gap})`,\n      alignItems: this.align,\n    };\n\n    return (\n      <Host style={style}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,134 +0,0 @@
-// Hand-written stories for ts-grid
-export default {
-    title: 'Layout/Grid',
-    tags: ['autodocs'],
-    argTypes: {
-        columns: {
-            control: 'text',
-            description: "Number of columns or 'auto' for responsive auto-fill.",
-        },
-        gap: {
-            control: 'select',
-            options: ['0', '1', '2', '3', '4', '5', '6', '8'],
-            description: 'Spacing token number for gap.',
-        },
-        minColumnWidth: {
-            control: 'text',
-            description: 'Minimum column width for auto mode.',
-        },
-        align: {
-            control: 'select',
-            options: ['start', 'center', 'end', 'stretch'],
-            description: 'Vertical alignment of grid items.',
-        },
-    },
-};
-const cardStyle = 'padding: 24px; background: #f1f5f9; border-radius: 8px; font-family: sans-serif; text-align: center;';
-export const Default = () => `
-  <ts-grid>
-    <div style="${cardStyle}">Card 1</div>
-    <div style="${cardStyle}">Card 2</div>
-    <div style="${cardStyle}">Card 3</div>
-    <div style="${cardStyle}">Card 4</div>
-    <div style="${cardStyle}">Card 5</div>
-    <div style="${cardStyle}">Card 6</div>
-  </ts-grid>
-`;
-export const FixedColumns = () => `
-  <div style="display: flex; flex-direction: column; gap: 32px;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">2 Columns</p>
-      <ts-grid columns="2">
-        <div style="${cardStyle}">Item 1</div>
-        <div style="${cardStyle}">Item 2</div>
-        <div style="${cardStyle}">Item 3</div>
-        <div style="${cardStyle}">Item 4</div>
-      </ts-grid>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">3 Columns</p>
-      <ts-grid columns="3">
-        <div style="${cardStyle}">Item 1</div>
-        <div style="${cardStyle}">Item 2</div>
-        <div style="${cardStyle}">Item 3</div>
-        <div style="${cardStyle}">Item 4</div>
-        <div style="${cardStyle}">Item 5</div>
-        <div style="${cardStyle}">Item 6</div>
-      </ts-grid>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">4 Columns</p>
-      <ts-grid columns="4">
-        <div style="${cardStyle}">Item 1</div>
-        <div style="${cardStyle}">Item 2</div>
-        <div style="${cardStyle}">Item 3</div>
-        <div style="${cardStyle}">Item 4</div>
-      </ts-grid>
-    </div>
-  </div>
-`;
-export const CustomMinWidth = () => `
-  <div style="display: flex; flex-direction: column; gap: 32px;">
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Min width: 150px</p>
-      <ts-grid min-column-width="150px">
-        <div style="${cardStyle}">A</div>
-        <div style="${cardStyle}">B</div>
-        <div style="${cardStyle}">C</div>
-        <div style="${cardStyle}">D</div>
-        <div style="${cardStyle}">E</div>
-        <div style="${cardStyle}">F</div>
-      </ts-grid>
-    </div>
-    <div>
-      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Min width: 400px</p>
-      <ts-grid min-column-width="400px">
-        <div style="${cardStyle}">A</div>
-        <div style="${cardStyle}">B</div>
-        <div style="${cardStyle}">C</div>
-      </ts-grid>
-    </div>
-  </div>
-`;
-export const Responsive = () => `
-  <div>
-    <p style="margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;">
-      Resize the browser to see the grid reflow automatically.
-    </p>
-    <ts-grid min-column-width="240px" gap="4">
-      <div style="${cardStyle}">Dashboard</div>
-      <div style="${cardStyle}">Analytics</div>
-      <div style="${cardStyle}">Reports</div>
-      <div style="${cardStyle}">Settings</div>
-      <div style="${cardStyle}">Users</div>
-    </ts-grid>
-  </div>
-`;
-export const Composition = () => `
-  <ts-container size="lg">
-    <div style="display: flex; flex-direction: column; gap: 24px;">
-      <h2 style="margin: 0; font-family: sans-serif;">Dashboard</h2>
-      <ts-grid columns="3" gap="4">
-        <div style="padding: 20px; background: #eff6ff; border-radius: 8px; font-family: sans-serif;">
-          <h3 style="margin: 0 0 8px;">Revenue</h3>
-          <p style="margin: 0; font-size: 24px; font-weight: bold;">$12,400</p>
-        </div>
-        <div style="padding: 20px; background: #f0fdf4; border-radius: 8px; font-family: sans-serif;">
-          <h3 style="margin: 0 0 8px;">Users</h3>
-          <p style="margin: 0; font-size: 24px; font-weight: bold;">1,240</p>
-        </div>
-        <div style="padding: 20px; background: #fef3c7; border-radius: 8px; font-family: sans-serif;">
-          <h3 style="margin: 0 0 8px;">Orders</h3>
-          <p style="margin: 0; font-size: 24px; font-weight: bold;">320</p>
-        </div>
-      </ts-grid>
-      <ts-grid min-column-width="300px" gap="4">
-        <div style="${cardStyle}">Recent Activity</div>
-        <div style="${cardStyle}">Notifications</div>
-        <div style="${cardStyle}">Quick Actions</div>
-        <div style="${cardStyle}">Team Updates</div>
-      </ts-grid>
-    </div>
-  </ts-container>
-`;
-//# sourceMappingURL=grid.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"grid.stories.js","sourceRoot":"","sources":["../../../src/components/grid/grid.stories.ts"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;SACrE;QACD,GAAG,EAAE;YACH,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;YACjD,WAAW,EAAE,+BAA+B;SAC7C;QACD,cAAc,EAAE;YACd,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,qCAAqC;SACnD;QACD,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,CAAC;YAC9C,WAAW,EAAE,mCAAmC;SACjD;KACF;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,sGAAsG,CAAC;AAEzH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAW,EAAE,CAAC;;kBAEnB,SAAS;kBACT,SAAS;kBACT,SAAS;kBACT,SAAS;kBACT,SAAS;kBACT,SAAS;;CAE1B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAW,EAAE,CAAC;;;;;sBAKpB,SAAS;sBACT,SAAS;sBACT,SAAS;sBACT,SAAS;;;;;;sBAMT,SAAS;sBACT,SAAS;sBACT,SAAS;sBACT,SAAS;sBACT,SAAS;sBACT,SAAS;;;;;;sBAMT,SAAS;sBACT,SAAS;sBACT,SAAS;sBACT,SAAS;;;;CAI9B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAW,EAAE,CAAC;;;;;sBAKtB,SAAS;sBACT,SAAS;sBACT,SAAS;sBACT,SAAS;sBACT,SAAS;sBACT,SAAS;;;;;;sBAMT,SAAS;sBACT,SAAS;sBACT,SAAS;;;;CAI9B,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAW,EAAE,CAAC;;;;;;oBAMpB,SAAS;oBACT,SAAS;oBACT,SAAS;oBACT,SAAS;oBACT,SAAS;;;CAG5B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;sBAmBnB,SAAS;sBACT,SAAS;sBACT,SAAS;sBACT,SAAS;;;;CAI9B,CAAC","sourcesContent":["// Hand-written stories for ts-grid\n\nexport default {\n  title: 'Layout/Grid',\n  tags: ['autodocs'],\n  argTypes: {\n    columns: {\n      control: 'text',\n      description: \"Number of columns or 'auto' for responsive auto-fill.\",\n    },\n    gap: {\n      control: 'select',\n      options: ['0', '1', '2', '3', '4', '5', '6', '8'],\n      description: 'Spacing token number for gap.',\n    },\n    minColumnWidth: {\n      control: 'text',\n      description: 'Minimum column width for auto mode.',\n    },\n    align: {\n      control: 'select',\n      options: ['start', 'center', 'end', 'stretch'],\n      description: 'Vertical alignment of grid items.',\n    },\n  },\n};\n\nconst cardStyle = 'padding: 24px; background: #f1f5f9; border-radius: 8px; font-family: sans-serif; text-align: center;';\n\nexport const Default = (): string => `\n  <ts-grid>\n    <div style=\"${cardStyle}\">Card 1</div>\n    <div style=\"${cardStyle}\">Card 2</div>\n    <div style=\"${cardStyle}\">Card 3</div>\n    <div style=\"${cardStyle}\">Card 4</div>\n    <div style=\"${cardStyle}\">Card 5</div>\n    <div style=\"${cardStyle}\">Card 6</div>\n  </ts-grid>\n`;\n\nexport const FixedColumns = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">2 Columns</p>\n      <ts-grid columns=\"2\">\n        <div style=\"${cardStyle}\">Item 1</div>\n        <div style=\"${cardStyle}\">Item 2</div>\n        <div style=\"${cardStyle}\">Item 3</div>\n        <div style=\"${cardStyle}\">Item 4</div>\n      </ts-grid>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">3 Columns</p>\n      <ts-grid columns=\"3\">\n        <div style=\"${cardStyle}\">Item 1</div>\n        <div style=\"${cardStyle}\">Item 2</div>\n        <div style=\"${cardStyle}\">Item 3</div>\n        <div style=\"${cardStyle}\">Item 4</div>\n        <div style=\"${cardStyle}\">Item 5</div>\n        <div style=\"${cardStyle}\">Item 6</div>\n      </ts-grid>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">4 Columns</p>\n      <ts-grid columns=\"4\">\n        <div style=\"${cardStyle}\">Item 1</div>\n        <div style=\"${cardStyle}\">Item 2</div>\n        <div style=\"${cardStyle}\">Item 3</div>\n        <div style=\"${cardStyle}\">Item 4</div>\n      </ts-grid>\n    </div>\n  </div>\n`;\n\nexport const CustomMinWidth = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Min width: 150px</p>\n      <ts-grid min-column-width=\"150px\">\n        <div style=\"${cardStyle}\">A</div>\n        <div style=\"${cardStyle}\">B</div>\n        <div style=\"${cardStyle}\">C</div>\n        <div style=\"${cardStyle}\">D</div>\n        <div style=\"${cardStyle}\">E</div>\n        <div style=\"${cardStyle}\">F</div>\n      </ts-grid>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Min width: 400px</p>\n      <ts-grid min-column-width=\"400px\">\n        <div style=\"${cardStyle}\">A</div>\n        <div style=\"${cardStyle}\">B</div>\n        <div style=\"${cardStyle}\">C</div>\n      </ts-grid>\n    </div>\n  </div>\n`;\n\nexport const Responsive = (): string => `\n  <div>\n    <p style=\"margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;\">\n      Resize the browser to see the grid reflow automatically.\n    </p>\n    <ts-grid min-column-width=\"240px\" gap=\"4\">\n      <div style=\"${cardStyle}\">Dashboard</div>\n      <div style=\"${cardStyle}\">Analytics</div>\n      <div style=\"${cardStyle}\">Reports</div>\n      <div style=\"${cardStyle}\">Settings</div>\n      <div style=\"${cardStyle}\">Users</div>\n    </ts-grid>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <ts-container size=\"lg\">\n    <div style=\"display: flex; flex-direction: column; gap: 24px;\">\n      <h2 style=\"margin: 0; font-family: sans-serif;\">Dashboard</h2>\n      <ts-grid columns=\"3\" gap=\"4\">\n        <div style=\"padding: 20px; background: #eff6ff; border-radius: 8px; font-family: sans-serif;\">\n          <h3 style=\"margin: 0 0 8px;\">Revenue</h3>\n          <p style=\"margin: 0; font-size: 24px; font-weight: bold;\">$12,400</p>\n        </div>\n        <div style=\"padding: 20px; background: #f0fdf4; border-radius: 8px; font-family: sans-serif;\">\n          <h3 style=\"margin: 0 0 8px;\">Users</h3>\n          <p style=\"margin: 0; font-size: 24px; font-weight: bold;\">1,240</p>\n        </div>\n        <div style=\"padding: 20px; background: #fef3c7; border-radius: 8px; font-family: sans-serif;\">\n          <h3 style=\"margin: 0 0 8px;\">Orders</h3>\n          <p style=\"margin: 0; font-size: 24px; font-weight: bold;\">320</p>\n        </div>\n      </ts-grid>\n      <ts-grid min-column-width=\"300px\" gap=\"4\">\n        <div style=\"${cardStyle}\">Recent Activity</div>\n        <div style=\"${cardStyle}\">Notifications</div>\n        <div style=\"${cardStyle}\">Quick Actions</div>\n        <div style=\"${cardStyle}\">Team Updates</div>\n      </ts-grid>\n    </div>\n  </ts-container>\n`;\n"]}

package/dist/collection/components/icon/icon-registry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-registry.js","sourceRoot":"","sources":["../../../src/components/icon/icon-registry.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAkB,CAAC;AAE3C;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,KAA6B;IACzD,KAAK,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QAChD,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAC1B,CAAC;AACH,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,IAAY,EAAE,GAAW;IACpD,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;AAC1B,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,OAAO,CAAC,IAAY;IAClC,OAAO,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,sBAAsB;IACpC,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;AACrC,CAAC","sourcesContent":["/**\n * Icon Registry\n *\n * A global registry for SVG icon strings. Components look up icons by name\n * from this registry. Works with any icon library — register SVG strings\n * directly or use the Lucide helper (`registerLucideIcons`).\n */\n\nconst registry = new Map<string, string>();\n\n/**\n * Register multiple icons at once.\n * @param icons - A map of icon name to SVG string.\n */\nexport function registerIcons(icons: Record<string, string>): void {\n  for (const [name, svg] of Object.entries(icons)) {\n    registry.set(name, svg);\n  }\n}\n\n/**\n * Register a single icon.\n * @param name - The icon name used in `<ts-icon name=\"...\">`.\n * @param svg  - The full SVG markup string.\n */\nexport function registerIcon(name: string, svg: string): void {\n  registry.set(name, svg);\n}\n\n/**\n * Retrieve an icon's SVG string by name.\n * @returns The SVG string, or `undefined` if the icon is not registered.\n */\nexport function getIcon(name: string): string | undefined {\n  return registry.get(name);\n}\n\n/**\n * List all registered icon names.\n */\nexport function getRegisteredIconNames(): string[] {\n  return Array.from(registry.keys());\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Element, Watch, State } from '@stencil/core';\nimport type { TsSize } from '../../types';\nimport { getIcon } from './icon-registry';\n\ntype LucideNode = [string, Record<string, string>][];\n\n/** Cached reference to the Lucide icons map — loaded lazily on first use. */\nlet lucideCache: Record<string, LucideNode> | null = null;\n\n/**\n * Converts a PascalCase or kebab-case icon name to the PascalCase key used by Lucide.\n * e.g. \"search\" → \"Search\", \"arrow-left\" → \"ArrowLeft\"\n */\nfunction toLucideKey(name: string): string {\n  return name\n    .split('-')\n    .map((part: string) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join('');\n}\n\n/**\n * Renders a Lucide icon node array to an SVG string.\n */\nfunction renderLucideSvg(nodes: LucideNode): string {\n  const children = nodes\n    .map(([tag, attrs]: [string, Record<string, string>]) => {\n      const attrStr = Object.entries(attrs)\n        .map(([k, v]: [string, string]) => `${k}=\"${v}\"`)\n        .join(' ');\n      return `<${tag} ${attrStr}/>`;\n    })\n    .join('');\n  return `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">${children}</svg>`;\n}\n\n/**\n * @slot - Default slot for inline SVG content.\n *\n * @part img - The img element (when using src prop).\n * @part svg - The container for resolved SVG content (when using name prop).\n */\n@Component({\n  tag: 'ts-icon',\n  styleUrl: 'icon.css',\n  shadow: true,\n})\nexport class TsIcon {\n  @Element() el!: HTMLElement;\n\n  /** Icon name — resolves from custom registry first, then built-in Lucide icons. Accepts kebab-case or PascalCase. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** URL to an external SVG icon file. */\n  @Prop() src?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Accessible label. When set, applies role=\"img\" and aria-label. When absent, sets aria-hidden=\"true\". */\n  @Prop() label?: string;\n\n  /** CSS color value applied to the icon. */\n  @Prop({ reflect: true }) color: string = 'currentColor';\n\n  @State() private svgContent?: string;\n\n  @Watch('name')\n  nameChanged(): void {\n    this.loadIcon();\n  }\n\n  componentWillLoad(): void {\n    return this.loadIcon() as unknown as void;\n  }\n\n  /**\n   * Checks whether built-in Lucide icons are disabled via data-icons=\"none\"\n   * on any ancestor element.\n   */\n  private isBuiltInDisabled(): boolean {\n    return this.el.closest('[data-icons=\"none\"]') !== null;\n  }\n\n  private async loadIcon(): Promise<void> {\n    if (this.name && !this.src) {\n      // 1. Check custom registry first (allows overrides)\n      const registered = getIcon(this.name);\n      if (registered) {\n        this.svgContent = registered;\n        return;\n      }\n\n      // 2. If built-in icons are disabled via data-icons=\"none\", stop here\n      if (this.isBuiltInDisabled()) {\n        this.svgContent = undefined;\n        return;\n      }\n\n      // 3. Lazy-load Lucide icons (only fetched on first name lookup)\n      if (!lucideCache) {\n        try {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          const mod: { icons: Record<string, LucideNode> } = await import('lucide') as any;\n          lucideCache = mod.icons;\n        } catch {\n          this.svgContent = undefined;\n          return;\n        }\n      }\n\n      const key = toLucideKey(this.name);\n      const lucideIcon = lucideCache[key];\n      if (lucideIcon) {\n        this.svgContent = renderLucideSvg(lucideIcon);\n        return;\n      }\n\n      this.svgContent = undefined;\n    } else {\n      this.svgContent = undefined;\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const hasLabel = !!this.label;\n\n    return (\n      <Host\n        class={{\n          'ts-icon': true,\n          [`ts-icon--${this.size}`]: true,\n        }}\n        role={hasLabel ? 'img' : undefined}\n        aria-label={hasLabel ? this.label : undefined}\n        aria-hidden={hasLabel ? undefined : 'true'}\n        style={{ '--ts-icon-color': this.color }}\n      >\n        {this.src ? (\n          <img src={this.src} alt=\"\" part=\"img\" />\n        ) : this.svgContent ? (\n          <span part=\"svg\" innerHTML={this.svgContent}></span>\n        ) : (\n          <slot />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,119 +0,0 @@
-// Hand-written stories for ts-icon — uses Lucide icons for realistic previews
-export default {
-    title: 'Components/Icon',
-    tags: ['autodocs'],
-    argTypes: {
-        name: {
-            control: 'text',
-            description: 'Lucide icon name (kebab-case or PascalCase). Browse all at lucide.dev/icons.',
-        },
-        size: {
-            control: 'select',
-            options: ['xs', 'sm', 'md', 'lg', 'xl'],
-            description: 'Icon size variant.',
-        },
-        color: { control: 'color', description: 'Icon color.' },
-        label: { control: 'text', description: 'Accessible label (omit for decorative icons).' },
-        src: { control: 'text', description: 'URL to an external SVG file.' },
-    },
-};
-const Template = (args) => {
-    const attrs = [];
-    if (args.name)
-        attrs.push(`name="${args.name}"`);
-    if (args.size)
-        attrs.push(`size="${args.size}"`);
-    if (args.color)
-        attrs.push(`color="${args.color}"`);
-    if (args.label)
-        attrs.push(`label="${args.label}"`);
-    if (args.src)
-        attrs.push(`src="${args.src}"`);
-    return `<ts-icon ${attrs.join(' ')}></ts-icon>`;
-};
-export const Default = Object.assign(Template.bind({}), {
-    args: {
-        name: 'star',
-        size: 'md',
-    },
-});
-export const Sizes = () => `
-  <div style="display: flex; gap: 16px; align-items: center;">
-    <ts-icon name="heart" size="xs"></ts-icon>
-    <ts-icon name="heart" size="sm"></ts-icon>
-    <ts-icon name="heart" size="md"></ts-icon>
-    <ts-icon name="heart" size="lg"></ts-icon>
-    <ts-icon name="heart" size="xl"></ts-icon>
-  </div>
-`;
-export const CommonIcons = () => `
-  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
-    <ts-icon name="search" size="md" label="Search"></ts-icon>
-    <ts-icon name="home" size="md" label="Home"></ts-icon>
-    <ts-icon name="settings" size="md" label="Settings"></ts-icon>
-    <ts-icon name="user" size="md" label="User"></ts-icon>
-    <ts-icon name="bell" size="md" label="Notifications"></ts-icon>
-    <ts-icon name="mail" size="md" label="Mail"></ts-icon>
-    <ts-icon name="calendar" size="md" label="Calendar"></ts-icon>
-    <ts-icon name="check" size="md" label="Check"></ts-icon>
-    <ts-icon name="x" size="md" label="Close"></ts-icon>
-    <ts-icon name="plus" size="md" label="Add"></ts-icon>
-    <ts-icon name="trash-2" size="md" label="Delete"></ts-icon>
-    <ts-icon name="edit" size="md" label="Edit"></ts-icon>
-    <ts-icon name="download" size="md" label="Download"></ts-icon>
-    <ts-icon name="upload" size="md" label="Upload"></ts-icon>
-    <ts-icon name="external-link" size="md" label="External link"></ts-icon>
-    <ts-icon name="copy" size="md" label="Copy"></ts-icon>
-  </div>
-`;
-export const NavigationIcons = () => `
-  <div style="display: flex; gap: 16px; align-items: center;">
-    <ts-icon name="arrow-left" size="md"></ts-icon>
-    <ts-icon name="arrow-right" size="md"></ts-icon>
-    <ts-icon name="arrow-up" size="md"></ts-icon>
-    <ts-icon name="arrow-down" size="md"></ts-icon>
-    <ts-icon name="chevron-left" size="md"></ts-icon>
-    <ts-icon name="chevron-right" size="md"></ts-icon>
-    <ts-icon name="chevron-down" size="md"></ts-icon>
-    <ts-icon name="menu" size="md"></ts-icon>
-    <ts-icon name="more-horizontal" size="md"></ts-icon>
-  </div>
-`;
-export const StatusIcons = () => `
-  <div style="display: flex; gap: 16px; align-items: center;">
-    <ts-icon name="check-circle" size="md" color="var(--ts-color-success-600)"></ts-icon>
-    <ts-icon name="alert-triangle" size="md" color="var(--ts-color-warning-600)"></ts-icon>
-    <ts-icon name="alert-circle" size="md" color="var(--ts-color-danger-600)"></ts-icon>
-    <ts-icon name="info" size="md" color="var(--ts-color-info-600)"></ts-icon>
-    <ts-icon name="loader" size="md" color="var(--ts-color-text-tertiary)"></ts-icon>
-  </div>
-`;
-export const WithButtons = () => `
-  <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
-    <ts-button appearance="solid" variant="primary">
-      <ts-icon slot="prefix" name="save" size="sm"></ts-icon>
-      Save
-    </ts-button>
-    <ts-button appearance="outline" variant="danger">
-      <ts-icon slot="prefix" name="trash-2" size="sm"></ts-icon>
-      Delete
-    </ts-button>
-    <ts-button appearance="ghost" variant="neutral">
-      <ts-icon slot="prefix" name="settings" size="sm"></ts-icon>
-      Settings
-    </ts-button>
-    <ts-button appearance="solid" variant="primary" aria-label="Add">
-      <ts-icon slot="prefix" name="plus" size="sm"></ts-icon>
-    </ts-button>
-  </div>
-`;
-export const CustomColor = () => `
-  <div style="display: flex; gap: 16px; align-items: center;">
-    <ts-icon name="heart" size="lg" color="var(--ts-color-danger-500)"></ts-icon>
-    <ts-icon name="star" size="lg" color="var(--ts-color-warning-500)"></ts-icon>
-    <ts-icon name="check-circle" size="lg" color="var(--ts-color-success-500)"></ts-icon>
-    <ts-icon name="info" size="lg" color="var(--ts-color-info-500)"></ts-icon>
-    <ts-icon name="zap" size="lg" color="var(--ts-color-primary-500)"></ts-icon>
-  </div>
-`;
-//# sourceMappingURL=icon.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"icon.stories.js","sourceRoot":"","sources":["../../../src/components/icon/icon.stories.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAE9E,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,8EAA8E;SAC5F;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YACvC,WAAW,EAAE,oBAAoB;SAClC;QACD,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE;QACvD,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,+CAA+C,EAAE;QACxF,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,8BAA8B,EAAE;KACtE;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IACjD,IAAI,IAAI,CAAC,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IACjD,IAAI,IAAI,CAAC,KAAK;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACpD,IAAI,IAAI,CAAC,KAAK;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACpD,IAAI,IAAI,CAAC,GAAG;QAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC;IAC9C,OAAO,YAAY,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQlC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;CAmBxC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;CAY5C,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQxC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;CAkBxC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;CAQxC,CAAC","sourcesContent":["// Hand-written stories for ts-icon — uses Lucide icons for realistic previews\n\nexport default {\n  title: 'Components/Icon',\n  tags: ['autodocs'],\n  argTypes: {\n    name: {\n      control: 'text',\n      description: 'Lucide icon name (kebab-case or PascalCase). Browse all at lucide.dev/icons.',\n    },\n    size: {\n      control: 'select',\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\n      description: 'Icon size variant.',\n    },\n    color: { control: 'color', description: 'Icon color.' },\n    label: { control: 'text', description: 'Accessible label (omit for decorative icons).' },\n    src: { control: 'text', description: 'URL to an external SVG file.' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.name) attrs.push(`name=\"${args.name}\"`);\n  if (args.size) attrs.push(`size=\"${args.size}\"`);\n  if (args.color) attrs.push(`color=\"${args.color}\"`);\n  if (args.label) attrs.push(`label=\"${args.label}\"`);\n  if (args.src) attrs.push(`src=\"${args.src}\"`);\n  return `<ts-icon ${attrs.join(' ')}></ts-icon>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    name: 'star',\n    size: 'md',\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center;\">\n    <ts-icon name=\"heart\" size=\"xs\"></ts-icon>\n    <ts-icon name=\"heart\" size=\"sm\"></ts-icon>\n    <ts-icon name=\"heart\" size=\"md\"></ts-icon>\n    <ts-icon name=\"heart\" size=\"lg\"></ts-icon>\n    <ts-icon name=\"heart\" size=\"xl\"></ts-icon>\n  </div>\n`;\n\nexport const CommonIcons = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center; flex-wrap: wrap;\">\n    <ts-icon name=\"search\" size=\"md\" label=\"Search\"></ts-icon>\n    <ts-icon name=\"home\" size=\"md\" label=\"Home\"></ts-icon>\n    <ts-icon name=\"settings\" size=\"md\" label=\"Settings\"></ts-icon>\n    <ts-icon name=\"user\" size=\"md\" label=\"User\"></ts-icon>\n    <ts-icon name=\"bell\" size=\"md\" label=\"Notifications\"></ts-icon>\n    <ts-icon name=\"mail\" size=\"md\" label=\"Mail\"></ts-icon>\n    <ts-icon name=\"calendar\" size=\"md\" label=\"Calendar\"></ts-icon>\n    <ts-icon name=\"check\" size=\"md\" label=\"Check\"></ts-icon>\n    <ts-icon name=\"x\" size=\"md\" label=\"Close\"></ts-icon>\n    <ts-icon name=\"plus\" size=\"md\" label=\"Add\"></ts-icon>\n    <ts-icon name=\"trash-2\" size=\"md\" label=\"Delete\"></ts-icon>\n    <ts-icon name=\"edit\" size=\"md\" label=\"Edit\"></ts-icon>\n    <ts-icon name=\"download\" size=\"md\" label=\"Download\"></ts-icon>\n    <ts-icon name=\"upload\" size=\"md\" label=\"Upload\"></ts-icon>\n    <ts-icon name=\"external-link\" size=\"md\" label=\"External link\"></ts-icon>\n    <ts-icon name=\"copy\" size=\"md\" label=\"Copy\"></ts-icon>\n  </div>\n`;\n\nexport const NavigationIcons = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center;\">\n    <ts-icon name=\"arrow-left\" size=\"md\"></ts-icon>\n    <ts-icon name=\"arrow-right\" size=\"md\"></ts-icon>\n    <ts-icon name=\"arrow-up\" size=\"md\"></ts-icon>\n    <ts-icon name=\"arrow-down\" size=\"md\"></ts-icon>\n    <ts-icon name=\"chevron-left\" size=\"md\"></ts-icon>\n    <ts-icon name=\"chevron-right\" size=\"md\"></ts-icon>\n    <ts-icon name=\"chevron-down\" size=\"md\"></ts-icon>\n    <ts-icon name=\"menu\" size=\"md\"></ts-icon>\n    <ts-icon name=\"more-horizontal\" size=\"md\"></ts-icon>\n  </div>\n`;\n\nexport const StatusIcons = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center;\">\n    <ts-icon name=\"check-circle\" size=\"md\" color=\"var(--ts-color-success-600)\"></ts-icon>\n    <ts-icon name=\"alert-triangle\" size=\"md\" color=\"var(--ts-color-warning-600)\"></ts-icon>\n    <ts-icon name=\"alert-circle\" size=\"md\" color=\"var(--ts-color-danger-600)\"></ts-icon>\n    <ts-icon name=\"info\" size=\"md\" color=\"var(--ts-color-info-600)\"></ts-icon>\n    <ts-icon name=\"loader\" size=\"md\" color=\"var(--ts-color-text-tertiary)\"></ts-icon>\n  </div>\n`;\n\nexport const WithButtons = (): string => `\n  <div style=\"display: flex; gap: 12px; align-items: center; flex-wrap: wrap;\">\n    <ts-button appearance=\"solid\" variant=\"primary\">\n      <ts-icon slot=\"prefix\" name=\"save\" size=\"sm\"></ts-icon>\n      Save\n    </ts-button>\n    <ts-button appearance=\"outline\" variant=\"danger\">\n      <ts-icon slot=\"prefix\" name=\"trash-2\" size=\"sm\"></ts-icon>\n      Delete\n    </ts-button>\n    <ts-button appearance=\"ghost\" variant=\"neutral\">\n      <ts-icon slot=\"prefix\" name=\"settings\" size=\"sm\"></ts-icon>\n      Settings\n    </ts-button>\n    <ts-button appearance=\"solid\" variant=\"primary\" aria-label=\"Add\">\n      <ts-icon slot=\"prefix\" name=\"plus\" size=\"sm\"></ts-icon>\n    </ts-button>\n  </div>\n`;\n\nexport const CustomColor = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center;\">\n    <ts-icon name=\"heart\" size=\"lg\" color=\"var(--ts-color-danger-500)\"></ts-icon>\n    <ts-icon name=\"star\" size=\"lg\" color=\"var(--ts-color-warning-500)\"></ts-icon>\n    <ts-icon name=\"check-circle\" size=\"lg\" color=\"var(--ts-color-success-500)\"></ts-icon>\n    <ts-icon name=\"info\" size=\"lg\" color=\"var(--ts-color-info-500)\"></ts-icon>\n    <ts-icon name=\"zap\" size=\"lg\" color=\"var(--ts-color-primary-500)\"></ts-icon>\n  </div>\n`;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  Watch,\n  h,\n  Host,\n  Element,\n  Method,\n} from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsChangeEventDetail, TsValidationEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot prefix - Content before the input (e.g., icon or currency symbol).\n * @slot suffix - Content after the input (e.g., icon or clear button).\n * @slot help-text - Help text displayed below the input.\n *\n * @part base - The outer wrapper.\n * @part label - The label element.\n * @part input - The native input element.\n * @part prefix - The prefix slot wrapper.\n * @part suffix - The suffix slot wrapper.\n * @part help-text - The help text wrapper.\n * @part error-text - The error message wrapper.\n */\n@Component({\n  tag: 'ts-input',\n  styleUrl: 'input.css',\n  shadow: true,\n})\nexport class TsInput {\n  @Element() hostEl!: HTMLElement;\n\n  private inputEl?: HTMLInputElement;\n  private inputId = generateId('ts-input');\n\n  /** The input's value. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The input type. */\n  @Prop({ reflect: true }) type:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'number'\n    | 'tel'\n    | 'url'\n    | 'search' = 'text';\n\n  /** The input's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Label text displayed above the input. */\n  @Prop() label?: string;\n\n  /** Placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Help text displayed below the input. */\n  @Prop() helpText?: string;\n\n  /** Renders the input in an error state with an error message. */\n  @Prop() error?: string;\n\n  /** Makes the input required. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Renders the input as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Renders the input as readonly. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** Maximum character length. */\n  @Prop() maxlength?: number;\n\n  /** Minimum character length. */\n  @Prop() minlength?: number;\n\n  /** Pattern for validation (regex string). */\n  @Prop() pattern?: string;\n\n  /** Autocomplete attribute. */\n  @Prop() autocomplete?: string;\n\n  /** Name attribute for form submission. */\n  @Prop() name?: string;\n\n  /** Whether the input is currently focused. */\n  @State() hasFocus = false;\n\n  /** Emitted when the value changes (on input). */\n  @Event({ eventName: 'tsInput' }) tsInput!: EventEmitter<TsChangeEventDetail<string>>;\n\n  /** Emitted when the value changes (on blur / commit). */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsChangeEventDetail<string>>;\n\n  /** Emitted when the input gains focus. */\n  @Event({ eventName: 'tsFocus' }) tsFocus!: EventEmitter<void>;\n\n  /** Emitted when the input loses focus. */\n  @Event({ eventName: 'tsBlur' }) tsBlur!: EventEmitter<void>;\n\n  /** Emitted on validation. */\n  @Event({ eventName: 'tsValidate' }) tsValidate!: EventEmitter<TsValidationEventDetail>;\n\n  @Watch('value')\n  handleValueChange(newValue: string, oldValue: string): void {\n    if (newValue !== oldValue && this.inputEl) {\n      this.inputEl.value = newValue;\n    }\n  }\n\n  /** Programmatically focus the input. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.inputEl?.focus();\n  }\n\n  /** Programmatically select the input text. */\n  @Method()\n  async selectText(): Promise<void> {\n    this.inputEl?.select();\n  }\n\n  private handleInput = (event: Event): void => {\n    const target = event.target as HTMLInputElement;\n    const previousValue = this.value;\n    this.value = target.value;\n    this.tsInput.emit({ value: this.value, previousValue });\n  };\n\n  private handleChange = (): void => {\n    this.tsChange.emit({ value: this.value, previousValue: this.value });\n\n    // Run native validation\n    if (this.inputEl) {\n      const valid = this.inputEl.checkValidity();\n      this.tsValidate.emit({\n        valid,\n        message: this.inputEl.validationMessage,\n      });\n    }\n  };\n\n  private handleFocus = (): void => {\n    this.hasFocus = true;\n    this.tsFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.hasFocus = false;\n    this.tsBlur.emit();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const hasError = !!this.error;\n    const labelId = `${this.inputId}-label`;\n    const helpId = `${this.inputId}-help`;\n    const errorId = `${this.inputId}-error`;\n\n    return (\n      <Host\n        class={{\n          'ts-input': true,\n          [`ts-input--${this.size}`]: true,\n          'ts-input--focused': this.hasFocus,\n          'ts-input--disabled': this.disabled,\n          'ts-input--error': hasError,\n        }}\n      >\n        {this.label && (\n          <label class=\"input__label\" part=\"label\" id={labelId} htmlFor={this.inputId}>\n            {this.label}\n            {this.required && <span class=\"input__required\" aria-hidden=\"true\"> *</span>}\n          </label>\n        )}\n\n        <div\n          class={{\n            'input__wrapper': true,\n            'input__wrapper--focused': this.hasFocus,\n            'input__wrapper--error': hasError,\n            'input__wrapper--disabled': this.disabled,\n          }}\n          part=\"base\"\n        >\n          <span class=\"input__prefix\" part=\"prefix\">\n            <slot name=\"prefix\" />\n          </span>\n\n          <input\n            ref={(el) => (this.inputEl = el)}\n            id={this.inputId}\n            class=\"input__native\"\n            part=\"input\"\n            type={this.type}\n            value={this.value}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            required={this.required}\n            maxlength={this.maxlength}\n            minlength={this.minlength}\n            pattern={this.pattern}\n            autoComplete={this.autocomplete}\n            name={this.name}\n            aria-labelledby={this.label ? labelId : undefined}\n            aria-describedby={hasError ? errorId : this.helpText ? helpId : undefined}\n            aria-invalid={hasError ? 'true' : undefined}\n            aria-required={this.required ? 'true' : undefined}\n            onInput={this.handleInput}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n\n          <span class=\"input__suffix\" part=\"suffix\">\n            <slot name=\"suffix\" />\n          </span>\n        </div>\n\n        {hasError && (\n          <div class=\"input__error\" part=\"error-text\" id={errorId} role=\"alert\">\n            {this.error}\n          </div>\n        )}\n\n        {!hasError && this.helpText && (\n          <div class=\"input__help\" part=\"help-text\" id={helpId}>\n            {this.helpText}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}