@adia-ai/web-components 0.0.18 → 0.0.20

package/components/timeline/timeline.css

@@ -44,13 +44,13 @@
     --timeline-icon-bg:            var(--a-bg-muted);
     --timeline-icon-fg:            var(--a-fg-subtle);
     --timeline-icon-bg-success:    var(--a-success-muted);
-    --timeline-icon-fg-success:    var(--a-success);
+    --timeline-icon-fg-success:    var(--a-success-strong);
     --timeline-icon-bg-accent:     var(--a-accent-muted);
     --timeline-icon-fg-accent:     var(--a-accent);
     --timeline-icon-bg-warning:    var(--a-warning-muted);
     --timeline-icon-fg-warning:    var(--a-warning);
     --timeline-icon-bg-danger:     var(--a-danger-muted);
-    --timeline-icon-fg-danger:     var(--a-danger);
+    --timeline-icon-fg-danger:     var(--a-danger-strong);
 
     /* Typography */
     --timeline-label-weight:       var(--a-weight-medium);
@@ -110,232 +110,272 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
   grid-column: 1 / -1;
 }
 
-/* ── Item base: each item is its own subgrid row ── */
-
-timeline-item-ui {
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: subgrid;
-  grid-column: 1 / -1;
-  grid-auto-rows: auto;
-  align-items: baseline;
-  position: relative;
-  min-width: 0;
-}
-
-/* Stamp default slot children when the author didn't — see timeline.js */
-timeline-item-ui [slot] {
-  min-width: 0;
-}
+/* ── Item — co-located in timeline.js, declared here as its own scope ── */
+@scope (timeline-item-ui) {
+  :where(:scope) {
+    /* Item-local aliases of parent timeline-ui tokens. Co-located items
+       legitimately read parent tokens so the dot/line/icon visuals stay
+       coherent across the timeline (sanctioned composition pattern). */
+    --timeline-item-marker-w:           var(--timeline-marker-w, 1.25rem);
+    --timeline-item-gap-row:            var(--timeline-gap-row, var(--a-space-3));
+
+    --timeline-item-dot-size:           var(--timeline-dot-size, 0.625rem);
+    --timeline-item-dot-bg:             var(--timeline-dot-bg, var(--a-border));
+    --timeline-item-dot-bg-active:      var(--timeline-dot-bg-active, var(--a-accent-bg));
+    --timeline-item-dot-bg-done:        var(--timeline-dot-bg-done, var(--a-success-bg));
+    --timeline-item-dot-bg-error:       var(--timeline-dot-bg-error, var(--a-danger-bg));
+    --timeline-item-dot-bg-warning:     var(--timeline-dot-bg-warning, var(--a-warning-bg));
+
+    --timeline-item-subdot-size:        var(--timeline-subdot-size, 4px);
+    --timeline-item-subdot-bg:          var(--timeline-subdot-bg, var(--a-fg-subtle));
+
+    --timeline-item-line-size:          var(--timeline-line-size, 2px);
+    --timeline-item-line-fg:            var(--timeline-line-fg, var(--a-border-subtle));
+    --timeline-item-line-fg-done:       var(--timeline-line-fg-done, var(--a-border));
+
+    --timeline-item-icon-size:          var(--timeline-icon-size, 1rem);
+    --timeline-item-icon-bg:            var(--timeline-icon-bg, var(--a-bg-muted));
+    --timeline-item-icon-fg:            var(--timeline-icon-fg, var(--a-fg-subtle));
+    --timeline-item-icon-bg-success:    var(--timeline-icon-bg-success, var(--a-success-muted));
+    --timeline-item-icon-fg-success:    var(--timeline-icon-fg-success, var(--a-success-strong));
+    --timeline-item-icon-bg-accent:     var(--timeline-icon-bg-accent, var(--a-accent-muted));
+    --timeline-item-icon-fg-accent:     var(--timeline-icon-fg-accent, var(--a-accent));
+    --timeline-item-icon-bg-warning:    var(--timeline-icon-bg-warning, var(--a-warning-muted));
+    --timeline-item-icon-fg-warning:    var(--timeline-icon-fg-warning, var(--a-warning));
+    --timeline-item-icon-bg-danger:     var(--timeline-icon-bg-danger, var(--a-danger-muted));
+    --timeline-item-icon-fg-danger:     var(--timeline-icon-fg-danger, var(--a-danger-strong));
+
+    --timeline-item-label-weight:       var(--timeline-label-weight, var(--a-weight-medium));
+    --timeline-item-label-size:         var(--timeline-label-size, var(--a-ui-size));
+    --timeline-item-label-fg:           var(--timeline-label-fg, var(--a-fg));
+    --timeline-item-label-fg-muted:     var(--timeline-label-fg-muted, var(--a-fg-muted));
+    --timeline-item-desc-fg:            var(--timeline-desc-fg, var(--a-fg-subtle));
+    --timeline-item-desc-size:          var(--timeline-desc-size, var(--a-ui-sm));
+    --timeline-item-time-fg:            var(--timeline-time-fg, var(--a-fg-muted));
+    --timeline-item-time-size:          var(--timeline-time-size, var(--a-ui-sm));
+    --timeline-item-outcome-fg:         var(--timeline-outcome-fg, var(--a-fg-muted));
+
+    --timeline-item-duration:           var(--timeline-duration, var(--a-duration-fast));
+    --timeline-item-easing:              var(--timeline-easing, var(--a-easing-out));
+    --timeline-item-spin-duration:      var(--timeline-spin-duration, 0.8s);
+
+    --timeline-item-toggle-px:          var(--a-space-0-5);
+    --timeline-item-toggle-time-margin: 1.5rem;
+    --timeline-item-outcome-indent:     0.75rem;
+  }
 
-/* ═══════ Marker (dot) — positioned absolutely in the marker column ═══════ */
-
-timeline-item-ui::before {
-  content: '';
-  position: absolute;
-  left: calc((var(--timeline-marker-w) - var(--timeline-dot-size)) / 2);
-  top: calc((1.4em - var(--timeline-dot-size)) / 2 + 1px);
-  width: var(--timeline-dot-size);
-  height: var(--timeline-dot-size);
-  border-radius: 50%;
-  background: var(--timeline-dot-bg);
-  box-sizing: border-box;
-  z-index: 1;
-  transition: background var(--timeline-duration) var(--timeline-easing);
-}
+  :scope {
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    grid-auto-rows: auto;
+    align-items: baseline;
+    position: relative;
+    min-width: 0;
+  }
 
-/* State: completed → success dot */
-timeline-item-ui[completed]::before {
-  background: var(--timeline-dot-bg-done);
-}
+  /* Stamp default slot children when the author didn't — see timeline.js */
+  :scope [slot] {
+    min-width: 0;
+  }
 
-/* State: active → accent dot */
-timeline-item-ui[active]::before {
-  background: var(--timeline-dot-bg-active);
-}
+  /* ═══════ Marker (dot) — positioned absolutely in the marker column ═══════ */
+
+  :scope::before {
+    content: '';
+    position: absolute;
+    left: calc((var(--timeline-item-marker-w) - var(--timeline-item-dot-size)) / 2);
+    top: calc((1.4em - var(--timeline-item-dot-size)) / 2 + 1px);
+    width: var(--timeline-item-dot-size);
+    height: var(--timeline-item-dot-size);
+    border-radius: 50%;
+    background: var(--timeline-item-dot-bg);
+    box-sizing: border-box;
+    z-index: 1;
+    transition: background var(--timeline-item-duration) var(--timeline-item-easing);
+  }
 
-/* State: error → danger dot */
-timeline-item-ui[error]::before {
-  background: var(--timeline-dot-bg-error);
-}
+  :scope[status="completed"]::before { background: var(--timeline-item-dot-bg-done); }
+  :scope[status="active"]::before    { background: var(--timeline-item-dot-bg-active); }
+  :scope[status="error"]::before     { background: var(--timeline-item-dot-bg-error); }
+
+  /* Variant: success / accent / warning / danger (for non-active items) */
+  :scope[variant="success"]:not([status="active"]):not([status="error"])::before { background: var(--timeline-item-dot-bg-done); }
+  :scope[variant="accent"]:not([status="active"]):not([status="error"])::before  { background: var(--timeline-item-dot-bg-active); }
+  :scope[variant="warning"]:not([status="active"]):not([status="error"])::before { background: var(--timeline-item-dot-bg-warning); }
+  :scope[variant="danger"]:not([status="active"]):not([status="error"])::before  { background: var(--timeline-item-dot-bg-error); }
+
+  /* Spinner overlay — `[spinner]` is a presentation hint that turns the
+     active dot into a spinning ring. Orthogonal to status. */
+  :scope[status="active"][spinner]::before {
+    background: transparent;
+    border: 2px solid var(--timeline-item-dot-bg);
+    border-top-color: var(--timeline-item-dot-bg-active);
+    animation: tl-spin var(--timeline-item-spin-duration) linear infinite;
+  }
 
-/* Variant: success / accent / warning / danger (for non-active items) */
-timeline-item-ui[variant="success"]:not([active]):not([error])::before { background: var(--timeline-dot-bg-done); }
-timeline-item-ui[variant="accent"]:not([active]):not([error])::before  { background: var(--timeline-dot-bg-active); }
-timeline-item-ui[variant="warning"]:not([active]):not([error])::before { background: var(--timeline-dot-bg-warning); }
-timeline-item-ui[variant="danger"]:not([active]):not([error])::before  { background: var(--timeline-dot-bg-error); }
-
-/* Spinner on active items — render as a ring that spins */
-timeline-item-ui[active][spinner]::before {
-  background: transparent;
-  border: 2px solid var(--timeline-dot-bg);
-  border-top-color: var(--timeline-dot-bg-active);
-  animation: tl-spin var(--timeline-spin-duration) linear infinite;
-}
+  /* ═══════ Connector line ═══════ */
 
-/* When size=sm, ring is 1.5px so the small dot still looks crisp */
-timeline-ui[size="sm"] > timeline-item-ui[active][spinner]::before {
-  border-width: 1.5px;
-}
+  :scope::after {
+    content: '';
+    position: absolute;
+    left: calc((var(--timeline-item-marker-w) - var(--timeline-item-line-size)) / 2);
+    top: calc((1.4em + var(--timeline-item-dot-size)) / 2 + 2px);
+    bottom: calc(-1 * var(--timeline-item-gap-row));
+    width: var(--timeline-item-line-size);
+    background: var(--timeline-item-line-fg);
+  }
 
-/* ═══════ Connector line ═══════ */
+  :scope[status="completed"]::after { background: var(--timeline-item-line-fg-done); }
+  :scope[data-last]::after { display: none; }
+
+  /* ═══════ Icon mode — icon-ui in [slot="icon"] replaces the dot ═══════ */
+
+  :scope:has(> [slot="icon"])::before { display: none; }
+
+  :scope > [slot="icon"] {
+    grid-column: marker;
+    grid-row: 1;
+    justify-self: center;
+    align-self: baseline;
+    margin-top: calc((1.4em - var(--timeline-item-icon-size)) / 2);
+    width: var(--timeline-item-icon-size);
+    height: var(--timeline-item-icon-size);
+    border-radius: 50%;
+    background: var(--timeline-item-icon-bg);
+    color: var(--timeline-item-icon-fg);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    --a-icon-size: calc(var(--timeline-item-icon-size) * 0.625);
+    z-index: 1;
+    box-sizing: border-box;
+  }
 
-timeline-item-ui::after {
-  content: '';
-  position: absolute;
-  left: calc((var(--timeline-marker-w) - var(--timeline-line-size)) / 2);
-  top: calc((1.4em + var(--timeline-dot-size)) / 2 + 2px);
-  bottom: calc(-1 * var(--timeline-gap-row));
-  width: var(--timeline-line-size);
-  background: var(--timeline-line-fg);
-}
+  :scope[variant="success"] > [slot="icon"] { background: var(--timeline-item-icon-bg-success); color: var(--timeline-item-icon-fg-success); }
+  :scope[variant="accent"]  > [slot="icon"] { background: var(--timeline-item-icon-bg-accent);  color: var(--timeline-item-icon-fg-accent); }
+  :scope[variant="warning"] > [slot="icon"] { background: var(--timeline-item-icon-bg-warning); color: var(--timeline-item-icon-fg-warning); }
+  :scope[variant="danger"]  > [slot="icon"] { background: var(--timeline-item-icon-bg-danger);  color: var(--timeline-item-icon-fg-danger); }
 
-timeline-item-ui[completed]::after { background: var(--timeline-line-fg-done); }
-timeline-item-ui[data-last]::after { display: none; }
-
-/* ═══════ Icon mode — icon-ui in [slot="icon"] replaces the dot ═══════ */
-
-timeline-item-ui:has(> [slot="icon"])::before { display: none; }
-
-timeline-item-ui > [slot="icon"] {
-  grid-column: marker;
-  grid-row: 1;
-  justify-self: center;
-  align-self: baseline;
-  margin-top: calc((1.4em - var(--timeline-icon-size)) / 2);
-  width: var(--timeline-icon-size);
-  height: var(--timeline-icon-size);
-  border-radius: 50%;
-  background: var(--timeline-icon-bg);
-  color: var(--timeline-icon-fg);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  --a-icon-size: calc(var(--timeline-icon-size) * 0.625);
-  z-index: 1;
-  box-sizing: border-box;
-}
-
-/* Variant icons */
-timeline-item-ui[variant="success"] > [slot="icon"] { background: var(--timeline-icon-bg-success); color: var(--timeline-icon-fg-success); }
-timeline-item-ui[variant="accent"]  > [slot="icon"] { background: var(--timeline-icon-bg-accent);  color: var(--timeline-icon-fg-accent); }
-timeline-item-ui[variant="warning"] > [slot="icon"] { background: var(--timeline-icon-bg-warning); color: var(--timeline-icon-fg-warning); }
-timeline-item-ui[variant="danger"]  > [slot="icon"] { background: var(--timeline-icon-bg-danger);  color: var(--timeline-icon-fg-danger); }
+  /* Push connector line past the icon circle */
+  :scope:has(> [slot="icon"])::after {
+    top: calc((1.4em + var(--timeline-item-icon-size)) / 2 + 2px);
+  }
 
-/* Push connector line past the icon circle */
-timeline-item-ui:has(> [slot="icon"])::after {
-  top: calc((1.4em + var(--timeline-icon-size)) / 2 + 2px);
-}
+  /* ═══════ Content slots ═══════ */
 
-/* ═══════ Content slots ═══════ */
+  :scope > [slot="label"] {
+    grid-column: content;
+    grid-row: 1;
+    font-weight: var(--timeline-item-label-weight);
+    font-size: var(--timeline-item-label-size);
+    color: var(--timeline-item-label-fg);
+    line-height: 1.4;
+    overflow-wrap: break-word;
+    min-width: 0;
+  }
 
-timeline-item-ui > [slot="label"] {
-  grid-column: content;
-  grid-row: 1;
-  font-weight: var(--timeline-label-weight);
-  font-size: var(--timeline-label-size);
-  color: var(--timeline-label-fg);
-  line-height: 1.4;
-  overflow-wrap: break-word;
-  min-width: 0;
-}
+  :scope[status="completed"] > [slot="label"] {
+    color: var(--timeline-item-label-fg-muted);
+  }
 
-timeline-item-ui[completed] > [slot="label"] {
-  color: var(--timeline-label-fg-muted);
-}
+  :scope > [slot="description"] {
+    grid-column: content / -1;
+    grid-row: 2;
+    color: var(--timeline-item-desc-fg);
+    font-size: var(--timeline-item-desc-size);
+    line-height: 1.5;
+    margin-top: var(--a-space-0-5);
+  }
 
-timeline-item-ui > [slot="description"] {
-  grid-column: content / -1;
-  grid-row: 2;
-  color: var(--timeline-desc-fg);
-  font-size: var(--timeline-desc-size);
-  line-height: 1.5;
-  margin-top: var(--a-space-0-5);
-}
+  :scope > [slot="time"] {
+    grid-column: aside;
+    grid-row: 1;
+    color: var(--timeline-item-time-fg);
+    font-size: var(--timeline-item-time-size);
+    font-variant-numeric: tabular-nums;
+    line-height: 1.4;
+    white-space: nowrap;
+    justify-self: end;
+  }
 
-timeline-item-ui > [slot="time"] {
-  grid-column: aside;
-  grid-row: 1;
-  color: var(--timeline-time-fg);
-  font-size: var(--timeline-time-size);
-  font-variant-numeric: tabular-nums;
-  line-height: 1.4;
-  white-space: nowrap;
-  justify-self: end;
-}
+  /* Hide empty slots so they don't steal grid track space */
+  :scope > [slot]:empty {
+    display: none;
+  }
 
-/* Hide empty slots so they don't steal grid track space */
-timeline-item-ui > [slot]:empty {
-  display: none;
-}
+  /* ═══════ Outcomes — nested sub-rows ═══════ */
 
-/* ═══════ Outcomes — nested sub-rows ═══════ */
+  :scope > [slot="outcomes"] {
+    grid-column: content / -1;
+    grid-row: 3;
+    margin: var(--a-space-1) 0 0 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--a-space-0-5);
+    color: var(--timeline-item-outcome-fg);
+    font-size: var(--timeline-item-desc-size);
+    line-height: 1.4;
+    animation: tl-fade var(--timeline-item-duration) var(--timeline-item-easing);
+  }
 
