@adia-ai/web-components 0.8.46 → 0.8.47

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.47] — 2026-08-22
+
+
+### Maintenance
+- **`components/` touched in this release window** (12 file(s), e.g. `nav-group/nav-group.css`) — carried by the entries above.
+- **`core/` touched in this release window** (1 file(s), e.g. `core/anchor.js`) — carried by the entries above.
+- **`dist/` bundles rebuilt** in this cut's window (6 file(s)) — regenerated from the source changes described above, not independent edits.
+- **`styles/` touched in this release window** (1 file(s), e.g. `colors/material-static.css`) — carried by the entries above.
+
 ## [0.8.46] — 2026-08-22
 
 

package/components/nav/nav.css

@@ -29,11 +29,11 @@
     --nav-icon-size-collapsed: 18px;
 
     /* Group-heading kicker */
-    --nav-label-fg:        var(--a-fg-muted);
+    --nav-label-fg:        var(--md-sys-color-neutral);
     --nav-label-font-size: var(--a-kicker-sm);
     --nav-label-weight:    var(--a-weight-medium);
-    --nav-label-px:        var(--a-space-4);
-    --nav-label-py:        var(--a-space-3) var(--a-space-1);
+    --nav-label-px:        var(--a-space-2);
+    --nav-label-py:        var(--a-space-4) var(--a-space-1);
   }
 
   :scope {
@@ -76,6 +76,10 @@
   [data-nav-label] {
     display: block;
     padding: var(--nav-label-py) var(--nav-label-px);
+    /* Deliberate inline-start bump beyond the shared padding shorthand
+       above, so the kicker breathes more on its leading edge than its
+       trailing one (gh#1736). */
+    padding-inline-start: var(--a-space-2);
     font-size: var(--nav-label-font-size);
     font-weight: var(--nav-label-weight);
     color: var(--nav-label-fg);

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

@@ -19,20 +19,26 @@
        glyph ruling); Figma's neutral/surfaceBright was considered for the
        selected fill and RULED OUT — container stays (gh#795's mirror).
        gh#968's ladder above is about ROUTE selection (hover/selected);
-       it says nothing about the group's own open/closed disclosure state,
-       which --nav-group-fg left pinned unconditionally to one role
-       (neutral-high) regardless of [open]. gh#1740 (operator ruling,
-       2026-08-19) supersedes that unconditional pin with a second,
-       orthogonal axis — the header text and caret glyph now also shift
-       role by [open], the same way they already shift by [selected]/
-       hover; the two ladders compose (a selected-route header still wins
-       its --nav-group-fg-selected treatment regardless of open state —
-       see the :scope[open] rule below, kept lower-precedence than
-       :scope[selected] by source order). */
-    --nav-group-fg:            var(--md-sys-color-neutral);
-    --nav-group-fg-active:     var(--md-sys-color-neutral-high);
+       it says nothing about the group's own open/closed disclosure state.
+       Header-TEXT history: gh#1740 (2026-08-19) split idle text into an
+       [open]-keyed role (idle NEUTRAL, open NEUTRAL-HIGH), and PR 460
+       (gh#459) added a third [selected] role on top. On 2026-08-22 (Kim,
+       live) the state split was removed and the header text settled on
+       one unconditional NEUTRAL-HIGH for idle/open/selected alike — no
+       [open]/[selected] header-text override rules exist below anymore.
+       --nav-group-fg-selected is KEPT (not deleted) because a second,
+       unrelated consumer still needs the distinct role: the popover's
+       selected/current-option row below (`[role="option"]
+       [aria-current="page"]`/`[aria-selected="true"]`) documents (TKT-
+       0017) that its color change is one of three signals (with bg fill
+       + font-weight) marking the current page in that list. The caret
+       glyph's own [open] ladder (gh#1740, below) is UNCHANGED. */
+    --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);
+    /* Consumed ONLY by the popover's selected/current-option row further
+       down this file — no longer by the group header (see the
+       --nav-group-fg comment above); keep this scoped to that one use. */
     --nav-group-fg-selected:   var(--a-fg-strong);
     --nav-group-icon-fg:       var(--md-sys-color-neutral);
     --nav-group-icon-fg-selected: var(--a-fg-strong);
