@adia-ai/web-components 0.8.39 → 0.8.41

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.css

@@ -56,7 +56,7 @@
     color: var(--otp-input-fg);
     font-family: var(--otp-input-font);
     font-size: var(--otp-input-font-size);
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
     outline: none;
     transition: border-color var(--otp-input-duration) var(--otp-input-easing);
     /* Hide number spinner */

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.css

@@ -183,7 +183,7 @@
   :scope > :where(header, header-ui) > :is(text-ui[variant="display"], text-ui[variant="title"], text-ui[variant="heading"], text-ui[variant="subsection"]):not([slot]),
   :scope > :where(header, header-ui) > [slot="heading"] :is(h1, h2, h3, h4, h5, h6) {
     grid-row: 1;
-    line-height: 1.3;
+    line-height: var(--a-font-leading-normal);
     margin: 0;
   }
 
@@ -210,7 +210,7 @@
   :scope > :where(header, header-ui) > :is(text-ui[variant="body"], text-ui[variant="caption"]):not([slot]) {
     grid-row: 2;
     grid-column: 1 / -1;
-    line-height: 1.4;
+    line-height: var(--a-font-leading-relaxed);
     margin: 0;
   }
   :scope > :where(header, header-ui):has(> [slot="icon"]) > :is([slot="description"], p:not([slot]), small:not([slot])) { grid-column: 2 / -1; }

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/pagination/pagination.css

