@adia-ai/web-components 0.8.39 → 0.8.41

package/components/progress-row/progress-row.yaml

@@ -3,12 +3,19 @@
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIProgressRow
 tag: progress-row-ui
-status: stable
+status: deprecated
 component: ProgressRow
-category: data
+category: feedback
 version: 1
-description: Inline labeled progress row with label, progress bar, and meta text. Used for storage
-  quotas, capacity breakdowns, usage indicators.
+description: >-
+  DEPRECATED (gh#1363 C4) — absorbed into <progress-ui>: set
+  `label` (and optional `meta`) directly on <progress-ui> instead, which
+  activates the identical row layout in place. progress-row-ui keeps
+  working (still composes <progress-ui> internally, unchanged behavior)
+  for existing back-compat markup, but is no longer taught or generated
+  for new work. Was: inline labeled progress row with label, progress
+  bar, and meta text — storage quotas, capacity breakdowns, usage
+  indicators.
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
 composes:
@@ -48,38 +55,23 @@ traits: []
 tokens: {}
 a2ui:
   rules:
-    - rule: 'Labeled progress row — composes a label + <progress-ui> + optional value display in one horizontal row.'
-      reason: 'Common form for task-list progress.'
-    - rule: 'For standalone progress bars without a row context use <progress-ui> directly.'
-      reason: 'Composition boundary.'
-    - rule: 'Inside lists (multiple tasks with progress) stack multiple progress-rows in a <col-ui>.'
-      reason: 'Composition pattern.'
-anti_patterns: []
-examples:
-  - name: basic-progress-row
-    description: Basic ProgressRow usage
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Card",
-          "children": [
-            "sec"
-          ]
-        },
-        {
-          "id": "sec",
-          "component": "Section",
-          "children": [
-            "comp"
-          ]
-        },
-        {
-          "id": "comp",
-          "component": "ProgressRow",
-          "label": "Example ProgressRow"
-        }
-      ]
+    - rule: 'DEPRECATED — do not generate ProgressRow. Set `label` (and optional `meta`) directly on <progress-ui> instead; label present activates the identical row layout.'
+      reason: 'Absorbed progress-row-ui''s row layout into progress-ui (gh#1363 C4); this component is now a back-compat alias only.'
+    - rule: 'For standalone progress bars without a row context use <progress-ui> directly (no `label`).'
+      reason: 'Composition boundary — unchanged by the absorption.'
+anti_patterns:
+  - wrong: |
+      {"component": "ProgressRow", "label": "CPU", "value": 92}
+    why: |
+      ProgressRow is deprecated — its row layout was absorbed
+      into Progress directly.
+    fix: |
+      {"component": "Progress", "label": "CPU", "value": 92}
+# Deliberately empty (gh#1363 C4) — deprecated components carry no
+# A2UI examples: the catalog/corpus must never teach `"component":
+# "ProgressRow"` as a generation target. See progress.yaml's own examples
+# for the equivalent (and current) label+row shape.
+examples: []
 keywords:
   - progressrow
   - progress-row

package/components/qr-code/qr-code.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/QRCode.json",
   "title": "QRCode",
