@f-ewald/components 0.4.0 → 0.6.0

package/dist/tile-grid.js

@@ -0,0 +1,102 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { tokens } from "./tokens.js";
+/**
+ * A generic, presentational grid shell: renders one bordered card per entry
+ * in `items`, with each tile's content produced by `renderTile` (default:
+ * stringify). Knows nothing about what an "item" means — callers own the
+ * data shape entirely. Modeled directly on `data-table`'s headless pattern.
+ *
+ * Optional `itemHref` makes whole tiles clickable (navigating via
+ * `location.hash`), without hijacking clicks on nested interactive elements
+ * (links/buttons) a tile's rendered content might contain.
+ *
+ * @element tile-grid
+ */
+let TileGrid = class TileGrid extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Tile data; opaque to this component beyond what `renderTile` does with it. */
+        this.items = [];
+        /** Stable identity for `items[i]`, used as the repeat-directive key. Defaults to the item's index. */
+        this.itemKey = (_item, index) => index;
+        /** Produces a tile's rendered content for `item`. Default: stringify. */
+        this.renderTile = (item) => String(item);
+        /** When set, clicking a tile (outside any nested link/button) navigates to this hash. */
+        this.itemHref = null;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-size: var(--ui-font-size-sm, 0.75rem);
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 0.75rem;
+      }
+      .tile {
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: var(--ui-radius, 0.5rem);
+        padding: 0.75rem;
+        color: var(--ui-text, #0f172a);
+      }
+      .tile.clickable {
+        cursor: pointer;
+      }
+      .tile.clickable:hover {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+    `,
+    ]; }
+    #onTileClick(item, e) {
+        if (!this.itemHref)
+            return;
+        if (e.target.closest("a, button"))
+            return;
+        const href = this.itemHref(item);
+        if (href)
+            location.hash = href;
+    }
+    render() {
+        return html `
+      <div class="grid">
+        ${repeat(this.items, (item, i) => this.itemKey(item, i), (item) => html `
+            <div
+              class=${this.itemHref ? "tile clickable" : "tile"}
+              @click=${(e) => this.#onTileClick(item, e)}
+            >
+              ${this.renderTile(item)}
+            </div>
+          `)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], TileGrid.prototype, "items", void 0);
+__decorate([
+    property({ attribute: false })
+], TileGrid.prototype, "itemKey", void 0);
+__decorate([
+    property({ attribute: false })
+], TileGrid.prototype, "renderTile", void 0);
+__decorate([
+    property({ attribute: false })
+], TileGrid.prototype, "itemHref", void 0);
+TileGrid = __decorate([
+    customElement("tile-grid")
+], TileGrid);
+export { TileGrid };
+//# sourceMappingURL=tile-grid.js.map

package/dist/tile-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-grid.js","sourceRoot":"","sources":["../src/tile-grid.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;;GAWG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QA6BL,iFAAiF;QACjD,UAAK,GAAc,EAAE,CAAC;QACtD,sGAAsG;QACtE,YAAO,GAAsD,CAC3F,KAAK,EACL,KAAK,EACL,EAAE,CAAC,KAAK,CAAC;QACX,yEAAyE;QACzC,eAAU,GAA+B,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAChG,yFAAyF;QACzD,aAAQ,GAA8C,IAAI,CAAC;IA2B7F,CAAC;aAjEiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;KAuBF;KACF,AA1BqB,CA0BpB;IAcF,YAAY,CAAC,IAAa,EAAE,CAAa;QACvC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3B,IAAK,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,WAAW,CAAC;YAAE,OAAO;QAC3D,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACjC,IAAI,IAAI;YAAE,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;IACjC,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,MAAM,CACN,IAAI,CAAC,KAAK,EACV,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,EAClC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;sBAEF,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM;uBACxC,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC;;gBAEpD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;;WAE1B,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AApCiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;uCAAuB;AAEtB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yCAGpB;AAEqB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CAAiE;AAEhE;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0CAA4D;AAvChF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAkEpB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * A generic, presentational grid shell: renders one bordered card per entry\n * in `items`, with each tile's content produced by `renderTile` (default:\n * stringify). Knows nothing about what an \"item\" means — callers own the\n * data shape entirely. Modeled directly on `data-table`'s headless pattern.\n *\n * Optional `itemHref` makes whole tiles clickable (navigating via\n * `location.hash`), without hijacking clicks on nested interactive elements\n * (links/buttons) a tile's rendered content might contain.\n *\n * @element tile-grid\n */\n@customElement(\"tile-grid\")\nexport class TileGrid extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-size: var(--ui-font-size-sm, 0.75rem);\n      }\n      .grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n        gap: 0.75rem;\n      }\n      .tile {\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius, 0.5rem);\n        padding: 0.75rem;\n        color: var(--ui-text, #0f172a);\n      }\n      .tile.clickable {\n        cursor: pointer;\n      }\n      .tile.clickable:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n    `,\n  ];\n\n  /** Tile data; opaque to this component beyond what `renderTile` does with it. */\n  @property({ attribute: false }) items: unknown[] = [];\n  /** Stable identity for `items[i]`, used as the repeat-directive key. Defaults to the item's index. */\n  @property({ attribute: false }) itemKey: (item: unknown, index: number) => string | number = (\n    _item,\n    index,\n  ) => index;\n  /** Produces a tile's rendered content for `item`. Default: stringify. */\n  @property({ attribute: false }) renderTile: (item: unknown) => unknown = (item) => String(item);\n  /** When set, clicking a tile (outside any nested link/button) navigates to this hash. */\n  @property({ attribute: false }) itemHref: ((item: unknown) => string | null) | null = null;\n\n  #onTileClick(item: unknown, e: MouseEvent): void {\n    if (!this.itemHref) return;\n    if ((e.target as HTMLElement).closest(\"a, button\")) return;\n    const href = this.itemHref(item);\n    if (href) location.hash = href;\n  }\n\n  override render() {\n    return html`\n      <div class=\"grid\">\n        ${repeat(\n          this.items,\n          (item, i) => this.itemKey(item, i),\n          (item) => html`\n            <div\n              class=${this.itemHref ? \"tile clickable\" : \"tile\"}\n              @click=${(e: MouseEvent) => this.#onTileClick(item, e)}\n            >\n              ${this.renderTile(item)}\n            </div>\n          `,\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"tile-grid\": TileGrid;\n  }\n}\n"]}

package/dist/tokens.css

@@ -1,4 +1,5 @@
 :root {
+  color-scheme: light;
   --ui-primary: #4f46e5;
   --ui-primary-hover: #4338ca;
   --ui-danger: #dc2626;
@@ -19,3 +20,41 @@
   --ui-font-size: 0.875rem;
   --ui-font-size-sm: 0.75rem;
 }
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --ui-primary: #6366f1;
+    --ui-primary-hover: #818cf8;
+    --ui-danger: #ef4444;
+    --ui-danger-hover: #f87171;
+    --ui-success: #22c55e;
+    --ui-text: #f1f5f9;
+    --ui-text-muted: #94a3b8;
+    --ui-border: #334155;
+    --ui-surface: #0f172a;
+    --ui-surface-muted: #1e293b;
+    --ui-overlay: rgb(2 6 23 / 0.6);
+    --ui-focus-ring: 0 0 0 3px rgb(99 102 241 / 0.45);
+  }
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --ui-primary: #6366f1;
+  --ui-primary-hover: #818cf8;
+  --ui-danger: #ef4444;
+  --ui-danger-hover: #f87171;
+  --ui-success: #22c55e;
+  --ui-text: #f1f5f9;
+  --ui-text-muted: #94a3b8;
+  --ui-border: #334155;
+  --ui-surface: #0f172a;
+  --ui-surface-muted: #1e293b;
+  --ui-overlay: rgb(2 6 23 / 0.6);
+  --ui-focus-ring: 0 0 0 3px rgb(99 102 241 / 0.45);
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+}

