@tessera-ui/core 0.4.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../src/components/alert/alert.stories.ts"],"names":[],"mappings":"AAAA,oCAAoC;AAEpC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC;YACpF,WAAW,EAAE,gCAAgC;SAC9C;QACD,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,qCAAqC,EAAE;QACpF,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,uBAAuB,EAAE;KACvE;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACjG,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,2BAA2B,aAAa,CAAC;AACtG,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,QAAQ,EAAE,KAAK;QACf,WAAW,EAAE,uDAAuD;KACrE;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;CAUrC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAW,EAAE,CAAC;;;;;;;CAOnC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;CAmBtC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BxC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxC,CAAC","sourcesContent":["// Hand-written stories for ts-alert\n\nexport default {\n  title: 'Components/Alert',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],\n      description: 'The alert\\'s semantic variant.',\n    },\n    closable: { control: 'boolean', description: 'Whether the alert can be dismissed.' },\n    slotContent: { control: 'text', description: 'Alert message content' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.variant !== undefined && args.variant !== null) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.closable) attrs.push('closable');\n  return `<ts-alert ${attrs.join(' ')}>${args.slotContent || 'This is an alert message.'}</ts-alert>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    variant: 'info',\n    closable: false,\n    slotContent: 'Your account settings have been updated successfully.',\n  },\n});\n\nexport const Variants = (): string => `\n  <ts-stack gap=\"2\" style=\"max-width: 600px;\">\n    <ts-alert variant=\"info\">A new software update is available. See what's new in version 3.2.</ts-alert>\n    <ts-alert variant=\"success\">Your payment of $49.99 has been processed successfully.</ts-alert>\n    <ts-alert variant=\"warning\">Your free trial expires in 3 days. Upgrade now to keep your data.</ts-alert>\n    <ts-alert variant=\"danger\">Unable to connect to the database. Please check your credentials.</ts-alert>\n    <ts-alert variant=\"primary\">Welcome back! You have 5 unread notifications.</ts-alert>\n    <ts-alert variant=\"secondary\">This feature is in beta. Your feedback helps us improve.</ts-alert>\n    <ts-alert variant=\"neutral\">Scheduled maintenance will occur on Sunday from 2-4 AM UTC.</ts-alert>\n  </ts-stack>\n`;\n\nexport const States = (): string => `\n  <ts-stack gap=\"2\" style=\"max-width: 600px;\">\n    <ts-alert variant=\"info\">Standard non-dismissible alert.</ts-alert>\n    <ts-alert variant=\"success\" closable>Dismissible alert — click the close button to hide.</ts-alert>\n    <ts-alert variant=\"warning\" closable>Your session will expire in 10 minutes. Save your work.</ts-alert>\n    <ts-alert variant=\"danger\" closable>Failed to save changes. Please try again.</ts-alert>\n  </ts-stack>\n`;\n\nexport const WithIcons = (): string => `\n  <ts-stack gap=\"2\" style=\"max-width: 600px;\">\n    <ts-alert variant=\"info\">\n      <ts-icon slot=\"icon\" name=\"info\" size=\"sm\"></ts-icon>\n      Two-factor authentication is now available for your account.\n    </ts-alert>\n    <ts-alert variant=\"success\">\n      <ts-icon slot=\"icon\" name=\"check-circle\" size=\"sm\"></ts-icon>\n      Deployment to production completed in 2m 34s.\n    </ts-alert>\n    <ts-alert variant=\"warning\">\n      <ts-icon slot=\"icon\" name=\"alert-triangle\" size=\"sm\"></ts-icon>\n      API rate limit approaching. 450 of 500 requests used this hour.\n    </ts-alert>\n    <ts-alert variant=\"danger\">\n      <ts-icon slot=\"icon\" name=\"x-circle\" size=\"sm\"></ts-icon>\n      Build failed: 3 test suites did not pass. Check the logs for details.\n    </ts-alert>\n  </ts-stack>\n`;\n\nexport const WithActions = (): string => `\n  <ts-stack gap=\"2\" style=\"max-width: 600px;\">\n    <ts-alert variant=\"info\" closable>\n      A new version (v3.2.0) is available.\n      <span slot=\"action\">\n        <ts-button size=\"sm\" appearance=\"outline\" variant=\"primary\">Update Now</ts-button>\n      </span>\n    </ts-alert>\n    <ts-alert variant=\"warning\">\n      Your subscription will renew in 5 days at $29/month.\n      <span slot=\"action\">\n        <ts-button size=\"sm\" appearance=\"ghost\" variant=\"neutral\">Manage Plan</ts-button>\n      </span>\n    </ts-alert>\n    <ts-alert variant=\"danger\" closable>\n      <ts-icon slot=\"icon\" name=\"shield-alert\" size=\"sm\"></ts-icon>\n      Unusual login attempt detected from a new device.\n      <span slot=\"action\">\n        <ts-button size=\"sm\" variant=\"danger\">Review Activity</ts-button>\n      </span>\n    </ts-alert>\n    <ts-alert variant=\"success\" closable>\n      <ts-icon slot=\"icon\" name=\"check-circle\" size=\"sm\"></ts-icon>\n      Your file has been uploaded successfully.\n      <span slot=\"action\">\n        <ts-button size=\"sm\" appearance=\"link\" variant=\"primary\">View File</ts-button>\n      </span>\n    </ts-alert>\n  </ts-stack>\n`;\n\nexport const Composition = (): string => `\n  <ts-stack gap=\"4\" style=\"max-width: 500px;\">\n    <ts-card bordered padding=\"lg\">\n      <span slot=\"header\"><h3 style=\"margin: 0;\">Account Settings</h3></span>\n      <ts-stack gap=\"3\">\n        <ts-alert variant=\"warning\">\n          <ts-icon slot=\"icon\" name=\"alert-triangle\" size=\"sm\"></ts-icon>\n          Your email address has not been verified.\n          <span slot=\"action\">\n            <ts-button size=\"sm\" appearance=\"outline\" variant=\"warning\">Resend Verification</ts-button>\n          </span>\n        </ts-alert>\n        <ts-input label=\"Email\" value=\"unverified@example.com\" type=\"email\">\n          <ts-icon slot=\"prefix\" name=\"mail\" size=\"sm\"></ts-icon>\n        </ts-input>\n        <ts-input label=\"Phone\" type=\"tel\" placeholder=\"+1 (555) 000-0000\">\n          <ts-icon slot=\"prefix\" name=\"phone\" size=\"sm\"></ts-icon>\n        </ts-input>\n        <ts-toggle checked>Enable two-factor authentication</ts-toggle>\n      </ts-stack>\n      <span slot=\"footer\">\n        <ts-row gap=\"2\" justify=\"end\" style=\"padding-top: 8px;\">\n          <ts-button appearance=\"outline\" variant=\"neutral\">Discard</ts-button>\n          <ts-button variant=\"primary\">Save Settings</ts-button>\n        </ts-row>\n      </span>\n    </ts-card>\n  </ts-stack>\n`;\n"]}

