@adia-ai/web-components 0.8.33 → 0.8.35

package/components/option-card/option-card.css

@@ -30,26 +30,38 @@ option-card-ui[checked] [slot="icon"] {
 
 @scope (option-card-ui) {
   :where(:scope) {
-    /* ── Container ── */
+    /* ── Container (gh#1018: tonal surface, not a bordered box on page
+       bg) ── */
     --option-card-padding-block:    var(--a-space-3);
     --option-card-padding-inline:   var(--a-space-4);
     --option-card-radius:           var(--a-radius-md);
-    --option-card-bg:               var(--md-sys-color-neutral-background);
-    --option-card-border:           var(--md-sys-color-neutral-outline);
+    --option-card-bg:               var(--md-sys-color-neutral-container-low);
+    /* No outline as the primary boundary — the tonal bg IS the
+       boundary. Transparent (not removed) so a consumer override that
+       sets a real color doesn't cause a layout reflow. */
+    --option-card-border:           transparent;
     --option-card-gap-x:            var(--a-space-3);
     --option-card-gap-y:            var(--a-space-1);
 
     /* ── State: hover ── */
-    --option-card-bg-hover:         var(--a-bg-muted);
-    --option-card-border-hover:     var(--md-sys-color-neutral-on-surface-variant);
+    /* One step up from the container-low base (--a-bg-muted resolves to
+       the SAME role as the base bg now, gh#1018) so hover stays visibly
+       distinct instead of collapsing to a no-op. */
+    --option-card-bg-hover:         var(--md-sys-color-neutral-container);
+    --option-card-border-hover:     transparent;
 
     /* ── State: checked ── */
+    /* Kept as the accent border+fill (design decision, gh#1018): the
+       checked state is the one state that must stay unmistakable, so it
+       keeps the token-ladder rung idle/hover gave up. */
     --option-card-bg-checked:       var(--md-sys-color-primary-container);
     --option-card-border-checked:   var(--md-sys-color-primary);
 
     /* ── Indicator (CSS radio circle, same size + recipe as <radio-ui>). */
     --option-card-radio-size:       var(--a-toggle-size);
-    --option-card-radio-bg:         var(--md-sys-color-neutral-background);
+    /* Matches the card bg (gh#1018) so the ring reads flush with the new
+       tonal surface instead of floating as a mismatched lighter cutout. */
+    --option-card-radio-bg:         var(--md-sys-color-neutral-container-low);
     --option-card-radio-border:     var(--md-sys-color-neutral-outline);
     --option-card-radio-fill:       var(--md-sys-color-primary);
     /* Mirror radio.css's --radio-fg-checked recipe: an always-light
@@ -82,7 +94,8 @@ option-card-ui[checked] [slot="icon"] {
   }
 
   /* ── Base — grid: indicator | (heading + description). Optional icon
-       sits between indicator and heading via :has() rules below. ── */
+       sits at the trailing end of the header row via :has() rules below
+       (gh#1018: was a leading column between indicator and heading). ── */
   :scope {
     box-sizing: border-box;
     display: grid;
@@ -105,17 +118,19 @@ option-card-ui[checked] [slot="icon"] {
       box-shadow var(--option-card-duration) var(--option-card-easing);
   }
 
-  /* When an icon slot is present, insert a third column for it
-     between indicator and heading. */
+  /* When an icon slot is present, insert a trailing column for it
+     alongside the heading only — description still spans the full
+     content width beneath (gh#1018). */
   :scope:has([slot="icon"]) {
-    grid-template-columns: auto auto minmax(0, 1fr);
+    grid-template-columns: auto minmax(0, 1fr) auto;
     grid-template-areas:
-      "indicator icon heading"
-      "indicator icon description";
+      "indicator heading icon"
+      "indicator description description";
   }
   :scope [slot="icon"] {
     grid-area: icon;
-    align-self: start;
+    align-self: center;
+    justify-self: end;
     color: var(--option-card-icon-color);
     --a-icon-size: var(--option-card-icon-size);
     transition: color var(--option-card-duration) var(--option-card-easing);
@@ -158,13 +173,14 @@ option-card-ui[checked] [slot="icon"] {
        gutter). Common pattern: an "Other" option with a free-text
        textarea, conditional follow-up fields, etc. ── */
   :scope > :not([slot]) {
+    /* 2/-1 spans every content column (heading/description, plus the
+       trailing icon column when present, gh#1018) — the icon column now
+       sits at the END, so this span already covers it without a
+       separate :has() override. */
     grid-column: 2 / -1;
     margin-block-start: var(--a-space-3);
     display: none;
   }
-  :scope:has([slot="icon"]) > :not([slot]) {
-    grid-column: 3 / -1;
-  }
   /* hover + [checked] state rules moved outside @scope — see Safari 17.x bug note at top.
      The :scope[checked]::before recipe lives at top-of-file: an accent disc
      with a centered dot via radial-gradient, mirroring radio-ui's recipe. */

package/components/option-card/option-card.yaml

@@ -9,9 +9,12 @@ version: 1
 description: >-
   Selectable card with radio semantics. A "rich radio" — single-select
   one of N where each option carries a heading, optional description,
-  and optional leading icon. Siblings sharing a `name` form a
-  radiogroup. The whole card is the click target; a CSS-rendered radio
-  circle in the top-left signals state. Form-associated, so `name=value`
+  and an optional icon at the trailing end of the header row. Siblings
+  sharing a `name` form a radiogroup. The whole card is the click
+  target; a CSS-rendered radio circle in the top-left signals state.
+  Renders on a container-low tonal surface (no outline as the primary
+  boundary); the checked state keeps an accent border + fill so
+  selection stays unmistakable. Form-associated, so `name=value`
   submits with the parent form when checked.
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
@@ -52,16 +55,17 @@ props:
     default: ""
     reflect: true
   icon:
-    description: Optional Phosphor icon name. Stamped as a leading <icon-ui slot="icon"> when set.
+    description: Optional Phosphor icon name. Stamped as a trailing <icon-ui slot="icon"> when set.
     type: string
     default: ""
     reflect: true
   layout:
     description: >-
-      Internal layout. `default` puts the indicator on the left and the icon
-      adjacent. `tile` stacks vertically — icon top-left, indicator top-right,
-      heading + description below — for hero pickers (source / role / plan
-      tiles) where the icon is a primary brand cue.
+      Internal layout. `default` puts the indicator on the left and, when
+      [icon] is set, the icon at the trailing end of the header row
+      alongside the heading. `tile` stacks vertically — icon top-left,
+      indicator top-right, heading + description below — for hero pickers
+      (source / role / plan tiles) where the icon is a primary brand cue.
     type: string
     default: default
     enum: [default, tile]
@@ -112,17 +116,17 @@ tokens:
   --option-card-radius:
     description: Card corner radius.
   --option-card-bg:
-    description: Default background.
+    description: Default background (container-low tonal surface, gh#1018).
   --option-card-border:
-    description: Default border color.
+    description: Default border color (transparent — the tonal bg is the primary boundary, not an outline; gh#1018).
   --option-card-gap-x:
     description: Horizontal gap between indicator (and icon) and content.
   --option-card-gap-y:
     description: Vertical gap between heading and description.
   --option-card-bg-hover:
-    description: Hover background (non-checked).
+    description: Hover background (non-checked) — one tonal step up from --option-card-bg so hover stays visibly distinct.
   --option-card-border-hover:
-    description: Hover border color (non-checked).
+    description: Hover border color (non-checked; transparent by default, matching the no-outline base).
   --option-card-bg-checked:
     description: Background when checked.
   --option-card-border-checked:
@@ -152,11 +156,11 @@ tokens:
   --option-card-desc-line-height:
     description: Description line height.
   --option-card-icon-color:
-    description: Leading icon color when the card is not checked.
+    description: Trailing icon color when the card is not checked.
   --option-card-icon-color-checked:
-    description: Leading icon color when the card is checked.
+    description: Trailing icon color when the card is checked.
   --option-card-icon-size:
-    description: Leading icon size (sets `--a-icon-size` on the slotted icon-ui).
+    description: Trailing icon size (sets `--a-icon-size` on the slotted icon-ui).
   --option-card-disabled-opacity:
     description: Opacity multiplier when disabled.
   --option-card-focus-ring:

package/components/radio/radio.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>
+    <text-ui variant="caption" color="muted">scale="ui-sm"</text-ui>
+    <div scale="ui-sm">
       <radio-ui label="Standard" name="reg-verse" checked></radio-ui>
     </div>
   </col-ui>
@@ -23,8 +23,8 @@
     </div>
   </col-ui>
   <col-ui gap="2">
-    <text-ui variant="caption" color="muted">prose</text-ui>
-    <div prose>
+    <text-ui variant="caption" color="muted">scale="content-md"</text-ui>
+    <div scale="content-md">
       <radio-ui label="Standard" name="reg-prose" checked></radio-ui>
     </div>
   </col-ui>

package/components/range/range.css

@@ -9,11 +9,15 @@ range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
   :where(:scope) {
     /* ── Tokens (wired to --a-ui-*) ── */
     --range-bg:              var(--a-ui-bg);
-    --range-fill-bg:         var(--a-ui-bg);
-    --range-fill-bg-hover:   var(--a-ui-bg-hover);
-    --range-fill-bg-active:  var(--a-ui-bg-active);
+    /* Brand-primary fill (gh#1080): the neutral --a-ui-bg fill read as
+       near-invisible against the track at partial values; slider-ui's
+       --slider-fill-bg already uses the primary family — same convention
+       here, with the on-primary ink pair for the clipped fill-layer text. */
+    --range-fill-bg:         var(--a-primary-bg);
+    --range-fill-bg-hover:   var(--a-primary-bg-hover);
+    --range-fill-bg-active:  var(--a-primary-bg-active);
     --range-fill-bg-disabled: var(--a-canvas-muted);
-    --range-fill-fg:         var(--md-sys-color-neutral-on-surface);
+    --range-fill-fg:         var(--md-sys-color-primary-on-primary);
     --range-fill-fg-disabled: var(--a-ui-text-disabled);
     --range-fill-label-fg:   var(--a-ui-text-subtle);
     --range-border:          var(--a-ui-border);

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/slider/slider.a2ui.json

@@ -175,16 +175,19 @@
         "description": "Filled portion / progress color (was mixed accent, now primary)"
       },
       "--slider-thumb-height": {
-        "description": "Thumb pill height (track-height − 2× inset)"
+        "description": "Thumb pill height (--slider-thumb-size − 2× inset)"
+      },
+      "--slider-thumb-size": {
+        "description": "Thumb (grab handle) control size — scales via the universal [size] attribute (16 sm / 20 md / 24 lg at density=1). Independent of --slider-track-height (gh#1012); the thumb overhangs the thin rail."
       },
       "--slider-thumb-width": {
-        "description": "Thumb pill width (2× thumb-height, driven by track-height)"
+        "description": "Thumb pill width (2× thumb-visual-height, driven by --slider-thumb-size)"
       },
       "--slider-track": {
         "description": "Unfilled track background color"
       },
       "--slider-track-height": {
-        "description": "Full track height (scales via universal [size] attribute)"
+        "description": "Rail thickness — a slim strip (a few px, house space scale), NOT control height (gh#1012 re-baseline; was --a-toggle-size, making the whole track read as a toggle-height progress bar)."
       }
     },
     "traits": [],

package/components/slider/slider.css

@@ -7,13 +7,19 @@
        Variables
          W    = track width  (100% of the track element)
          t    = thumb width  (full outer width including internal padding)
-         h    = track height (var(--slider-track-height))
+         h    = thumb height (var(--slider-thumb-size) — control size,
+                              gh#1012: DECOUPLED from track height. The
+                              rail (var(--slider-track-height)) is a thin
+                              conventional-slider strip; the thumb
+                              overhangs it above and below, centered via
+                              top:50% + translate(-50%,-50%) on the track.)
          pad  = internal padding on the thumb (var(--slider-thumb-padding))
          p    = progress     (0.0 → 1.0, written by JS as --slider-pct)
 
        The thumb consists of two layers:
          • Container: the geometry element that the fill aligns to.
-                      Sized to t × h. Provides the full-height grab area.
+                      Sized to t × h. Provides the full grab area,
+                      independent of the (thin) rail it overhangs.
          • Visual:    the white pill rendered inside the container via
                       ::before. Sized to (t−2·pad) × (h−2·pad), centered
                       by inset = pad on all sides.
@@ -64,17 +70,26 @@
     --slider-readout-gap:       var(--a-space-0-5);
     --slider-radius:            var(--a-radius-full);
 
-    /* Track height scales with the universal [size] attribute
-       via --a-toggle-size: 16 sm / 20 md / 24 lg at density=1.
-       Override --slider-track-height directly for custom sizes. */
-    --slider-track-height:      var(--a-toggle-size);
+    /* Rail thickness (gh#1012 re-baseline) — conventional slider anatomy:
+       a slim strip, not control height. Was var(--a-toggle-size) (16/20/24px),
+       making the whole track read as a toggle-height progress bar. Now a
+       few px from the house space scale; the thumb (below) keeps the
+       control size independently. */
+    --slider-track-height:      var(--a-space-1-5);
+
+    /* Thumb size: the universal [size] attribute's control dimension —
+       16 sm / 20 md / 24 lg at density=1, same scale the rail used to
+       carry directly. Decoupled from --slider-track-height so resizing
+       the rail never resizes the grab target, and vice versa. */
+    --slider-thumb-size:        var(--a-toggle-size);
 
     /* Thumb padding: internal breathing room on all sides.
        The visual pill sits pad px away from the container edge. */
     --slider-thumb-padding:     2px;
 
-    /* Visual thumb height: track height minus top and bottom padding. */
-    --slider-thumb-visual-h:    calc(var(--slider-track-height) - 2 * var(--slider-thumb-padding));
+    /* Visual thumb height: thumb (control) size minus top/bottom padding —
+       NOT track height (gh#1012); the thumb overhangs the thin rail. */
+    --slider-thumb-visual-h:    calc(var(--slider-thumb-size) - 2 * var(--slider-thumb-padding));
 
     /* Visual thumb width: 2×1 pill ratio. */
     --slider-thumb-visual-w:    calc(var(--slider-thumb-visual-h) * 2);
@@ -213,16 +228,17 @@
                 * (100% - 2 * var(--slider-thumb-width)));
   }
 
-  /* Thumb CONTAINER: full track height, geometry width.
-     Transparent background; the white pill is rendered by ::before.
-     This element provides a generous vertical grab area.     */
+  /* Thumb CONTAINER: control-size height (independent of the thin rail —
+     gh#1012), geometry width. Transparent background; the white pill is
+     rendered by ::before. Centered on the rail via top:50% + the
+     translate(-50%,-50%) below, so it overhangs above and below. */
   [slot="thumb"] {
     position: absolute;
     top: 50%;
     left: calc(var(--slider-thumb-width) / 2
                + var(--slider-pct) * (100% - var(--slider-thumb-width)));
     width: var(--slider-thumb-width);
-    height: var(--slider-track-height);
+    height: var(--slider-thumb-size);
     border-radius: var(--slider-radius);
     background: transparent;
     transform: translate(-50%, -50%);

package/components/slider/slider.yaml

@@ -115,13 +115,21 @@ tokens:
   --slider-fill:
     description: Filled portion / progress color (was mixed accent, now primary)
   --slider-thumb-width:
-    description: Thumb pill width (2× thumb-height, driven by track-height)
+    description: Thumb pill width (2× thumb-visual-height, driven by --slider-thumb-size)
   --slider-thumb-height:
-    description: Thumb pill height (track-height − 2× inset)
+    description: Thumb pill height (--slider-thumb-size − 2× inset)
+  --slider-thumb-size:
+    description: >-
+      Thumb (grab handle) control size — scales via the universal [size]
+      attribute (16 sm / 20 md / 24 lg at density=1). Independent of
+      --slider-track-height (gh#1012); the thumb overhangs the thin rail.
   --slider-track:
     description: Unfilled track background color
   --slider-track-height:
-    description: Full track height (scales via universal [size] attribute)
+    description: >-
+      Rail thickness — a slim strip (a few px, house space scale), NOT
+      control height (gh#1012 re-baseline; was --a-toggle-size, making
+      the whole track read as a toggle-height progress bar).
 a2ui:
   rules:
     - rule: 'Default mode is single-handle. Form-associated; emits numeric change events with detail.value.'

package/components/stat/stat.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="width:180px">
+    <text-ui variant="caption" color="muted">scale="ui-sm"</text-ui>
+    <div scale="ui-sm" style="width:180px">
       <stat-ui value="$48.2k" label="Revenue" change="+12.5%" trend="up"></stat-ui>
     </div>
   </col-ui>
@@ -23,8 +23,8 @@
     </div>
   </col-ui>
   <col-ui gap="2">
-    <text-ui variant="caption" color="muted">prose</text-ui>
-    <div prose style="width:180px">
+    <text-ui variant="caption" color="muted">scale="content-md"</text-ui>
+    <div scale="content-md" style="width:180px">
       <stat-ui value="$48.2k" label="Revenue" change="+12.5%" trend="up"></stat-ui>
     </div>
   </col-ui>

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/swatch/swatch.css

@@ -217,8 +217,10 @@
      each pip is a positioned child with semantic color. */
   :scope > [data-badge] {
     position: absolute;
-    top: -4px;
-    right: -4px;
+    /* Inside the tile's corner (gh#1086) — the old -4px offsets hung the
+       pips outside the host box, reading as misplaced chrome. */
+    top: 2px;
+    right: 2px;
     display: inline-flex;
     align-items: center;
     gap: 2px;
@@ -316,13 +318,19 @@
     transition: box-shadow var(--a-duration-fast) var(--a-easing-out);
   }
   :scope[selectable]:focus { outline: none; }
+  /* Focus keeps an OUTER host ring — a11y wants focus visible beyond the
+     element's own silhouette. */
   :scope[selectable]:focus-visible {
     box-shadow: 0 0 0 var(--swatch-select-ring-width) var(--swatch-select-ring);
   }
-  :scope[selected] {
-    box-shadow: 0 0 0 var(--swatch-select-ring-width) var(--swatch-select-ring);
+  /* Selection + hover rings draw INSET on the tile itself (gh#1086): the
+     ring follows the tile's real shape (round for dots, square radius for
+     tiles) and the outer silhouette stays identical selected vs not — the
+     old outer host ring visually inflated dot swatches by 2px. */
+  :scope[selected] > [data-tile] {
+    box-shadow: inset 0 0 0 var(--swatch-select-ring-width) var(--swatch-select-ring);
   }
-  :scope[selectable]:hover:not([selected]) {
-    box-shadow: 0 0 0 1px color-mix(in oklab, var(--swatch-select-ring) 50%, transparent);
+  :scope[selectable]:hover:not([selected]) > [data-tile] {
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--swatch-select-ring) 50%, transparent);
   }
 }

package/components/switch/switch.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>
+    <text-ui variant="caption" color="muted">scale="ui-sm"</text-ui>
+    <div scale="ui-sm">
       <switch-ui label="Enabled" checked></switch-ui>
     </div>
   </col-ui>
@@ -23,8 +23,8 @@
     </div>
   </col-ui>
   <col-ui gap="2">
-    <text-ui variant="caption" color="muted">prose</text-ui>
-    <div prose>
+    <text-ui variant="caption" color="muted">scale="content-md"</text-ui>
+    <div scale="content-md">
       <switch-ui label="Enabled" checked></switch-ui>
     </div>
   </col-ui>

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/table-toolbar/table-toolbar.css

@@ -39,6 +39,13 @@
   [data-toolbar] {
     display: flex;
     flex-direction: row;
+    /* gh#1076 — narrow containers WRAP the clusters to a new row instead of
+       crushing them into each other: the fixed-size control clusters
+       (flex 0 0 auto) never shrink, so without wrap all pressure landed on
+       [data-search] (min-width:0 → collapsed to 0px, measured live) while
+       neighbors painted over the gap. */
+    flex-wrap: wrap;
+    row-gap: var(--table-toolbar-cluster-gap);
     align-items: center;
     gap: var(--table-toolbar-gap);
     padding: var(--table-toolbar-py) var(--table-toolbar-px);
@@ -95,7 +102,9 @@
 
   [data-search] {
     flex: 1 1 var(--table-toolbar-search-min);
-    min-width: 0;
+    /* 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%);
     max-width: var(--table-toolbar-search-max);
     margin-inline-start: auto;
   }