@@ -89,40 +95,31 @@
     background: var(--nav-group-indent-rail-bg, var(--md-sys-color-neutral-outline-variant));
     pointer-events: none;
   }
-  /* Disclosure-state ladder (gh#1740, operator ruling 2026-08-19): the
-     header text and caret glyph step UP a role when the group is open —
-     idle/closed reads NEUTRAL, expanded reads NEUTRAL-HIGH. Placed BEFORE
-     the [selected]/[data-selected-within] block below so an equal-
-     specificity (0,3,0) tie always resolves to the route-selection color:
-     a selected-route group keeps its existing --nav-group-fg-selected
-     treatment regardless of its own open/closed state — this rule only
-     ever wins when the group is open AND not selected. */
-  :scope[open] > [slot="header"] {
-    color: var(--nav-group-fg-active);
-  }
+  /* Disclosure-state ladder (gh#1740, operator ruling 2026-08-19) — the
+     caret glyph steps UP a role when the group is open: idle/closed reads
+     NEUTRAL-LOW, expanded reads NEUTRAL. The matching header-TEXT half of
+     this ladder (--nav-group-fg-active) was reverted 2026-08-22 — header
+     text is unconditional plain NEUTRAL now (see the --nav-group-fg
+     comment above), so only the caret still steps by [open]. */
   :scope[open] > [slot="header"] [slot="caret"] {
     color: var(--nav-group-caret-fg-active);
   }
-  /* Selected-look header treatment keys on [selected] — the CSS half of
-     gh issue 459 (PR 460 corrected the icon weight): the group CONTAINING
-     the selected route reads strong; a merely-expanded group does not.
-     Text color applies in BOTH rail modes — subtle, no double-marking risk.
-     The BACKGROUND fill (gh#795) is collapsed-only (see the two
-     nav-ui[collapsed] / @container sidebar blocks below): [selected] and
+  /* Selected header TEXT color previously diverged here (gh#459/PR 460:
+     the group CONTAINING the selected route read strong text). Reverted
+     2026-08-22 along with the [open] split above — header text is now
+     plain NEUTRAL in every state, so this rule was removed as dead code
+     rather than left pointing at a token that resolves to the same value
+     as the ambient [slot="header"] color. The BACKGROUND fill (gh#795)
+     is UNCHANGED and still collapsed-only (see the two nav-ui[collapsed]
+     / @container sidebar blocks below): [selected] and
      [data-selected-within] both mean "CONTAINS the selected route", never
      "IS the selected route" (nav-group.class.js's own doc comment on the
-     `selected` prop — consumers set it from active-route logic exactly
-     like the JS-derived data-selected-within case; there is no
-     directly-selected-leaf-group state distinct from it). In the expanded
-     rail the contained child already paints its own real selected pill
-     (nav-item.css), so a header background here double-marks the same
-     selection (gh#806 — operator screenshot, profile-security). Collapsed
-     hides the children, so the header becomes the ONLY selection signal
-     and needs the fill nav-item-ui gets. */
-  :scope[selected] > [slot="header"],
-  :scope[data-selected-within] > [slot="header"] {
-    color: var(--nav-group-fg-selected);
-  }
+     `selected` prop). In the expanded rail the contained child already
+     paints its own real selected pill (nav-item.css), so a header
+     background here would double-mark the same selection (gh#806);
+     collapsed hides the children, so the header becomes the ONLY
+     selection signal and needs the fill nav-item-ui gets — that part of
+     the design is untouched by this text-color collapse. */
   /* Icon color = the SELECTION color, one language with nav-item's accent
      glyph (gh#522, operator ruling 2026-07-30): filled + primary whenever
      this group is selected OR contains the selected route.

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

@@ -40,14 +40,20 @@ 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);
-    /* State color spec (gh#968, operator ruling 2026-08-11):
+    /* State color spec (gh#968, operator ruling 2026-08-11; idle tier
+       re-confirmed NEUTRAL-HIGH 2026-08-22 after a brief same-day
+       collapse-to-NEUTRAL experiment, Kim — mirrored in nav-group-ui's
+       header, nav-group.css):
          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. */
+       Hover and selected converge on on-surface (--a-ui-text-hover/
+       -selected) — that ladder step carries the component's only
+       remaining visual selected-state cue in the section variant (see
+       below) and is intentionally distinct from idle.
+       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);