-  "description": "Inline QR code generator — renders a scannable code as inline SVG.\nTwo modes:\n\n**A. Auto-encode (default).** Set `[value]` to a string (URL, plain\ntext, share link, 2FA secret). The component encodes the data with\nthe built-in zero-deps QR encoder (byte mode, ECC level configurable,\nversions 1–10 up to ~150 byte chars) and renders an SVG.\n\n**B. Bring-your-own matrix.** Set `[matrix]` to a JSON string of a\n2-D 0/1 array (`[[1,0,1,...],[...],...]`). The component renders the\nsupplied matrix directly without invoking its own encoder. Use this\nwhen you need versions 11–40, kanji/alphanumeric mode, or any\nencoder feature beyond the built-in. When both `[value]` and\n`[matrix]` are set, the matrix wins (BYO override).\n\nOutput is a single `<svg>` with `viewBox=\"0 0 N N\"`. Crisp-edges\nrendering preserves the scannable cell boundaries at any size.\nSizing is controlled by the `[size]` prop (host CSS-pixel dimension);\ninternal cell size is computed from `size / (matrix-size + 2 ·\nmargin)`. ARIA: `role=\"img\"` with `aria-label` (default \"QR code\"\nor the `[label]` prop).\n",
+  "description": "Inline QR code generator — renders a scannable code as inline SVG.\nTwo modes:\n\n**A. Auto-encode (default).** Set `[value]` to a string (URL, plain\ntext, share link, 2FA secret). The component encodes the data with\nthe built-in zero-deps QR encoder (byte mode, ECC level configurable,\nversions 1–10 up to ~150 byte chars) and renders an SVG.\n\n**B. Bring-your-own matrix.** Set `[matrix]` to a JSON string of a\n2-D 0/1 array (`[[1,0,1,...],[...],...]`). The component renders the\nsupplied matrix directly without invoking its own encoder. Use this\nwhen you need versions 11–40, kanji/alphanumeric mode, or any\nencoder feature beyond the built-in. When both `[value]` and\n`[matrix]` are set, the matrix wins (BYO override).\n\nOutput is a single `<svg>` with `viewBox=\"0 0 N N\"`. Crisp-edges\nrendering preserves the scannable cell boundaries at any size.\nSizing is controlled by the `[size]` prop (host CSS-pixel dimension);\ninternal cell size is computed from `size / (matrix-size + 2 ·\nquiet-zone)`. ARIA: `role=\"img\"` with `aria-label` (default \"QR code\"\nor the `[label]` prop).\n",
   "type": "object",
   "allOf": [
     {
@@ -42,18 +42,18 @@
       "type": "string",
       "default": "QR code"
     },
-    "margin": {
-      "description": "Quiet zone in cells around the QR pattern. QR spec requires a\nminimum 4-cell margin for reliable scanning; smaller values may\nnot scan on some devices. Default `4`.\n",
-      "type": "number",
-      "default": 4
-    },
     "matrix": {
       "description": "BYO precomputed bit matrix as JSON — a 2-D array of 0/1\n(`[[1,0,...],[0,1,...],...]`). When set, the built-in encoder is\nbypassed and this matrix renders directly. Useful for QR variants\nthe built-in doesn't support (versions 11–40, alphanumeric mode,\nkanji, etc.) — bring your own encoder, pass the matrix here.\n",
       "type": "string",
       "default": ""
     },
+    "quietZone": {
+      "description": "Quiet zone in cells around the QR pattern. QR spec requires a\nminimum 4-cell quiet zone for reliable scanning; smaller values\nmay not scan on some devices. Default `4`. (Renamed from\n`[margin]` — that name collided with the framework's global\n`[margin]` Scale attribute; `margin` on `qr-code-ui` now means\nthe global spacing attribute, per ADR-0053.)\n",
+      "type": "number",
+      "default": 4
+    },
     "size": {
-      "description": "Host display size in CSS pixels (width and height; the SVG is\nalways square). Default 200. Internal cell size is computed from\nthis divided by `matrix-size + 2·margin`.\n",
+      "description": "Host display size in CSS pixels (width and height; the SVG is\nalways square). Default 200. Internal cell size is computed from\nthis divided by `matrix-size + 2·quiet-zone`.\n",
       "type": "number",
       "default": 200
     },
@@ -71,13 +71,13 @@
     "anti_patterns": [
       {
         "fix": "Drop the ECC level (lower L gives more capacity for the same\nversion), OR shorten the URL (use a URL shortener), OR encode\nwith a BYO encoder library + pass the [matrix]:\n`<qr-code-ui matrix=\"[[1,0,1,...],...]\"></qr-code-ui>`\n",
-        "why": "Built-in encoder covers versions 1–10. Data beyond v10 capacity\nthrows + renders empty + sets [data-error]. Console warns with\nthe byte length so consumers can diagnose.\n",
+        "why": "Built-in encoder covers versions 1–10. Data beyond v10 capacity\nis caught internally: the component renders empty and sets [error]\n(no exception reaches the consumer). Console warns with the value's\nUTF-16 code-unit length (String.length, not UTF-8 bytes) so\nconsumers can diagnose.\n",
         "wrong": "<qr-code-ui value=\"https://very.long.url.that.exceeds.150.bytes.of.utf8.encoded.length...\"></qr-code-ui>\n"
       },
       {
-        "fix": "<qr-code-ui value=\"...\" margin=\"4\"></qr-code-ui>\n",
-        "why": "Zero margin breaks scanning. QR spec requires a 4-cell quiet\nzone for reliable detection.\n",
-        "wrong": "<qr-code-ui value=\"...\" margin=\"0\"></qr-code-ui>\n"
+        "fix": "<qr-code-ui value=\"...\" quiet-zone=\"4\"></qr-code-ui>\n",
+        "why": "Zero quiet zone breaks scanning. QR spec requires a 4-cell quiet\nzone for reliable detection.\n",
+        "wrong": "<qr-code-ui value=\"...\" quiet-zone=\"0\"></qr-code-ui>\n"
       }
     ],
     "category": "display",
@@ -110,6 +110,7 @@
       "share-link"
     ],
     "name": "UIQRCode",
