@tessera-ui/core 0.4.0

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

@@ -0,0 +1,107 @@
+// 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

@@ -0,0 +1 @@
+{"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.css

@@ -0,0 +1,11 @@
+/* ==========================================================================
+   ts-grid — Shadow DOM Scoped Styles
+
+   CSS Grid layout component with responsive auto-fill columns.
+   ========================================================================== */
+
+:host {
+  display: grid;
+  width: 100%;
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,125 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for grid items.
+ *
+ * @part base - The grid container.
+ */
+export class TsGrid {
+    /** Number of columns or 'auto' for responsive auto-fill. */
+    columns = 'auto';
+    /** Spacing token number for gap between items. */
+    gap = '4';
+    /** Minimum column width when columns is 'auto'. */
+    minColumnWidth = '280px';
+    /** Vertical alignment of grid items. */
+    align = 'stretch';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const gridTemplateColumns = this.columns === 'auto'
+            ? `repeat(auto-fill, minmax(${this.minColumnWidth}, 1fr))`
+            : `repeat(${this.columns}, 1fr)`;
+        const style = {
+            gridTemplateColumns,
+            gap: `var(--ts-spacing-${this.gap})`,
+            alignItems: this.align,
+        };
+        return (h(Host, { key: 'f2d1238a19d2235c676d1fd08f045b18dc3b40fa', style: style }, h("slot", { key: '3c454fc9910bcf8960b4a2833f82e91eb6d5be03' })));
+    }
+    static get is() { return "ts-grid"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["grid.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["grid.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of columns or 'auto' for responsive auto-fill."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "columns",
+                "defaultValue": "'auto'"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing token number for gap between items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "gap",
+                "defaultValue": "'4'"
+            },
+            "minColumnWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum column width when columns is 'auto'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "min-column-width",
+                "defaultValue": "'280px'"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'stretch'",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical alignment of grid items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "align",
+                "defaultValue": "'stretch'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=grid.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,134 @@
+// 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,39 @@
+/**
+ * Icon Registry
+ *
+ * A global registry for SVG icon strings. Components look up icons by name
+ * from this registry. Works with any icon library — register SVG strings
+ * directly or use the Lucide helper (`registerLucideIcons`).
+ */
+const registry = new Map();
+/**
+ * Register multiple icons at once.
+ * @param icons - A map of icon name to SVG string.
+ */
+export function registerIcons(icons) {
+    for (const [name, svg] of Object.entries(icons)) {
+        registry.set(name, svg);
+    }
+}
+/**
+ * Register a single icon.
+ * @param name - The icon name used in `<ts-icon name="...">`.
+ * @param svg  - The full SVG markup string.
+ */
+export function registerIcon(name, svg) {
+    registry.set(name, svg);
+}
+/**
+ * Retrieve an icon's SVG string by name.
+ * @returns The SVG string, or `undefined` if the icon is not registered.
+ */
+export function getIcon(name) {
+    return registry.get(name);
+}
+/**
+ * List all registered icon names.
+ */
+export function getRegisteredIconNames() {
+    return Array.from(registry.keys());
+}
+//# sourceMappingURL=icon-registry.js.map

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

@@ -0,0 +1 @@
+{"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.css

@@ -0,0 +1,54 @@
+/* ==========================================================================
+   ts-icon — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-icon-size    Width & height of the icon
+     --ts-icon-color   Fill / stroke color
+   ========================================================================== */
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+
+  --ts-icon-size: 1em;
+  --ts-icon-color: currentColor;
+
+  width: var(--ts-icon-size);
+  height: var(--ts-icon-size);
+  color: var(--ts-icon-color);
+  line-height: 0;
+}
+
+/* ---- Sizes ---- */
+:host([size="xs"]) { --ts-icon-size: 12px; }
+:host([size="sm"]) { --ts-icon-size: 14px; }
+:host([size="md"]) { --ts-icon-size: 16px; }
+:host([size="lg"]) { --ts-icon-size: 18px; }
+:host([size="xl"]) { --ts-icon-size: 20px; }
+
+/* ---- Slotted SVG ---- */
+::slotted(svg) {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+/* ---- Registry SVG ---- */
+span {
+  display: contents;
+}
+
+span > svg {
+  width: 100%;
+  height: 100%;
+  fill: none;
+  stroke: currentColor;
+}
+
+/* ---- External image ---- */
+img {
+  width: 100%;
+  height: 100%;
+}