package/dist/collection/components/avatar/avatar.css

@@ -0,0 +1,63 @@
+/* ==========================================================================
+   ts-avatar — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-avatar-size       Avatar dimensions
+     --ts-avatar-bg         Background color for initials/slot
+     --ts-avatar-color      Text color for initials
+     --ts-avatar-radius     Border radius
+   ========================================================================== */
+
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+
+  --ts-avatar-size: 2.5rem;
+  --ts-avatar-bg: var(--ts-color-neutral-200);
+  --ts-avatar-color: var(--ts-color-text-primary);
+  --ts-avatar-radius: var(--ts-shape-full);
+}
+
+/* ---- Sizes ---- */
+:host([size="xs"]) { --ts-avatar-size: 1.5rem;  font-size: var(--ts-font-size-xs); }
+:host([size="sm"]) { --ts-avatar-size: 2rem;    font-size: var(--ts-font-size-sm); }
+:host([size="md"]) { --ts-avatar-size: 2.5rem;  font-size: var(--ts-font-size-md); }
+:host([size="lg"]) { --ts-avatar-size: 3rem;    font-size: var(--ts-font-size-lg); }
+:host([size="xl"]) { --ts-avatar-size: 4rem;    font-size: var(--ts-font-size-xl); }
+
+/* ---- Variant: square ---- */
+:host([variant="square"]) {
+  --ts-avatar-radius: var(--ts-radius-full);
+}
+
+/* ---- Base container ---- */
+.avatar__base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ts-avatar-size);
+  height: var(--ts-avatar-size);
+  border-radius: var(--ts-avatar-radius);
+  background-color: var(--ts-avatar-bg);
+  color: var(--ts-avatar-color);
+  overflow: hidden;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+/* ---- Image ---- */
+.avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+/* ---- Initials ---- */
+.avatar__initials {
+  font-family: var(--ts-font-family-base);
+  font-weight: var(--ts-font-weight-semi);
+  font-size: inherit;
+  line-height: 1;
+  text-transform: uppercase;
+}