+    "parts": {},
     "related": [
       "link",
       "share"
@@ -122,7 +123,7 @@
       },
       {
         "description": "Auto-encode failed (data too long for v1–10 at requested ECC). Renders an empty placeholder; logs a console warning. Switch to a BYO matrix from an external encoder, or downgrade the ECC level.",
-        "attribute": "data-error",
+        "attribute": "error",
         "name": "error"
       }
     ],

package/components/qr-code/qr-code.class.js

@@ -33,7 +33,7 @@ export class UIQRCode extends UIElement {
     matrix:          { type: String, default: '',       reflect: true },
     size:            { type: Number, default: 200,      reflect: true },
     errorCorrection: { type: String, default: 'M',      reflect: true, attribute: 'error-correction' },
-    margin:          { type: Number, default: 4,        reflect: true },
+    quietZone:       { type: Number, default: 4,        reflect: true, attribute: 'quiet-zone' },
     color:           { type: String, default: '',       reflect: true },
     background:      { type: String, default: '',       reflect: true },
     label:           { type: String, default: 'QR code', reflect: true },
@@ -62,19 +62,19 @@ export class UIQRCode extends UIElement {
     // BYO matrix wins
     const byo = this.#parseMatrix(this.matrix);
     if (byo) {
-      this.removeAttribute('data-error');
+      this.removeAttribute('error');
       return byo;
     }
     if (!this.value) {
-      this.removeAttribute('data-error');
+      this.removeAttribute('error');
       return null;
     }
     try {
       const result = encodeQR(this.value, { errorCorrection: this.errorCorrection || 'M' });
-      this.removeAttribute('data-error');
+      this.removeAttribute('error');
       return result.matrix;
     } catch (e) {
-      this.setAttribute('data-error', '');
+      this.setAttribute('error', '');
       // eslint-disable-next-line no-console
       console.warn(`[qr-code-ui] encode failed for value (${this.value?.length || 0} chars at ECC=${this.errorCorrection}): ${e.message}. Lower ECC, shorten input, or supply a precomputed [matrix].`);
       return null;
@@ -91,7 +91,7 @@ export class UIQRCode extends UIElement {
     // Cheap idempotence: compute a signature of inputs, skip re-render
     // if nothing changed (encoding is non-trivial — version selection +
     // RS ECC + 8 mask evaluations).
-    const sig = `${this.value}|${this.matrix}|${this.size}|${this.errorCorrection}|${this.margin}|${this.color}|${this.background}`;
+    const sig = `${this.value}|${this.matrix}|${this.size}|${this.errorCorrection}|${this.quietZone}|${this.color}|${this.background}`;
     if (sig === this.#lastSig && this.querySelector('svg')) return;
     this.#lastSig = sig;
 
@@ -106,7 +106,7 @@ export class UIQRCode extends UIElement {
 
     const svg = matrixToSVG(matrix, {
       cellSize: 8, // arbitrary internal unit; host CSS controls actual size via [size]
-      margin: Number.isFinite(this.margin) ? this.margin : 4,
+      margin: Number.isFinite(this.quietZone) ? this.quietZone : 4,
       // Hardcoded fallback to black-on-white — the scannable convention.
       // Theme-aware `currentColor` produces light-on-dark in dark mode,
       // which most phone cameras (iPhone Camera in particular) refuse to

package/components/qr-code/qr-code.css

@@ -35,7 +35,7 @@
      the configured ECC. Render an empty placeholder; the warning
      went to console. Visually: a dashed outline at the requested
      size so the layout doesn't collapse silently. */
-  :scope[data-error] {
+  :scope[error] {
     border: 1px dashed var(--a-border-strong);
     border-radius: var(--a-radius-sm);
     min-width: 4em;

package/components/qr-code/qr-code.d.ts

@@ -18,7 +18,7 @@ Output is a single `<svg>` with `viewBox="0 0 N N"`. Crisp-edges
 rendering preserves the scannable cell boundaries at any size.
 Sizing is controlled by the `[size]` prop (host CSS-pixel dimension);
 internal cell size is computed from `size / (matrix-size + 2 ·
-margin)`. ARIA: `role="img"` with `aria-label` (default "QR code"
+quiet-zone)`. ARIA: `role="img"` with `aria-label` (default "QR code"
 or the `[label]` prop).
 
  *
@@ -58,11 +58,6 @@ from more damage at the cost of QR-version size growth.
 better AT context (e.g. "Share link QR code", "2FA setup QR").
  */
   label: string;
-  /** Quiet zone in cells around the QR pattern. QR spec requires a
-minimum 4-cell margin for reliable scanning; smaller values may
-not scan on some devices. Default `4`.
- */
-  margin: number;
   /** BYO precomputed bit matrix as JSON — a 2-D array of 0/1
 (`[[1,0,...],[0,1,...],...]`). When set, the built-in encoder is
 bypassed and this matrix renders directly. Useful for QR variants
@@ -70,9 +65,17 @@ the built-in doesn't support (versions 11–40, alphanumeric mode,
 kanji, etc.) — bring your own encoder, pass the matrix here.
  */
   matrix: string;
+  /** Quiet zone in cells around the QR pattern. QR spec requires a
+minimum 4-cell quiet zone for reliable scanning; smaller values
+may not scan on some devices. Default `4`. (Renamed from
+`[margin]` — that name collided with the framework's global
+`[margin]` Scale attribute; `margin` on `qr-code-ui` now means
+the global spacing attribute, per ADR-0053.)
+ */
+  quietZone: number;
   /** Host display size in CSS pixels (width and height; the SVG is
 always square). Default 200. Internal cell size is computed from
-this divided by `matrix-size + 2·margin`.
+this divided by `matrix-size + 2·quiet-zone`.
  */
   size: number;
   /** The string to encode (URL / text / share link / 2FA seed). When

package/components/qr-code/qr-code.yaml

@@ -25,7 +25,7 @@ description: |
   rendering preserves the scannable cell boundaries at any size.
   Sizing is controlled by the `[size]` prop (host CSS-pixel dimension);
   internal cell size is computed from `size / (matrix-size + 2 ·
-  margin)`. ARIA: `role="img"` with `aria-label` (default "QR code"
+  quiet-zone)`. ARIA: `role="img"` with `aria-label` (default "QR code"
   or the `[label]` prop).
 props:
   value:
@@ -50,7 +50,7 @@ props:
     description: |
       Host display size in CSS pixels (width and height; the SVG is
       always square). Default 200. Internal cell size is computed from
-      this divided by `matrix-size + 2·margin`.
+      this divided by `matrix-size + 2·quiet-zone`.
     type: number
     default: 200
     reflect: true
@@ -64,14 +64,18 @@ props:
     enum: [L, M, Q, H]
     reflect: true
     attribute: error-correction
-  margin:
+  quietZone:
     description: |
       Quiet zone in cells around the QR pattern. QR spec requires a
-      minimum 4-cell margin for reliable scanning; smaller values may
-      not scan on some devices. Default `4`.
+      minimum 4-cell quiet zone for reliable scanning; smaller values
+      may not scan on some devices. Default `4`. (Renamed from
+      `[margin]` — that name collided with the framework's global
+      `[margin]` Scale attribute; `margin` on `qr-code-ui` now means
+      the global spacing attribute, per ADR-0053.)
     type: number
     default: 4
     reflect: true
+    attribute: quiet-zone
   color:
     description: |
       Foreground (dark-cell) color. Any CSS color string (hex, rgb,
@@ -107,7 +111,7 @@ states:
     description: Default — QR rendered (or empty if no value/matrix).
   - name: error
     description: Auto-encode failed (data too long for v1–10 at requested ECC). Renders an empty placeholder; logs a console warning. Switch to a BYO matrix from an external encoder, or downgrade the ECC level.
-    attribute: data-error
+    attribute: error
 traits: []
 tokens:
   --qr-code-fg:
@@ -125,27 +129,29 @@ a2ui:
       reason: "Encoder capacity contract."
     - rule: "When QR sits over a non-white surface, set [background] to a solid color. White-on-image QR backgrounds are unreliable for scanners — quiet-zone contrast against the dark cells is the load-bearing visual."
       reason: "Scannability constraint."
-    - rule: "The [margin] (quiet zone) defaults to 4 cells per QR spec. Smaller margins may scan on some devices but not others; do not go below 2."
+    - rule: "The [quiet-zone] defaults to 4 cells per QR spec. Smaller values may scan on some devices but not others; do not go below 2."
       reason: "Quiet-zone requirement."
 anti_patterns:
   - wrong: |
       <qr-code-ui value="https://very.long.url.that.exceeds.150.bytes.of.utf8.encoded.length..."></qr-code-ui>
     why: |
       Built-in encoder covers versions 1–10. Data beyond v10 capacity
-      throws + renders empty + sets [data-error]. Console warns with
-      the byte length so consumers can diagnose.
+      is caught internally: the component renders empty and sets [error]
+      (no exception reaches the consumer). Console warns with the value's
+      UTF-16 code-unit length (String.length, not UTF-8 bytes) so
+      consumers can diagnose.
     fix: |
       Drop the ECC level (lower L gives more capacity for the same
       version), OR shorten the URL (use a URL shortener), OR encode
       with a BYO encoder library + pass the [matrix]:
       `<qr-code-ui matrix="[[1,0,1,...],...]"></qr-code-ui>`
   - wrong: |
-      <qr-code-ui value="..." margin="0"></qr-code-ui>
+      <qr-code-ui value="..." quiet-zone="0"></qr-code-ui>
     why: |
-      Zero margin breaks scanning. QR spec requires a 4-cell quiet
+      Zero quiet zone breaks scanning. QR spec requires a 4-cell quiet
       zone for reliable detection.
     fix: |
-      <qr-code-ui value="..." margin="4"></qr-code-ui>
+      <qr-code-ui value="..." quiet-zone="4"></qr-code-ui>
 examples:
   - name: default
     description: Plain URL encoding at default size + ECC-M.

package/components/radio/radio.a2ui.json

@@ -101,18 +101,19 @@
       "poll"
     ],
     "name": "UIRadio",
-    "related": [
-      "button",
-      "radio-group"
-    ],
-    "slots": {
+    "parts": {
       "dot": {
-        "description": "Radio dot indicator, sized via --dot-size"
+        "description": "Radio dot indicator, sized via --dot-size — template-owned anatomy part, not a light-DOM insertion point"
       },
       "label": {
-        "description": "Label text container, rendered via CSS attr(label) on ::after"
+        "description": "Label text beside the dot — set via the `label` attribute (rendered by CSS `attr(label)` on `::after`); template-owned, not a light-DOM insertion point (gh#1435, gh#1447)"
       }
     },
+    "related": [
+      "button",
+      "radio-group"
+    ],
+    "slots": {},
     "states": [
       {
         "description": "Default, ready for interaction.",

package/components/radio/radio.class.js

@@ -14,6 +14,14 @@
 /**
  * <radio-ui> — Radio button. The host IS the control.
  * Pure CSS dot via [slot="dot"]::after inner circle. No SVG, no inset shadow hack.
+ *
+ * ADR-0056 exemption (#1363 B7): [checked] — not [selected] — is the
+ * state surface here. radio-ui is a native form-control primitive (like
+ * option-card-ui's [checked] and accordion-item-ui's [open]); ADR-0056
+ * governs the parent-managed selection-item shape (segment-ui,
+ * toggle-option-ui), a different convention. radio-ui self-selects on
+ * click/keydown and stays independently form-participating per [name] —
+ * it is not a child a parent stamps top-down.
  */
 
 import { UIFormElement } from '../../core/form.js';

package/components/radio/radio.yaml

@@ -56,11 +56,11 @@ props:
 events:
   change:
     description: Fired when this radio becomes selected (bubbles)
-slots:
+parts:
   dot:
-    description: Radio dot indicator, sized via --dot-size
+    description: Radio dot indicator, sized via --dot-size — template-owned anatomy part, not a light-DOM insertion point
   label:
-    description: Label text container, rendered via CSS attr(label) on ::after
+    description: Label text beside the dot — set via the `label` attribute (rendered by CSS `attr(label)` on `::after`); template-owned, not a light-DOM insertion point (gh#1435, gh#1447)
 states:
   - name: idle
     description: Default, ready for interaction.

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

@@ -63,6 +63,11 @@
       "aria-labelledby"
     ],
     "name": "UIRadioGroup",
+    "parts": {
+      "label": {
+        "description": "Auto-minted label element (mounted by radio-group-ui from the [label] prop) — do not author this slot directly; template-owned anatomy part, not a light-DOM insertion point (gh#1454). `#ensureLabelElement()` only recognizes its own `[data-radio-group-label]` marker, never a bare consumer-authored `[slot=\"label\"]` element."
+      }
+    },
     "related": [
       "radio",
       "field"
@@ -70,9 +75,6 @@
     "slots": {
       "default": {
         "description": "radio-ui children sharing one [name=] — exclusivity and arrow-key navigation are unchanged; they still resolve via closest('fieldset, [role=radiogroup]'), which now matches this host."
-      },
-      "label": {
-        "description": "Auto-minted label element (mounted by radio-group-ui from the [label] prop) — do not author this slot directly."
       }
     },
     "states": [

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

@@ -28,6 +28,17 @@
  *
  * Not a form-associated element itself — it carries no value; each child
  * radio-ui is its own form participant per the existing [name=] contract.
+ *
+ * ADR-0056 scope note (#1363 B7 flagged "radio-group exposes no value
+ * surface at all" against segmented/tabs/select's parent [value]):
+ * evaluated and NOT adopted here. ADR-0056 itself governs only a
+ * selection-item CHILD's own state surface (segment-ui/toggle-option-ui's
+ * [selected]) — radio-ui already conforms via its native [checked]
+ * (radio.class.js, same exemption class as option-card-ui/
+ * accordion-item-ui). A parent-level [value] on this host would
+ * contradict the "not form-associated" design documented above and has
+ * no ratifying ADR of its own; left as a named rejected alternative
+ * (gh#1379) pending a future naming-convention ruling (B5/B9-shaped).
  */
 import { UIElement } from '../../core/element.js';
 

package/components/radio-group/radio-group.yaml

@@ -37,8 +37,14 @@ events: {}
 slots:
   default:
     description: "radio-ui children sharing one [name=] — exclusivity and arrow-key navigation are unchanged; they still resolve via closest('fieldset, [role=radiogroup]'), which now matches this host."
+parts:
   label:
-    description: Auto-minted label element (mounted by radio-group-ui from the [label] prop) — do not author this slot directly.
+    description: >-
+      Auto-minted label element (mounted by radio-group-ui from the [label]
+      prop) — do not author this slot directly; template-owned anatomy part,
+      not a light-DOM insertion point (gh#1454).
+      `#ensureLabelElement()` only recognizes its own `[data-radio-group-label]`
+      marker, never a bare consumer-authored `[slot="label"]` element.
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/range/range.a2ui.json

@@ -95,6 +95,7 @@
       "volume"
     ],
     "name": "UIRange",
+    "parts": {},
     "related": [
       "input",
       "button"
@@ -105,6 +106,11 @@
         "description": "Default, ready for interaction.",
         "name": "idle"
       },
+      {
+        "description": "The field is mid-drag (pointer down through pointerup).",
+        "attribute": "dragging",
+        "name": "dragging"
+      },
       {
         "description": "Non-interactive; dimmed.",
         "attribute": "disabled",

package/components/range/range.class.js

@@ -138,7 +138,7 @@ export class UIRange extends UIFormElement {
     this.#dragging = true;
     this.#startX = e.clientX;
     this.#startVal = this.value;
-    this.setAttribute('data-dragging', '');
+    this.setAttribute('dragging', '');
     this.#fieldEl.setPointerCapture(e.pointerId);
     this.#fieldEl.addEventListener('pointermove', this.#onPointerMove);
     this.#fieldEl.addEventListener('pointerup', this.#onPointerUp);
@@ -156,7 +156,7 @@ export class UIRange extends UIFormElement {
 
   #onPointerUp = (e) => {
     this.#dragging = false;
-    this.removeAttribute('data-dragging');
+    this.removeAttribute('dragging');
     this.#fieldEl.releasePointerCapture(e.pointerId);
     this.#fieldEl.removeEventListener('pointermove', this.#onPointerMove);
     this.#fieldEl.removeEventListener('pointerup', this.#onPointerUp);

package/components/range/range.css

@@ -69,7 +69,7 @@ range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
     /* font-family floor — see segment.css rationale. */
     font-family: var(--range-font-family);
     font-size: var(--range-font-size);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     transition:
       border-color var(--range-duration) var(--range-easing),
       background var(--range-duration) var(--range-easing);
@@ -147,10 +147,10 @@ range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
   /* Hover-fill brighten moved outside @scope — see Safari 17.x bug note at top. */
 
   /* Dragging: deepest fill, sharper border, instant (no transition lag on the clip) */
-  :scope[data-dragging] [slot="field"] {
+  :scope[dragging] [slot="field"] {
     border-color: var(--range-border-dragging);
   }
-  :scope[data-dragging] [data-layer="fill"] {
+  :scope[dragging] [data-layer="fill"] {
     background: var(--range-fill-bg-active);
     transition: none;
   }

package/components/range/range.yaml

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

package/components/rating/rating.a2ui.json

@@ -93,6 +93,7 @@
       "like"
     ],
     "name": "UIRating",
+    "parts": {},
     "related": [
       "Field",
       "AgentFeedbackBar"

package/components/rating/rating.css

@@ -32,7 +32,7 @@ rating-ui:hover [data-rating-symbol] {
     gap: var(--rating-gap);
     cursor: pointer;
     user-select: none;
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
   }
 
   :scope[readonly],

package/components/relative-time/relative-time.a2ui.json

@@ -88,6 +88,7 @@
       "duration"
     ],
     "name": "UIRelativeTime",
+    "parts": {},
     "related": [
       "text",
       "badge",

package/components/richtext/richtext.a2ui.json

@@ -38,7 +38,7 @@
   "unevaluatedProperties": false,
   "x-adiaui": {
     "anti_patterns": [],
-    "category": "forms",
+    "category": "display",
     "composes": [],
     "events": {},
     "examples": [
@@ -67,6 +67,7 @@
       "richtext"
     ],
     "name": "UIRichText",
+    "parts": {},
     "related": [
       "Code",
       "Text",

package/components/richtext/richtext.css

@@ -164,7 +164,7 @@
     font-weight: var(--richtext-h4-weight);
     color: var(--richtext-fg-muted);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: var(--a-font-tracking-wide);
     margin: var(--richtext-h4-margin-top) 0 var(--richtext-h4-margin-bottom);
   }
 
@@ -173,7 +173,7 @@
     font-weight: var(--richtext-h4-weight);
     color: var(--richtext-fg-muted);
     text-transform: uppercase;
-    letter-spacing: 0.06em;
+    letter-spacing: var(--a-font-tracking-wider);
     margin: var(--richtext-h4-margin-top) 0 var(--richtext-h4-margin-bottom);
   }
 
@@ -212,7 +212,7 @@
     padding: var(--richtext-pre-inset);
     overflow-x: auto;
     font-size: var(--richtext-code-size);
-    line-height: 1.5;
+    line-height: var(--a-font-leading-relaxed);
     margin: var(--richtext-pre-my) 0;
   }
 

package/components/richtext/richtext.yaml

@@ -3,7 +3,7 @@ name: UIRichText
 tag: richtext-ui
 status: stable
 component: RichText
-category: forms
+category: display
 version: 1
 description: |
   Markdown-to-HTML rendering primitive — converts the [markdown] prop

package/components/row/row.a2ui.json

@@ -77,6 +77,7 @@
       "row"
     ],
     "name": "UIRow",
+    "parts": {},
     "related": [
       "avatar",
       "input",

package/components/search/search.a2ui.json

@@ -94,6 +94,7 @@
       "combobox"
     ],
     "name": "UISearch",
+    "parts": {},
     "related": [
       "Input",
       "Command",

package/components/search/search.class.js

@@ -41,8 +41,11 @@ export class UISearch extends UIFormElement {
 
     if (!this.querySelector('input-ui')) {
       const size = this.getAttribute('size');
+      // No `type` attribute here — input-ui's `type` enum no longer
+      // includes "search" (gh#1381, gh#1363 B10); it was always
+      // decorative on this primitive (input.class.js never branched on
+      // it), so dropping it is a no-op on rendered behavior.
       this.innerHTML = `<input-ui
-        type="search"
         prefix="magnifying-glass"
         suffix="x-circle"
         placeholder="${this.placeholder}"