@adia-ai/web-components 0.8.37 → 0.8.38

package/components/nav/nav.class.js

@@ -91,9 +91,14 @@ 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.dispatchEvent(new CustomEvent('nav-select', {
         bubbles: true,
         detail: { item, text: item.text, value: item.value },
@@ -107,13 +112,11 @@ export class UINav extends UIElement {
   }
 
   #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-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: []