@adia-ai/web-components 0.7.3 → 0.7.5

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog — @adia-ai/web-components
 
+## [0.7.5] — 2026-06-02
+
+### Fixed
+
+- **`<button-ui>` colored buttons — unreadable solid text + outline rendering as a solid pill.** Two bugs in the `[color]` × `variant` matrix, both verified on the live render (`scripts/qa/button-color-probe.mjs`: WCAG contrast + fill-transparency probe). (1) **Solid** `color="danger|info|success"` set `--button-fg: var(--a-X-fg)`, which resolves to `--a-X-text-strong` — *family-colored* text, ~1:1 contrast on the same-hue fill (near-invisible). Now `--a-chrome-light` (white) like `variant="primary"` → danger 4.75:1, info 4.27:1, success 4.02:1. `warning` keeps dark `--a-warning-fg` (its `--a-warning-bg` fill is light amber). Documented anti-pattern `feedback_text_on_accent_disc` (light text on filled accent surfaces). (2) **Outline/ghost + color** rendered as a solid pill — the `[color]` rule's solid `--button-bg` won source-order over `[variant="outline"]` (the demo's `variant="outline" color="success"` "Approve" button, `button.examples.html:50`). Added combined `[variant][color]` selectors (specificity 0,3,0 > the 0,2,0 `[color]` rule) restoring a transparent fill + colored text (`--a-X-text`) + colored border (`--a-X-border` for outline). **(3) The actual override mechanism.** Fixes (1)+(2) set `--button-fg` correctly, yet the rendered text stayed the fill hue: the global `[color]` presentational utility (`api/text.css`, `utilities` layer) sets `color: var(--a-fg)` and wins over the button's `components`-layer `color: var(--button-fg)` by **layer order** (utilities > components), regardless of specificity. `button-ui` re-purposes `color=` as a semantic *fill* (the `variant="danger"`→`color="danger"` migration, button.css:180) and is the only filled control that does, and is not among the color honorings (`cascade-component-attr-sweep.mjs`) — so it is now excluded from the text-color utility: `[color]:not(:where(button-ui))` (specificity-neutral via `:where()`; a plain `[color="info"]` element still resolves to info text). Verified on a *fresh* serve against the real demo buttons — the persistent dev server caches the `host.css` `@import` chain and masked the fix on edit. Files: `components/button/button.css`, `styles/api/text.css`.
+
+### Changed
+- **CDN bundles rebuilt** — `dist/host.min.css` + `dist/web-components.min.css` regenerated so the button-color fix above reaches `@adia-ai/web-components@0.7` CDN consumers (the bundles were stale since the fix landed on `main` pre-cut, ahead of the cut's `build:bundles`).
+
+## [0.7.4] — 2026-06-02
+
+### Added
+
+- **`[verse]` — third typographic register (compact / dense)** — a sibling to `[prose]`: where prose shifts everything UP (long-form), verse shifts DOWN — tight inset/gap (10/12/14), small controls (18/20/24), small type (body 11/12/13), tight radius (≤16px) — for dense product UI (inspectors, tables, toolbars, side rails). Opt-in context layer (`styles/verse.css`), linked alongside `prose.css`. Type SHIFTS with `[size]` (unlike `[prose]`, which pins type at -md — verse re-declares the `-size` pointers under `[verse]:not([size])` so a bare verse resolves verse's own md value, then the global `[size]` rules shift sm/lg); gap is parametric (`value × --a-gap-k`). Docs: a "Typography registers" comparison section on the card / button / text / field / badge / stat pages, and `typography.css` now documents all three registers. Verified by `scripts/qa/register-scale-probe.mjs`.
+- **`<grid-ui>` `[align]` / `[justify]` item-alignment props** — grid-ui now supports `align` (block axis → `align-items`) and `justify` (inline axis → `justify-items`), reaching parity with `row-ui` / `col-ui` (which already had `align`). e.g. `<grid-ui columns="2" align="center">` vertically centers a text column against a product visual in a split hero. CSS-only (attribute selectors); yaml + `.d.ts` + a2ui sidecar regenerated.
+- **`styles/host.css` — single drop-in host-page foundation** — one `<link>` bundles design tokens + every component's CSS + global resets (via the canonical `index.css` barrel) + a page-frame (`:where(html)` background / foreground / font-family / `min-block-size`). Replaces the hand-rolled `:where(html, body){ … font-family: var(--a-font) }` boilerplate that ~281 demo scaffolds copy-paste. Opt-in layers (themes, prose) + per-module CSS (FB-53) stay explicit on top. `site/index.html` migrated (tokens+components+resets → host.css; verified pixel-identical render). Composes the byte-stable `/css` entry, adds the page-frame above it; CDN bundle at `dist/host.min.css` (`bundle-css.mjs`). (ADR-0035 / ADR-0038)
+- **`--a-font` back-compat alias** (`type/scale.css`: `--a-font: var(--a-font-family)`) — the pre-ADR-0035 token name was renamed to `--a-font-family` but left dangling in ~285 references (demo boilerplate + embedded apps + external consumers). An undefined `var(--a-font)` is invalid-at-computed-value-time → `inherit` → UA **serif**; the alias resolves them to the sans stack. DEPRECATED — prefer `--a-font-family`; retire after the host.css migration retires the boilerplate.
+- **`font-family` floor on 25 text-bearing primitives** — `segmented` / `segment` / `badge` / `button` / `tag` / `input` / `textarea` / `select` / `combobox` / `tags-input` / `tabs` / `toggle-group` / `range` / `table` / `calendar-grid` / `calendar-picker` / `agent-questions` / `command` / `context-menu` / `menu` / `table-toolbar` / `time-picker` / `toolbar` / `tour` + the `onboarding-checklist` module. Each anchors `font-family` to `var(--a-font-family-ui)` — composites (`select` / `combobox` / `tags-input` / `table` / `calendar-picker`) floor the host `:scope` so internal fields/options/cells inherit it; the rest use the `var(--X-font-family, var(--X-font-family-default))` chain (mirroring `text-ui`). Per-component overridable. `inline-edit` + `spinner` intentionally keep `inherit` (must match surrounding content).
+- **New trip-wire `audit:font-family-floor[:strict]`** (`scripts/dev/audit-font-family-floor.mjs`) — flags component CSS using `font: inherit` / `font-family: inherit` without a token floor, plus dead `var(--a-font)` usage. Surfaced 8 of the 25 fixes that manual grep missed; ships green (0 critical, 2 allowlisted).
+
+### Changed
+
+- **Reverted the OD-5 `-default` token-shadowing layer — component CSS now declares a single un-suffixed token per property** — `var(--card-bg, var(--card-bg-default))` → `var(--card-bg)` across 119 component + module CSS files; variants/states re-point the un-suffixed `--<component>-*` token directly (`:where(:scope)` keeps the base at zero specificity). The 2026-05-24 OD-5 split (internal `--<c>-X-default` + public `--<c>-X` read through a fallback chain) added read-past noise without paying for itself: the one capability it bought — ancestor-surface inheritance of *component-named* tokens — had no real usage (a repo sweep found only on-element attribute hooks + parent→child composition, both of which win by specificity and survive). **Consumer overriding is unchanged** for the four real vectors (`--a-*` upstream · on-element `card-ui { --card-bg: … }` / inline · parent→child composition · `@layer overrides`); the *only* behavior change is that a `--<component>-*` token set on a non-targeting **ancestor** no longer inherits in (theme via `--a-*` or `@layer overrides`). No public component/prop API change. Inverse codemod `scripts/refactor/undo-od5-token-shadowing.mjs` (2-level + 3-level chain collapse, precise pair-derived strip, collision-safe residual rewire); forward `od5-token-shadowing.mjs` retired; `docs/specs/component-token-contract.md` rewritten (§History). Internal: `modal`/`swiper` `getComputedStyle` reads + 5 CSS-string-match tests re-pointed to the un-suffixed names. Verified: suite 1526/1526, `components --verify` clean, bundles fresh, visual QA (composition intact).
+- **Typographic registers re-scaled — regular (default) + prose (MINOR behavior change)** — the regular register's inset compressed `8/16/24 → 14/16/18` and its gap re-based to a clean `value × --a-gap-k` multiplier (`8/12/16 → 10/12/14`, replacing the `half+half·k` form); `md` (the default tier) is unchanged for both, so only `[size=sm]`/`[size=lg]` containers shift. Prose moved one rung up (inset → 32/40/48, gap → 16/20/24). **Radius is now a register-scaled axis** — each register sets its own `--a-radius-min/max` (verse ≤16px · regular 20px=base · prose ≤28px) feeding the existing `clamp(min, k·max·tier-k, max)` formula. All values verified by `scripts/qa/register-scale-probe.mjs` (9 cells × 5 axes).
+- **Demo scaffolds migrated to the `--a-font-family` token** — the ~114 `patterns/` + `traits/` demo `.html` scaffolds (plus the per-component demos) swapped their hand-rolled `:where(html, body) { font-family: var(--a-font) }` boilerplate to `var(--a-font-family)`, tracking the font-family-floor token rename; `patterns/search-discovery` additionally dropped a stray inline `max-width` so the results card self-frames. Demo-layer migration only — no component or CSS-API change.
+
+### Fixed
+
+- **Text-bearing primitives no longer fall back to UA serif when the host page's font is broken/unset** — 25 primitives (segmented/segment/badge/button/tag, the form controls, menus/toolbars/pickers — see Added) used `font: inherit` / `font-family: inherit` with **no `font-family` floor**, so any consumer page whose inherited `font-family` was wrong (e.g. the embedded-app's `html, body { font-family: var(--a-font) }` → dead token → serif; or a serif host document) rendered their labels in Times while `text-ui` (which anchors to a token) stayed correct — a confusing same-page split. Each now carries a font-family floor (see Added). Root-caused via computed-style probe (segment/badge/button/tag → Times; text-ui → sans); the floor was verified to hold on a deliberately `body{font-family:serif}` page. Robustness layer — the `--a-font` alias additionally fixes the specific embedded-app trigger with no app edit. (embedded-app patient-labs QA)
+- **`<grid-ui align="…">` no longer leaks `text-align` into descendants** — grid-ui never neutralized the legacy UA rule that maps the HTML `align=` attribute to `text-align` (`row.css` / `col.css` both do, explicitly). So `<grid-ui align="center">` — authored for grid-item vertical centering — silently set `text-align: center` on **every** descendant, centering split-hero headlines/decks/kickers that should read left (marketing-engagement `hero-cta-split`, v050-marketing-blocks `hero-section-split`). And because grid-ui had **no** `[align]` rule at all, the attribute didn't even perform the intended vertical centering — it was pure leak. grid-ui now sets `text-align: inherit` (neutralizing the UA mapping) and maps `[align]`/`[justify]` to grid-axis item alignment. Demo fix: `hero-cta-split`'s left column → `align="start"` so the "For teams" tag hugs its content instead of stretching the full column. (marketing-engagement QA)
+
 ## [0.7.3] — 2026-06-01
 
 ### Added

package/components/accordion/accordion.css

@@ -9,14 +9,14 @@
 /* ── Container ── */
 @scope (accordion-ui) {
   :where(:scope) {
-    --accordion-gap-default: 0;
+    --accordion-gap: 0;
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--accordion-gap, var(--accordion-gap-default));
+    gap: var(--accordion-gap);
   }
 }
 

