@adia-ai/web-components 0.0.19 → 0.0.21

package/components/tooltip/tooltip.css

@@ -1,8 +1,14 @@
 @scope (tooltip-ui) {
+  :where(:scope) {
+    /* Host (anchor) tokens. The popover itself escapes to top-layer and
+       cannot inherit these — top-layer rules below reference --a-*
+       directly per documented exception. */
+    --tooltip-host-display: inline-flex;
+  }
   :scope {
     /* ── Base ── */
     box-sizing: border-box;
-    display: inline-flex;
+    display: var(--tooltip-host-display);
     position: relative;
   }
 }
@@ -94,7 +100,7 @@
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: var(--a-space-1) var(--a-space-2);
-  padding: 1px 0;
+  padding: var(--a-space-px) 0;
 }
 
 /* Multi-series mode: the row the pointer is actually over gets a

package/components/tooltip/tooltip.js

@@ -26,9 +26,9 @@ class AdiaTooltip extends AdiaElement {
     text:      { type: String,  default: '',         reflect: true },
     placement: { type: String,  default: 'top',      reflect: true },
     delay:     { type: Number,  default: 400,        reflect: true },
-    follows:   { type: String,  default: 'trigger',  reflect: true },  // trigger | pointer
+    follows:   { type: String,  default: 'trigger',  reflect: true },
     for:       { type: String,  default: '',         reflect: true },
-    indicator: { type: String,  default: 'none',     reflect: true },  // none | dot | line | dashed
+    indicator: { type: String,  default: 'none',     reflect: true },
   };
 
   static template = () => null;
@@ -39,8 +39,6 @@ class AdiaTooltip extends AdiaElement {
 
   /* Pointer-follow mode state */
   #target = null;
-  #hoverHandler = null;
-  #leaveHandler = null;
   #lastDetail = null;
 
   connected() {
@@ -138,21 +136,21 @@ class AdiaTooltip extends AdiaElement {
       return;
     }
 
-    this.#hoverHandler = (e) => this.#onChartHover(e);
-    this.#leaveHandler = () => this.#hide();
-    this.#target.addEventListener('chart-hover', this.#hoverHandler);
-    this.#target.addEventListener('chart-leave', this.#leaveHandler);
+    this.#target.addEventListener('chart-hover', this.#onChartHover);
+    this.#target.addEventListener('chart-leave', this.#onChartLeave);
   }
 
   #detachPointerFollow() {
-    if (this.#target && this.#hoverHandler) this.#target.removeEventListener('chart-hover', this.#hoverHandler);
-    if (this.#target && this.#leaveHandler) this.#target.removeEventListener('chart-leave', this.#leaveHandler);
+    if (this.#target) {
+      this.#target.removeEventListener('chart-hover', this.#onChartHover);
+      this.#target.removeEventListener('chart-leave', this.#onChartLeave);
+    }
     this.#target = null;
-    this.#hoverHandler = null;
-    this.#leaveHandler = null;
   }
 
-  #onChartHover(event) {
+  #onChartLeave = () => this.#hide();
+
+  #onChartHover = (event) => {
     const detail = event.detail;
     if (!detail) return;
     this.#lastDetail = detail;
@@ -165,7 +163,7 @@ class AdiaTooltip extends AdiaElement {
 
     this.#paintPointerContent(detail);
     this.#positionAtPointer(detail.pointerX, detail.pointerY);
-  }
+  };
 
   #createPopover() {
     const el = document.createElement('div');

package/components/tree/tree.css

