@adia-ai/web-components 0.8.39 → 0.8.41

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>
 ```

package/components/progress/progress.yaml

@@ -3,34 +3,41 @@ name: UIProgress
 tag: progress-ui
 status: stable
 component: Progress
-category: display
+category: feedback
 version: 1
 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.
+  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.
 props:
   value:
-    description: Current progress. 0..max (or 0..1 when max omitted). null = indeterminate (legacy -1 accepted for back-compat).
+    description: Current progress, 0-100 (clamped). null = indeterminate (legacy -1 accepted for back-compat).
     type: number
     default: null
-  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).
+  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: bar
-    enum:
-    - bar
-    - spinner
+    default: ""
+  meta:
+    description: Right-hand meta text shown in row layout (e.g. '32 GB', '4.2k / 10k'). No visible effect without `label`.
+    type: string
+    default: ""
 events: {}
-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)
   track:
-    description: Bar track container
+    description: Bar track container — 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)."
 states:
 - name: idle
   description: Default, ready for interaction.
@@ -40,46 +47,220 @@ a2ui:
   rules:
     - rule: 'Use for in-progress task feedback with known or indeterminate state. Value < 0 = indeterminate animation.'
       reason: 'Same primitive for both modes; consumer controls via value.'
-    - rule: 'For labeled task lists (multiple progress bars with row labels), use <progress-row-ui> instead.'
-      reason: 'Progress-row composes <progress-ui> + label + value display.'
-    - rule: 'Spinner variant (variant=''spinner'') for circular loading indicators; bar variant default for linear.'
-      reason: 'Two visual modes.'
-anti_patterns: []
+    - rule: 'For labeled task lists (multiple progress bars with row labels, e.g. storage/capacity breakdowns), set `label` (and optional `meta`) directly on <progress-ui> — no separate component needed.'
+      reason: 'label present activates the row layout in-place (absorbed from <progress-row-ui>, gh#1363 C4).'
+    - rule: 'For circular loading indicators, use <spinner-ui> instead — <progress-ui> is bar-only.'
+      reason: 'Retired the former variant=''spinner'' render mode; spinner-ui owns circular (arc/ring/dots/knight).'
+anti_patterns:
+  - wrong: |
+      {"component": "Progress", "variant": "spinner"}
+    why: |
+      Progress no longer has a `variant` prop — the spinner render mode
+      was retired. Progress is bar-only now.
+    fix: |
+      {"component": "Spinner"}
+  - wrong: |
+      {"component": "ProgressRow", "label": "CPU", "value": 92}
+    why: |
+      ProgressRow is deprecated — its label+row layout was
+      absorbed into Progress directly.
+    fix: |
+      {"component": "Progress", "label": "CPU", "value": 92}
 examples:
 - name: dashboard
   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: >-
+    [
+      {
+        "id": "root",
+        "component": "Grid",
+        "children": [
+          "c1",
+          "c2"
+        ],
+        "columns": "2"
+      },
+      {
+        "id": "c1",
+        "component": "Card",
+        "children": [
+          "c1h",
+          "c1s"
+        ]
+      },
+      {
+        "id": "c1h",
+        "component": "Header",
+        "children": [
+          "c1t"
+        ]
+      },
+      {
+        "id": "c1t",
+        "component": "Text",
+        "slot": "heading",
+        "textContent": "Quick Actions",
+        "variant": "section"
+      },
+      {
+        "id": "c1s",
+        "component": "Section",
+        "children": [
+          "c1col"
+        ]
+      },
+      {
+        "id": "c1col",
+        "component": "Column",
+        "children": [
+          "b1",
+          "b2",
+          "b3"
+        ]
+      },
+      {
+        "id": "b1",
+        "component": "Button",
+        "text": "New Project",
+        "variant": "solid",
+        "icon": "plus"
+      },
+      {
+        "id": "b2",
+        "component": "Button",
+        "text": "Invite Member",
+        "variant": "outline",
+        "icon": "users"
+      },
+      {
+        "id": "b3",
+        "component": "Button",
+        "text": "View Reports",
+        "variant": "ghost",
+        "icon": "chart"
+      },
+      {
+        "id": "c2",
+        "component": "Card",
+        "children": [
+          "c2h",
+          "c2s"
+        ]
+      },
+      {
+        "id": "c2h",
+        "component": "Header",
+        "children": [
+          "c2t"
+        ]
+      },
+      {
+        "id": "c2t",
+        "component": "Text",
+        "slot": "heading",
+        "textContent": "System Status",
+        "variant": "section"
+      },
+      {
+        "id": "c2s",
+        "component": "Section",
+        "children": [
+          "c2col"
+        ]
+      },
+      {
+        "id": "c2col",
+        "component": "Column",
+        "children": [
+          "p1",
+          "p2",
+          "p3"
+        ]
+      },
+      {
+        "id": "p1",
+        "component": "Progress",
+        "value": 92,
+        "label": "CPU"
+      },
+      {
+        "id": "p2",
+        "component": "Progress",
+        "value": 67,
+        "label": "Memory"
+      },
+      {
+        "id": "p3",
+        "component": "Progress",
+        "value": 34,
+        "label": "Disk"
+      }
+    ]
 - name: onboarding-checklist
   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: >-
+    [
+      {
+        "id": "root",
+        "component": "Card",
+        "children": [
+          "hdr",
+          "sec"
+        ]
+      },
+      {
+        "id": "hdr",
+        "component": "Header",
+        "children": [
+          "title"
+        ]
+      },
+      {
+        "id": "title",
+        "component": "Text",
+        "slot": "heading",
+        "textContent": "Getting Started"
+      },
+      {
+        "id": "sec",
+        "component": "Section",
+        "children": [
+          "col"
+        ]
+      },
+      {
+        "id": "col",
+        "component": "Column",
+        "children": [
+          "prog",
+          "c1",
+          "c2",
+          "c3"
+        ],
+        "gap": "3"
+      },
+      {
+        "id": "prog",
+        "component": "Progress",
+        "value": 33
+      },
+      {
+        "id": "c1",
+        "component": "CheckBox",
+        "label": "Complete your profile",
+        "checked": true
+      },
+      {
+        "id": "c2",
+        "component": "CheckBox",
+        "label": "Invite team members"
+      },
+      {
+        "id": "c3",
+        "component": "CheckBox",
+        "label": "Create your first project"
+      }
+    ]
 keywords:
 - progress
 - monitor
@@ -175,3 +356,4 @@ related:
 - button
 - check-box
 - upload
+- spinner

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

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/ProgressRow.json",
   "title": "ProgressRow",
-  "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.",
   "type": "object",
   "allOf": [
     {
@@ -28,7 +28,10 @@
     },
     "value": {
       "description": "Progress value 0-100 (null = indeterminate; legacy -1 accepted for back-compat)",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "variant": {
@@ -48,19 +51,19 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
-    "anti_patterns": [],
-    "category": "data",
+    "anti_patterns": [
+      {
+        "fix": "{\"component\": \"Progress\", \"label\": \"CPU\", \"value\": 92}\n",
+        "why": "ProgressRow is deprecated — its row layout was absorbed\ninto Progress directly.\n",
+        "wrong": "{\"component\": \"ProgressRow\", \"label\": \"CPU\", \"value\": 92}\n"
+      }
+    ],
+    "category": "feedback",
     "composes": [
       "progress-ui"
     ],
     "events": {},
-    "examples": [
-      {
-        "description": "Basic ProgressRow usage",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"ProgressRow\",\n    \"label\": \"Example ProgressRow\"\n  }\n]",
-        "name": "basic-progress-row"
-      }
-    ],
+    "examples": [],
     "keywords": [
       "progressrow",
       "progress-row",
@@ -68,6 +71,7 @@
       "row"
     ],
     "name": "UIProgressRow",
+    "parts": {},
     "related": [
       "Progress",
       "StepProgress",
@@ -87,7 +91,7 @@
         "name": "idle"
       }
     ],
-    "status": "stable",
+    "status": "deprecated",
     "synonyms": {
       "progress-row": [
         "task-row",

package/components/progress-row/progress-row.css

@@ -31,7 +31,7 @@
     grid-area: label;
     font-size: var(--progress-row-label-size);
     color: var(--progress-row-label-fg);
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -44,7 +44,7 @@
     color: var(--progress-row-meta-fg);
     font-variant-numeric: tabular-nums;
     justify-self: end;
-    line-height: 1.4;
+    line-height: var(--a-font-leading-normal);
   }
 
   progress-ui {

package/components/progress-row/progress-row.d.ts

@@ -1,5 +1,5 @@
 /**
- * `<progress-row-ui>` — Inline labeled progress row with label, progress bar, and meta text. Used for storage quotas, capacity breakdowns, usage indicators.
+ * `<progress-row-ui>` — 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.
  *
  * @see https://ui-kit.exe.xyz/site/components/progress-row
  *
@@ -18,7 +18,7 @@ export class UIProgressRow extends UIElement {
   /** Right-hand meta text (e.g. '32 GB', '4.2k / 10k') */
   meta: string;
   /** Progress value 0-100 (null = indeterminate; legacy -1 accepted for back-compat) */
-  value: number;
+  value: number | null;
   /** Color variant for the progress fill */
   variant: 'default' | 'success' | 'warning' | 'danger';
 }

package/components/progress-row/progress-row.examples.md

@@ -1,19 +1,7 @@
 # progress-row — Examples
 
-## Basic
+## Basic (back-compat)
 
 ```html
-<progress-row-ui label="Storage" value="42"></progress-row-ui>
-```
-
-## With Meta
-
-```html
-<progress-row-ui label="Documents" value="65" meta="6.5 GB / 10 GB"></progress-row-ui>
-```
-
-## Variants
-
-```html
-<progress-row-ui label="Healthy" value="30" meta="30%" variant="success"></progress-row-ui>
+<progress-row-ui label="Storage" value="42" meta="42 GB / 100 GB"></progress-row-ui>
 ```