@adia-ai/web-components 0.8.38 → 0.8.39

package/CHANGELOG.md

@@ -1,11 +1,29 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.39] — 2026-08-15
+
+### Changed
+- **`toggle-option-ui` converges onto `segment-ui`'s declared, parent-managed, reflected `[selected]` prop (ADR-0056, gh#1303).** Found by `framework-alignment-agent`'s corpus-wide component-state-naming sweep: the two same-role selection-item primitives named their "currently selected" state differently — `segment-ui` declared a reflected `selected: Boolean` prop (yaml → catalog → generative grammar), while `toggle-option-ui` had no declared state at all; the parent (`toggle-group-ui`) instead stamped a private `data-selected` attribute invisible to the yaml SoT, catalog, and A2UI grammar. `toggle-option-ui` gains `selected` (`Boolean`, default `false`, reflected) in `toggle-option.yaml` + `toggle-group.class.js`; `toggle-group-ui` now sets `selected` on its children (the `UIToggleOption` render pass stamps `aria-pressed` from it, mirroring `segment-ui`'s `aria-checked`-from-`selected` pattern); `toggle-group.css`'s `:scope[data-selected]` style rule becomes `toggle-option-ui[selected]` (moved outside `@scope`, same Safari-17.x attribute-restyle workaround `segment.css` already uses). Behavior, keyboard model, and the group's `value` as the single source of truth are unchanged. **SCOPING RULING (additive only, not the full ADR):** `toggle-group-ui` keeps stamping the legacy `data-selected` attribute on options in parallel, alongside the new `selected` prop — marked **DEPRECATED** in `toggle-option.yaml`/`toggle-group.yaml` — because it was an undocumented hook external CSS may already target; removing it is the breaking half of ADR-0056 and rides the ratified **0.9.0** breaking wave (alongside ADR-0052/0053/0054) rather than landing in this patch. `toggle-group.test.js` (new) covers the reflected `[selected]` + `aria-pressed` pairing, group-managed single-selection, multi-select, and the `data-selected` parallel-stamp deprecation case (named so it's obvious which test flips at 0.9.0 removal); `segmented.test.js` gains a regression check that `segment-ui`'s reference `[selected]`/`aria-checked` pairing is unchanged.
+### Fixed
+- **Trigger-caret sizing — the universal caret-size ruling (`--a-icon-size: var(--a-caret-size)`, encoded on `select-ui`'s trigger caret) is now applied consistently across the input/picker family (gh#1314).** `date-range-picker-ui`'s trigger caret never applied the rule at all, so it rode the ambient icon size and rendered visibly larger than `select-ui`'s caret in mixed control rows (e.g. the admin Finance Batches filter bar; consumer defect ADIA2-8729). Sweeping the rest of the trigger-caret family for the same class of miss found three more members: `datetime-picker-ui`'s trigger caret was missing the rule the same way; `combobox-ui`'s default caret-down suffix icon was sized off `--combobox-font-size` (the same value its leading/prefix icon correctly uses) instead of `--a-caret-size`; `calendar-picker-ui`'s `[slot="caret"]` was likewise sized off its own `--calendar-picker-font-size`. All four now resolve `--a-icon-size` to `--a-caret-size` on the caret glyph specifically (name-guarded on `combobox-ui`/date-picker family so a consumer-slotted non-caret glyph is unaffected), so every trigger caret in the family reads as one size. `time-picker-ui` was audited and excluded — it has no chevron/trigger caret (segmented inline input only). New/updated regression coverage in `date-range-picker.test.js`, `datetime-picker.test.js`, `combobox.test.js`, and a new `calendar-picker.test.js` asserts each caret rule's declared `--a-icon-size` computed value (CSS-source assertion — happy-dom doesn't evaluate `@scope` via `getComputedStyle`, same documented limitation as `badge.test.js`/`tag.test.js`).
+- **ADR-0055 — `command-ui`, `select-ui`'s searchable trigger, and `drilldown-ui`'s filter row no longer stamp a native `<input>` with no recorded ADR-0025 exception (gh#1302).** A corpus sweep (gh#1302) found three uncatalogued native `<input>` stamps: `command-ui`'s palette search field, `select-ui`'s searchable-trigger branch (ADR-0025's own compliant-list entry predated/overlooked this branch), and `drilldown-ui`'s filter row (found while decomposing the issue, not in the original report). ADR-0055 rules no new exceptions get added — all three are replaced with patterns already in-tree: `command-ui` and `select-ui`'s searchable branch now use a `contenteditable="plaintext-only"` span carrying `role="combobox"` (the `combobox-ui` pattern — placeholder via the `[data-empty]::before` pseudo, same mechanism as `input-ui`/`combobox-ui`); `drilldown-ui`'s filter row now composes `<input-ui raw>` (the `search-ui` precedent). Behavior parity verified by a per-surface browser probe (typing, filtering, Escape-clears-query, Backspace-doesn't-navigate-back for drilldown) — not tests alone. `agent-trace`'s native `<details>`/`<summary>` disclosure toggle is ruled explicitly out of ADR-0025's scope by the same ADR (carries no submittable value). `command.yaml` gains the `input` slot entry the CSS rewrite now positions (`audit-slot-vocab-vs-css`). `drilldown.yaml`'s `composes:` list gains `input-ui` (+ `button-ui`, previously undeclared for the back affordance).
+- **`scripts/dev/audit-stamped-native-buttons.mjs` extended to cover native `<input>` stamps, not just `<button>` (ADR-0055 follow-up, gh#1302).** Mirrors the existing button gate: no `createElement('input')` / `<input` in component source outside a `SANCTIONED_INPUT` map with a per-file reason. `input.class.js`'s `type="password"` branch is the one ADR-0025-named exception. Widening the scan surfaced pre-existing native `<input>` stamps outside gh#1302's audited scope — three `type="file"` OS-file-picker triggers (`chat-input.js`, `upload.class.js`, `admin-roster.js`) and two text-gathering surfaces (`otp-input.class.js`'s digit boxes, `table.class.js`'s filter-popover inputs) — all recorded as `PENDING` findings for a follow-up maintainer call, not fixed here (outside this issue's named scope).
+- **`modal-ui` — `close` now fires reliably on every programmatic dismissal, including a parent-driven teardown race that was the actual root cause (gh#1295, adiav2 ADIA2-8581).** `close` previously depended entirely on the native `<dialog>` element's own queued `close` task re-dispatching it, which a consumer's own re-render could tear down before it ran. Real-browser reproduction (a vitest/happy-dom harness alone can't see this) traced the true root cause further: EVERY internal close path only ever runs from `<modal-ui>`'s own render effect, which reacts to the `open` property write via a microtask (signals.js) — `disconnectedCallback()` disposes that effect unconditionally. A consumer whose Confirm/Cancel handler flips `open = false` and, on the SAME tick, unmounts the modal (an ordinary framework re-render shape) tears the effect down before `#animateClose`'s exit-animation timer is ever even created, so `close` never fires and any caller awaiting it (`showConfirmDialog`-style APIs) hangs forever — confirmed reproducing, and NOT fixed, against PR #1296's authoritative-timer-dispatch approach, since that timer is one of the things the teardown race skips creating. `disconnected()` now emits `close` as a last-resort teardown fallback whenever the modal was open or mid-close at disconnect time, guarded by a once-only dispatch flag shared with the two other paths (the native `<dialog>` `close` listener, kept as a redundant net; `#animateClose`'s own timer, now also an authoritative direct dispatch — both absorbed from PR #1296, which correctly diagnosed the duration/unit bug below but couldn't reproduce this teardown race). `#getDuration()` also no longer silently drops a `s` vs `ms` unit on `--modal-duration` (`parseFloat('.25s')` read as `0.25`, a 0.25ms timer instead of 250ms — PR #1296's fix, kept as-is). `modal.test.js` gains per-dismissal-path close-emission coverage (button, Escape, backdrop, direct `.open=false`, raw `dialog.close()`, no-double-fire, re-open reset) plus the teardown-race repro itself.
+
+### Added
+- **`nav-ui` — selecting a page now collapses every expanded group except the one containing the newly selected item (gh#1306).** Previously, `select()` only moved `[selected]` between items and never touched group `[open]` state, so any group a consumer or the collapsed-rail popover had expanded stayed expanded indefinitely, even after navigating elsewhere. Default-on: `select()` now closes every top-level `<nav-group-ui>` except the selected item's ancestor group (all groups, when the selection is ungrouped) — manual multi-expansion is still allowed right up until the next selection. New `[multi-expand]` attribute opts a consumer out, keeping every manually expanded group open across selections. Applies to every `select()` entrypoint: click, keyboard, programmatic, and the collapsed-rail popover option click (`nav-group.class.js`'s `showPopover()`, which itself calls `nav.select()`).
+
+### Maintenance
+- **`components/` touched in this release window** (39 file(s), e.g. `calendar-picker/calendar-picker.css`) — carried by the entries above.
+- **`dist/` bundles rebuilt** in this cut's window (4 file(s)) — regenerated from the source changes described above, not independent edits.
+
 ## [0.8.38] — 2026-08-15
 
 ### Added
 - **`drilldown-ui` — a new single-panel, multi-level drill-in menu primitive (gh#1285).** Replaces the hand-rolled miller-columns shape (two stacked list columns) that adiav2's Schema Manager had to build because the kit had no drill-down primitive — cleared the pre-build audit against `tree-ui` (inline expand/collapse, wrong for wide/deep >2-level data), `segmented-ui` (no overflow behavior for 18 namespaces), `tag-ui`-as-menu (no keyboard path), `list-ui`/`nav-ui`/`menu-ui`/`context-menu`/`breadcrumb-ui` (flat, not hierarchical drill-in) — none provide single-panel level-swap navigation with back/focus-restoration. Data-driven (`.items` tree of `{value, label, meta?, dot?, counts?, children?}` nodes; `children` may be sync or an async `(item) => array | Promise<array>` lazy loader, rendering a `<skeleton-ui>` loading level while pending). Full keyboard path (roving-tabindex listbox per level; ArrowRight/Enter drills in, ArrowLeft/Backspace goes back with focus restored to the item drilled from), `select` + `navigate` events, a `path` property that reflects to a JSON-encoded attribute both ways (hand-managed, not the generic `reflect:` mechanism — array values don't round-trip through `String(v)`) for deep-link/URL restore, `[filterable]` filter input, `[select-on-drill]` mode flag, a `breadcrumb` slot, row-native trailing count chips (not full `<badge-ui>`, which reads oversized at row density), and a horizontal slide transition that honors `prefers-reduced-motion: reduce` automatically (also suppressible via `[static]`).
 
 ### Fixed
+- **`swatch-ui` — auto-contrast label/detail colors no longer fall back to raw hex, and detail-line dimming no longer uses `color-mix()`.** Found by a new `framework-alignment-agent` cohesion sweep: `--a-chrome-light`/`--a-chrome-dark` are always-defined foundational tokens (`styles/colors/semantics/features.css:124-125`), so the `var(--a-chrome-light, #fafafa)` / `var(--a-chrome-dark, #111)` fallbacks on the `[auto-contrast]` label rules were dead weight and a raw-CSS-color violation. The detail-line dimming also swapped `color-mix(in oklab, …, transparent)` for the plain token color plus `opacity` — not a browser-support fix (`color-mix()` is this repo's documented, Baseline-supported convention per `ADR-0007`/`BROWSER-COMPAT.md`), but a deliberate preference for a literal token over a computed color derivation.
 - **`page-ui` header now ships the slot-gated grid its docs promised (gh#1253).** ADR-0009 recorded the named-slot vocabulary (`slot="icon"` / `slot="heading"` / `slot="action"`) as wired into four containers — Card, Drawer, Modal, and Page — but `page.css` never shipped its half; the slot attributes on a page header's children were dead metadata, so a block-level action child (e.g. `<toggle-scheme-ui>`) dropped to its own row instead of clustering. `page.css` gains the same `:has(> [slot])`-gated header grid as `card.css` (icon/heading/action columns, direct-child guard against nested false-positives), plus the `--page-header-gap` / `--page-heading-*` tokens `card-ui`'s pair already had. `page.yaml`'s `slots.default` and `page.examples.html` (new "Header slot-gated grid" demo) now describe the contract that's actually implemented.
 - **`nav-ui` / `nav-item-ui` — `nav-select` now fires exactly once per click, and zero times re-clicking the already-selected item (gh#1254).** Root cause: two layered click handlers both drove selection for the same physical click — `nav-item-ui`'s own click handler called `nav.select(this)` *and* dispatched its own `nav-select`, while `nav-ui`'s click-delegation listener matched the same item on bubble and called `select()` again — three dispatches per click. `nav.select()` is now the single source of the event (idempotent: a no-op, including no hover-flush, when the item is already selected); `nav-item-ui` no longer dispatches its own copy, and `nav-ui`'s click listener no longer delegates item selection (it now only handles group expand/popover).
 - **`view-transition` trait — no longer leaks unhandled `AbortError` rejections when a transition is superseded (gh#1255).** Only `transition.finished` had a `.catch()`; `ready` and `updateCallbackDone` are distinct promises that also reject (with `AbortError`) when a newer transition supersedes this one, and were previously uncaught. All three are now swallowed on abort — expected behavior for rapid navigation, not an error — with `fireEnd()` still driven solely by `finished`.

package/MIGRATION.md

@@ -79,8 +79,9 @@ The split is by concept, ruled in `docs/adr/adr-0048-a2ui-gen-ui-estate-split.md
   `@adia-ai/a2ui-protocol-mcp`, before either ever published) ships one bin,
   `adia-mcp`, dispatching two subcommands as separate processes:
   `adia-mcp gen-ui` (30 tools — the generation surface, direct successor of
-  `@adia-ai/a2ui-mcp`) and `adia-mcp protocol` (4 tools — `validate_document`,
-  `get_registry_map`, `get_wiring_registry`, `protocol_status`; renamed off
+  `@adia-ai/a2ui-mcp`) and `adia-mcp protocol` (4 tools at the fold — `validate_document`,
+  `get_registry_map`, `get_wiring_registry`, `protocol_status`, joined since by
+  `get_catalog_ladder`; the first four renamed off
   their original same-named-as-`gen-ui`-surface forms by gh#1248 before this
   server ever published). The name `@adia-ai/a2ui-mcp` is **burned, never
   reused**: it means "the generation MCP" to every consumer that has it

package/components/calendar-picker/calendar-picker.css

@@ -178,7 +178,10 @@
 
   [slot="caret"] {
     flex-shrink: 0;
-    --a-icon-size: var(--calendar-picker-font-size);
+    /* Universal caret size (gh#1314 sweep) — was riding the trigger's
+       font-size instead of the shared --a-caret-size token select-ui's
+       trigger caret already reads. */
+    --a-icon-size: var(--a-caret-size);
   }
 }
 

package/components/combobox/combobox.css

@@ -127,6 +127,12 @@
     cursor: pointer;
   }
   [data-suffix] icon-ui[name="caret-down"] {
+    /* Universal caret size (gh#1314 sweep) — overrides the shared
+       [data-prefix]/[data-suffix] --a-icon-size (font-size) above so the
+       default caret matches select-ui's trigger caret instead of riding
+       the field's text size. Name-guarded: a consumer-slotted non-caret
+       suffix glyph keeps the font-size default. */
+    --a-icon-size: var(--a-caret-size);
     transition: rotate var(--a-duration-fast) var(--a-easing);
   }
   /* Clear OPEN state: the default caret flips while the listbox is open.

package/components/command/command.a2ui.json

@@ -105,6 +105,9 @@
       "footer": {
         "description": "Keyboard hint bar"
       },
+      "input": {
+        "description": "The auto-stamped search field — a contenteditable=\"plaintext-only\" span carrying role=\"combobox\" (per ADR-0025/ADR-0055; no native <input>). Internal only; not consumer-slottable."
+      },
       "list": {
         "description": "Container for command items and groups"
       }

package/components/command/command.class.js

@@ -14,6 +14,12 @@
 import { UIElement } from '../../core/element.js';
 import { logicalSlotted } from '../../core/logical-children.js';
 
+function escapeHTML(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+let cmdInstanceSeq = 0;
+
 /**
  * <command-ui> — Searchable command palette.
  *
@@ -58,6 +64,7 @@ export class UICommand extends UIElement {
   #bound = false;
   #itemByEl = new WeakMap();
   #emptyNodes = [];
+  #instanceId = `command-${++cmdInstanceSeq}`;
 
   static #RECENTS_MAX = 3;
 
@@ -96,12 +103,22 @@ export class UICommand extends UIElement {
       }
       this.#emptyNodes = logicalSlotted(this, 'empty');
 
+      const listId = `${this.#instanceId}-list`;
+
+      // No native <input> wrap (per ADR-0055 / ADR-0025): the search field
+      // is a `contenteditable="plaintext-only"` surface carrying
+      // `role="combobox"`, matching combobox-ui's editable-surface pattern.
+      // Placeholder text renders via the [data-empty]::before pseudo (see
+      // command.css), same mechanism as input-ui / combobox-ui.
       this.innerHTML = `
         <header>
           <icon-ui name="magnifying-glass" slot="icon"></icon-ui>
-          <input type="text" placeholder="${this.placeholder}" slot="input" />
+          <span contenteditable="plaintext-only" role="combobox" tabindex="0"
+                aria-autocomplete="list" aria-expanded="false" aria-controls="${listId}"
+                data-placeholder="${escapeHTML(this.placeholder)}" data-empty
+                slot="input"></span>
         </header>
-        <section slot="list"></section>
+        <section slot="list" id="${listId}"></section>
         <footer>
           <span data-hint><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
           <span data-hint><kbd>↵</kbd> Select</span>
@@ -109,7 +126,7 @@ export class UICommand extends UIElement {
         </footer>
       `;
 
-      this.#inputEl = this.querySelector('input');
+      this.#inputEl = this.querySelector('[slot="input"]');
       this.#listEl = this.querySelector('[slot="list"]');
       this.#footerEl = this.querySelector('footer');
 
@@ -120,6 +137,8 @@ export class UICommand extends UIElement {
       this.#renderItems();
     }
 
+    if (this.#inputEl) this.#inputEl.setAttribute('aria-expanded', String(this.open));
+
     if (this.open) {
       this.#focusRaf = requestAnimationFrame(() => {
         this.#focusRaf = null;
@@ -130,11 +149,12 @@ export class UICommand extends UIElement {
 
   // ── Public API ──
 
-  get value() { return this.#inputEl?.value || ''; }
+  get value() { return this.#inputEl?.textContent || ''; }
   set value(v) {
     if (!this.#inputEl) return;
     const next = v ?? '';
-    this.#inputEl.value = next;
+    this.#inputEl.textContent = next;
+    this.#inputEl.toggleAttribute('data-empty', !next);
     // Keep the rendered list in sync with the visible input — the host
     // commonly clears value on (re)open, and consumers expect to see the
     // full list (plus recents) rather than the previous filter's residue.
@@ -421,7 +441,9 @@ export class UICommand extends UIElement {
   // ── Events ──
 
   #onInput = () => {
-    this.#renderItems(this.#inputEl.value);
+    const text = this.#inputEl.textContent || '';
+    this.#inputEl.toggleAttribute('data-empty', !text);
+    this.#renderItems(text);
   };
 
   #onKeydown = (e) => {

package/components/command/command.css

@@ -102,7 +102,7 @@
     --a-icon-size: 1rem;
   }
 
-  & > header input {
+  & > header [slot="input"] {
     flex: 1;
     min-width: 0;
     border: none;
@@ -113,14 +113,25 @@
     font-size: var(--command-input-font-size);
     line-height: 1.4;
     padding: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    /* Positioning context for the [data-empty]::before placeholder pseudo
+       below — out-of-flow, same rationale as input-ui/combobox-ui: an
+       in-flow pseudo would render the caret after the placeholder text
+       instead of at content-start. */
+    position: relative;
   }
 
-  & > header input::placeholder {
+  & > header [slot="input"][data-empty]::before {
+    content: attr(data-placeholder);
     color: var(--command-fg-muted);
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
   }
 
   /* Suppress focus ring on the input — the palette itself is the focused surface */
-  & > header input:focus-visible {
+  & > header [slot="input"]:focus-visible {
     outline: none;
     box-shadow: none;
   }

package/components/command/command.yaml

@@ -67,6 +67,11 @@ slots:
     description: Empty state shown when no items match
   footer:
     description: Keyboard hint bar
+  input:
+    description: >-
+      The auto-stamped search field — a contenteditable="plaintext-only"
+      span carrying role="combobox" (per ADR-0025/ADR-0055; no native
+      <input>). Internal only; not consumer-slottable.
   list:
     description: Container for command items and groups
 states:

package/components/date-range-picker/date-range-picker.css

@@ -90,6 +90,12 @@
      equal specificity so the picker trigger reads as part of the
      input/picker family rather than a generic button. */
   :scope [slot="trigger"] icon-ui[name="caret-down"] {
+    /* Universal caret size (gh#1314) — without this the caret rides the
+       ambient icon size instead of the shared --a-caret-size token that
+       select-ui's trigger caret already reads, so mixed control rows
+       (select-ui next to date-range-picker-ui) showed visibly different
+       chevron sizes. */
+    --a-icon-size: var(--a-caret-size);
     transition: rotate var(--a-duration-fast) var(--a-easing);
   }
   /* Clear OPEN state: the default trigger's trailing caret flips while the

package/components/datetime-picker/datetime-picker.css

@@ -62,6 +62,10 @@
      left-aligned with the caret pushed to the trailing edge, not centered
      like a default button. */
   :scope [slot="trigger"] icon-ui[name="caret-down"] {
+    /* Universal caret size (gh#1314 sweep) — mirrors select-ui's trigger
+       caret so mixed control rows read as one family instead of showing
+       the ambient (larger) icon size. */
+    --a-icon-size: var(--a-caret-size);
     transition: rotate var(--a-duration-fast) var(--a-easing);
   }
   /* Clear OPEN state: the default trigger's trailing caret flips while the

package/components/drilldown/drilldown.a2ui.json

@@ -60,7 +60,9 @@
     "composes": [
       "icon-ui",
       "skeleton-ui",
-      "empty-state-ui"
+      "empty-state-ui",
+      "input-ui",
+      "button-ui"
     ],
     "events": {
       "navigate": {

package/components/drilldown/drilldown.class.js

@@ -181,6 +181,10 @@ export class UIDrilldown extends UIElement {
   // ── Structural stamp (once) ──
 
   #stamp() {
+    // No native <input> wrap (per ADR-0055 / ADR-0025): the filter field
+    // composes <input-ui> — the search-ui precedent — instead of stamping
+    // a raw <input>. `raw` strips input-ui's own chrome so it blends into
+    // this row's own icon + border-bottom (drilldown.css owns the layout).
     this.innerHTML = `
       <div slot="header">
         <button-ui slot="back" icon="caret-left" variant="ghost" size="sm" hidden>
@@ -194,7 +198,7 @@ export class UIDrilldown extends UIElement {
       </div>
       <div slot="filter" hidden>
         <icon-ui name="magnifying-glass"></icon-ui>
-        <input type="text" />
+        <input-ui raw></input-ui>
       </div>
       <div slot="viewport">
         <div slot="panel" role="listbox"></div>
@@ -207,7 +211,7 @@ export class UIDrilldown extends UIElement {
     this.#titleEl = this.querySelector('[data-level-title]');
     this.#countEl = this.querySelector('[data-level-count]');
     this.#filterRowEl = this.querySelector('[slot="filter"]');
-    this.#filterInputEl = this.querySelector('[slot="filter"] input');
+    this.#filterInputEl = this.querySelector('[slot="filter"] input-ui');
     this.#panelEl = this.querySelector('[slot="panel"]');
     this.#liveEl = this.querySelector('[slot="live"]');
     this.#breadcrumbEl = this.querySelector('[slot="breadcrumb"]');
@@ -233,7 +237,7 @@ export class UIDrilldown extends UIElement {
 
   #syncChrome() {
     this.#filterRowEl.hidden = !this.filterable;
-    this.#filterInputEl.placeholder = this.placeholder;
+    this.#filterInputEl.setAttribute('placeholder', this.placeholder);
   }
 
   // ── Tree walking ──
@@ -524,7 +528,11 @@ export class UIDrilldown extends UIElement {
       }
       case 'ArrowLeft':
       case 'Backspace':
-        if (e.key === 'Backspace' && e.target === this.#filterInputEl) break;
+        // input-ui's editable surface is a light-DOM contenteditable span
+        // INSIDE the composed <input-ui> — e.target on a keydown fired while
+        // typing is that inner span, not the <input-ui> host itself (unlike
+        // the former native <input>, where target === the field element).
+        if (e.key === 'Backspace' && this.#filterInputEl?.contains(e.target)) break;
         e.preventDefault();
         this.back();
         break;

package/components/drilldown/drilldown.css

@@ -144,18 +144,17 @@
     color: var(--drilldown-fg-muted);
     flex-shrink: 0;
   }
-  [slot="filter"] input {
+  /* Composed <input-ui raw> (per ADR-0055 / ADR-0025 — no native <input>
+     wrap; the search-ui precedent). `raw` already strips input-ui's own
+     border/background/padding (input.css); re-point its own tokens so the
+     text inherits this row's chrome instead of input-ui's defaults. */
+  [slot="filter"] input-ui {
     flex: 1;
     min-width: 0;
-    border: none;
-    outline: none;
-    background: transparent;
-    color: var(--drilldown-fg);
+    --input-fg: var(--drilldown-fg);
+    --input-placeholder-fg: var(--drilldown-fg-muted);
     font: inherit;
   }
-  [slot="filter"] input::placeholder {
-    color: var(--drilldown-fg-muted);
-  }
 
   /* ── Viewport / panel ── */
   [slot="viewport"] {

package/components/drilldown/drilldown.yaml

@@ -27,6 +27,8 @@ composes:
   - icon-ui
   - skeleton-ui
   - empty-state-ui
+  - input-ui    # filter row's text field (ADR-0055 — no native <input> in stamped DOM)
+  - button-ui   # back-navigation affordance
 props:
   items:
     description: >-

package/components/modal/modal.class.js

@@ -43,6 +43,7 @@
  */
 
 import { UIElement } from '../../core/element.js';
+import { logicalSlotted } from '../../core/logical-children.js';
 
 export class UIModal extends UIElement {
   #bound = false;
@@ -51,6 +52,14 @@ export class UIModal extends UIElement {
   #closeTimer = null;
   #dialogRef = null;
 
+  // Guards `close` against firing twice for one dismissal — #animateClose's
+  // timer dispatches it directly (the authoritative path, gh#1295) and the
+  // native <dialog> 'close' listener also calls in as a redundant safety
+  // net for a consumer that closes the raw <dialog> element itself, and
+  // disconnected()'s teardown fallback (below) is a third path into the
+  // same guard. Reset whenever the dialog (re)opens.
+  #closeDispatched = false;
+
   // Monotonic, instance-agnostic counter for the fallback aria-labelledby
   // id stamped onto an author's [slot="heading"] (see render()) — multiple
   // <modal-ui> instances on one page must not collide on the same id.
@@ -93,6 +102,19 @@ export class UIModal extends UIElement {
   };
 
   #onDialogClose = () => {
+    // Native <dialog> 'close' — fires as a browser-QUEUED task (per the
+    // HTML spec, dialog.close() queues a task; it is not synchronous), so
+    // it can be lost if a consumer tears the listener down (removes this
+    // element) before that task runs. #animateClose's own timer is the
+    // authoritative dispatch path (gh#1295); this stays wired as a
+    // redundant net for a consumer calling the raw <dialog> element's
+    // own `.close()` directly.
+    this.#emitCloseOnce();
+  };
+
+  #emitCloseOnce = () => {
+    if (this.#closeDispatched) return;
+    this.#closeDispatched = true;
     this.open = false;
     this.#previousFocus?.focus();
     this.#previousFocus = null;
@@ -128,6 +150,32 @@ export class UIModal extends UIElement {
       clearTimeout(this.#closeTimer);
       this.#closeTimer = null;
     }
+    // Teardown fallback — the ROOT CAUSE of gh#1295 (adiav2 ADIA2-8581).
+    // Every internal close path (the native <dialog> 'close' listener,
+    // #animateClose's own timer) only ever runs from THIS element's own
+    // render effect (element.js's connectedCallback), which is set up as
+    // a signals.js effect that reacts to the `open` property write via a
+    // MICROTASK — the property setter itself only marks the signal dirty;
+    // it doesn't render synchronously. `disconnectedCallback()` disposes
+    // every effect (including that one) BEFORE disconnected() runs. A
+    // consumer whose own re-render removes <modal-ui> from the DOM in the
+    // SAME tick as setting `open = false` — an extremely common framework
+    // shape: a Confirm/Cancel handler flips reactive state that ALSO
+    // unmounts the modal on that same pass — tears down the render effect
+    // before it ever gets a chance to run, so #animateClose's timer is
+    // never even CREATED, let alone fired. No error, no warning: the
+    // ENTIRE close pipeline silently never starts, and any caller awaiting
+    // `close` (showConfirmDialog-style APIs) hangs forever. Confirmed via
+    // browser reproduction — vitest/happy-dom's synchronous effect
+    // scheduling masked this (see modal.test.js "parent-driven teardown").
+    // Disconnection always resolves an open-or-mid-close modal's `close`
+    // obligation as a last resort, regardless of which (if any) internal
+    // path got a chance to run first — #emitCloseOnce's guard makes this
+    // safe to call unconditionally alongside those other paths.
+    if (this.open || this.#closing || this.#dialogRef?.open) {
+      this.#emitCloseOnce();
+    }
+    this.#closing = false;
     this.#bound = false;
     this.#dialogRef = null;
   }
@@ -136,10 +184,15 @@ export class UIModal extends UIElement {
     // Read the computed `--modal-duration` (= --a-duration = 250ms unless a
     // consumer overrides) so the JS close timer matches the CSS exit animation
     // exactly — a stale/unset value clipped the animation ~50ms early
-    // (bug class shared with swiper bug-29).
+    // (bug class shared with swiper bug-29). `parseFloat` alone silently
+    // drops a `s` vs `ms` unit (gh#1295 — a consumer-computed value observed
+    // as `.25s` parsed to 0.25, a 0.25ms timer instead of 250ms), so a
+    // trailing `s` (and not `ms`) is converted explicitly rather than
+    // trusted to already be milliseconds.
     const cs = getComputedStyle(this);
     const raw = cs.getPropertyValue('--modal-duration').trim();
-    return parseFloat(raw) || 200;
+    const ms = /ms\s*$/.test(raw) ? parseFloat(raw) : /s\s*$/.test(raw) ? parseFloat(raw) * 1000 : parseFloat(raw);
+    return ms > 0 ? ms : 200;
   }
 
   render() {
@@ -195,8 +248,12 @@ export class UIModal extends UIElement {
     // dialog-modal pattern's accessible-name requirement. Re-evaluated
     // every render so a later `text=` set, or the heading being removed,
     // clears the reference instead of leaving it stale. (gh#947, from
-    // PR #944.)
-    const authoredHeading = header.querySelector(':scope > [slot="heading"]');
+    // PR #944.) `logicalSlotted` (not a `:scope >` direct-child query)
+    // pierces the template engine's display:contents/role=presentation
+    // wrapper spans, so a consumer that renders the heading conditionally
+    // (`${title ? html\`<span slot="heading">…\` : null}`) still gets an
+    // aria-labelledby — the wrapper-trap class, gh#1301.
+    const authoredHeading = logicalSlotted(header, 'heading')[0];
     if (!this.text && authoredHeading) {
       if (!authoredHeading.id) authoredHeading.id = `modal-heading-${++UIModal.#headingIdSeq}`;
       if (dialog.getAttribute('aria-labelledby') !== authoredHeading.id) {
@@ -261,6 +318,7 @@ export class UIModal extends UIElement {
     // See .claude/docs/BROWSER-COMPAT.md §3a (Flavor C).
     if (this.open && !dialog.open) {
       this.#closing = false;
+      this.#closeDispatched = false;
       this.#previousFocus = document.activeElement;
       dialog.showModal();
       void dialog.offsetHeight;
@@ -285,6 +343,12 @@ export class UIModal extends UIElement {
       this.#closing = false;
       dialog.removeAttribute('data-closing');
       if (dialog.open) dialog.close();
+      // Authoritative dispatch (gh#1295) — don't rely solely on the native
+      // <dialog> 'close' listener above, whose task can be lost if this
+      // element (or an ancestor) is torn down before it runs.
+      // #emitCloseOnce guards so a close event ALSO reaching
+      // #onDialogClose is a no-op.
+      this.#emitCloseOnce();
     }, this.#getDuration());
   }
 

package/components/nav/nav.a2ui.json

@@ -31,6 +31,11 @@
       "type": "string",
       "default": ""
     },
+    "multiExpand": {
+      "description": "Opt out of the default single-expanded-group behavior. When unset, selecting a nav-item-ui collapses every nav-group-ui except the one containing the newly selected item (all, when the selection is ungrouped); manual multi-expansion still works up until the next selection.",
+      "type": "boolean",
+      "default": false
+    },
     "variant": {
       "description": "Visual treatment. primary = app sidebar; section = subnav rail.",
       "type": "string",

package/components/nav/nav.class.js

@@ -45,10 +45,14 @@ import { UIElement } from '../../core/element.js';
 
 export class UINav extends UIElement {
   static properties = {
-    variant:   { type: String,  default: 'primary', reflect: true },
-    collapsed: { type: Boolean, default: false,     reflect: true },
-    divider:   { type: Boolean, default: false,     reflect: true },
-    heading:   { type: String,  default: '',        reflect: true },
+    variant:     { type: String,  default: 'primary', reflect: true },
+    collapsed:   { type: Boolean, default: false,     reflect: true },
+    divider:     { type: Boolean, default: false,     reflect: true },
+    heading:     { type: String,  default: '',        reflect: true },
+    // gh#1306: selection is the cleanup event for manually multi-expanded
+    // groups — default-on; opt out to let multiple groups stay open across
+    // selections (the operator's ruling, 2026-08-14).
+    multiExpand: { type: Boolean, default: false, reflect: true, attribute: 'multi-expand' },
   };
 
   static template = () => null;
@@ -99,6 +103,7 @@ export class UINav extends UIElement {
     if (item) {
       item.setAttribute('selected', '');
       this.#flushHoverState();
+      this.#collapseSiblingGroups(item);
       this.dispatchEvent(new CustomEvent('nav-select', {
         bubbles: true,
         detail: { item, text: item.text, value: item.value },
@@ -106,6 +111,21 @@ export class UINav extends UIElement {
     }
   }
 
+  // gh#1306: on selection, collapse every top-level group except the one
+  // containing the newly selected item (none, when the selection is
+  // ungrouped — every group collapses). Manual multi-expansion stays
+  // allowed right up until the next selection; [multi-expand] opts out
+  // entirely. Runs for every select() caller — click, keyboard, and the
+  // collapsed-rail popover path (nav-group.class.js's showPopover(),
+  // which also calls nav.select()).
+  #collapseSiblingGroups(item) {
+    if (this.multiExpand) return;
+    const activeGroup = item.closest('nav-group-ui');
+    for (const group of this.querySelectorAll(':scope > nav-group-ui')) {
+      if (group !== activeGroup) group.open = false;
+    }
+  }
+
   toggle() {
     if (this.variant === 'section') return; // no-op for section variant
     this.collapsed = !this.collapsed;

package/components/nav/nav.d.ts

@@ -38,6 +38,8 @@ export class UINav extends UIElement {
   divider: boolean;
   /** Optional kicker label. Section variant renders it via ::before; primary uses it as aria-label only. */
   heading: string;
+  /** Opt out of the default single-expanded-group behavior. When unset, selecting a nav-item-ui collapses every nav-group-ui except the one containing the newly selected item (all, when the selection is ungrouped); manual multi-expansion still works up until the next selection. */
+  multiExpand: boolean;
   /** Visual treatment. primary = app sidebar; section = subnav rail. */
   variant: 'primary' | 'section';
 

package/components/nav/nav.yaml

@@ -39,6 +39,12 @@ props:
     type: string
     default: ''
     description: "Optional kicker label. Section variant renders it via ::before; primary uses it as aria-label only."
+  multiExpand:
+    type: boolean
+    default: false
+    reflect: true
+    attribute: multi-expand
+    description: "Opt out of the default single-expanded-group behavior. When unset, selecting a nav-item-ui collapses every nav-group-ui except the one containing the newly selected item (all, when the selection is ungrouped); manual multi-expansion still works up until the next selection."
 
 events:
   nav-select:
@@ -91,6 +97,18 @@ a2ui:
       or anchor) → <nav-ui>. If the user switches VIEWS within the same
       logical page → <tabs-ui>. Never use <nav-ui> as an in-page section
       switcher.
+    - >-
+      Group expansion on selection: selecting a <nav-item-ui> collapses
+      every <nav-group-ui> except the one containing the newly selected
+      item (all groups, when the selection is ungrouped). Manual
+      multi-expansion is allowed right up until the next selection. Set
+      [multi-expand] on <nav-ui> to opt out and keep multiple groups open
+      across selections. This clears the JS [open] state (and
+      aria-expanded) on every collapsed group in BOTH variants — primary
+      visually hides that group's children as a result; section variant's
+      CSS keeps children visible regardless of [open] (per the
+      section-variant cascade rule above), so only the accessibility
+      state resets there, with no visible change.
     - >-
       Anti-patterns: do NOT wrap <nav-ui> children in <col-ui> /
       <row-ui> — wrapping breaks selection bubbling + the variant