@adia-ai/web-components 0.8.34 → 0.8.36

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/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/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-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;
   }

package/components/tabs/tabs.css

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

package/components/tag/tag.class.js

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

package/components/tag/tag.css

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