@@ -38,6 +38,27 @@
 }
 
 @scope (tree-item-ui) {
+  :where(:scope) {
+    /* Item-local aliases of parent tree-ui tokens (sanctioned co-located
+       composition pattern; matches stepper-item-ui / timeline-item-ui). */
+    --tree-item-row-height:    var(--tree-row-height, var(--a-size));
+    --tree-item-row-radius:    var(--tree-row-radius, var(--a-radius-sm));
+    --tree-item-row-px:        var(--tree-row-px, var(--a-space-1));
+    --tree-item-row-gap:       var(--tree-row-gap, var(--a-space-1));
+    --tree-item-actions-gap:   var(--tree-actions-gap, var(--a-space-0-5));
+    --tree-item-indent:        var(--tree-indent, var(--a-space-4));
+    --tree-item-chevron-size:  var(--tree-chevron-size, var(--a-space-2));
+    --tree-item-icon-size:     var(--tree-icon-size, var(--a-space-3));
+
+    --tree-item-fg:            var(--tree-fg, var(--a-fg));
+    --tree-item-fg-muted:      var(--tree-fg-muted, var(--a-fg-muted));
+    --tree-item-bg-hover:      var(--tree-bg-hover, var(--a-bg-muted));
+    --tree-item-bg-selected:   var(--tree-bg-selected, var(--a-bg-hover));
+
+    --tree-item-duration:      var(--tree-duration, var(--a-duration-fast));
+    --tree-item-easing:        var(--tree-easing, var(--a-easing));
+    --tree-item-focus-ring:    var(--tree-focus-ring, var(--a-focus-ring));
+  }
   :scope {
     box-sizing: border-box;
     display: flex;

package/core/icons.js

@@ -92,6 +92,18 @@ try {
    Flipped to `true` in the manifest `.then()` handler below. */
 let registryReady = hasViteGlob;
 
+/* `whenIconRegistryReady` lets a component defer icon-name decisions until
+   the registry is sync-checkable. <icon-ui> doesn't need it — it owns the
+   <name → svg> render and the manifest .then() handler below re-runs
+   loadIcon for every element. But components that branch on whether a
+   string IS an icon (e.g. <input-ui>'s prefix/suffix, which accept both
+   icon names and text labels like "@" or "$") need to re-evaluate after
+   manifest load, otherwise a kebab-case name baked into the DOM as text
+   never recovers. */
+let resolveRegistryReady;
+export const whenIconRegistryReady = new Promise((r) => { resolveRegistryReady = r; });
+if (hasViteGlob) resolveRegistryReady();
+
 // Non-Vite environments (plain static serving): fetch the build-time
 // manifest in the background and rebuild `weightModules` with lazy
 // fetch-based loaders. No top-level await — the module finishes loading
@@ -123,6 +135,7 @@ if (!hasViteGlob) {
         if (name) loadIcon(name, weight);
       }
     }
+    resolveRegistryReady();
   }).catch(() => { /* keep EMPTY_WEIGHTS — registryReady stays false */ });
 }
 
