@adia-ai/web-components 0.0.1

package/components/progress/progress.css

@@ -0,0 +1,88 @@
+@scope (progress-ui) {
+  :where(:scope) {
+    /* -- Tokens -- */
+    --progress-track:    var(--a-bg-muted);
+    --progress-fill:     var(--a-accent);
+    --progress-height:   0.375rem;
+    --progress-radius:   var(--a-radius-full);
+    --progress-duration: var(--a-duration);
+    --progress-easing:   var(--a-easing);
+
+    /* -- Indeterminate motion -- */
+    --progress-shimmer-duration: 1.5s;
+    --progress-shimmer-easing:   ease-in-out;
+    --progress-spin-duration:    0.6s;
+    --progress-spin-easing:      linear;
+  }
+
+  :scope {
+    /* -- Base -- */
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+  }
+
+  /* ── Bar variant ── */
+
+  [slot="track"] {
+    width: 100%;
+    height: var(--progress-height);
+    border-radius: var(--progress-radius);
+    background: var(--progress-track);
+    overflow: hidden;
+  }
+
+  [slot="fill"] {
+    height: 100%;
+    border-radius: var(--progress-radius);
+    background: var(--progress-fill);
+    transition: width var(--progress-duration) var(--progress-easing);
+  }
+
+  /* Indeterminate bar shimmer */
+  :scope[value^="-"] [slot="fill"],
+  :scope:not([value]) [slot="fill"] {
+    width: 100% !important;
+    background: linear-gradient(
+      90deg,
+      var(--progress-track) 0%,
+      var(--progress-fill) 50%,
+      var(--progress-track) 100%
+    );
+    background-size: 200% 100%;
+    animation: progress-shimmer var(--progress-shimmer-duration) var(--progress-shimmer-easing) infinite;
+  }
+
+  @keyframes progress-shimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  /* ── Spinner variant ── */
+
+  :scope[variant="spinner"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    height: 1.5em;
+  }
+
+  :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;
+  }
+
+  @keyframes progress-spin {
+    to { transform: rotate(360deg); }
+  }
+}

package/components/progress/progress.js