package/components/action-list/action-list.css

@@ -1,13 +1,13 @@
 @scope (action-list-ui) {
   :where(:scope) {
-    --action-list-gap-default: var(--a-space-0-5);
+    --action-list-gap: var(--a-space-0-5);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--action-list-gap, var(--action-list-gap-default));
+    gap: var(--action-list-gap);
     margin: 0;
     padding: 0;
     list-style: none;

package/components/agent-artifact/agent-artifact.css

@@ -1,57 +1,57 @@
 @scope (agent-artifact-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --agent-artifact-radius-default:            var(--a-radius);
-    --agent-artifact-padding-default:           var(--a-space-3);
-    --agent-artifact-header-padding-y-default:  var(--a-space-2);
-    --agent-artifact-header-padding-x-default:  var(--a-space-3);
-    --agent-artifact-gap-default:               var(--a-space-2);
+    --agent-artifact-radius:            var(--a-radius);
+    --agent-artifact-padding:           var(--a-space-3);
+    --agent-artifact-header-padding-y:  var(--a-space-2);
+    --agent-artifact-header-padding-x:  var(--a-space-3);
+    --agent-artifact-gap:               var(--a-space-2);
 
     /* ── Colors ── */
-    --agent-artifact-bg-default:                var(--a-bg-subtle);
-    --agent-artifact-fg-default:                var(--a-fg);
-    --agent-artifact-fg-muted-default:          var(--a-fg-muted);
-    --agent-artifact-border-default:            var(--a-border-subtle);
-    --agent-artifact-header-bg-default:         var(--a-bg);
-    --agent-artifact-header-bg-hover-default:   var(--a-bg-hover);
+    --agent-artifact-bg:                var(--a-bg-subtle);
+    --agent-artifact-fg:                var(--a-fg);
+    --agent-artifact-fg-muted:          var(--a-fg-muted);
+    --agent-artifact-border:            var(--a-border-subtle);
+    --agent-artifact-header-bg:         var(--a-bg);
+    --agent-artifact-header-bg-hover:   var(--a-bg-hover);
 
     /* ── Typography ── */
-    --agent-artifact-title-size-default:        var(--a-ui-md);
-    --agent-artifact-title-weight-default:      var(--a-weight-medium);
+    --agent-artifact-title-size:        var(--a-ui-md);
+    --agent-artifact-title-weight:      var(--a-weight-medium);
 
     /* ── Motion ── */
-    --agent-artifact-duration-default:          var(--a-duration-fast);
+    --agent-artifact-duration:          var(--a-duration-fast);
   }
 
   :scope {
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--agent-artifact-border, var(--agent-artifact-border-default));
-    border-radius: var(--agent-artifact-radius, var(--agent-artifact-radius-default));
-    background: var(--agent-artifact-bg, var(--agent-artifact-bg-default));
+    border: 1px solid var(--agent-artifact-border);
+    border-radius: var(--agent-artifact-radius);
+    background: var(--agent-artifact-bg);
     overflow: hidden;
     min-width: 0;
   }
 
