@adia-ai/web-components 0.8.40 → 0.8.41

package/components/select/select.yaml

@@ -147,7 +147,7 @@ props:
       form for narrow triggers (filter bars) where wrapping chips
       would balloon the control.
     type: string
-    default: null
+    default: ''
     reflect: true
   min:
     description: |
@@ -251,17 +251,28 @@ usage: |-
   </script>
   ```
 slots:
-  label:
-    description: Label element above the trigger
-  listbox:
-    description: Popover container for options (role=listbox)
   trigger:
-    description: Button that opens the listbox
+    description: >-
+      Button that opens the listbox. Stamped only if no consumer-authored
+      [slot="trigger"] is already present at first render (adopt-or-stamp) —
+      a genuine light-DOM insertion point.
+parts:
+  listbox:
+    description: >-
+      Popover container for options (role=listbox) — template-owned anatomy
+      part, not a light-DOM insertion point (gh#1454). Its contents are
+      always wiped (`innerHTML = ''`) and rebuilt wholesale from `.options`/
+      parsed `<option>` children on every options render.
   hint:
     description: >-
       Override slot for hint markup richer than the plain [hint] attribute
       string (inline links, code spans). Renders beneath the trigger at
-      body-subtle typography. Mutually exclusive with [hint].
+      body-subtle typography. Mutually exclusive with [hint] per this
+      description, but template-owned in practice (gh#1454): the trigger
+      stamp is an unconditional `this.innerHTML = …` with no
+      capture-before-wipe for `hint` (unlike `leading`/`trailing` on
+      input-ui), so any pre-existing [slot="hint"] content is discarded, not
+      adopted, on first render.
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/skeleton/skeleton.a2ui.json

@@ -16,13 +16,8 @@
     "component": {
       "const": "Skeleton"
     },
-    "height": {
-      "description": "Height of the placeholder.",
-      "type": "string",
-      "default": "1.2em"
-    },
-    "radius": {
-      "description": "Border radius",
+    "cornerRadius": {
+      "description": "Border radius. Renamed from `[radius]` (gh#1335) — a preset-enum can't share a name with the global Enum·preset `[radius]` attribute (`sharp`/`rounded`/`round`), whose vocabulary is unrelated (ADR-0053); mirrors chart-ui's own `[corner-radius]` fix (ADR-0054).",
       "type": "string",
       "enum": [
         "none",
@@ -33,6 +28,11 @@
       ],
       "default": "sm"
     },
+    "height": {
+      "description": "Height of the placeholder.",
+      "type": "string",
+      "default": "1.2em"
+    },
     "static": {
       "description": "When true, suppress the shimmer animation.",
       "type": "boolean",
@@ -68,6 +68,7 @@
       "shimmer"
     ],
     "name": "UISkeleton",
+    "parts": {},
     "related": [
       "EmptyState",
       "Card",

package/components/skeleton/skeleton.class.js

@@ -12,8 +12,8 @@
  */
 
 /**
- * <skeleton-ui width="200px" height="1.2em" radius="sm"></skeleton-ui>
- * <skeleton-ui width="100%" height="3rem" radius="md" static></skeleton-ui>
+ * <skeleton-ui width="200px" height="1.2em" corner-radius="sm"></skeleton-ui>
+ * <skeleton-ui width="100%" height="3rem" corner-radius="md" static></skeleton-ui>
  *
  * Placeholder shimmer for loading states.
  * Purely presentational — no DOM stamping needed.
@@ -21,17 +21,18 @@
  * Props (attributes):
  *   static — suppress the shimmer animation (default: false — shimmer on)
  *
- * Radius: none, sm (default), md, lg, full
+ * Corner radius: none, sm (default), md, lg, full. Renamed from `[radius]`
+ * (gh#1335) — see skeleton.yaml.
  */
 
 import { UIElement } from '../../core/element.js';
 
 export class UISkeleton extends UIElement {
   static properties = {
-    width:  { type: String,  default: '100%',  reflect: true },
-    height: { type: String,  default: '1.2em', reflect: true },
-    radius: { type: String,  default: 'sm',    reflect: true },
-    static: { type: Boolean, default: false,   reflect: true },
+    width:        { type: String,  default: '100%',  reflect: true },
+    height:       { type: String,  default: '1.2em', reflect: true },
+    cornerRadius: { type: String,  default: 'sm',    reflect: true, attribute: 'corner-radius' },
+    static:       { type: Boolean, default: false,   reflect: true },
   };
 
   static template = () => null;

package/components/skeleton/skeleton.css

@@ -18,12 +18,27 @@
     border-radius: var(--skeleton-radius);
   }
 
-  /* ── Radius variants ── */
-  :scope[radius="none"] { --skeleton-radius: 0; }
-  :scope[radius="sm"]   { --skeleton-radius: var(--a-radius-sm); }
-  :scope[radius="md"]   { --skeleton-radius: var(--a-radius-md); }
-  :scope[radius="lg"]   { --skeleton-radius: var(--a-radius-lg); }
-  :scope[radius="full"] { --skeleton-radius: var(--a-radius-full); }
+  /* ── Overlay mode (gh#1362) ──
+     Set by a composing parent (e.g. image-ui) that wants this element
+     positioned absolutely over itself. Declared here, inside skeleton-ui's
+     OWN `@scope` block, so it competes at skeleton-ui's own proximity (0)
+     against the base `:scope { position: relative }` rule above — an
+     equal-proximity tie the higher-specificity attribute selector wins
+     outright. A parent's own `@scope` overlay rule (image-ui's included)
+     can NEVER win this by raising its own specificity: `@scope` proximity
+     is resolved before specificity, and that parent's scoping root is one
+     level further away (proximity 1) — see CSS Cascade & Inheritance L6. */
+  :scope[data-overlay] {
+    position: absolute;
+    inset: 0;
+  }
+
+  /* ── Corner-radius variants (attribute renamed from [radius], gh#1335) ── */
+  :scope[corner-radius="none"] { --skeleton-radius: 0; }
+  :scope[corner-radius="sm"]   { --skeleton-radius: var(--a-radius-sm); }
+  :scope[corner-radius="md"]   { --skeleton-radius: var(--a-radius-md); }
+  :scope[corner-radius="lg"]   { --skeleton-radius: var(--a-radius-lg); }
+  :scope[corner-radius="full"] { --skeleton-radius: var(--a-radius-full); }
 
   /* ── Shimmer animation (default; suppress with [static]) ── */
   :scope:not([static])::after {

package/components/skeleton/skeleton.d.ts

@@ -13,10 +13,10 @@
 import { UIElement } from '../../core/element.js';
 
 export class UISkeleton extends UIElement {
+  /** Border radius. Renamed from `[radius]` (gh#1335) — a preset-enum can't share a name with the global Enum·preset `[radius]` attribute (`sharp`/`rounded`/`round`), whose vocabulary is unrelated (ADR-0053); mirrors chart-ui's own `[corner-radius]` fix (ADR-0054). */
+  cornerRadius: 'none' | 'sm' | 'md' | 'lg' | 'full';
   /** Height of the placeholder. */
   height: string;
-  /** Border radius */
-  radius: 'none' | 'sm' | 'md' | 'lg' | 'full';
   /** When true, suppress the shimmer animation. */
   static: boolean;
   /** Width of the placeholder. */

package/components/skeleton/skeleton.examples.md

@@ -6,10 +6,10 @@
 <skeleton-ui width="100px" height="1em"></skeleton-ui>
 ```
 
