@f-ewald/components 0.7.0 → 1.0.2

package/dist/tokens.css

@@ -2,14 +2,21 @@
   color-scheme: light;
   --ui-primary: #4f46e5;
   --ui-primary-hover: #4338ca;
+  --ui-info: #0ea5e9;
+  --ui-info-hover: #0284c7;
   --ui-danger: #dc2626;
   --ui-danger-hover: #b91c1c;
   --ui-success: #16a34a;
+  --ui-warning: #d97706;
+  --ui-warning-hover: #b45309;
+  --ui-on-accent: #ffffff;
   --ui-text: #0f172a;
   --ui-text-muted: #64748b;
   --ui-border: #e2e8f0;
   --ui-surface: #ffffff;
   --ui-surface-muted: #f8fafc;
+  --ui-tooltip: #0f172a;
+  --ui-hover-overlay: rgb(255 255 255 / 0.32);
   --ui-overlay: rgb(15 23 42 / 0.45);
   --ui-radius: 0.5rem;
   --ui-radius-sm: 0.25rem;
@@ -17,8 +24,10 @@
   --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: 0 0 0 3px rgb(79 70 229 / 0.35);
   --ui-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   --ui-font-size: 0.875rem;
   --ui-font-size-sm: 0.75rem;
+  --ui-font-size-xs: 0.6875rem;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -26,14 +35,21 @@
     color-scheme: dark;
     --ui-primary: #6366f1;
     --ui-primary-hover: #818cf8;
+    --ui-info: #38bdf8;
+    --ui-info-hover: #7dd3fc;
     --ui-danger: #ef4444;
     --ui-danger-hover: #f87171;
     --ui-success: #22c55e;
+    --ui-warning: #f59e0b;
+    --ui-warning-hover: #fbbf24;
+    --ui-on-accent: #ffffff;
     --ui-text: #f1f5f9;
     --ui-text-muted: #94a3b8;
     --ui-border: #334155;
     --ui-surface: #0f172a;
     --ui-surface-muted: #1e293b;
+    --ui-tooltip: #020617;
+    --ui-hover-overlay: rgb(255 255 255 / 0.12);
     --ui-overlay: rgb(2 6 23 / 0.6);
     --ui-focus-ring: 0 0 0 3px rgb(99 102 241 / 0.45);
   }
@@ -43,14 +59,21 @@
   color-scheme: dark;
   --ui-primary: #6366f1;
   --ui-primary-hover: #818cf8;
+  --ui-info: #38bdf8;
+  --ui-info-hover: #7dd3fc;
   --ui-danger: #ef4444;
   --ui-danger-hover: #f87171;
   --ui-success: #22c55e;
+  --ui-warning: #f59e0b;
+  --ui-warning-hover: #fbbf24;
+  --ui-on-accent: #ffffff;
   --ui-text: #f1f5f9;
   --ui-text-muted: #94a3b8;
   --ui-border: #334155;
   --ui-surface: #0f172a;
   --ui-surface-muted: #1e293b;
+  --ui-tooltip: #020617;
+  --ui-hover-overlay: rgb(255 255 255 / 0.12);
   --ui-overlay: rgb(2 6 23 / 0.6);
   --ui-focus-ring: 0 0 0 3px rgb(99 102 241 / 0.45);
 }

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;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAalD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM,yBAAQ,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,CAsC9C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAoBlD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM,yBAAQ,CAAC"}

package/dist/tokens.js