@@ -0,0 +1,64 @@
+/**
+ * <progress-ui value="60"></progress-ui>
+ * <progress-ui variant="spinner"></progress-ui>
+ * <progress-ui></progress-ui>              <!-- indeterminate bar -->
+ *
+ * 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.)
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaProgress extends AdiaElement {
+  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}%`;
+    }
+  }
+
+  disconnected() {
+    this.#track?.remove();
+    this.#track = null;
+    this.#fill = null;
+  }
+}
+customElements.define('progress-ui', AdiaProgress);
+
+export { AdiaProgress };

package/components/progress/progress.yaml

@@ -0,0 +1,342 @@
+# 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: AdiaProgress
+tag: progress-ui
+component: Progress
+category: display
+version: 1
+description: Progress indicator. Bar (default) or spinner. Value < 0 = indeterminate.
+props:
+  value:
+    description: Current progress. 0..max (or 0..1 when max omitted). Negative = indeterminate.
+    type: number
+    default: -1
+  max:
+    description: Upper bound for value. When omitted, value is treated as a 0..1 fraction.
+    type: number
+    default: 100
+  indeterminate:
+    description: Force indeterminate mode (animated loop) regardless of value.
+    type: boolean
+    default: false
+    reflect: true
+  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.
+    type: string
+    default: bar
+    enum:
+      - bar
+      - spinner
+      - primary
+      - success
+      - warning
+      - danger
+      - info
+events: {}
+slots:
+  fill:
+    description: Bar fill element inside track
+  track:
+    description: Bar track container
+states:
+  - 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"
+        }
+      ]
+keywords:
+  - progress
+  - monitor
+  - monitoring
+  - health
+  - performance
+  - workflow
+  - stepper
+  - wizard
+  - multi-step
+  - timeline
+  - loading
+  - spinner
+  - percent
+  - gamification
+synonyms:
+  gamification:
+    - leaderboard
+    - badge
+    - progress
+  health:
+    - dashboard
+    - metric
+    - stat
+    - progress
+  loading:
+    - loading
+    - skeleton
+    - progress
+    - bar
+  monitor:
+    - dashboard
+    - metric
+    - stat
+    - chart
+    - progress
+  monitoring:
+    - dashboard
+    - metric
+    - stat
+    - chart
+    - progress
+  multi-step:
+    - wizard
+    - step
+    - progress
+  percent:
+    - progress
+    - bar
+  performance:
+    - dashboard
+    - metric
+    - chart
+    - stat
+    - progress
+  progress:
+    - progress
+    - bar
+    - tracker
+    - loading
+  spinner:
+    - loading
+    - skeleton
+    - progress
+  stepper:
+    - wizard
+    - step
+    - progress
+    - tracker
+  timeline:
+    - social
+    - post
+    - activity
+    - team
+    - progress
+  wizard:
+    - wizard
+    - step
+    - progress
+    - tracker
+    - onboarding
+  workflow:
+    - kanban
+    - board
+    - project
+    - wizard
+    - progress
+    - step
+related:
+  - grid
+  - button
+  - check-box
+  - upload

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

@@ -0,0 +1,100 @@
+{
+  "$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.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "ProgressRow"
+    },
+    "icon": {
+      "description": "Optional Phosphor icon name rendered leading the label.",
+      "type": "string",
+      "default": ""
+    },
+    "label": {
+      "description": "Left-hand label text",
+      "type": "string",
+      "default": ""
+    },
+    "max": {
+      "description": "Upper bound for value. Defaults to 100.",
+      "type": "number",
+      "default": 100
+    },
+    "meta": {
+      "description": "Right-hand meta text (e.g. '32 GB', '4.2k / 10k')",
+      "type": "string",
+      "default": ""
+    },
+    "value": {
+      "description": "Progress value 0-100 (-1 = indeterminate)",
+      "type": "number",
+      "default": -1
+    },
+    "variant": {
+      "description": "Color variant for the progress fill",
+      "type": "string",
+      "enum": [
+        "success",
+        "warning",
+        "danger",
+        "info",
+        "primary"
+      ],
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "data",
+    "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"
+      }
+    ],
+    "keywords": [
+      "progressrow",
+      "progress-row",
+      "progress",
+      "row"
+    ],
+    "name": "AdiaProgressRow",
+    "related": [],
+    "slots": {
+      "label": {
+        "description": "Label region — control label."
+      },
+      "meta": {
+        "description": "Child content region for the `meta` slot."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "progress-row-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

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

@@ -0,0 +1,57 @@
+@scope (progress-row-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --progress-row-gap:           var(--a-space-1);
+    --progress-row-column-gap:    var(--a-space-2);
+    --progress-row-label-size:    var(--a-ui-size);
+    --progress-row-label-fg:      var(--a-fg);
+    --progress-row-meta-size:     var(--a-ui-sm);
+    --progress-row-meta-fg:       var(--a-fg-muted);
+
+    /* Fill color piped into nested progress-ui via its own token */
+    --progress-row-fill-bg:       var(--a-accent-bg);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    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;
+  }
+
+  [slot="label"] {
+    grid-area: label;
+    font-size: var(--progress-row-label-size);
+    color: var(--progress-row-label-fg);
+    line-height: 1.4;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [slot="meta"] {
+    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: 1.4;
+  }
+
+  progress-ui {
+    grid-area: bar;
+    /* Pipe our component token into the nested progress component's token */
+    --progress-fill-bg: var(--progress-row-fill-bg);
+  }
+
+  /* Variants — remap own tokens only; the nested progress inherits via --progress-row-fill-bg. */
+  :scope[variant="success"] { --progress-row-fill-bg: var(--a-success-bg); }
+  :scope[variant="warning"] { --progress-row-fill-bg: var(--a-warning-bg); }
+  :scope[variant="danger"]  { --progress-row-fill-bg: var(--a-danger-bg); }
+}