@adia-ai/web-components 0.4.5 → 0.4.7

package/components/progress/progress.js

@@ -1,64 +1,17 @@
 /**
- * <progress-ui value="60"></progress-ui>
- * <progress-ui variant="spinner"></progress-ui>
- * <progress-ui></progress-ui>              <!-- indeterminate bar -->
+ * `<progress-ui>` — auto-registers the tag on import.
  *
- * Progress indicator. Bar (default) or spinner variant.
- * value null (absent) = indeterminate, 0-100 = determinate.
- * (Legacy `value="-1"` is still treated as indeterminate for back-compat.)
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UIProgress } from '@adia-ai/web-components/components/progress/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-class UIProgress extends UIElement {
-  static properties = {
-    value:   { type: Number, default: null,  reflect: true },
-    variant: { type: String, default: 'bar', reflect: true },
-  };
-
-  static template = () => null;
-
-  #track = null;
-  #fill = 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);
-    }
-  }
-
-  render() {
-    const indeterminate = this.value == null || this.value < 0;
-    const clamped = Math.max(0, Math.min(100, this.value));
-
-    this.setAttribute('aria-busy', String(indeterminate));
-
-    if (indeterminate) {
-      this.removeAttribute('aria-valuenow');
-    } else {
-      this.setAttribute('aria-valuenow', String(clamped));
-    }
-
-    if (this.#fill) {
-      this.#fill.style.width = indeterminate ? '100%' : `${clamped}%`;
-    }
-  }
+import { defineIfFree } from '../../core/register.js';
+import { UIProgress } from './class.js';
 
-  disconnected() {
-    this.#track?.remove();
-    this.#track = null;
-    this.#fill = null;
-  }
-}
-customElements.define('progress-ui', UIProgress);
+defineIfFree('progress-ui', UIProgress);
 
 export { UIProgress };

package/components/progress/progress.yaml

@@ -1,5 +1,3 @@
-# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
-# Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIProgress
 tag: progress-ui
@@ -13,21 +11,19 @@ props:
     type: number
     default: null
   variant:
-    description: >-
-      Display variant. Structural values (bar, spinner) set the render mode;
-      semantic values (primary/success/warning/danger/info) set the fill color.
-      Prefer the `color` global attribute for color; variant-as-color accepted
-      for back-compat with older exemplars.
+    description: Display variant. Structural values (bar, spinner) set the render mode; semantic values (primary/success/warning/danger/info)
+      set the fill color. Prefer the `color` global attribute for color; variant-as-color accepted for back-compat with older
+      exemplars.
     type: string
     default: bar
     enum:
-      - bar
-      - spinner
-      - primary
-      - success
-      - warning
-      - danger
-      - info
+    - bar
+    - spinner
+    - primary
+    - success
+    - warning
+    - danger
+    - info
 events: {}
 slots:
   fill:
@@ -35,299 +31,140 @@ slots:
   track:
     description: Bar track container
 states:
-  - name: idle
-    description: Default, ready for interaction.
+- name: idle
+  description: Default, ready for interaction.
 traits: []
 tokens: {}
 a2ui:
   rules: []
 anti_patterns: []
 examples:
-  - name: dashboard
-    description: Two-column dashboard with quick actions (buttons) and system status (progress bars).
-    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",
-          "iconLeading": "plus"
-        },
-        {
-          "id": "b2",
-          "component": "Button",
-          "text": "Invite Member",
-          "variant": "outline",
-          "iconLeading": "users"
-        },
-        {
-          "id": "b3",
-          "component": "Button",
-          "text": "View Reports",
-          "variant": "ghost",
-          "iconLeading": "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: >-
-      [
-        {
-          "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,
-          "max": 100
-        },
-        {
-          "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"
-        }
-      ]
+- 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]"
+- 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]"
 keywords:
-  - progress
-  - monitor
-  - monitoring
-  - health
-  - performance
-  - workflow
-  - stepper
-  - wizard
-  - multi-step
-  - timeline
-  - loading
-  - spinner
-  - percent
-  - gamification
+- progress
+- monitor
+- monitoring
+- health
+- performance
+- workflow
+- stepper
+- wizard
+- multi-step
+- timeline
+- loading
+- spinner
+- percent
+- gamification
 synonyms:
   gamification:
-    - leaderboard
-    - badge
-    - progress
+  - leaderboard
+  - badge
+  - progress
   health:
-    - dashboard
-    - metric
-    - stat
-    - progress
+  - dashboard
+  - metric
+  - stat
+  - progress
   loading:
-    - loading
-    - skeleton
-    - progress
-    - bar
+  - loading
+  - skeleton
+  - progress
+  - bar
   monitor:
-    - dashboard
-    - metric
-    - stat
-    - chart
-    - progress
+  - dashboard
+  - metric
+  - stat
+  - chart
+  - progress
   monitoring:
-    - dashboard
-    - metric
-    - stat
-    - chart
-    - progress
+  - dashboard
+  - metric
+  - stat
+  - chart
+  - progress
   multi-step:
-    - wizard
-    - step
-    - progress
+  - wizard
+  - step
+  - progress
   percent:
-    - progress
-    - bar
+  - progress
+  - bar
   performance:
-    - dashboard
-    - metric
-    - chart
-    - stat
-    - progress
+  - dashboard
+  - metric
+  - chart
+  - stat
+  - progress
   progress:
-    - progress
-    - bar
-    - tracker
-    - loading
+  - progress
+  - bar
+  - tracker
+  - loading
   spinner:
-    - loading
-    - skeleton
-    - progress
+  - loading
+  - skeleton
+  - progress
   stepper:
-    - wizard
-    - step
-    - progress
-    - tracker
+  - wizard
+  - step
+  - progress
+  - tracker
   timeline:
-    - social
-    - post
-    - activity
-    - team
-    - progress
+  - social
+  - post
+  - activity
+  - team
+  - progress
   wizard:
-    - wizard
-    - step
-    - progress
-    - tracker
-    - onboarding
+  - wizard
+  - step
+  - progress
+  - tracker
+  - onboarding
   workflow:
-    - kanban
-    - board
-    - project
-    - wizard
-    - progress
-    - step
+  - kanban
+  - board
+  - project
+  - wizard
+  - progress
+  - step
+  tags:
+  - LoadingIndicator
 related:
-  - grid
-  - button
-  - check-box
-  - upload
+- grid
+- button
+- check-box
+- upload

package/components/progress-row/class.js

@@ -0,0 +1,110 @@
+/**
+ * Non-side-effect class export for `<progress-row-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/progress-row`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <progress-row-ui label="Documents" value="42" meta="32 GB"></progress-row-ui>
+ *
+ * Inline labeled progress row. Used for storage quotas, capacity
+ * breakdowns, budget/usage indicators.
+ *
+ * Layout:
+ *   ┌──────────────────────────────────────┐
+ *   │ Label                          Meta  │  ← flex row, space-between
+ *   │ ████████░░░░░░░░░░░░░░░░             │  ← progress bar below
+ *   └──────────────────────────────────────┘
+ *
+ * Properties:
+ *   label   — left-hand label text
+ *   value   — 0-100 progress value (null or -1 = indeterminate)
+ *   meta    — right-hand meta text (e.g. "32 GB", "4.2k / 10k")
+ *   variant — success | warning | danger (colors the fill; inherits otherwise)
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIProgressRow extends UIElement {
+  static properties = {
+    label:   { type: String, default: '',  reflect: true },
+    value:   { type: Number, default: null, reflect: true },
+    meta:    { type: String, default: '',  reflect: true },
+    variant: { type: String, default: 'default',  reflect: true },
+  };
+
+  static template = () => null;
+
+  #labelEl = null;
+  #metaEl = null;
+  #progressEl = null;
+
+  connected() {
+    this.setAttribute('role', 'group');
+
+    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.#progressEl = this.querySelector(':scope > progress-ui');
+    if (!this.#progressEl) {
+      this.#progressEl = document.createElement('progress-ui');
+      // Pre-set value BEFORE append so progress-ui's first paint is
+      // determinate at the target value — `@starting-style { width: 0 }`
+      // in progress.css then transitions 0 → value on mount. Without this,
+      // the bar mounts indeterminate (width: 100% from the shimmer rule),
+      // and `render()` setting value: N triggers a backwards 100% → N
+      // animation, which reads as the bar shrinking right-to-left.
+      if (this.value != null && this.value >= 0) {
+        this.#progressEl.setAttribute('value', String(this.value));
+      }
+      this.appendChild(this.#progressEl);
+    }
+  }
+
+  disconnected() {
+    this.#labelEl = null;
+    this.#metaEl = null;
+    this.#progressEl = null;
+  }
+
+  render() {
+    if (!this.#labelEl) return;
+
+    this.#labelEl.textContent = this.label;
+    this.#labelEl.hidden = !this.label;
+
+    this.#metaEl.textContent = this.meta;
+    this.#metaEl.hidden = !this.meta;
+
+    if (this.value != null && this.value >= 0) {
+      this.#progressEl.setAttribute('value', String(this.value));
+    } else {
+      this.#progressEl.removeAttribute('value');
+    }
+
+    // ARIA: label the group so screen readers announce "Documents, 42 percent"
+    if (this.label) {
+      this.setAttribute('aria-label', this.meta ? `${this.label}, ${this.meta}` : this.label);
+    } else {
+      this.removeAttribute('aria-label');
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+/**
+ * `<progress-row-ui>` — Inline labeled progress row with label, progress bar, and meta text. Used for storage quotas, capacity breakdowns, usage indicators.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/progress-row
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run components`, then `npm run codegen:dts` to regenerate;
+ * or hand-author this file fully if rich event types are needed.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIProgressRow extends UIElement {
+  /** Left-hand label text */
+  label: string;
+  /** 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;
+  /** Color variant for the progress fill */
+  variant: 'default' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+}