@adia-ai/web-components 0.6.32 → 0.6.34

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.34] — 2026-05-23
+
+### Added — Wave 1 + Wave 2: 10 P1 components shipped from SPEC pilot
+
+- **Wave 1 — 8 components** (commit `5ad89318d`): SPEC-001, SPEC-022, SPEC-036, SPEC-037, SPEC-043, SPEC-049, SPEC-056, SPEC-062. First wave of the SPEC-driven component-authoring pilot. Each ships full yaml + a2ui.json + .js class + .css + .examples.html + .test.js per the four-axis contract.
+- **Wave 2 — 2 components** (commit `501053880`): SPEC-019, SPEC-038. Completes the 10-component pilot.
+- **`<calendar-grid-ui>` substrate primitive extracted** (commit `dcf16cdf8`): a substrate-tier primitive supporting the calendar-family Wave 2 components.
+- **Wave 1/2 visual-QA fixes** also landed in `dcf16cdf8`.
+- Component count: 92 → 100 primitives (8 net additions). yaml/a2ui.json/d.ts coherence preserved.
+
+### Fixed — OD-5 token-shadowing closed across 98 components (`-default` suffix sweep)
+
+- **`-default` suffix added to all leaf component tokens** (commit `e694be9d0`, single-component fix at `cbdf11f09`): unlocks themability/consumer override across all 98 component CSS files. Pattern: `--button-bg: var(--a-fg);` → `--button-bg-default: var(--a-fg); ... background: var(--button-bg, var(--button-bg-default));`. Consumer overrides at any ancestor surface now apply correctly without being shadowed by the leaf-token default. Closes OD-5 (consumer-side override-discoverability regression).
+
+### Changed — `dist/web-components.min.js` + `dist/web-components.min.css` rebuilt
+
+- Bundle pass absorbed Wave 1+2 + OD-5 + `<calendar-grid-ui>` source changes. Bundle sizes adjusted accordingly.
+
+### Maintenance — `<spinner-ui>` exempted from size-wiring audit
+
+- **`scripts/release/check-size-wiring.mjs`** YAML_SIZE_EXEMPT: added `spinner` — `size:` prop drives diameter via `--spinner-size` matching the icon-ui ladder (sm 14px / md 16px / lg 20px), parallel to existing exemptions for `icon`, `rating`, `swatch`. Content-driven loading glyph, not row-family. Surfaced by the audit after spinner joined the 100-component roster.
+
+## [0.6.33] — 2026-05-23
+
+### Changed — `dist/icons-manifest.js` comment header updated (FB-53 §1 companion)
+
+- **`dist/icons-manifest.js`** is regenerated as a companion to the web-modules co-emit (see `@adia-ai/web-modules` [Unreleased] entry). The manifest file content is byte-identical except for the header comment, which now mentions co-location with both `web-components.min.js` AND `web-modules/everything.min.js`. `dist/web-components.min.js` rebuilt as part of the same bundle pass; no functional change. Files: `dist/icons-manifest.js`, `dist/web-components.min.js`.
+
+### Fixed — `<table-ui raw>` is now a true visual-only passthrough (FB-53 §2)
+
+- **`<table-ui raw>` previously applied the chrome reset but still ran the full data lifecycle**, so wrapping a consumer-authored native `<table>` with no `.data` set produced a phantom `[data-empty]` "No data" overlay above the consumer's content. Root cause: `class.js` `render()` had no `this.raw` short-circuit; `#renderOverlays` injected the empty-state placeholder unconditionally whenever `this.#data.length === 0`. Fix: `render()` now early-returns when `this.raw` is set — no header injection, no body reconciliation, no overlays, no aggregation, no pagination. Raw is now the documented "consumer owns the body shape" mode. yaml description expanded with the full semantic. NEW 4 vitest cases in `table.test.js` (lock the contract: no `[data-empty]`, no `[data-header]`, no `[data-body]`, no rowgroups; non-raw default still injects them); 18/18 passing. Files: `components/table/class.js`, `components/table/table.yaml`, `components/table/table.test.js`.
+
+### Fixed — `<field-ui>` no longer reserves row-gap for an absent message row (FB-54)
+
+- **`field.css` `:scope` declared `row-gap: var(--field-gap)` unconditionally**, so when no `[slot="hint"]` and no `[slot="error"]` were present, the grid's zero-content message row still reserved `--field-gap` (~8 px) between itself and the control row. Result: `<field-ui inline>` rendered ~7-8 px taller than non-field-ui siblings in a `<row-ui align="center">`, visually "lifting" the label relative to sibling control text. Fix: move `row-gap: var(--field-gap)` into a `:has(> [slot="hint"], > [slot="error"])` guard so the gap is reserved only when a message slot is actually present. Existing consumers with hints/errors get the same rendering; consumers without get a tighter, sibling-matching height. `:has()` is baseline (Chromium 105 / Safari 15.4 / Firefox 121 — well within ADR-0007's floor). NEW source-grep regression tests in `field.test.js` lock the contract (19/19 passing). Files: `components/field/field.css`, `components/field/field.test.js`.
+
+### Changed — `<tabs-ui>` row height now anchors to `var(--a-size)` (was hardcoded `2.25rem`)
+
+- **`--tabs-button-height` retargeted from the hardcoded `2.25rem` (36 px, equivalent to `[size="lg"]`) to `var(--a-size)`.** Tabs now respond to the universal `[size]` attribute system like `button-ui`, `select-ui`, `nav-item-ui`, and other row-family primitives — `<tabs-ui size="sm">` → 24 px, default → 30 px, `<tabs-ui size="lg">` → 36 px (all at default `--a-density: 1`). Default-rendered tabs visibly shrink from 36 px → 30 px. **Behavior change** for consumers depending on lg-by-default tabs: set `[size="lg"]` on the host (or override `--tabs-button-height: var(--a-size-lg)`) to restore. Caught by NEW `check:size-wiring` audit (commit `2d931b980`). Files: `components/tabs/tabs.css`, `components/tabs/tabs.examples.html`.
+
+### Maintenance — `<kbd-ui>` exempted from size-wiring audit
+
+- **`scripts/release/check-size-wiring.mjs`** EXEMPT + YAML_SIZE_EXEMPT: added `kbd-ui` to both — `--kbd-height: 1.25rem` is intentional (keyboard-key cap matching small-text rhythm, not row-family) and the `size:` prop drives font-size scale, parallel to existing exemptions for `badge`, `tag`, `icon`. Pre-existing technical debt surfaced by the new audit in v0.6.32; not a v0.6.33-introduced violation. Files: `scripts/release/check-size-wiring.mjs`.
+
 ## [0.6.32] — 2026-05-23
 
 ### Fixed (P0) — `everything.js` CDN bundle now includes all primitives (FB-51)