package/components/preview/preview.class.js

@@ -90,8 +90,18 @@ export class UIPreview extends UIElement {
     const code = document.createElement('code-ui');
     code.setAttribute('language', lang);
     // The CODE pane shows the clean consumer-facing HTML — strip doc-only
-    // corpus markers (data-chunk / -kind / -slot) that the render keeps.
-    code.textContent = source.replace(/\s+data-chunk(?:-[a-z]+)?="[^"]*"/g, '');
+    // corpus markers (data-chunk / -kind / -slot) that the render keeps,
+    // plus `data-a2ui-id` — bookkeeping the A2UI runtime renderer stamps on
+    // every element it creates (packages/gen-ui/a2ui/renderer.js's
+    // `newEl.setAttribute('data-a2ui-id', comp.id)`), never something an
+    // author writes. Only reachable when this source came from ALREADY-
+    // rendered A2UI DOM (site-a2ui docs pages feeding real component
+    // subtrees into <preview-ui> as children instead of authoring literal
+    // markup) — a hand-authored `<preview-ui>` in an .examples.html never
+    // has it, so the strip is a no-op there.
+    code.textContent = source
+      .replace(/\s+data-chunk(?:-[a-z]+)?="[^"]*"/g, '')
+      .replace(/\s+data-a2ui-id="[^"]*"/g, '');
     codeWrap.appendChild(code);
     return codeFirst ? [codeWrap, render] : [render, codeWrap];
   }

package/components/table-toolbar/table-toolbar.a2ui.json

@@ -80,6 +80,16 @@
       "type": "number",
       "default": 0
     },