-timeline-item-ui > [slot="outcomes"] {
-  grid-column: content / -1;
-  grid-row: 3;
-  margin: var(--a-space-1) 0 0 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: var(--a-space-0-5);
-  color: var(--timeline-outcome-fg);
-  font-size: var(--timeline-desc-size);
-  line-height: 1.4;
-  animation: tl-fade var(--timeline-duration) var(--timeline-easing);
-}
+  :scope > [slot="outcomes"][hidden] { display: none; }
 
-timeline-item-ui > [slot="outcomes"][hidden] { display: none; }
+  :scope > [slot="outcomes"] > li {
+    position: relative;
+    padding-left: var(--timeline-item-outcome-indent);
+    overflow-wrap: break-word;
+    min-width: 0;
+  }
 
-timeline-item-ui > [slot="outcomes"] > li {
-  position: relative;
-  padding-left: 0.75rem;
-  overflow-wrap: break-word;
-  min-width: 0;
-}
+  :scope > [slot="outcomes"] > li::before {
+    content: '';
+    position: absolute;
+    left: calc((var(--timeline-item-outcome-indent) - var(--timeline-item-subdot-size)) / 2);
+    top: calc((1.4em - var(--timeline-item-subdot-size)) / 2 + 1px);
+    width: var(--timeline-item-subdot-size);
+    height: var(--timeline-item-subdot-size);
+    border-radius: 50%;
+    background: var(--timeline-item-subdot-bg);
+  }
 
