@adia-ai/web-components 0.8.37 → 0.8.39

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;
@@ -91,9 +95,15 @@ export class UINav extends UIElement {
 
   select(item) {
     const prev = this.selectedItem;
-    if (prev && prev !== item) prev.removeAttribute('selected');
+    // gh#1254: re-selecting the already-selected item is a no-op — no
+    // attribute churn, no hover flush, no event. Selection genuinely
+    // unchanged is not a selection event.
+    if (prev === item) return;
+    if (prev) prev.removeAttribute('selected');
     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 },
@@ -101,19 +111,32 @@ 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;
   }
 
   #onClick = (e) => {
-    const item = e.target.closest('nav-item-ui');
-    if (item && this.contains(item)) {
-      if (item.disabled) return;
-      this.select(item);
-      this.#flushHoverState();
-      return;
-    }
+    // gh#1254: <nav-item-ui> owns its own click + keyboard activation
+    // (nav-item.class.js #onClick calls parent.select(this) directly) —
+    // delegating the same selection here too double-invoked select() per
+    // click (the layered handlers the issue reports). Do NOT re-add an
+    // item branch here; this listener is for group expand/popover only.
 
     // Group expand/popover — primary variant only.
     if (this.variant === 'section') return;

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

package/components/nav-item/nav-item.class.js

@@ -18,8 +18,10 @@
  *
  * Supports icon, label, optional badge, selected/disabled state, and
  * keyboard activation (Enter/Space). Selection is managed by the parent
- * <nav-ui>; clicking or keyboard-activating an item calls nav.select(this)
- * and dispatches `nav-select` (bubbles, detail: { item, text, value }).
+ * <nav-ui>; clicking or keyboard-activating an item calls nav.select(this),
+ * which dispatches `nav-select` (bubbles from <nav-ui>, detail: { item,
+ * text, value }) exactly once when selection actually changes — see
+ * nav.class.js#select. This class does not dispatch its own copy (gh#1254).
  */
 
 import { UIElement } from '../../core/element.js';
@@ -39,12 +41,13 @@ export class UINavItem extends UIElement {
 
   #onClick = (e) => {
     if (this.disabled) { e.preventDefault(); return; }
+    // gh#1254: nav.select() is the single source of `nav-select` — it
+    // dispatches (bubbling from <nav-ui>) only when selection actually
+    // changes, and is a no-op re-clicking the already-selected item.
+    // A second dispatch here duplicated the event on every click and
+    // fired again even on a no-op reselect.
     const parent = this.closest('nav-ui');
     parent?.select?.(this);
-    this.dispatchEvent(new CustomEvent('nav-select', {
-      bubbles: true,
-      detail: { item: this, text: this.text, value: this.value },
-    }));
   };
 
   #onKey = (e) => {

package/components/page/page.a2ui.json

@@ -85,8 +85,20 @@
       "footer"
     ],
     "slots": {
+      "description": {
+        "description": "Secondary metadata — grid row 2 beneath the heading inside the page header. Also accepts bare `<p>` / `<small>` / body-variant `<text-ui>` as direct children without slot=\"description\"."
+      },
       "default": {
-        "description": "Composes from the slot primitives — `<header-ui>` (page header),\n`<section-ui>` (main content), optional `<footer-ui>`. Native\n`<header>` / `<section>` / `<footer>` also work; the @scope rules\ntarget both via `:where(header, header-ui)`.\n"
+        "description": "Composes from the slot primitives — `<header-ui>` (page header),\n`<section-ui>` (main content), optional `<footer-ui>`. Native\n`<header>` / `<section>` / `<footer>` also work; the @scope rules\ntarget both via `:where(header, header-ui)`. The page header\nalso activates the named slot-gated grid (`slot=\"icon\"` /\n`slot=\"heading\"` / `slot=\"description\"` / `slot=\"action\"`) once\nany DIRECT header child carries a `slot` attribute — same\ncontract as `<card-ui>`'s header (gh#1253).\n"
+      },
+      "action": {
+        "description": "Trailing control cluster inside the page header (icon-buttons, menu trigger, scheme toggle, more-options). Aligns to the flex-end edge — the fix for gh#1253's dropped `<toggle-scheme-ui>`."
+      },
+      "heading": {
+        "description": "Primary title — grid row 1 inside the page header. Also accepts bare `<h1>`–`<h6>` tags (or A2UI's transpiled display/title/heading/subsection `<text-ui>` variants) as direct children without slot=\"heading\". A slot=\"heading\" wrapper can contain inline badges or metadata alongside the title text."
+      },
+      "icon": {
+        "description": "Leading icon for the page header — status, brand, or type marker. Placed in column 1 of the header grid when present; heading + description shift to column 2. Direct child of `<header>` / `<header-ui>` only, per the :has(> [slot=\"icon\"]) gate."
       }
     },
     "states": [

package/components/page/page.css

@@ -26,6 +26,12 @@
     --page-sticky-bg:        var(--a-canvas-0);
     --page-sticky-border:    1px solid var(--md-sys-color-neutral-outline-variant);
     --page-sticky-shadow:    var(--a-shadow-sm);
+
+    /* ── Header slot-gated grid (gh#1253) — matches card-ui's header pair ── */
+    --page-header-gap:       var(--a-space-2);
+    --page-heading-fg:       var(--a-fg-strong);
+    --page-heading-size:     var(--a-ui-lg);
+    --page-heading-weight:   var(--a-weight-semibold);
   }
 
   :scope {
@@ -118,4 +124,111 @@
     border-block-end: var(--page-sticky-border);
     box-shadow: var(--page-sticky-shadow);
   }