package/dist/collection/components/avatar/avatar.js

@@ -0,0 +1,185 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for custom content (e.g., icon).
+ *
+ * @part base - The avatar container.
+ * @part image - The avatar image element.
+ * @part initials - The initials text element.
+ */
+export class TsAvatar {
+    /** Image URL for the avatar. */
+    src;
+    /** Alt text for the avatar image. */
+    alt;
+    /** Name used to generate initials fallback. */
+    name;
+    /** The size of the avatar. */
+    size = 'md';
+    /** Shape variant of the avatar. */
+    variant = 'circle';
+    /** Background color for the initials fallback. */
+    color;
+    /** Whether the image failed to load. */
+    hasError = false;
+    handleError = () => {
+        this.hasError = true;
+    };
+    getInitials() {
+        if (!this.name)
+            return '';
+        const words = this.name.trim().split(/\s+/);
+        if (words.length === 1) {
+            return words[0].charAt(0).toUpperCase();
+        }
+        return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const showImage = this.src && !this.hasError;
+        const initials = this.getInitials();
+        const showInitials = !showImage && initials;
+        return (h(Host, { key: '11d72d9cc86c6f14c01ac01a6f37736b8e1872bd', class: {
+                'ts-avatar': true,
+                [`ts-avatar--${this.size}`]: true,
+                [`ts-avatar--${this.variant}`]: true,
+            } }, h("div", { key: '74c5395cc637d642bc0e53fa3a19315e9a6be2cb', class: "avatar__base", part: "base", role: "img", "aria-label": this.alt || this.name || 'Avatar', style: this.color && !showImage ? { backgroundColor: this.color } : undefined }, showImage && (h("img", { key: '7544f0a8907645da2334e8d5f55eab475488299d', class: "avatar__image", part: "image", src: this.src, alt: this.alt || this.name || '', onError: this.handleError })), showInitials && (h("span", { key: '4425c8f4dc882b10e7c54b3c53d3cbc37a410c2f', class: "avatar__initials", part: "initials", "aria-hidden": "true" }, initials)), !showImage && !showInitials && h("slot", { key: 'a1ea8a822e01d541c135b4fc4aba9f25c117beb8' }))));
+    }
+    static get is() { return "ts-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["avatar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URL for the avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for the avatar image."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name used to generate initials fallback."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'circle' | 'square'",
+                    "resolved": "\"circle\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shape variant of the avatar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'circle'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color for the initials fallback."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasError": {}
+        };
+    }
+}
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhE;;;;;;GAMG;AAMH,MAAM,OAAO,QAAQ;IACnB,gCAAgC;IACxB,GAAG,CAAU;IAErB,qCAAqC;IAC7B,GAAG,CAAU;IAErB,+CAA+C;IACvC,IAAI,CAAU;IAEtB,8BAA8B;IACL,IAAI,GAAqC,IAAI,CAAC;IAEvE,mCAAmC;IACV,OAAO,GAAwB,QAAQ,CAAC;IAEjE,kDAAkD;IAC1C,KAAK,CAAU;IAEvB,wCAAwC;IAC/B,QAAQ,GAAG,KAAK,CAAC;IAElB,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC;IAEM,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAC;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC5C,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACvB,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC1C,CAAC;QACD,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAChF,CAAC;IAED,4EAA4E;IAC5E,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC7C,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QACpC,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,QAAQ,CAAC;QAE5C,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBACjC,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;aACrC;YAED,4DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,KAAK,gBACE,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS;gBAE5E,SAAS,IAAI,CACZ,4DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH;gBACA,YAAY,IAAI,CACf,6DAAM,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,UAAU,iBAAa,MAAM,IAC9D,QAAQ,CACJ,CACR;gBACA,CAAC,SAAS,IAAI,CAAC,YAAY,IAAI,8DAAQ,CACpC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for custom content (e.g., icon).\n *\n * @part base - The avatar container.\n * @part image - The avatar image element.\n * @part initials - The initials text element.\n */\n@Component({\n  tag: 'ts-avatar',\n  styleUrl: 'avatar.css',\n  shadow: true,\n})\nexport class TsAvatar {\n  /** Image URL for the avatar. */\n  @Prop() src?: string;\n\n  /** Alt text for the avatar image. */\n  @Prop() alt?: string;\n\n  /** Name used to generate initials fallback. */\n  @Prop() name?: string;\n\n  /** The size of the avatar. */\n  @Prop({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n  /** Shape variant of the avatar. */\n  @Prop({ reflect: true }) variant: 'circle' | 'square' = 'circle';\n\n  /** Background color for the initials fallback. */\n  @Prop() color?: string;\n\n  /** Whether the image failed to load. */\n  @State() hasError = false;\n\n  private handleError = (): void => {\n    this.hasError = true;\n  };\n\n  private getInitials(): string {\n    if (!this.name) return '';\n    const words = this.name.trim().split(/\\s+/);\n    if (words.length === 1) {\n      return words[0].charAt(0).toUpperCase();\n    }\n    return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const showImage = this.src && !this.hasError;\n    const initials = this.getInitials();\n    const showInitials = !showImage && initials;\n\n    return (\n      <Host\n        class={{\n          'ts-avatar': true,\n          [`ts-avatar--${this.size}`]: true,\n          [`ts-avatar--${this.variant}`]: true,\n        }}\n      >\n        <div\n          class=\"avatar__base\"\n          part=\"base\"\n          role=\"img\"\n          aria-label={this.alt || this.name || 'Avatar'}\n          style={this.color && !showImage ? { backgroundColor: this.color } : undefined}\n        >\n          {showImage && (\n            <img\n              class=\"avatar__image\"\n              part=\"image\"\n              src={this.src}\n              alt={this.alt || this.name || ''}\n              onError={this.handleError}\n            />\n          )}\n          {showInitials && (\n            <span class=\"avatar__initials\" part=\"initials\" aria-hidden=\"true\">\n              {initials}\n            </span>\n          )}\n          {!showImage && !showInitials && <slot />}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,138 @@
+// Hand-written stories for ts-avatar
+export default {
+    title: 'Components/Avatar',
+    tags: ['autodocs'],
+    argTypes: {
+        src: { control: 'text', description: 'Image URL for the avatar.' },
+        alt: { control: 'text', description: 'Alt text for the avatar image.' },
+        name: { control: 'text', description: 'Name used to generate initials fallback.' },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'The size of the avatar.',
+        },
+        variant: {
+            control: 'select',
+            options: ['circle', 'square'],
+            description: 'Shape variant of the avatar.',
+        },
+        color: { control: 'color', description: 'Background color for the initials fallback.' },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.src !== undefined && args.src !== null && args.src !== '')
+        attrs.push(`src="${args.src}"`);
+    if (args.alt !== undefined && args.alt !== null && args.alt !== '')
+        attrs.push(`alt="${args.alt}"`);
+    if (args.name !== undefined && args.name !== null)
+        attrs.push(`name="${args.name}"`);
+    if (args.size !== undefined && args.size !== null)
+        attrs.push(`size="${args.size}"`);
+    if (args.variant !== undefined && args.variant !== null)
+        attrs.push(`variant="${args.variant}"`);
+    if (args.color !== undefined && args.color !== null)
+        attrs.push(`color="${args.color}"`);
+    return `<ts-avatar ${attrs.join(' ')}></ts-avatar>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        src: '',
+        alt: '',
+        name: 'James Kennedy',
+        size: 'md',
+        variant: 'circle',
+        color: '#6366f1',
+    },
+});
+export const Sizes = () => `
+  <div style="display: flex; gap: 12px; align-items: center;">
+    <ts-avatar size="xs" name="Alice Smith" color="#6366f1"></ts-avatar>
+    <ts-avatar size="sm" name="Alice Smith" color="#6366f1"></ts-avatar>
+    <ts-avatar size="md" name="Alice Smith" color="#6366f1"></ts-avatar>
+    <ts-avatar size="lg" name="Alice Smith" color="#6366f1"></ts-avatar>
+    <ts-avatar size="xl" name="Alice Smith" color="#6366f1"></ts-avatar>
+  </div>
+`;
+export const Variants = () => `
+  <div style="display: flex; gap: 16px; align-items: center;">
+    <div style="text-align: center; font-family: sans-serif;">
+      <ts-avatar variant="circle" name="James Kennedy" color="#2563eb" size="lg"></ts-avatar>
+      <div style="font-size: 12px; margin-top: 4px; color: #666;">Circle</div>
+    </div>
+    <div style="text-align: center; font-family: sans-serif;">
+      <ts-avatar variant="square" name="James Kennedy" color="#2563eb" size="lg"></ts-avatar>
+      <div style="font-size: 12px; margin-top: 4px; color: #666;">Square</div>
+    </div>
+  </div>
+`;
+export const InitialsFallback = () => `
+  <div style="display: flex; gap: 12px; align-items: center;">
+    <ts-avatar name="James Kennedy" color="#6366f1" size="lg"></ts-avatar>
+    <ts-avatar name="Alice Smith" color="#ec4899" size="lg"></ts-avatar>
+    <ts-avatar name="Robert Chen" color="#14b8a6" size="lg"></ts-avatar>
+    <ts-avatar name="Maria" color="#f59e0b" size="lg"></ts-avatar>
+    <ts-avatar name="David Lee Park" color="#8b5cf6" size="lg"></ts-avatar>
+  </div>
+`;
+export const WithImages = () => `
+  <div style="display: flex; gap: 12px; align-items: center;">
+    <ts-avatar
+      src="https://i.pravatar.cc/150?u=user1"
+      alt="User profile photo"
+      name="Jane Doe"
+      size="lg"
+    ></ts-avatar>
+    <ts-avatar
+      src="https://i.pravatar.cc/150?u=user2"
+      alt="User profile photo"
+      name="John Smith"
+      size="lg"
+    ></ts-avatar>
+    <ts-avatar
+      src="https://i.pravatar.cc/150?u=user3"
+      alt="User profile photo"
+      name="Alex Johnson"
+      size="lg"
+    ></ts-avatar>
+  </div>
+`;
+export const ImageErrorFallback = () => `
+  <div style="display: flex; gap: 12px; align-items: center; font-family: sans-serif;">
+    <div style="text-align: center;">
+      <ts-avatar
+        src="https://invalid-url.example.com/photo.jpg"
+        name="Broken Image"
+        color="#ef4444"
+        size="lg"
+      ></ts-avatar>
+      <div style="font-size: 12px; margin-top: 4px; color: #666;">Falls back to initials</div>
+    </div>
+  </div>
+`;
+export const UserList = () => `
+  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 320px; font-family: sans-serif;">
+    <div style="display: flex; align-items: center; gap: 12px; padding: 8px;">
+      <ts-avatar name="James Kennedy" color="#6366f1" size="sm"></ts-avatar>
+      <div>
+        <div style="font-weight: 500;">James Kennedy</div>
+        <div style="font-size: 13px; color: #666;">james@example.com</div>
+      </div>
+    </div>
+    <div style="display: flex; align-items: center; gap: 12px; padding: 8px;">
+      <ts-avatar name="Alice Smith" color="#ec4899" size="sm"></ts-avatar>
+      <div>
+        <div style="font-weight: 500;">Alice Smith</div>
+        <div style="font-size: 13px; color: #666;">alice@example.com</div>
+      </div>
+    </div>
+    <div style="display: flex; align-items: center; gap: 12px; padding: 8px;">
+      <ts-avatar name="Robert Chen" color="#14b8a6" size="sm"></ts-avatar>
+      <div>
+        <div style="font-weight: 500;">Robert Chen</div>
+        <div style="font-size: 13px; color: #666;">robert@example.com</div>
+      </div>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=avatar.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.stories.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-avatar\n\nexport default {\n  title: 'Components/Avatar',\n  tags: ['autodocs'],\n  argTypes: {\n    src: { control: 'text', description: 'Image URL for the avatar.' },\n    alt: { control: 'text', description: 'Alt text for the avatar image.' },\n    name: { control: 'text', description: 'Name used to generate initials fallback.' },\n    size: {\n      control: 'select',\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\n      description: 'The size of the avatar.',\n    },\n    variant: {\n      control: 'select',\n      options: ['circle', 'square'],\n      description: 'Shape variant of the avatar.',\n    },\n    color: { control: 'color', description: 'Background color for the initials fallback.' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.src !== undefined && args.src !== null && args.src !== '') attrs.push(`src=\"${args.src}\"`);\n  if (args.alt !== undefined && args.alt !== null && args.alt !== '') attrs.push(`alt=\"${args.alt}\"`);\n  if (args.name !== undefined && args.name !== null) attrs.push(`name=\"${args.name}\"`);\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.variant !== undefined && args.variant !== null) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.color !== undefined && args.color !== null) attrs.push(`color=\"${args.color}\"`);\n  return `<ts-avatar ${attrs.join(' ')}></ts-avatar>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    src: '',\n    alt: '',\n    name: 'James Kennedy',\n    size: 'md',\n    variant: 'circle',\n    color: '#6366f1',\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; gap: 12px; align-items: center;\">\n    <ts-avatar size=\"xs\" name=\"Alice Smith\" color=\"#6366f1\"></ts-avatar>\n    <ts-avatar size=\"sm\" name=\"Alice Smith\" color=\"#6366f1\"></ts-avatar>\n    <ts-avatar size=\"md\" name=\"Alice Smith\" color=\"#6366f1\"></ts-avatar>\n    <ts-avatar size=\"lg\" name=\"Alice Smith\" color=\"#6366f1\"></ts-avatar>\n    <ts-avatar size=\"xl\" name=\"Alice Smith\" color=\"#6366f1\"></ts-avatar>\n  </div>\n`;\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; gap: 16px; align-items: center;\">\n    <div style=\"text-align: center; font-family: sans-serif;\">\n      <ts-avatar variant=\"circle\" name=\"James Kennedy\" color=\"#2563eb\" size=\"lg\"></ts-avatar>\n      <div style=\"font-size: 12px; margin-top: 4px; color: #666;\">Circle</div>\n    </div>\n    <div style=\"text-align: center; font-family: sans-serif;\">\n      <ts-avatar variant=\"square\" name=\"James Kennedy\" color=\"#2563eb\" size=\"lg\"></ts-avatar>\n      <div style=\"font-size: 12px; margin-top: 4px; color: #666;\">Square</div>\n    </div>\n  </div>\n`;\n\nexport const InitialsFallback = (): string => `\n  <div style=\"display: flex; gap: 12px; align-items: center;\">\n    <ts-avatar name=\"James Kennedy\" color=\"#6366f1\" size=\"lg\"></ts-avatar>\n    <ts-avatar name=\"Alice Smith\" color=\"#ec4899\" size=\"lg\"></ts-avatar>\n    <ts-avatar name=\"Robert Chen\" color=\"#14b8a6\" size=\"lg\"></ts-avatar>\n    <ts-avatar name=\"Maria\" color=\"#f59e0b\" size=\"lg\"></ts-avatar>\n    <ts-avatar name=\"David Lee Park\" color=\"#8b5cf6\" size=\"lg\"></ts-avatar>\n  </div>\n`;\n\nexport const WithImages = (): string => `\n  <div style=\"display: flex; gap: 12px; align-items: center;\">\n    <ts-avatar\n      src=\"https://i.pravatar.cc/150?u=user1\"\n      alt=\"User profile photo\"\n      name=\"Jane Doe\"\n      size=\"lg\"\n    ></ts-avatar>\n    <ts-avatar\n      src=\"https://i.pravatar.cc/150?u=user2\"\n      alt=\"User profile photo\"\n      name=\"John Smith\"\n      size=\"lg\"\n    ></ts-avatar>\n    <ts-avatar\n      src=\"https://i.pravatar.cc/150?u=user3\"\n      alt=\"User profile photo\"\n      name=\"Alex Johnson\"\n      size=\"lg\"\n    ></ts-avatar>\n  </div>\n`;\n\nexport const ImageErrorFallback = (): string => `\n  <div style=\"display: flex; gap: 12px; align-items: center; font-family: sans-serif;\">\n    <div style=\"text-align: center;\">\n      <ts-avatar\n        src=\"https://invalid-url.example.com/photo.jpg\"\n        name=\"Broken Image\"\n        color=\"#ef4444\"\n        size=\"lg\"\n      ></ts-avatar>\n      <div style=\"font-size: 12px; margin-top: 4px; color: #666;\">Falls back to initials</div>\n    </div>\n  </div>\n`;\n\nexport const UserList = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 12px; max-width: 320px; font-family: sans-serif;\">\n    <div style=\"display: flex; align-items: center; gap: 12px; padding: 8px;\">\n      <ts-avatar name=\"James Kennedy\" color=\"#6366f1\" size=\"sm\"></ts-avatar>\n      <div>\n        <div style=\"font-weight: 500;\">James Kennedy</div>\n        <div style=\"font-size: 13px; color: #666;\">james@example.com</div>\n      </div>\n    </div>\n    <div style=\"display: flex; align-items: center; gap: 12px; padding: 8px;\">\n      <ts-avatar name=\"Alice Smith\" color=\"#ec4899\" size=\"sm\"></ts-avatar>\n      <div>\n        <div style=\"font-weight: 500;\">Alice Smith</div>\n        <div style=\"font-size: 13px; color: #666;\">alice@example.com</div>\n      </div>\n    </div>\n    <div style=\"display: flex; align-items: center; gap: 12px; padding: 8px;\">\n      <ts-avatar name=\"Robert Chen\" color=\"#14b8a6\" size=\"sm\"></ts-avatar>\n      <div>\n        <div style=\"font-weight: 500;\">Robert Chen</div>\n        <div style=\"font-size: 13px; color: #666;\">robert@example.com</div>\n      </div>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/badge/badge.css

@@ -0,0 +1,67 @@
+/* ==========================================================================
+   ts-badge — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-badge-radius       Border radius
+     --ts-badge-font-weight  Label font weight
+   ========================================================================== */
+
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+  font-family: var(--ts-font-family-base);
+
+  --ts-badge-radius: var(--ts-shape-badge);
+  --ts-badge-font-weight: var(--ts-font-weight-medium);
+}
+
+.badge__base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--ts-badge-font-weight);
+  letter-spacing: 0;
+  line-height: 1;
+  white-space: nowrap;
+  border-radius: var(--ts-badge-radius);
+  border: 1px solid transparent;
+}
+
+/* ---- Sizes ---- */
+:host([size="xs"]) .badge__base { padding: 2px var(--ts-spacing-1); font-size: 0.625rem; }
+:host([size="sm"]) .badge__base { padding: 3px var(--ts-spacing-2); font-size: var(--ts-font-size-xs); }
+:host([size="md"]) .badge__base { padding: var(--ts-spacing-1) var(--ts-spacing-3); font-size: var(--ts-font-size-xs); }
+:host([size="lg"]) .badge__base { padding: var(--ts-spacing-2) var(--ts-spacing-3); font-size: var(--ts-font-size-sm); }
+:host([size="xl"]) .badge__base { padding: var(--ts-spacing-2) var(--ts-spacing-4); font-size: var(--ts-font-size-md); }
+
+/* ---- Pill ---- */
+:host([pill]) .badge__base {
+  border-radius: var(--ts-radius-full);
+}
+
+/* ---- Dot ---- */
+:host([dot]) .badge__base {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border-radius: var(--ts-radius-full);
+}
+
+:host([dot][size="lg"]) .badge__base { width: 10px; height: 10px; }
+:host([dot][size="xl"]) .badge__base { width: 12px; height: 12px; }
+
+/* ---- Solid Variants ---- */
+:host([variant="primary"]:not([outline])) .badge__base   { background: var(--ts-color-primary-500); color: var(--ts-color-text-on-primary); }
+:host([variant="success"]:not([outline])) .badge__base   { background: var(--ts-color-success-500); color: var(--ts-color-text-on-success); }
+:host([variant="warning"]:not([outline])) .badge__base   { background: var(--ts-color-warning-500); color: var(--ts-color-text-on-warning); }
+:host([variant="danger"]:not([outline])) .badge__base    { background: var(--ts-color-danger-500); color: var(--ts-color-text-on-danger); }
+:host([variant="info"]:not([outline])) .badge__base      { background: var(--ts-color-info-500); color: var(--ts-color-text-on-info); }
+:host([variant="neutral"]:not([outline])) .badge__base   { background: var(--ts-color-neutral-200); color: var(--ts-color-text-secondary); }
+:host([variant="secondary"]:not([outline])) .badge__base { background: var(--ts-color-neutral-100); color: var(--ts-color-text-tertiary); }
+
+/* ---- Outline Variants ---- */
+:host([outline][variant="primary"]) .badge__base   { border-color: var(--ts-color-primary-500); color: var(--ts-color-primary-600); background: transparent; }
+:host([outline][variant="success"]) .badge__base   { border-color: var(--ts-color-success-500); color: var(--ts-color-success-600); background: transparent; }
+:host([outline][variant="danger"]) .badge__base    { border-color: var(--ts-color-danger-500); color: var(--ts-color-danger-600); background: transparent; }
+:host([outline][variant="warning"]) .badge__base   { border-color: var(--ts-color-warning-500); color: var(--ts-color-warning-600); background: transparent; }
+:host([outline][variant="neutral"]) .badge__base   { border-color: var(--ts-color-border-strong); color: var(--ts-color-text-tertiary); background: transparent; }