@@ -199,6 +212,7 @@ const ICON_ALIASES = {
   'phone': 'phone', 'location': 'map-pin', 'calendar': 'calendar-blank',
   'time': 'clock', 'user': 'user', 'users': 'users-three',
   'menu': 'list', 'more': 'dots-three', 'dots-vertical': 'dots-three-vertical', 'filter': 'funnel',
+  'inbox': 'tray', 'text-bold': 'text-b',
   'sort': 'sort-ascending', 'refresh': 'arrow-clockwise', 'download': 'download-simple',
   'upload': 'upload-simple', 'share': 'share-network', 'copy': 'copy-simple',
   'link': 'link-simple', 'external-link': 'arrow-square-out',

package/core/polyfills.js

@@ -1,13 +1,23 @@
 /**
- * AdiaUI Polyfills — conditional loading for missing platform features.
- * Import BEFORE component registration.
+ * AdiaUI optional polyfills — for consumers extending below the
+ * library's stated baseline (Chromium 125+, Safari 17.4+, Firefox 129+).
  *
- * Currently polyfills:
- *   - Popover API (Firefox < 125)
- *   - CSS Anchor Positioning (only Chrome 125+ native)
+ * Side-effect import — runs feature checks at module-evaluation time
+ * and dynamically loads polyfills only when the runtime lacks support:
  *
- * Both are loaded conditionally — browsers with native support skip the download.
- * Packages are optional — if not installed, the import silently fails.
+ *   import '@adia-ai/web-components/core/polyfills.js';
+ *   // ↳ before importing components
+ *
+ * Conditionally loads:
+ *   - Popover API (consumers extending to Firefox < 125 / Safari < 17)
+ *   - CSS Anchor Positioning (consumers extending to Safari < 26 / Firefox < 147)
+ *
+ * Browsers with native support skip the download. Packages are
+ * optional — if not installed, the import silently fails.
+ *
+ * Consumers on the stated baseline should NOT import this module —
+ * the runtime checks below resolve to no-op on every supported browser
+ * but you avoid the conditional `import()` setup entirely by skipping it.
  */
 
 if (typeof window !== 'undefined') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {

package/patterns/a2ui-root/a2ui-root.js

@@ -49,24 +49,29 @@ class AdiaA2UIRoot extends AdiaElement {
   #renderer = null;
   #abortCtrl = null;
   #doc = null;
+  #bound = false;
+
+  #onClick = (e) => {
+    const actionEl = e.target.closest('[data-action]');
+    if (!actionEl) return;
+    this.dispatchEvent(new CustomEvent('a2ui-action', {
+      bubbles: true,
+      detail: {
+        name: actionEl.getAttribute('data-action'),
+        sourceComponentId: actionEl.getAttribute('data-a2ui-id') || '',
+        timestamp: Date.now(),
+        context: {},
+      },
+    }));
+  };
 
   connected() {
     this.#renderer = new A2UIRenderer(this, registry, { batch: this.batch });
 
-    this.addEventListener('click', (e) => {
-      const actionEl = e.target.closest('[data-action]');
-      if (actionEl) {
-        this.dispatchEvent(new CustomEvent('a2ui-action', {
-          bubbles: true,
-          detail: {
-            name: actionEl.getAttribute('data-action'),
-            sourceComponentId: actionEl.getAttribute('data-a2ui-id') || '',
-            timestamp: Date.now(),
-            context: {},
-          },
-        }));
-      }
-    });
+    if (!this.#bound) {
+      this.#bound = true;
+      this.addEventListener('click', this.#onClick);
+    }
   }
 
   render() {
@@ -174,6 +179,8 @@ class AdiaA2UIRoot extends AdiaElement {
 
   disconnected() {
     this.#abortCtrl?.abort();
+    this.removeEventListener('click', this.#onClick);
+    this.#bound = false;
     this.active = false;
   }
 

package/patterns/app-shell/css/app-shell.main.css

@@ -12,6 +12,30 @@ app-shell-ui > main {
   border-inline: var(--page-main-border);
 }
 
+/* ── Edge breathing room when adjacent chrome is absent ──
+   When the shell has no visible chrome on a given edge of the content
+   surface, `> main > section` owns a small inset against that edge so
+   the rounded/elevated surface doesn't sit flush with the viewport.
+   The `:has(... :not([hidden]))` probe catches both "element missing
+   from the DOM" AND "element present but [hidden]" — toggling
+   [hidden] flips the inset live with no JS coordination. Scope is the
+   section, not main, so the topbar/statusbar inside main keep
+   spanning full-width even when the section gets its inset.
+
+   Block-edge probes accept either an app-level chrome bar
+   (`app-shell-ui > header / > footer`) OR a main-level chrome bar
+   (`> main > header / > main > footer`). Either qualifies as
+   "chrome present" and suppresses the corresponding margin. */
+app-shell-ui:not(:has(> aside[data-sidebar="trailing"]:not([hidden]))) > main > section {
+  margin-inline-end: var(--a-space-2);
+}
+app-shell-ui:not(:has(> header:not([hidden]), > main > header:not([hidden]))) > main > section {
+  margin-block-start: var(--a-space-2);
+}
+app-shell-ui:not(:has(> footer:not([hidden]), > main > footer:not([hidden]))) > main > section {
+  margin-block-end: var(--a-space-2);
+}
+
 /* ── Main > header (topbar) ──
    Contains: sidebar toggle, breadcrumb, spacer, action buttons.
 
@@ -71,7 +95,11 @@ app-shell-ui > main > header > [slot="action-leading"] {
 }
 
 /* ── Main > section (scroll container) ──
-   Wraps [data-content-root]. Scrolls vertically, hides scrollbar. */
+   Wraps [data-content-root]. Scrolls vertically, hides scrollbar.
+   Soft elevation via --page-content-shadow (defaults to --a-shadow-md)
+   so the content surface lifts off the chrome canvas regardless of
+   mode — pairs with --page-content-radius under "rounded" and stays
+   visible under "borderless". */
 app-shell-ui > main > section {
   flex: 1;
   min-height: 0;
@@ -79,6 +107,7 @@ app-shell-ui > main > section {
   overscroll-behavior: contain;
   scrollbar-width: none;
   background: var(--page-content-bg);
+  box-shadow: var(--page-content-shadow);
 }
 
 app-shell-ui > main > section::-webkit-scrollbar { display: none; }

package/patterns/app-shell/css/app-shell.tokens.css

@@ -42,6 +42,7 @@
   --page-content-inset:     var(--a-space-10);       /* padding for header/body/footer */
   --page-content-max-width: 1540px;                   /* max-width for content children */
   --page-content-border:    1px solid var(--a-border-subtle); /* content dividers (persists in "borderless") */
+  --page-content-shadow:    var(--a-shadow-sm);      /* soft lift on the content surface */
 
   /* Section labels (e.g. "WORKSPACE") — maps to "kicker" typography role */
   --page-section-gap:             var(--a-space-6);

package/patterns/gen-ui/gen-ui.js

@@ -14,7 +14,7 @@ import '../../components/inspector/inspector.js';
  * Consumer-owns-LLM: forwards all events from children, never calls fetch.
  *
  * Events (forwarded):
- *   chat-submit          — from thread
+ *   submit               — from thread (chat input)
  *   suggestion-select    — from thread
  *   canvas-interaction   — from canvas
  */

package/styles/colors/semantics.css

@@ -437,6 +437,63 @@
   --a-danger-border-disabled: var(--a-danger-border-subtle);
   --a-danger-border-invalid:  var(--a-danger-border);
 
+  /* ══════════════════════════════════════════════════════════════
+     BUCKETS — sequential 5-step ramp per family for data-vis consumers
+
+     Distinct from `--a-data-0..9` (categorical, distinct hues) — buckets
+     are 5 steps within ONE family, ordered low → high. Used by sequential
+     data-vis surfaces (heatmap-ui, choropleth, treemap intensity).
+
+     Anchor: bucket-2 = `--a-{family}-strong` (semantic step-50). Steps 0
+     and 1 sit lighter (toward muted); steps 3 and 4 sit deeper (toward
+     active). Light/dark scheme polarity is honored via `light-dark()` —
+     in light mode the lighter primitives are step-tints, in dark mode
+     the lighter primitives are step-shades, so "low intensity" reads
+     as low contrast against canvas-0 in either scheme.
+
+     Coordinate with chart palette: `--a-data-N` are categorical (10 hue
+     slots fanning out from accent-hue); buckets stay within one family
+     so a heatmap colored `[color="success"]` doesn't drift through the
+     accent → success → warning hue arc. Five steps were chosen so the
+     ramp fits within WCAG AA against `--a-canvas-0` at the high end and
+     remains visually distinguishable at the low end.
+     ══════════════════════════════════════════════════════════════ */
+
+  /* Accent buckets */
+  --a-accent-bucket-0: light-dark(var(--a-accent-15-tint), var(--a-accent-85-shade));
+  --a-accent-bucket-1: light-dark(var(--a-accent-30-tint), var(--a-accent-70-shade));
+  --a-accent-bucket-2: var(--a-accent-strong);
+  --a-accent-bucket-3: light-dark(var(--a-accent-65-tint), var(--a-accent-35-shade));
+  --a-accent-bucket-4: light-dark(var(--a-accent-80-tint), var(--a-accent-20-shade));
+
+  /* Success buckets */
+  --a-success-bucket-0: light-dark(var(--a-success-15-tint), var(--a-success-85-shade));
+  --a-success-bucket-1: light-dark(var(--a-success-30-tint), var(--a-success-70-shade));
+  --a-success-bucket-2: var(--a-success-strong);
+  --a-success-bucket-3: light-dark(var(--a-success-65-tint), var(--a-success-35-shade));
+  --a-success-bucket-4: light-dark(var(--a-success-80-tint), var(--a-success-20-shade));
+
+  /* Warning buckets */
+  --a-warning-bucket-0: light-dark(var(--a-warning-15-tint), var(--a-warning-85-shade));
+  --a-warning-bucket-1: light-dark(var(--a-warning-30-tint), var(--a-warning-70-shade));
+  --a-warning-bucket-2: var(--a-warning-strong);
+  --a-warning-bucket-3: light-dark(var(--a-warning-65-tint), var(--a-warning-35-shade));
+  --a-warning-bucket-4: light-dark(var(--a-warning-80-tint), var(--a-warning-20-shade));
+
+  /* Danger buckets */
+  --a-danger-bucket-0: light-dark(var(--a-danger-15-tint), var(--a-danger-85-shade));
+  --a-danger-bucket-1: light-dark(var(--a-danger-30-tint), var(--a-danger-70-shade));
+  --a-danger-bucket-2: var(--a-danger-strong);
+  --a-danger-bucket-3: light-dark(var(--a-danger-65-tint), var(--a-danger-35-shade));
+  --a-danger-bucket-4: light-dark(var(--a-danger-80-tint), var(--a-danger-20-shade));
+
+  /* Info buckets */
+  --a-info-bucket-0: light-dark(var(--a-info-15-tint), var(--a-info-85-shade));
+  --a-info-bucket-1: light-dark(var(--a-info-30-tint), var(--a-info-70-shade));
+  --a-info-bucket-2: var(--a-info-strong);
+  --a-info-bucket-3: light-dark(var(--a-info-65-tint), var(--a-info-35-shade));
+  --a-info-bucket-4: light-dark(var(--a-info-80-tint), var(--a-info-20-shade));
+
   /* ══════════════════════════════════════════════════════════════
      FOCUS — canonical ring recipe shared by all form controls
      ══════════════════════════════════════════════════════════════
@@ -530,8 +587,8 @@
      equally against red / blue / dark / light underlays.
      ══════════════════════════════════════════════════════════════ */
 
-  --a-chrome-light:       oklch(1 0 0);
-  --a-chrome-dark:        oklch(0 0 0);
+  --a-chrome-light:      var(--a-neutral-0-tint);
+  --a-chrome-dark:       var(--a-neutral-0-shade);
   --a-chrome-border:      var(--a-chrome-light);
   --a-chrome-ring-subtle: oklch(0 0 0 / 0.3);
   --a-chrome-shadow-soft: oklch(0 0 0 / 0.2);

package/styles/tokens.css

@@ -141,21 +141,25 @@
      allows themes to control shadow strength (0 = flat, 2 = heavy). */
   --a-shadow-intensity: 1;
   --a-shadow-color: oklch(0.2 0.01 var(--a-neutral-hue));
+  /* Per-layer alpha is applied via the oklch(from …) relative-color
+     syntax — the legacy `var(--c) / alpha` form is invalid outside a
+     color function and silently resolved to `box-shadow: none` (latent
+     bug fixed 2026-04-27). */
   --a-shadow-sm:
-    0 1px 1px  var(--a-shadow-color) / calc(0.04 * var(--a-shadow-intensity)),
-    0 1px 2px  var(--a-shadow-color) / calc(0.03 * var(--a-shadow-intensity)),
-    0 2px 4px  var(--a-shadow-color) / calc(0.02 * var(--a-shadow-intensity)),
-    0 0   1px  var(--a-shadow-color) / calc(0.03 * var(--a-shadow-intensity));
+    0 0.5px 0.5px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity))),
+    0 0.5px 1.5px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
+    0 2px 4px  oklch(from var(--a-shadow-color) l c h / calc(0.02 * var(--a-shadow-intensity))),
+    0 0   1px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity)));
   --a-shadow-md:
-    0 1px 2px  var(--a-shadow-color) / calc(0.04 * var(--a-shadow-intensity)),
-    0 2px 4px  var(--a-shadow-color) / calc(0.03 * var(--a-shadow-intensity)),
-    0 4px 12px var(--a-shadow-color) / calc(0.03 * var(--a-shadow-intensity)),
-    0 0   1px  var(--a-shadow-color) / calc(0.04 * var(--a-shadow-intensity));
+    0 0.5px 1px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity))),
+    0 1.5px 3px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
+    0 4px 12px oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
+    0 0   1px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity)));
   --a-shadow-lg:
-    0 2px 4px  var(--a-shadow-color) / calc(0.03 * var(--a-shadow-intensity)),
-    0 4px 8px  var(--a-shadow-color) / calc(0.03 * var(--a-shadow-intensity)),
-    0 8px 24px var(--a-shadow-color) / calc(0.04 * var(--a-shadow-intensity)),
-    0 0   1px  var(--a-shadow-color) / calc(0.04 * var(--a-shadow-intensity));
+    0 2px 4px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
+    0 4px 8px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
+    0 8px 24px oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity))),
+    0 0   1px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity)));
 
     --a-icon-size: 1.00rem;
     --a-caret-size: 0.875rem;