@@ -11,14 +11,21 @@ export const tokenValues = {
     // Colors
     "--ui-primary": "#4f46e5", // indigo-600
     "--ui-primary-hover": "#4338ca", // indigo-700
+    "--ui-info": "#0ea5e9", // sky-500
+    "--ui-info-hover": "#0284c7", // sky-600
     "--ui-danger": "#dc2626", // red-600
     "--ui-danger-hover": "#b91c1c", // red-700
     "--ui-success": "#16a34a", // green-600
+    "--ui-warning": "#d97706", // amber-600
+    "--ui-warning-hover": "#b45309", // amber-700
+    "--ui-on-accent": "#ffffff",
     "--ui-text": "#0f172a", // slate-900
     "--ui-text-muted": "#64748b", // slate-500
     "--ui-border": "#e2e8f0", // slate-200
     "--ui-surface": "#ffffff", // white
     "--ui-surface-muted": "#f8fafc", // slate-50
+    "--ui-tooltip": "#0f172a", // slate-900
+    "--ui-hover-overlay": "rgb(255 255 255 / 0.32)",
     "--ui-overlay": "rgb(15 23 42 / 0.45)", // slate-900 / 45%
     // Shape / depth
     "--ui-radius": "0.5rem", // rounded-lg
@@ -28,8 +35,10 @@ export const tokenValues = {
     "--ui-focus-ring": "0 0 0 3px rgb(79 70 229 / 0.35)",
     // Type
     "--ui-font": 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    "--ui-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
     "--ui-font-size": "0.875rem",
     "--ui-font-size-sm": "0.75rem",
+    "--ui-font-size-xs": "0.6875rem",
 };
 /**
  * Dark-mode overrides for the same `--ui-*` custom properties, applied by
@@ -42,14 +51,21 @@ export const tokenValues = {
 export const darkTokenValues = {
     "--ui-primary": "#6366f1", // indigo-500
     "--ui-primary-hover": "#818cf8", // indigo-400
+    "--ui-info": "#38bdf8", // sky-400
+    "--ui-info-hover": "#7dd3fc", // sky-300
     "--ui-danger": "#ef4444", // red-500
     "--ui-danger-hover": "#f87171", // red-400
     "--ui-success": "#22c55e", // green-500
+    "--ui-warning": "#f59e0b", // amber-500
+    "--ui-warning-hover": "#fbbf24", // amber-400
+    "--ui-on-accent": "#ffffff",
     "--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-tooltip": "#020617", // slate-950
+    "--ui-hover-overlay": "rgb(255 255 255 / 0.12)",
     "--ui-overlay": "rgb(2 6 23 / 0.6)", // slate-950 / 60%
     "--ui-focus-ring": "0 0 0 3px rgb(99 102 241 / 0.45)",
 };

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;;;;;;;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"]}
+{"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,WAAW,EAAE,SAAS,EAAE,UAAU;IAClC,iBAAiB,EAAE,SAAS,EAAE,UAAU;IACxC,aAAa,EAAE,SAAS,EAAE,UAAU;IACpC,mBAAmB,EAAE,SAAS,EAAE,UAAU;IAC1C,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,oBAAoB,EAAE,SAAS,EAAE,YAAY;IAC7C,gBAAgB,EAAE,SAAS;IAC3B,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,SAAS,EAAE,YAAY;IACvC,oBAAoB,EAAE,yBAAyB;IAC/C,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,EACd,kEAAkE;IACpE,gBAAgB,EAAE,UAAU;IAC5B,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,WAAW;CACjC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAA2B;IACrD,cAAc,EAAE,SAAS,EAAE,aAAa;IACxC,oBAAoB,EAAE,SAAS,EAAE,aAAa;IAC9C,WAAW,EAAE,SAAS,EAAE,UAAU;IAClC,iBAAiB,EAAE,SAAS,EAAE,UAAU;IACxC,aAAa,EAAE,SAAS,EAAE,UAAU;IACpC,mBAAmB,EAAE,SAAS,EAAE,UAAU;IAC1C,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,cAAc,EAAE,SAAS,EAAE,YAAY;IACvC,oBAAoB,EAAE,SAAS,EAAE,YAAY;IAC7C,gBAAgB,EAAE,SAAS;IAC3B,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,SAAS,EAAE,YAAY;IACvC,oBAAoB,EAAE,yBAAyB;IAC/C,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-info\": \"#0ea5e9\", // sky-500\n  \"--ui-info-hover\": \"#0284c7\", // sky-600\n  \"--ui-danger\": \"#dc2626\", // red-600\n  \"--ui-danger-hover\": \"#b91c1c\", // red-700\n  \"--ui-success\": \"#16a34a\", // green-600\n  \"--ui-warning\": \"#d97706\", // amber-600\n  \"--ui-warning-hover\": \"#b45309\", // amber-700\n  \"--ui-on-accent\": \"#ffffff\",\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-tooltip\": \"#0f172a\", // slate-900\n  \"--ui-hover-overlay\": \"rgb(255 255 255 / 0.32)\",\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-mono\":\n    \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\",\n  \"--ui-font-size\": \"0.875rem\",\n  \"--ui-font-size-sm\": \"0.75rem\",\n  \"--ui-font-size-xs\": \"0.6875rem\",\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-info\": \"#38bdf8\", // sky-400\n  \"--ui-info-hover\": \"#7dd3fc\", // sky-300\n  \"--ui-danger\": \"#ef4444\", // red-500\n  \"--ui-danger-hover\": \"#f87171\", // red-400\n  \"--ui-success\": \"#22c55e\", // green-500\n  \"--ui-warning\": \"#f59e0b\", // amber-500\n  \"--ui-warning-hover\": \"#fbbf24\", // amber-400\n  \"--ui-on-accent\": \"#ffffff\",\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-tooltip\": \"#020617\", // slate-950\n  \"--ui-hover-overlay\": \"rgb(255 255 255 / 0.12)\",\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/ui-button.d.ts

@@ -34,6 +34,8 @@ export declare class UiButton extends LitElement {
     busy: boolean;
     /** Drives submit/reset on the ancestor form via ElementInternals, since a shadow-DOM button can't do it natively. */
     private _onClick;
+    /** Suppresses navigation while a link-styled button is disabled or busy. */
+    private _onLinkClick;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/ui-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-button.d.ts","sourceRoot":"","sources":["../src/ui-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE/D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,QAAS,SAAQ,UAAU;;IACtC,MAAM,CAAC,cAAc,UAAQ;IAG7B,OAAgB,MAAM,4BA6DpB;IAEF,qBAAqB;IACT,OAAO,EAAE,aAAa,CAAa;IAC/C,oEAAoE;IACxD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IACvC,wDAAwD;IAC5C,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC3D,wCAAwC;IACX,QAAQ,UAAS;IAC9C,0EAA0E;IAC7C,IAAI,UAAS;IAE1C,qHAAqH;IACrH,OAAO,CAAC,QAAQ;IAKP,MAAM,yCAmBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"ui-button.d.ts","sourceRoot":"","sources":["../src/ui-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE/D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,QAAS,SAAQ,UAAU;;IACtC,MAAM,CAAC,cAAc,UAAQ;IAG7B,OAAgB,MAAM,4BA4FpB;IAEF,qBAAqB;IACT,OAAO,EAAE,aAAa,CAAa;IAC/C,oEAAoE;IACxD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IACvC,wDAAwD;IAC5C,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC3D,wCAAwC;IACX,QAAQ,UAAS;IAC9C,0EAA0E;IAC7C,IAAI,UAAS;IAE1C,qHAAqH;IACrH,OAAO,CAAC,QAAQ;IAKhB,4EAA4E;IAC5E,OAAO,CAAC,YAAY;IAKX,MAAM,yCA+Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/ui-button.js

@@ -52,12 +52,21 @@ let UiButton = class UiButton extends LitElement {
       .btn {
         display: inline-flex;
         align-items: center;
-        gap: 0.35rem;
+        gap: 0.25rem;
         border-radius: var(--ui-radius-sm, 0.25rem);
-        padding: 0.5rem 0.9rem;
+        padding: 0.5rem 1rem;
         font-size: var(--ui-font-size-sm, 0.75rem);
         font-weight: 500;
-        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
         cursor: pointer;
         border: 1px solid transparent;
         text-decoration: none;
@@ -65,7 +74,7 @@ let UiButton = class UiButton extends LitElement {
       }
       .btn.primary {
         background: var(--ui-primary, #4f46e5);
-        color: #fff;
+        color: var(--ui-on-accent, #ffffff);
       }
       .btn.primary:hover:not(:disabled) {
         background: var(--ui-primary-hover, #4338ca);
@@ -80,7 +89,7 @@ let UiButton = class UiButton extends LitElement {
       }
       .btn.danger {
         background: var(--ui-danger, #dc2626);
-        color: #fff;
+        color: var(--ui-on-accent, #ffffff);
       }
       .btn.danger:hover:not(:disabled) {
         background: var(--ui-danger-hover, #b91c1c);
@@ -91,6 +100,10 @@ let UiButton = class UiButton extends LitElement {
         cursor: default;
         pointer-events: none;
       }
+      .btn:focus-visible {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
       .spin {
         display: inline-flex;
         animation: spin 0.8s linear infinite;
@@ -103,6 +116,24 @@ let UiButton = class UiButton extends LitElement {
           transform: rotate(360deg);
         }
       }
+      @media (prefers-reduced-motion: reduce) {
+        .spin {
+          animation: none;
+        }
+      }
+      @media (forced-colors: active) {
+        .btn:focus-visible {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+        .btn:disabled,
+        .btn[aria-disabled="true"] {
+          color: GrayText;
+          border-color: GrayText;
+          opacity: 1;
+        }
+      }
     `,
     ]; }
     /** Drives submit/reset on the ancestor form via ElementInternals, since a shadow-DOM button can't do it natively. */
@@ -112,21 +143,39 @@ let UiButton = class UiButton extends LitElement {
         else if (this.type === "reset")
             this.#internals.form?.reset();
     }
+    /** Suppresses navigation while a link-styled button is disabled or busy. */
+    _onLinkClick(e) {
+        if (!this.disabled && !this.busy)
+            return;
+        e.preventDefault();
+    }
     render() {
         const classes = `btn ${this.variant}`;
         const isDisabled = this.disabled || this.busy;
         if (this.href) {
             return html `
-        <a class=${classes} href=${this.href} aria-disabled=${isDisabled ? "true" : "false"}>
-          <span class="spin" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>
+        <a
+          class=${classes}
+          href=${this.href}
+          aria-disabled=${isDisabled ? "true" : "false"}
+          aria-busy=${this.busy ? "true" : "false"}
+          @click=${this._onLinkClick}
+        >
+          <span class="spin" aria-hidden="true" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>
           <slot name="icon" ?hidden=${this.busy}></slot>
           <slot></slot>
         </a>
       `;
         }
         return html `
-      <button class=${classes} type="button" ?disabled=${isDisabled} @click=${this._onClick}>
-        <span class="spin" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>
+      <button
+        class=${classes}
+        type="button"
+        ?disabled=${isDisabled}
+        aria-busy=${this.busy ? "true" : "false"}
+        @click=${this._onClick}
+      >
+        <span class="spin" aria-hidden="true" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>
         <slot name="icon" ?hidden=${this.busy}></slot>
         <slot></slot>
       </button>

package/dist/ui-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-button.js","sourceRoot":"","sources":["../src/ui-button.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,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC;;;;;;;;;;;;;;;;;GAiBG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,eAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAgEpC,qBAAqB;QACT,YAAO,GAAkB,SAAS,CAAC;QAC/C,oEAAoE;QACxD,SAAI,GAAkB,IAAI,CAAC;QACvC,wDAAwD;QAC5C,SAAI,GAAkC,QAAQ,CAAC;QAC3D,wCAAwC;QACX,aAAQ,GAAG,KAAK,CAAC;QAC9C,0EAA0E;QAC7C,SAAI,GAAG,KAAK,CAAC;IA4B5C,CAAC;aAvGQ,mBAAc,GAAG,IAAI,AAAP,CAAQ;IAE7B,UAAU,CAA0B;aACpB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0DF;KACF,AA7DqB,CA6DpB;IAaF,qHAAqH;IAC7G,QAAQ;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC;aAC7D,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IAChE,CAAC;IAEQ,MAAM;QACb,MAAM,OAAO,GAAG,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;QACtC,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC;QAC9C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,IAAI,CAAA;mBACE,OAAO,SAAS,IAAI,CAAC,IAAI,kBAAkB,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;uCACpD,CAAC,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,EAAE,CAAC;sCAChC,IAAI,CAAC,IAAI;;;OAGxC,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAA;sBACO,OAAO,4BAA4B,UAAU,WAAW,IAAI,CAAC,QAAQ;qCACtD,CAAC,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,EAAE,CAAC;oCAChC,IAAI,CAAC,IAAI;;;KAGxC,CAAC;IACJ,CAAC;CACF,CAAA;AApCa;IAAX,QAAQ,EAAE;yCAAoC;AAEnC;IAAX,QAAQ,EAAE;sCAA4B;AAE3B;IAAX,QAAQ,EAAE;sCAAgD;AAE9B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCAAc;AA5E/B,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAwGpB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconArrowPath } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"danger\";\n\n/**\n * Button (or link styled as one) with an optional leading icon, in three\n * visual weights. Set `href` to render an `<a>` instead of a `<button>` —\n * same styling either way — for cross-page navigation that should look like\n * an action button; a disabled/busy link stays a real `<a>` with\n * `aria-disabled` + `pointer-events: none` rather than losing its href.\n * Put the icon in the `icon` slot and the label in the default slot.\n *\n * Form-associated (`type=\"submit\"`/`\"reset\"`): the actual `<button>` lives in\n * this element's shadow root, which native HTML form association does not\n * cross into from an ancestor light-DOM `<form>`. `type=\"submit\"`/`\"reset\"`\n * is instead wired through `ElementInternals.form` — the same mechanism\n * `address-autocomplete` uses to associate with an ancestor form.\n *\n * @element ui-button\n * @slot icon - Optional leading icon (e.g. an inline SVG).\n * @slot - Button label.\n */\n@customElement(\"ui-button\")\nexport class UiButton extends LitElement {\n  static formAssociated = true;\n\n  #internals = this.attachInternals();\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.35rem;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 0.9rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 500;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        cursor: pointer;\n        border: 1px solid transparent;\n        text-decoration: none;\n        box-sizing: border-box;\n      }\n      .btn.primary {\n        background: var(--ui-primary, #4f46e5);\n        color: #fff;\n      }\n      .btn.primary:hover:not(:disabled) {\n        background: var(--ui-primary-hover, #4338ca);\n      }\n      .btn.secondary {\n        background: none;\n        border-color: var(--ui-border, #e2e8f0);\n        color: var(--ui-text, #0f172a);\n      }\n      .btn.secondary:hover:not(:disabled) {\n        border-color: var(--ui-text-muted, #64748b);\n      }\n      .btn.danger {\n        background: var(--ui-danger, #dc2626);\n        color: #fff;\n      }\n      .btn.danger:hover:not(:disabled) {\n        background: var(--ui-danger-hover, #b91c1c);\n      }\n      .btn:disabled,\n      .btn[aria-disabled=\"true\"] {\n        opacity: 0.6;\n        cursor: default;\n        pointer-events: none;\n      }\n      .spin {\n        display: inline-flex;\n        animation: spin 0.8s linear infinite;\n      }\n      .spin[hidden] {\n        display: none;\n      }\n      @keyframes spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n    `,\n  ];\n\n  /** Visual weight. */\n  @property() variant: ButtonVariant = \"primary\";\n  /** Renders an `<a href=\"...\">` instead of a `<button>` when set. */\n  @property() href: string | null = null;\n  /** Native button `type`. Ignored when `href` is set. */\n  @property() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /** Disables the control and dims it. */\n  @property({ type: Boolean }) disabled = false;\n  /** Shows a spinner in place of the icon slot and disables the control. */\n  @property({ type: Boolean }) busy = false;\n\n  /** Drives submit/reset on the ancestor form via ElementInternals, since a shadow-DOM button can't do it natively. */\n  private _onClick() {\n    if (this.type === \"submit\") this.#internals.form?.requestSubmit();\n    else if (this.type === \"reset\") this.#internals.form?.reset();\n  }\n\n  override render() {\n    const classes = `btn ${this.variant}`;\n    const isDisabled = this.disabled || this.busy;\n    if (this.href) {\n      return html`\n        <a class=${classes} href=${this.href} aria-disabled=${isDisabled ? \"true\" : \"false\"}>\n          <span class=\"spin\" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>\n          <slot name=\"icon\" ?hidden=${this.busy}></slot>\n          <slot></slot>\n        </a>\n      `;\n    }\n    return html`\n      <button class=${classes} type=\"button\" ?disabled=${isDisabled} @click=${this._onClick}>\n        <span class=\"spin\" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>\n        <slot name=\"icon\" ?hidden=${this.busy}></slot>\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ui-button\": UiButton;\n  }\n}\n"]}
+{"version":3,"file":"ui-button.js","sourceRoot":"","sources":["../src/ui-button.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,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC;;;;;;;;;;;;;;;;;GAiBG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,eAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QA+FpC,qBAAqB;QACT,YAAO,GAAkB,SAAS,CAAC;QAC/C,oEAAoE;QACxD,SAAI,GAAkB,IAAI,CAAC;QACvC,wDAAwD;QAC5C,SAAI,GAAkC,QAAQ,CAAC;QAC3D,wCAAwC;QACX,aAAQ,GAAG,KAAK,CAAC;QAC9C,0EAA0E;QAC7C,SAAI,GAAG,KAAK,CAAC;IA8C5C,CAAC;aAxJQ,mBAAc,GAAG,IAAI,AAAP,CAAQ;IAE7B,UAAU,CAA0B;aACpB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyFF;KACF,AA5FqB,CA4FpB;IAaF,qHAAqH;IAC7G,QAAQ;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC;aAC7D,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IAChE,CAAC;IAED,4EAA4E;IACpE,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO;QACzC,CAAC,CAAC,cAAc,EAAE,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,MAAM,OAAO,GAAG,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;QACtC,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC;QAC9C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,IAAI,CAAA;;kBAEC,OAAO;iBACR,IAAI,CAAC,IAAI;0BACA,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;sBACjC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBAC/B,IAAI,CAAC,YAAY;;0DAEsB,CAAC,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,EAAE,CAAC;sCACnD,IAAI,CAAC,IAAI;;;OAGxC,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAA;;gBAEC,OAAO;;oBAEH,UAAU;oBACV,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;iBAC/B,IAAI,CAAC,QAAQ;;wDAE0B,CAAC,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,EAAE,CAAC;oCACnD,IAAI,CAAC,IAAI;;;KAGxC,CAAC;IACJ,CAAC;CACF,CAAA;AAtDa;IAAX,QAAQ,EAAE;yCAAoC;AAEnC;IAAX,QAAQ,EAAE;sCAA4B;AAE3B;IAAX,QAAQ,EAAE;sCAAgD;AAE9B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCAAc;AA3G/B,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAyJpB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { iconArrowPath } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"danger\";\n\n/**\n * Button (or link styled as one) with an optional leading icon, in three\n * visual weights. Set `href` to render an `<a>` instead of a `<button>` —\n * same styling either way — for cross-page navigation that should look like\n * an action button; a disabled/busy link stays a real `<a>` with\n * `aria-disabled` + `pointer-events: none` rather than losing its href.\n * Put the icon in the `icon` slot and the label in the default slot.\n *\n * Form-associated (`type=\"submit\"`/`\"reset\"`): the actual `<button>` lives in\n * this element's shadow root, which native HTML form association does not\n * cross into from an ancestor light-DOM `<form>`. `type=\"submit\"`/`\"reset\"`\n * is instead wired through `ElementInternals.form` — the same mechanism\n * `address-autocomplete` uses to associate with an ancestor form.\n *\n * @element ui-button\n * @slot icon - Optional leading icon (e.g. an inline SVG).\n * @slot - Button label.\n */\n@customElement(\"ui-button\")\nexport class UiButton extends LitElement {\n  static formAssociated = true;\n\n  #internals = this.attachInternals();\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n      }\n      .btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.25rem;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 1rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 500;\n        font-family: 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        cursor: pointer;\n        border: 1px solid transparent;\n        text-decoration: none;\n        box-sizing: border-box;\n      }\n      .btn.primary {\n        background: var(--ui-primary, #4f46e5);\n        color: var(--ui-on-accent, #ffffff);\n      }\n      .btn.primary:hover:not(:disabled) {\n        background: var(--ui-primary-hover, #4338ca);\n      }\n      .btn.secondary {\n        background: none;\n        border-color: var(--ui-border, #e2e8f0);\n        color: var(--ui-text, #0f172a);\n      }\n      .btn.secondary:hover:not(:disabled) {\n        border-color: var(--ui-text-muted, #64748b);\n      }\n      .btn.danger {\n        background: var(--ui-danger, #dc2626);\n        color: var(--ui-on-accent, #ffffff);\n      }\n      .btn.danger:hover:not(:disabled) {\n        background: var(--ui-danger-hover, #b91c1c);\n      }\n      .btn:disabled,\n      .btn[aria-disabled=\"true\"] {\n        opacity: 0.6;\n        cursor: default;\n        pointer-events: none;\n      }\n      .btn:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .spin {\n        display: inline-flex;\n        animation: spin 0.8s linear infinite;\n      }\n      .spin[hidden] {\n        display: none;\n      }\n      @keyframes spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .spin {\n          animation: none;\n        }\n      }\n      @media (forced-colors: active) {\n        .btn:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n        .btn:disabled,\n        .btn[aria-disabled=\"true\"] {\n          color: GrayText;\n          border-color: GrayText;\n          opacity: 1;\n        }\n      }\n    `,\n  ];\n\n  /** Visual weight. */\n  @property() variant: ButtonVariant = \"primary\";\n  /** Renders an `<a href=\"...\">` instead of a `<button>` when set. */\n  @property() href: string | null = null;\n  /** Native button `type`. Ignored when `href` is set. */\n  @property() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /** Disables the control and dims it. */\n  @property({ type: Boolean }) disabled = false;\n  /** Shows a spinner in place of the icon slot and disables the control. */\n  @property({ type: Boolean }) busy = false;\n\n  /** Drives submit/reset on the ancestor form via ElementInternals, since a shadow-DOM button can't do it natively. */\n  private _onClick() {\n    if (this.type === \"submit\") this.#internals.form?.requestSubmit();\n    else if (this.type === \"reset\") this.#internals.form?.reset();\n  }\n\n  /** Suppresses navigation while a link-styled button is disabled or busy. */\n  private _onLinkClick(e: MouseEvent) {\n    if (!this.disabled && !this.busy) return;\n    e.preventDefault();\n  }\n\n  override render() {\n    const classes = `btn ${this.variant}`;\n    const isDisabled = this.disabled || this.busy;\n    if (this.href) {\n      return html`\n        <a\n          class=${classes}\n          href=${this.href}\n          aria-disabled=${isDisabled ? \"true\" : \"false\"}\n          aria-busy=${this.busy ? \"true\" : \"false\"}\n          @click=${this._onLinkClick}\n        >\n          <span class=\"spin\" aria-hidden=\"true\" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>\n          <slot name=\"icon\" ?hidden=${this.busy}></slot>\n          <slot></slot>\n        </a>\n      `;\n    }\n    return html`\n      <button\n        class=${classes}\n        type=\"button\"\n        ?disabled=${isDisabled}\n        aria-busy=${this.busy ? \"true\" : \"false\"}\n        @click=${this._onClick}\n      >\n        <span class=\"spin\" aria-hidden=\"true\" ?hidden=${!this.busy}>${iconArrowPath(14)}</span>\n        <slot name=\"icon\" ?hidden=${this.busy}></slot>\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ui-button\": UiButton;\n  }\n}\n"]}

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,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"}
+{"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,4BAwCpB;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

@@ -38,12 +38,27 @@ let UserAvatar = class UserAvatar extends LitElement {
       }
       .avatar {
         border-radius: 50%;
-        background: var(--ui-primary, #4f46e5);
-        color: #fff;
+        /* Match map-circle's 30% white/black vertical depth without tinting images. */
+        background: linear-gradient(
+          to bottom,
+          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #ffffff) 0%,
+          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #000000) 100%
+        );
+        color: var(--ui-on-accent, #ffffff);
+        text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
         display: flex;
         align-items: center;
         justify-content: center;
-        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
         font-weight: 600;
         overflow: hidden;
         flex: 0 0 auto;

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,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"]}
+{"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;;QA2CL,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;;aAvFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCF;KACF,AAxCqB,CAwCpB;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;AAlDxB,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAwFtB","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        /* Match map-circle's 30% white/black vertical depth without tinting images. */\n        background: linear-gradient(\n          to bottom,\n          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #ffffff) 0%,\n          color-mix(in srgb, var(--ui-primary, #4f46e5) 70%, #000000) 100%\n        );\n        color: var(--ui-on-accent, #ffffff);\n        text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-family: 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        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/calendar.d.ts

@@ -0,0 +1,77 @@
+import type { StatusPillColor } from "../status-pill.js";
+import type { CalendarEntry } from "../calendar-entry.js";
+/** Plain data extracted from a `calendar-entry` element's properties. */
+export interface CalendarEntryData {
+    start: string;
+    end: string;
+    label: string;
+    details?: string[];
+    footer?: string;
+    color: StatusPillColor;
+    href?: string;
+}
+/** A `CalendarEntryData` with its date strings resolved to local `Date`s. */
+export interface ResolvedCalendarEntry extends CalendarEntryData {
+    startDate: Date;
+    endDate: Date;
+}
+/** A `ResolvedCalendarEntry` assigned a stacking column by `assignLanes`. */
+export interface LanedEntry extends ResolvedCalendarEntry {
+    lane: number;
+}
+/** Attributes whose mutations can change a rendered calendar entry. */
+export declare const CALENDAR_ENTRY_ATTRIBUTES: string[];
+/** Number of days in `month` (1-12) of `year`, leap years included. */
+export declare function daysInMonth(year: number, month: number): number;
+/**
+ * Parses `"YYYY-MM-DD"` as a local-midnight `Date`. Returns `null` for
+ * anything that doesn't match or doesn't round-trip (e.g. "2026-02-30") —
+ * deliberately never uses `new Date(iso)`/`.toISOString()`, both of which
+ * are UTC-based and would silently shift the date in negative-UTC-offset
+ * timezones.
+ */
+export declare function parseIsoDate(iso: string): Date | null;
+/** Formats a `Date`'s local year/month/day as `"YYYY-MM-DD"`. */
+export declare function toIsoDate(date: Date): string;
+/** Locale-aware full month name for `month` (1-12). */
+export declare function monthName(month: number): string;
+/** Sunday-first weekday abbreviations, indexed by `Date.getDay()` (0 = Sunday). */
+export declare const WEEKDAY_ABBR: readonly string[];
+/**
+ * Whether `date` falls on a Saturday or Sunday, per JS's `Date.getDay()`
+ * convention (Sunday = 0 .. Saturday = 6) — note this differs from Python's
+ * `calendar` module (Monday = 0), which the original reference
+ * implementation this component's layout is based on used.
+ */
+export declare function isWeekend(date: Date): boolean;
+/** Reads a `calendar-entry` element's properties and named text slots into plain data. */
+export declare function readCalendarEntryElement(el: CalendarEntry): CalendarEntryData;
+/**
+ * Resolves a `CalendarEntryData`'s date strings to `Date`s. Returns `null`
+ * when `start` is missing or unparseable — such entries are dropped
+ * silently rather than thrown, since this reads declarative markup a
+ * consumer authored, not validated user input. A blank `end` defaults to
+ * `start` (single-day entry); an `end` before `start` is clamped up to
+ * `start` rather than treated as an error.
+ */
+export declare function resolveEntry(data: CalendarEntryData): ResolvedCalendarEntry | null;
+/** Whether `entry`'s inclusive date range intersects the inclusive `[rangeStart, rangeEnd]` range. */
+export declare function overlapsRange(entry: ResolvedCalendarEntry, rangeStart: Date, rangeEnd: Date): boolean;
+/**
+ * Assigns each entry a 0-based stacking lane via greedy interval
+ * partitioning ("meeting rooms II"): entries are sorted by start date, then
+ * each is placed in the lowest-numbered lane whose current occupant ends
+ * strictly before the entry starts. Because entry ranges are
+ * inclusive-inclusive, an entry ending on day X and one starting on day X
+ * both occupy day X and must not share a lane — hence the strict `<`.
+ *
+ * Lane assignment is meant to be computed independently per `calendar-month`
+ * (from only the entries overlapping that month); an entry spanning a month
+ * boundary may therefore land in a different lane in adjacent months. This
+ * is an accepted v1 limitation, not a bug.
+ */
+export declare function assignLanes(entries: ResolvedCalendarEntry[]): {
+    entries: LanedEntry[];
+    laneCount: number;
+};
+//# sourceMappingURL=calendar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../src/utils/calendar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,yEAAyE;AACzE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,eAAe,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,6EAA6E;AAC7E,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAC9D,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;CACf;AAED,6EAA6E;AAC7E,MAAM,WAAW,UAAW,SAAQ,qBAAqB;IACvD,IAAI,EAAE,MAAM,CAAC;CACd;AAID,uEAAuE;AACvE,eAAO,MAAM,yBAAyB,UAAqD,CAAC;AAE5F,uEAAuE;AACvE,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAE/D;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAYrD;AAED,iEAAiE;AACjE,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAK5C;AAID,uDAAuD;AACvD,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE/C;AAED,mFAAmF;AACnF,eAAO,MAAM,YAAY,EAAE,SAAS,MAAM,EAAsD,CAAC;AAEjG;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAG7C;AAQD,0FAA0F;AAC1F,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,aAAa,GAAG,iBAAiB,CAY7E;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,iBAAiB,GAAG,qBAAqB,GAAG,IAAI,CAWlF;AAED,sGAAsG;AACtG,wBAAgB,aAAa,CAAC,KAAK,EAAE,qBAAqB,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,GAAG,OAAO,CAErG;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,qBAAqB,EAAE,GAAG;IAC7D,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB,CAyBA"}

package/dist/utils/calendar.js

@@ -0,0 +1,135 @@
+const ISO_DATE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
+/** Attributes whose mutations can change a rendered calendar entry. */
+export const CALENDAR_ENTRY_ATTRIBUTES = ["start", "end", "label", "color", "href", "slot"];
+/** Number of days in `month` (1-12) of `year`, leap years included. */
+export function daysInMonth(year, month) {
+    return new Date(year, month, 0).getDate();
+}
+/**
+ * Parses `"YYYY-MM-DD"` as a local-midnight `Date`. Returns `null` for
+ * anything that doesn't match or doesn't round-trip (e.g. "2026-02-30") —
+ * deliberately never uses `new Date(iso)`/`.toISOString()`, both of which
+ * are UTC-based and would silently shift the date in negative-UTC-offset
+ * timezones.
+ */
+export function parseIsoDate(iso) {
+    const match = ISO_DATE_PATTERN.exec(iso);
+    if (!match)
+        return null;
+    const year = Number(match[1]);
+    const month = Number(match[2]);
+    const day = Number(match[3]);
+    const date = new Date(year, month - 1, day);
+    if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+        return null;
+    }
+    return date;
+}
+/** Formats a `Date`'s local year/month/day as `"YYYY-MM-DD"`. */
+export function toIsoDate(date) {
+    const year = String(date.getFullYear()).padStart(4, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+}
+const monthNameFormatter = new Intl.DateTimeFormat(undefined, { month: "long" });
+/** Locale-aware full month name for `month` (1-12). */
+export function monthName(month) {
+    return monthNameFormatter.format(new Date(2000, month - 1, 1));
+}
+/** Sunday-first weekday abbreviations, indexed by `Date.getDay()` (0 = Sunday). */
+export const WEEKDAY_ABBR = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+/**
+ * Whether `date` falls on a Saturday or Sunday, per JS's `Date.getDay()`
+ * convention (Sunday = 0 .. Saturday = 6) — note this differs from Python's
+ * `calendar` module (Monday = 0), which the original reference
+ * implementation this component's layout is based on used.
+ */
+export function isWeekend(date) {
+    const day = date.getDay();
+    return day === 0 || day === 6;
+}
+/** Reads normalized plain-text content from direct children assigned to a named slot. */
+function slottedText(el, slotName) {
+    return Array.from(el.querySelectorAll(`:scope > [slot="${slotName}"]`))
+        .map((node) => (node.textContent ?? "").replace(/\s+/g, " ").trim());
+}
+/** Reads a `calendar-entry` element's properties and named text slots into plain data. */
+export function readCalendarEntryElement(el) {
+    const title = slottedText(el, "title").find((line) => line.length > 0);
+    const footer = slottedText(el, "footer").find((line) => line.length > 0);
+    return {
+        start: el.start,
+        end: el.end,
+        label: title ?? el.label,
+        details: slottedText(el, "detail"),
+        footer,
+        color: el.color,
+        href: el.href,
+    };
+}
+/**
+ * Resolves a `CalendarEntryData`'s date strings to `Date`s. Returns `null`
+ * when `start` is missing or unparseable — such entries are dropped
+ * silently rather than thrown, since this reads declarative markup a
+ * consumer authored, not validated user input. A blank `end` defaults to
+ * `start` (single-day entry); an `end` before `start` is clamped up to
+ * `start` rather than treated as an error.
+ */
+export function resolveEntry(data) {
+    const startDate = parseIsoDate(data.start);
+    if (!startDate)
+        return null;
+    const endDate = parseIsoDate(data.end) ?? startDate;
+    return {
+        ...data,
+        details: data.details ?? [],
+        startDate,
+        endDate: endDate < startDate ? startDate : endDate,
+    };
+}
+/** Whether `entry`'s inclusive date range intersects the inclusive `[rangeStart, rangeEnd]` range. */
+export function overlapsRange(entry, rangeStart, rangeEnd) {
+    return entry.startDate <= rangeEnd && entry.endDate >= rangeStart;
+}
+/**
+ * Assigns each entry a 0-based stacking lane via greedy interval
+ * partitioning ("meeting rooms II"): entries are sorted by start date, then
+ * each is placed in the lowest-numbered lane whose current occupant ends
+ * strictly before the entry starts. Because entry ranges are
+ * inclusive-inclusive, an entry ending on day X and one starting on day X
+ * both occupy day X and must not share a lane — hence the strict `<`.
+ *
+ * Lane assignment is meant to be computed independently per `calendar-month`
+ * (from only the entries overlapping that month); an entry spanning a month
+ * boundary may therefore land in a different lane in adjacent months. This
+ * is an accepted v1 limitation, not a bug.
+ */
+export function assignLanes(entries) {
+    const sorted = entries
+        .map((entry, index) => ({ entry, index }))
+        .sort((a, b) => {
+        const startDiff = a.entry.startDate.getTime() - b.entry.startDate.getTime();
+        if (startDiff !== 0)
+            return startDiff;
+        const endDiff = a.entry.endDate.getTime() - b.entry.endDate.getTime();
+        if (endDiff !== 0)
+            return endDiff;
+        return a.index - b.index;
+    });
+    const laneEnds = [];
+    const laned = [];
+    for (const { entry } of sorted) {
+        let lane = laneEnds.findIndex((end) => end < entry.startDate);
+        if (lane === -1) {
+            lane = laneEnds.length;
+            laneEnds.push(entry.endDate);
+        }
+        else {
+            laneEnds[lane] = entry.endDate;
+        }
+        laned.push({ ...entry, lane });
+    }
+    return { entries: laned, laneCount: laneEnds.length };
+}
+//# sourceMappingURL=calendar.js.map