package/components/accordion/accordion.css

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

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

@@ -1,13 +1,13 @@
 @scope (action-list-ui) {
   :where(:scope) {
-    --action-list-gap: var(--a-space-0-5);
+    --action-list-gap-default: var(--a-space-0-5);
   }
 
   :scope {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    gap: var(--action-list-gap);
+    gap: var(--action-list-gap, var(--action-list-gap-default));
     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:            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);
+    --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);
 
     /* ── Colors ── */
-    --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);
+    --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);
 
     /* ── Typography ── */
-    --agent-artifact-title-size:        var(--a-ui-md);
-    --agent-artifact-title-weight:      var(--a-weight-medium);
+    --agent-artifact-title-size-default:        var(--a-ui-md);
+    --agent-artifact-title-weight-default:      var(--a-weight-medium);
 
     /* ── Motion ── */
-    --agent-artifact-duration:          var(--a-duration-fast);
+    --agent-artifact-duration-default:          var(--a-duration-fast);
   }
 
   :scope {
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--agent-artifact-border);
-    border-radius: var(--agent-artifact-radius);
-    background: var(--agent-artifact-bg);
+    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));
     overflow: hidden;
     min-width: 0;
   }
 
-  :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); }
+  :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); }
 
   [data-artifact-header] {
     display: flex;
     align-items: center;
-    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);
+    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));
     cursor: pointer;
     user-select: none;
     min-width: 0;
-    transition: background var(--agent-artifact-duration);
+    transition: background var(--agent-artifact-duration, var(--agent-artifact-duration-default));
   }
 
   [data-artifact-header]:hover {
-    background: var(--agent-artifact-header-bg-hover);
+    background: var(--agent-artifact-header-bg-hover, var(--agent-artifact-header-bg-hover-default));
   }
 
   [data-artifact-header]:focus-visible {
@@ -69,9 +69,9 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: var(--agent-artifact-title-size);
-    font-weight: var(--agent-artifact-title-weight);
-    color: var(--agent-artifact-fg);
+    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));
   }
 
   /* [data-artifact-kind] is a <badge-ui size="sm"> — it brings its own pill
@@ -91,11 +91,11 @@
 
   [data-artifact-chevron] {
     flex-shrink: 0;
-    transition: transform var(--agent-artifact-duration);
+    transition: transform var(--agent-artifact-duration, var(--agent-artifact-duration-default));
   }
 
   [data-artifact-body] {
-    padding: var(--agent-artifact-padding);
+    padding: var(--agent-artifact-padding, var(--agent-artifact-padding-default));
     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:      var(--a-space-1);
-    --agent-feedback-bar-padding:  var(--a-space-2);
+    --agent-feedback-bar-gap-default:      var(--a-space-1);
+    --agent-feedback-bar-padding-default:  var(--a-space-2);
 
     /* ── Typography ── */
-    --agent-feedback-bar-font:     var(--a-ui-sm);
+    --agent-feedback-bar-font-default:     var(--a-ui-sm);
 
     /* ── Colors ── */