-  :scope[tone="accent"]  { --agent-artifact-border-default: var(--a-accent-bg); }
-  :scope[tone="warning"] { --agent-artifact-border-default: var(--a-warning-bg); }
-  :scope[tone="danger"]  { --agent-artifact-border-default: var(--a-danger-bg); }
+  :scope[tone="accent"]  { --agent-artifact-border: var(--a-accent-bg); }
+  :scope[tone="warning"] { --agent-artifact-border: var(--a-warning-bg); }
+  :scope[tone="danger"]  { --agent-artifact-border: var(--a-danger-bg); }
 
   [data-artifact-header] {
     display: flex;
     align-items: center;
-    gap: var(--agent-artifact-gap, var(--agent-artifact-gap-default));
-    padding: var(--agent-artifact-header-padding-y, var(--agent-artifact-header-padding-y-default)) var(--agent-artifact-header-padding-x, var(--agent-artifact-header-padding-x-default));
-    background: var(--agent-artifact-header-bg, var(--agent-artifact-header-bg-default));
-    border-block-end: 1px solid var(--agent-artifact-border, var(--agent-artifact-border-default));
+    gap: var(--agent-artifact-gap);
+    padding: var(--agent-artifact-header-padding-y) var(--agent-artifact-header-padding-x);
+    background: var(--agent-artifact-header-bg);
+    border-block-end: 1px solid var(--agent-artifact-border);
     cursor: pointer;
     user-select: none;
     min-width: 0;
-    transition: background var(--agent-artifact-duration, var(--agent-artifact-duration-default));
+    transition: background var(--agent-artifact-duration);
   }
 
   [data-artifact-header]:hover {
-    background: var(--agent-artifact-header-bg-hover, var(--agent-artifact-header-bg-hover-default));
+    background: var(--agent-artifact-header-bg-hover);
   }
 
   [data-artifact-header]:focus-visible {
@@ -69,9 +69,9 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: var(--agent-artifact-title-size, var(--agent-artifact-title-size-default));
-    font-weight: var(--agent-artifact-title-weight, var(--agent-artifact-title-weight-default));
-    color: var(--agent-artifact-fg, var(--agent-artifact-fg-default));
+    font-size: var(--agent-artifact-title-size);
+    font-weight: var(--agent-artifact-title-weight);
+    color: var(--agent-artifact-fg);
   }
 
   /* [data-artifact-kind] is a <badge-ui size="sm"> — it brings its own pill
@@ -91,11 +91,11 @@
 
   [data-artifact-caret] {
     flex-shrink: 0;
-    transition: transform var(--agent-artifact-duration, var(--agent-artifact-duration-default));
+    transition: transform var(--agent-artifact-duration);
   }
 
   [data-artifact-body] {
-    padding: var(--agent-artifact-padding, var(--agent-artifact-padding-default));
+    padding: var(--agent-artifact-padding);
     min-width: 0;
   }
 

package/components/agent-feedback-bar/agent-feedback-bar.css

@@ -1,29 +1,29 @@
 @scope (agent-feedback-bar-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --agent-feedback-bar-gap-default:      var(--a-space-1);
-    --agent-feedback-bar-padding-default:  var(--a-space-2);
+    --agent-feedback-bar-gap:      var(--a-space-1);
+    --agent-feedback-bar-padding:  var(--a-space-2);
 
     /* ── Typography ── */