+    "size": {
+      "description": "Toolbar scale, via sizing.css's universal [size=\"sm|md|lg\"] ambient tokens. Not table-toolbar-specific chrome — the same attribute that scales any component. Set it once on the toolbar instead of on each slotted scope/actions-leading/actions control individually; anything slotted with no [size] of its own inherits the ambient value. Default (empty) = md.",
+      "type": "string",
+      "enum": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": ""
+    },
     "stage": {
       "description": "Explicit compaction-stage override (ADR-0076). Unset (the default, empty string) means auto-snap: the toolbar's own inline-size container query picks the nearest stage from its live width against the three --table-toolbar-bp-* breakpoints, snapping discretely, never interpolating. Setting stage explicitly pins that stage's rendering regardless of the container's actual width — overriding the container query, mirroring chart-ui's ratio override shape. Primary use: visual-eval fixtures that need a deterministic stage without resizing a real container, and a consumer embedding the toolbar inside a known-narrow panel who wants to skip auto-detection entirely. All four stages' CSS is now live (ADR-0076): search-tight steps the search field down (step 2); icon-only drops control labels and compacts/hides the range summary (steps 3+4); overflow collapses Filter/Sort/Columns into one \"More\" trigger routed through the same menu-ui/menu-item-ui pattern used elsewhere in the corpus (step 5). The resolved stage — the pin if set, otherwise the live width classification — also reflects onto the host as `data-stage-resolved` (step 7, informational only, mirrors chart-ui's `data-ratio-resolved` convention — never drives table-toolbar's own rendering, which stays 100% CSS-driven).",
       "type": "string",

package/components/table-toolbar/table-toolbar.class.js

@@ -153,6 +153,20 @@ function collectUniqueValues(col, data) {
 export class UITableToolbar extends UIElement {
   static properties = {
     for:         { type: String,  default: '',         reflect: true },
+    // Not consumed by any table-toolbar-specific CSS — sizing.css's
+    // universal [size="sm|md|lg"] (unscoped attribute selector, ambient
+    // inheriting tokens) already governs the host AND every slotted
+    // consumer content (scope select-ui, actions-leading/actions
+    // button-ui) that carries no [size] of its own, same as
+    // `<div size="sm">…</div>`. Declared (reflect: true) purely so this
+    // A2UI-modeled prop survives the docs-transpiler's schema-scoped
+    // attribute walk (unmodeled attributes are silently dropped there —
+    // verified live: `<table-toolbar-ui size="sm">` authored in
+    // table-toolbar.examples.html rendered with no [size] attribute at
+    // all on the generated site-a2ui page until this was added) and so
+    // `el.size = 'sm'` works from JS, matching card-ui/button-ui's own
+    // `size` property shape.
+    size:        { type: String,  default: '',         reflect: true },
     text:        { type: String,  default: '',         reflect: false },
     count:       { type: String,  default: '',         reflect: false },
     rangeStart:  { type: Number,  default: 0,          reflect: true, attribute: 'range-start' },
@@ -233,6 +247,27 @@ export class UITableToolbar extends UIElement {
 
   connected() {
     this.setAttribute('role', 'toolbar');
+    // `size` (declared above, reflect: true) defaults to '' — the base
+    // property system's own reflect pass (core/element.js) deliberately
+    // does NOT auto-stamp a non-empty string/number default onto the DOM
+    // (gh#961: scoped to Boolean-true defaults only, to avoid a
+    // framework-wide `attr=""`-stamping cascade), so a bare
+    // `<table-toolbar-ui>` never actually gets a `[size]` attribute from
+    // the default alone. Stamped explicitly, once, HERE — sizing.css's
+    // `[size="sm"]` is a plain unscoped attribute selector that needs the
+    // literal attribute present to set the ambient `--a-size`/`--a-ui-size`
+    // tokens at all. Every native control this component stamps below
+    // (badge, search, page-size select, granular buttons, overflow
+    // trigger) is a light-DOM descendant with no `[size]` of its own, so
+    // it inherits those tokens the same way any plain
+    // `<div size="sm">…</div>` cascades to its children — no per-child
+    // `size=` stamping needed (tried first, reverted: redundant with what
+    // inheritance already does for every element still in this light-DOM
+    // subtree, and actively wrong once a consumer sets an explicit
+    // `size="lg"` after connect — the per-child copies would go stale
+    // since nothing re-stamps them on a later property change, while
+    // inheritance updates live).
+    if (!this.hasAttribute('size')) this.setAttribute('size', this.size || 'sm');
     this.#warnUnknownOptOutAttrs();
     // gh#1615 — hydrate `page-size-options="[10,25,50]"` once at connect,
     // same pattern as table-ui's `data`/`columns` JSON-array attributes
@@ -479,6 +514,26 @@ export class UITableToolbar extends UIElement {
 
   // ── DOM stamp ────────────────────────────────────────────────────────────
 
+  // Used ONLY for the two stamped elements that end up OUTSIDE
+  // table-toolbar-ui's own light DOM — the popover-panel action buttons
+  // (#mkPopoverAction) and the filter-input (#fillFilterPanel), both
+  // appended to `document.body` for the Popover API's top-layer promotion
+  // (#togglePopover) — so ambient CSS inheritance from the host's own
+  // `[size]` attribute (stamped once in connected(), above) can never
+  // reach them. Every OTHER stamped control (badge, search, page-size
+  // select, granular Filter/Sort/Columns buttons, the overflow trigger)
+  // stays in the host's own light DOM and inherits that ambient value
+  // directly — no per-element `size=` copy needed, and no risk of one
+  // going stale after a later `.size =` change the way an explicit copy
+  // would (tried first, reverted: every in-tree control hardcoded
+  // `size="sm"` unconditionally, which not only ignored a consumer's
+  // `size="lg"` but also fought its OWN copy going stale on any later
+  // property change nothing re-stamped). Falls back to "sm" (the
+  // pre-existing hardcoded default) when `size` is unset.
+  #stampSize() {
+    return this.size || 'sm';
+  }
+
   #stamp() {
     if (this.querySelector(':scope > [data-toolbar]')) return;
 
@@ -509,7 +564,8 @@ export class UITableToolbar extends UIElement {
 
     const badge = document.createElement('badge-ui');
     badge.setAttribute('data-toolbar-count-badge', '');
-    badge.setAttribute('size', 'sm');
+    // No own [size] — inherits the host's ambient --a-size (stamped in
+    // connected(), above).
     badge.setAttribute('tone', 'muted');
     badge.hidden = true;
     title.appendChild(badge);
@@ -577,7 +633,7 @@ export class UITableToolbar extends UIElement {
     // name renders as literal text before the icon registry resolves.
     const search = document.createElement('search-ui');
     search.setAttribute('data-search', '');
-    search.setAttribute('size', 'sm');  // match toolbar buttons + badge + filter chips
+    // No own [size] — inherits the host's ambient --a-size, same as badge.
     search.setAttribute('placeholder', this.placeholder);
     search.setAttribute('debounce', String(SEARCH_DEBOUNCE));
     search.addEventListener('search', this.#onSearch);
@@ -590,7 +646,7 @@ export class UITableToolbar extends UIElement {
     // existing default behavior for consumers that never set pageSizeOptions.
     const pageSize = document.createElement('select-ui');
     pageSize.setAttribute('data-page-size', '');
-    pageSize.setAttribute('size', 'sm');
+    // No own [size] — inherits the host's ambient --a-size, same as badge.
     pageSize.setAttribute('aria-label', 'Rows per page');
     pageSize.hidden = true;
     pageSize.addEventListener('change', this.#onPageSizeChange);
@@ -645,7 +701,12 @@ export class UITableToolbar extends UIElement {
     btn.setAttribute('data-popover-action', '');
     btn.setAttribute('text', label);
     btn.setAttribute('variant', 'ghost');
-    btn.setAttribute('size', 'sm');
+    // Explicit [size] IS still needed here, unlike the in-tree stamped
+    // controls above — #togglePopover appends this button's panel straight
+    // to `document.body` (Popover API top-layer promotion), not nested
+    // inside table-toolbar-ui in the DOM, so ambient CSS inheritance from
+    // the host's own [size] never reaches it.
+    btn.setAttribute('size', this.#stampSize());
     btn.setAttribute('stretch', '');
     btn.addEventListener('click', onClick);
     return btn;
@@ -657,7 +718,7 @@ export class UITableToolbar extends UIElement {
     btn.setAttribute('icon', icon);
     btn.setAttribute('text', label);
     btn.setAttribute('variant', 'outline');
-    btn.setAttribute('size', 'sm');
+    // No own [size] — inherits the host's ambient --a-size, same as badge.
     btn.setAttribute('aria-haspopup', 'menu');
     // ADR-0076 REQ-X-002 — unconditional (harmless at full-text stages,
     // becomes the hover-tooltip affordance at the icon-only stage once
@@ -689,7 +750,7 @@ export class UITableToolbar extends UIElement {
     trigger.setAttribute('slot', 'trigger');
     trigger.setAttribute('icon', 'dots-three-vertical');
     trigger.setAttribute('variant', 'outline');
-    trigger.setAttribute('size', 'sm');
+    // No own [size] — inherits the host's ambient --a-size, same as badge.
     // REQ-X-003 — a genuinely new interactive element (not a repurposed
     // existing button), so it needs its own static accessible name rather
     // than an inherited one. No [text] attribute — always icon-only,
@@ -1085,7 +1146,9 @@ export class UITableToolbar extends UIElement {
       } else {
         const input = document.createElement('input-ui');
         input.setAttribute('type', 'text');
-        input.setAttribute('size', 'sm');
+        // Explicit [size] needed — this panel is appended straight to
+        // document.body (see #mkPopoverAction's comment above).
+        input.setAttribute('size', this.#stampSize());
         input.setAttribute('data-filter-input', '');
         input.setAttribute('placeholder', '—');
         if (current?.op === 'contains') input.value = current.value ?? '';

package/components/table-toolbar/table-toolbar.css

@@ -284,6 +284,21 @@
     flex: 0 0 auto;
   }
 
+  /* See [data-page-size]'s own comment below — same --select-min-width
+     floor, same fix, but targeted at the select-ui DESCENDANT directly
+     rather than set as an inheriting custom property on the [data-scope]
+     wrapper: select-ui's own `:where(:scope) { --select-min-width: 20ch }`
+     (select.css) directly assigns the property on the select-ui element
+     itself — a direct assignment always wins over an inherited value
+     regardless of the assigning rule's (here, zero) specificity, so a
+     value merely inherited from an ancestor wrapper never actually
+     reaches it. Matching the select-ui element directly puts this
+     override in the same competition as that rule, where normal
+     specificity comparison (0,2,0) vs (0,0,0) applies and this wins. */
+  [data-scope] select-ui {
+    --select-min-width: 0;
+  }
+
   [data-scope]:empty { display: none; }
 
   /* ═══════ Title cluster ═══════ */
@@ -305,6 +320,21 @@
 
   [data-toolbar-count-badge][hidden] { display: none; }
 
+  /* Scope reconciliation — a filled [slot="scope"] already names the
+     entity being listed (a select/menu whose own displayed value IS the
+     label, e.g. "All Accounts (3)"), so the separate [text]/[count] title
+     cluster next to it says the same thing twice ("All accounts" +
+     "Accounts 3"). CSS-only, not #updateTitle() (JS never even sees
+     [text]/[count] are redundant here — [count] still falls back to the
+     bound table's row length regardless, so a JS hide would need a new
+     prop; this reads what's already in the DOM, same `:has()` idiom the
+     [data-summary]/[data-page-size] reconciliation above already uses).
+     A consumer wanting BOTH visible can still override with normal CSS
+     specificity — this isn't a hard mode switch, just the default. */
+  :scope:has([data-scope]:not(:empty)) [data-title] {
+    display: none;
+  }
+
   /* ═══════ Range summary ═══════ (gh#1615 — "Showing X–Y of N", independent of [data-title]) */
 
   [data-summary] {
@@ -371,7 +401,17 @@
      --table-toolbar-bp-overflow's own default (same duplication +
      source-assertion discipline as the search-tight/icon-only boundaries
      above). */
-  [data-toolbar-overflow] { display: none; }
+  /* BUG (found live, verified in a real browser — a fresh table-toolbar-ui
+     at ANY stage, including "full", rendered Filter/Sort/Columns AND the
+     "More" trigger simultaneously): menu-ui's own base rule (menu.css,
+     `:scope { display: flex; }`) is the same (0,1,0) specificity as a bare
+     `[data-toolbar-overflow]` selector — a cascade TIE this file's source
+     order loses (menu.css wins), so this default-hide rule never actually
+     applied. The `:scope … [data-toolbar-overflow][hidden]` override below
+     already carries the `:scope` prefix for exactly this reason (its own
+     comment: "must match or exceed the (0,3,0) specificity … to win the
+     tie") — this rule needed the same prefix and never got it. */
+  :scope [data-toolbar-overflow] { display: none; }
 
   @container table-toolbar (max-width: 26rem) {
     :scope:is(:not([stage]), [stage=""]) [data-toolbar-btn] {
@@ -405,19 +445,62 @@
      conflicting author rule. */
   :scope [data-toolbar-overflow][hidden] { display: none; }
 
+  /* menu-ui's own popover carries a hardcoded `min-width: 10rem` (menu.css
+     — a LITERAL, not even the `--menu-popover-min-width` token declared
+     next to it: the popover is promoted to the top layer via the Popover
+     API but stays a real light-DOM child of <menu-ui>, per menu.css's own
+     comment "the top-layer element can't inherit the scoped token", so
+     that rule hardcodes the value instead of reading the custom property).
+     Same class of bug as --input-min-width/--select-min-width above: sized
+     for a generic dropdown menu of arbitrary action items, not this
+     specific "More" trigger's three short labels (Filter/Sort/Columns),
+     each already narrower than 10rem on its own. Scoped to JUST this
+     menu-ui instance (`[data-toolbar-overflow]`) — the [data-menu-popover]
+     it targets is menu-ui's own internal implementation selector, not
+     table-toolbar's; overriding the LITERAL selector directly here rather
+     than touching menu.css keeps every other menu-ui consumer's own
+     10rem floor (a reasonable default for a menu of arbitrary items)
+     untouched. */
+  :scope [data-toolbar-overflow] [data-menu-popover] {
+    min-width: 0;
+  }
+
   /* ═══════ Search ═══════ */
 
   [data-search] {
     flex: 1 1 var(--table-toolbar-search-min);
     /* gh#1076 — never collapse to 0: floor at a usable width and let the
-       flex-wrap above move it to its own row when the container is tight. */
-    min-width: min(10rem, 100%);
+       flex-wrap above move it to its own row when the container is tight.
+       BUG (found live, 2026-08-22): this used to be a hardcoded
+       `min(10rem, 100%)`, independent of `--table-toolbar-search-min` —
+       at the search-tight/icon-only/overflow stages that token gets
+       reassigned to `--table-toolbar-search-tight-min` (9rem default),
+       but the hardcoded 10rem floor here still won, so the tight tier's
+       own declared 9rem target could never actually be reached. Deriving
+       the floor from the SAME token as the flex-basis keeps them in sync
+       at every stage instead of drifting against each other. */
+    min-width: min(var(--table-toolbar-search-min), 100%);
     max-width: var(--table-toolbar-search-max);
     margin-inline-start: auto;
   }
 
   [data-search][hidden] { display: none; }
 
+  /* input-ui's own --input-min-width default (20ch — input.css) is sized
+     for a BARE, standalone field where the component has no other context
+     to size against. Inside [data-search] that's a second, independent
+     floor competing with the one above — at the tight/icon-only/overflow
+     stages input-ui's 20ch (~164px) is WIDER than
+     --table-toolbar-search-tight-min (9rem/144px), so it silently won
+     regardless of what [data-search]'s own min-width — even after the fix
+     above — asked for. table-toolbar-ui owns the search field's sizing
+     budget end-to-end (it's the one deciding how much room is left after
+     the title/controls/page-size clusters); input-ui's independent
+     opinion has nothing to add here and only fights the outer token. */
+  [data-search] input-ui {
+    --input-min-width: 0;
+  }
+
   /* ═══════ Actions-leading slot ═══════ (gh#1649 — app-owned triggers, e.g.
      custom Filter/Columns buttons, that land BEFORE the page-size select)
      Carries the SAME margin-inline-start:auto as [data-search]/[data-page-size]
@@ -449,9 +532,23 @@
      is safe — only the first one with unclaimed free space to its left
      actually receives it. */
 
+  /* select-ui's own --select-min-width default (20ch — select.css,
+     gh#1633, the SAME UA-baseline floor input.css's --input-min-width
+     already documents for input-ui) is sized for a bare, standalone
+     select. Found live (root-caused alongside the earlier search-field
+     min-width fix, same shape): with no override here, [data-page-size]
+     and [data-scope] select-ui both floor at ~151px regardless of how
+     short their actual content is ("25 / page", "All Accounts (3)") —
+     visible dead space inside the trigger. The filter/sort/columns
+     popover's OWN per-column selects already avoid this (they share the
+     `[data-filter-input]` marker with the text-input case, and
+     `[data-toolbar-popover] [data-filter-input] { min-width: 0; }`
+     already resets it there) — this is the same fix for the two
+     main-row selects that marker doesn't reach. */
   [data-page-size] {
     flex: 0 0 auto;
     margin-inline-start: auto;
+    --select-min-width: 0;
   }
 
   [data-page-size][hidden] { display: none; }

package/components/table-toolbar/table-toolbar.d.ts

@@ -50,6 +50,8 @@ export class UITableToolbar extends UIElement {
   rangeStart: number;
   /** Total row count across all pages, for the range summary (e.g. `320` in "Showing 1–25 of 320"). Distinct from pagination-ui's `total` (total PAGES) — this is total ROWS; deliberately not spelled `total` to avoid that cross-sibling name collision (ADR-0063 B5). See rangeStart. */
   rangeTotal: number;
+  /** Toolbar scale, via sizing.css's universal [size="sm|md|lg"] ambient tokens. Not table-toolbar-specific chrome — the same attribute that scales any component. Set it once on the toolbar instead of on each slotted scope/actions-leading/actions control individually; anything slotted with no [size] of its own inherits the ambient value. Default (empty) = md. */
+  size: 'sm' | 'md' | 'lg';
   /** Explicit compaction-stage override (ADR-0076). Unset (the default, empty string) means auto-snap: the toolbar's own inline-size container query picks the nearest stage from its live width against the three --table-toolbar-bp-* breakpoints, snapping discretely, never interpolating. Setting stage explicitly pins that stage's rendering regardless of the container's actual width — overriding the container query, mirroring chart-ui's ratio override shape. Primary use: visual-eval fixtures that need a deterministic stage without resizing a real container, and a consumer embedding the toolbar inside a known-narrow panel who wants to skip auto-detection entirely. All four stages' CSS is now live (ADR-0076): search-tight steps the search field down (step 2); icon-only drops control labels and compacts/hides the range summary (steps 3+4); overflow collapses Filter/Sort/Columns into one "More" trigger routed through the same menu-ui/menu-item-ui pattern used elsewhere in the corpus (step 5). The resolved stage — the pin if set, otherwise the live width classification — also reflects onto the host as `data-stage-resolved` (step 7, informational only, mirrors chart-ui's `data-ratio-resolved` convention — never drives table-toolbar's own rendering, which stays 100% CSS-driven). */
   stage: '' | 'full' | 'search-tight' | 'icon-only' | 'overflow';
   /** Title text shown on the left. */

package/components/table-toolbar/table-toolbar.examples.md

@@ -14,45 +14,45 @@
 ## Rendered demos
 
 ```html
-<col-ui gap="0">
-  <table-toolbar-ui for="demo-table" text="All employees" count="32" placeholder="Search employees…"></table-toolbar-ui>
-  <card-ui>
-    <section bleed>
-      <table-ui id="demo-table" sortable raw>
-        <table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Role</th>
-              <th>Status</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Maya Chen</td>
-              <td>Designer</td>
-              <td>
-                <tag-ui variant="success">Active</tag-ui>
-              </td>
-            </tr>
-            <tr>
-              <td>Alex Park</td>
-              <td>Engineer</td>
-              <td>
-                <tag-ui variant="success">Active</tag-ui>
-              </td>
-            </tr>
-            <tr>
-              <td>Jordan Lee</td>
-              <td>Product</td>
-              <td>
-                <tag-ui variant="warning">Away</tag-ui>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </table-ui>
-    </section>
-  </card-ui>
-</col-ui>
+<card-ui>
+  <header>
+    <table-toolbar-ui for="demo-table" text="All employees" count="32" placeholder="Search employees…"></table-toolbar-ui>
+  </header>
+  <section bleed>
+    <table-ui id="demo-table" sortable raw>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Role</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Maya Chen</td>
+            <td>Designer</td>
+            <td>
+              <tag-ui variant="success">Active</tag-ui>
+            </td>
+          </tr>
+          <tr>
+            <td>Alex Park</td>
+            <td>Engineer</td>
+            <td>
+              <tag-ui variant="success">Active</tag-ui>
+            </td>
+          </tr>
+          <tr>
+            <td>Jordan Lee</td>
+            <td>Product</td>
+            <td>
+              <tag-ui variant="warning">Away</tag-ui>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </table-ui>
+  </section>
+</card-ui>
 ```

package/components/table-toolbar/table-toolbar.yaml

@@ -40,6 +40,20 @@ props:
     type: string
     default: ""
     reflect: true
+  size:
+    description: >-
+      Toolbar scale, via sizing.css's universal [size="sm|md|lg"] ambient
+      tokens. Not table-toolbar-specific chrome — the same attribute that
+      scales any component. Set it once on the toolbar instead of on each
+      slotted scope/actions-leading/actions control individually; anything
+      slotted with no [size] of its own inherits the ambient value.
+      Default (empty) = md.
+    type: string
+    default: ""
+    enum:
+    - sm
+    - md
+    - lg
   text:
     description: Title text shown on the left.
     type: string