package/dist/tokens.d.ts

@@ -8,9 +8,34 @@
  */
 export declare const tokenValues: Record<string, string>;
 /**
- * A shared `:host` stylesheet that establishes the token custom properties
- * with their fallback values. Import and include this in every component's
- * `static styles` array alongside its component-specific `css` block.
+ * Dark-mode overrides for the same `--ui-*` custom properties, applied by
+ * `tokens.css` via `@media (prefers-color-scheme: dark)` and `[data-theme]`
+ * (see generate-tokens-css.mjs). Same Tailwind slate scale as the light
+ * palette, inverted, with primary/danger/success lightened one step (500
+ * instead of 600) for sufficient contrast against dark surfaces. Shape/type
+ * tokens are theme-independent and not repeated here.
+ */
+export declare const darkTokenValues: Record<string, string>;
+/**
+ * Historically a shared `:host { --ui-x: var(--ui-x, fallback); } ` block,
+ * re-declaring every token on each component's own host element as a
+ * "materialize the inherited value, or this fallback" trick. That pattern
+ * turned out to be a genuine bug, not a working default: browsers treat
+ * `--ui-x: var(--ui-x, ...)` on `:host` as a self-referencing declaration
+ * that computes to the guaranteed-invalid value REGARDLESS of what an
+ * ancestor (e.g. `:root`) set — the host's own `:host` rule wins the cascade
+ * over the ancestor's, so this dropped whatever the app actually set and
+ * silently substituted the component's own fallback everywhere. It went
+ * unnoticed because every component's fallback happened to equal the
+ * intended light-mode value — dark mode (a real, different value at
+ * `:root`) exposed it immediately (colors rendering as if no theme were
+ * applied at all). Fix: don't redeclare tokens on `:host` — plain
+ * inheritance already carries `:root`'s values into every shadow root
+ * correctly, and every component already has its own `var(--ui-x, fallback)`
+ * at each point of use, so nothing here is needed for the "zero external
+ * CSS" default to keep working. Kept as an empty export so the existing
+ * `static override styles = [tokens, css\`...\`]` import in every component
+ * keeps compiling.
  */
 export declare const tokens: import("lit").CSSResult;
 //# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA4B9C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,MAAM,yBAuClB,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA4B9C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAalD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM,yBAAQ,CAAC"}

package/dist/tokens.js

@@ -32,48 +32,47 @@ export const tokenValues = {
     "--ui-font-size-sm": "0.75rem",
 };
 /**
- * A shared `:host` stylesheet that establishes the token custom properties
- * with their fallback values. Import and include this in every component's
- * `static styles` array alongside its component-specific `css` block.
+ * Dark-mode overrides for the same `--ui-*` custom properties, applied by
+ * `tokens.css` via `@media (prefers-color-scheme: dark)` and `[data-theme]`
+ * (see generate-tokens-css.mjs). Same Tailwind slate scale as the light
+ * palette, inverted, with primary/danger/success lightened one step (500
+ * instead of 600) for sufficient contrast against dark surfaces. Shape/type
+ * tokens are theme-independent and not repeated here.
  */
