@adia-ai/web-components 0.8.33 → 0.8.35

package/components/tabs/tabs.css

@@ -4,8 +4,13 @@
     --tabs-border:          transparent;
     --tabs-bg:              transparent;
     --tabs-radius:          var(--a-radius-md);
-    --tabs-button-height:   var(--a-size);
-    --tabs-font-size:       var(--a-ui-md);
+    /* One quarter-rem taller than the shared control height (operator
+       ruling 2026-08-12) — tab labels sit at --a-ui-lg since gh#965 and
+       needed the extra breathing room. */
+    --tabs-button-height:   calc(var(--a-size) + 0.25rem);
+    /* One rung UP the --a-ui-* scale (gh#965): tab labels are primary
+       navigation, not control chrome. */
+    --tabs-font-size:       var(--a-ui-lg);
     --tabs-font-family:     var(--a-font-family-ui);
     /* Strip owns the button-to-button spacing — 4px base gap + one
        padding unit (8px) folded in, since tab-button carries no
@@ -13,9 +18,12 @@
     --tabs-gap:             var(--a-space-3);
     --tabs-indicator-color: var(--md-sys-color-primary);
     --tabs-indicator-height: 2px;
-    --tabs-fg:              var(--md-sys-color-neutral-on-surface-variant);
-    --tabs-fg-hover:        var(--md-sys-color-neutral-on-surface);
-    --tabs-fg-active:       var(--a-fg-selected);
+    /* State fg follows nav-item-ui's convention (gh#968 ruling, gh#1088):
+       idle neutral-high · hover/selected the shared --a-ui-text-* aliases —
+       one color language across horizontal (tabs) and vertical (nav) selection. */
+    --tabs-fg:              var(--md-sys-color-neutral-high);
+    --tabs-fg-hover:        var(--a-ui-text-hover);
+    --tabs-fg-active:       var(--a-ui-text-selected);
     --tabs-fg-disabled:     var(--a-ui-text-disabled);
 
     /* ── Spacing ── */

package/components/tag/tag.class.js

