@adia-ai/web-components 0.8.45 → 0.8.47

package/components/table-footer/table-footer.yaml

@@ -0,0 +1,219 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UITableFooter
+tag: table-footer-ui
+status: beta
+component: TableFooter
+category: agent
+version: 1
+description: >-
+  Footer / companion bar for a sibling table-ui (gh#1807, ADR-0080) — a
+  "Showing X–Y of N" range label paired with a composed pagination-ui.
+  Derivation-model API: set `page` / `page-size` / `range-total` and the
+  footer derives total pages and the range window itself, so it never
+  drifts out of sync with its own pager. Wired to the target table via a
+  [for] id-ref and CustomEvents only (ADR-0079/ADR-0080) — the footer never
+  writes a property or calls a method on the bound table. Drop below (or
+  inside a card-ui footer alongside) any table-ui to add the standard
+  data-grid pager + range summary without re-implementing pagination-ui's
+  ellipsis truncation, keyboard handling, or ARIA.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - pagination-ui
+props:
+  for:
+    description: id-ref of the table-ui to control. Falls back to the first sibling table-ui within the same parent when omitted.
+    type: string
+    default: ""
+    reflect: true
+  page:
+    description: >-
+      Current page, 1-based. Explicit attributes always win over derivation
+      (per-attribute, not all-or-nothing) — see page-size/range-total.
+    type: number
+    default: 1
+    reflect: true
+  page-size:
+    description: >-
+      Rows per page. Default 0 (unknown) is the ORDINARY default state, not
+      an exotic edge case: with page-size absent/0 and range-total present,
+      the range label renders in count-only form ("128 items") and the
+      pager does not render — the derivation math (pages = range-total /
+      page-size) is undefined without a page size. In a client-mode
+      composition (the resolved target has [paginate] > 0) and this
+      attribute is unset, the footer derives page-size from the target's
+      own [paginate] value.
+    type: number
+    default: 0
+    reflect: true
+  range-total:
+    description: >-
+      Total ROWS across all pages. Absent (the default) means "not yet
+      known" (loading) — never "zero"; both the range label and the pager
+      stay hidden until this is set. Explicit range-total="0" is the
+      confirmed-empty state (pager hidden; the `empty` slot renders in the
+      range label's position when supplied). Named identically to
+      table-toolbar-ui's [range-total] and table-ui's own [range-total]
+      (gh#1754, ADR-0082) and deliberately NOT `total` (pagination-ui's
+      `total` is total PAGES — the ADR-0063 B5 collision rule). When this
+      attribute is unset, the footer derives it from the resolved target
+      via a two-branch ladder (REQ-W-006, amended 0.2.0/ADR-0082):
+      (1) the target's own [range-total] attribute, when present — the
+      table-authoritative SERVER mode (gh#1754 Shape 1's second lawful
+      composition); the identity rule: the footer's range-total derives
+      from the table's range-total, never the table's filteredCount, and
+      this branch wins even when the target's [paginate] is also > 0;
+      (2) otherwise, when the target has [paginate] > 0, CLIENT mode: the
+      target's filtered row count (search + column filters applied, before
+      pagination). Refreshes on the target's `page` / `filter-change` /
+      `sort` events in either branch. Widened named staleness edge: a
+      programmatic `.data` swap on the target — or a `range-total` update
+      on the target without an accompanying page move — emits no event;
+      either re-set this footer's own attributes after such a change, or
+      accept staleness until the target's next event.
+    type: number
+    default: 0
+    reflect: true
+  siblings:
+    description: Passed through to the composed pagination-ui's own [siblings] (page-number window size on each side of the current page).
+    type: number
+    default: 1
+    reflect: true
+  size:
+    description: Passed through to the composed pagination-ui's own [size] (sm | md | lg, the universal size system).
+    type: string
+    default: md
+    reflect: true
+events:
+  footer-page:
+    description: >-
+      gh#1807, ADR-0080 (events-only interaction contract, extending
+      ADR-0079's sender-prefixed toolbar-* precedent to a second sender) —
+      dispatched directly at the resolved [for] target on every pager
+      interaction. Detail: { page } (1-based). table-ui listens for this on
+      itself, applied only when [paginate] > 0 (clamped to the valid page
+      range; a non-numeric/NaN detail.page is a no-op); at [paginate="0"]
+      the command is a documented no-op on the table. Additive: any
+      consumer, not only table-footer-ui, may dispatch this at a table-ui.
+  page-change:
+    description: >-
+      The footer's own consumer-facing notification — a distinct name from
+      the inbound footer-page command (ADR-0079's command≠notification
+      separation). Fires on every pager interaction, in both client- and
+      server-mode. Detail: { page } (1-based). This is the server-mode
+      fetch hook: a consumer listens for it, fetches the new page, then
+      sets `table.data` and the footer's own `page` (and `range-total` if
+      the server's total moved) — the footer never optimistically advances
+      its own state in server-mode.
+slots:
+  empty:
+    description: >-
+      Renders in place of the range label — the same [data-range] region —
+      when [range-total] is EXPLICITLY present and equal to "0" (checked
+      via hasAttribute, never the computed value alone, so an unset
+      range-total during loading never flashes this content). Mutually
+      exclusive with a positive [range-total]: the normal "Showing X–Y of N"
+      (or count-only) text always wins whenever range-total resolves
+      positive. Plain author-supplied markup — table-footer-ui does not
+      template or constrain its shape. Naming matches table-toolbar-ui's own
+      `empty` slot convention.
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens:
+  --table-footer-gap:
+    description: Gap between the range label and the pager
+  --table-footer-py:
+    description: Vertical padding
+  --table-footer-px:
+    description: Horizontal padding
+  --table-footer-summary-fg:
+    description: Range-label text color
+  --table-footer-summary-size:
+    description: Range-label font size
+a2ui:
+  rules:
+    - >-
+      Pair <table-footer-ui> with <table-ui> via [for="<table-id>"] (or
+      rely on first-sibling fallback when both are inside the same parent).
+      Client-mode composition (a [paginate]-sliced table): set [no-pager]
+      on the table-ui so its own internal pagination bar doesn't render
+      alongside the footer's composed one — table-footer-ui never
+      auto-suppresses it for you.
+    - >-
+      Server-mode composition (gh#1754 Shape 1 — the server returns the
+      page's rows plus the total row count): set [range-total] to the
+      server's total, [page] / [page-size] from your own request state, and
+      listen for the footer's `page-change` event to fetch the next page —
+      the footer does not optimistically advance its own [page] in
+      server-mode; write it back after the fetch resolves.
+    - >-
+      The toolbar's [count] badge and this footer's range label coexist by
+      design — they answer different questions (the collection summary vs.
+      the page-window position) and neither replaces the other. In a
+      composition that includes a table-footer-ui, leave the toolbar's
+      [range-start]/[range-end]/[range-total] unset — the range summary's
+      home is the footer.
+    - >-
+      Canonical composition: card-ui header (title + primary action) →
+      a plain <section> wrapping a title-less <table-toolbar-ui for> → a
+      <section bleed> wrapping the <table-ui id> → a <footer divider>
+      wrapping this <table-footer-ui for> — see the table-in-card pattern.
+    - >-
+      Use <span slot="empty"> (or any markup) inside a table-footer-ui that
+      also sets [range-total="0"] to show a "no results" message in the
+      range label's own position, without a layout shift versus the normal
+      range text. Only fires on an EXPLICIT range-total="0" — omitting
+      range-total entirely (loading) never shows it.
+anti_patterns:
+  - wrong: '<table-footer-ui range-start="1" range-end="10" range-total="128"></table-footer-ui>'
+    why: >-
+      table-footer-ui is derivation-only (REQ-F-002) — there is no
+      [range-start]/[range-end] attribute pair (that shape belongs to
+      table-toolbar-ui, which has no page/page-size knowledge of its own).
+      Setting [page] + [page-size] + [range-total] derives the range window
+      instead; a permanent three-way drift hazard is exactly what the
+      derivation model exists to avoid.
+    fix: '<table-footer-ui page="1" page-size="10" range-total="128"></table-footer-ui>'
+examples:
+  - name: table-footer-server-mode
+    description: Server-mode footer (gh#1754 Shape 1) paired with a for=-bound table-ui.
+    a2ui: >-
+      [
+        {"id": "root", "component": "Column", "gap": "0", "children": ["tests", "ftr"]},
+        {"id": "tests", "component": "Table", "raw": true},
+        {"id": "ftr", "component": "TableFooter", "for": "tests", "page": 1, "page-size": 10, "range-total": 128}
+      ]
+  - name: table-footer-client-mode
+    description: Client-mode footer bound to a [paginate]d table-ui with its own internal pager suppressed via [no-pager].
+    a2ui: >-
+      [
+        {"id": "root", "component": "Column", "gap": "0", "children": ["tests-c", "ftr"]},
+        {"id": "tests-c", "component": "Table", "paginate": 10, "no-pager": true, "raw": true},
+        {"id": "ftr", "component": "TableFooter", "for": "tests-c"}
+      ]
+keywords:
+  - table-footer
+  - pagination
+  - pager
+  - range
+  - showing
+  - data-grid
+  - directory
+  - admin
+  - backoffice
+  - listing
+  - records
+synonyms:
+  pagination:
+    - table-footer
+    - pagination
+  pager:
+    - table-footer
+    - pagination
+related:
+  - table
+  - table-toolbar
+  - pagination
+  - card

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>
 ```