-timeline-item-ui > [slot="outcomes"] > li::before {
-  content: '';
-  position: absolute;
-  left: calc((0.75rem - var(--timeline-subdot-size)) / 2);
-  top: calc((1.4em - var(--timeline-subdot-size)) / 2 + 1px);
-  width: var(--timeline-subdot-size);
-  height: var(--timeline-subdot-size);
-  border-radius: 50%;
-  background: var(--timeline-subdot-bg);
-}
+  /* ═══════ Toggle chevron (outcomes) ═══════ */
+
+  :scope > [data-timeline-toggle] {
+    position: absolute;
+    inset-inline-end: 0;
+    top: calc((1.4em - 1em) / 2);
+    background: none;
+    border: none;
+    padding: 0 var(--timeline-item-toggle-px);
+    margin: 0;
+    cursor: pointer;
+    color: inherit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+  }
 
-/* ═══════ Toggle chevron (outcomes) ═══════ */
-
-/* Positioned absolutely at the item's trailing edge so it coexists with
-   [slot="time"] (which also lives in the aside column). The item itself
-   is position: relative. */
-timeline-item-ui > [data-timeline-toggle] {
-  position: absolute;
-  inset-inline-end: 0;
-  top: calc((1.4em - 1em) / 2);
-  background: none;
-  border: none;
-  padding: 0 var(--a-space-0-5);
-  margin: 0;
-  cursor: pointer;
-  color: inherit;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 0;
-}
+  /* Reserve room so the time isn't overlapped by the chevron */
+  :scope:has(> [data-timeline-toggle]) > [slot="time"] {
+    margin-inline-end: var(--timeline-item-toggle-time-margin);
+  }
 
