@adia-ai/web-components 0.6.33 → 0.6.35

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # Changelog — @adia-ai/web-components
 
+## [0.6.35] — 2026-05-24
+
+### Fixed — `<popover-ui>` + `<menu-ui>` yaml `slots:` blocks declare the canonical `trigger` / `content` vocabulary (FB-62)
+
+- **CSS positioned slots that the yaml said didn't exist.** `popover.yaml` pre-patch line 43: `slots: {}` (empty). But `popover.css` positions `[slot="trigger"]` and `[slot="content"]` across 7 selectors (open/closed states + first/last-child margin guards), and the yaml's own a2ui rule already states "popover-ui wraps a focusable trigger (slot=\"trigger\") + arbitrary interactive content (slot=\"content\")". Parallel case in `menu.yaml`: `slots:` declared only `default`, but the a2ui rule said "MUST have exactly one child with slot=\"trigger\"". Three sources said the slots existed, one source (the structured `slots:` SoT) said they didn't. Surfaced as 6 INFO findings in the adia-ui-kit v3.4.X recipe-staleness audit; suppressed via `KNOWN_PARENT_SLOT_DRIFT`.
+- **Fix**: `popover.yaml` `slots:` now declares `trigger` (focusable element that opens the popover; MUST be focusable for keyboard accessibility — bare `<span>`/`<div>` won't work) and `content` (the body, hoisted to top-layer via `:popover-open`). `menu.yaml` `slots:` adds `trigger` (Required — exactly one child must have `slot="trigger"`; without it the menu cannot open). Pure yaml backfill — no JS, no CSS, no API change. Sidecar `.a2ui.json` files regenerated. Kit's `KNOWN_PARENT_SLOT_DRIFT` allowlist entries can be removed next cycle. Files: `components/popover/popover.{yaml,a2ui.json}`, `components/menu/menu.{yaml,a2ui.json}`.
+
+### Fixed — chat-input + textarea + input substrate prose accurately documents Enter→submit (FB-63)
+
+- **`submit-on-enter` was a documentation phantom across the substrate, and the prose around it carried two adjacent lies.** Three input primitives all dispatch a bubbling `submit` event on Enter (without Shift) unconditionally: `textarea.class.js:97-106`, `input.class.js:713-727`, and `chat-input.js` (which delegates to the inner `<textarea-ui>`'s submit event at line 147). None of them observe a `[submit-on-enter]` attribute — yet the substrate's own demos, yamls, and a2ui rules used `<chat-input-ui submit-on-enter>` as canonical authoring shape. Two adjacent lies discovered in the same cluster: (1) `textarea.yaml` description + a2ui rule + `textarea.examples.html` claimed "Enter inserts a newline — textarea-ui does NOT emit a `submit` event" — false per `textarea.class.js:97-106`. (2) `input.yaml` + `input.examples.html` claimed "only chat-input-ui reflects the [submit-on-enter] attribute" — false, NONE of them reflect it.
+- **Fix**: `submit-on-enter` stripped from `patterns/chat-shell/chat-shell.examples.html` (1 occurrence). `chat-input.yaml` event description + `chat-input.js` docstring now state the truth — Enter→submit is unconditional, delegated from inner `<textarea-ui>`, no opt-in/opt-out. `textarea.yaml` description (line 10-18) + a2ui rule (line 119-123) + `textarea.examples.html:253` corrected: "Enter (without Shift) dispatches a bubbling `submit` event; Shift+Enter inserts a newline. Unconditional — no opt-in/opt-out attribute." `input.yaml` + `input.examples.html` adjacent prose: stripped "only chat-input-ui reflects [submit-on-enter]" claim; replaced with accurate "the plain `<input-ui>` primitive ALSO fires `submit` on Enter (unconditional, no opt-in attribute); `<chat-input-ui>` simply builds on that semantic." Companion strip in `@adia-ai/web-modules` chat-cluster (see its changelog). Sweep-grep `submit-on-enter` in authored sources now returns only the two truth-note phrasings (both say "no `[submit-on-enter]` opt-in/opt-out"). Sidecar `.a2ui.json` files regenerated; corpus catalog + rules text rebuilt. Files: `components/chat-thread/chat-input.{yaml,js,a2ui.json}`, `components/textarea/textarea.{yaml,examples.html,a2ui.json}`, `components/input/input.{yaml,examples.html,a2ui.json}`, `patterns/chat-shell/chat-shell.examples.html`.
+
+### Fixed — `<spinner-ui variant="dots">` dot spacing now even (was lopsided)
+
+- **The pre-fix dots layout used `::before` + `::after` pseudo-elements** as the outer two dots and a `box-shadow` on `::before` to paint the middle dot. Three breakages: (1) the box-shadow middle dot doesn't participate in the host's flex-gap math, so the gap between dot1↔dot2 and dot2↔dot3 was unequal (the screenshot showed two dots close together on the left, then one isolated on the right). (2) The box-shadow dot couldn't carry its own `@keyframes` animation, so the middle stayed at default scale while the outer two bounced — a "middle is anchored" look. (3) The author comment explicitly acknowledged the hack ("simpler, more robust shape is to overlay three identical dot pseudos via a flexbox container of pseudo + two child pseudos isn't possible without a stamped child"). Fix: `class.js` `#syncDots()` now stamps three real `<span data-spinner-dot=N>` children when `variant="dots"`. Flex-gap distributes the row evenly; each child gets `animation-delay: 0 / T/3 / 2T/3` so the bounce reads as a left-to-right wave. Reduced-motion + `[paused]` selectors updated to include `> [data-spinner-dot]`. Files: `components/spinner/class.js`, `components/spinner/spinner.css`, `components/spinner/spinner.test.js`.
+
+### Added — `<spinner-ui variant="knight">` knight-rider sliding-bar variant
+
+- **NEW `knight` variant** — a horizontal track with a thumb that slides back-and-forth via `animation-direction: alternate`. Reads as a determinate-looking bar but is indeterminate by intent (no progress value; same loading semantics as the other variants). Tokens added: `--spinner-bar-track-width` (default `4rem`), `--spinner-bar-track-height` (default `var(--spinner-stroke)` — visual continuity with arc/ring), `--spinner-bar-thumb-ratio` (default `0.3` — thumb is 30% of track). Keyframe math: `translateX((1 / ratio - 1) * 100%)` of thumb-relative width = `(track - thumb)` px regardless of track-width override. Reduced-motion path hides the thumb and falls through to the shared ellipsis fallback. yaml `variant` enum + description updated. Files: `components/spinner/spinner.css`, `components/spinner/spinner.yaml`, `components/spinner/spinner.examples.html`.
+
+### Added — `<integration-card-ui>` demo page now ships a live CRUD drawer wiring
+
+- **`integration-card.examples.html` previously showed cards only as static visual showcases** — clicking `Connect` / `Configure` dispatched the `connect` / `configure` events into the void (no consumer wiring on the docs page). Added a "Wired to drawer (CRUD)" section at the top with three cards (`slack` / `github` / `linear`) bound to a shared `<drawer-ui>` form. NEW `integration-card.examples.js` setup module: listens for bubbled events at the grid level, opens the drawer in `connect` or `configure` mode, persists token to an in-memory store keyed by `provider`, and on Save / Disconnect mutates the originating card's `status` attribute. Demonstrates the full Create / Update / Delete loop expected of consumers per SPEC-062 §134-136. Sitemap entry gains `"setup": ".../integration-card.examples.js"` so the docs router auto-imports the module on route load (same pattern as `agent-feedback-bar`, etc.). Files: `components/integration-card/integration-card.examples.html`, `components/integration-card/integration-card.examples.js` (NEW), `site/sitemap.json`.
+
+### Changed — `<date-range-picker-ui>` trigger surface mirrors `<select-ui>` / `<calendar-picker-ui>`
+
+- **`date-range-picker.css` had only `:scope > [slot="trigger"] { min-width: 14em }`** — the entire trigger chrome relied on `<button-ui variant="outline">`'s defaults, which produced an off-pattern surface vs. the rest of the input/picker family. Trigger now styled with the canonical contract: flex row, `min-height: var(--a-size)`, `padding: 0 var(--a-ui-px)`, `border-radius: var(--a-radius)`, `border: 1px solid var(--a-ui-border)`, `background: var(--a-ui-bg)`, `justify-content: space-between` so leading icon + label sit start, trailing caret sits end. Adds canonical `--date-range-picker-trigger-{height,px,gap,radius,bg,bg-hover,fg,border,border-hover,focus-ring}` token shelf — same tokens `<calendar-picker-ui>` already exposes, so consumers can override either family-side. Hover/focus-visible rules attached for parity. Files: `components/date-range-picker/date-range-picker.css`.
+
+### Fixed — `<spinner-ui>` rotational cadence (was 300ms, now 0.8s)
+
+- **`--spinner-duration-default` retargeted from `var(--a-duration-slow)` (300 ms — interaction-duration scale, tuned for hover/focus transitions) to `0.8s`** — canonical loader cadence. A full revolution at 300 ms reads as a frantic blur; 0.8 s gives smooth, perceptible motion that signals "loading" without alarming the eye. The `--a-duration-*` token family (120 / 250 / 300 ms) is now correctly reserved for state transitions; spinner uses its own rotational tempo. Files: `components/spinner/spinner.css`.
+
+### Fixed — `<modal-ui>` header no longer reserves a phantom flex slot for empty `text=`
+
+- **`modal.css`'s `:scope [slot="header"]::before { content: attr(text); flex: 1 }` rule generated an empty-content pseudo-element with `flex: 1` whenever the host's `text` attr was empty or unset.** That phantom flex slot claimed the row's free space and pushed any slotted header content (e.g., `<confirm-dialog-ui>`'s stamped `<text-ui part="title">` + auto-stamped close button) to the trailing edge — the title rendered tight against the X close button instead of left-aligned. Same drift class as the `tag-ui` / `badge-ui` / `segment-ui` / `button-ui` phantom-gap arc (April–May 2026).
+- **Fix (defense-in-depth)**: CSS gate the `::before` on `[text]:not([text=""])` so the pseudo isn't generated when text is absent or empty; class.js no longer writes `text=""` on the header when `this.text` is falsy. Either side alone would fix the symptom; both prevent recurrence from independent edit paths. Visible effect: `<confirm-dialog-ui>` now renders "Save changes?" left-aligned with X on the right, matching the canonical header pattern. Files: `components/modal/modal.css`, `components/modal/class.js`.
+
+### Added — `<calendar-grid-ui>` `range-start` / `range-end` props for in-range cell highlighting
+
+- **`<calendar-grid-ui>` gains two new reflected string props — `range-start` and `range-end` (ISO `YYYY-MM-DD`).** When both are set + ordered, day cells strictly between the endpoints get `[data-in-range]` stamped on them. New CSS state styles in-range cells with `--calendar-grid-day-bg-in-range` (defaults to `--a-accent-muted` — the muted accent strip) and `--calendar-grid-day-fg-in-range`. The endpoints themselves continue rendering via the `value` prop's `[data-selected]` state (full `--a-accent` fill); the in-range middle is visually subordinate. Per-day cells also get `data-range-start` / `data-range-end` markers for future shape work (rounded caps, etc.).
+- **`<date-range-picker-ui>` now wires this contract**: in `render()`, the effective from/to (pending click-state OR committed value) is pushed onto BOTH calendar-grid panes via `range-start` / `range-end` attributes, so each pane independently lights up its in-range cells. Closes the "selected start + end but no fill between" trap. Files: `components/calendar-grid/calendar-grid.css`, `components/calendar-grid/class.js`, `components/calendar-grid/calendar-grid.yaml`, `components/date-range-picker/class.js`.
+
+## [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)

package/color/index.js

@@ -5,7 +5,7 @@
  *
  * §301 (v0.5.12, FEEDBACK-29 re-bucket from v0.6.0). Pure functions; no
  * DOM/runtime side-effects. Pre-§301 these helpers lived inline at
- * `components/color-picker/class.js:34-121`. Extracted into a shared
+ * `components/color-picker/color-picker.class.js:34-121`. Extracted into a shared
  * subpath so consumers (Tokens Studio, custom palette tools) don't
  * re-implement OKLCH math.
  *

package/components/accordion/accordion-item.yaml

@@ -1,9 +1,9 @@
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 #
 # §176 (v0.5.5): authored to close the §175 baseline-orphan class. The
-# component already existed as a sibling class in the parent's class.js
+# component already existed as a sibling class in the parent's accordion.class.js
 # + was registered alongside the parent (e.g. UIList + UIListItem both
-# from list/class.js). The catalog just lacked its own entry. With the
+# from list/list.class.js). The catalog just lacked its own entry. With the
 # §172 sibling-yaml scanner, this file gets picked up next to the parent
 # yaml.
 

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/accordion/accordion.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIAccordion, UIAccordionItem } from './class.js';
+import { UIAccordion, UIAccordionItem } from './accordion.class.js';
 
 defineIfFree('accordion-ui', UIAccordion);
 defineIfFree('accordion-item-ui', UIAccordionItem);

