@adia-ai/web-components 0.8.33 → 0.8.34

package/components/nav-group/nav-group.css

@@ -10,13 +10,22 @@
     --nav-group-font-size-sm:  var(--a-ui-sm);
     --nav-group-font-size-lg:  var(--a-ui-lg);
     --nav-group-font-weight:   var(--a-weight-normal);
-    --nav-group-fg:            var(--md-sys-color-neutral-on-surface);
+    /* State color spec (gh#968, operator ruling 2026-08-11) — one
+       language with nav-item-ui:
+         idle     — bg transparent · icon NEUTRAL · text NEUTRAL-HIGH
+         hover    — bg container-low · icon + text ON-SURFACE
+         selected — bg container · icon + text ON-SURFACE
+       The selected icon no longer takes primary (supersedes gh#522's
+       glyph ruling); Figma's neutral/surfaceBright was considered for the
+       selected fill and RULED OUT — container stays (gh#795's mirror). */
+    --nav-group-fg:            var(--md-sys-color-neutral-high);
     --nav-group-fg-hover:      var(--a-fg-strong);
     --nav-group-fg-muted:      var(--a-fg-muted);
     --nav-group-fg-selected:   var(--a-fg-strong);
-    --nav-group-icon-fg-selected: var(--md-sys-color-primary); /* one selection color with --nav-item-accent (gh#522) */
+    --nav-group-icon-fg:       var(--md-sys-color-neutral);
+    --nav-group-icon-fg-selected: var(--a-fg-strong);
     --nav-group-bg-hover:      var(--a-bg-muted);
-    --nav-group-bg-selected:   var(--a-bg-selected); /* mirrors --nav-item-bg-selected — the missing container fill (gh#795) */
+    --nav-group-bg-selected:   var(--a-bg-selected); /* mirrors --nav-item-bg-selected (gh#795) */
     --nav-group-icon-size:     calc(var(--nav-group-row-height) - var(--a-space-2));
     --nav-group-badge-size:    var(--a-ui-sm);
 
@@ -119,7 +128,9 @@
     width: var(--nav-group-icon-size);
     height: var(--nav-group-icon-size);
     flex-shrink: 0;
-    color: var(--nav-group-fg-muted);
+    /* idle icon = NEUTRAL (gh#968 state spec), one step quieter than the
+       header's neutral-high text. */
+    color: var(--nav-group-icon-fg);
     transition: color var(--nav-duration-fast) var(--nav-easing);
     display: flex;
     align-items: center;

package/components/nav-item/nav-item.css

@@ -40,11 +40,19 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
     --nav-item-font-size-sm:    var(--a-ui-sm);
     --nav-item-font-size-lg:    var(--a-ui-lg);
     --nav-item-font-weight:     var(--a-weight-normal);
-    --nav-item-fg:              var(--a-ui-text-subtle);
+    /* State color spec (gh#968, operator ruling 2026-08-11):
+         idle     — bg transparent · icon NEUTRAL · text NEUTRAL-HIGH
+         hover    — bg container-low · icon + text ON-SURFACE
+         selected — bg container · icon + text ON-SURFACE
+       Idle sits two quiet steps down (icon quieter than text); hover and
+       selected converge on on-surface. The selected ICON no longer takes
+       the primary accent (supersedes gh#522 for the glyph) — the accent
+       BAR remains the primary selection marker. */
+    --nav-item-fg:              var(--md-sys-color-neutral-high);
     --nav-item-fg-hover:        var(--a-ui-text-hover);
     --nav-item-fg-selected:     var(--a-ui-text-selected);
-    --nav-item-icon-fg:         var(--a-ui-text-muted);
-    --nav-item-icon-fg-selected: var(--nav-item-accent);
+    --nav-item-icon-fg:         var(--md-sys-color-neutral);
+    --nav-item-icon-fg-selected: var(--a-ui-text-selected);
     /* Two real container roles, one mechanism — no opacity synth.
        hover    = --a-bg-muted    (--md-sys-color-neutral-container-low, 10%),
                   matching nav-group-ui's own --nav-group-bg-hover exactly.

package/components/richtext/richtext.css

@@ -15,7 +15,11 @@
     --richtext-fg:             var(--md-sys-color-neutral-on-surface);
     --richtext-fg-muted:       var(--a-fg-muted);
     --richtext-fg-subtle:      var(--md-sys-color-neutral-on-surface-variant);
-    --richtext-code-bg:        var(--a-canvas-2);
+    /* Container-low (10% alpha), not an opaque canvas tier (gh#972): the
+       inline chip must RECEDE behind prose and composite consistently on
+       any stacked surface — an opaque canvas-2 chip read heavy on the
+       page and inverted inside cards. Same tier as --a-bg-muted/hover. */
+    --richtext-code-bg:        var(--md-sys-color-neutral-container-low);
     --richtext-border:         var(--md-sys-color-neutral-outline-variant);
     --richtext-link:           var(--a-primary-bg);
     --richtext-link-hover:     var(--md-sys-color-primary);