-    --agent-feedback-bar-font-default:     var(--a-ui-sm);
+    --agent-feedback-bar-font:     var(--a-ui-sm);
 
     /* ── Colors ── */
-    --agent-feedback-bar-fg-default:       var(--a-fg-muted);
+    --agent-feedback-bar-fg:       var(--a-fg-muted);
   }
 
   :scope {
     display: flex;
     align-items: center;
-    gap: var(--agent-feedback-bar-gap, var(--agent-feedback-bar-gap-default));
-    padding-block: var(--agent-feedback-bar-padding, var(--agent-feedback-bar-padding-default));
-    font-size: var(--agent-feedback-bar-font, var(--agent-feedback-bar-font-default));
-    color: var(--agent-feedback-bar-fg, var(--agent-feedback-bar-fg-default));
+    gap: var(--agent-feedback-bar-gap);
+    padding-block: var(--agent-feedback-bar-padding);
+    font-size: var(--agent-feedback-bar-font);
+    color: var(--agent-feedback-bar-fg);
   }
 
   [data-feedback-status] {
     margin-inline-start: auto;
-    color: var(--agent-feedback-bar-fg, var(--agent-feedback-bar-fg-default));
-    font-size: var(--agent-feedback-bar-font, var(--agent-feedback-bar-font-default));
+    color: var(--agent-feedback-bar-fg);
+    font-size: var(--agent-feedback-bar-font);
   }
 
   :scope[disabled] {

package/components/agent-questions/agent-questions.css

@@ -1,64 +1,64 @@
 @scope (agent-questions-ui) {
   :where(:scope) {
     /* ── Typography ── */
-    --agent-questions-q-size-default:          var(--a-ui-md);
-    --agent-questions-q-weight-default:        var(--a-weight-medium);
-    --agent-questions-helper-size-default:     var(--a-ui-sm);
-    --agent-questions-label-size-default:      var(--a-ui-md);
-    --agent-questions-label-weight-default:    var(--a-weight-medium);
-    --agent-questions-desc-size-default:       var(--a-ui-sm);
+    --agent-questions-q-size:          var(--a-ui-md);
+    --agent-questions-q-weight:        var(--a-weight-medium);
+    --agent-questions-helper-size:     var(--a-ui-sm);
+    --agent-questions-label-size:      var(--a-ui-md);
+    --agent-questions-label-weight:    var(--a-weight-medium);
+    --agent-questions-desc-size:       var(--a-ui-sm);
 
     /* ── Colors ── */
-    --agent-questions-q-fg-default:            var(--a-fg);
-    --agent-questions-helper-fg-default:       var(--a-fg-muted);
-    --agent-questions-label-fg-default:        var(--a-fg);
-    --agent-questions-desc-fg-default:         var(--a-fg-muted);
-    --agent-questions-option-bg-default:       var(--a-bg);
-    --agent-questions-option-bg-hover-default: var(--a-bg-subtle);
-    --agent-questions-option-bg-sel-default:   var(--a-accent-muted);
-    --agent-questions-option-border-default:   var(--a-border-subtle);
-    --agent-questions-option-border-sel-default: var(--a-accent-bg);
-    --agent-questions-check-bg-default:        var(--a-accent-bg);
-    --agent-questions-check-fg-default:        var(--a-accent-fg);
+    --agent-questions-q-fg:            var(--a-fg);
+    --agent-questions-helper-fg:       var(--a-fg-muted);
+    --agent-questions-label-fg:        var(--a-fg);
+    --agent-questions-desc-fg:         var(--a-fg-muted);
+    --agent-questions-option-bg:       var(--a-bg);
+    --agent-questions-option-bg-hover: var(--a-bg-subtle);
+    --agent-questions-option-bg-sel:   var(--a-accent-muted);
+    --agent-questions-option-border:   var(--a-border-subtle);
+    --agent-questions-option-border-sel: var(--a-accent-bg);
+    --agent-questions-check-bg:        var(--a-accent-bg);
+    --agent-questions-check-fg:        var(--a-accent-fg);
 
     /* ── Layout ── */
-    --agent-questions-gap-default:             var(--a-space-2);
-    --agent-questions-option-gap-default:      var(--a-space-3);
-    --agent-questions-option-padding-default:  var(--a-space-3);
-    --agent-questions-option-radius-default:   var(--a-radius);
-    --agent-questions-q-padding-default:       var(--a-space-1);
-    --agent-questions-option-body-gap-default: var(--a-space-0-5);
+    --agent-questions-gap:             var(--a-space-2);
+    --agent-questions-option-gap:      var(--a-space-3);
+    --agent-questions-option-padding:  var(--a-space-3);
+    --agent-questions-option-radius:   var(--a-radius);
+    --agent-questions-q-padding:       var(--a-space-1);
+    --agent-questions-option-body-gap: var(--a-space-0-5);
     /* Component-intrinsic measurement; no --a-space-* equivalent */
-    --agent-questions-check-size-default:      20px;
+    --agent-questions-check-size:      20px;
 
     /* ── Motion ── */
-    --agent-questions-duration-default:        var(--a-duration-fast);
-    --agent-questions-easing-default:          var(--a-easing-out);
+    --agent-questions-duration:        var(--a-duration-fast);
+    --agent-questions-easing:          var(--a-easing-out);
   }
 
   :scope {
     display: flex;
     flex-direction: column;
-    gap: var(--agent-questions-gap, var(--agent-questions-gap-default));
+    gap: var(--agent-questions-gap);
   }
 
   [data-questions-q] {
-    font-size: var(--agent-questions-q-size, var(--agent-questions-q-size-default));
-    font-weight: var(--agent-questions-q-weight, var(--agent-questions-q-weight-default));
-    color: var(--agent-questions-q-fg, var(--agent-questions-q-fg-default));
-    padding: var(--agent-questions-q-padding, var(--agent-questions-q-padding-default)) 0;
+    font-size: var(--agent-questions-q-size);
+    font-weight: var(--agent-questions-q-weight);
+    color: var(--agent-questions-q-fg);
+    padding: var(--agent-questions-q-padding) 0;
   }
 
   [data-questions-helper] {
-    font-size: var(--agent-questions-helper-size, var(--agent-questions-helper-size-default));
-    color: var(--agent-questions-helper-fg, var(--agent-questions-helper-fg-default));
+    font-size: var(--agent-questions-helper-size);
+    color: var(--agent-questions-helper-fg);
     padding-block-end: var(--a-space-1);
   }
 
   [data-questions-options] {
     display: flex;
     flex-direction: column;
-    gap: var(--agent-questions-gap, var(--agent-questions-gap-default));
+    gap: var(--agent-questions-gap);
   }
 
   [data-questions-option] {
@@ -70,29 +70,31 @@
        down to the body's vertical midpoint, which sat between label
        and description rather than on the label. */
     align-items: start;
-    gap: var(--agent-questions-option-gap, var(--agent-questions-option-gap-default));
-    padding: var(--agent-questions-option-padding, var(--agent-questions-option-padding-default));
-    border: 1px solid var(--agent-questions-option-border, var(--agent-questions-option-border-default));
-    border-radius: var(--agent-questions-option-radius, var(--agent-questions-option-radius-default));
-    background: var(--agent-questions-option-bg, var(--agent-questions-option-bg-default));
+    gap: var(--agent-questions-option-gap);
+    padding: var(--agent-questions-option-padding);
+    border: 1px solid var(--agent-questions-option-border);
+    border-radius: var(--agent-questions-option-radius);
+    background: var(--agent-questions-option-bg);
     color: inherit;
     cursor: pointer;
     text-align: start;
     font: inherit;
+    /* font-family floor — see segment.css rationale (inline default). */
+    font-family: var(--agent-questions-font-family, var(--a-font-family-ui));
     transition:
-      background var(--agent-questions-duration, var(--agent-questions-duration-default)) var(--agent-questions-easing, var(--agent-questions-easing-default)),
-      border-color var(--agent-questions-duration, var(--agent-questions-duration-default)) var(--agent-questions-easing, var(--agent-questions-easing-default));
+      background var(--agent-questions-duration) var(--agent-questions-easing),
+      border-color var(--agent-questions-duration) var(--agent-questions-easing);
     min-width: 0;
     width: 100%;
   }
 
   [data-questions-option]:hover {
-    background: var(--agent-questions-option-bg-hover, var(--agent-questions-option-bg-hover-default));
+    background: var(--agent-questions-option-bg-hover);
   }
 
   [data-questions-option][data-selected] {
-    background: var(--agent-questions-option-bg-sel, var(--agent-questions-option-bg-sel-default));
-    border-color: var(--agent-questions-option-border-sel, var(--agent-questions-option-border-sel-default));
+    background: var(--agent-questions-option-bg-sel);
+    border-color: var(--agent-questions-option-border-sel);
   }
 
   [data-questions-option][disabled] {
@@ -101,7 +103,7 @@
   }
 
   [data-questions-option]:focus-visible {
-    outline: 2px solid var(--agent-questions-option-border-sel, var(--agent-questions-option-border-sel-default));
+    outline: 2px solid var(--agent-questions-option-border-sel);
     outline-offset: 2px;
   }
 
@@ -124,24 +126,24 @@
     min-width: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--agent-questions-option-body-gap, var(--agent-questions-option-body-gap-default));
+    gap: var(--agent-questions-option-body-gap);
   }
 
   [data-questions-option-label] {
-    font-size: var(--agent-questions-label-size, var(--agent-questions-label-size-default));
-    font-weight: var(--agent-questions-label-weight, var(--agent-questions-label-weight-default));
-    color: var(--agent-questions-label-fg, var(--agent-questions-label-fg-default));
+    font-size: var(--agent-questions-label-size);
+    font-weight: var(--agent-questions-label-weight);
+    color: var(--agent-questions-label-fg);
   }
 
   [data-questions-option-desc] {
-    font-size: var(--agent-questions-desc-size, var(--agent-questions-desc-size-default));
-    color: var(--agent-questions-desc-fg, var(--agent-questions-desc-fg-default));
+    font-size: var(--agent-questions-desc-size);
+    color: var(--agent-questions-desc-fg);
     line-height: 1.4;
   }
 
   [data-questions-option-check] {
-    width: var(--agent-questions-check-size, var(--agent-questions-check-size-default));
-    height: var(--agent-questions-check-size, var(--agent-questions-check-size-default));
+    width: var(--agent-questions-check-size);
+    height: var(--agent-questions-check-size);
     border-radius: 50%;
     flex-shrink: 0;
     display: flex;
@@ -149,18 +151,18 @@
     justify-content: center;
     background: transparent;
     opacity: 0;
-    transition: opacity var(--agent-questions-duration, var(--agent-questions-duration-default)) var(--agent-questions-easing, var(--agent-questions-easing-default));
+    transition: opacity var(--agent-questions-duration) var(--agent-questions-easing);
     /* Match the leading-icon offset so a row of [icon · label · check]
        reads as one horizontal line aligned to the label's first line. */
-    margin-top: calc((1.5em - var(--agent-questions-check-size, var(--agent-questions-check-size-default))) / 2);
+    margin-top: calc((1.5em - var(--agent-questions-check-size)) / 2);
   }
 
   [data-questions-option][data-selected] [data-questions-option-check] {
-    background: var(--agent-questions-check-bg, var(--agent-questions-check-bg-default));
+    background: var(--agent-questions-check-bg);
     opacity: 1;
   }
 
   [data-questions-option][data-selected] [data-questions-option-check] icon-ui {
-    color: var(--agent-questions-check-fg, var(--agent-questions-check-fg-default));
+    color: var(--agent-questions-check-fg);
   }
 }