+
+  /* ═══════ Header slot-gated grid (gh#1253) ═══════
+     card-ui / drawer-ui / modal-ui already wire the slot vocabulary
+     (`slot="icon"` / `slot="heading"` / `slot="action"`) into a header grid
+     (ADR-0009: "the slot vocabulary unifies ... Card, Drawer, Modal, AND
+     app-shell-ui / page-ui"); page-ui never shipped its half — the docs
+     (page.examples.html's "Slot vocabulary" section) promised it, but the
+     page's own @scope had no rule keying on `[slot]`. Mirrors card.css's
+     `& > header` rules verbatim — same guard (`:has(> [slot])` on a DIRECT
+     child only, so a nested [slot="icon"] inside e.g. an <avatar-ui> can't
+     falsely activate the grid), same column templates, same row
+     placement. */
+  :scope > :where(header, header-ui):has(> [slot]) {
+    display: grid;
+    gap: var(--page-header-gap);
+    align-items: center;
+  }
+
+  :scope > :where(header, header-ui):has(> [slot="icon"]):has(> [slot="action"])         { grid-template-columns: max-content 1fr auto; }
+  :scope > :where(header, header-ui):has(> [slot="icon"]):not(:has(> [slot="action"]))   { grid-template-columns: max-content 1fr; }
+  :scope > :where(header, header-ui):not(:has(> [slot="icon"])):has(> [slot="action"])   { grid-template-columns: 1fr auto; }
+  :scope > :where(header, header-ui):not(:has(> [slot="icon"])):not(:has(> [slot="action"])) { grid-template-columns: 1fr; }
+
+  /* Unslotted children stack above the heading/description/action grid,
+     full-width — same escape hatch as card.css (zettel fragment injection,
+     logos, banners) without needing to know the slot vocabulary. */
+  :scope > :where(header, header-ui):has(> [slot]) > *:not([slot]):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(p):not(small):not(text-ui) {
+    grid-column: 1 / -1;
+    justify-self: center;
+  }
+
+  /* Icon — first column. Spans both rows (anchored to start) once a
+     description row exists, matching card.css. */
+  :scope > :where(header, header-ui) > [slot="icon"] {
+    grid-column: 1;
+    grid-row: 1;
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* :not([slot]) on the bare-tag branches (gh#1253 review) — a native <p>/
+     <small>/body-caption text-ui carrying its OWN slot (e.g. slot="heading")
+     must not also count as "there's a description row" just because the tag
+     matches; only an actual [slot="description"] or an unslotted bare tag
+     does. */
+  :scope > :where(header, header-ui):has(> :is([slot="description"], p:not([slot]), small:not([slot]), text-ui[variant="body"]:not([slot]), text-ui[variant="caption"]:not([slot]))) > [slot="icon"] {
+    grid-row: 1 / span 2;
+    align-self: start;
+  }
+
+  /* Heading — row 1. Matches native h1-h6 and the A2UI-transpiled text-ui
+     heading variants, only when unslotted (an explicit slot="heading"
+     always wins) — same as card.css. */
+  :scope > :where(header, header-ui) > :is([slot="heading"], h1, h2, h3, h4, h5, h6),
+  :scope > :where(header, header-ui) > :is(text-ui[variant="display"], text-ui[variant="title"], text-ui[variant="heading"], text-ui[variant="subsection"]):not([slot]),
+  :scope > :where(header, header-ui) > [slot="heading"] :is(h1, h2, h3, h4, h5, h6) {
+    grid-row: 1;
+    line-height: 1.3;
+    margin: 0;
+  }
+
+  :scope > :where(header, header-ui) > [slot="heading"] {
+    display: flex;
+    align-items: center;
+    gap: var(--page-header-gap);
+    color: var(--page-heading-fg);
+  }
+  :scope > :where(header, header-ui) > [slot="heading"]:not(:is(h1, h2, h3, h4, h5, h6, text-ui)) {
+    font-size: var(--page-heading-size);
+    font-weight: var(--page-heading-weight);
+  }
+  :scope > :where(header, header-ui):has(> [slot="icon"]) > :is([slot="heading"], h1, h2, h3, h4, h5, h6) { grid-column: 2; }
+  :scope > :where(header, header-ui):has(> [slot="icon"]) > :is(text-ui[variant="display"], text-ui[variant="title"], text-ui[variant="heading"], text-ui[variant="subsection"]):not([slot]) { grid-column: 2; }
+  :scope > :where(header, header-ui):not(:has(> [slot="icon"])) > :is([slot="heading"], h1, h2, h3, h4, h5, h6) { grid-column: 1; }
+  :scope > :where(header, header-ui):not(:has(> [slot="icon"])) > :is(text-ui[variant="display"], text-ui[variant="title"], text-ui[variant="heading"], text-ui[variant="subsection"]):not([slot]) { grid-column: 1; }
+
+  /* Description — row 2. :not([slot]) so a bare <p>/<small> carrying its
+     own slot (e.g. slot="heading") doesn't ALSO match the fallback here —
+     equal specificity + later source order would otherwise let this rule
+     win and drop it to row 2 (gh#1253 review). */
+  :scope > :where(header, header-ui) > :is([slot="description"], p:not([slot]), small:not([slot])),
+  :scope > :where(header, header-ui) > :is(text-ui[variant="body"], text-ui[variant="caption"]):not([slot]) {
+    grid-row: 2;
+    grid-column: 1 / -1;
+    line-height: 1.4;
+    margin: 0;
+  }
+  :scope > :where(header, header-ui):has(> [slot="icon"]) > :is([slot="description"], p:not([slot]), small:not([slot])) { grid-column: 2 / -1; }
+  :scope > :where(header, header-ui):has(> [slot="icon"]) > :is(text-ui[variant="body"], text-ui[variant="caption"]):not([slot]) { grid-column: 2 / -1; }
+
+  /* Action — row 1, last column. Flex container so it can hold badge +
+     button + anything inline (e.g. <toggle-scheme-ui> — gh#1253's probe).
+     Direct-child `>` (gh#1253 review) — a deeply-nested [slot="action"]
+     (e.g. inside an unrelated composite) must not pick up header-grid
+     flex/alignment styling; only a DIRECT header child activates it. */
+  :scope > :where(header, header-ui) > [slot="action"] {
+    justify-self: end;
+    align-self: center;
+    grid-row: 1;
+    grid-column: -2 / -1;
+    display: flex;
+    align-items: center;
+    gap: var(--page-header-gap);
+    min-width: 0;
+  }
 }

package/components/page/page.yaml

@@ -66,7 +66,34 @@ slots:
       Composes from the slot primitives — `<header-ui>` (page header),
       `<section-ui>` (main content), optional `<footer-ui>`. Native
       `<header>` / `<section>` / `<footer>` also work; the @scope rules
-      target both via `:where(header, header-ui)`.
+      target both via `:where(header, header-ui)`. The page header
+      also activates the named slot-gated grid (`slot="icon"` /
+      `slot="heading"` / `slot="description"` / `slot="action"`) once
+      any DIRECT header child carries a `slot` attribute — same
+      contract as `<card-ui>`'s header (gh#1253).
+  icon:
+    description: >-
+      Leading icon for the page header — status, brand, or type marker.
+      Placed in column 1 of the header grid when present; heading +
+      description shift to column 2. Direct child of `<header>` /
+      `<header-ui>` only, per the :has(> [slot="icon"]) gate.
+  heading:
+    description: >-
+      Primary title — grid row 1 inside the page header. Also accepts
+      bare `<h1>`–`<h6>` tags (or A2UI's transpiled display/title/heading/subsection
+      `<text-ui>` variants) as direct children without slot="heading".
+      A slot="heading" wrapper can contain inline badges or metadata
+      alongside the title text.
+  description:
+    description: >-
+      Secondary metadata — grid row 2 beneath the heading inside the
+      page header. Also accepts bare `<p>` / `<small>` / body-variant
+      `<text-ui>` as direct children without slot="description".
+  action:
+    description: >-
+      Trailing control cluster inside the page header (icon-buttons,
+      menu trigger, scheme toggle, more-options). Aligns to the
+      flex-end edge — the fix for gh#1253's dropped `<toggle-scheme-ui>`.
 states:
   - name: idle
     description: Default, ready for interaction.
@@ -78,8 +105,8 @@ a2ui:
   rules:
     - rule: 'Top-level page container — wraps an entire route''s content surface.'
       reason: 'Page-level chrome primitive.'
-    - rule: 'Inside <admin-shell-ui>, <chat-shell-ui>, or <editor-shell-ui>, use the shell''s own body slot instead; page-ui is for standalone routes without shell chrome.'
-      reason: 'Shell hosting precedence.'
+    - rule: 'Inside <admin-shell-ui>, <chat-shell-ui>, or <editor-shell-ui>, page-ui still composes — nest it in the shell''s content column with [scroll] omitted (the shell already owns scrolling) to get page-ui''s max-width clamp, padding scale, and region rhythm. Skip page-ui only when the shell''s own header/body slots already give you everything you need.'
+      reason: 'Shell hosting precedence — the shell owns scroll; page-ui supplies layout, not a second scroll surface.'
     - rule: 'Hosts arbitrary children — no enforced child contract.'
       reason: 'Generic container.'
 anti_patterns: []

package/components/select/select.class.js

@@ -439,8 +439,14 @@ export class UISelect extends UIFormElement {
           : this.icon
             ? `<icon-ui slot="leading" data-select-leading name="${escapeHTML(this.icon)}"></icon-ui>`
             : '';
+      // No native <input> wrap (per ADR-0055 / ADR-0025): the searchable
+      // trigger is a `contenteditable="plaintext-only"` surface carrying
+      // `role="combobox"`, mirroring combobox-ui's editable-surface pattern.
+      // Placeholder text renders via the [data-empty]::before pseudo (see
+      // select.css), same mechanism as input-ui / combobox-ui.
+      const initialDisplayText = this.#displayText() === this.placeholder ? '' : this.#displayText();
       const displayMarkup = this.searchable
-        ? `<input slot="display" type="text" role="combobox" aria-autocomplete="list" autocomplete="off" placeholder="${escapeHTML(this.placeholder || '')}" value="${escapeHTML(this.#displayText() === this.placeholder ? '' : this.#displayText())}" />`
+        ? `<span slot="display" contenteditable="plaintext-only" role="combobox" aria-autocomplete="list" tabindex="0" data-placeholder="${escapeHTML(this.placeholder || '')}"${initialDisplayText ? '' : ' data-empty'}>${escapeHTML(initialDisplayText)}</span>`
         : `<span slot="display">${escapeHTML(this.#displayText())}</span>`;
       // §184 (v0.5.5, FEEDBACK-08 §7): optional hint slot beneath the
       // trigger. Mirrors slider-ui's hint pattern + matches the
@@ -478,7 +484,7 @@ export class UISelect extends UIFormElement {
           this.#searchInput.removeEventListener('focus', this.#onSearchFocus);
           this.#searchInput.removeEventListener('click', this.#onSearchClick);
         }
-        this.#searchInput = this.querySelector('input[slot="display"]');
+        this.#searchInput = this.querySelector('[slot="display"][contenteditable]');
         if (this.#searchInput) {
           this.#searchInput.addEventListener('input', this.#onSearchInput);
           this.#searchInput.addEventListener('focus', this.#onSearchFocus);
@@ -492,9 +498,13 @@ export class UISelect extends UIFormElement {
       const display = this.querySelector('[slot="display"]');
       if (display && !this.multiple) {
         // Single-select: keep the canonical text-rendering path.
-        if (display.tagName === 'INPUT') {
-          // Only update value when not actively editing (no active query)
-          if (!this.#query) display.value = this.#displayText() === this.placeholder ? '' : this.#displayText();
+        if (display.hasAttribute('contenteditable')) {
+          // Only update text when not actively editing (no active query)
+          if (!this.#query) {
+            const text = this.#displayText() === this.placeholder ? '' : this.#displayText();
+            display.textContent = text;
+            display.toggleAttribute('data-empty', !text);
+          }
         } else {
           display.textContent = this.#displayText();
         }
@@ -502,10 +512,13 @@ export class UISelect extends UIFormElement {
         // Multi-select: display element holds the placeholder ONLY when
         // no chips are present (otherwise the chip row IS the display).
         const hasChips = this.#values().length > 0;
-        if (display.tagName === 'INPUT') {
+        if (display.hasAttribute('contenteditable')) {
           // search input — keep placeholder; never inject the value text.
-          display.placeholder = hasChips ? '' : (this.placeholder || '');
-          if (!this.#query) display.value = '';
+          display.setAttribute('data-placeholder', hasChips ? '' : (this.placeholder || ''));
+          if (!this.#query) {
+            display.textContent = '';
+            display.toggleAttribute('data-empty', true);
+          }
         } else {
           display.textContent = hasChips ? '' : (this.placeholder || '');
         }
@@ -991,7 +1004,7 @@ export class UISelect extends UIFormElement {
     // before it would start removing query characters.
     if (e.key === 'Backspace' && this.multiple && !this.disabled && !this.readonly) {
       const target = e.target;
-      const fromInput = target && target.tagName === 'INPUT' && target.getAttribute('slot') === 'display';
+      const fromInput = target && target.hasAttribute?.('contenteditable') && target.getAttribute('slot') === 'display';
       const queryEmpty = !this.#query || this.#query.length === 0;
       if (!fromInput || queryEmpty) {
         if (this.#values().length > 0) {
@@ -1005,8 +1018,11 @@ export class UISelect extends UIFormElement {
       if (this.searchable && this.#query) {
         // First Escape: clear query
         this.#query = '';
-        const input = this.querySelector('input[slot="display"]');
-        if (input) input.value = '';
+        const input = this.querySelector('[slot="display"][contenteditable]');
+        if (input) {
+          input.textContent = '';
+          input.toggleAttribute('data-empty', true);
+        }
         this.#applyFilter();
         return;
       }
@@ -1061,7 +1077,9 @@ export class UISelect extends UIFormElement {
   };
 
   #onSearchInput = (e) => {
-    this.#query = e.target.value || '';
+    const text = e.target.textContent || '';
+    this.#query = text;
+    e.target.toggleAttribute('data-empty', !text);
     if (!this.open) this.open = true;
     this.#applyFilter();
   };

package/components/select/select.css

@@ -149,7 +149,7 @@
     white-space: nowrap;
     color: var(--select-fg);
   }
-  input[slot="display"] {
+  [slot="display"][contenteditable] {
     border: none;
     outline: none;
     background: transparent;
@@ -159,9 +159,18 @@
     color: var(--select-fg);
     min-width: 0;
     width: 100%;
+    /* 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;
   }
-  input[slot="display"]::placeholder {
+  [slot="display"][contenteditable][data-empty]::before {
+    content: attr(data-placeholder);
     color: var(--select-placeholder-fg);
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
   }
   :scope:not([value]) [slot="display"],
   :scope[value=""] [slot="display"] {

package/components/swatch/swatch.css

@@ -274,20 +274,22 @@
     z-index: 1;
   }
   :scope[shape="block"][auto-contrast] > [data-label][data-on-dark] {
-    color: var(--a-chrome-light, #fafafa);
+    color: var(--a-chrome-light);
   }
   :scope[shape="block"][auto-contrast] > [data-label][data-on-light] {
-    color: var(--a-chrome-dark, #111);
+    color: var(--a-chrome-dark);
   }
   /* Detail line follows the same auto-contrast choice. */
   :scope[shape="block"][auto-contrast] > [data-detail] {
     z-index: 1;
   }
   :scope[shape="block"][auto-contrast] > [data-label][data-on-dark] ~ [data-detail] {
-    color: color-mix(in oklab, var(--a-chrome-light, #fafafa) 80%, transparent);
+    color: var(--a-chrome-light);
+    opacity: 0.8;
   }
   :scope[shape="block"][auto-contrast] > [data-label][data-on-light] ~ [data-detail] {
-    color: color-mix(in oklab, var(--a-chrome-dark, #111) 70%, transparent);
+    color: var(--a-chrome-dark);
+    opacity: 0.7;
   }
 
   /* ═══════ Copy button — a stamped <button-ui variant="ghost" size="sm">