-/* Reserve room so the time isn't overlapped by the chevron */
-timeline-item-ui:has(> [data-timeline-toggle]) > [slot="time"] {
-  margin-inline-end: 1.5rem;
+  :scope > [data-timeline-toggle]:focus-visible {
+    outline: none;
+    box-shadow: var(--a-focus-ring);
+    border-radius: var(--a-radius-sm);
+  }
 }
 
-timeline-item-ui > [data-timeline-toggle]:focus-visible {
-  outline: 2px solid var(--a-focus-ring, var(--a-accent));
-  outline-offset: 2px;
-  border-radius: var(--a-radius-sm);
+/* When size=sm on the parent, ring is 1.5px so the small dot still looks crisp.
+   This rule reaches across the parent→child boundary and stays outside @scope. */
+timeline-ui[size="sm"] > timeline-item-ui[status="active"][spinner]::before {
+  border-width: 1.5px;
 }
 
 /* ═══════ Horizontal layout — flow, not grid ═══════ */
@@ -385,5 +425,5 @@ timeline-ui[orientation="horizontal"] > timeline-item-ui > [slot="time"] {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  timeline-item-ui[active][spinner]::before { animation: none; }
+  timeline-item-ui[status="active"][spinner]::before { animation: none; }
 }

package/components/timeline/timeline.js

@@ -72,9 +72,7 @@ class AdiaTimelineItem extends AdiaElement {
     duration:    { type: String,  default: '',        reflect: true },
     icon:        { type: String,  default: '',        reflect: true },
     variant:     { type: String,  default: 'default', reflect: true },
-    completed:   { type: Boolean, default: false,     reflect: true },
-    active:      { type: Boolean, default: false,     reflect: true },
-    error:       { type: Boolean, default: false,     reflect: true },
+    status:      { type: String,  default: 'idle',    reflect: true },
     spinner:     { type: Boolean, default: false,     reflect: true },
   };
 

package/components/toast/toast.a2ui.json

@@ -40,14 +40,13 @@
       "default": ""
     },
     "variant": {
-      "description": "Color variant. `error` kept as alias for `danger`.",
+      "description": "Semantic variant — `default | info | success | warning | danger`. `primary` and `muted` are style hints; canonical \"neutral but interesting\" tone is `info`.",
       "type": "string",
       "enum": [
         "default",
+        "info",
         "success",
         "warning",
-        "error",
-        "info",
         "danger",
         "primary",
         "muted",

package/components/toast/toast.yaml

@@ -28,15 +28,17 @@ props:
     type: string
     default: ""
   variant:
-    description: Color variant. `error` kept as alias for `danger`.
+    description: >-
+      Semantic variant — `default | info | success | warning | danger`.
+      `primary` and `muted` are style hints; canonical "neutral but
+      interesting" tone is `info`.
     type: string
     default: info
     enum:
       - default
+      - info
       - success
       - warning
-      - error
-      - info
       - danger
       - primary
       - muted

package/components/toolbar/toolbar.css

@@ -8,6 +8,7 @@
 
     /* ── Colors ── */
     --toolbar-bg:     transparent;
+    --toolbar-fg:     var(--a-fg);
     --toolbar-border: var(--a-border-subtle);
   }
 
@@ -20,6 +21,7 @@
     gap: var(--toolbar-gap);
     padding: var(--toolbar-py) var(--toolbar-px);
     border-radius: var(--toolbar-radius);
+    color: var(--toolbar-fg);
     min-width: 0;        /* allow shrinking within flex/grid parents */
     overflow: hidden;    /* prevent pre-measurement flash before reflow */
   }
