@adia-ai/web-components 0.8.40 → 0.8.41

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;
   }
 }

package/components/progress/progress.css

@@ -11,8 +11,14 @@
     /* -- Indeterminate motion -- */
     --progress-shimmer-duration: 1.5s;
     --progress-shimmer-easing:   ease-in-out;
-    --progress-spin-duration:    0.6s;
-    --progress-spin-easing:      linear;
+
+    /* -- Row layout (label present — absorbed progress-row-ui) -- */
+    --progress-row-gap:        var(--a-space-2);
+    --progress-row-column-gap: var(--a-space-2);
+    --progress-row-label-size: var(--a-ui-size);
+    --progress-row-label-fg:   var(--md-sys-color-neutral-on-surface);
+    --progress-row-meta-size:  var(--a-ui-sm);
+    --progress-row-meta-fg:    var(--a-fg-muted);
   }
 
   :scope {
@@ -20,11 +26,14 @@
     box-sizing: border-box;
     display: block;
     width: 100%;
+    text-align: start;  /* §text-align-reset — row-layout label/meta shouldn't inherit centered ancestors */
   }
 
-  /* ── Bar variant ── */
-
-  [slot="track"] {
+  /* Track is the sole direct-child <div> (fill nests inside it) — tag +
+     ancestor selects it; slot="track" stays decorative metadata only
+     (AGENTS.md: position by tag/ancestor/DOM order, never [slot=]). */
+  :scope > div {
+    grid-area: bar;  /* no-op unless the row-layout mode below is active */
     width: 100%;
     height: var(--progress-height);
     border-radius: var(--progress-radius);
@@ -66,31 +75,40 @@
     100% { background-position: -200% 0; }
   }
 
-  /* ── Spinner variant ── */
+  /* ── Row layout — label present (Sanctioned Mode Attribute,
+     absorbed from progress-row-ui; component-token-contract.md) ──
+     label/meta are both direct-child <span>s, appended in that order
+     (progress.class.js#connected) — position by tag + DOM order, never
+     [slot=] (AGENTS.md: slot= stays decorative metadata only). */
 
-  :scope[variant="spinner"] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5em;
-    height: 1.5em;
+  :scope > span:first-of-type {
+    grid-area: label;
+    font-size: var(--progress-row-label-size);
+    color: var(--progress-row-label-fg);
+    line-height: var(--a-font-leading-normal);
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  :scope[variant="spinner"] [slot="track"] { display: none; }
-
-  :scope[variant="spinner"]::after {
-    content: "";
-    box-sizing: border-box;
-    display: block;
-    width: 100%;
-    height: 100%;
-    border: 2px solid var(--progress-fill);
-    border-top-color: transparent;
-    border-radius: var(--progress-radius);
-    animation: progress-spin var(--progress-spin-duration) var(--progress-spin-easing) infinite;
+  :scope > span:last-of-type {
+    grid-area: meta;
+    font-size: var(--progress-row-meta-size);
+    color: var(--progress-row-meta-fg);
+    font-variant-numeric: tabular-nums;
+    justify-self: end;
+    line-height: var(--a-font-leading-normal);
   }
 
-  @keyframes progress-spin {
-    to { transform: rotate(360deg); }
+  :scope[label]:not([label=""]) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "label meta"
+      "bar   bar";
+    column-gap: var(--progress-row-column-gap);
+    row-gap: var(--progress-row-gap);
+    align-items: baseline;
   }
 }

package/components/progress/progress.d.ts

@@ -1,5 +1,5 @@
 /**
- * `<progress-ui>` — 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.
+ * `<progress-ui>` — 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.
  *
  * @see https://ui-kit.exe.xyz/site/components/progress
  *
@@ -13,8 +13,10 @@
 import { UIElement } from '../../core/element.js';
 
 export class UIProgress extends UIElement {
-  /** Current progress. 0..max (or 0..1 when max omitted). null = indeterminate (legacy -1 accepted for back-compat). */
-  value: number;
-  /** 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). */
-  variant: 'bar' | 'spinner';
+  /** 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). */
+  label: string;
+  /** Right-hand meta text shown in row layout (e.g. '32 GB', '4.2k / 10k'). No visible effect without `label`. */
+  meta: string;
+  /** Current progress, 0-100 (clamped). null = indeterminate (legacy -1 accepted for back-compat). */
+  value: number | null;
 }

package/components/progress/progress.examples.md

@@ -12,8 +12,8 @@
 <progress-ui></progress-ui>
 ```
 
-## variant
+## Sizes
 
 ```html
-<progress-ui value="60" variant="bar"></progress-ui>
+<progress-ui value="60" style="width:100px"></progress-ui>
 ```