@adia-ai/web-components 0.8.21 → 0.8.22

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.22] — 2026-07-29
+
+### Fixed
+- **`select-ui` action rows no longer read as selected in an uncommitted select** (`components/select/`; independent-review finding, 2026-07-29). Action rows stamped `data-value=""`, and since `value` defaults to `''`, the aria-selected sync marked every command row selected whenever nothing was committed — the default state of a user menu, so screen readers announced "Log out, selected" and the row rendered at selected weight. Action rows now carry no `data-value` at all, both aria-selected paths (initial stamp + sync loop) skip them, and the regression test covers the sync loop the original tests missed.
+
+### Changed
+- **`combobox-ui` single-select rows carry a radio indicator** (`components/combobox/`; operator ruling 2026-07-27, extended). `select-ui` adopted the indicator treatment in 0.8.17 — "selection rides the control, not a row tint" — but combobox was left tinting the committed row with `--a-ui-bg-selected`, so two sibling single-select surfaces disagreed about what *selected* looks like (the same divergence class gh#474 fixed between `form-popover-ui` and `select-ui`). Rows now stamp `[data-single-option]` + a leading `[data-radio]` (bordered circle, primary ring + centre dot when committed), mirroring select-ui's structure and CSS exactly. `--combobox-option-bg-selected` / `-fg-selected` remain consumer-overridable API, but their DEFAULTS move to the plain row colors — set `--combobox-option-bg-selected` to re-enable a tinted row. Hover/active feedback is restated on the selected row, since the 2-attribute selected rule outweighs the single-attribute `[data-active]` one (the trap select-ui hit when its tint was removed). Tests 15 → 17.
+
+### Maintenance
+- **`dist/` bundles rebuilt** in this cut's window (4 file(s)) — regenerated from the source changes described above, not independent edits.
+
 ## [0.8.21] — 2026-07-28
 
 ### Fixed

package/components/combobox/combobox.a2ui.json

@@ -342,7 +342,7 @@
         "description": "Background for the currently active (arrow-navigated) option"
       },
       "--combobox-option-bg-selected": {
-        "description": "Background for the currently committed option"
+        "description": "Background for the currently committed option. Defaults to `transparent`: selection is shown by the leading radio indicator rather than a row tint, matching select-ui. Set this to re-enable a tinted selected row."
       },
       "--combobox-option-fg-active": {
         "description": "Foreground for the currently active option"

package/components/combobox/combobox.class.js

@@ -394,10 +394,20 @@ export class UICombobox extends UIFormElement {
       el.dataset.value = opt.value ?? '';
       if (opt.disabled) el.setAttribute('aria-disabled', 'true');
       if (opt.value === this.value) el.setAttribute('aria-selected', 'true');
-      // Single wrapping span: [role="option"] is display:flex, and a bare
-      // <mark> + text-run pair become SEPARATE flex items — flex drops the
-      // whitespace between them ("Ada Lovelace" rendered "AdaLovelace").
-      el.innerHTML = `<span data-option-label>${this.#renderOptionLabel(opt.label ?? opt.value)}</span>`;
+      // Selection rides a RADIO indicator, not a row tint (operator ruling
+      // 2026-07-27, the same one select-ui's single-select rows follow) —
+      // combobox was the last single-select surface still speaking the old
+      // language, which made two sibling controls disagree about what
+      // "selected" looks like. [data-single-option] is the structural hook
+      // CSS keys off, mirroring select-ui exactly.
+      //
+      // Single wrapping span for the LABEL: [role="option"] is display:flex,
+      // and a bare <mark> + text-run pair become SEPARATE flex items — flex
+      // drops the whitespace between them ("Ada Lovelace" → "AdaLovelace").
+      el.setAttribute('data-single-option', '');
+      el.innerHTML =
+        `<span data-radio aria-hidden="true"></span>` +
+        `<span data-option-label>${this.#renderOptionLabel(opt.label ?? opt.value)}</span>`;
       el.addEventListener('click', this.#onOptionClick);
       el.addEventListener('mouseenter', this.#onOptionMouseEnter);
       return el;

package/components/combobox/combobox.css

@@ -41,8 +41,12 @@
     --combobox-option-py:           var(--a-space-1);
     --combobox-option-bg-active:    var(--a-ui-bg-hover);
     --combobox-option-fg-active:    var(--a-ui-text-hover);
-    --combobox-option-bg-selected:  var(--a-ui-bg-selected);
-    --combobox-option-fg-selected:  var(--a-ui-text-selected);
+    /* Selection rides the RADIO indicator, not a row tint (operator ruling
+       2026-07-27) — so these DEFAULT to the plain row colors, matching
+       select-ui. Both remain consumer-overridable API: set
+       --combobox-option-bg-selected to re-enable a tinted selected row. */
+    --combobox-option-bg-selected:  transparent;
+    --combobox-option-fg-selected:  var(--a-ui-text-subtle);
 
     /* ── Match highlight ── */
     --combobox-match-bg:            var(--md-sys-color-primary-container);
@@ -242,10 +246,54 @@ combobox-ui [data-listbox] [role="option"][data-active] {
 }
 
 combobox-ui [data-listbox] [role="option"][aria-selected="true"] {
-  background: var(--a-ui-bg-selected);
-  color: var(--a-ui-text-selected);
+  background: var(--combobox-option-bg-selected);
+  color: var(--combobox-option-fg-selected);
   font-weight: var(--a-ui-weight);
 }
+/* Hover/active feedback restated on the selected row: the 2-attribute rule
+   above outweighs the single-attribute [data-active] rule, so without this a
+   selected row would stop responding to keyboard/pointer highlight (the same
+   trap select-ui hit when its row tint was removed). */
+combobox-ui [data-listbox] [role="option"][aria-selected="true"][data-active] {
+  background: var(--a-ui-bg-hover);
+  color: var(--a-ui-text-hover);
+}
+
+/* ── Radio indicator (mirrors select-ui's single-select rows) ── */
+combobox-ui [data-listbox] [role="option"][data-single-option] {
+  gap: var(--a-space-2);
+}
+combobox-ui [data-listbox] [role="option"][data-single-option] [data-radio] {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid var(--a-ui-border);
+  border-radius: 50%;
+  background: var(--md-sys-color-neutral-surface-bright);
+  transition: border-color var(--a-duration-fast) var(--a-easing);
+}
+combobox-ui [data-listbox] [role="option"][data-single-option] [data-radio]::after {
+  content: '';
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: var(--md-sys-color-primary);
+  transform: scale(0);
+  transition: transform var(--a-duration-fast) var(--a-easing);
+}
+combobox-ui [data-listbox] [role="option"][data-single-option][aria-selected="true"] [data-radio] {
+  border-color: var(--md-sys-color-primary);
+}
+combobox-ui [data-listbox] [role="option"][data-single-option][aria-selected="true"] [data-radio]::after {
+  transform: scale(1);
+}
+combobox-ui [data-listbox] [role="option"][data-single-option] [data-option-label] {
+  flex: 1;
+  min-width: 0;
+}
 
 combobox-ui [data-listbox] [role="option"][aria-disabled="true"] {
   color: var(--a-ui-text-disabled);

package/components/combobox/combobox.yaml

@@ -247,7 +247,11 @@ tokens:
   --combobox-option-fg-active:
     description: Foreground for the currently active option
   --combobox-option-bg-selected:
-    description: Background for the currently committed option
+    description: >-
+      Background for the currently committed option. Defaults to
+      `transparent`: selection is shown by the leading radio indicator
+      rather than a row tint, matching select-ui. Set this to re-enable a
+      tinted selected row.
   --combobox-match-bg:
     description: Background for `<mark>` spans that highlight matched substrings
 requiredIcons:

package/components/select/select.class.js

@@ -541,8 +541,12 @@ export class UISelect extends UIFormElement {
         ? new Set(this.value.split(',').map((s) => s.trim()).filter(Boolean))
         : null;
       for (const opt of this.#listbox.querySelectorAll('[role="option"]')) {
+        // Action rows have no data-value (they are commands — see the
+        // stamping note); null must never compare equal to a value, and
+        // `null === ''` is already false, but the explicit guard keeps a
+        // future `v ?? ''` normalization from resurrecting the leak.
         const v = opt.getAttribute('data-value');
-        const selected = selSet ? selSet.has(v) : v === this.value;
+        const selected = v !== null && (selSet ? selSet.has(v) : v === this.value);
         if (selected) opt.setAttribute('aria-selected', 'true');
         else opt.removeAttribute('aria-selected');
       }
@@ -766,12 +770,19 @@ export class UISelect extends UIFormElement {
       }
       const el = document.createElement('div');
       el.setAttribute('role', 'option');
-      el.setAttribute('data-value', opt.value || '');
+      // Action rows carry NO [data-value]: they are commands, not values.
+      // Stamping `opt.value || ''` gave them data-value="" — and since
+      // `this.value` ALSO defaults to '', the aria-selected sync marked
+      // every action row selected whenever nothing was committed (the
+      // default state of a user menu — reviewer finding, 2026-07-29).
+      // With the attribute absent, getAttribute() returns null and no
+      // value comparison can ever match.
+      if (!opt.action) el.setAttribute('data-value', opt.value || '');
       // §FB-46: [multiple] value is comma-separated — use Set membership.
       const selSet = this.multiple
         ? new Set(this.value.split(',').map((s) => s.trim()).filter(Boolean))
         : null;
-      const isSelected = selSet ? selSet.has(opt.value) : opt.value === this.value;
+      const isSelected = !opt.action && (selSet ? selSet.has(opt.value) : opt.value === this.value);
       // SPEC-040 — multi-select option rows render a leading checkbox
       // indicator (CSS-driven via [data-multi-option]); the `check` icon
       // shows when aria-selected="true".