package/components/segment/segment.css

@@ -19,6 +19,13 @@ segment-ui[selected] {
     --segment-font-size:       var(--a-ui-size);
     --segment-font-weight:     var(--a-ui-weight);
     --segment-font-family:     var(--a-font-family-ui);
+    /* Leading for the [text] label box ONLY — never the host. The host's
+       `line-height: 1` is deliberate, but the label's ::after clips to its
+       own line box, so inheriting 1 makes half-leading negative and shears
+       descenders (g/j/p/q/y, parentheses) by ~0.93px at the default size —
+       gh#906. Snug (1.3) contains the font's content box at every [size];
+       mirrors --button-label-line-height. */
+    --segment-label-line-height: var(--a-leading-snug);
 
     /* ── Colors ── */
     --segment-fg:              var(--a-ui-text-subtle);
@@ -92,6 +99,9 @@ segment-ui[selected] {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    /* `overflow: hidden` (needed for the ellipsis) makes this line box the
+       clip box — give it leading tall enough to contain the descenders. */
+    line-height: var(--segment-label-line-height);
   }
 
   /* States — hover + [selected] rules moved outside @scope; see Safari 17.x bug note at top. */

package/components/step-progress/step-progress.css

@@ -14,9 +14,15 @@
     --step-progress-caption-fg: var(--a-fg-muted);
     --step-progress-caption-size: var(--a-ui-sm);
 
-    /* Sizing — match the bespoke flex shape in registration + onboarding
-       (flex:0 1 18rem; min-width:10rem). Consumers can override. */
-    --step-progress-flex:       0 1 18rem;
+    /* Sizing — 18rem of track width, shrinkable to 10rem, matching the
+       bespoke shape in registration + onboarding. Expressed as inline-size
+       rather than flex-basis (gh#942): a flex-basis of 18rem is
+       direction-fragile — inside a COLUMN-direction flex parent (col-ui,
+       any stacked wizard) the same basis constrains HEIGHT, inflating the
+       ~30px component to 288px. inline-size constrains width in both flex
+       directions. Consumers can override. */
+    --step-progress-flex:       0 1 auto;
+    --step-progress-inline-size: 18rem;
     --step-progress-min-width:  10rem;
   }
 
@@ -25,6 +31,13 @@
     flex-direction: column;
     gap: var(--step-progress-gap);
     flex: var(--step-progress-flex);
+    /* Deliberate SCOPE-EXTENT exception: this component has always shipped
+       a default extent (previously flex-basis 18rem + min-width 10rem —
+       extent by another name, just direction-fragile). Both remain
+       token-overridable; going fully size-agnostic would silently reflow
+       the registration/onboarding row-header consumers. */
+    inline-size: var(--step-progress-inline-size);
+    max-inline-size: 100%;
     min-width: var(--step-progress-min-width);
   }
 

package/components/table/cell-types.js

