@adia-ai/web-components 0.0.26 → 0.0.28

package/components/toast/toast.css

@@ -106,39 +106,60 @@ toast-ui[data-closing][position="top-left"] {
   /* Enter / exit animation rules ([data-open] / [data-closing]) moved
      outside @scope — see Safari 17.x bug note at top of file. */
 
-  /* ── Variant: info (default) ── */
+  /* ── Variants ──
+     `--variant-muted` flips light↔dark with scheme, so the fg token
+     paired with it must do the same. Use `--a-{variant}-text` (the
+     light-dark scheme-aware token), NOT `--a-{variant}-text-strong`
+     (the latter is locked dark for warning + light for the others —
+     designed for solid `--variant-strong` fills, where the bg never
+     flips). Mirrors alert.css's variant wiring. */
 
   :where(:scope),
   :where(:scope[variant="info"]) {
-    --toast-bg: var(--a-info-muted);
-    --toast-fg: var(--a-info-text-strong);
+    --toast-bg:     var(--a-info-muted);
+    --toast-fg:     var(--a-info-text);
     --toast-border: var(--a-info-border-subtle);
   }
-
-  /* ── Variant: success ── */
-
   :where(:scope[variant="success"]) {
-    --toast-bg: var(--a-success-muted);
-    --toast-fg: var(--a-success-text-strong);
+    --toast-bg:     var(--a-success-muted);
+    --toast-fg:     var(--a-success-text);
     --toast-border: var(--a-success-border-subtle);
   }
-
-  /* ── Variant: warning ── */
-
   :where(:scope[variant="warning"]) {
-    --toast-bg: var(--a-warning-muted);
-    --toast-fg: var(--a-warning-text-strong);
+    --toast-bg:     var(--a-warning-muted);
+    --toast-fg:     var(--a-warning-text);
     --toast-border: var(--a-warning-border-subtle);
   }
-
-  /* ── Variant: danger ── */
-
   :where(:scope[variant="danger"]) {
-    --toast-bg: var(--a-danger-muted);
-    --toast-fg: var(--a-danger-text-strong);
+    --toast-bg:     var(--a-danger-muted);
+    --toast-fg:     var(--a-danger-text);
     --toast-border: var(--a-danger-border-subtle);
   }
 
+  /* `primary` is the accent-filled variant — solid bg + on-accent text
+     for "branded" toasts (welcome banners, feature-launch nudges)
+     where the message should read as a brand stamp rather than tinted
+     status chrome. Tracks the same accent-strong source as button-ui's
+     primary; border picks up `--a-accent-border-subtle` since there's
+     no `--a-primary-border-subtle` token. */
+  :where(:scope[variant="primary"]) {
+    --toast-bg:     var(--a-primary-bg);
+    --toast-fg:     var(--a-primary-fg);
+    --toast-border: var(--a-accent-border-subtle);
+  }
+
+  /* `muted` and `neutral` are semantic aliases of the base canvas
+     surface — same tokens as the unstyled `:scope`, declared explicitly
+     so the yaml enum and the CSS contract agree. Use cases: quiet
+     status nudges that shouldn't carry tonal weight (e.g. "Draft
+     saved" without success-green). Mirrors alert-ui's pattern. */
+  :where(:scope[variant="muted"]),
+  :where(:scope[variant="neutral"]) {
+    --toast-bg:     var(--a-bg-subtle);
+    --toast-fg:     var(--a-fg);
+    --toast-border: var(--a-border-subtle);
+  }
+
   /* ── Message slot ── */
 
   [slot="message"] {
@@ -146,25 +167,17 @@ toast-ui[data-closing][position="top-left"] {
     min-width: 0;
   }
 
-  /* ── Close button ── */
-
+  /* ── Close button ──
+     A real <button-ui icon="x" variant="ghost" size="sm"> stamped by
+     toast.js — brings the system focus ring + hover transition + a
+     properly-sized icon-ui glyph. The `align-self: start` keeps the
+     button on the first line of multi-line toast bodies, matching the
+     alert-ui pattern. */
   [slot="close"] {
-    background: none;
-    border: none;
-    font-size: 0.875rem;
-    color: currentColor;
-    cursor: pointer;
-    padding: 0;
-    line-height: 1;
-    opacity: 0.6;
     flex-shrink: 0;
-    align-self: flex-start;
-    margin-top: 0.125rem;
-    transition: opacity var(--toast-close-duration) var(--toast-close-easing);
+    align-self: start;
+    color: currentColor;
   }
-  [slot="close"]::after { content: '\00d7'; }
-  [slot="close"]:hover { opacity: 1; }
-  [slot="close"]:focus-visible { box-shadow: var(--toast-focus-ring); border-radius: var(--toast-focus-radius); }
 
   /* Inside a container: drop fixed positioning */
   [data-toast-container] > :scope {
@@ -176,37 +189,69 @@ toast-ui[data-closing][position="top-left"] {
   }
 }
 
-/* ── Top-layer: cannot inherit component tokens ── */
-/* ── Toast container — stacks toasts vertically ── */
+/* ── Toast lane container ──
+   Per-position singleton, attached to `document.body`. Promoted to the
+   browser's top-layer via the Popover API — `[popover="manual"]` on the
+   element + `showPopover()` on first post. The native popover stack
+   means multiple lanes (e.g. top-right + bottom-center) coexist
+   without z-index collisions, and the lane sits above ALL page chrome
+   (modals included, since both ride the top-layer in document order).
+
+   Reset the UA `[popover]` defaults (centred, white panel, border).
+   The lane is a transparent flex column anchored to a viewport corner;
+   the toast cards inside paint themselves. `pointer-events: none` on
+   the lane + `auto` on each toast lets clicks pass through empty
+   space between cards. */
 [data-toast-container] {
   position: fixed;
-  z-index: 9999;
+  inset: unset;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  overflow: visible;
+  width: max-content;
+  max-width: 100vw;
+  z-index: 9999;             /* fallback for envs without Popover API */
   display: flex;
-  flex-direction: column;
   gap: var(--a-space-2);
   pointer-events: none;
 }
-
-[data-toast-container="bottom-right"] {
-  bottom: var(--a-space-4);
-  right: var(--a-space-4);
-  align-items: flex-end;
+[data-toast-container]:popover-open {
+  /* Native top-layer; component-level z-index above is moot here but kept
+     for fallback. */
+  display: flex;
 }
 
+/* Top lanes — newest at top, columns flow downward. */
+[data-toast-container="top-right"],
+[data-toast-container="top-center"],
+[data-toast-container="top-left"] {
+  top: var(--a-space-4);
+  flex-direction: column;
+}
+/* Bottom lanes — newest at bottom, columns reverse so post() lands at
+   the visually-newest position. */
+[data-toast-container="bottom-right"],
+[data-toast-container="bottom-center"],
 [data-toast-container="bottom-left"] {
   bottom: var(--a-space-4);
-  left: var(--a-space-4);
-  align-items: flex-start;
+  flex-direction: column-reverse;
 }
 
+[data-toast-container="bottom-right"],
 [data-toast-container="top-right"] {
-  top: var(--a-space-4);
   right: var(--a-space-4);
   align-items: flex-end;
 }
-
+[data-toast-container="bottom-left"],
 [data-toast-container="top-left"] {
-  top: var(--a-space-4);
   left: var(--a-space-4);
   align-items: flex-start;
 }
+[data-toast-container="top-center"],
+[data-toast-container="bottom-center"] {
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}

package/components/toast/toast.js

@@ -1,14 +1,25 @@
 /**
- * <toast-ui> — Notification popup.
+ * <toast-ui> — Notification popup wired through a shared top-layer
+ * messaging channel.
  *
- * Positioned fixed, auto-dismisses after a configurable duration.
- * Animated enter/exit via translateY + opacity.
+ * All toasts — declarative AND imperative — route through one
+ * lazily-mounted `[data-toast-container][data-toast-position]` per
+ * position. Per-position singletons; consumers can post from anywhere
+ * without holding a reference to the toast component:
  *
- * Usage (declarative):
- *   <toast-ui text="Saved!" variant="success"></toast-ui>
+ *     // Imperative API
+ *     AdiaToast.show({ text: 'Saved!', variant: 'success' });
  *
- * Usage (imperative):
- *   AdiaToast.show({ text: 'Saved!', variant: 'success', duration: 3000 });
+ *     // Global event channel — same shape, dispatched on `window`.
+ *     // Any code (other components, integration scripts) can post
+ *     // without importing AdiaToast.
+ *     window.dispatchEvent(new CustomEvent('toast', {
+ *       detail: { text: 'Saved!', variant: 'success' }
+ *     }));
+ *
+ *     // Declarative — auto-routes to the per-position container on
+ *     // connect. No need to author <toast-ui> inside the container.
+ *     <toast-ui text="Saved!" variant="success"></toast-ui>
  *
  * Events:
  *   close — fired after the toast finishes its exit animation
@@ -21,6 +32,7 @@ class AdiaToast extends AdiaElement {
   #removing = false;
   #closeTimer = null;
   #openRaf = null;
+  #routed = false;
 
   static properties = {
     text:     { type: String,  default: '', reflect: true },
@@ -31,25 +43,27 @@ class AdiaToast extends AdiaElement {
 
   static parts = {
     message: '<div slot="message"></div>',
-    close:   '<span slot="close" role="button" tabindex="0" aria-label="Dismiss"></span>',
+    close:   '<button-ui slot="close" icon="x" variant="ghost" size="sm" aria-label="Dismiss"></button-ui>',
   };
 
   static template = () => html``;
 
-  #onClick = (e) => {
+  #onPress = (e) => {
     if (e.target.closest('[slot="close"]')) this.dismiss();
   };
 
-  #onKeydown = (e) => {
-    if (e.target.closest('[slot="close"]') && (e.key === 'Enter' || e.key === ' ')) {
-      e.preventDefault();
-      this.dismiss();
-    }
-  };
-
   connected() {
-    this.addEventListener('click', this.#onClick);
-    this.addEventListener('keydown', this.#onKeydown);
+    this.addEventListener('press', this.#onPress);
+
+    // Route declarative <toast-ui> instances into the shared per-position
+    // container so authored toasts share the same lane as imperatively-
+    // posted ones (no overlap, consistent stacking). Skipped if we're
+    // already inside a container (re-entrant connect after reparent).
+    if (!this.#routed && !this.parentElement?.matches?.('[data-toast-container]')) {
+      this.#routed = true;
+      const container = AdiaToast.#getContainer(this.position || 'bottom-right');
+      if (this.parentElement !== container) container.appendChild(this);
+    }
   }
 
   #getDuration() {
@@ -97,14 +111,19 @@ class AdiaToast extends AdiaElement {
     this.#closeTimer = setTimeout(() => {
       this.#closeTimer = null;
       this.removeAttribute('data-closing');
+      const container = this.parentElement;
       this.dispatchEvent(new Event('close', { bubbles: true }));
       this.remove();
+      /* If the lane is now empty, hide its popover and remove the
+         container — keeps document.body free of leaked containers. */
+      if (container?.matches?.('[data-toast-container]')) {
+        AdiaToast.#releaseContainerIfEmpty(container);
+      }
     }, this.#getDuration());
   }
 
   disconnected() {
-    this.removeEventListener('click', this.#onClick);
-    this.removeEventListener('keydown', this.#onKeydown);
+    this.removeEventListener('press', this.#onPress);
     if (this.#timer) { clearTimeout(this.#timer); this.#timer = null; }
     if (this.#closeTimer) { clearTimeout(this.#closeTimer); this.#closeTimer = null; }
     if (this.#openRaf != null) { cancelAnimationFrame(this.#openRaf); this.#openRaf = null; }
@@ -121,16 +140,58 @@ class AdiaToast extends AdiaElement {
    */
   static #containers = new Map();
 
+  /**
+   * Get (or lazily create) the per-position lane. Each lane is a manual
+   * Popover-API container — `[popover="manual"]` puts it in the browser's
+   * top-layer, above ALL page content with no z-index wars, and the
+   * native popover stack lets multiple lanes coexist (e.g. one toast in
+   * top-right + another in bottom-center) without collision.
+   *
+   * `popover="manual"` (not `auto`) — toasts must NOT light-dismiss on
+   * outside click; they auto-fade by their own duration timer.
+   *
+   * Falls back gracefully if the Popover API is unsupported (Safari < 17 /
+   * Firefox < 125): the lane still renders as a `position: fixed` div via
+   * the CSS `[data-toast-container]` rules. Browser baseline (Chromium
+   * 125+, Safari 18.0+, Firefox 129+) all support `[popover]`.
+   */
   static #getContainer(position) {
-    if (AdiaToast.#containers.has(position)) return AdiaToast.#containers.get(position);
-    const el = document.createElement('div');
+    let el = AdiaToast.#containers.get(position);
+    if (el && el.isConnected) return el;
+    el = document.createElement('div');
     el.setAttribute('data-toast-container', position);
+    /* `manual` = no light-dismiss; container stays open until we
+       explicitly hidePopover() it when its last toast leaves. */
+    if ('popover' in HTMLElement.prototype) {
+      el.setAttribute('popover', 'manual');
+    }
     document.body.appendChild(el);
+    /* Show the popover so the lane lifts into the top-layer. Wrapped in
+       try/catch because some test rigs (happy-dom) don't ship the API. */
+    try { el.showPopover?.(); } catch { /* graceful fallback to fixed */ }
     AdiaToast.#containers.set(position, el);
     return el;
   }
 
+  /**
+   * Tear down the per-position lane when its last toast has been
+   * dismissed. Keeps `document.body` clean — addresses the audit's L-B4
+   * "container leak" finding (toasts permanently leaving DIVs in body).
+   */
+  static #releaseContainerIfEmpty(container) {
+    if (!container) return;
+    if (container.children.length > 0) return;
+    try { container.hidePopover?.(); } catch { /* noop */ }
+    container.remove();
+    /* Clear from the singleton map so the next post() rebuilds. */
+    for (const [pos, el] of AdiaToast.#containers) {
+      if (el === container) AdiaToast.#containers.delete(pos);
+    }
+  }
+
   static show({ text, variant = 'info', duration = 4000, position = 'bottom-right' } = {}) {
+    /* `error` is a documented alias of `danger` (Phase 6 variant table). */
+    if (variant === 'error') variant = 'danger';
     const container = AdiaToast.#getContainer(position);
     const toast = document.createElement('toast-ui');
     toast.text = text;
@@ -140,7 +201,25 @@ class AdiaToast extends AdiaElement {
     container.appendChild(toast);
     return toast;
   }
+
 }
+
+/* Install the global 'toast' CustomEvent listener once, at module load,
+   so any code can post into the channel without importing AdiaToast
+   directly:
+
+     window.dispatchEvent(new CustomEvent('toast', {
+       detail: { text: 'Saved!', variant: 'success' }
+     }));
+
+   Idempotent — guarded by a window flag so HMR / re-imports are safe. */
+if (typeof window !== 'undefined' && !window.__adiaToastListenerInstalled) {
+  window.__adiaToastListenerInstalled = true;
+  window.addEventListener('toast', (e) => {
+    if (e?.detail && typeof e.detail === 'object') AdiaToast.show(e.detail);
+  });
+}
+
 customElements.define('toast-ui', AdiaToast);
 
 export { AdiaToast };

package/components/toolbar/toolbar.css

@@ -109,6 +109,19 @@ toolbar-ui [data-toolbar-spillover-menu]:popover-open {
   display: flex;
   flex-direction: column;
   gap: var(--a-space-1);
+  /* Fade + lift in on first paint. */
+  opacity: 1;
+  translate: 0 0;
+  transition: opacity var(--a-duration-fast) var(--a-easing-out),
+              translate var(--a-duration-fast) var(--a-easing-out);
+  @starting-style {
+    opacity: 0;
+    translate: 0 -4px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  toolbar-ui [data-toolbar-spillover-menu]:popover-open { transition: none; }
 }
 
 /* Inside the spillover, render as a vertical list — every item (groups and

package/components/tooltip/tooltip.css

@@ -36,12 +36,20 @@
   box-shadow: var(--a-shadow-sm);
   white-space: nowrap;
   pointer-events: none;
+  /* Fade in on first paint via @starting-style. */
+  opacity: 1;
+  transition: opacity var(--a-duration-fast) var(--a-easing-out);
   /* No z-index needed — Popover API renders in the top layer which
      has its own stacking above all document content. */
 }
 
 .tooltip-popup:popover-open {
   display: block;
+  @starting-style { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tooltip-popup { transition: none; }
 }
 
 /* ── Pointer-follow mode (chart/heatmap) ──
@@ -132,7 +140,7 @@
   width: var(--tooltip-indicator-size);
   height: var(--tooltip-indicator-size);
   border-radius: 50%;
-  background: var(--tooltip-indicator-color, var(--chart-0));
+  background: var(--tooltip-indicator-color, var(--a-data-0));
   flex-shrink: 0;
 }
 
@@ -140,14 +148,14 @@
   display: inline-block;
   width: calc(var(--tooltip-indicator-size) * 1.6);
   height: 2px;
-  background: var(--tooltip-indicator-color, var(--chart-0));
+  background: var(--tooltip-indicator-color, var(--a-data-0));
   flex-shrink: 0;
 }
 
 .tooltip-popup[data-follows="pointer"][data-indicator="dashed"] [data-indicator] {
   display: inline-block;
   width: calc(var(--tooltip-indicator-size) * 1.6);
-  border-top: 2px dashed var(--tooltip-indicator-color, var(--chart-0));
+  border-top: 2px dashed var(--tooltip-indicator-color, var(--a-data-0));
   flex-shrink: 0;
 }
 

package/core/provider.js

@@ -236,6 +236,7 @@ export class AdiaRouter extends AdiaProvider {
     }
 
     this.innerHTML = html;
+    this.scrollTo(0, 0);
     (this.closest('section') || this.parentElement)?.scrollTo(0, 0);
 
     if (route.title) document.title = route.title;

package/package.json

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

package/styles/colors/semantics.css

@@ -176,7 +176,7 @@
   --a-primary-bg-disabled:  var(--a-accent-muted);
   --a-primary-bg-invalid:   var(--a-danger-muted);
 
-  --a-primary-fg:           var(--a-accent-text-strong);
+  --a-primary-fg:           var(--a-accent-05-tint);
   --a-primary-fg-hover:     var(--a-accent-text-strong);
   --a-primary-fg-active:    var(--a-accent-text-strong);
   --a-primary-fg-selected:  var(--a-accent-text-strong);

package/styles/components.css

@@ -50,6 +50,7 @@
 @import "../components/alert/alert.css";
 @import "../components/kbd/kbd.css";
 @import "../components/tag/tag.css";
+@import "../components/swatch/swatch.css";
 @import "../components/col/col.css";
 @import "../components/field/field.css";
 @import "../components/row/row.css";