@@ -66,12 +68,15 @@
 
 /* ── toolbar-group-ui: atomic inline-flex cluster ── */
 @scope (toolbar-group-ui) {
+  :where(:scope) {
+    --toolbar-group-gap: var(--a-space-1);
+  }
   :scope {
     box-sizing: border-box;
     display: inline-flex;
     flex-direction: row;
     align-items: center;
-    gap: var(--toolbar-gap, var(--a-space-1));
+    gap: var(--toolbar-group-gap);
     min-width: 0;
   }
 }

package/components/toolbar/toolbar.js

@@ -36,7 +36,7 @@ class AdiaToolbar extends AdiaElement {
   static properties = {
     gap:      { type: String,  default: 'sm', reflect: true },
     align:    { type: String,  default: 'start', reflect: true },
-    overflow: { type: String,  default: 'menu', reflect: true }, // menu | none
+    overflow: { type: String,  default: 'menu', reflect: true },
   };
 
   static template = () => null;
@@ -48,6 +48,7 @@ class AdiaToolbar extends AdiaElement {
   #spilloverCleanup = null;
   #measuring = false;
   #reflowQueued = false;
+  #reflowRaf = null;
   #rafId = null;
 
   connected() {
@@ -64,6 +65,11 @@ class AdiaToolbar extends AdiaElement {
   }
 
   disconnected() {
+    if (this.#reflowRaf != null) {
+      cancelAnimationFrame(this.#reflowRaf);
+      this.#reflowRaf = null;
+    }
+    this.#reflowQueued = false;
     this.#ro?.disconnect();
     this.#mo?.disconnect();
     this.#closeSpillover();
@@ -188,8 +194,10 @@ class AdiaToolbar extends AdiaElement {
   #queueReflow() {
     if (this.#reflowQueued) return;
     this.#reflowQueued = true;
-    requestAnimationFrame(() => {
+    this.#reflowRaf = requestAnimationFrame(() => {
+      this.#reflowRaf = null;
       this.#reflowQueued = false;
+      if (!this.isConnected) return;
       this.#reflow();
     });
   }

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