@adia-ai/web-components 0.8.37 → 0.8.39

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # 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`.
+
+### Maintenance
+- **`bin/` touched in this release window** (1 file(s), e.g. `bin/doc.mjs`) — carried by the entries above.
+- **`components/` touched in this release window** (18 file(s), e.g. `card/card.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.
+- **`patterns/` touched in this release window** (1 file(s), e.g. `bulk-action-toolbar/bulk-action-toolbar.examples.html`) — carried by the entries above.
+- **`styles/` touched in this release window** (1 file(s), e.g. `styles/components.css`) — carried by the entries above.
+- **`traits/` touched in this release window** (2 file(s), e.g. `view-transition/view-transition.js`) — carried by the entries above.
+
 ## [0.8.37] — 2026-08-14
 
 ### Maintenance

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
@@ -130,8 +131,8 @@ failed at load. If you were writing them, they were already broken.
 | `@adia-ai/a2ui-compose/<sub>` (`core`, `strategies/*`, `transpiler`, `evals`, `shared/*`; incl. deprecated `engine`/`engines/*` aliases) | `@adia-ai/gen-ui/compose/<sub>` (aliases NOT carried over — they were already deprecated one cycle) |
 | `@adia-ai/a2ui-retrieval` | `@adia-ai/gen-ui/retrieval` |
 | `@adia-ai/a2ui-retrieval/<sub>` (e.g. `domain-router`, `intent/*`, `embedding/*`, `feedback/*`, `authoring/*`) | `@adia-ai/gen-ui/retrieval/<sub>` (e.g. `@adia-ai/gen-ui/retrieval/domain-router`) |
-| `@adia-ai/a2ui-corpus` | `@adia-ai/gen-ui/corpus` |
-| `@adia-ai/a2ui-corpus/<sub>` (`chunks/*`, `chunk-library`, `chunk-embeddings`, `manifest`) | `@adia-ai/gen-ui/corpus/<sub>` |
+| `@adia-ai/a2ui-corpus` | **`@adia-ai/a2ui/catalog`** — this export WAS the catalog document, and the catalog moved protocol-side at ADR-0050 (gh#1243). `@adia-ai/gen-ui/corpus` no longer resolves as a root export |
+| `@adia-ai/a2ui-corpus/<sub>` (`chunks/*`, `chunk-library`, `chunk-embeddings`, `manifest`) | `@adia-ai/gen-ui/corpus/<sub>` (unchanged — corpus fuel stays in gen-ui) |
 | `@adia-ai/a2ui-mcp` (bin `adiaui-mcp`) | `@adia-ai/mcp` (bin `adia-mcp`, subcommand `gen-ui`) — retargeted gh#1240; the `@adia-ai/gen-ui-mcp` name this row originally named never published |
 | — (new) | `@adia-ai/mcp` (bin `adia-mcp`, subcommand `protocol`) — folded into the same package as the row above by gh#1240; the `@adia-ai/a2ui-protocol-mcp` name this row originally named never published |
 
@@ -194,7 +195,8 @@ sweep '@adia-ai/a2ui-validator'           '@adia-ai/a2ui/validate'
 sweep '@adia-ai/a2ui-compose/'  '@adia-ai/gen-ui/compose/'
 sweep '@adia-ai/a2ui-compose'   '@adia-ai/gen-ui'
 sweep '@adia-ai/a2ui-retrieval' '@adia-ai/gen-ui/retrieval'
-sweep '@adia-ai/a2ui-corpus'    '@adia-ai/gen-ui/corpus'
+sweep '@adia-ai/a2ui-corpus/'   '@adia-ai/gen-ui/corpus/'
+sweep '@adia-ai/a2ui-corpus'    '@adia-ai/a2ui/catalog'   # bare corpus import WAS the catalog (ADR-0050)
 
 # protocol
 sweep '@adia-ai/a2ui-runtime'   '@adia-ai/a2ui'
@@ -218,7 +220,7 @@ between a dependency and a peer:
   MCP, into one package, `@adia-ai/mcp`, before either ever published — the
   bin gained a subcommand accordingly). Tool names and their input/output
   shapes are **unchanged**; only the package that serves them is renamed. The
-  30-tool surface is documented at `packages/mcp/TOOLS.md` (the `gen-ui`
+  30-tool surface is documented at `packages/gen-ui/mcp/TOOLS.md` (the `gen-ui`
   section).
 
 ### After the sweep, check
@@ -1182,7 +1184,7 @@ git grep -nlz '<grid-ui[^>]*\bcols=' \
     done
 ```
 
-Then re-run `npm run harvest:chunks` if any of the touched pages live under `site/pages/` and are tagged with `data-chunk` (extracts to `packages/a2ui/corpus/chunks/`).
+Then re-run `npm run harvest:chunks` if any of the touched pages live under `site/pages/` and are tagged with `data-chunk` (extracts to `packages/gen-ui/a2ui/corpus/chunks/`).
 
 ---
 

package/README.md

@@ -3,7 +3,7 @@
 Vanilla web components + A2UI runtime for AdiaUI. **95 light-DOM custom
 elements** + **56 composable traits**, a reactive core (signals + tagged-template renderer), form-associated form controls, and integration into the A2UI generation pipeline.
 
-> This package ships UI atoms only. Composite shells (admin / chat / editor / simple / theme) live in [`@adia-ai/web-modules`](../web-modules). The generation pipeline lives in [`@adia-ai/a2ui-compose`](../gen-ui/compose); the pattern corpus in [`@adia-ai/a2ui-corpus`](../gen-ui/corpus); the MCP server in [`@adia-ai/mcp`](../mcp) (its `gen-ui` surface).
+> This package ships UI atoms only. Composite shells (admin / chat / editor / simple / theme) live in [`@adia-ai/web-modules`](../web-modules). The generation pipeline lives in [`@adia-ai/a2ui-compose`](../gen-ui/engine/compose); the pattern corpus in [`@adia-ai/a2ui-corpus`](../gen-ui/engine/corpus); the MCP server in [`@adia-ai/mcp`](../gen-ui/mcp) (its `gen-ui` surface).
 >
 > **Consumer guide:** [`USAGE.md`](./USAGE.md) — property reactivity, event contract, form participation, lifecycle, registration, TypeScript. Start here if you're integrating AdiaUI into an app.
 >
@@ -125,7 +125,7 @@ web-components/
 │                           All actual A2UI runtime code (renderer,
 │                           registry, streams, surface manifest,
 │                           wiring, dockables, controllers) lives in
-│                           `@adia-ai/a2ui` at packages/a2ui/.
+│                           `@adia-ai/a2ui` at packages/gen-ui/a2ui/.
 │
 └── styles/         — Global tokens and CSS layering
     ├── tokens.css              all --a-* design tokens
@@ -329,7 +329,7 @@ attribute table + live demos:
 npm run build:components    # regenerate all .a2ui.json from YAML
 ```
 
-The build also writes `packages/gen-ui/corpus/catalog-a2ui_0_9.json` and
+The build also writes `packages/gen-ui/engine/corpus/catalog-a2ui_0_9.json` and
 `catalog-a2ui_0_9_rules.txt` — the flat-file catalog the MCP server and
 generation engine consume.
 

package/bin/doc.mjs

@@ -45,6 +45,32 @@ const DEMO_BASE = 'https://ui-kit.exe.xyz/site/components';
  * Defensive: any parse error returns a partial object plus an `_errors`
  * array — the caller decides how to surface failures.
  */
+/**
+ * Strips a trailing YAML comment from a single raw line. A `#` only
+ * starts a comment when it's at column 0 or preceded by whitespace (the
+ * YAML plain-scalar rule) — a bare mid-word `#` (e.g. `gh#1253` inside a
+ * folded description block) is content, not a comment marker. Quote
+ * state is tracked (paired ' / ") so a `#` inside an actual quoted
+ * string is never treated as a comment start either.
+ *
+ * Fixes a truncation bug (CodeRabbit, PR #1284): the previous regex
+ * (`/^([^#"']*)(#.*)?$/`) cut ANY line at its first bare `#` regardless
+ * of context, silently truncating descriptions containing `gh#NNNN`.
+ */
+function stripYamlComment(line) {
+  let inSingle = false;
+  let inDouble = false;
+  for (let i = 0; i < line.length; i++) {
+    const ch = line[i];
+    if (ch === "'" && !inDouble) inSingle = !inSingle;
+    else if (ch === '"' && !inSingle) inDouble = !inDouble;
+    else if (ch === '#' && !inSingle && !inDouble && (i === 0 || /\s/.test(line[i - 1]))) {
+      return line.slice(0, i).replace(/\s+$/, '');
+    }
+  }
+  return line.replace(/\s+$/, '');
+}
+
 function parseYaml(source) {
   const out = {
     name: '',
@@ -59,11 +85,7 @@ function parseYaml(source) {
 
   // Strip comments + trailing whitespace, keep blank lines for block detection
   const rawLines = source.split(/\r?\n/);
-  const lines = rawLines.map((l) => {
-    // strip line comments unless inside a quoted string (rough heuristic)
-    const m = l.match(/^([^#"']*)(#.*)?$/);
-    return m ? m[1].replace(/\s+$/, '') : l;
-  });
+  const lines = rawLines.map(stripYamlComment);
 
   /** Find the line range of a top-level key block (indent === 0). */
   function blockRange(key) {

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/card/card.css

@@ -264,7 +264,7 @@
   /* Heading — row 1.
      Matches native h1-h6 AND the text-ui variants the A2UI transpiler emits
      for them (display|title|heading|subsection — see HTML_TAG_MAP in
-     packages/a2ui/compose/transpiler/transpiler-maps.js).
+     packages/gen-ui/a2ui/compose/transpiler/transpiler-maps.js).
      The text-ui variants are matched only when UNSLOTTED so an explicit
      `slot="heading"` / `slot="description"` / `slot="action"` always wins. */
   & > header > :is([slot="heading"], h1, h2, h3, h4, h5, h6),

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

@@ -0,0 +1,244 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Drilldown.json",
+  "title": "Drilldown",
+  "description": "Single-panel, multi-level drill-in menu. One list panel slides between\nlevels (a level header with back navigation replaces stacking a column\nper level) — for hierarchical data where miller columns don't fit the\nviewport (>2 levels, >12 top-level entries, or narrow layouts). Rows\ncompose a leading dot/icon, primary label, optional meta line, and\ntrailing row-native count chips (not full <badge-ui>, which reads\noversized at row density) — plus a drill-in chevron on branch items.\nSet `.items` to a tree of `{value, label, meta?, dot?, counts?, children?}`\nnodes; `children` may be an array (sync) or a function returning an\narray/Promise (lazy, fetched on drill-in — a loading level is shown via\n<skeleton-ui> while it resolves). Distinct from <tree-ui> (inline\nexpand/collapse — right for file-tree shapes, wrong for wide/deep data\nwhere the expanded tree becomes a wall of rows), <nav-ui> (flat app\nnavigation, not hierarchical drill-in), and <context-menu> (transient\npopover submenus, not a persistent content panel).\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "items": {
+      "description": "Root-level array of node objects: {value, label, meta?, dot?, counts?, children?, leaf?}. `value` is the stable id used in `path` and event details. `dot` names a semantic tone (info, success, warning, danger, primary, neutral) rendered as a small leading color swatch. `counts` is an array of {variant?, value} rendered as compact trailing chips. `children` is either an array of child nodes (resolved synchronously) or a function `(item) => array | Promise<array>` for lazy per-level fetch — a loading level renders while the promise is pending. `leaf: true` forces no drill chevron even when `children` is present (rare — normally omit `children` instead).",
+      "$ref": "common_types.json#/$defs/DynamicObjectList"
+    },
+    "component": {
+      "const": "Drilldown"
+    },
+    "filterable": {
+      "description": "Show a filter input pinned above the list, filtering the current level's rows by label/meta.",
+      "type": "boolean",
+      "default": false
+    },
+    "path": {
+      "description": "Current drilled-in level, as an array of ancestor item `value`s (root = `[]`). Setting `.path` restores directly to that nested level without animating through every intermediate level — the deep-link/URL-restore path. Hand-managed (not the generic `reflect:` mechanism, which can't JSON-encode arrays) — it still genuinely reflects to a JSON-encoded `path` attribute both ways (property → attribute and attribute → property), unlike most array props on this kit.",
+      "$ref": "common_types.json#/$defs/DynamicStringList"
+    },
+    "placeholder": {
+      "description": "Placeholder text for the filter input (only rendered when `[filterable]`).",
+      "type": "string",
+      "default": "Filter…"
+    },
+    "rootLabel": {
+      "description": "Level-header title shown at the root level (depth 0). Empty by default (no title row).",
+      "type": "string",
+      "default": ""
+    },
+    "selectOnDrill": {
+      "description": "When true, clicking/activating a branch item (one with children) BOTH fires `select` and drills into it — the Schema Manager shape, where picking a namespace is both a selection and a navigation. Default false: branch activation only drills in; only leaf activation fires `select`.",
+      "type": "boolean",
+      "default": false
+    },
+    "static": {
+      "description": "Suppress the horizontal slide transition between levels — instant swap. Also honored automatically under `prefers-reduced-motion: reduce`.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "navigation",
+    "composes": [
+      "icon-ui",
+      "skeleton-ui",
+      "empty-state-ui",
+      "input-ui",
+      "button-ui"
+    ],
+    "events": {
+      "navigate": {
+        "description": "Fired whenever the shown level changes — drill-in, back, breadcrumb jump, or a programmatic `.path` assignment. detail: { path }. Hosts mirror this to the URL instead of listening to `select`.\n",
+        "detail": {
+          "path": {
+            "description": "The newly-shown level's ancestor value chain.",
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      },
+      "select": {
+        "description": "Fired when a leaf item is activated (click/Enter), or when a branch item is activated with `[select-on-drill]` set. detail: { path, item }. `path` is the drilled-in level the item lives at (the current `.path` at the time of activation); `item` is the raw node object.\n",
+        "detail": {
+          "item": {
+            "description": "The activated node object.",
+            "type": "object"
+          },
+          "path": {
+            "description": "Ancestor value chain the selected item lives at.",
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic Drilldown usage",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Drilldown\"\n  }\n]",
+        "name": "basic-drilldown"
+      }
+    ],
+    "keywords": [
+      "drilldown",
+      "drill-down",
+      "miller",
+      "miller-columns",
+      "namespace",
+      "hierarchy",
+      "navigator",
+      "catalog-browser"
+    ],
+    "name": "UIDrilldown",
+    "related": [
+      "Tree",
+      "List",
+      "Nav",
+      "Breadcrumb",
+      "Menu"
+    ],
+    "slots": {
+      "title": {
+        "description": "Auto-stamped title cluster (current-level label + item count) inside the header."
+      },
+      "back": {
+        "description": "Auto-stamped back-affordance <button> (chevron + parent-level label). Hidden at the root level."
+      },
+      "breadcrumb": {
+        "description": "Optional slot for a consumer-supplied <breadcrumb-ui> in the level header, for deep hierarchies. Not managed by drilldown-ui — the consumer wires jump clicks to `.path = [...]` itself."
+      },
+      "counts": {
+        "description": "Auto-stamped per-row trailing count-chip cluster, rendered when the row's data item declares `counts`."
+      },
+      "dot": {
+        "description": "Auto-stamped per-row leading color swatch, rendered when the row's data item declares a `dot` tone."
+      },
+      "filter": {
+        "description": "Auto-stamped filter-input row, shown only when `[filterable]` is set."
+      },
+      "header": {
+        "description": "Auto-stamped level-header container (back affordance + breadcrumb + title/count). Structural — not consumer-overridable."
+      },
+      "main": {
+        "description": "Auto-stamped per-row content column (label + optional meta line)."
+      },
+      "meta": {
+        "description": "Auto-stamped per-row secondary meta line, rendered when the row's data item declares `meta`."
+      },
+      "viewport": {
+        "description": "Auto-stamped clipping container for the current level's panel (hosts the slide-transition overflow clip)."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "A lazy level's children are being resolved (async `children` function pending).",
+        "name": "loading"
+      },
+      {
+        "description": "The current level has no items.",
+        "name": "empty"
+      }
+    ],
+    "status": "beta",
+    "synonyms": {
+      "hierarchy": [
+        "tree",
+        "nav",
+        "drilldown"
+      ],
+      "miller": [
+        "drilldown",
+        "tree",
+        "column"
+      ],
+      "navigator": [
+        "tree",
+        "nav",
+        "drilldown",
+        "sidebar"
+      ]
+    },
+    "tag": "drilldown-ui",
+    "tokens": {
+      "--drilldown-bg-active": {
+        "description": "Row background when focused/active (roving tabindex)."
+      },
+      "--drilldown-bg-hover": {
+        "description": "Row background on hover."
+      },
+      "--drilldown-count-chip-font-size": {
+        "description": "Font size of a trailing count chip."
+      },
+      "--drilldown-count-chip-px": {
+        "description": "Inline padding of a trailing count chip."
+      },
+      "--drilldown-count-chip-radius": {
+        "description": "Border radius of a trailing count chip."
+      },
+      "--drilldown-dot-size": {
+        "description": "Diameter of the leading color dot."
+      },
+      "--drilldown-duration": {
+        "description": "Slide-transition duration."
+      },
+      "--drilldown-easing": {
+        "description": "Slide-transition easing function."
+      },
+      "--drilldown-fg": {
+        "description": "Primary row text color."
+      },
+      "--drilldown-fg-muted": {
+        "description": "Muted text color (meta line, chevron, back affordance)."
+      },
+      "--drilldown-focus-ring": {
+        "description": "Focus ring box-shadow for rows and the back button."
+      },
+      "--drilldown-header-px": {
+        "description": "Inline padding of the level header."
+      },
+      "--drilldown-header-py": {
+        "description": "Block padding of the level header."
+      },
+      "--drilldown-row-gap": {
+        "description": "Gap between row elements (dot / main / counts / chevron)."
+      },
+      "--drilldown-row-height": {
+        "description": "Height of each row."
+      },
+      "--drilldown-row-px": {
+        "description": "Inline padding of each row."
+      },
+      "--drilldown-row-radius": {
+        "description": "Border radius of each row."
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}