@adia-ai/web-components 0.8.40 → 0.8.42

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

@@ -21,6 +21,16 @@
     "component": {
       "const": "Pane"
     },
+    "edge": {
+      "description": "Opts a pane into horizontal-sibling chrome: suppresses the default\nfour-sided border and moves the resize grabber to the inner edge\n(right edge for `leading`, left edge for `trailing`). Also flips the\nresize-drag direction so `trailing` panes grow when dragged leftward.\nUnset keeps the pane-intrinsic chrome (full border, right-edge\ngrabber when resizable). Canonical spelling (ADR-0063, gh#1563)\nreplacing `side`.\n",
+      "type": "string",
+      "enum": [
+        "",
+        "leading",
+        "trailing"
+      ],
+      "default": ""
+    },
     "maxWidth": {
       "description": "Component property: maxWidth.",
       "type": "number",
@@ -37,7 +47,7 @@
       "default": false
     },
     "side": {
-      "description": "Opts a pane into horizontal-sibling chrome: suppresses the default\nfour-sided border and moves the resize grabber to the inner edge\n(right edge for `leading`, left edge for `trailing`). Also flips the\nresize-drag direction so `trailing` panes grow when dragged leftward.\nUnset keeps the pane-intrinsic chrome (full border, right-edge\ngrabber when resizable).\n",
+      "description": "DEPRECATED (ADR-0063, gh#1563) — use `edge` instead. Same type/default/enum; kept working as a dual-read compat shim (one-time console.warn when it's the name that resolves). Removed in 0.9.0.",
       "type": "string",
       "enum": [
         "",
@@ -78,6 +88,7 @@
       "pane"
     ],
     "name": "UIPane",
+    "parts": {},
     "related": [
       "text-area"
     ],
@@ -93,6 +104,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

@@ -32,12 +32,13 @@
  *   resizable    — boolean, enables drag-to-resize (width)
  *   min-width    — minimum width when resizing (default: 200)
  *   max-width    — maximum width when resizing (default: 600)
- *   side         — 'leading' | 'trailing' | '' (default). When set, the
+ *   edge         — 'leading' | 'trailing' | '' (default). When set, the
  *                  pane is treated as a horizontal sibling: the default
  *                  four-sided border is suppressed, only the inner-edge
  *                  border is drawn, the resize grabber moves to that
  *                  inner edge, and the resize-drag direction flips so
- *                  trailing panes grow when dragged leftward.
+ *                  trailing panes grow when dragged leftward. `side` is a
+ *                  deprecated dual-read alias (ADR-0063, gh#1563).
  *
  * JS API:
  *   pane.collapsed = true/false
@@ -58,11 +59,20 @@ export class UIPane extends UIElement {
     resizable:  { type: Boolean, default: false, reflect: true },
     minWidth:   { type: Number,  default: 200, attribute: 'min-width', reflect: true },
     maxWidth:   { type: Number,  default: 9999, attribute: 'max-width', reflect: true },
+    // ADR-0063 (gh#1563) — `side` is DEPRECATED; `edge` is the canonical
+    // spelling (same type/default/enum). `side` stays declared (dual-read
+    // compat, 0.8.42); `#resolveEdge()` (called from connected()) mirrors
+    // an old-only value onto `edge` + warns once. Internal usage below
+    // reads `edge` exclusively.
     side:       { type: String,  default: '', reflect: true },
+    edge:       { type: String,  default: '', reflect: true },
   };
 
   static template = () => null;
 
+  // ADR-0063 (gh#1563) one-shot-per-class deprecation warn for [side].
+  static #warnedSide = false;
+
   #resizeEl = null;
   #dragging = false;
   #startX = 0;
@@ -72,6 +82,25 @@ export class UIPane extends UIElement {
   #bound = false;
 
   connected() {
+    // ADR-0063 (gh#1563) compat shim — resolve BEFORE the first render so
+    // there's no wrong-then-right flash. New-name precedence: [edge] wins
+    // outright when present; only fall back to (and mirror) [side] when
+    // [edge] is absent from markup. `edge` defaults `''` (not a
+    // true-default Boolean), so a live hasAttribute() check here is
+    // reliable — no gh#961 self-stamp interference (see chart-legend.class.js
+    // for that failure mode with a true-default Boolean).
+    if (!this.hasAttribute('edge') && this.hasAttribute('side')) {
+      this.edge = this.side;
+      if (!UIPane.#warnedSide) {
+        UIPane.#warnedSide = true;
+        // eslint-disable-next-line no-console
+        console.warn(
+          '[AdiaUI] <pane-ui [side]> is deprecated — use [edge] instead ' +
+          '(ADR-0063, gh#1563). Kept working as-is; no behavior change.',
+        );
+      }
+    }
+
     if (!this.#bound) {
       this.#bound = true;
 
@@ -138,7 +167,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 +176,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);
@@ -164,7 +193,7 @@ export class UIPane extends UIElement {
     // is anchored on the RIGHT side of its flex row — dragging leftward
     // should GROW the pane (grabber moves further left = more width),
     // not shrink it. Negate dx in that case.
-    const sign = this.side === 'trailing' ? -1 : 1;
+    const sign = this.edge === 'trailing' ? -1 : 1;
     const dx = (e.clientX - this.#startX) * sign;
     const w = Math.max(this.minWidth, Math.min(this.maxWidth, this.#startW + dx));
     this.style.width = `${w}px`;
@@ -173,7 +202,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,25 +58,28 @@
      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;
   }
 
-  /* Side-aware border treatment.
+  /* Edge-aware border treatment. ADR-0063 (gh#1563): `[edge]` is the
+     canonical attribute — pane.class.js's connected() mirrors an
+     old-only `[side]` value onto `[edge]` before the first render, so
+     selecting on `[edge=...]` alone covers both spellings.
      `leading`  — pane sits at the leading edge of a horizontal row, so
                   the only visual separator it needs is on its trailing
                   edge (right in LTR).
      `trailing` — mirror: only a leading-edge border (left in LTR).
-     Default (no side attr) keeps the full 4-sided border. */
-  :scope[side="leading"],
-  :scope[side="trailing"] {
+     Default (no edge attr) keeps the full 4-sided border. */
+  :scope[edge="leading"],
+  :scope[edge="trailing"] {
     border: none;
   }
-  :scope[side="leading"] {
+  :scope[edge="leading"] {
     border-inline-end: 1px solid var(--pane-border);
   }
-  :scope[side="trailing"] {
+  :scope[edge="trailing"] {
     border-inline-start: 1px solid var(--pane-border);
   }
 
@@ -184,11 +187,13 @@
   }
 
   /* ── Resize handle ──
-     Default (no side) positions the grabber on the right edge. When
-     `side="trailing"` is set, flip the grabber to the left edge so it
+     Default (no edge) positions the grabber on the right edge. When
+     `edge="trailing"` is set, flip the grabber to the left edge so it
      sits on the pane's "inner" side (where it meets the sibling
      content/pane in a horizontal row). `inset-inline-*` lets the rules
-     stay LTR/RTL-safe. */
+     stay LTR/RTL-safe. `side="trailing"` is a deprecated dual-read alias
+     (ADR-0063, gh#1563) — pane.class.js's connected() mirrors it onto
+     `[edge]` before the first render, so this selector alone covers both. */
   [slot="resize"] {
     position: absolute;
     top: 0;
@@ -202,7 +207,7 @@
     z-index: 1;
   }
 
-  :scope[side="trailing"] > [slot="resize"] {
+  :scope[edge="trailing"] > [slot="resize"] {
     inset-inline-end: auto;
     inset-inline-start: 0;
   }
@@ -211,7 +216,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.d.ts

@@ -23,19 +23,22 @@ export type PaneToggleEvent = CustomEvent<unknown>;
 export class UIPane extends UIElement {
   /** Component property: collapsed. */
   collapsed: boolean;
-  /** Component property: maxWidth. */
-  maxWidth: number;
-  /** Component property: minWidth. */
-  minWidth: number;
-  /** Component property: resizable. */
-  resizable: boolean;
   /** Opts a pane into horizontal-sibling chrome: suppresses the default
 four-sided border and moves the resize grabber to the inner edge
 (right edge for `leading`, left edge for `trailing`). Also flips the
 resize-drag direction so `trailing` panes grow when dragged leftward.
 Unset keeps the pane-intrinsic chrome (full border, right-edge
-grabber when resizable).
+grabber when resizable). Canonical spelling (ADR-0063, gh#1563)
+replacing `side`.
  */
+  edge: '' | 'leading' | 'trailing';
+  /** Component property: maxWidth. */
+  maxWidth: number;
+  /** Component property: minWidth. */
+  minWidth: number;
+  /** Component property: resizable. */
+  resizable: boolean;
+  /** DEPRECATED (ADR-0063, gh#1563) — use `edge` instead. Same type/default/enum; kept working as a dual-read compat shim (one-time console.warn when it's the name that resolves). Removed in 0.9.0. */
   side: '' | 'leading' | 'trailing';
 
   addEventListener(type: 'toggle', listener: (ev: PaneToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;

package/components/pane/pane.yaml

@@ -36,6 +36,18 @@ props:
     type: boolean
     default: false
   side:
+    description: >-
+      DEPRECATED (ADR-0063, gh#1563) — use `edge` instead. Same
+      type/default/enum; kept working as a dual-read compat shim (one-time
+      console.warn when it's the name that resolves). Removed in 0.9.0.
+    type: string
+    default: ''
+    enum:
+    - ''
+    - leading
+    - trailing
+    reflect: true
+  edge:
     description: 'Opts a pane into horizontal-sibling chrome: suppresses the default
 
       four-sided border and moves the resize grabber to the inner edge
@@ -46,7 +58,9 @@ props:
 
       Unset keeps the pane-intrinsic chrome (full border, right-edge
 
-      grabber when resizable).
+      grabber when resizable). Canonical spelling (ADR-0063, gh#1563)
+
+      replacing `side`.
 
       '
     type: string
@@ -71,6 +85,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();