@@ -58,7 +58,7 @@
     font-size: var(--pagination-ellipsis-font);
     pointer-events: none;
     user-select: none;
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
   }
 
   /* ── variant="button" — square 1:1 cells via outline button-ui ──

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;
   }
@@ -141,7 +141,7 @@
     color: var(--pane-section-header-fg);
     padding-bottom: var(--pane-col-gap);
     text-transform: uppercase;
-    letter-spacing: 0.06em;
+    letter-spacing: var(--a-font-tracking-wider);
     font-weight: var(--pane-section-header-weight);
   }
 
@@ -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();

package/components/progress/progress.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Progress.json",
   "title": "Progress",
-  "description": "Progress indicator with bar (default) or spinner variant. Value < 0 marks indeterminate state showing animated activity instead of a fill. Use inside <progress-row-ui> for labeled task lists or standalone for global loading indicators; for percent-complete inline displays use <stat-ui> instead.",
+  "description": "Linear progress bar indicator. Value < 0 marks indeterminate state showing animated activity instead of a fill. Bar-only — for circular loading indicators use <spinner-ui> instead (the former `variant=\"spinner\"` render mode was retired; spinner-ui owns circular). Set `label` for a labeled task-list row (label + bar + optional `meta` text in one row, e.g. storage quotas, capacity breakdowns) — absorbed <progress-row-ui>'s row layout directly; that component is now a deprecated alias. Omit `label` for a standalone bar (global loading indicators); for percent-complete inline displays use <stat-ui> instead.",
   "type": "object",
   "allOf": [
     {
@@ -16,19 +16,23 @@
     "component": {
       "const": "Progress"
     },
-    "value": {
-      "description": "Current progress. 0..max (or 0..1 when max omitted). null = indeterminate (legacy -1 accepted for back-compat).",
-      "type": "number",
-      "default": null
+    "label": {
+      "description": "Left-hand label text. Presence (non-empty) switches to the labeled row layout — label + bar + optional `meta` in one row; absent = plain bar. Sanctioned Mode Attribute (component-token-contract.md).",
+      "type": "string",
+      "default": ""
     },
-    "variant": {
-      "description": "Render mode — `bar` (default) or `spinner`. For fill color set the `--progress-fill` token (defaults to `--md-sys-color-primary`); there is no variant-as-color (use the token).",
+    "meta": {
+      "description": "Right-hand meta text shown in row layout (e.g. '32 GB', '4.2k / 10k'). No visible effect without `label`.",
       "type": "string",
-      "enum": [
-        "bar",
-        "spinner"
+      "default": ""
+    },
+    "value": {
+      "description": "Current progress, 0-100 (clamped). null = indeterminate (legacy -1 accepted for back-compat).",
+      "type": [
+        "number",
+        "null"
       ],
-      "default": "bar"
+      "default": null
     }
   },
   "required": [
@@ -36,19 +40,30 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
-    "anti_patterns": [],
-    "category": "display",
+    "anti_patterns": [
+      {
+        "fix": "{\"component\": \"Spinner\"}\n",
+        "why": "Progress no longer has a `variant` prop — the spinner render mode\nwas retired. Progress is bar-only now.\n",
+        "wrong": "{\"component\": \"Progress\", \"variant\": \"spinner\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"Progress\", \"label\": \"CPU\", \"value\": 92}\n",
+        "why": "ProgressRow is deprecated — its label+row layout was\nabsorbed into Progress directly.\n",
+        "wrong": "{\"component\": \"ProgressRow\", \"label\": \"CPU\", \"value\": 92}\n"
+      }
+    ],
+    "category": "feedback",
     "composes": [],
     "events": {},
     "examples": [
       {
         "description": "Two-column dashboard with quick actions (buttons) and system status (progress bars).",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Grid\",\n    \"children\": [\n      \"c1\",\n      \"c2\"\n    ],\n    \"columns\": \"2\"\n  },\n  {\n    \"id\": \"c1\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"c1h\",\n      \"c1s\"\n    ]\n  },\n  {\n    \"id\": \"c1h\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"c1t\"\n    ]\n  },\n  {\n    \"id\": \"c1t\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Quick Actions\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"c1s\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"c1col\"\n    ]\n  },\n  {\n    \"id\": \"c1col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"b1\",\n      \"b2\",\n      \"b3\"\n    ]\n  },\n  {\n    \"id\": \"b1\",\n    \"component\": \"Button\",\n    \"text\": \"New Project\",\n    \"variant\": \"solid\",\n    \"iconLeading\": \"plus\"\n  },\n  {\n    \"id\": \"b2\",\n    \"component\": \"Button\",\n    \"text\": \"Invite Member\",\n    \"variant\": \"outline\",\n    \"iconLeading\": \"users\"\n  },\n  {\n    \"id\": \"b3\",\n    \"component\": \"Button\",\n    \"text\": \"View Reports\",\n    \"variant\": \"ghost\",\n    \"iconLeading\": \"chart\"\n  },\n  {\n    \"id\": \"c2\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"c2h\",\n      \"c2s\"\n    ]\n  },\n  {\n    \"id\": \"c2h\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"c2t\"\n    ]\n  },\n  {\n    \"id\": \"c2t\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"System Status\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"c2s\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"c2col\"\n    ]\n  },\n  {\n    \"id\": \"c2col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"p1\",\n      \"p2\",\n      \"p3\"\n    ]\n  },\n  {\n    \"id\": \"p1\",\n    \"component\": \"Progress\",\n    \"value\": \"92\",\n    \"label\": \"CPU\"\n  },\n  {\n    \"id\": \"p2\",\n    \"component\": \"Progress\",\n    \"value\": \"67\",\n    \"label\": \"Memory\"\n  },\n  {\n    \"id\": \"p3\",\n    \"component\": \"Progress\",\n    \"value\": \"34\",\n    \"label\": \"Disk\"\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Grid\",\n    \"children\": [\n      \"c1\",\n      \"c2\"\n    ],\n    \"columns\": \"2\"\n  },\n  {\n    \"id\": \"c1\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"c1h\",\n      \"c1s\"\n    ]\n  },\n  {\n    \"id\": \"c1h\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"c1t\"\n    ]\n  },\n  {\n    \"id\": \"c1t\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Quick Actions\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"c1s\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"c1col\"\n    ]\n  },\n  {\n    \"id\": \"c1col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"b1\",\n      \"b2\",\n      \"b3\"\n    ]\n  },\n  {\n    \"id\": \"b1\",\n    \"component\": \"Button\",\n    \"text\": \"New Project\",\n    \"variant\": \"solid\",\n    \"icon\": \"plus\"\n  },\n  {\n    \"id\": \"b2\",\n    \"component\": \"Button\",\n    \"text\": \"Invite Member\",\n    \"variant\": \"outline\",\n    \"icon\": \"users\"\n  },\n  {\n    \"id\": \"b3\",\n    \"component\": \"Button\",\n    \"text\": \"View Reports\",\n    \"variant\": \"ghost\",\n    \"icon\": \"chart\"\n  },\n  {\n    \"id\": \"c2\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"c2h\",\n      \"c2s\"\n    ]\n  },\n  {\n    \"id\": \"c2h\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"c2t\"\n    ]\n  },\n  {\n    \"id\": \"c2t\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"System Status\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"c2s\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"c2col\"\n    ]\n  },\n  {\n    \"id\": \"c2col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"p1\",\n      \"p2\",\n      \"p3\"\n    ]\n  },\n  {\n    \"id\": \"p1\",\n    \"component\": \"Progress\",\n    \"value\": 92,\n    \"label\": \"CPU\"\n  },\n  {\n    \"id\": \"p2\",\n    \"component\": \"Progress\",\n    \"value\": 67,\n    \"label\": \"Memory\"\n  },\n  {\n    \"id\": \"p3\",\n    \"component\": \"Progress\",\n    \"value\": 34,\n    \"label\": \"Disk\"\n  }\n]",
         "name": "dashboard"
       },
       {
         "description": "User onboarding checklist with progress and checkbox items.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Getting Started\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"col\"\n    ]\n  },\n  {\n    \"id\": \"col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"prog\",\n      \"c1\",\n      \"c2\",\n      \"c3\"\n    ],\n    \"gap\": \"3\"\n  },\n  {\n    \"id\": \"prog\",\n    \"component\": \"Progress\",\n    \"value\": 33,\n    \"max\": 100\n  },\n  {\n    \"id\": \"c1\",\n    \"component\": \"CheckBox\",\n    \"label\": \"Complete your profile\",\n    \"checked\": true\n  },\n  {\n    \"id\": \"c2\",\n    \"component\": \"CheckBox\",\n    \"label\": \"Invite team members\"\n  },\n  {\n    \"id\": \"c3\",\n    \"component\": \"CheckBox\",\n    \"label\": \"Create your first project\"\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Getting Started\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"col\"\n    ]\n  },\n  {\n    \"id\": \"col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"prog\",\n      \"c1\",\n      \"c2\",\n      \"c3\"\n    ],\n    \"gap\": \"3\"\n  },\n  {\n    \"id\": \"prog\",\n    \"component\": \"Progress\",\n    \"value\": 33\n  },\n  {\n    \"id\": \"c1\",\n    \"component\": \"CheckBox\",\n    \"label\": \"Complete your profile\",\n    \"checked\": true\n  },\n  {\n    \"id\": \"c2\",\n    \"component\": \"CheckBox\",\n    \"label\": \"Invite team members\"\n  },\n  {\n    \"id\": \"c3\",\n    \"component\": \"CheckBox\",\n    \"label\": \"Create your first project\"\n  }\n]",
         "name": "onboarding-checklist"
       }
     ],
@@ -69,20 +84,28 @@
       "gamification"
     ],
     "name": "UIProgress",
-    "related": [
-      "grid",
-      "button",
-      "check-box",
-      "upload"
-    ],
-    "slots": {
+    "parts": {
       "fill": {
-        "description": "Bar fill element inside track"
+        "description": "Bar fill element inside track — template-owned anatomy part, not a light-DOM insertion point (gh#1447)"
+      },
+      "label": {
+        "description": "Label region — row-layout left-hand text (active when `label` is set)."
+      },
+      "meta": {
+        "description": "Meta region — row-layout right-hand text (active when `label` is set)."
       },
       "track": {
-        "description": "Bar track container"
+        "description": "Bar track container — template-owned anatomy part, not a light-DOM insertion point (gh#1447)"
       }
     },
+    "related": [
+      "grid",
+      "button",
+      "check-box",
+      "upload",
+      "spinner"
+    ],
+    "slots": {},
     "states": [
       {
         "description": "Default, ready for interaction.",

package/components/progress/progress.class.js

@@ -13,40 +13,61 @@
 
 /**
  * <progress-ui value="60"></progress-ui>
- * <progress-ui variant="spinner"></progress-ui>
  * <progress-ui></progress-ui>              <!-- indeterminate bar -->
+ * <progress-ui value="42" label="CPU" meta="4.2 / 10 GHz"></progress-ui>  <!-- labeled row -->
  *
- * Progress indicator. Bar (default) or spinner variant.
+ * Linear progress bar indicator. Bar-only — for circular loading
+ * indicators use <spinner-ui> instead (the former
+ * variant="spinner" render mode was retired; spinner-ui owns circular).
  * value null (absent) = indeterminate, 0-100 = determinate.
  * (Legacy `value="-1"` is still treated as indeterminate for back-compat.)
+ *
+ * `label` (non-empty) activates the labeled row layout — label + bar +
+ * optional `meta` text in one row (absorbed from the now-deprecated
+ * <progress-row-ui>, gh#1363 C4). Omit `label` for a plain standalone bar.
  */
 
 import { UIElement } from '../../core/element.js';
 
 export class UIProgress extends UIElement {
   static properties = {
-    value:   { type: Number, default: null,  reflect: true },
-    variant: { type: String, default: 'bar', reflect: true },
+    value: { type: Number, default: null, reflect: true },
+    label: { type: String, default: '', reflect: true },
+    meta:  { type: String, default: '', reflect: true },
   };
 
   static template = () => null;
 
   #track = null;
   #fill = null;
+  #labelEl = null;
+  #metaEl = null;
 
   connected() {
     this.setAttribute('role', 'progressbar');
     this.setAttribute('aria-valuemin', '0');
     this.setAttribute('aria-valuemax', '100');
 
-    if (this.variant === 'bar') {
-      this.#track = document.createElement('div');
-      this.#track.setAttribute('slot', 'track');
-      this.#fill = document.createElement('div');
-      this.#fill.setAttribute('slot', 'fill');
-      this.#track.appendChild(this.#fill);
-      this.appendChild(this.#track);
+    this.#labelEl = this.querySelector(':scope > [slot="label"]');
+    if (!this.#labelEl) {
+      this.#labelEl = document.createElement('span');
+      this.#labelEl.setAttribute('slot', 'label');
+      this.appendChild(this.#labelEl);
+    }
+
+    this.#metaEl = this.querySelector(':scope > [slot="meta"]');
+    if (!this.#metaEl) {
+      this.#metaEl = document.createElement('span');
+      this.#metaEl.setAttribute('slot', 'meta');
+      this.appendChild(this.#metaEl);
     }
+
+    this.#track = document.createElement('div');
+    this.#track.setAttribute('slot', 'track');
+    this.#fill = document.createElement('div');
+    this.#fill.setAttribute('slot', 'fill');
+    this.#track.appendChild(this.#fill);
+    this.appendChild(this.#track);
   }
 
   render() {
@@ -64,11 +85,45 @@ export class UIProgress extends UIElement {
     if (this.#fill) {
       this.#fill.style.width = indeterminate ? '100%' : `${clamped}%`;
     }
+
+    // Row layout — label present (CSS keys off the reflected [label] attr).
+    if (this.#labelEl) {
+      this.#labelEl.textContent = this.label;
+      this.#labelEl.hidden = !this.label;
+    }
+
+    // meta has no visible effect without label — the row layout (and
+    // meta's grid-area placement within it) only activates when label is
+    // set; without it there's no grid to place meta INTO, so it would
+    // otherwise render as a stray block below the bar (gh#1426 CodeRabbit
+    // sweep). When label IS set, the [meta] ATTR owns the text; when
+    // absent, authored [slot="meta"] content is left intact instead of
+    // being wiped + hidden (progress-row-ui's own gh#502 fix, carried
+    // over) — only a genuinely empty meta element hides.
+    if (this.#metaEl) {
+      if (!this.label) {
+        this.#metaEl.hidden = true;
+      } else if (this.meta) {
+        this.#metaEl.textContent = this.meta;
+        this.#metaEl.hidden = false;
+      } else {
+        this.#metaEl.hidden = !this.#metaEl.hasChildNodes();
+      }
+    }
+
+    // ARIA: label the control so screen readers announce "CPU, 42 percent".
+    if (this.label) {
+      this.setAttribute('aria-label', this.meta ? `${this.label}, ${this.meta}` : this.label);
+    } else {
+      this.removeAttribute('aria-label');
+    }
   }
 
   disconnected() {
     this.#track?.remove();
     this.#track = null;
     this.#fill = null;
+    this.#labelEl = null;
+    this.#metaEl = null;
   }
 }