-## radius
+## corner-radius
 
 ```html
-<skeleton-ui width="120px" height="2em" radius="none"></skeleton-ui>
+<skeleton-ui width="120px" height="2em" corner-radius="none"></skeleton-ui>
 ```
 
 ## static

package/components/skeleton/skeleton.yaml

@@ -17,10 +17,11 @@ props:
     description: Height of the placeholder.
     type: string
     default: 1.2em
-  radius:
-    description: Border radius
+  cornerRadius:
+    description: Border radius. Renamed from `[radius]` (gh#1335) — a preset-enum can't share a name with the global Enum·preset `[radius]` attribute (`sharp`/`rounded`/`round`), whose vocabulary is unrelated (ADR-0053); mirrors chart-ui's own `[corner-radius]` fix (ADR-0054).
     type: string
     default: sm
+    attribute: corner-radius
     enum:
       - none
       - sm

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

@@ -58,6 +58,7 @@
       "keyboard-navigation"
     ],
     "name": "UISkipNav",
+    "parts": {},
     "related": [
       "visually-hidden"
     ],

package/components/slider/slider.a2ui.json

@@ -126,6 +126,7 @@
       "volume"
     ],
     "name": "UISlider",
+    "parts": {},
     "related": [
       "input",
       "select",
@@ -151,6 +152,11 @@
         "description": "Default, ready for interaction.",
         "name": "idle"
       },
