@tessera-ui/core 0.4.0

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

@@ -0,0 +1,138 @@
+// Hand-written stories for ts-select
+export default {
+    title: 'Components/Select',
+    tags: ['autodocs'],
+    argTypes: {
+        value: { control: 'text', description: 'The current value.' },
+        placeholder: { control: 'text', description: 'Placeholder text when no value is selected.' },
+        disabled: { control: 'boolean', description: 'Renders the select as disabled.' },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'The select size.',
+        },
+        label: { control: 'text', description: 'Label text displayed above the select.' },
+        helpText: { control: 'text', description: 'Help text displayed below the select.' },
+        error: { control: 'boolean', description: 'Renders the select in an error state.' },
+        errorMessage: { control: 'text', description: 'Error message displayed below the select.' },
+        required: { control: 'boolean', description: 'Makes the select required.' },
+        name: { control: 'text', description: 'Name attribute for form submission.' },
+        multiple: { control: 'boolean', description: 'Allow multiple selections.' },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.value !== undefined && args.value !== null && args.value !== '')
+        attrs.push(`value="${args.value}"`);
+    if (args.placeholder !== undefined && args.placeholder !== null)
+        attrs.push(`placeholder="${args.placeholder}"`);
+    if (args.disabled)
+        attrs.push('disabled');
+    if (args.size !== undefined && args.size !== null)
+        attrs.push(`size="${args.size}"`);
+    if (args.label !== undefined && args.label !== null)
+        attrs.push(`label="${args.label}"`);
+    if (args.helpText !== undefined && args.helpText !== null)
+        attrs.push(`help-text="${args.helpText}"`);
+    if (args.error)
+        attrs.push('error');
+    if (args.errorMessage !== undefined && args.errorMessage !== null)
+        attrs.push(`error-message="${args.errorMessage}"`);
+    if (args.required)
+        attrs.push('required');
+    if (args.name !== undefined && args.name !== null)
+        attrs.push(`name="${args.name}"`);
+    if (args.multiple)
+        attrs.push('multiple');
+    return `
+    <ts-select ${attrs.join(' ')}>
+      <option value="us">United States</option>
+      <option value="uk">United Kingdom</option>
+      <option value="ca">Canada</option>
+      <option value="au">Australia</option>
+      <option value="de">Germany</option>
+    </ts-select>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        value: '',
+        placeholder: 'Select a country',
+        disabled: false,
+        size: 'md',
+        label: 'Country',
+        helpText: 'Select your country of residence.',
+        error: false,
+        errorMessage: '',
+        required: false,
+        name: 'country',
+        multiple: false,
+    },
+});
+export const Sizes = () => `
+  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 320px;">
+    <ts-select size="sm" label="Small" placeholder="Choose...">
+      <option value="admin">Admin</option>
+      <option value="editor">Editor</option>
+      <option value="viewer">Viewer</option>
+    </ts-select>
+    <ts-select size="md" label="Medium" placeholder="Choose...">
+      <option value="admin">Admin</option>
+      <option value="editor">Editor</option>
+      <option value="viewer">Viewer</option>
+    </ts-select>
+    <ts-select size="lg" label="Large" placeholder="Choose...">
+      <option value="admin">Admin</option>
+      <option value="editor">Editor</option>
+      <option value="viewer">Viewer</option>
+    </ts-select>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 320px;">
+    <ts-select label="Default" placeholder="Select an option">
+      <option value="a">Option A</option>
+      <option value="b">Option B</option>
+    </ts-select>
+    <ts-select label="With value" value="editor" placeholder="Select a role">
+      <option value="admin">Admin</option>
+      <option value="editor">Editor</option>
+      <option value="viewer">Viewer</option>
+    </ts-select>
+    <ts-select label="Disabled" disabled placeholder="Cannot select">
+      <option value="a">Option A</option>
+    </ts-select>
+    <ts-select label="Required" required placeholder="Must select" help-text="This field is required.">
+      <option value="a">Option A</option>
+      <option value="b">Option B</option>
+    </ts-select>
+    <ts-select label="Error" error error-message="Please select a valid category." placeholder="Select a category">
+      <option value="tech">Technology</option>
+      <option value="science">Science</option>
+    </ts-select>
+  </div>
+`;
+export const RoleSelector = () => `
+  <div style="max-width: 320px;">
+    <ts-select label="User Role" placeholder="Assign a role" help-text="Determines access permissions." required name="role">
+      <option value="owner">Owner</option>
+      <option value="admin">Administrator</option>
+      <option value="editor">Editor</option>
+      <option value="viewer">Viewer</option>
+      <option value="guest" disabled>Guest (deprecated)</option>
+    </ts-select>
+  </div>
+`;
+export const CategoryFilter = () => `
+  <div style="max-width: 320px;">
+    <ts-select label="Category" placeholder="Filter by category" name="category">
+      <option value="electronics">Electronics</option>
+      <option value="clothing">Clothing</option>
+      <option value="books">Books</option>
+      <option value="home">Home &amp; Garden</option>
+      <option value="sports">Sports &amp; Outdoors</option>
+      <option value="toys">Toys &amp; Games</option>
+    </ts-select>
+  </div>
+`;
+//# sourceMappingURL=select.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.stories.js","sourceRoot":"","sources":["../../../src/components/select/select.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-select\n\nexport default {\n  title: 'Components/Select',\n  tags: ['autodocs'],\n  argTypes: {\n    value: { control: 'text', description: 'The current value.' },\n    placeholder: { control: 'text', description: 'Placeholder text when no value is selected.' },\n    disabled: { control: 'boolean', description: 'Renders the select as disabled.' },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The select size.',\n    },\n    label: { control: 'text', description: 'Label text displayed above the select.' },\n    helpText: { control: 'text', description: 'Help text displayed below the select.' },\n    error: { control: 'boolean', description: 'Renders the select in an error state.' },\n    errorMessage: { control: 'text', description: 'Error message displayed below the select.' },\n    required: { control: 'boolean', description: 'Makes the select required.' },\n    name: { control: 'text', description: 'Name attribute for form submission.' },\n    multiple: { control: 'boolean', description: 'Allow multiple selections.' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.value !== undefined && args.value !== null && args.value !== '') attrs.push(`value=\"${args.value}\"`);\n  if (args.placeholder !== undefined && args.placeholder !== null) attrs.push(`placeholder=\"${args.placeholder}\"`);\n  if (args.disabled) attrs.push('disabled');\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.label !== undefined && args.label !== null) attrs.push(`label=\"${args.label}\"`);\n  if (args.helpText !== undefined && args.helpText !== null) attrs.push(`help-text=\"${args.helpText}\"`);\n  if (args.error) attrs.push('error');\n  if (args.errorMessage !== undefined && args.errorMessage !== null) attrs.push(`error-message=\"${args.errorMessage}\"`);\n  if (args.required) attrs.push('required');\n  if (args.name !== undefined && args.name !== null) attrs.push(`name=\"${args.name}\"`);\n  if (args.multiple) attrs.push('multiple');\n  return `\n    <ts-select ${attrs.join(' ')}>\n      <option value=\"us\">United States</option>\n      <option value=\"uk\">United Kingdom</option>\n      <option value=\"ca\">Canada</option>\n      <option value=\"au\">Australia</option>\n      <option value=\"de\">Germany</option>\n    </ts-select>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    value: '',\n    placeholder: 'Select a country',\n    disabled: false,\n    size: 'md',\n    label: 'Country',\n    helpText: 'Select your country of residence.',\n    error: false,\n    errorMessage: '',\n    required: false,\n    name: 'country',\n    multiple: false,\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 320px;\">\n    <ts-select size=\"sm\" label=\"Small\" placeholder=\"Choose...\">\n      <option value=\"admin\">Admin</option>\n      <option value=\"editor\">Editor</option>\n      <option value=\"viewer\">Viewer</option>\n    </ts-select>\n    <ts-select size=\"md\" label=\"Medium\" placeholder=\"Choose...\">\n      <option value=\"admin\">Admin</option>\n      <option value=\"editor\">Editor</option>\n      <option value=\"viewer\">Viewer</option>\n    </ts-select>\n    <ts-select size=\"lg\" label=\"Large\" placeholder=\"Choose...\">\n      <option value=\"admin\">Admin</option>\n      <option value=\"editor\">Editor</option>\n      <option value=\"viewer\">Viewer</option>\n    </ts-select>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 16px; max-width: 320px;\">\n    <ts-select label=\"Default\" placeholder=\"Select an option\">\n      <option value=\"a\">Option A</option>\n      <option value=\"b\">Option B</option>\n    </ts-select>\n    <ts-select label=\"With value\" value=\"editor\" placeholder=\"Select a role\">\n      <option value=\"admin\">Admin</option>\n      <option value=\"editor\">Editor</option>\n      <option value=\"viewer\">Viewer</option>\n    </ts-select>\n    <ts-select label=\"Disabled\" disabled placeholder=\"Cannot select\">\n      <option value=\"a\">Option A</option>\n    </ts-select>\n    <ts-select label=\"Required\" required placeholder=\"Must select\" help-text=\"This field is required.\">\n      <option value=\"a\">Option A</option>\n      <option value=\"b\">Option B</option>\n    </ts-select>\n    <ts-select label=\"Error\" error error-message=\"Please select a valid category.\" placeholder=\"Select a category\">\n      <option value=\"tech\">Technology</option>\n      <option value=\"science\">Science</option>\n    </ts-select>\n  </div>\n`;\n\nexport const RoleSelector = (): string => `\n  <div style=\"max-width: 320px;\">\n    <ts-select label=\"User Role\" placeholder=\"Assign a role\" help-text=\"Determines access permissions.\" required name=\"role\">\n      <option value=\"owner\">Owner</option>\n      <option value=\"admin\">Administrator</option>\n      <option value=\"editor\">Editor</option>\n      <option value=\"viewer\">Viewer</option>\n      <option value=\"guest\" disabled>Guest (deprecated)</option>\n    </ts-select>\n  </div>\n`;\n\nexport const CategoryFilter = (): string => `\n  <div style=\"max-width: 320px;\">\n    <ts-select label=\"Category\" placeholder=\"Filter by category\" name=\"category\">\n      <option value=\"electronics\">Electronics</option>\n      <option value=\"clothing\">Clothing</option>\n      <option value=\"books\">Books</option>\n      <option value=\"home\">Home &amp; Garden</option>\n      <option value=\"sports\">Sports &amp; Outdoors</option>\n      <option value=\"toys\">Toys &amp; Games</option>\n    </ts-select>\n  </div>\n`;\n"]}