-    --agent-feedback-bar-fg:       var(--a-fg-muted);
+    --agent-feedback-bar-fg-default:       var(--a-fg-muted);
   }
 
   :scope {
     display: flex;
     align-items: center;
-    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);
+    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));
   }
 
   [data-feedback-status] {
     margin-inline-start: auto;
-    color: var(--agent-feedback-bar-fg);
-    font-size: var(--agent-feedback-bar-font);
+    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));
   }
 
   :scope[disabled] {

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

@@ -1,64 +1,64 @@
 @scope (agent-questions-ui) {
   :where(:scope) {
     /* ── Typography ── */
-    --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);
+    --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);
 
     /* ── Colors ── */
-    --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);
+    --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);
 
     /* ── Layout ── */
-    --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);
+    --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);
     /* Component-intrinsic measurement; no --a-space-* equivalent */
-    --agent-questions-check-size:      20px;
+    --agent-questions-check-size-default:      20px;
 
     /* ── Motion ── */
-    --agent-questions-duration:        var(--a-duration-fast);
-    --agent-questions-easing:          var(--a-easing-out);
+    --agent-questions-duration-default:        var(--a-duration-fast);
+    --agent-questions-easing-default:          var(--a-easing-out);
   }
 
   :scope {
     display: flex;
     flex-direction: column;
-    gap: var(--agent-questions-gap);
+    gap: var(--agent-questions-gap, var(--agent-questions-gap-default));
   }
 
   [data-questions-q] {
-    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;
+    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;
   }
 
   [data-questions-helper] {
-    font-size: var(--agent-questions-helper-size);
-    color: var(--agent-questions-helper-fg);
+    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));
     padding-block-end: var(--a-space-1);
   }
 
   [data-questions-options] {
     display: flex;
     flex-direction: column;
-    gap: var(--agent-questions-gap);
+    gap: var(--agent-questions-gap, var(--agent-questions-gap-default));
   }
 
   [data-questions-option] {
@@ -70,29 +70,29 @@
        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);
-    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);
+    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));
     color: inherit;
     cursor: pointer;
     text-align: start;
     font: inherit;
     transition:
-      background var(--agent-questions-duration) var(--agent-questions-easing),
-      border-color var(--agent-questions-duration) var(--agent-questions-easing);
+      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));
     min-width: 0;
     width: 100%;
   }
 
   [data-questions-option]:hover {
-    background: var(--agent-questions-option-bg-hover);
+    background: var(--agent-questions-option-bg-hover, var(--agent-questions-option-bg-hover-default));
   }
 
   [data-questions-option][data-selected] {
-    background: var(--agent-questions-option-bg-sel);
-    border-color: var(--agent-questions-option-border-sel);
+    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));
   }
 
   [data-questions-option][disabled] {
@@ -101,7 +101,7 @@
   }
 
   [data-questions-option]:focus-visible {
-    outline: 2px solid var(--agent-questions-option-border-sel);
+    outline: 2px solid var(--agent-questions-option-border-sel, var(--agent-questions-option-border-sel-default));
     outline-offset: 2px;
   }
 
@@ -124,24 +124,24 @@
     min-width: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--agent-questions-option-body-gap);
+    gap: var(--agent-questions-option-body-gap, var(--agent-questions-option-body-gap-default));
   }
 
   [data-questions-option-label] {
-    font-size: var(--agent-questions-label-size);
-    font-weight: var(--agent-questions-label-weight);
-    color: var(--agent-questions-label-fg);
+    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));
   }
 
   [data-questions-option-desc] {
-    font-size: var(--agent-questions-desc-size);
-    color: var(--agent-questions-desc-fg);
+    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));
     line-height: 1.4;
   }
 
   [data-questions-option-check] {
-    width: var(--agent-questions-check-size);
-    height: var(--agent-questions-check-size);
+    width: var(--agent-questions-check-size, var(--agent-questions-check-size-default));
+    height: var(--agent-questions-check-size, var(--agent-questions-check-size-default));
     border-radius: 50%;
     flex-shrink: 0;
     display: flex;
@@ -149,18 +149,18 @@
     justify-content: center;
     background: transparent;
     opacity: 0;
-    transition: opacity var(--agent-questions-duration) var(--agent-questions-easing);
+    transition: opacity var(--agent-questions-duration, var(--agent-questions-duration-default)) var(--agent-questions-easing, var(--agent-questions-easing-default));
     /* 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)) / 2);
+    margin-top: calc((1.5em - var(--agent-questions-check-size, var(--agent-questions-check-size-default))) / 2);
   }
 
   [data-questions-option][data-selected] [data-questions-option-check] {
-    background: var(--agent-questions-check-bg);
+    background: var(--agent-questions-check-bg, var(--agent-questions-check-bg-default));
     opacity: 1;
   }
 
   [data-questions-option][data-selected] [data-questions-option-check] icon-ui {
-    color: var(--agent-questions-check-fg);
+    color: var(--agent-questions-check-fg, var(--agent-questions-check-fg-default));
   }
 }