+      {
+        "description": "A thumb is mid-drag (pointer down through pointerup).",
+        "attribute": "dragging",
+        "name": "dragging"
+      },
       {
         "description": "Non-interactive; dimmed.",
         "attribute": "disabled",

package/components/slider/slider.class.js

@@ -317,7 +317,7 @@ export class UISlider extends UIFormElement {
     if (this.disabled) return;
     e.preventDefault();
     this.#dragging = true;
-    this.setAttribute('data-dragging', '');
+    this.setAttribute('dragging', '');
 
     let thumb;
     if (this.dual) {
@@ -343,6 +343,12 @@ export class UISlider extends UIFormElement {
     thumb.setPointerCapture(e.pointerId);
     thumb.addEventListener('pointermove', this.#onPointerMove);
     thumb.addEventListener('pointerup', this.#onPointerUp);
+    // A drag can end without pointerup: touch interruptions (incoming call,
+    // OS gesture steal) fire pointercancel, and losing the capture for any
+    // other reason fires lostpointercapture. Without these, [dragging] and
+    // the move/up listeners stay stuck (gh#1332 review follow-up).
+    thumb.addEventListener('pointercancel', this.#onPointerCancel);
+    thumb.addEventListener('lostpointercapture', this.#onPointerCancel);
   };
 
   #onPointerMove = (e) => {
@@ -357,16 +363,27 @@ export class UISlider extends UIFormElement {
     }
   };
 
+  #onPointerCancel = (e) => {
+    // lostpointercapture also fires after a normal pointerup's
+    // releasePointerCapture — the #dragging guard makes that a no-op.
+    if (!this.#dragging) return;
+    this.#onPointerUp(e);
+  };
+
   #onPointerUp = (e) => {
     this.#dragging = false;
     this.#dragOffset = 0;
-    this.removeAttribute('data-dragging');
+    this.removeAttribute('dragging');
     const thumb = this.dual
       ? (this.#draggingThumb === 'lower' ? this.#thumbLowerEl : this.#thumbUpperEl)
       : this.#thumbEl;
-    thumb?.releasePointerCapture(e.pointerId);
+    // On pointercancel the capture is already gone; releasing a
+    // no-longer-captured pointer throws NotFoundError in some engines.
+    try { thumb?.releasePointerCapture(e.pointerId); } catch { /* already released */ }
     thumb?.removeEventListener('pointermove', this.#onPointerMove);
     thumb?.removeEventListener('pointerup', this.#onPointerUp);
+    thumb?.removeEventListener('pointercancel', this.#onPointerCancel);
+    thumb?.removeEventListener('lostpointercapture', this.#onPointerCancel);
     // Drop the active marker — but only after emitting change, so any
     // mid-drag z-index lift stays painted through the up event.
     thumb?.removeAttribute('data-active');

package/components/slider/slider.css

@@ -264,7 +264,7 @@
 
   /* During drag: kill the left transition so the thumb follows
      the pointer frame-by-frame without CSS interpolation lag. */
-  :scope[data-dragging] [slot="thumb"] {
+  :scope[dragging] [slot="thumb"] {
     transition: transform var(--slider-duration) var(--slider-easing);
   }
 
@@ -332,6 +332,6 @@
     margin-top: var(--slider-hint-mt, var(--a-space-1));
     font-size: var(--slider-hint-size, var(--a-ui-xs));
     color:     var(--slider-hint-fg, var(--a-fg-muted));
-    line-height: var(--slider-hint-lh, 1.4);
+    line-height: var(--slider-hint-lh, var(--a-font-leading-normal));
   }
 }

package/components/slider/slider.yaml

@@ -107,6 +107,9 @@ slots:
 states:
   - name: idle
     description: Default, ready for interaction.
+  - name: dragging
+    description: A thumb is mid-drag (pointer down through pointerup).
+    attribute: dragging
   - name: disabled
     description: Non-interactive; dimmed.
     attribute: disabled

package/components/spinner/spinner.a2ui.json

@@ -112,6 +112,7 @@
       "circular"
     ],
     "name": "UISpinner",
+    "parts": {},
     "related": [
       "Progress",
       "Skeleton",

package/components/stack/stack.a2ui.json

@@ -53,6 +53,7 @@
       "stack"
     ],
     "name": "UIStack",
+    "parts": {},
     "related": [
       "Col",
       "Row",

package/components/stat/stat.a2ui.json

@@ -99,6 +99,7 @@
       "scoreboard"
     ],
     "name": "UIStat",
+    "parts": {},
     "related": [
       "Card",
       "Badge",

package/components/stat/stat.js

@@ -110,12 +110,12 @@ class UIStat extends UIElement {
       // Width 60% / 40% / 2em / 1em chosen to roughly mirror the rendered
       // value+change visual mass without being so wide as to look like text.
       this.#valueEl.textContent = '';
-      this.#valueEl.innerHTML = '<skeleton-ui width="60%" height="2em" radius="sm"></skeleton-ui>';
+      this.#valueEl.innerHTML = '<skeleton-ui width="60%" height="2em" corner-radius="sm"></skeleton-ui>';
       // Skeleton replaces the trend icon + text children wholesale; the
       // non-loading branch below detects the detached refs (parentNode
       // check) and re-inserts them once real data arrives.
       this.#changeEl.textContent = '';
-      this.#changeEl.innerHTML = '<skeleton-ui width="40%" height="1em" radius="sm"></skeleton-ui>';
+      this.#changeEl.innerHTML = '<skeleton-ui width="40%" height="1em" corner-radius="sm"></skeleton-ui>';
       this.#changeEl.hidden = false;
       // Icon stays as-is (metadata, not data).
       if (this.icon) {

package/components/step-progress/step-progress.a2ui.json

@@ -68,6 +68,7 @@
       "indicator"
     ],
     "name": "UIStepProgress",
+    "parts": {},
     "related": [
       "progress-ui",
       "stepper-ui"

package/components/step-progress/step-progress.yaml

@@ -51,7 +51,7 @@ a2ui:
       reason: 'Minimal stepper visualization.'
     - rule: 'Different from <stepper-ui> (labeled, expanded) — step-progress is dense and label-free.'
       reason: 'Density boundary.'
-    - rule: 'For multi-task progress bars (multiple labeled rows) use <progress-row-ui> stack.'
+    - rule: 'For multi-task progress bars (multiple labeled rows) use a stack of <progress-ui> with `label` set (absorbed the row layout from the now-deprecated progress-row-ui).'
       reason: 'Different layout.'
 anti_patterns: []
 

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

@@ -53,6 +53,9 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
+    "allowedParents": [
+      "Stepper"
+    ],
     "anti_patterns": [],
     "category": "navigation",
     "composes": [],
@@ -66,6 +69,7 @@
       "step-row"
     ],
     "name": "UIStepperItem",
+    "parts": {},
     "related": [
       "Stepper",
       "Timeline",
@@ -73,13 +77,13 @@
     ],
     "slots": {
       "description": {
-        "description": "Custom description content; falls through to `[description]` prop if not slotted."
+        "description": "Custom secondary-line content; falls through to [description] prop if not slotted. Same adopt-or-stamp guard as `label` (gh#1462)."
       },
       "icon": {
-        "description": "Override the step-status glyph with a custom slotted element. By default the step renders a numeral / check / x indicator based on [status]; slot an `<icon-ui>` or image to customize."
+        "description": "Override the step-status glyph with a custom slotted element (custom icon-ui, image). Mutually exclusive with the [icon] attribute — a consumer-authored slot child wins and is never renamed or removed by render() (gh#1462 adopt-or-stamp guard)."
       },
       "label": {
-        "description": "Custom label content; falls through to `[text]` prop if not slotted."
+        "description": "Custom label content; falls through to [text] prop if not slotted. Adopt-or-stamp guarded (gh#1462): render() only writes into the component-stamped fallback span — a consumer-authored `[slot=\"label\"]` child is adopted as source of truth and never overwritten."
       }
     },
     "states": [],

package/components/stepper/stepper-item.yaml

@@ -50,14 +50,22 @@ props:
     default: false
 slots:
   label:
-    description: Custom label content; falls through to `[text]` prop if not slotted.
+    description: >-
+      Custom label content; falls through to [text] prop if not slotted.
+      Adopt-or-stamp guarded (gh#1462): render() only writes into the
+      component-stamped fallback span — a consumer-authored
+      `[slot="label"]` child is adopted as source of truth and never
+      overwritten.
   description:
-    description: Custom description content; falls through to `[description]` prop if not slotted.
+    description: >-
+      Custom secondary-line content; falls through to [description] prop
+      if not slotted. Same adopt-or-stamp guard as `label` (gh#1462).
   icon:
     description: >-
-      Override the step-status glyph with a custom slotted element. By default
-      the step renders a numeral / check / x indicator based on [status];
-      slot an `<icon-ui>` or image to customize.
+      Override the step-status glyph with a custom slotted element (custom
+      icon-ui, image). Mutually exclusive with the [icon] attribute — a
+      consumer-authored slot child wins and is never renamed or removed by
+      render() (gh#1462 adopt-or-stamp guard).
 
 keywords:
   - stepper-item
@@ -75,6 +83,8 @@ related:
   - StepProgress
 
 a2ui:
+  allowedParents:
+    - Stepper
   rules:
     - rule: 'Child of <stepper-ui> — one numbered step with label + complete/current/upcoming state.'
       reason: 'Cluster contract.'

package/components/stepper/stepper.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Stepper.json",
   "title": "Stepper",
-  "description": "Wizard / process stepper — parent step index drives numbered children's complete/current/upcoming states automatically. Renders horizontally as a labeled step bar with connectors. Use for multi-step forms, onboarding, or pipelines; for read-only event history use <timeline-ui> instead. Add [interactive] to opt into click-to-navigate + roving- tabindex keyboard (arrow keys / Home / End) — the host still owns whether navigation is permitted: listen for the cancelable [step-request] event and call preventDefault() to veto a step before it lands, or set [disabled] on a stepper-item-ui to phase-gate it out of reach entirely.",
+  "description": "Wizard / process stepper — parent step index drives numbered children's complete/current/upcoming states automatically. Renders horizontally as a labeled step bar with connectors. Use for multi-step forms, onboarding, or pipelines; for read-only event history use <timeline-ui> instead. Add [interactive] to opt into click-to-navigate + roving-tabindex keyboard (arrow keys / Home / End) — the host still owns whether navigation is permitted: listen for the cancelable [step-request] event and call preventDefault() to veto a step before it lands, or set [disabled] on a stepper-item-ui to phase-gate it out of reach entirely.",
   "type": "object",
   "allOf": [
     {
@@ -37,6 +37,9 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
+    "allowedChildren": [
+      "StepperItem"
+    ],
     "anti_patterns": [],
     "category": "navigation",
     "composes": [
@@ -89,6 +92,7 @@
       "click-to-navigate"
     ],
     "name": "UIStepper",
+    "parts": {},
     "related": [
       "timeline-ui",
       "progress-ui"

package/components/stepper/stepper.class.js

@@ -108,7 +108,9 @@ export class UIStepper extends UIElement {
   connected() {
     this.addEventListener('click', this.#handleClick);
     this.addEventListener('keydown', this.#handleKeydown);
-    if (!this.#childObserver) {
+    // Guarded like the other Observer sites (gh#285 §1 pattern) — SSR shims
+    // have no MutationObserver; teardown already uses `?.disconnect()`.
+    if (!this.#childObserver && typeof MutationObserver !== 'undefined') {
       this.#childObserver = new MutationObserver(this.#onChildMutation);
       this.#childObserver.observe(this, {
         childList: true,
@@ -293,31 +295,44 @@ export class UIStepperItem extends UIElement {
 
   static template = () => null;
 
+  // Adopt-or-stamp (gh#1462): a fallback child stamped from a prop is
+  // marked, and render() only ever writes into marked elements — a
+  // consumer-authored slot="label"/"description"/"icon" child is adopted
+  // as source of truth and never overwritten or removed. Mirrors
+  // action-item-ui/menu-item-ui's stamp-marking (PR #1429).
+  #stampMark(el) { el.dataset.stepperItemStamped = '1'; return el; }
+  #wasStamped(el) { return el?.dataset?.stepperItemStamped === '1'; }
+
   connected() {
-    if (!this.querySelector('[slot="label"]')) {
-      this.innerHTML = `
-        <span slot="label"></span>
-        <span slot="description"></span>
-      `;
+    // Each slot's adopt-or-stamp decision is independent per slot key —
+    // an authored label must not suppress the prop-driven description
+    // fallback (mirrors action-item-ui's per-part stamping, PR #1429).
+    for (const name of ['label', 'description']) {
+      if (this.querySelector(`[slot="${name}"]`)) continue;
+      const span = this.#stampMark(document.createElement('span'));
+      span.setAttribute('slot', name);
+      this.appendChild(span);
     }
   }
 
   render() {
     const label = this.querySelector('[slot="label"]');
     const desc = this.querySelector('[slot="description"]');
-    if (label) label.textContent = this.text;
-    if (desc) desc.textContent = this.description;
+    if (this.#wasStamped(label)) label.textContent = this.text;
+    if (this.#wasStamped(desc)) desc.textContent = this.description;
 
+    const iconEl = this.querySelector('[slot="icon"]');
     if (this.icon) {
-      let iconEl = this.querySelector('[slot="icon"]');
-      if (!iconEl) {
-        iconEl = document.createElement('icon-ui');
-        iconEl.setAttribute('slot', 'icon');
-        this.prepend(iconEl);
+      if (iconEl) {
+        if (this.#wasStamped(iconEl)) iconEl.setAttribute('name', this.icon);
+      } else {
+        const el = this.#stampMark(document.createElement('icon-ui'));
+        el.setAttribute('slot', 'icon');
+        el.setAttribute('name', this.icon);
+        this.prepend(el);
       }
-      iconEl.setAttribute('name', this.icon);
-    } else {
-      this.querySelector('[slot="icon"]')?.remove();
+    } else if (this.#wasStamped(iconEl)) {
+      iconEl.remove();
     }
   }
 }

package/components/stepper/stepper.d.ts

@@ -1,5 +1,5 @@
 /**
- * `<stepper-ui>` — Wizard / process stepper — parent step index drives numbered children's complete/current/upcoming states automatically. Renders horizontally as a labeled step bar with connectors. Use for multi-step forms, onboarding, or pipelines; for read-only event history use <timeline-ui> instead. Add [interactive] to opt into click-to-navigate + roving- tabindex keyboard (arrow keys / Home / End) — the host still owns whether navigation is permitted: listen for the cancelable [step-request] event and call preventDefault() to veto a step before it lands, or set [disabled] on a stepper-item-ui to phase-gate it out of reach entirely.
+ * `<stepper-ui>` — Wizard / process stepper — parent step index drives numbered children's complete/current/upcoming states automatically. Renders horizontally as a labeled step bar with connectors. Use for multi-step forms, onboarding, or pipelines; for read-only event history use <timeline-ui> instead. Add [interactive] to opt into click-to-navigate + roving-tabindex keyboard (arrow keys / Home / End) — the host still owns whether navigation is permitted: listen for the cancelable [step-request] event and call preventDefault() to veto a step before it lands, or set [disabled] on a stepper-item-ui to phase-gate it out of reach entirely.
  *
  * @see https://ui-kit.exe.xyz/site/components/stepper
  *

package/components/stepper/stepper.yaml

@@ -12,8 +12,8 @@ description: >-
   complete/current/upcoming states automatically. Renders horizontally as
   a labeled step bar with connectors. Use for multi-step forms,
   onboarding, or pipelines; for read-only event history use <timeline-ui>
-  instead. Add [interactive] to opt into click-to-navigate + roving-
-  tabindex keyboard (arrow keys / Home / End) — the host still owns
+  instead. Add [interactive] to opt into click-to-navigate + roving-tabindex
+  keyboard (arrow keys / Home / End) — the host still owns
   whether navigation is permitted: listen for the cancelable
   [step-request] event and call preventDefault() to veto a step before
   it lands, or set [disabled] on a stepper-item-ui to phase-gate it
@@ -73,6 +73,8 @@ states:
 traits: []
 tokens: {}
 a2ui:
+  allowedChildren:
+    - StepperItem
   rules:
     - rule: 'Hosts <stepper-item-ui> children with a parent active-index driving complete/current/upcoming states.'
       reason: 'Process visualization cluster.'

package/components/stream/stream.a2ui.json

@@ -68,6 +68,7 @@
       "stream"
     ],
     "name": "UIStream",
+    "parts": {},
     "related": [
       "ChatThreadUI",
       "Text",

package/components/swatch/swatch.a2ui.json

@@ -145,6 +145,7 @@
       "token"
     ],
     "name": "UISwatch",
+    "parts": {},
     "related": [
       "chart-legend-ui",
       "tag-ui"

package/components/swiper/swiper.a2ui.json

@@ -141,6 +141,7 @@
       "swiper"
     ],
     "name": "UISwiper",
+    "parts": {},
     "related": [
       "image-gallery",
       "hero-section",

package/components/swiper/swiper.class.js

@@ -196,7 +196,11 @@ export class UISwiper extends UIElement {
 
   play() {
     this.pause();
-    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    // Feature-detect (gh#1430): SSR shims have no `matchMedia`, so treat "can't
+    // read the motion preference" like "reduce" — no viewport to animate, and
+    // a server-side setInterval would only leak.
+    if (typeof matchMedia !== 'function' ||
+        matchMedia('(prefers-reduced-motion: reduce)').matches) return;
 
     this.#timer = setInterval(() => {
       const lastPage = this.#getPageCount() - 1;