-export const tokens = css `
-  :host {
-    --ui-primary: var(--ui-primary, #4f46e5);
-    --ui-primary-hover: var(--ui-primary-hover, #4338ca);
-    --ui-danger: var(--ui-danger, #dc2626);
-    --ui-danger-hover: var(--ui-danger-hover, #b91c1c);
-    --ui-success: var(--ui-success, #16a34a);
-    --ui-text: var(--ui-text, #0f172a);
-    --ui-text-muted: var(--ui-text-muted, #64748b);
-    --ui-border: var(--ui-border, #e2e8f0);
-    --ui-surface: var(--ui-surface, #ffffff);
-    --ui-surface-muted: var(--ui-surface-muted, #f8fafc);
-    --ui-overlay: var(--ui-overlay, rgb(15 23 42 / 0.45));
-    --ui-radius: var(--ui-radius, 0.5rem);
-    --ui-radius-sm: var(--ui-radius-sm, 0.25rem);
-    --ui-shadow: var(
-      --ui-shadow,
-      0 4px 6px -1px rgb(0 0 0 / 0.1),
-      0 2px 4px -2px rgb(0 0 0 / 0.1)
-    );
-    --ui-shadow-lg: var(
-      --ui-shadow-lg,
-      0 20px 25px -5px rgb(0 0 0 / 0.1),
-      0 8px 10px -6px rgb(0 0 0 / 0.1)
-    );
-    --ui-focus-ring: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
-    --ui-font: var(
-      --ui-font,
-      ui-sans-serif,
-      system-ui,
-      sans-serif,
-      "Apple Color Emoji",
-      "Segoe UI Emoji",
-      "Segoe UI Symbol",
-      "Noto Color Emoji"
-    );
-    --ui-font-size: var(--ui-font-size, 0.875rem);
-    --ui-font-size-sm: var(--ui-font-size-sm, 0.75rem);
-  }
-`;
+export const darkTokenValues = {
+    "--ui-primary": "#6366f1", // indigo-500
+    "--ui-primary-hover": "#818cf8", // indigo-400
+    "--ui-danger": "#ef4444", // red-500
+    "--ui-danger-hover": "#f87171", // red-400
+    "--ui-success": "#22c55e", // green-500
+    "--ui-text": "#f1f5f9", // slate-100
+    "--ui-text-muted": "#94a3b8", // slate-400
+    "--ui-border": "#334155", // slate-700
+    "--ui-surface": "#0f172a", // slate-900
+    "--ui-surface-muted": "#1e293b", // slate-800
+    "--ui-overlay": "rgb(2 6 23 / 0.6)", // slate-950 / 60%
+    "--ui-focus-ring": "0 0 0 3px rgb(99 102 241 / 0.45)",
+};
+/**
+ * Historically a shared `:host { --ui-x: var(--ui-x, fallback); } ` block,
+ * re-declaring every token on each component's own host element as a
+ * "materialize the inherited value, or this fallback" trick. That pattern
+ * turned out to be a genuine bug, not a working default: browsers treat
+ * `--ui-x: var(--ui-x, ...)` on `:host` as a self-referencing declaration
+ * that computes to the guaranteed-invalid value REGARDLESS of what an
+ * ancestor (e.g. `:root`) set — the host's own `:host` rule wins the cascade
+ * over the ancestor's, so this dropped whatever the app actually set and
+ * silently substituted the component's own fallback everywhere. It went
+ * unnoticed because every component's fallback happened to equal the
+ * intended light-mode value — dark mode (a real, different value at
+ * `:root`) exposed it immediately (colors rendering as if no theme were
+ * applied at all). Fix: don't redeclare tokens on `:host` — plain
+ * inheritance already carries `:root`'s values into every shadow root
+ * correctly, and every component already has its own `var(--ui-x, fallback)`
+ * at each point of use, so nothing here is needed for the "zero external
+ * CSS" default to keep working. Kept as an empty export so the existing
+ * `static override styles = [tokens, css\`...\`]` import in every component
+ * keeps compiling.
+ */
+export const tokens = css ``;
 //# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAA2B;IACjD,SAAS;IACT,cAAc,EAAE,SAAS,EAAE,aAAa;IACxC,oBAAoB,EAAE,SAAS,EAAE,aAAa;IAC9C,aAAa,EAAE,SAAS,EAAE,UAAU;IACpC,mBAAmB,EAAE,SAAS,EAAE,UAAU;IAC1C,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,WAAW,EAAE,SAAS,EAAE,YAAY;IACpC,iBAAiB,EAAE,SAAS,EAAE,YAAY;IAC1C,aAAa,EAAE,SAAS,EAAE,YAAY;IACtC,cAAc,EAAE,SAAS,EAAE,QAAQ;IACnC,oBAAoB,EAAE,SAAS,EAAE,WAAW;IAC5C,cAAc,EAAE,sBAAsB,EAAE,kBAAkB;IAE1D,gBAAgB;IAChB,aAAa,EAAE,QAAQ,EAAE,aAAa;IACtC,gBAAgB,EAAE,SAAS,EAAE,UAAU;IACvC,aAAa,EACX,kEAAkE,EAAE,YAAY;IAClF,gBAAgB,EACd,qEAAqE,EAAE,YAAY;IACrF,iBAAiB,EAAE,iCAAiC;IAEpD,OAAO;IACP,WAAW,EACT,oHAAoH;IACtH,gBAAgB,EAAE,UAAU;IAC5B,mBAAmB,EAAE,SAAS;CAC/B,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCxB,CAAC","sourcesContent":["import { css } from \"lit\";\n\n/**\n * Design token values, sourced from Tailwind v4's default theme palette.\n * Each entry maps a `--ui-*` custom property name to its default value.\n * These are the same values baked in as `var(--ui-*, <fallback>)` fallbacks\n * throughout component styles, so components render correctly with zero\n * external CSS. Consumers may override any of these by setting the custom\n * property on `:root` or an ancestor element (see `tokens.css`).\n */\nexport const tokenValues: Record<string, string> = {\n  // Colors\n  \"--ui-primary\": \"#4f46e5\", // indigo-600\n  \"--ui-primary-hover\": \"#4338ca\", // indigo-700\n  \"--ui-danger\": \"#dc2626\", // red-600\n  \"--ui-danger-hover\": \"#b91c1c\", // red-700\n  \"--ui-success\": \"#16a34a\", // green-600\n  \"--ui-text\": \"#0f172a\", // slate-900\n  \"--ui-text-muted\": \"#64748b\", // slate-500\n  \"--ui-border\": \"#e2e8f0\", // slate-200\n  \"--ui-surface\": \"#ffffff\", // white\n  \"--ui-surface-muted\": \"#f8fafc\", // slate-50\n  \"--ui-overlay\": \"rgb(15 23 42 / 0.45)\", // slate-900 / 45%\n\n  // Shape / depth\n  \"--ui-radius\": \"0.5rem\", // rounded-lg\n  \"--ui-radius-sm\": \"0.25rem\", // rounded\n  \"--ui-shadow\":\n    \"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)\", // shadow-md\n  \"--ui-shadow-lg\":\n    \"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)\", // shadow-xl\n  \"--ui-focus-ring\": \"0 0 0 3px rgb(79 70 229 / 0.35)\",\n\n  // Type\n  \"--ui-font\":\n    'ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"',\n  \"--ui-font-size\": \"0.875rem\",\n  \"--ui-font-size-sm\": \"0.75rem\",\n};\n\n/**\n * A shared `:host` stylesheet that establishes the token custom properties\n * with their fallback values. Import and include this in every component's\n * `static styles` array alongside its component-specific `css` block.\n */\nexport const tokens = css`\n  :host {\n    --ui-primary: var(--ui-primary, #4f46e5);\n    --ui-primary-hover: var(--ui-primary-hover, #4338ca);\n    --ui-danger: var(--ui-danger, #dc2626);\n    --ui-danger-hover: var(--ui-danger-hover, #b91c1c);\n    --ui-success: var(--ui-success, #16a34a);\n    --ui-text: var(--ui-text, #0f172a);\n    --ui-text-muted: var(--ui-text-muted, #64748b);\n    --ui-border: var(--ui-border, #e2e8f0);\n    --ui-surface: var(--ui-surface, #ffffff);\n    --ui-surface-muted: var(--ui-surface-muted, #f8fafc);\n    --ui-overlay: var(--ui-overlay, rgb(15 23 42 / 0.45));\n    --ui-radius: var(--ui-radius, 0.5rem);\n    --ui-radius-sm: var(--ui-radius-sm, 0.25rem);\n    --ui-shadow: var(\n      --ui-shadow,\n      0 4px 6px -1px rgb(0 0 0 / 0.1),\n      0 2px 4px -2px rgb(0 0 0 / 0.1)\n    );\n    --ui-shadow-lg: var(\n      --ui-shadow-lg,\n      0 20px 25px -5px rgb(0 0 0 / 0.1),\n      0 8px 10px -6px rgb(0 0 0 / 0.1)\n    );\n    --ui-focus-ring: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n    --ui-font: var(\n      --ui-font,\n      ui-sans-serif,\n      system-ui,\n      sans-serif,\n      \"Apple Color Emoji\",\n      \"Segoe UI Emoji\",\n      \"Segoe UI Symbol\",\n      \"Noto Color Emoji\"\n    );\n    --ui-font-size: var(--ui-font-size, 0.875rem);\n    --ui-font-size-sm: var(--ui-font-size-sm, 0.75rem);\n  }\n`;\n"]}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAA2B;IACjD,SAAS;IACT,cAAc,EAAE,SAAS,EAAE,aAAa;IACxC,oBAAoB,EAAE,SAAS,EAAE,aAAa;IAC9C,aAAa,EAAE,SAAS,EAAE,UAAU;IACpC,mBAAmB,EAAE,SAAS,EAAE,UAAU;IAC1C,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,WAAW,EAAE,SAAS,EAAE,YAAY;IACpC,iBAAiB,EAAE,SAAS,EAAE,YAAY;IAC1C,aAAa,EAAE,SAAS,EAAE,YAAY;IACtC,cAAc,EAAE,SAAS,EAAE,QAAQ;IACnC,oBAAoB,EAAE,SAAS,EAAE,WAAW;IAC5C,cAAc,EAAE,sBAAsB,EAAE,kBAAkB;IAE1D,gBAAgB;IAChB,aAAa,EAAE,QAAQ,EAAE,aAAa;IACtC,gBAAgB,EAAE,SAAS,EAAE,UAAU;IACvC,aAAa,EACX,kEAAkE,EAAE,YAAY;IAClF,gBAAgB,EACd,qEAAqE,EAAE,YAAY;IACrF,iBAAiB,EAAE,iCAAiC;IAEpD,OAAO;IACP,WAAW,EACT,oHAAoH;IACtH,gBAAgB,EAAE,UAAU;IAC5B,mBAAmB,EAAE,SAAS;CAC/B,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAA2B;IACrD,cAAc,EAAE,SAAS,EAAE,aAAa;IACxC,oBAAoB,EAAE,SAAS,EAAE,aAAa;IAC9C,aAAa,EAAE,SAAS,EAAE,UAAU;IACpC,mBAAmB,EAAE,SAAS,EAAE,UAAU;IAC1C,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,WAAW,EAAE,SAAS,EAAE,YAAY;IACpC,iBAAiB,EAAE,SAAS,EAAE,YAAY;IAC1C,aAAa,EAAE,SAAS,EAAE,YAAY;IACtC,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,oBAAoB,EAAE,SAAS,EAAE,YAAY;IAC7C,cAAc,EAAE,mBAAmB,EAAE,kBAAkB;IACvD,iBAAiB,EAAE,kCAAkC;CACtD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from \"lit\";\n\n/**\n * Design token values, sourced from Tailwind v4's default theme palette.\n * Each entry maps a `--ui-*` custom property name to its default value.\n * These are the same values baked in as `var(--ui-*, <fallback>)` fallbacks\n * throughout component styles, so components render correctly with zero\n * external CSS. Consumers may override any of these by setting the custom\n * property on `:root` or an ancestor element (see `tokens.css`).\n */\nexport const tokenValues: Record<string, string> = {\n  // Colors\n  \"--ui-primary\": \"#4f46e5\", // indigo-600\n  \"--ui-primary-hover\": \"#4338ca\", // indigo-700\n  \"--ui-danger\": \"#dc2626\", // red-600\n  \"--ui-danger-hover\": \"#b91c1c\", // red-700\n  \"--ui-success\": \"#16a34a\", // green-600\n  \"--ui-text\": \"#0f172a\", // slate-900\n  \"--ui-text-muted\": \"#64748b\", // slate-500\n  \"--ui-border\": \"#e2e8f0\", // slate-200\n  \"--ui-surface\": \"#ffffff\", // white\n  \"--ui-surface-muted\": \"#f8fafc\", // slate-50\n  \"--ui-overlay\": \"rgb(15 23 42 / 0.45)\", // slate-900 / 45%\n\n  // Shape / depth\n  \"--ui-radius\": \"0.5rem\", // rounded-lg\n  \"--ui-radius-sm\": \"0.25rem\", // rounded\n  \"--ui-shadow\":\n    \"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)\", // shadow-md\n  \"--ui-shadow-lg\":\n    \"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)\", // shadow-xl\n  \"--ui-focus-ring\": \"0 0 0 3px rgb(79 70 229 / 0.35)\",\n\n  // Type\n  \"--ui-font\":\n    'ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"',\n  \"--ui-font-size\": \"0.875rem\",\n  \"--ui-font-size-sm\": \"0.75rem\",\n};\n\n/**\n * Dark-mode overrides for the same `--ui-*` custom properties, applied by\n * `tokens.css` via `@media (prefers-color-scheme: dark)` and `[data-theme]`\n * (see generate-tokens-css.mjs). Same Tailwind slate scale as the light\n * palette, inverted, with primary/danger/success lightened one step (500\n * instead of 600) for sufficient contrast against dark surfaces. Shape/type\n * tokens are theme-independent and not repeated here.\n */\nexport const darkTokenValues: Record<string, string> = {\n  \"--ui-primary\": \"#6366f1\", // indigo-500\n  \"--ui-primary-hover\": \"#818cf8\", // indigo-400\n  \"--ui-danger\": \"#ef4444\", // red-500\n  \"--ui-danger-hover\": \"#f87171\", // red-400\n  \"--ui-success\": \"#22c55e\", // green-500\n  \"--ui-text\": \"#f1f5f9\", // slate-100\n  \"--ui-text-muted\": \"#94a3b8\", // slate-400\n  \"--ui-border\": \"#334155\", // slate-700\n  \"--ui-surface\": \"#0f172a\", // slate-900\n  \"--ui-surface-muted\": \"#1e293b\", // slate-800\n  \"--ui-overlay\": \"rgb(2 6 23 / 0.6)\", // slate-950 / 60%\n  \"--ui-focus-ring\": \"0 0 0 3px rgb(99 102 241 / 0.45)\",\n};\n\n/**\n * Historically a shared `:host { --ui-x: var(--ui-x, fallback); } ` block,\n * re-declaring every token on each component's own host element as a\n * \"materialize the inherited value, or this fallback\" trick. That pattern\n * turned out to be a genuine bug, not a working default: browsers treat\n * `--ui-x: var(--ui-x, ...)` on `:host` as a self-referencing declaration\n * that computes to the guaranteed-invalid value REGARDLESS of what an\n * ancestor (e.g. `:root`) set — the host's own `:host` rule wins the cascade\n * over the ancestor's, so this dropped whatever the app actually set and\n * silently substituted the component's own fallback everywhere. It went\n * unnoticed because every component's fallback happened to equal the\n * intended light-mode value — dark mode (a real, different value at\n * `:root`) exposed it immediately (colors rendering as if no theme were\n * applied at all). Fix: don't redeclare tokens on `:host` — plain\n * inheritance already carries `:root`'s values into every shadow root\n * correctly, and every component already has its own `var(--ui-x, fallback)`\n * at each point of use, so nothing here is needed for the \"zero external\n * CSS\" default to keep working. Kept as an empty export so the existing\n * `static override styles = [tokens, css\\`...\\`]` import in every component\n * keeps compiling.\n */\nexport const tokens = css``;\n"]}

