@adia-ai/web-components 0.8.31 → 0.8.33

package/components/integration-card/integration-card.d.ts

@@ -51,13 +51,13 @@ export class UIIntegrationCard extends UIElement {
   /** Current connection state — drives the button label, variant, and visibility. `available` shows a primary `Connect`; `connected` shows an outline `Configure`; `error` shows an outline `Retry`; `pending` shows a non-interactive spinner; `coming-soon` hides the button. */
   status: string;
 
+  addEventListener(type: 'configure', listener: (ev: IntegrationCardConfigureEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'connect', listener: (ev: IntegrationCardConnectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'disconnect', listener: (ev: IntegrationCardDisconnectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'retry', listener: (ev: IntegrationCardRetryEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIIntegrationCard, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'configure', listener: (ev: IntegrationCardConfigureEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'connect', listener: (ev: IntegrationCardConnectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'disconnect', listener: (ev: IntegrationCardDisconnectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'retry', listener: (ev: IntegrationCardRetryEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/link/link.d.ts

@@ -63,10 +63,10 @@ export class UILink extends UIElement {
   /** Visual treatment. `default` underlines on rest + hover (standard link affordance). `subtle` underlines only on hover (for tighter designs where always-underlined would be noisy). `quiet` drops the link color and matches surrounding text color (used for footer-link rows where the link affordance is implied by context, not by color). */
   variant: 'default' | 'subtle' | 'quiet';
 
+  addEventListener(type: 'press', listener: (ev: LinkPressEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UILink, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'press', listener: (ev: LinkPressEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/list/list.class.js

@@ -45,9 +45,12 @@ export class UIList extends UIElement {
   static template = () => null;
 
   #bound = false;
+  #stampedSelection = false;
 
   connected() {
-    this.setAttribute('role', 'list');
+    // Adopt-or-stamp (gh#753): a consumer-authored role survives connect —
+    // only stamp when absent.
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'list');
     if (!this.#bound) {
       this.#bound = true;
       this.addEventListener('click', this.#onClick);
@@ -63,13 +66,21 @@ export class UIList extends UIElement {
 
   render() {
     if (!this.selectable) {
-      // Clear selection chrome from children
-      for (const ch of this.#items()) {
-        ch.removeAttribute('aria-selected');
-        ch.removeAttribute('tabindex');
+      // Clear selection chrome from children — but ONLY chrome this list
+      // stamped (selectable toggled off). An unconditional strip clobbered
+      // consumer-managed focusability: a non-selectable list re-render
+      // silently removed tabindex the consumer set on its own rows
+      // (patient-visit rail's roving tabindex, gh#746).
+      if (this.#stampedSelection) {
+        for (const ch of this.#items()) {
+          ch.removeAttribute('aria-selected');
+          ch.removeAttribute('tabindex');
+        }
+        this.#stampedSelection = false;
       }
       return;
     }
+    this.#stampedSelection = true;
     const key = this.selectedKey || '';
     const items = this.#items();
     let focusTarget = null;
@@ -121,7 +132,8 @@ export class UIList extends UIElement {
 
   #onClick = (e) => {
     if (!this.selectable) return;
-    const item = e.target.closest?.('[role="listitem"]');
+    // tag-or-role: adopt-or-stamp (gh#753) means a consumer role must not break click-select
+    const item = e.target.closest?.('list-item-ui, [role="listitem"]');
     if (!item || item.parentElement !== this) return;
     const key = this.#keyOf(item);
     if (key) this.#selectKey(key);
@@ -166,7 +178,10 @@ export class UIListItem extends UIElement {
   static template = () => null;
 
   connected() {
-    this.setAttribute('role', 'listitem');
+    // Adopt-or-stamp (gh#753): a consumer-authored role (e.g. role="button"
+    // on a clickable row) survives connect AND reconnect — only stamp
+    // "listitem" when the host has no author-set role at all.
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'listitem');
     this.#stamp();
   }
 

package/components/list/list.d.ts

@@ -46,12 +46,12 @@ so content sits at the list-ui edges (canonical edge-to-edge style).
   /** Item spacing */
   spacing: string;
 
+  addEventListener(type: 'selection-change', listener: (ev: ListSelectionChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIList, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'selection-change', listener: (ev: ListSelectionChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }
 
 export class UIListItem extends UIElement {

package/components/list-window/list-window.d.ts

@@ -71,14 +71,14 @@ export class UIListWindow extends UIElement {
   /** Index to scroll to on mount. Useful for restoring scroll position on remount. */
   startIndex: number;
 
-  addEventListener<K extends keyof HTMLElementEventMap>(
-    type: K,
-    listener: (this: UIListWindow, ev: HTMLElementEventMap[K]) => unknown,
-    options?: boolean | AddEventListenerOptions,
-  ): void;
   addEventListener(type: 'item-click', listener: (ev: ListWindowItemClickEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'measure', listener: (ev: ListWindowMeasureEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'range-change', listener: (ev: ListWindowRangeChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'scroll-end', listener: (ev: ListWindowScrollEndEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'scroll-start', listener: (ev: ListWindowScrollStartEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIListWindow, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
 }

package/components/mark/mark.a2ui.json

@@ -17,14 +17,13 @@
       "const": "Mark"
     },
     "variant": {
-      "description": "Highlight color variant. Default `warning` is the conventional yellow-marker tone.",
+      "description": "Highlight color family — the only color axis mark exposes. Default `warning` is the conventional yellow-marker tone and IS mark's family-less identity, so there is no `default` member. For a neutral (non-semantic) highlight, override the public tokens instead of the variant: `--mark-bg: var(--a-bg-muted); --mark-fg: var(--md-sys-color-neutral-on-surface)` — the successor to the retired `variant=\"muted\"` (gh#881).",
       "type": "string",
       "enum": [
         "warning",
         "info",
         "success",
-        "danger",
-        "muted"
+        "danger"
       ],
       "default": "warning"
     }
@@ -87,12 +86,12 @@
     "tag": "mark-ui",
     "tokens": {
       "--mark-bg": {
-        "description": "Background color of the highlight.",
-        "default": "var(--a-warning-muted)"
+        "description": "Background color of the highlight. Override for a non-semantic (e.g. neutral) highlight — see [variant].",
+        "default": "var(--md-sys-color-warning-container)"
       },
       "--mark-fg": {
-        "description": "Foreground (text) color inside the highlight.",
-        "default": "var(--a-warning-text)"
+        "description": "Foreground (text) color inside the highlight. Pair every [--mark-bg] override with a matching fg so contrast holds in both schemes.",
+        "default": "var(--md-sys-color-warning-on-surface)"
       },
       "--mark-px": {
         "description": "Horizontal padding around the highlighted text.",

package/components/mark/mark.class.js

@@ -8,7 +8,7 @@ import { UIElement } from '../../core/element.js';
 
 export class UIMark extends UIElement {
   static properties = {
-    variant: { type: String, default: 'warning', reflect: true }, // warning | info | success | danger | muted
+    variant: { type: String, default: 'warning', reflect: true }, // warning | info | success | danger
   };
 
   static template = () => null;

package/components/mark/mark.css

@@ -32,8 +32,11 @@
     --mark-bg: var(--md-sys-color-danger-container);
     --mark-fg: var(--md-sys-color-danger-on-surface);
   }
-  :scope[variant="muted"] {
-    --mark-bg: var(--a-bg-muted);
-    --mark-fg: var(--md-sys-color-neutral-on-surface);
-  }
+
+  /* NB `variant` is mark's ONLY color axis and it is family-only
+     (gh#881, the two-axis convention). The former `variant="muted"`
+     neutral highlight is retired; its successor is the public token
+     override — `--mark-bg: var(--a-bg-muted); --mark-fg:
+     var(--md-sys-color-neutral-on-surface)` — so a non-semantic
+     highlight no longer needs an enum member of its own. */
 }

package/components/mark/mark.d.ts

@@ -22,6 +22,6 @@ background highlight behind the matched span.
 import { UIElement } from '../../core/element.js';
 
 export class UIMark extends UIElement {
-  /** Highlight color variant. Default `warning` is the conventional yellow-marker tone. */
-  variant: 'warning' | 'info' | 'success' | 'danger' | 'muted';
+  /** Highlight color family — the only color axis mark exposes. Default `warning` is the conventional yellow-marker tone and IS mark's family-less identity, so there is no `default` member. For a neutral (non-semantic) highlight, override the public tokens instead of the variant: `--mark-bg: var(--a-bg-muted); --mark-fg: var(--md-sys-color-neutral-on-surface)` — the successor to the retired `variant="muted"` (gh#881). */
+  variant: 'warning' | 'info' | 'success' | 'danger';
 }

package/components/mark/mark.examples.md

@@ -42,10 +42,6 @@
     <mark-ui variant="danger">danger</mark-ui>
     — removed line, conflict.
   </text-ui>
-  <text-ui>
-    <mark-ui variant="muted">muted</mark-ui>
-    — neutral emphasis.
-  </text-ui>
 </col-ui>
 ```
 

package/components/mark/mark.yaml

@@ -17,7 +17,14 @@ description: |
   background highlight behind the matched span.
 props:
   variant:
-    description: Highlight color variant. Default `warning` is the conventional yellow-marker tone.
+    description: >-
+      Highlight color family — the only color axis mark exposes. Default
+      `warning` is the conventional yellow-marker tone and IS mark's
+      family-less identity, so there is no `default` member. For a
+      neutral (non-semantic) highlight, override the public tokens
+      instead of the variant: `--mark-bg: var(--a-bg-muted);
+      --mark-fg: var(--md-sys-color-neutral-on-surface)` — the successor
+      to the retired `variant="muted"` (gh#881).
     type: string
     default: warning
     enum:
@@ -25,7 +32,6 @@ props:
       - info
       - success
       - danger
-      - muted
     reflect: true
 events: {}
 slots:
@@ -37,11 +43,15 @@ states:
 traits: []
 tokens:
   --mark-bg:
-    description: Background color of the highlight.
-    default: var(--a-warning-muted)
+    description: >-
+      Background color of the highlight. Override for a non-semantic
+      (e.g. neutral) highlight — see [variant].
+    default: var(--md-sys-color-warning-container)
   --mark-fg:
-    description: Foreground (text) color inside the highlight.
-    default: var(--a-warning-text)
+    description: >-
+      Foreground (text) color inside the highlight. Pair every [--mark-bg]
+      override with a matching fg so contrast holds in both schemes.
+    default: var(--md-sys-color-warning-on-surface)
   --mark-px:
     description: Horizontal padding around the highlighted text.
     default: var(--a-space-0-5)

package/components/menu/menu.css

@@ -106,11 +106,11 @@ menu-item-ui:hover {
 menu-item-ui:hover [slot="icon"] {
   color: var(--menu-item-icon-fg-hover);
 }
-menu-item-ui[variant="danger"]:hover {
+menu-item-ui[variant="danger"]:hover:not(:focus-visible) {
   --menu-item-bg: var(--menu-item-danger-bg);
   --menu-item-fg: var(--menu-item-danger-fg);
 }
-menu-item-ui[variant="danger"]:hover [slot="icon"] {
+menu-item-ui[variant="danger"]:hover:not(:focus-visible) [slot="icon"] {
   color: var(--menu-item-danger-fg);
 }
 

package/components/menu/menu.d.ts

@@ -29,12 +29,12 @@ export class UIMenu extends UIElement {
   /** Preferred position relative to the anchor element */
   placement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 
+  addEventListener(type: 'action', listener: (ev: MenuActionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIMenu, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'action', listener: (ev: MenuActionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }
 
 export class UIMenuDivider extends UIElement {

package/components/modal/modal.d.ts

@@ -33,10 +33,10 @@ export class UIModal extends UIElement {
   /** Aria label applied to the surface element for accessibility */
   text: string;
 
+  addEventListener(type: 'close', listener: (ev: ModalCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIModal, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'close', listener: (ev: ModalCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/nav/nav.css

@@ -20,6 +20,14 @@
     --nav-duration: var(--a-duration);  /* §230-bundle (v0.5.9): canonical mid-tier duration (250ms). Was orphaned --a-duration-base. */
     --nav-easing:   var(--a-easing, ease);
 
+    /* Collapsed-rail icon sizing — one shared source for nav-item-ui's
+       and nav-group-ui's [slot="header"] icons at the narrow (<=96px)
+       container-query breakpoint (gh#767). Was two independently
+       drifting values: nav-item pinned a literal 18px, nav-group
+       referenced an undefined --nav-group-icon-font-size (guaranteed-
+       invalid, silently riding icon-ui's ambient-font-size fallback). */
+    --nav-icon-size-collapsed: 18px;
+
     /* Group-heading kicker */
     --nav-label-fg:        var(--a-fg-muted);
     --nav-label-font-size: var(--a-kicker-sm);

package/components/nav/nav.d.ts

@@ -41,10 +41,10 @@ export class UINav extends UIElement {
   /** Visual treatment. primary = app sidebar; section = subnav rail. */
   variant: 'primary' | 'section';
 
+  addEventListener(type: 'nav-select', listener: (ev: NavSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UINav, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'nav-select', listener: (ev: NavSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/nav-group/nav-group.css

@@ -16,6 +16,7 @@
     --nav-group-fg-selected:   var(--a-fg-strong);
     --nav-group-icon-fg-selected: var(--md-sys-color-primary); /* one selection color with --nav-item-accent (gh#522) */
     --nav-group-bg-hover:      var(--a-bg-muted);
+    --nav-group-bg-selected:   var(--a-bg-selected); /* mirrors --nav-item-bg-selected — the missing container fill (gh#795) */
     --nav-group-icon-size:     calc(var(--nav-group-row-height) - var(--a-space-2));
     --nav-group-badge-size:    var(--a-ui-sm);
 
@@ -52,8 +53,22 @@
   }
   /* Selected-look header treatment keys on [selected] — the CSS half of
      gh issue 459 (PR 460 corrected the icon weight): the group CONTAINING
-     the selected route reads strong; a merely-expanded group does not. */
-  :scope[selected] > [slot="header"] {
+     the selected route reads strong; a merely-expanded group does not.
+     Text color applies in BOTH rail modes — subtle, no double-marking risk.
+     The BACKGROUND fill (gh#795) is collapsed-only (see the two
+     nav-ui[collapsed] / @container sidebar blocks below): [selected] and
+     [data-selected-within] both mean "CONTAINS the selected route", never
+     "IS the selected route" (nav-group.class.js's own doc comment on the
+     `selected` prop — consumers set it from active-route logic exactly
+     like the JS-derived data-selected-within case; there is no
+     directly-selected-leaf-group state distinct from it). In the expanded
+     rail the contained child already paints its own real selected pill
+     (nav-item.css), so a header background here double-marks the same
+     selection (gh#806 — operator screenshot, profile-security). Collapsed
+     hides the children, so the header becomes the ONLY selection signal
+     and needs the fill nav-item-ui gets. */
+  :scope[selected] > [slot="header"],
+  :scope[data-selected-within] > [slot="header"] {
     color: var(--nav-group-fg-selected);
   }
   /* Icon color = the SELECTION color, one language with nav-item's accent
@@ -111,9 +126,12 @@
     justify-content: center;
   }
 
-  [slot="header"] [slot="icon"] icon-ui {
-    --a-icon-size: calc(var(--nav-group-icon-font-size) + 2px);
-  }
+  /* Default (non-collapsed) icon size: no explicit --a-icon-size here —
+     icon-ui rides its own ambient-font-size fallback
+     (calc(1em + 0.125rem), icon.css). Was a reference to
+     --nav-group-icon-font-size, a token defined nowhere — guaranteed-
+     invalid, so it silently resolved to the exact same fallback anyway;
+     removed as dead code (gh#767), same defect as nav-item's mirror rule. */
 
   [slot="header"] [slot="text"] {
     flex: 1;
@@ -175,10 +193,29 @@
     padding: 0;
   }
 
-  nav-ui[collapsed] & {
-    align-self: stretch;
+  /* gh#806: the header background fill lives HERE, collapsed-only —
+     children are display:none in this mode (rule above), so the header
+     is the sole selection signal and needs the real container fill
+     nav-item-ui gets. Expanded mode never sets this background (the
+     :scope[selected]/[data-selected-within] rule above is color-only) —
+     the selected child already paints its own pill there. */
+  nav-ui[collapsed] &[selected] > [slot="header"],
+  nav-ui[collapsed] &[data-selected-within] > [slot="header"] {
+    background: var(--nav-group-bg-selected);
   }
 
+  /* No align-self override here (there was one — `align-self: stretch` —
+     until gh#767): in expanded mode :scope already stretches full-width
+     via nav-ui's default flex-column align-items:stretch, so the
+     explicit rule was a no-op there. In collapsed mode it silently
+     fought admin-shell.collapsed.css's square-footprint contract
+     (align-items:center at the nav-ui level, FEEDBACK-39) — stretching
+     the header to the full rail width and defeating the min-width floor
+     that pins nav-item-ui/nav-group-ui to a matching square. Falling
+     through to the ambient align-items (stretch normally, center under
+     admin-shell's collapsed rail) matches nav-item-ui, which never had
+     an override here. */
+
   nav-ui[collapsed] &::after {
     display: none;
   }
@@ -199,12 +236,24 @@
        invalid at the icon's var() site: a silent no-op. The caret is
        display:none in collapsed mode anyway; the icon keeps the
        inherited --a-icon-size.) */
-    :scope {
-      align-self: stretch;
+    /* No align-self override here either (gh#767) — same reasoning as
+       the nav-ui[collapsed] & block above; this duplicate fought the
+       same square-footprint contract inside the container-query path. */
+    [slot="header"] [slot="icon"] icon-ui {
+      --a-icon-size: var(--nav-icon-size-collapsed);
     }
     :scope::after {
       display: none;
     }
+    /* gh#806 — mirrors the nav-ui[collapsed] block above: this container
+       query is the OTHER mechanism that puts the rail in collapsed mode
+       (admin-sidebar's own collapse path), and children are hidden here
+       too ([slot="header"] nav-item-ui rule above), so the same
+       collapsed-only header background applies. */
+    :scope[selected] > [slot="header"],
+    :scope[data-selected-within] > [slot="header"] {
+      background: var(--nav-group-bg-selected);
+    }
   }
 
   /* ── Size variants ── */

package/components/nav-group/nav-group.d.ts

@@ -45,10 +45,10 @@ export class UINavGroup extends UIElement {
   /** Visual treatment. Default ('') renders as a primary-rail group (icon row, caret, collapsible). 'section' renders the header as a static kicker label with always-visible children. When the parent <nav-ui> carries variant="section", this group inherits it via CSS cascade unless an explicit variant is set on the group. */
   variant: '' | 'section';
 
+  addEventListener(type: 'group-toggle', listener: (ev: NavGroupGroupToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UINavGroup, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'group-toggle', listener: (ev: NavGroupGroupToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/nav-item/nav-item.css

@@ -106,9 +106,12 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
     transition: color var(--nav-duration-fast) var(--nav-easing);
   }
 
-  [slot="icon"] icon-ui {
-    --a-icon-size: calc(var(--nav-item-icon-font-size) + 2px);
-  }
+  /* Default (non-collapsed) icon size: no explicit --a-icon-size here —
+     icon-ui rides its own ambient-font-size fallback
+     (calc(1em + 0.125rem), icon.css). Was a reference to
+     --nav-item-icon-font-size, a token defined nowhere — guaranteed-
+     invalid, so it silently resolved to the exact same fallback anyway;
+     removed as dead code (gh#767). */
 
   /* Selected accent line on empty icon slot moved outside @scope — see Safari 17.x bug note at top. */
 
@@ -157,7 +160,7 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
       display: none !important;
     }
     [slot="icon"] icon-ui {
-      --a-icon-size: 18px;
+      --a-icon-size: var(--nav-icon-size-collapsed);
     }
     :scope {
       justify-content: center;

package/components/nav-item/nav-item.d.ts

@@ -47,10 +47,10 @@ export class UINavItem extends UIElement {
   /** Visual treatment. Default ('') renders as a primary-rail item (reserved icon space, in-icon selected accent). 'section' renders flat — no icon space when absent, left-edge accent bar for selected. When the parent <nav-ui> carries variant="section", this item inherits it via CSS cascade unless an explicit variant is set. */
   variant: '' | 'section';
 
+  addEventListener(type: 'nav-select', listener: (ev: NavItemNavSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UINavItem, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'nav-select', listener: (ev: NavItemNavSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/noodles/noodles.d.ts

@@ -62,12 +62,12 @@ export class UINoodles extends UIElement {
   /** Bezier control point distance (0-1). Higher = wider curves */
   tension: number;
 
+  addEventListener(type: 'noodle-connect', listener: (ev: NoodlesNoodleConnectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'noodle-disconnect', listener: (ev: NoodlesNoodleDisconnectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'noodle-drag', listener: (ev: NoodlesNoodleDragEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UINoodles, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'noodle-connect', listener: (ev: NoodlesNoodleConnectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'noodle-disconnect', listener: (ev: NoodlesNoodleDisconnectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'noodle-drag', listener: (ev: NoodlesNoodleDragEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/option-card/option-card.css

@@ -1,7 +1,7 @@
 /* Safari 17.x bug: `:scope:not(...):hover` (Flavor A) and `:scope[checked]`
    (Flavor B — attribute-removal restyle) both fail inside `@scope`.
    Selectors moved out. See docs/BROWSER-COMPAT.md §3a. */
-option-card-ui:not([checked]):not([disabled]):hover {
+option-card-ui:not([checked]):not([disabled]):hover:not(:focus-visible) {
   background: var(--option-card-bg-hover);
   border-color: var(--option-card-border-hover);
 }

package/components/option-card/option-card.examples.md

@@ -24,7 +24,7 @@
     <span slot="heading">
       Pro
       <text-ui color="subtle" size="sm">· $49/mo</text-ui>
-      <badge-ui text="14-day trial" variant="accent"></badge-ui>
+      <badge-ui text="14-day trial" variant="primary"></badge-ui>
     </span>
   </option-card-ui>
   <option-card-ui name="demo-plan" value="team" description="Everything in Pro · SSO · audit log · 1 TB storage">

package/components/pagination/pagination.d.ts

@@ -35,10 +35,10 @@ default; pass `size="sm"` for a denser numbered row.
   /** Visual variant — `default` (ghost buttons w/ hover bg) or `button` (1×1 bordered cells; active page filled). */
   variant: 'default' | 'button';
 
+  addEventListener(type: 'page-change', listener: (ev: PaginationPageChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIPagination, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'page-change', listener: (ev: PaginationPageChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/pane/pane.d.ts

@@ -38,10 +38,10 @@ grabber when resizable).
  */
   side: '' | 'leading' | 'trailing';
 
+  addEventListener(type: 'toggle', listener: (ev: PaneToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIPane, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'toggle', listener: (ev: PaneToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/password-strength/password-strength.d.ts

@@ -50,10 +50,10 @@ meter.value = e.target.value)`.
  */
   value: string;
 
+  addEventListener(type: 'score-change', listener: (ev: PasswordStrengthScoreChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIPasswordStrength, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'score-change', listener: (ev: PasswordStrengthScoreChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/popover/popover.a2ui.json

@@ -21,6 +21,11 @@
       "type": "number",
       "default": 4
     },
+    "match-width": {
+      "description": "Size the content panel to the trigger's width instead of max-content. Opt-in — the default (unset) keeps every existing consumer's content-sized panel unchanged.",
+      "type": "boolean",
+      "default": false
+    },
     "open": {
       "description": "Controls visibility via showPopover()/hidePopover()",
       "type": "boolean",

package/components/popover/popover.class.js

@@ -24,6 +24,9 @@
  *     (see @core/anchor.js).
  *
  * Triggers: click | hover | manual. ESC closes click/manual popovers.
+ *
+ * Set [match-width] to size the panel to the trigger's width instead of
+ * max-content (opt-in — see @core/anchor.js's `matchWidth` option).
  */
 
 import { UIElement } from '../../core/element.js';
@@ -33,10 +36,11 @@ const HOVER_CLOSE_DELAY = 120;
 
 export class UIPopover extends UIElement {
   static properties = {
-    placement: { type: String,  default: 'bottom', reflect: true },
-    gap:       { type: Number,  default: 4, reflect: true },
-    open:      { type: Boolean, default: false, reflect: true },
-    trigger:   { type: String,  default: 'click', reflect: true },
+    placement:  { type: String,  default: 'bottom', reflect: true },
+    gap:        { type: Number,  default: 4, reflect: true },
+    open:       { type: Boolean, default: false, reflect: true },
+    trigger:    { type: String,  default: 'click', reflect: true },
+    matchWidth: { type: Boolean, default: false, reflect: true, attribute: 'match-width' },
   };
 
   static template = () => null;
@@ -104,6 +108,7 @@ export class UIPopover extends UIElement {
     this.#anchorCleanup = anchorPopover(trigger, content, {
       placement: this.placement,
       gap: this.gap,
+      matchWidth: this.matchWidth,
     });
 
     if (this.trigger === 'click' || this.trigger === 'manual') {

package/components/popover/popover.css

@@ -12,9 +12,12 @@
        mode (dimmer = neutral-925, darker than the neutral-875 page it floats
        over — the panel read near-black). Matches select-ui's own dropdown
        surface exactly, so the two overlays on a shell's topbar (a select
-       menu and a popover panel) sit on one plane. */
+       menu and a popover panel) sit on one plane. Border matches too
+       (gh#857) — `--a-ui-border` (→ outline), same token select-ui's
+       `[slot="listbox"]` uses, not outline-variant (that's for internal
+       dividers — separators, group rules — a different role). */
     --popover-bg:      var(--md-sys-color-neutral-surface-bright);
-    --popover-border:  var(--md-sys-color-neutral-outline-variant);
+    --popover-border:  var(--a-ui-border);
     --popover-shadow:  var(--a-shadow-lg);
   }