@tessera-ui/core 0.4.0

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

@@ -0,0 +1,239 @@
+import { h, Host } from "@stencil/core";
+import { getIcon } from "./icon-registry";
+/** Cached reference to the Lucide icons map — loaded lazily on first use. */
+let lucideCache = null;
+/**
+ * Converts a PascalCase or kebab-case icon name to the PascalCase key used by Lucide.
+ * e.g. "search" → "Search", "arrow-left" → "ArrowLeft"
+ */
+function toLucideKey(name) {
+    return name
+        .split('-')
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+}
+/**
+ * Renders a Lucide icon node array to an SVG string.
+ */
+function renderLucideSvg(nodes) {
+    const children = nodes
+        .map(([tag, attrs]) => {
+        const attrStr = Object.entries(attrs)
+            .map(([k, v]) => `${k}="${v}"`)
+            .join(' ');
+        return `<${tag} ${attrStr}/>`;
+    })
+        .join('');
+    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>`;
+}
+/**
+ * @slot - Default slot for inline SVG content.
+ *
+ * @part img - The img element (when using src prop).
+ * @part svg - The container for resolved SVG content (when using name prop).
+ */
+export class TsIcon {
+    el;
+    /** Icon name — resolves from custom registry first, then built-in Lucide icons. Accepts kebab-case or PascalCase. */
+    name;
+    /** URL to an external SVG icon file. */
+    src;
+    /** The icon's size. */
+    size = 'md';
+    /** Accessible label. When set, applies role="img" and aria-label. When absent, sets aria-hidden="true". */
+    label;
+    /** CSS color value applied to the icon. */
+    color = 'currentColor';
+    svgContent;
+    nameChanged() {
+        this.loadIcon();
+    }
+    componentWillLoad() {
+        return this.loadIcon();
+    }
+    /**
+     * Checks whether built-in Lucide icons are disabled via data-icons="none"
+     * on any ancestor element.
+     */
+    isBuiltInDisabled() {
+        return this.el.closest('[data-icons="none"]') !== null;
+    }
+    async loadIcon() {
+        if (this.name && !this.src) {
+            // 1. Check custom registry first (allows overrides)
+            const registered = getIcon(this.name);
+            if (registered) {
+                this.svgContent = registered;
+                return;
+            }
+            // 2. If built-in icons are disabled via data-icons="none", stop here
+            if (this.isBuiltInDisabled()) {
+                this.svgContent = undefined;
+                return;
+            }
+            // 3. Lazy-load Lucide icons (only fetched on first name lookup)
+            if (!lucideCache) {
+                try {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const mod = await import('lucide');
+                    lucideCache = mod.icons;
+                }
+                catch {
+                    this.svgContent = undefined;
+                    return;
+                }
+            }
+            const key = toLucideKey(this.name);
+            const lucideIcon = lucideCache[key];
+            if (lucideIcon) {
+                this.svgContent = renderLucideSvg(lucideIcon);
+                return;
+            }
+            this.svgContent = undefined;
+        }
+        else {
+            this.svgContent = undefined;
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const hasLabel = !!this.label;
+        return (h(Host, { key: 'f1a6c10915bf60ee50be384b8b879a73a1bf73e7', class: {
+                'ts-icon': true,
+                [`ts-icon--${this.size}`]: true,
+            }, role: hasLabel ? 'img' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true', style: { '--ts-icon-color': this.color } }, this.src ? (h("img", { src: this.src, alt: "", part: "img" })) : this.svgContent ? (h("span", { part: "svg", innerHTML: this.svgContent })) : (h("slot", null))));
+    }
+    static get is() { return "ts-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name \u2014 resolves from custom registry first, then built-in Lucide icons. Accepts kebab-case or PascalCase."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to an external SVG icon file."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "TsSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsSize",
+                            "referenceLocation": "TsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon's size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label. When set, applies role=\"img\" and aria-label. When absent, sets aria-hidden=\"true\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS color value applied to the icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "color",
+                "defaultValue": "'currentColor'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "svgContent": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "nameChanged"
+            }];
+    }
+}
+//# sourceMappingURL=icon.js.map

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

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

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

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

@@ -0,0 +1,155 @@
+/* ==========================================================================
+   ts-input — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-input-bg               Input background
+     --ts-input-color            Input text color
+     --ts-input-border-color     Default border color
+     --ts-input-radius           Border radius
+     --ts-input-focus-ring       Focus ring box-shadow
+   ========================================================================== */
+
+:host {
+  display: block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-input-bg: var(--ts-color-neutral-50);
+  --ts-input-color: var(--ts-color-text-primary);
+  --ts-input-border-color: var(--ts-color-border-default);
+  --ts-input-radius: var(--ts-radius-md);
+  --ts-input-focus-ring: var(--ts-focus-ring);
+}
+
+/* ---- Label ---- */
+.input__label {
+  display: block;
+  margin-bottom: var(--ts-spacing-1);
+  font-size: var(--ts-font-size-sm);
+  font-weight: var(--ts-font-weight-medium);
+  color: var(--ts-color-text-secondary);
+  line-height: var(--ts-line-height-normal);
+}
+
+.input__required {
+  color: var(--ts-color-danger-500);
+}
+
+/* ---- Wrapper ---- */
+.input__wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--ts-spacing-2);
+  border: 1px solid var(--ts-input-border-color);
+  border-radius: var(--ts-input-radius);
+  background-color: var(--ts-input-bg);
+  box-shadow: none;
+  transition:
+    border-color var(--ts-transition-fast),
+    box-shadow var(--ts-transition-fast),
+    background-color var(--ts-transition-fast);
+  overflow: hidden;
+}
+
+.input__wrapper--focused {
+  border-color: var(--ts-color-primary-500);
+  box-shadow: var(--ts-input-focus-ring);
+}
+
+.input__wrapper--error {
+  border-color: var(--ts-color-danger-500);
+}
+
+.input__wrapper--error.input__wrapper--focused {
+  box-shadow: 0 0 0 3px var(--ts-color-focus-ring-danger);
+}
+
+.input__wrapper--disabled {
+  background-color: var(--ts-color-bg-disabled);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* ---- Native Input ---- */
+.input__native {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  color: var(--ts-input-color);
+  width: 100%;
+  min-width: 0;
+}
+
+.input__native::placeholder {
+  color: var(--ts-color-text-tertiary);
+}
+
+.input__native:disabled {
+  cursor: not-allowed;
+}
+
+/* ---- Sizes ---- */
+:host([size="sm"]) .input__wrapper {
+  border-radius: var(--ts-radius-sm);
+}
+:host([size="sm"]) .input__native {
+  padding: var(--ts-spacing-1) var(--ts-spacing-2);
+  font-size: var(--ts-font-size-sm);
+}
+
+:host([size="md"]) .input__native {
+  padding: var(--ts-spacing-2) var(--ts-spacing-3);
+  font-size: var(--ts-font-size-md);
+}
+
+:host([size="lg"]) .input__native {
+  padding: var(--ts-spacing-3) var(--ts-spacing-4);
+  font-size: var(--ts-font-size-lg);
+}
+
+:host([size="xl"]) .input__wrapper {
+  border-radius: var(--ts-radius-lg);
+}
+:host([size="xl"]) .input__native {
+  padding: var(--ts-spacing-4) var(--ts-spacing-5);
+  font-size: var(--ts-font-size-xl);
+}
+
+/* ---- Prefix / Suffix ---- */
+.input__prefix,
+.input__suffix {
+  display: inline-flex;
+  align-items: center;
+  color: var(--ts-color-text-tertiary);
+}
+
+.input__prefix {
+  padding-inline-start: var(--ts-spacing-3);
+}
+
+.input__suffix {
+  padding-inline-end: var(--ts-spacing-3);
+}
+
+.input__prefix:empty,
+.input__suffix:empty {
+  display: none;
+}
+
+/* ---- Help & Error Text ---- */
+.input__help,
+.input__error {
+  margin-top: var(--ts-spacing-1);
+  font-size: var(--ts-font-size-xs);
+  line-height: var(--ts-line-height-normal);
+}
+
+.input__help {
+  color: var(--ts-color-text-tertiary);
+}
+
+.input__error {
+  color: var(--ts-color-danger-600);
+  font-weight: var(--ts-font-weight-medium);
+}