@@ -282,10 +282,18 @@ registerCellType('progress', {
       wrapper = document.createElement('row-ui');
       wrapper.setAttribute('gap', '2');
       wrapper.setAttribute('align', 'center');
+      // The gridcell is a flex container; without an explicit flex the
+      // wrapper shrinks to content — and a progress bar has no intrinsic
+      // width, so the whole cell collapsed to ~33px and the value span
+      // ellipsized to "7.." (gh#940). Fill the cell; keep the numeric
+      // label un-shrinkable so the BAR absorbs the flexing instead.
+      wrapper.style.flex = '1';
+      wrapper.style.minWidth = '0';
       const prog = document.createElement('progress-ui');
       prog.setAttribute('size', 'sm');
       prog.style.flex = '1';
       const span = document.createElement('span');
+      span.style.flexShrink = '0';
       wrapper.appendChild(prog);
       wrapper.appendChild(span);
       cell.appendChild(wrapper);

package/components/table/table.a2ui.json

@@ -14,7 +14,7 @@
   ],
   "properties": {
     "columns": {
-      "description": "Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign=\"top\">).",
+      "description": "Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign=\"top\">); col-def also accepts `meta` as a JSON attribute (gh#925) — e.g. <col-def type=\"badge\" meta='{\"variants\":{\"Online\":\"success\"}}'> — so cell-type meta (badge variant maps, currency codes) is expressible in static HTML.",
       "$ref": "common_types.json#/$defs/DynamicStringList"
     },
     "component": {

package/components/table/table.class.js

@@ -432,6 +432,17 @@ export class UITable extends UIElement {
       const flex = el.getAttribute('flex');
       if (flex) col.flex = Number(flex);
 
+      /* gh#925 — cell-type meta (e.g. the badge type's per-value variant
+         map, currency's currency code) had no declarative form: columns[]
+         carries `meta` but col-def never parsed it, so a static-HTML badge
+         column was structurally stuck at the unmapped tone="muted"
+         fallback. JSON attribute, same silent-on-malformed discipline as
+         the host's `data` attribute (gh#288). */
+      const meta = el.getAttribute('meta');
+      if (meta) {
+        try { col.meta = JSON.parse(meta); } catch (_) { /* malformed JSON — ignored */ }
+      }
+
       cols.push(col);
       el.remove();
     }

package/components/table/table.css

@@ -313,8 +313,17 @@
     white-space: nowrap;
   }
 
+  /* Must match the span/a rule above: without flex:1, row-ui (a flex
+     child with default flex:0 1 auto) sizes to its own shrink-to-fit
+     content instead of filling the cell — avatar/progress composite
+     types then split that tiny intrinsic width between their
+     progress-ui/avatar-ui and label span, clipping the label (gh#940:
+     stock "71%" rendered as "7.."). Generalizes the per-renderer inline
+     flex fix from PR #945 to every composite cell type; adopted from
+     PR #943's analysis. */
   [data-body] [role="gridcell"] > row-ui {
     min-width: 0;
+    flex: 1;
     overflow: hidden;
   }
 

package/components/table/table.d.ts

@@ -86,7 +86,7 @@ export interface TableSortEventDetail {
 export type TableSortEvent = CustomEvent<TableSortEventDetail>;
 
 export class UITable extends UIElement {
-  /** Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign="top">). */
+  /** Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign="top">); col-def also accepts `meta` as a JSON attribute (gh#925) — e.g. <col-def type="badge" meta='{"variants":{"Online":"success"}}'> — so cell-type meta (badge variant maps, currency codes) is expressible in static HTML. */
   columns: string;
   /** JS property (set programmatically — `el.data = [...]`) — row records, an array of plain objects keyed to columns[].key. May also be supplied declaratively as a JSON-array `data="[…]"` attribute, hydrated once at connect (gh#288) — the same pattern chart-ui's `data` attribute uses. Custom accessor on the element class, not a reflected attribute. */
   data: string;

package/components/table/table.yaml

@@ -20,7 +20,7 @@ composes:
   - badge-ui
 props:
   columns:
-    description: Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign="top">).
+    description: Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign="top">); col-def also accepts `meta` as a JSON attribute (gh#925) — e.g. <col-def type="badge" meta='{"variants":{"Online":"success"}}'> — so cell-type meta (badge variant maps, currency codes) is expressible in static HTML.
     type: array
     default: []
     dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties

package/components/tabs/tabs.css

@@ -5,7 +5,9 @@
     --tabs-bg:              transparent;
     --tabs-radius:          var(--a-radius-md);
     --tabs-button-height:   var(--a-size);
-    --tabs-font-size:       var(--a-ui-md);
+    /* 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

package/components/tag/tag.css

@@ -30,7 +30,10 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-px:           var(--a-space-1-5);
     --tag-py:           var(--a-space-0-5);
     --tag-gap:          var(--a-space-1);
-    --tag-font:         var(--a-ui-sm);
+    /* 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
@@ -45,8 +48,8 @@ tag-ui[removable]:not([disabled]):hover {
     --tag-px-lg:  var(--a-space-2);
     --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-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;
     --tag-bg-hover:     var(--a-bg-hover);
@@ -292,7 +295,7 @@ tag-ui[removable]:not([disabled]):hover {
   :scope[size="md"] {
     --tag-px:  var(--a-space-1-5);
     --tag-py:  var(--a-space-0-5);
-    --tag-font: var(--a-ui-sm);
+    --tag-font: var(--a-ui-xs);
   }
   :scope[size="lg"] {
     --tag-px:  var(--tag-px-lg);

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;