package/components/action-list/action-item.yaml

@@ -1,9 +1,9 @@
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 #
 # §176 (v0.5.5): authored to close the §175 baseline-orphan class. The
-# component already existed as a sibling class in the parent's class.js
+# component already existed as a sibling class in the parent's action-list.class.js
 # + was registered alongside the parent (e.g. UIList + UIListItem both
-# from list/class.js). The catalog just lacked its own entry. With the
+# from list/list.class.js). The catalog just lacked its own entry. With the
 # §172 sibling-yaml scanner, this file gets picked up next to the parent
 # yaml.
 

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/action-list/action-list.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIActionList, UIActionItem } from './class.js';
+import { UIActionList, UIActionItem } from './action-list.class.js';
 
 defineIfFree('action-list-ui', UIActionList);
 defineIfFree('action-item-ui', UIActionItem);

package/components/agent-artifact/{class.js → agent-artifact.class.js}

@@ -59,7 +59,7 @@ export class UIAgentArtifact extends UIElement {
   };
 
   // §205 (v0.5.7): dynamic chevron icons stamped on collapse/expand state
-  // transition (class.js:119+188). Per FEEDBACK-16 §1 + §209 slot-11 ternary-
+  // transition (agent-artifact.class.js:119+188). Per FEEDBACK-16 §1 + §209 slot-11 ternary-
   // walker discovery. Note: `this.icon` consumer-supplied — not declared here.
   static requiredIcons = ['caret-right', 'caret-down'];
 

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-artifact/agent-artifact.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIAgentArtifact } from './class.js';
+import { UIAgentArtifact } from './agent-artifact.class.js';
 
 defineIfFree('agent-artifact-ui', UIAgentArtifact);
 

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-feedback-bar/agent-feedback-bar.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIAgentFeedbackBar } from './class.js';
+import { UIAgentFeedbackBar } from './agent-feedback-bar.class.js';
 
 defineIfFree('agent-feedback-bar-ui', UIAgentFeedbackBar);
 

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

package/components/agent-questions/agent-questions.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIAgentQuestions } from './class.js';
+import { UIAgentQuestions } from './agent-questions.class.js';
 
 defineIfFree('agent-questions-ui', UIAgentQuestions);