package/dist/collection/components/skeleton/skeleton.css

@@ -0,0 +1,89 @@
+/* ==========================================================================
+   ts-skeleton — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-skeleton-radius     Border radius
+     --ts-skeleton-height     Default line height
+   ========================================================================== */
+
+:host {
+  display: block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-skeleton-radius: var(--ts-radius-sm);
+  --ts-skeleton-height: 1em;
+  --ts-color-skeleton-base: var(--ts-color-neutral-200);
+  --ts-color-skeleton-pulse: var(--ts-color-neutral-300);
+}
+
+.skeleton__base {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ts-spacing-2);
+  width: 100%;
+  height: 100%;
+}
+
+/* ---- Line (text variant) ---- */
+.skeleton__line {
+  block-size: var(--ts-skeleton-height);
+  inline-size: 100%;
+  border-radius: var(--ts-skeleton-radius);
+  background-color: var(--ts-color-skeleton-base);
+}
+
+.skeleton__line--last {
+  inline-size: 75%;
+}
+
+/* ---- Circular variant ---- */
+:host([variant="circular"]) .skeleton__base {
+  border-radius: 50%;
+  background-color: var(--ts-color-skeleton-base);
+  aspect-ratio: 1;
+}
+
+/* ---- Rectangular variant ---- */
+:host([variant="rectangular"]) .skeleton__base {
+  border-radius: var(--ts-skeleton-radius);
+  background-color: var(--ts-color-skeleton-base);
+  min-block-size: var(--ts-skeleton-height);
+}
+
+/* ---- Pulse animation ---- */
+:host([animation="pulse"]) .skeleton__line,
+:host([animation="pulse"][variant="circular"]) .skeleton__base,
+:host([animation="pulse"][variant="rectangular"]) .skeleton__base {
+  animation: ts-skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes ts-skeleton-pulse {
+  0%, 100% { background-color: var(--ts-color-skeleton-base); }
+  50% { background-color: var(--ts-color-skeleton-pulse); }
+}
+
+/* ---- Wave animation ---- */
+:host([animation="wave"]) .skeleton__line,
+:host([animation="wave"][variant="circular"]) .skeleton__base,
+:host([animation="wave"][variant="rectangular"]) .skeleton__base {
+  background: linear-gradient(
+    90deg,
+    var(--ts-color-skeleton-base) 25%,
+    var(--ts-color-skeleton-pulse) 50%,
+    var(--ts-color-skeleton-base) 75%
+  );
+  background-size: 200% 100%;
+  animation: ts-skeleton-wave 1.5s ease-in-out infinite;
+}
+
+@keyframes ts-skeleton-wave {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ---- No animation ---- */
+:host([animation="none"]) .skeleton__line,
+:host([animation="none"][variant="circular"]) .skeleton__base,
+:host([animation="none"][variant="rectangular"]) .skeleton__base {
+  animation: none;
+}

package/dist/collection/components/skeleton/skeleton.js

@@ -0,0 +1,161 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @part base - The skeleton element container.
+ * @part line - Individual skeleton line (text variant).
+ */
+export class TsSkeleton {
+    /** The skeleton shape variant. */
+    variant = 'text';
+    /** CSS width of the skeleton. */
+    width = '100%';
+    /** CSS height of the skeleton. */
+    height;
+    /** Number of lines to render (text variant only). */
+    lines = 1;
+    /** Animation style. */
+    animation = 'pulse';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const style = {};
+        if (this.width)
+            style['width'] = this.width;
+        if (this.height)
+            style['height'] = this.height;
+        if (this.variant === 'text') {
+            const lineElements = [];
+            for (let i = 0; i < this.lines; i++) {
+                const isLast = i === this.lines - 1 && this.lines > 1;
+                lineElements.push(h("div", { class: {
+                        'skeleton__line': true,
+                        'skeleton__line--last': isLast,
+                    }, part: "line" }));
+            }
+            return (h(Host, { class: {
+                    'ts-skeleton': true,
+                    [`ts-skeleton--${this.variant}`]: true,
+                    [`ts-skeleton--${this.animation}`]: true,
+                }, style: style, "aria-hidden": "true" }, h("div", { class: "skeleton__base", part: "base" }, lineElements)));
+        }
+        return (h(Host, { class: {
+                'ts-skeleton': true,
+                [`ts-skeleton--${this.variant}`]: true,
+                [`ts-skeleton--${this.animation}`]: true,
+            }, style: style, "aria-hidden": "true" }, h("div", { class: "skeleton__base", part: "base" })));
+    }
+    static get is() { return "ts-skeleton"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["skeleton.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'circular' | 'rectangular'",
+                    "resolved": "\"circular\" | \"rectangular\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The skeleton shape variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'text'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS width of the skeleton."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'100%'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS height of the skeleton."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height"
+            },
+            "lines": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of lines to render (text variant only)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lines",
+                "defaultValue": "1"
+            },
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'pulse' | 'wave' | 'none'",
+                    "resolved": "\"none\" | \"pulse\" | \"wave\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Animation style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "animation",
+                "defaultValue": "'pulse'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,UAAU;IACrB,kCAAkC;IACT,OAAO,GAAwC,MAAM,CAAC;IAE/E,iCAAiC;IACzB,KAAK,GAAG,MAAM,CAAC;IAEvB,kCAAkC;IAC1B,MAAM,CAAU;IAExB,qDAAqD;IAC7C,KAAK,GAAG,CAAC,CAAC;IAElB,uBAAuB;IACE,SAAS,GAA8B,OAAO,CAAC;IAExE,4EAA4E;IAC5E,MAAM;QACJ,MAAM,KAAK,GAA2B,EAAE,CAAC;QACzC,IAAI,IAAI,CAAC,KAAK;YAAE,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5C,IAAI,IAAI,CAAC,MAAM;YAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;QAE/C,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,EAAE,CAAC;YAC5B,MAAM,YAAY,GAAG,EAAE,CAAC;YACxB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;gBACpC,MAAM,MAAM,GAAG,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;gBACtD,YAAY,CAAC,IAAI,CACf,WACE,KAAK,EAAE;wBACL,gBAAgB,EAAE,IAAI;wBACtB,sBAAsB,EAAE,MAAM;qBAC/B,EACD,IAAI,EAAC,MAAM,GACX,CACH,CAAC;YACJ,CAAC;YAED,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,CAAC,gBAAgB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;oBACtC,CAAC,gBAAgB,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;iBACzC,EACD,KAAK,EAAE,KAAK,iBACA,MAAM;gBAElB,WAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,IACpC,YAAY,CACT,CACD,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,gBAAgB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACtC,CAAC,gBAAgB,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;aACzC,EACD,KAAK,EAAE,KAAK,iBACA,MAAM;YAElB,WAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,GAAG,CACrC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @part base - The skeleton element container.\n * @part line - Individual skeleton line (text variant).\n */\n@Component({\n  tag: 'ts-skeleton',\n  styleUrl: 'skeleton.css',\n  shadow: true,\n})\nexport class TsSkeleton {\n  /** The skeleton shape variant. */\n  @Prop({ reflect: true }) variant: 'text' | 'circular' | 'rectangular' = 'text';\n\n  /** CSS width of the skeleton. */\n  @Prop() width = '100%';\n\n  /** CSS height of the skeleton. */\n  @Prop() height?: string;\n\n  /** Number of lines to render (text variant only). */\n  @Prop() lines = 1;\n\n  /** Animation style. */\n  @Prop({ reflect: true }) animation: 'pulse' | 'wave' | 'none' = 'pulse';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const style: Record<string, string> = {};\n    if (this.width) style['width'] = this.width;\n    if (this.height) style['height'] = this.height;\n\n    if (this.variant === 'text') {\n      const lineElements = [];\n      for (let i = 0; i < this.lines; i++) {\n        const isLast = i === this.lines - 1 && this.lines > 1;\n        lineElements.push(\n          <div\n            class={{\n              'skeleton__line': true,\n              'skeleton__line--last': isLast,\n            }}\n            part=\"line\"\n          />,\n        );\n      }\n\n      return (\n        <Host\n          class={{\n            'ts-skeleton': true,\n            [`ts-skeleton--${this.variant}`]: true,\n            [`ts-skeleton--${this.animation}`]: true,\n          }}\n          style={style}\n          aria-hidden=\"true\"\n        >\n          <div class=\"skeleton__base\" part=\"base\">\n            {lineElements}\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host\n        class={{\n          'ts-skeleton': true,\n          [`ts-skeleton--${this.variant}`]: true,\n          [`ts-skeleton--${this.animation}`]: true,\n        }}\n        style={style}\n        aria-hidden=\"true\"\n      >\n        <div class=\"skeleton__base\" part=\"base\" />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,140 @@
+// Hand-written stories for ts-skeleton
+export default {
+    title: 'Components/Skeleton',
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['text', 'circular', 'rectangular'],
+            description: 'The skeleton shape variant.',
+        },
+        width: {
+            control: 'text',
+            description: 'CSS width of the skeleton.',
+        },
+        height: {
+            control: 'text',
+            description: 'CSS height of the skeleton.',
+        },
+        lines: {
+            control: 'number',
+            description: 'Number of lines to render (text variant only).',
+        },
+        animation: {
+            control: 'select',
+            options: ['pulse', 'wave', 'none'],
+            description: 'Animation style.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.variant !== undefined)
+        attrs.push(`variant="${args.variant}"`);
+    if (args.width !== undefined)
+        attrs.push(`width="${args.width}"`);
+    if (args.height !== undefined)
+        attrs.push(`height="${args.height}"`);
+    if (args.lines !== undefined)
+        attrs.push(`lines="${args.lines}"`);
+    if (args.animation !== undefined)
+        attrs.push(`animation="${args.animation}"`);
+    return `<ts-skeleton ${attrs.join(' ')}></ts-skeleton>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        variant: 'text',
+        width: '100%',
+        lines: 3,
+        animation: 'pulse',
+    },
+});
+export const Variants = () => `
+  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Text (3 lines)</p>
+      <ts-skeleton variant="text" lines="3"></ts-skeleton>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Circular (avatar)</p>
+      <ts-skeleton variant="circular" width="48px" height="48px"></ts-skeleton>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Rectangular (image)</p>
+      <ts-skeleton variant="rectangular" width="100%" height="200px"></ts-skeleton>
+    </div>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 400px;">
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Pulse animation (default)</p>
+      <ts-skeleton variant="text" lines="2" animation="pulse"></ts-skeleton>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">Wave animation</p>
+      <ts-skeleton variant="text" lines="2" animation="wave"></ts-skeleton>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;">No animation</p>
+      <ts-skeleton variant="text" lines="2" animation="none"></ts-skeleton>
+    </div>
+  </div>
+`;
+export const LoadingCard = () => `
+  <div style="max-width: 320px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px;">
+    <ts-skeleton variant="rectangular" width="100%" height="180px"></ts-skeleton>
+    <ts-skeleton variant="text" width="60%" lines="1"></ts-skeleton>
+    <ts-skeleton variant="text" lines="3"></ts-skeleton>
+    <div style="display: flex; gap: 8px;">
+      <ts-skeleton variant="rectangular" width="80px" height="32px"></ts-skeleton>
+      <ts-skeleton variant="rectangular" width="80px" height="32px"></ts-skeleton>
+    </div>
+  </div>
+`;
+export const LoadingList = () => `
+  <div style="max-width: 400px; display: flex; flex-direction: column; gap: 16px;">
+    <div style="display: flex; gap: 12px; align-items: center;">
+      <ts-skeleton variant="circular" width="40px" height="40px"></ts-skeleton>
+      <div style="flex: 1;">
+        <ts-skeleton variant="text" width="70%" lines="1"></ts-skeleton>
+        <ts-skeleton variant="text" width="40%" lines="1"></ts-skeleton>
+      </div>
+    </div>
+    <div style="display: flex; gap: 12px; align-items: center;">
+      <ts-skeleton variant="circular" width="40px" height="40px"></ts-skeleton>
+      <div style="flex: 1;">
+        <ts-skeleton variant="text" width="70%" lines="1"></ts-skeleton>
+        <ts-skeleton variant="text" width="40%" lines="1"></ts-skeleton>
+      </div>
+    </div>
+    <div style="display: flex; gap: 12px; align-items: center;">
+      <ts-skeleton variant="circular" width="40px" height="40px"></ts-skeleton>
+      <div style="flex: 1;">
+        <ts-skeleton variant="text" width="70%" lines="1"></ts-skeleton>
+        <ts-skeleton variant="text" width="40%" lines="1"></ts-skeleton>
+      </div>
+    </div>
+    <div style="display: flex; gap: 12px; align-items: center;">
+      <ts-skeleton variant="circular" width="40px" height="40px"></ts-skeleton>
+      <div style="flex: 1;">
+        <ts-skeleton variant="text" width="70%" lines="1"></ts-skeleton>
+        <ts-skeleton variant="text" width="40%" lines="1"></ts-skeleton>
+      </div>
+    </div>
+  </div>
+`;
+export const Composition = () => `
+  <div style="max-width: 400px; display: flex; flex-direction: column; gap: 16px;">
+    <div style="display: flex; gap: 12px; align-items: center;">
+      <ts-skeleton variant="circular" width="56px" height="56px"></ts-skeleton>
+      <div style="flex: 1;">
+        <ts-skeleton variant="text" width="50%" lines="1"></ts-skeleton>
+        <ts-skeleton variant="text" width="30%" lines="1"></ts-skeleton>
+      </div>
+    </div>
+    <ts-skeleton variant="rectangular" width="100%" height="240px"></ts-skeleton>
+    <ts-skeleton variant="text" lines="4"></ts-skeleton>
+  </div>
+`;
+//# sourceMappingURL=skeleton.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.stories.js","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.stories.ts"],"names":[],"mappings":"AAAA,uCAAuC;AAEvC,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,aAAa,CAAC;YAC5C,WAAW,EAAE,6BAA6B;SAC3C;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4BAA4B;SAC1C;QACD,MAAM,EAAE;YACN,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,6BAA6B;SAC3C;QACD,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,gDAAgD;SAC9D;QACD,SAAS,EAAE;YACT,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC;YAClC,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,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAClE,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;IACrE,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAClE,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IAC9E,OAAO,gBAAgB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC;AAC1D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,CAAC;QACR,SAAS,EAAE,OAAO;KACnB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAerC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAenC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;CAUxC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BxC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;CAYxC,CAAC","sourcesContent":["// Hand-written stories for ts-skeleton\n\nexport default {\n  title: 'Components/Skeleton',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['text', 'circular', 'rectangular'],\n      description: 'The skeleton shape variant.',\n    },\n    width: {\n      control: 'text',\n      description: 'CSS width of the skeleton.',\n    },\n    height: {\n      control: 'text',\n      description: 'CSS height of the skeleton.',\n    },\n    lines: {\n      control: 'number',\n      description: 'Number of lines to render (text variant only).',\n    },\n    animation: {\n      control: 'select',\n      options: ['pulse', 'wave', 'none'],\n      description: 'Animation style.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.variant !== undefined) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.width !== undefined) attrs.push(`width=\"${args.width}\"`);\n  if (args.height !== undefined) attrs.push(`height=\"${args.height}\"`);\n  if (args.lines !== undefined) attrs.push(`lines=\"${args.lines}\"`);\n  if (args.animation !== undefined) attrs.push(`animation=\"${args.animation}\"`);\n  return `<ts-skeleton ${attrs.join(' ')}></ts-skeleton>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    variant: 'text',\n    width: '100%',\n    lines: 3,\n    animation: 'pulse',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; max-width: 400px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Text (3 lines)</p>\n      <ts-skeleton variant=\"text\" lines=\"3\"></ts-skeleton>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Circular (avatar)</p>\n      <ts-skeleton variant=\"circular\" width=\"48px\" height=\"48px\"></ts-skeleton>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Rectangular (image)</p>\n      <ts-skeleton variant=\"rectangular\" width=\"100%\" height=\"200px\"></ts-skeleton>\n    </div>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 24px; max-width: 400px;\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Pulse animation (default)</p>\n      <ts-skeleton variant=\"text\" lines=\"2\" animation=\"pulse\"></ts-skeleton>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">Wave animation</p>\n      <ts-skeleton variant=\"text\" lines=\"2\" animation=\"wave\"></ts-skeleton>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-family: sans-serif; font-size: 14px; color: #666;\">No animation</p>\n      <ts-skeleton variant=\"text\" lines=\"2\" animation=\"none\"></ts-skeleton>\n    </div>\n  </div>\n`;\n\nexport const LoadingCard = (): string => `\n  <div style=\"max-width: 320px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px;\">\n    <ts-skeleton variant=\"rectangular\" width=\"100%\" height=\"180px\"></ts-skeleton>\n    <ts-skeleton variant=\"text\" width=\"60%\" lines=\"1\"></ts-skeleton>\n    <ts-skeleton variant=\"text\" lines=\"3\"></ts-skeleton>\n    <div style=\"display: flex; gap: 8px;\">\n      <ts-skeleton variant=\"rectangular\" width=\"80px\" height=\"32px\"></ts-skeleton>\n      <ts-skeleton variant=\"rectangular\" width=\"80px\" height=\"32px\"></ts-skeleton>\n    </div>\n  </div>\n`;\n\nexport const LoadingList = (): string => `\n  <div style=\"max-width: 400px; display: flex; flex-direction: column; gap: 16px;\">\n    <div style=\"display: flex; gap: 12px; align-items: center;\">\n      <ts-skeleton variant=\"circular\" width=\"40px\" height=\"40px\"></ts-skeleton>\n      <div style=\"flex: 1;\">\n        <ts-skeleton variant=\"text\" width=\"70%\" lines=\"1\"></ts-skeleton>\n        <ts-skeleton variant=\"text\" width=\"40%\" lines=\"1\"></ts-skeleton>\n      </div>\n    </div>\n    <div style=\"display: flex; gap: 12px; align-items: center;\">\n      <ts-skeleton variant=\"circular\" width=\"40px\" height=\"40px\"></ts-skeleton>\n      <div style=\"flex: 1;\">\n        <ts-skeleton variant=\"text\" width=\"70%\" lines=\"1\"></ts-skeleton>\n        <ts-skeleton variant=\"text\" width=\"40%\" lines=\"1\"></ts-skeleton>\n      </div>\n    </div>\n    <div style=\"display: flex; gap: 12px; align-items: center;\">\n      <ts-skeleton variant=\"circular\" width=\"40px\" height=\"40px\"></ts-skeleton>\n      <div style=\"flex: 1;\">\n        <ts-skeleton variant=\"text\" width=\"70%\" lines=\"1\"></ts-skeleton>\n        <ts-skeleton variant=\"text\" width=\"40%\" lines=\"1\"></ts-skeleton>\n      </div>\n    </div>\n    <div style=\"display: flex; gap: 12px; align-items: center;\">\n      <ts-skeleton variant=\"circular\" width=\"40px\" height=\"40px\"></ts-skeleton>\n      <div style=\"flex: 1;\">\n        <ts-skeleton variant=\"text\" width=\"70%\" lines=\"1\"></ts-skeleton>\n        <ts-skeleton variant=\"text\" width=\"40%\" lines=\"1\"></ts-skeleton>\n      </div>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"max-width: 400px; display: flex; flex-direction: column; gap: 16px;\">\n    <div style=\"display: flex; gap: 12px; align-items: center;\">\n      <ts-skeleton variant=\"circular\" width=\"56px\" height=\"56px\"></ts-skeleton>\n      <div style=\"flex: 1;\">\n        <ts-skeleton variant=\"text\" width=\"50%\" lines=\"1\"></ts-skeleton>\n        <ts-skeleton variant=\"text\" width=\"30%\" lines=\"1\"></ts-skeleton>\n      </div>\n    </div>\n    <ts-skeleton variant=\"rectangular\" width=\"100%\" height=\"240px\"></ts-skeleton>\n    <ts-skeleton variant=\"text\" lines=\"4\"></ts-skeleton>\n  </div>\n`;\n"]}