@@ -57,7 +57,20 @@ export class UITag extends UIElement {
   static parts = {
     // button-ui, not a native <button> (gh issue 276) — the icon slots in
     // explicitly to keep its bold weight (the icon= prop stamps regular).
-    dismiss: '<button-ui slot="dismiss" variant="ghost" size="sm" aria-label="Remove"><icon-ui slot="icon" name="x" weight="bold"></icon-ui></button-ui>',
+    // gh#1084: the icon carries its own explicit free-form `size` (routes
+    // through icon.class.js's inline-style path, --icon-size) rather than
+    // relying on tag.css's `[slot="dismiss"] { --a-icon-size: … }` token
+    // override — that CSS-custom-property override is DEAD on this button:
+    // the button also carries `size="sm"`, and the universal
+    // `[size="sm"] { --a-icon-size: 0.875rem; … }` rule (styles/api/
+    // sizing.css) lives in the `utilities` layer, which the cascade-layer
+    // order (`@layer reset, tokens, elements, components, utilities, …` —
+    // styles/index.css) ranks ABOVE the `components` layer tag.css's own
+    // rule lives in — so the universal rule always wins on this element
+    // regardless of specificity, and any --a-icon-size value tag.css sets
+    // there is inert. An icon-level `size="…"` attribute sets an inline
+    // style directly (icon.class.js), which outranks every layer.
+    dismiss: '<button-ui slot="dismiss" variant="ghost" size="sm" aria-label="Remove"><icon-ui slot="icon" name="x" weight="bold" size="0.75rem"></icon-ui></button-ui>',
   };
 
   static template = () => null;

package/components/tag/tag.css

@@ -28,9 +28,29 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-border:       transparent;
     --tag-radius:       var(--a-radius-full);
     --tag-px:           var(--a-space-1-5);
-    --tag-py:           var(--a-space-0-5);
+    /* gh#1084: block padding flattened toward 1px per tier — the
+       --tag-min-h floor (below) now owns the chip's vertical size, so
+       py no longer has to carry it. Was --a-space-0-5 (2px); the extra
+       space min-height used to need from padding is now supplied by
+       align-items:center centering the content inside the floored box. */
+    --tag-py:           var(--a-space-px);
     --tag-gap:          var(--a-space-1);
-    --tag-font:         var(--a-ui-sm);
+    /* gh#1084 — min-height floor, decoupled from padding (mirrors
+       tags-input-ui's --tags-input-min-h). Component-owned fixed rem
+       constants (not density-scaled, matching --tag-dismiss-size's own
+       precedent below) calibrated to the CURRENT rendered height of a
+       plain (non-removable) tag at each tier — measured 14/17/22px
+       sm/md/lg before this change — so the dominant, non-removable case
+       has zero visual regression. Removable tags (previously inflated
+       by the oversized dismiss button, see --tag-dismiss-size) now
+       settle at or above this same floor instead of exceeding it. */
+    --tag-min-h:        1.0625rem; /* 17px @ d=1 — md */
+    --tag-min-h-sm:      0.875rem; /* 14px @ d=1 */
+    --tag-min-h-lg:      1.375rem; /* 22px @ d=1 */
+    /* One rung down the --a-ui-* scale (gh#965): tags read as metadata
+       chrome, not body copy. Whole tier ladder shifts with it (sm=2xs,
+       lg=sm) so the tiers stay one rung apart. */
+    --tag-font:         var(--a-ui-xs);
 
     /* ── Size tiers (gh#779) — md (above) is the pixel-identical default;
        [size="sm"|"lg"] below re-point the active tokens. Component-owned
@@ -43,12 +63,34 @@ tag-ui[removable]:not([disabled]):hover {
        same rung spacing the space/type scales already use. */
     --tag-px-sm:  var(--a-space-1);
     --tag-px-lg:  var(--a-space-2);
+    /* gh#1084: py flattened toward 1px/tier now that --tag-min-h floors
+       the box — was --a-space-px/--a-space-1 (1px/4px), a 4x spread;
+       the height job moved to the floor, so the ladder can compress. */
     --tag-py-sm:  var(--a-space-px);
-    --tag-py-lg:  var(--a-space-1);
-    --tag-font-sm: var(--a-ui-xs);
-    --tag-font-lg: var(--a-ui-md);
+    --tag-py-lg:  var(--a-space-0-5);
+    --tag-font-sm: var(--a-ui-2xs);
+    --tag-font-lg: var(--a-ui-sm);
     --tag-font-family:  var(--a-font-family-ui);
-    --tag-dismiss-size: 1rem;
+    /* gh#1084: was 1rem (16px). NOTE: --button-height (button.css) is a
+       MIN-height on the dismiss <button-ui>, but an icon-only button
+       also gets an explicit fixed `width: var(--button-height)`
+       ([data-icon-only], button.css) — so shrinking this token alone
+       (leaving the glyph at its old 14px) would be a no-op on height
+       (border(2px, top+bottom) + icon(14px) = 16px content already
+       exceeded the old 16px floor exactly, so content — not the
+       floor — was driving height) and would CLIP the width (a smaller
+       fixed width vs. the still-16px icon+border content). The real
+       fix is shrinking the glyph itself — see tag.class.js's dismiss
+       template, which now gives the icon its own `size="0.75rem"`
+       (12px) instead of leaning on a `--a-icon-size` CSS override here
+       (that override is dead — see the [slot="dismiss"] rule below) —
+       and re-deriving this token to match: new icon (12px) + the
+       button's own 1px top/bottom border (2px) = 14px, so width and
+       the min-height floor both land exactly on the new content size —
+       no floor/content mismatch, no clipping. Net: the dismiss button
+       (and its glyph) really is ~2px smaller in both dimensions, at
+       every [size] tier (this token isn't tiered). */
+    --tag-dismiss-size: 0.875rem;
     --tag-bg-hover:     var(--a-bg-hover);
     --tag-bg-disabled:  var(--a-ui-bg-disabled);
     --tag-fg-disabled:  var(--a-ui-text-disabled);
@@ -98,6 +140,11 @@ tag-ui[removable]:not([disabled]):hover {
        label still centers instead of reading left-aligned in an oversized
        pill. */
     width: fit-content;
+    /* gh#1084: floor, not a fixed size — mirrors tags-input-ui's own
+       min-height (tags-input.css). Decouples the chip's vertical size
+       from --tag-py so padding can stay minimal; content taller than
+       the floor (e.g. a slotted leading icon) still grows the box. */
+    min-height: var(--tag-min-h);
     justify-content: center;
     gap: var(--tag-gap);
     padding: var(--tag-py) var(--tag-px);
@@ -288,16 +335,19 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-px:  var(--tag-px-sm);
     --tag-py:  var(--tag-py-sm);
     --tag-font: var(--tag-font-sm);
+    --tag-min-h: var(--tag-min-h-sm);
   }
   :scope[size="md"] {
     --tag-px:  var(--a-space-1-5);
-    --tag-py:  var(--a-space-0-5);
-    --tag-font: var(--a-ui-sm);
+    --tag-py:  var(--a-space-px);
+    --tag-font: var(--a-ui-xs);
+    --tag-min-h: 1.0625rem; /* 17px @ d=1 — matches the :where(:scope) default */
   }
   :scope[size="lg"] {
     --tag-px:  var(--tag-px-lg);
     --tag-py:  var(--tag-py-lg);
     --tag-font: var(--tag-font-lg);
+    --tag-min-h: var(--tag-min-h-lg);
   }
 
   /* hover rule moved outside @scope — see Safari 17.x bug note at top. */
@@ -342,7 +392,18 @@ tag-ui[removable]:not([disabled]):hover {
     --button-fg: var(--tag-dismiss-fg);
     --button-bg-ghost-hover: var(--tag-dismiss-bg-hover);
     --button-fg-ghost-hover: var(--tag-dismiss-fg);
-    --a-icon-size: 0.875rem;
+    /* gh#1084: NO `--a-icon-size` override here — it doesn't work. This
+       button also carries `size="sm"` (tag.class.js), and the universal
+       `[size="sm"] { --a-icon-size: 0.875rem; }` rule (styles/api/
+       sizing.css) lives in the `utilities` cascade layer, which
+       `@layer reset, tokens, elements, components, utilities, …`
+       (styles/index.css) ranks ABOVE `components` — so it always wins
+       over anything this file sets on the same element, regardless of
+       selector specificity. The icon's rendered size is set directly
+       on the icon itself instead (tag.class.js's dismiss template gives
+       `<icon-ui size="0.75rem">` — a free-form size, which icon.class.js
+       applies as an inline style, outranking every layer). See
+       --tag-dismiss-size above — it's kept in sync with that 0.75rem. */
 
     opacity: var(--tag-dismiss-opacity);
     order: 1; /* push dismiss to end so layout reads [text] [×] */

package/components/text/text.examples.md

@@ -11,8 +11,8 @@
 ```html
 <row-ui gap="6" align="start" wrap>
   <col-ui gap="2">
-    <text-ui variant="caption" color="muted">verse</text-ui>
-    <div verse style="max-width:240px">
+    <text-ui variant="caption" color="muted">scale="ui-sm"</text-ui>
+    <div scale="ui-sm" style="max-width:240px">
       <col-ui gap="2">
         <text-ui variant="heading">Heading</text-ui>
         <text-ui variant="body">Body copy showing how this register sizes running text and the leading between lines.</text-ui>
@@ -31,8 +31,8 @@
     </div>
   </col-ui>
   <col-ui gap="2">
-    <text-ui variant="caption" color="muted">prose</text-ui>
-    <div prose style="max-width:240px">
+    <text-ui variant="caption" color="muted">scale="content-md"</text-ui>
+    <div scale="content-md" style="max-width:240px">
       <col-ui gap="2">
         <text-ui variant="heading">Heading</text-ui>
         <text-ui variant="body">Body copy showing how this register sizes running text and the leading between lines.</text-ui>

package/components/timeline/timeline-item.a2ui.json

@@ -29,12 +29,12 @@
       "type": "string"
     },
     "spinner": {
-      "description": "Show a spinner instead of the icon while status=pending.",
+      "description": "Show a spinner instead of the dot/icon while status=\"active\".",
       "type": "boolean",
       "default": false
     },
     "status": {
-      "description": "Lifecycle state (idle | pending | done | failed).",
+      "description": "Lifecycle state (idle | active | completed | error). Pairs with `spinner` on \"active\" for an in-progress step.",
       "type": "string",
       "default": "idle"
     },

package/components/timeline/timeline-item.yaml

@@ -39,11 +39,11 @@ props:
     type: string
     default: 'default'
   status:
-    description: Lifecycle state (idle | pending | done | failed).
+    description: Lifecycle state (idle | active | completed | error). Pairs with `spinner` on "active" for an in-progress step.
     type: string
     default: 'idle'
   spinner:
-    description: Show a spinner instead of the icon while status=pending.
+    description: Show a spinner instead of the dot/icon while status="active".
     type: boolean
     default: false
 

package/components/timeline/timeline.css

@@ -176,6 +176,17 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     --timeline-item-toggle-px:          var(--a-space-0-5);
     --timeline-item-toggle-time-margin: 1.5rem;
     --timeline-item-outcome-indent:     0.75rem;
+
+    /* Row-1's rendered height — [slot="label"]'s own line-height (1.4,
+       set at var(--timeline-item-label-size), timeline.css below). Marker
+       centering (dot/line/icon/caret) must measure against THIS, not a
+       bare `1.4em`: `em` on the marker's own box resolves against
+       timeline-item-ui's ambient/inherited font-size, which is NOT
+       guaranteed to equal --timeline-item-label-size (it doesn't, by
+       default — nothing sets font-size on timeline-item-ui itself), so a
+       literal `1.4em` silently drifted off the label's real line-height
+       and threw every marker's vertical center off by that gap (gh#1090). */
+    --timeline-item-row-h:              calc(var(--timeline-item-label-size) * 1.4);
   }
 
   :scope {
@@ -200,7 +211,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     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);
+    top: calc((var(--timeline-item-row-h) - var(--timeline-item-dot-size)) / 2 + 1px);
     width: var(--timeline-item-dot-size);
     height: var(--timeline-item-dot-size);
     border-radius: 50%;
@@ -235,7 +246,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     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);
+    top: calc((var(--timeline-item-row-h) + 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);
@@ -252,8 +263,17 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
     grid-column: marker;
     grid-row: 1;
     justify-self: center;
-    align-self: baseline;
-    margin-top: calc((1.4em - var(--timeline-item-icon-size)) / 2);
+    /* `baseline` anchors a baseline-less box (icon-ui has no text) by its
+       synthesized baseline — the bottom margin edge (CSS Box Alignment) —
+       to the row's shared text baseline. That pins the icon's BOTTOM to
+       near the bottom of the label's glyphs and makes the margin-top
+       centering below a no-op (the alignment step repositions the box
+       after margin is applied, so no margin-top value moves the rendered
+       circle). `start` anchors the row's block-start instead, so
+       margin-top's `(row-h - icon-size)/2` genuinely centers the icon
+       against the label's line-height (gh#1090). */
+    align-self: start;
+    margin-top: calc((var(--timeline-item-row-h) - var(--timeline-item-icon-size)) / 2);
     width: var(--timeline-item-icon-size);
     height: var(--timeline-item-icon-size);
     border-radius: 50%;
@@ -278,7 +298,7 @@ agent-reasoning-ui timeline-ui:not([orientation="horizontal"]),
 
   /* Push connector line past the icon circle */
   :scope:has([slot="icon"])::after {
-    top: calc((1.4em + var(--timeline-item-icon-size)) / 2 + 2px);
+    top: calc((var(--timeline-item-row-h) + var(--timeline-item-icon-size)) / 2 + 2px);
   }
 
   /* ═══════ Content slots ═══════ */
@@ -400,6 +420,14 @@ timeline-ui[size="sm"] > timeline-item-ui[status="active"][spinner]::before {
 timeline-ui[orientation="horizontal"] > timeline-item-ui {
   display: flex;
   flex-direction: column;
+  /* Reset the vertical-mode grid's `align-items: baseline` (timeline.css
+     above) — baseline is incompatible with cross-axis stretch, so without
+     this reset [slot="label"]/[slot="description"]/[slot="time"] (plain
+     <span>s) shrink-to-fit their own text instead of spanning the item's
+     full width, leaving `text-align: center` below with no extra width to
+     center within (labels rendered flush against the item's left edge —
+     gh#1090). */
+  align-items: stretch;
   flex: 1 1 0;
   min-width: 0;
   padding-top: calc(var(--timeline-dot-size) + var(--timeline-gap-col));

package/components/timeline/timeline.d.ts

@@ -40,9 +40,9 @@ export class UITimelineItem extends UIElement {
   duration: string;
   /** Optional leading icon name (Phosphor). */
   icon: string;
-  /** Show a spinner instead of the icon while status=pending. */
+  /** Show a spinner instead of the dot/icon while status="active". */
   spinner: boolean;
-  /** Lifecycle state (idle | pending | done | failed). */
+  /** Lifecycle state (idle | active | completed | error). Pairs with `spinner` on "active" for an in-progress step. */
   status: string;
   /** Primary step label. */
   text: string;

package/components/toast/toast.css

@@ -2,6 +2,17 @@
    TOAST-N — Notification popup with auto-dismiss.
    ═══════════════════════════════════════════════════════════════ */
 
+/* DEAD-CODE NOTICE (gh#1104, ties to Phase 4 of
+   .claude/docs/specs/feed-channel.md / SPEC-FEED-CHANNEL-001):
+   <toast-ui> is a self-removing facade — toast.class.js's
+   `connected()` posts into <feed-ui>/UIFeed then `queueMicrotask`s
+   `this.remove()`, so this element never survives to a paint. Every
+   rule below (including the `primary` variant) is unreachable at
+   runtime. The real paint site is feed.css's `@scope (feed-item-ui)`
+   block — edit THAT file to change what a posted toast looks like.
+   Kept here (not deleted) as the documented visual contract + the
+   reference the feed-item-ui `primary` variant was ported from. */
+
 /* Safari 17.x bug: `:scope[data-open]` and `:scope[data-closing]`
    (Flavor B — attribute-removal restyle) don't reliably restyle on
    attribute toggling inside `@scope`. Selectors moved out as plain
@@ -73,6 +84,10 @@ toast-ui[data-closing][position="top-left"] {
     box-shadow: var(--toast-shadow);
     opacity: 0;
     pointer-events: auto;
+    /* Elevated-surface separation over busy page content (gh#1091) —
+       mirrors loading-overlay.css's [variant="blur"] treatment. */
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
   }
 
   /* ── Position variants ── */
@@ -112,26 +127,34 @@ toast-ui[data-closing][position="top-left"] {
      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. */
+     flips). Mirrors alert.css's variant wiring.
+
+     `--toast-bg` rides `-container-high` (NOT the plain `-container`
+     alert.css uses) — a floating overlay over arbitrary page content
+     needs a stronger tonal step than an inline, already-boxed alert to
+     read as separated (gh#1091). `-container-high` is a real generated
+     role per family in colors/material-static.css (the same tier
+     `--a-{family}-subtle` aliases to per component-token-contract.md's
+     `-strong` semantics note) — not a hand-authored addition. */
 
   :where(:scope),
   :where(:scope[variant="info"]) {
-    --toast-bg:     var(--md-sys-color-info-container);
+    --toast-bg:     var(--md-sys-color-info-container-high);
     --toast-fg:     var(--md-sys-color-info-on-surface);
     --toast-border: var(--md-sys-color-info-outline-variant);
   }
   :where(:scope[variant="success"]) {
-    --toast-bg:     var(--md-sys-color-success-container);
+    --toast-bg:     var(--md-sys-color-success-container-high);
     --toast-fg:     var(--md-sys-color-success-on-surface);
     --toast-border: var(--md-sys-color-success-outline-variant);
   }
   :where(:scope[variant="warning"]) {
-    --toast-bg:     var(--md-sys-color-warning-container);
+    --toast-bg:     var(--md-sys-color-warning-container-high);
     --toast-fg:     var(--md-sys-color-warning-on-surface);
     --toast-border: var(--md-sys-color-warning-outline-variant);
   }
   :where(:scope[variant="danger"]) {
-    --toast-bg:     var(--md-sys-color-danger-container);
+    --toast-bg:     var(--md-sys-color-danger-container-high);
     --toast-fg:     var(--md-sys-color-danger-on-surface);
     --toast-border: var(--md-sys-color-danger-outline-variant);
   }

package/core/element.js

@@ -176,12 +176,43 @@ export class UIElement extends HTMLElement {
     // compliant environments: the value already matches (the property
     // setter's Object.is check short-circuits), so this never causes an
     // extra render pass on browsers/environments that already got it right.
+    // The whole pre-sync loop runs UNTRACKED: connectedCallback commonly
+    // fires synchronously inside a PARENT's render effect (template-created
+    // children connect during stamp()), and the gh#961 branch below READS
+    // `this[key]` — a tracked read there subscribes the parent's effect to
+    // this child's signals, so any later child-prop write (a `.checked`
+    // template apply) re-dirties the parent, which re-stamps fresh
+    // children, whose own mount-reads re-subscribe: the unbounded
+    // parent↔child oscillation the signals drain-loop guard traps (the
+    // admin-settings/switch-ui/button-ui loop on gh#961). Same rationale
+    // as the untracked(connected()) wrapper below.
+    untracked(() => {
     for (const [key, cfg] of Object.entries(ctor.properties)) {
       const attr = cfg.attribute ?? key.toLowerCase();
       if (this.hasAttribute(attr)) {
         this[key] = parseAttr(this.getAttribute(attr), cfg.type ?? String);
+      } else if (cfg.reflect && cfg.type === Boolean && this[key] === true) {
+        // gh#961 — stamp the initial attribute for a TRUE-default reflected
+        // boolean. installProps seeds the signal with the default but can't
+        // touch attributes (constructor restriction), and the property
+        // setter's Object.is short-circuit means a later same-value set
+        // (e.g. chat-thread's #syncEmptyFromChildren recomputing `empty:
+        // true` on first connect) never reflects either — so CSS gates like
+        // `chat-thread:not([empty]) > chat-empty` and
+        // `editor-canvas:not([empty]) > editor-canvas-empty` read the
+        // wrong state forever. Deliberately scoped to Boolean-true ONLY:
+        // reflecting string/number defaults here stamps `text=""`-shaped
+        // attributes framework-wide, flipping `[attr]` CSS gates and
+        // cascading re-renders into the signals drain-loop guard (the
+        // full-reflect attempt documented on gh#961). A false default is
+        // already a DOM no-op (removeAttribute on an absent attribute).
+        // The setAttribute replays attributeChangedCallback → parseAttr →
+        // same value → Object.is short-circuit: no signal write, no
+        // render pass.
+        this.setAttribute(attr, '');
       }
     }
+    });
     // connected() commonly reads this element's reactive properties via
     // template-literal interpolation (`${this.label}` etc.) to stamp its
     // inner DOM. If the outer call path is inside another effect (e.g.

package/core/signals.js

@@ -32,7 +32,9 @@ function flushSigs() {
   while ((q = pending)) {
     if (++loops > 100) {
       pending = null;
-      console.error(`signals: drain loop exceeded 100 iterations`);
+      // Name the still-dirty effect hosts — a bare count is undiagnosable
+      // (gh#961's oscillation took host attribution to even locate).
+      console.error(`signals: drain loop exceeded 100 iterations`, JSON.stringify([...q].map(s => s.host || '?')));
       break;
     }
     pending = null;