@adia-ai/web-components 0.8.40 → 0.8.41

package/components/list-window/list-window.class.js

@@ -44,6 +44,7 @@
  */
 
 import { UIElement } from '../../core/element.js';
+import { isNode } from '../../core/dom.js';
 
 export class UIListWindow extends UIElement {
   static properties = {
@@ -616,7 +617,7 @@ export class UIListWindow extends UIElement {
       try { content = renderFn(item, index); }
       catch (err) { console.warn('[list-window-ui] render() threw:', err); }
     }
-    if (content instanceof Node) {
+    if (isNode(content)) {
       row.appendChild(content);
     } else if (content != null) {
       row.textContent = String(content);

package/components/loading-overlay/loading-overlay.a2ui.json

@@ -88,6 +88,7 @@
       "wait"
     ],
     "name": "UILoadingOverlay",
+    "parts": {},
     "related": [
       "Spinner",
       "Skeleton",

package/components/mark/mark.a2ui.json

@@ -40,7 +40,7 @@
         "wrong": "<mark>matched</mark>"
       }
     ],
-    "category": "typography",
+    "category": "display",
     "composes": [],
     "events": {},
     "examples": [
@@ -57,6 +57,7 @@
       "emphasis"
     ],
     "name": "UIMark",
+    "parts": {},
     "related": [
       "text",
       "tag"

package/components/mark/mark.yaml

@@ -3,7 +3,7 @@ name: UIMark
 tag: mark-ui
 status: stable
 component: Mark
-category: typography
+category: display
 version: 1
 description: |
   Highlighted inline text — token-driven theme-aware wrapper around the

package/components/menu/menu-divider.a2ui.json

@@ -33,6 +33,7 @@
       "menu-rule"
     ],
     "name": "UIMenuDivider",
+    "parts": {},
     "related": [
       "Menu",
       "MenuItem",

package/components/menu/menu-item.a2ui.json

@@ -68,11 +68,13 @@
       "dropdown-item"
     ],
     "name": "UIMenuItem",
+    "parts": {},
     "related": [
       "Menu",
       "MenuDivider",
       "Button",
-      "NavItem"
+      "NavItem",
+      "ActionItem"
     ],
     "slots": {
       "icon": {

package/components/menu/menu-item.yaml

@@ -79,6 +79,11 @@ a2ui:
       Use slot="icon" / slot="text" only when you need custom markup
       (e.g. <avatar-ui slot="icon">, <kbd slot="trailing"> shortcut
       hint).
+    - >-
+      <action-item-ui> (child of <action-list-ui>) shares this row contract
+      (icon/text/subtitle/value/variant/disabled props, icon/text/subtitle/
+      trailing slot overrides) for inline, non-popover command rows — use
+      it instead when the surface isn't a <menu-ui> popover (#1363 C5).
 
 keywords:
   - menu-item
@@ -91,6 +96,7 @@ related:
   - MenuDivider
   - Button
   - NavItem
+  - ActionItem
 
 synonyms:
   menu-item: [dropdown-item, menu-row, popover-action]

package/components/menu/menu-label.a2ui.json

@@ -39,6 +39,7 @@
       "menu-heading"
     ],
     "name": "UIMenuLabel",
+    "parts": {},
     "related": [
       "Menu",
       "MenuItem",

package/components/menu/menu.a2ui.json

@@ -16,8 +16,8 @@
     "component": {
       "const": "Menu"
     },
-    "gap": {
-      "description": "Gap in px",
+    "offset": {
+      "description": "Pixel offset between the anchor (trigger) and the menu popover. Renamed from `[gap]` (gh#1335) — a raw-px number can't share a name with the global Scale-grammar `[gap]` attribute (ADR-0053); matches popover-ui's own `[offset]` (same anchorPopover() helper).",
       "type": "number",
       "default": 4
     },
@@ -81,6 +81,7 @@
       "right-click"
     ],
     "name": "UIMenu",
+    "parts": {},
     "related": [
       "MenuItem",
       "MenuDivider",

package/components/menu/menu.class.js

@@ -35,7 +35,7 @@ export class UIMenu extends UIElement {
   static properties = {
     open:      { type: Boolean, default: false, reflect: true },
     placement: { type: String,  default: 'bottom-start', reflect: true },
-    gap:       { type: Number,  default: 4, reflect: true },
+    offset:    { type: Number,  default: 4, reflect: true },
   };
 
   static template = () => null;
@@ -103,7 +103,7 @@ export class UIMenu extends UIElement {
     this.#anchorCleanup?.();
     this.#anchorCleanup = anchorPopover(trigger, pop, {
       placement: this.placement,
-      gap: this.gap,
+      gap: this.offset,
     });
 
     // Focus first enabled item (only when opened via keyboard).

package/components/menu/menu.d.ts

@@ -22,8 +22,8 @@ export interface MenuActionEventDetail {
 export type MenuActionEvent = CustomEvent<MenuActionEventDetail>;
 
 export class UIMenu extends UIElement {
-  /** Gap in px */
-  gap: number;
+  /** Pixel offset between the anchor (trigger) and the menu popover. Renamed from `[gap]` (gh#1335) — a raw-px number can't share a name with the global Scale-grammar `[gap]` attribute (ADR-0053); matches popover-ui's own `[offset]` (same anchorPopover() helper). */
+  offset: number;
   /** Controls visibility via popover API */
   open: boolean;
   /** Preferred position relative to the anchor element */

package/components/menu/menu.yaml

@@ -13,8 +13,8 @@ description: Dropdown action menu with roving focus and keyboard navigation. Use
 composes:
   - icon-ui  # leading affordances on menu items (created in render)
 props:
-  gap:
-    description: Gap in px
+  offset:
+    description: Pixel offset between the anchor (trigger) and the menu popover. Renamed from `[gap]` (gh#1335) — a raw-px number can't share a name with the global Scale-grammar `[gap]` attribute (ADR-0053); matches popover-ui's own `[offset]` (same anchorPopover() helper).
     type: number
     default: 4
   open:
@@ -83,7 +83,7 @@ a2ui:
       Set [placement="top-start"] or [placement="top-end"] when the
       trigger sits near the bottom of the viewport (statusbar / footer
       menus); default [placement="bottom-start"] otherwise. Adjust
-      [gap] (default 4px) only when chrome demands it.
+      [offset] (default 4px) only when chrome demands it.
 anti_patterns: []
 examples:
   - name: basic-menu

package/components/modal/modal.a2ui.json

@@ -66,6 +66,7 @@
       "modal"
     ],
     "name": "UIModal",
+    "parts": {},
     "related": [
       "Drawer",
       "Card",

package/components/nav/nav.a2ui.json

@@ -98,6 +98,7 @@
       "links"
     ],
     "name": "UINav",
+    "parts": {},
     "related": [
       "NavGroup",
       "NavItem",

package/components/nav/nav.class.js

@@ -78,8 +78,20 @@ export class UINav extends UIElement {
     if (this.variant !== 'section') this.#updateTooltips();
   }
 
+  /**
+   * Collapsed = explicit [collapsed], or a rail narrower than 96px.
+   * linkedom (SSR — gh#1436's render sweep) has no getBoundingClientRect
+   * at all, so only the attribute can answer there. (A ZERO rect from a
+   * real pre-layout connect is the separate, unswept shape-3 question in
+   * ssr-compatibility's failure-shapes.md — not decided here.)
+   */
+  get #isCollapsed() {
+    return this.collapsed ||
+      (typeof this.getBoundingClientRect === 'function' && this.getBoundingClientRect().width <= 96);
+  }
+
   #updateTooltips() {
-    const isCollapsed = this.collapsed || this.getBoundingClientRect().width <= 96;
+    const isCollapsed = this.#isCollapsed;
     for (const group of this.querySelectorAll(':scope > nav-group-ui')) {
       const header = group.querySelector(':scope > [slot="header"]');
       if (header) header.title = isCollapsed ? group.text : '';
@@ -143,8 +155,7 @@ export class UINav extends UIElement {
 
     const group = e.target.closest('nav-group-ui');
     if (group && this.contains(group)) {
-      const isCollapsed = this.collapsed || this.getBoundingClientRect().width <= 96;
-      if (isCollapsed) {
+      if (this.#isCollapsed) {
         // The flyout popover is appended INSIDE the group, so an option
         // click bubbles here after the option's own handler has selected
         // and hidePopover()'d — re-showing would instantly reopen the

package/components/nav-group/nav-group.a2ui.json

@@ -92,6 +92,7 @@
       "menu"
     ],
     "name": "UINavGroup",
+    "parts": {},
     "related": [
       "Nav",
       "NavItem",

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

@@ -99,7 +99,9 @@ export class UINavGroup extends UIElement {
     // whole subtree includes this host's own [selected], which render()
     // reads anyway; render() writes only the icon's [weight], which the
     // attributeFilter excludes, so the observer can't feed back.
-    if (!this.#selectionObserver) {
+    // Guarded like the other Observer sites (gh#285 §1 pattern) — SSR shims
+    // have no MutationObserver; teardown already uses `?.disconnect()`.
+    if (!this.#selectionObserver && typeof MutationObserver !== 'undefined') {
       this.#selectionObserver = new MutationObserver(this.#onChildSelection);
       this.#selectionObserver.observe(this, {
         subtree: true,

package/components/nav-item/nav-item.a2ui.json

@@ -96,6 +96,7 @@
       "sidebar"
     ],
     "name": "UINavItem",
+    "parts": {},
     "related": [
       "Nav",
       "NavGroup",

package/components/noodles/noodles.a2ui.json

@@ -156,6 +156,7 @@
       "noodles"
     ],
     "name": "UINoodles",
+    "parts": {},
     "related": [
       "Canvas",
       "EditorCanvas"

package/components/noodles/noodles.class.js

@@ -24,6 +24,7 @@
  */
 
 import { UIElement } from '../../core/element.js';
+import { isElement } from '../../core/dom.js';
 
 let nextId = 0;
 
@@ -159,6 +160,9 @@ export class UINoodles extends UIElement {
 
   #scheduleUpdate() {
     if (this.#rafId) return;
+    // No rAF (SSR shim — gh#1436's render sweep) → no frame and no layout
+    // to measure connectors against; the client redraws on hydrate.
+    if (typeof requestAnimationFrame !== 'function') return;
     this.#rafId = requestAnimationFrame(() => {
       this.#rafId = null;
       this.#performUpdate();
@@ -251,7 +255,7 @@ export class UINoodles extends UIElement {
   // ── Element resolution ──────────────────────────────────────
 
   #resolveElement(ref) {
-    if (ref instanceof HTMLElement) return ref;
+    if (isElement(ref)) return ref;
     if (typeof ref === 'string') return this.querySelector(`#${CSS.escape(ref)}`);
     if (typeof ref === 'number') return this.#getPortChildren()[ref] ?? null;
     return null;

package/components/number-format/number-format.a2ui.json

@@ -143,6 +143,7 @@
       "intl"
     ],
     "name": "UINumberFormat",
+    "parts": {},
     "related": [
       "stat",
       "text",

package/components/option-card/option-card.a2ui.json

@@ -101,6 +101,7 @@
       "registration"
     ],
     "name": "UIOptionCard",
+    "parts": {},
     "related": [
       "radio",
       "card",

package/components/otp-input/otp-input.a2ui.json

@@ -93,12 +93,13 @@
       "input"
     ],
     "name": "UIOtpInput",
+    "parts": {},
     "related": [
       "button"
     ],
     "slots": {
-      "field": {
-        "description": "Container for the digit input boxes and optional separator"
+      "digit": {
+        "description": "Each digit input box, one per [length] — the component's own real slot=\"digit\" attribute (gh#1461; renamed from the yaml's prior `field` key, which matched no DOM element otp-input-ui stamps). Rebuilt wholesale on every #stamp() (innerHTML wipe + recreate), so this is template-owned in current behavior, not an author-content insertion point; left under slots: here since reclassifying slots:/parts: is gh#1454's charter, not this ticket's."
       }
     },
     "states": [

package/components/otp-input/otp-input.yaml

@@ -44,8 +44,15 @@ events:
         type: string
         description: Combined digits at the moment of the change.
 slots:
-  field:
-    description: Container for the digit input boxes and optional separator
+  digit:
+    description: >-
+      Each digit input box, one per [length] — the component's own real
+      slot="digit" attribute (gh#1461; renamed from the yaml's prior `field`
+      key, which matched no DOM element otp-input-ui stamps). Rebuilt
+      wholesale on every #stamp() (innerHTML wipe + recreate), so this is
+      template-owned in current behavior, not an author-content insertion
+      point; left under slots: here since reclassifying slots:/parts: is
+      gh#1454's charter, not this ticket's.
 states:
 - name: idle
   description: Default, ready for interaction.

package/components/page/page.a2ui.json

@@ -31,6 +31,18 @@
     "padding": {
       "description": "Page-padding scale from the spacing system. Accepts `0`–`8`\n(mapped to `--a-space-N`). Empty (no value) applies the\n`--page-padding` token; `0` removes padding.\n",
       "type": "string",
+      "enum": [
+        "",
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8"
+      ],
       "default": ""
     },
     "scroll": {
@@ -77,6 +89,7 @@
       "dashboard-page"
     ],
     "name": "UIPage",
+    "parts": {},
     "related": [
       "app-shell",
       "card",

package/components/page/page.d.ts

@@ -29,7 +29,7 @@ Centered horizontally via `margin-inline: auto`.
 (mapped to `--a-space-N`). Empty (no value) applies the
 `--page-padding` token; `0` removes padding.
  */
-  padding: string;
+  padding: '' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
   /** Sets the page as a scroll container. `overflow-y: auto`, full
 height, contained overscroll. Use when the page IS the scroll
 surface (standalone pages); leave off when nested inside a parent

package/components/page/page.yaml

@@ -47,6 +47,7 @@ props:
       `--page-padding` token; `0` removes padding.
     type: string
     default: ""
+    enum: ["", "0", "1", "2", "3", "4", "5", "6", "7", "8"]
     reflect: true
   stickyHeader:
     description: |

package/components/pagination/pagination.a2ui.json

@@ -93,6 +93,7 @@
       "paging"
     ],
     "name": "UIPagination",
+    "parts": {},
     "related": [
       "input",
       "table"

package/components/pagination/pagination.class.js

@@ -211,11 +211,12 @@ export class UIPagination extends UIElement {
         // state comes from button-ui's primary surface matrix (the
         // canonical token chain) \u2014 not a pagination-tier re-impl.
         el.setAttribute('variant', 'primary');
-        el.setAttribute('data-active', '');
+        // aria-current="page" alone carries the active-page state — no
+        // private data-active mirror (gh#1332 Category A; admin-roster's
+        // aria-checked precedent from PR #1438).
         el.setAttribute('aria-current', 'page');
       } else {
         el.setAttribute('variant', this.#restVariant());
-        el.removeAttribute('data-active');
         el.removeAttribute('aria-current');
       }
     }

package/components/pane/pane.a2ui.json

@@ -78,6 +78,7 @@
       "pane"
     ],
     "name": "UIPane",
+    "parts": {},
     "related": [
       "text-area"
     ],
@@ -93,6 +94,11 @@
       {
         "description": "Default, ready for interaction.",
         "name": "idle"
+      },
+      {
+        "description": "The resize handle is mid-drag (pointer down through pointerup/pointercancel).",
+        "attribute": "resizing",
+        "name": "resizing"
       }
     ],
     "status": "stable",

package/components/pane/pane.class.js

@@ -138,7 +138,7 @@ export class UIPane extends UIElement {
   // it, and works under touch. Cursor is locked at the documentElement
   // level so it stays `col-resize` across the whole viewport during drag,
   // not just over the 4px handle. CSS bypasses any width transition while
-  // `[data-resizing]` is set, so resizes track the pointer 1:1.
+  // `[resizing]` is set, so resizes track the pointer 1:1.
 
   #onResizeDown = (e) => {
     if (!e.isPrimary) return;
@@ -147,7 +147,7 @@ export class UIPane extends UIElement {
     this.#startX = e.clientX;
     this.#startW = this.getBoundingClientRect().width;
     this.#pointerId = e.pointerId;
-    this.setAttribute('data-resizing', '');
+    this.setAttribute('resizing', '');
 
     try { this.#resizeEl.setPointerCapture(e.pointerId); } catch {}
     this.#resizeEl.addEventListener('pointermove', this.#onResizeMove);
@@ -173,7 +173,7 @@ export class UIPane extends UIElement {
   #onResizeUp = () => {
     if (!this.#dragging) return;
     this.#dragging = false;
-    this.removeAttribute('data-resizing');
+    this.removeAttribute('resizing');
     try { this.#resizeEl?.releasePointerCapture(this.#pointerId); } catch {}
     this.#pointerId = null;
     this.#resizeEl?.removeEventListener('pointermove', this.#onResizeMove);

package/components/pane/pane.css

@@ -58,7 +58,7 @@
      width updates track 1:1 instead of interpolating through a consumer-
      declared width transition (e.g. editor-shell's collapse animation).
      Mirrors the admin-sidebar pattern. */
-  :scope[data-resizing] {
+  :scope[resizing] {
     user-select: none;
     transition: none;
   }
@@ -211,7 +211,7 @@
     background: var(--pane-resize-fg-hover);
   }
 
-  :scope[data-resizing] [slot="resize"] {
+  :scope[resizing] [slot="resize"] {
     background: var(--pane-resize-fg-active);
   }
 }

package/components/pane/pane.yaml

@@ -71,6 +71,9 @@ slots:
 states:
 - name: idle
   description: Default, ready for interaction.
+- name: resizing
+  description: The resize handle is mid-drag (pointer down through pointerup/pointercancel).
+  attribute: resizing
 traits: []
 tokens: {}
 requiredIcons:

package/components/password-strength/password-strength.a2ui.json

@@ -71,6 +71,7 @@
       "security"
     ],
     "name": "UIPasswordStrength",
+    "parts": {},
     "related": [
       "input",
       "field",

package/components/pipeline-status/pipeline-status.a2ui.json

@@ -76,6 +76,7 @@
       "status"
     ],
     "name": "UIPipelineStatus",
+    "parts": {},
     "related": [
       "AgentTrace",
       "Stepper",

package/components/popover/popover.a2ui.json

@@ -16,16 +16,16 @@
     "component": {
       "const": "Popover"
     },
-    "gap": {
-      "description": "Pixel offset between the anchor and the popover",
-      "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
     },
+    "offset": {
+      "description": "Pixel offset between the anchor and the popover. Renamed from `[gap]` (gh#1335) — a raw-px number can't share a name with the global Scale-grammar `[gap]` attribute (ADR-0053).",
+      "type": "number",
+      "default": 4
+    },
     "open": {
       "description": "Controls visibility via showPopover()/hidePopover()",
       "type": "boolean",
@@ -92,13 +92,14 @@
       "right-click"
     ],
     "name": "UIPopover",
+    "parts": {},
     "related": [
       "button",
       "divider"
     ],
     "slots": {
       "content": {
-        "description": "Popover body — any interactive content. Hoisted to the top-layer via :popover-open when shown. Positioned via the Popover API + CSS Anchor Positioning per [placement] / [gap]; no manual positioning required."
+        "description": "Popover body — any interactive content. Hoisted to the top-layer via :popover-open when shown. Positioned via the Popover API + CSS Anchor Positioning per [placement] / [offset]; no manual positioning required."
       },
       "trigger": {
         "description": "Focusable element that opens the popover when activated. Typically <button-ui>, but any focusable element works (button, a link with href). MUST be focusable for keyboard accessibility — bare <span> or <div> children will not respond to keyboard activation. Positioned at the anchor point per [placement]."

package/components/popover/popover.class.js

@@ -37,7 +37,7 @@ 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 },
+    offset:     { 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' },
@@ -107,7 +107,7 @@ export class UIPopover extends UIElement {
     this.#anchorCleanup?.();
     this.#anchorCleanup = anchorPopover(trigger, content, {
       placement: this.placement,
-      gap: this.gap,
+      gap: this.offset,
       matchWidth: this.matchWidth,
     });
 

package/components/popover/popover.d.ts

@@ -13,8 +13,8 @@
 import { UIElement } from '../../core/element.js';
 
 export class UIPopover extends UIElement {
-  /** Pixel offset between the anchor and the popover */
-  gap: number;
+  /** Pixel offset between the anchor and the popover. Renamed from `[gap]` (gh#1335) — a raw-px number can't share a name with the global Scale-grammar `[gap]` attribute (ADR-0053). */
+  offset: number;
   /** Controls visibility via showPopover()/hidePopover() */
   open: boolean;
   /** Popover placement */

package/components/popover/popover.yaml

@@ -9,8 +9,8 @@ category: container
 version: 1
 description: "Popover using Popover API + CSS Anchor Positioning. Triggers: click, hover, manual."
 props:
-  gap:
-    description: Pixel offset between the anchor and the popover
+  offset:
+    description: Pixel offset between the anchor and the popover. Renamed from `[gap]` (gh#1335) — a raw-px number can't share a name with the global Scale-grammar `[gap]` attribute (ADR-0053).
     type: number
     default: 4
   match-width:
@@ -60,7 +60,7 @@ slots:
     description: >-
       Popover body — any interactive content. Hoisted to the top-layer
       via :popover-open when shown. Positioned via the Popover API +
-      CSS Anchor Positioning per [placement] / [gap]; no manual
+      CSS Anchor Positioning per [placement] / [offset]; no manual
       positioning required.
 states:
   - name: idle
@@ -91,7 +91,7 @@ a2ui:
       width ≈ trigger width). Use `bottom-end` only when the trigger
       sits at the right edge of a container by construction (toolbar
       spillover). Use `top-*` when the trigger sits low in the
-      viewport (statusbar). [gap] (default 4px) sets offset from anchor.
+      viewport (statusbar). [offset] (default 4px) sets offset from anchor.
     - >-
       [trigger="hover"] is for non-essential disclosure only — never
       use it for popovers containing inputs, destructive actions, or

package/components/preview/preview.a2ui.json

@@ -61,6 +61,7 @@
       "codepen"
     ],
     "name": "UIPreview",
+    "parts": {},
     "related": [
       "Code",
       "Card"

package/components/preview/preview.class.js

@@ -171,7 +171,11 @@ export class UIPreview extends UIElement {
     }
   };
 
-  #scheduleFit = () => requestAnimationFrame(this.#fit);
+  // No rAF (SSR shim — gh#1436's render sweep) → nothing to measure; the
+  // client fits on hydrate.
+  #scheduleFit = () => {
+    if (typeof requestAnimationFrame === 'function') requestAnimationFrame(this.#fit);
+  };
 
   #observeFit() {
     this.#scheduleFit();