package/dist/user-avatar.d.ts

@@ -14,9 +14,12 @@ export declare class UserAvatar extends LitElement {
     src: string | null;
     /** Source string for the fallback initial (e.g. a display name or email) — first character, uppercased. */
     name: string | null;
-    /** Diameter in CSS pixels. */
-    size: number;
+    /** Diameter in CSS pixels, or a preset name (`xs`=18, `sm`=24, `md`=32, `lg`=48). */
+    size: string | number;
     private _imgError;
+    private static readonly SIZE_PRESETS;
+    /** Resolves the `size` property (number or preset name) to a pixel diameter. */
+    private resolveSize;
     protected willUpdate(changed: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/user-avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-avatar.d.ts","sourceRoot":"","sources":["../src/user-avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;GAQG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAyBpB;IAEF,mFAAmF;IACvE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAQ;IACtC,2GAA2G;IAC/F,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IACvC,8BAA8B;IACF,IAAI,SAAM;IAE7B,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAmB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAE1D;IAEQ,MAAM,yCAgBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"user-avatar.d.ts","sourceRoot":"","sources":["../src/user-avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;GAQG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAyBpB;IAEF,mFAAmF;IACvE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAQ;IACtC,2GAA2G;IAC/F,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IACvC,qFAAqF;IACzE,IAAI,EAAE,MAAM,GAAG,MAAM,CAAM;IAE9B,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAKlC;IAEF,gFAAgF;IAChF,OAAO,CAAC,WAAW;IAMnB,UAAmB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAE1D;IAEQ,MAAM,yCAiBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/user-avatar.js

@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var UserAvatar_1;
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { iconUserCircle } from "./icons.js";
@@ -24,10 +25,11 @@ let UserAvatar = class UserAvatar extends LitElement {
         this.src = null;
         /** Source string for the fallback initial (e.g. a display name or email) — first character, uppercased. */
         this.name = null;
-        /** Diameter in CSS pixels. */
+        /** Diameter in CSS pixels, or a preset name (`xs`=18, `sm`=24, `md`=32, `lg`=48). */
         this.size = 32;
         this._imgError = false;
     }
+    static { UserAvatar_1 = this; }
     static { this.styles = [
         tokens,
         css `
@@ -54,16 +56,30 @@ let UserAvatar = class UserAvatar extends LitElement {
       }
     `,
     ]; }
+    static { this.SIZE_PRESETS = {
+        xs: 18,
+        sm: 24,
+        md: 32,
+        lg: 48,
+    }; }
+    /** Resolves the `size` property (number or preset name) to a pixel diameter. */
+    resolveSize() {
+        const numeric = Number(this.size);
+        if (!Number.isNaN(numeric))
+            return numeric;
+        return UserAvatar_1.SIZE_PRESETS[String(this.size)] ?? 32;
+    }
     willUpdate(changed) {
         if (changed.has("src"))
             this._imgError = false;
     }
     render() {
-        const dim = `${this.size}px`;
+        const size = this.resolveSize();
+        const dim = `${size}px`;
         const showImage = !!this.src && !this._imgError;
         const initial = this.name?.trim()[0]?.toUpperCase();
         return html `
-      <span class="avatar" style="width:${dim};height:${dim};font-size:${this.size * 0.42}px">
+      <span class="avatar" style="width:${dim};height:${dim};font-size:${size * 0.42}px">
         ${showImage
             ? html `<img
               src=${this.src}
@@ -71,7 +87,7 @@ let UserAvatar = class UserAvatar extends LitElement {
               referrerpolicy="no-referrer"
               @error=${() => (this._imgError = true)}
             />`
-            : initial || iconUserCircle(Math.round(this.size * 0.65))}
+            : initial || iconUserCircle(Math.round(size * 0.65))}
       </span>
     `;
     }
@@ -83,12 +99,12 @@ __decorate([
     property()
 ], UserAvatar.prototype, "name", void 0);
 __decorate([
-    property({ type: Number })
+    property()
 ], UserAvatar.prototype, "size", void 0);
 __decorate([
     state()
 ], UserAvatar.prototype, "_imgError", void 0);
-UserAvatar = __decorate([
+UserAvatar = UserAvatar_1 = __decorate([
     customElement("user-avatar")
 ], UserAvatar);
 export { UserAvatar };

package/dist/user-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-avatar.js","sourceRoot":"","sources":["../src/user-avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;GAQG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QA4BL,mFAAmF;QACvE,QAAG,GAAkB,IAAI,CAAC;QACtC,2GAA2G;QAC/F,SAAI,GAAkB,IAAI,CAAC;QACvC,8BAA8B;QACF,SAAI,GAAG,EAAE,CAAC;QAErB,cAAS,GAAG,KAAK,CAAC;IAuBrC,CAAC;aAzDiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBF;KACF,AAzBqB,CAyBpB;IAWiB,UAAU,CAAC,OAA6B;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACjD,CAAC;IAEQ,MAAM;QACb,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;QAC7B,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;QAChD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC;QACpD,OAAO,IAAI,CAAA;0CAC2B,GAAG,WAAW,GAAG,cAAc,IAAI,CAAC,IAAI,GAAG,IAAI;UAC/E,SAAS;YACT,CAAC,CAAC,IAAI,CAAA;oBACI,IAAI,CAAC,GAAI;;;uBAGN,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;eACrC;YACL,CAAC,CAAC,OAAO,IAAI,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;;KAE9D,CAAC;IACJ,CAAC;CACF,CAAA;AA7Ba;IAAX,QAAQ,EAAE;uCAA2B;AAE1B;IAAX,QAAQ,EAAE;wCAA4B;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAW;AAErB;IAAhB,KAAK,EAAE;6CAA2B;AAnCxB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA0DtB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { iconUserCircle } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Circular avatar. Shows `src` when it loads successfully; falls back to the\n * first letter of `name` (uppercased) if `src` is unset or fails to load\n * (e.g. an expired OAuth profile-photo URL); falls back further to a generic\n * person icon if `name` is also unset. A broken image never leaves a blank\n * circle.\n *\n * @element user-avatar\n */\n@customElement(\"user-avatar\")\nexport class UserAvatar extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .avatar {\n        border-radius: 50%;\n        background: var(--ui-primary, #4f46e5);\n        color: #fff;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-weight: 600;\n        overflow: hidden;\n        flex: 0 0 auto;\n      }\n      img {\n        width: 100%;\n        height: 100%;\n        border-radius: 50%;\n        object-fit: cover;\n      }\n    `,\n  ];\n\n  /** Image URL to show. Falls back to initials/icon if unset or it fails to load. */\n  @property() src: string | null = null;\n  /** Source string for the fallback initial (e.g. a display name or email) — first character, uppercased. */\n  @property() name: string | null = null;\n  /** Diameter in CSS pixels. */\n  @property({ type: Number }) size = 32;\n\n  @state() private _imgError = false;\n\n  protected override willUpdate(changed: Map<string, unknown>) {\n    if (changed.has(\"src\")) this._imgError = false;\n  }\n\n  override render() {\n    const dim = `${this.size}px`;\n    const showImage = !!this.src && !this._imgError;\n    const initial = this.name?.trim()[0]?.toUpperCase();\n    return html`\n      <span class=\"avatar\" style=\"width:${dim};height:${dim};font-size:${this.size * 0.42}px\">\n        ${showImage\n          ? html`<img\n              src=${this.src!}\n              alt=\"\"\n              referrerpolicy=\"no-referrer\"\n              @error=${() => (this._imgError = true)}\n            />`\n          : initial || iconUserCircle(Math.round(this.size * 0.65))}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"user-avatar\": UserAvatar;\n  }\n}\n"]}
+{"version":3,"file":"user-avatar.js","sourceRoot":"","sources":["../src/user-avatar.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;GAQG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QA4BL,mFAAmF;QACvE,QAAG,GAAkB,IAAI,CAAC;QACtC,2GAA2G;QAC/F,SAAI,GAAkB,IAAI,CAAC;QACvC,qFAAqF;QACzE,SAAI,GAAoB,EAAE,CAAC;QAEtB,cAAS,GAAG,KAAK,CAAC;IAsCrC,CAAC;;aAxEiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBF;KACF,AAzBqB,CAyBpB;aAWsB,iBAAY,GAA2B;QAC7D,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;KACP,AALmC,CAKlC;IAEF,gFAAgF;IACxE,WAAW;QACjB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC;YAAE,OAAO,OAAO,CAAC;QAC3C,OAAO,aAAW,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;IAC1D,CAAC;IAEkB,UAAU,CAAC,OAA6B;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACjD,CAAC;IAEQ,MAAM;QACb,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAChC,MAAM,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC;QACxB,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;QAChD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC;QACpD,OAAO,IAAI,CAAA;0CAC2B,GAAG,WAAW,GAAG,cAAc,IAAI,GAAG,IAAI;UAC1E,SAAS;YACT,CAAC,CAAC,IAAI,CAAA;oBACI,IAAI,CAAC,GAAI;;;uBAGN,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;eACrC;YACL,CAAC,CAAC,OAAO,IAAI,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;;KAEzD,CAAC;IACJ,CAAC;CACF,CAAA;AA5Ca;IAAX,QAAQ,EAAE;uCAA2B;AAE1B;IAAX,QAAQ,EAAE;wCAA4B;AAE3B;IAAX,QAAQ,EAAE;wCAA4B;AAEtB;IAAhB,KAAK,EAAE;6CAA2B;AAnCxB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAyEtB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { iconUserCircle } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Circular avatar. Shows `src` when it loads successfully; falls back to the\n * first letter of `name` (uppercased) if `src` is unset or fails to load\n * (e.g. an expired OAuth profile-photo URL); falls back further to a generic\n * person icon if `name` is also unset. A broken image never leaves a blank\n * circle.\n *\n * @element user-avatar\n */\n@customElement(\"user-avatar\")\nexport class UserAvatar extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .avatar {\n        border-radius: 50%;\n        background: var(--ui-primary, #4f46e5);\n        color: #fff;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-weight: 600;\n        overflow: hidden;\n        flex: 0 0 auto;\n      }\n      img {\n        width: 100%;\n        height: 100%;\n        border-radius: 50%;\n        object-fit: cover;\n      }\n    `,\n  ];\n\n  /** Image URL to show. Falls back to initials/icon if unset or it fails to load. */\n  @property() src: string | null = null;\n  /** Source string for the fallback initial (e.g. a display name or email) — first character, uppercased. */\n  @property() name: string | null = null;\n  /** Diameter in CSS pixels, or a preset name (`xs`=18, `sm`=24, `md`=32, `lg`=48). */\n  @property() size: string | number = 32;\n\n  @state() private _imgError = false;\n\n  private static readonly SIZE_PRESETS: Record<string, number> = {\n    xs: 18,\n    sm: 24,\n    md: 32,\n    lg: 48,\n  };\n\n  /** Resolves the `size` property (number or preset name) to a pixel diameter. */\n  private resolveSize(): number {\n    const numeric = Number(this.size);\n    if (!Number.isNaN(numeric)) return numeric;\n    return UserAvatar.SIZE_PRESETS[String(this.size)] ?? 32;\n  }\n\n  protected override willUpdate(changed: Map<string, unknown>) {\n    if (changed.has(\"src\")) this._imgError = false;\n  }\n\n  override render() {\n    const size = this.resolveSize();\n    const dim = `${size}px`;\n    const showImage = !!this.src && !this._imgError;\n    const initial = this.name?.trim()[0]?.toUpperCase();\n    return html`\n      <span class=\"avatar\" style=\"width:${dim};height:${dim};font-size:${size * 0.42}px\">\n        ${showImage\n          ? html`<img\n              src=${this.src!}\n              alt=\"\"\n              referrerpolicy=\"no-referrer\"\n              @error=${() => (this._imgError = true)}\n            />`\n          : initial || iconUserCircle(Math.round(size * 0.65))}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"user-avatar\": UserAvatar;\n  }\n}\n"]}

package/dist/utils/duration.d.ts

@@ -0,0 +1,12 @@
+export type DurationFormat = "seconds" | "compact";
+/**
+ * Formats a millisecond duration for display.
+ *
+ * `"seconds"` renders a whole-second count with a pluralized unit word (e.g.
+ * "1 second", "12 seconds"). `"compact"` renders the shortest sensible
+ * `Xh Ym Zs` form, dropping leading-zero units (`"12s"`, `"3m 12s"`,
+ * `"1h 03m 12s"`) — minutes/seconds are zero-padded only once a larger unit
+ * is present.
+ */
+export declare function formatDuration(ms: number, format: DurationFormat): string;
+//# sourceMappingURL=duration.d.ts.map

package/dist/utils/duration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"duration.d.ts","sourceRoot":"","sources":["../../src/utils/duration.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAMnD;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,GAAG,MAAM,CAWzE"}

package/dist/utils/duration.js

@@ -0,0 +1,27 @@
+function pad2(n) {
+    return n < 10 ? `0${n}` : `${n}`;
+}
+/**
+ * Formats a millisecond duration for display.
+ *
+ * `"seconds"` renders a whole-second count with a pluralized unit word (e.g.
+ * "1 second", "12 seconds"). `"compact"` renders the shortest sensible
+ * `Xh Ym Zs` form, dropping leading-zero units (`"12s"`, `"3m 12s"`,
+ * `"1h 03m 12s"`) — minutes/seconds are zero-padded only once a larger unit
+ * is present.
+ */
+export function formatDuration(ms, format) {
+    const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+    if (format === "seconds") {
+        return totalSeconds === 1 ? "1 second" : `${totalSeconds} seconds`;
+    }
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    if (hours > 0)
+        return `${hours}h ${pad2(minutes)}m ${pad2(seconds)}s`;
+    if (minutes > 0)
+        return `${minutes}m ${pad2(seconds)}s`;
+    return `${seconds}s`;
+}
+//# sourceMappingURL=duration.js.map

package/dist/utils/duration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"duration.js","sourceRoot":"","sources":["../../src/utils/duration.ts"],"names":[],"mappings":"AAEA,SAAS,IAAI,CAAC,CAAS;IACrB,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;AACnC,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,cAAc,CAAC,EAAU,EAAE,MAAsB;IAC/D,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;IACxD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,OAAO,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,YAAY,UAAU,CAAC;IACrE,CAAC;IACD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,YAAY,GAAG,EAAE,CAAC;IAClC,IAAI,KAAK,GAAG,CAAC;QAAE,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;IACtE,IAAI,OAAO,GAAG,CAAC;QAAE,OAAO,GAAG,OAAO,KAAK,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;IACxD,OAAO,GAAG,OAAO,GAAG,CAAC;AACvB,CAAC","sourcesContent":["export type DurationFormat = \"seconds\" | \"compact\";\n\nfunction pad2(n: number): string {\n  return n < 10 ? `0${n}` : `${n}`;\n}\n\n/**\n * Formats a millisecond duration for display.\n *\n * `\"seconds\"` renders a whole-second count with a pluralized unit word (e.g.\n * \"1 second\", \"12 seconds\"). `\"compact\"` renders the shortest sensible\n * `Xh Ym Zs` form, dropping leading-zero units (`\"12s\"`, `\"3m 12s\"`,\n * `\"1h 03m 12s\"`) — minutes/seconds are zero-padded only once a larger unit\n * is present.\n */\nexport function formatDuration(ms: number, format: DurationFormat): string {\n  const totalSeconds = Math.max(0, Math.floor(ms / 1000));\n  if (format === \"seconds\") {\n    return totalSeconds === 1 ? \"1 second\" : `${totalSeconds} seconds`;\n  }\n  const hours = Math.floor(totalSeconds / 3600);\n  const minutes = Math.floor((totalSeconds % 3600) / 60);\n  const seconds = totalSeconds % 60;\n  if (hours > 0) return `${hours}h ${pad2(minutes)}m ${pad2(seconds)}s`;\n  if (minutes > 0) return `${minutes}m ${pad2(seconds)}s`;\n  return `${seconds}s`;\n}\n"]}

package/docs/chat-message.md

@@ -0,0 +1,59 @@
+# `<chat-message>`
+
+One conversation entry in a chat-style activity feed. Tool calls and
+"thinking" traces are variants of this component rather than separate
+ones — they share the same header, collapse behavior, and body card as a
+normal message, just dimmed and collapsible with an always-visible summary.
+
+## Install
+
+```js
+import "@f-ewald/components/chat-message.js";
+```
+
+## Usage
+
+```html
+<chat-message role="user" author="Freddy" timestamp="2026-07-19T12:00:00Z">
+  Write notes.md containing a haiku.
+</chat-message>
+<chat-message role="agent" variant="tool" collapsible collapsed summary='file_write · {"filename": "notes.md"}'>
+  directory: .
+  filename: notes.md
+</chat-message>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `role` | `role` | `ChatMessageRole` | `"agent"` | Whose message this is; drives the card background/border. |
+| `variant` | `variant` | `ChatMessageVariant` | `"normal"` | `tool`/`thinking` render dimmed and smaller, with `tool` using monospace for its body. |
+| `author` | `author` | `string` | `""` | Header label, e.g. "Freddy" or "Architect". |
+| `timestamp` | `timestamp` | `string | null` | `null` | ISO-8601 timestamp, rendered via `relative-time` in the header. |
+| `summary` | `summary` | `string` | `""` | Always-visible one-liner for `tool`/`thinking` variants (e.g. a truncated args preview). |
+| `collapsible` | `collapsible` | `boolean` | `false` | Whether clicking the header/summary toggles the body slot. |
+| `collapsed` | `collapsed` | `boolean` | `false` | Current collapse state (reflected as an attribute). |
+
+## Events
+
+| Event | Description |
+| --- | --- |
+| `toggle` | Fired with `{ collapsed: boolean }` when the header/summary is clicked in collapsible mode. |
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-border` |
+| `--ui-font` |
+| `--ui-font-size` |
+| `--ui-primary` |
+| `--ui-radius` |
+| `--ui-surface` |
+| `--ui-text` |
+| `--ui-text-muted` |

package/docs/data-table.md

@@ -0,0 +1,63 @@
+# `<data-table>`
+
+A generic, presentational table shell: renders a `<thead>` from `columns`
+and one `<tr>` per entry in `rows`, with each cell's content produced by
+`renderCell` (default: plain property lookup on the row object). Knows
+nothing about what a "row" means — callers own the data shape entirely.
+
+Optional `rowHref` makes whole rows clickable (navigating via `location.hash`),
+without hijacking clicks on nested interactive elements (links/buttons) a
+cell's rendered content might contain.
+
+## Install
+
+```js
+import "@f-ewald/components/data-table.js";
+```
+
+## Usage
+
+```html
+<data-table></data-table>
+<script type="module">
+  const table = document.querySelector("data-table");
+  table.columns = [
+    { key: "title", label: "Title" },
+    { key: "state", label: "State" },
+  ];
+  table.rows = [
+    { id: "tsk_1", title: "Write onboarding docs", state: "Backlog" },
+    { id: "tsk_2", title: "Fix the login bug", state: "Done" },
+  ];
+  table.rowHref = (row) => `#/tasks/${row.id}`;
+</script>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `columns` | _(JS property only)_ | `DataTableColumn[]` | `[]` | Column headers, in display order. |
+| `rows` | _(JS property only)_ | `unknown[]` | `[]` | Row data; opaque to this component beyond what `renderCell` does with it. |
+| `rowKey` | _(JS property only)_ | `(row: unknown, index: number) => string | number` | `—` | Stable identity for `rows[i]`, used as the repeat-directive key. Defaults to the row's index. |
+| `renderCell` | _(JS property only)_ | `(row: unknown, key: string) => unknown` | `—` | Produces a cell's rendered content for `row`/`column.key`. Default: `row[key]`. |
+| `rowHref` | _(JS property only)_ | `((row: unknown) => string | null) | null` | `null` | When set, clicking a row (outside any nested link/button) navigates to this hash. |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-border` |
+| `--ui-font` |
+| `--ui-font-size-sm` |
+| `--ui-surface-muted` |
+| `--ui-text` |
+| `--ui-text-muted` |