@adia-ai/web-components 0.0.33 → 0.2.0

package/components/index.js

@@ -48,6 +48,7 @@ export { UIUpload } from './upload/upload.js';
 export { UICard } from './card/card.js';
 export { UIAvatar, UIAvatarGroup } from './avatar/avatar.js';
 export { UIProgress } from './progress/progress.js';
+export { UIStepProgress } from './step-progress/step-progress.js';
 export { UISkeleton } from './skeleton/skeleton.js';
 export { UIAlert } from './alert/alert.js';
 export { UIKbd } from './kbd/kbd.js';

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

@@ -0,0 +1,111 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/StepProgress.json",
+  "title": "StepProgress",
+  "description": "Discrete-dash step-progress indicator. One <span> dash per step in\n[total]; the first [value] dashes are filled with --a-accent. Used\nin multi-step flows (registration, onboarding, wizards). Replaces\nthe bespoke `[data-onb-progress]` + `[data-reg-progress]` markup\nthat lived in onboarding.css + registration.css with a single\nprimitive.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "caption": {
+      "description": "Optional caption text rendered above the track (e.g. 'Step 3 of 10', 'Step 3 of 10 · Optional', 'All steps complete'). Hidden when empty.",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "StepProgress"
+    },
+    "total": {
+      "description": "Total number of steps. The track renders this many dashes.",
+      "type": "number",
+      "default": 0
+    },
+    "value": {
+      "description": "Number of steps completed (1-indexed). Clamped to [0, total].",
+      "type": "number",
+      "default": 0
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "feedback",
+    "events": {},
+    "examples": [
+      {
+        "description": "3 of 10 steps complete with caption.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"StepProgress\",\n    \"value\": 3,\n    \"total\": 10,\n    \"caption\": \"Step 3 of 10\"\n  }\n]",
+        "name": "in-progress"
+      },
+      {
+        "description": "All steps complete.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"StepProgress\",\n    \"value\": 10,\n    \"total\": 10,\n    \"caption\": \"All steps complete\"\n  }\n]",
+        "name": "complete"
+      },
+      {
+        "description": "A 9-of-10 step that's optional.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"StepProgress\",\n    \"value\": 9,\n    \"total\": 10,\n    \"caption\": \"Step 9 of 10 · Optional\"\n  }\n]",
+        "name": "optional-step"
+      }
+    ],
+    "keywords": [
+      "progress",
+      "step",
+      "wizard",
+      "onboarding",
+      "registration",
+      "multi-step",
+      "indicator"
+    ],
+    "name": "UIStepProgress",
+    "related": [
+      "progress-ui",
+      "stepper-ui"
+    ],
+    "slots": {
+      "caption": {
+        "description": "Optional override of the auto-minted caption (use for rich content like icon + text). When present, the [caption] attribute is ignored."
+      },
+      "track": {
+        "description": "Optional override of the auto-minted track (rare — use only when the dash structure needs to differ)."
+      }
+    },
+    "states": [
+      {
+        "description": "value=0; no dashes filled.",
+        "name": "empty"
+      },
+      {
+        "description": "0 < value < total; some dashes filled.",
+        "name": "in-progress"
+      },
+      {
+        "description": "value=total; all dashes filled.",
+        "name": "complete"
+      }
+    ],
+    "synonyms": {
+      "step": [
+        "stage",
+        "phase"
+      ],
+      "total": [
+        "count",
+        "length"
+      ]
+    },
+    "tag": "step-progress-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/step-progress/step-progress.css

@@ -0,0 +1,61 @@
+/* ═══════════════════════════════════════════
+   step-progress-ui — Discrete-dash step progress indicator
+   Replaces bespoke `[data-onb-progress]` + `[data-reg-progress]` markup.
+   ═══════════════════════════════════════════ */
+
+@scope (step-progress-ui) {
+  :where(:scope) {
+    --step-progress-gap:        var(--a-space-2);
+    --step-progress-track-gap:  var(--a-space-1);
+    --step-progress-dash-h:     4px;
+    --step-progress-dash-radius: var(--a-radius-full);
+    --step-progress-dash-bg:    var(--a-border-subtle);
+    --step-progress-dash-bg-active: var(--a-accent);
+    --step-progress-caption-fg: var(--a-fg-muted);
+    --step-progress-caption-size: var(--a-ui-sm);
+
+    /* Sizing — match the bespoke flex shape in registration + onboarding
+       (flex:0 1 18rem; min-width:10rem). Consumers can override. */
+    --step-progress-flex:       0 1 18rem;
+    --step-progress-min-width:  10rem;
+  }
+
+  :scope {
+    display: flex;
+    flex-direction: column;
+    gap: var(--step-progress-gap);
+    flex: var(--step-progress-flex);
+    min-width: var(--step-progress-min-width);
+  }
+
+  /* Caption row — small, muted text. Hidden when no caption provided
+     (the [hidden] attribute is set by the JS). */
+  [slot="caption"] {
+    color: var(--step-progress-caption-fg);
+    font-size: var(--step-progress-caption-size);
+    line-height: 1.4;
+  }
+
+  [slot="caption"][hidden] {
+    display: none;
+  }
+
+  /* Discrete-dash track — one <span> per step. Each dash is a flex
+     item so the track scales with the column width. */
+  [slot="track"] {
+    display: flex;
+    gap: var(--step-progress-track-gap);
+  }
+
+  [slot="track"] > span {
+    flex: 1;
+    height: var(--step-progress-dash-h);
+    border-radius: var(--step-progress-dash-radius);
+    background: var(--step-progress-dash-bg);
+    transition: background var(--a-duration-fast, 150ms) var(--a-easing, ease);
+  }
+
+  [slot="track"] > span[data-active] {
+    background: var(--step-progress-dash-bg-active);
+  }
+}

package/components/step-progress/step-progress.js

@@ -0,0 +1,88 @@
+/**
+ * <step-progress-ui value="3" total="10" caption="Step 3 of 10"></step-progress-ui>
+ * <step-progress-ui value="3" total="10"></step-progress-ui>            <!-- no caption -->
+ * <step-progress-ui value="10" total="10" caption="All steps complete"></step-progress-ui>
+ *
+ * Discrete-dash step progress indicator. One dash per step in the
+ * total; the first `value` dashes carry [data-active] and paint with
+ * --a-accent. Used in registration + onboarding flows; replaces the
+ * bespoke `[data-onb-progress]` / `[data-reg-progress]` markup.
+ *
+ * Primitive shape (per ROADMAP § Done):
+ *   `<step-progress-ui value="N" total="M" caption="...">`
+ *
+ * Caption is optional; pass via attribute. Free-form text passes
+ * straight through; `<text-ui>` styling can be replicated with
+ * default-slot HTML if needed (the auto-mint uses plain text).
+ */
+
+import { UIElement } from '../../core/element.js';
+
+class UIStepProgress extends UIElement {
+  static properties = {
+    value:   { type: Number, default: 0,  reflect: true },
+    total:   { type: Number, default: 0,  reflect: true },
+    caption: { type: String, default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #captionEl = null;
+  #trackEl = null;
+
+  connected() {
+    this.setAttribute('role', 'progressbar');
+    this.setAttribute('aria-valuemin', '0');
+
+    // Auto-mint internal structure if the consumer didn't provide custom slots.
+    if (!this.querySelector(':scope > [slot="caption"]') && !this.querySelector(':scope > [slot="track"]')) {
+      this.#captionEl = document.createElement('span');
+      this.#captionEl.setAttribute('slot', 'caption');
+      this.appendChild(this.#captionEl);
+
+      this.#trackEl = document.createElement('div');
+      this.#trackEl.setAttribute('slot', 'track');
+      this.appendChild(this.#trackEl);
+    } else {
+      this.#captionEl = this.querySelector(':scope > [slot="caption"]');
+      this.#trackEl = this.querySelector(':scope > [slot="track"]');
+    }
+  }
+
+  render() {
+    const total = Math.max(0, this.total | 0);
+    const clamped = Math.max(0, Math.min(total, this.value | 0));
+
+    this.setAttribute('aria-valuemax', String(total));
+    this.setAttribute('aria-valuenow', String(clamped));
+
+    // Caption — text content if attribute set; cleared otherwise.
+    // Skip if the consumer passed in a custom caption slot (preserve their content).
+    if (this.#captionEl && !this.#captionEl.dataset.custom) {
+      this.#captionEl.textContent = this.caption || '';
+      this.#captionEl.toggleAttribute('hidden', !this.caption);
+    }
+
+    // Track — sync span count with `total`; mark first `value` as active.
+    if (this.#trackEl) {
+      const existing = this.#trackEl.children.length;
+      while (this.#trackEl.children.length < total) {
+        this.#trackEl.appendChild(document.createElement('span'));
+      }
+      while (this.#trackEl.children.length > total) {
+        this.#trackEl.lastElementChild.remove();
+      }
+      for (let i = 0; i < this.#trackEl.children.length; i++) {
+        this.#trackEl.children[i].toggleAttribute('data-active', i < clamped);
+      }
+    }
+  }
+
+  disconnected() {
+    this.#captionEl = null;
+    this.#trackEl = null;
+  }
+}
+
+customElements.define('step-progress-ui', UIStepProgress);
+export { UIStepProgress };

package/components/step-progress/step-progress.test.js

@@ -0,0 +1,118 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import '../../core/element.js';
+import './step-progress.js';
+
+const tick = () => new Promise((r) => queueMicrotask(r));
+
+function mount(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  document.body.appendChild(wrap);
+  return wrap.firstElementChild;
+}
+
+describe('step-progress-ui', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('registers as a custom element', () => {
+    expect(customElements.get('step-progress-ui')).toBeDefined();
+  });
+
+  it('sets role=progressbar + aria-value{min,max,now}', () => {
+    const el = mount('<step-progress-ui value="3" total="10"></step-progress-ui>');
+    expect(el.getAttribute('role')).toBe('progressbar');
+    expect(el.getAttribute('aria-valuemin')).toBe('0');
+    expect(el.getAttribute('aria-valuemax')).toBe('10');
+    expect(el.getAttribute('aria-valuenow')).toBe('3');
+  });
+
+  it('auto-mints a caption span + track div', () => {
+    const el = mount('<step-progress-ui value="2" total="5" caption="Step 2 of 5"></step-progress-ui>');
+    expect(el.querySelector(':scope > [slot="caption"]')).not.toBeNull();
+    expect(el.querySelector(':scope > [slot="track"]')).not.toBeNull();
+  });
+
+  it('renders one <span> per step in the track', () => {
+    const el = mount('<step-progress-ui value="2" total="5"></step-progress-ui>');
+    const dashes = el.querySelectorAll(':scope > [slot="track"] > span');
+    expect(dashes.length).toBe(5);
+  });
+
+  it('marks the first `value` dashes as [data-active]', () => {
+    const el = mount('<step-progress-ui value="3" total="5"></step-progress-ui>');
+    const dashes = el.querySelectorAll(':scope > [slot="track"] > span');
+    expect(dashes[0].hasAttribute('data-active')).toBe(true);
+    expect(dashes[1].hasAttribute('data-active')).toBe(true);
+    expect(dashes[2].hasAttribute('data-active')).toBe(true);
+    expect(dashes[3].hasAttribute('data-active')).toBe(false);
+    expect(dashes[4].hasAttribute('data-active')).toBe(false);
+  });
+
+  it('renders the caption text in the caption slot', () => {
+    const el = mount('<step-progress-ui value="3" total="10" caption="Step 3 of 10"></step-progress-ui>');
+    expect(el.querySelector('[slot="caption"]').textContent).toBe('Step 3 of 10');
+  });
+
+  it('hides the caption span when caption is empty', () => {
+    const el = mount('<step-progress-ui value="2" total="5"></step-progress-ui>');
+    expect(el.querySelector('[slot="caption"]').hasAttribute('hidden')).toBe(true);
+  });
+
+  it('updates the dash + aria when value changes', async () => {
+    const el = mount('<step-progress-ui value="2" total="5"></step-progress-ui>');
+    el.value = 4;
+    await tick();
+    const dashes = el.querySelectorAll(':scope > [slot="track"] > span');
+    expect(el.getAttribute('aria-valuenow')).toBe('4');
+    expect(dashes[3].hasAttribute('data-active')).toBe(true);
+    expect(dashes[4].hasAttribute('data-active')).toBe(false);
+  });
+
+  it('grows the dash count when total increases', async () => {
+    const el = mount('<step-progress-ui value="2" total="5"></step-progress-ui>');
+    expect(el.querySelectorAll('[slot="track"] > span').length).toBe(5);
+    el.total = 8;
+    await tick();
+    expect(el.querySelectorAll('[slot="track"] > span').length).toBe(8);
+  });
+
+  it('shrinks the dash count when total decreases', async () => {
+    const el = mount('<step-progress-ui value="2" total="8"></step-progress-ui>');
+    expect(el.querySelectorAll('[slot="track"] > span').length).toBe(8);
+    el.total = 4;
+    await tick();
+    expect(el.querySelectorAll('[slot="track"] > span').length).toBe(4);
+  });
+
+  it('clamps value to [0, total]', () => {
+    const el = mount('<step-progress-ui value="20" total="5"></step-progress-ui>');
+    const dashes = el.querySelectorAll(':scope > [slot="track"] > span');
+    expect(el.getAttribute('aria-valuenow')).toBe('5');
+    for (const dash of dashes) {
+      expect(dash.hasAttribute('data-active')).toBe(true);
+    }
+  });
+
+  it('handles value=0 (empty state) — no dashes active', () => {
+    const el = mount('<step-progress-ui value="0" total="5"></step-progress-ui>');
+    const dashes = el.querySelectorAll(':scope > [slot="track"] > span');
+    expect(el.getAttribute('aria-valuenow')).toBe('0');
+    for (const dash of dashes) {
+      expect(dash.hasAttribute('data-active')).toBe(false);
+    }
+  });
+
+  it('handles value=total (complete state) — all dashes active', () => {
+    const el = mount('<step-progress-ui value="5" total="5" caption="All steps complete"></step-progress-ui>');
+    const dashes = el.querySelectorAll(':scope > [slot="track"] > span');
+    for (const dash of dashes) {
+      expect(dash.hasAttribute('data-active')).toBe(true);
+    }
+    expect(el.querySelector('[slot="caption"]').textContent).toBe('All steps complete');
+  });
+
+  it('survives disconnect without throwing', () => {
+    const el = mount('<step-progress-ui value="3" total="10"></step-progress-ui>');
+    expect(() => el.remove()).not.toThrow();
+  });
+});

package/components/step-progress/step-progress.yaml

@@ -0,0 +1,93 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIStepProgress
+tag: step-progress-ui
+component: StepProgress
+category: feedback
+version: 1
+description: |
+  Discrete-dash step-progress indicator. One <span> dash per step in
+  [total]; the first [value] dashes are filled with --a-accent. Used
+  in multi-step flows (registration, onboarding, wizards). Replaces
+  the bespoke `[data-onb-progress]` + `[data-reg-progress]` markup
+  that lived in onboarding.css + registration.css with a single
+  primitive.
+
+props:
+  value:
+    type: number
+    default: 0
+    description: "Number of steps completed (1-indexed). Clamped to [0, total]."
+  total:
+    type: number
+    default: 0
+    description: "Total number of steps. The track renders this many dashes."
+  caption:
+    type: string
+    default: ''
+    description: "Optional caption text rendered above the track (e.g. 'Step 3 of 10', 'Step 3 of 10 · Optional', 'All steps complete'). Hidden when empty."
+
+events: {}
+
+slots:
+  caption:
+    description: "Optional override of the auto-minted caption (use for rich content like icon + text). When present, the [caption] attribute is ignored."
+  track:
+    description: "Optional override of the auto-minted track (rare — use only when the dash structure needs to differ)."
+
+states:
+  - name: empty
+    description: "value=0; no dashes filled."
+  - name: in-progress
+    description: "0 < value < total; some dashes filled."
+  - name: complete
+    description: "value=total; all dashes filled."
+
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+
+examples:
+  - name: in-progress
+    description: 3 of 10 steps complete with caption.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "StepProgress",
+          "value": 3,
+          "total": 10,
+          "caption": "Step 3 of 10"
+        }
+      ]
+  - name: complete
+    description: All steps complete.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "StepProgress",
+          "value": 10,
+          "total": 10,
+          "caption": "All steps complete"
+        }
+      ]
+  - name: optional-step
+    description: A 9-of-10 step that's optional.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "StepProgress",
+          "value": 9,
+          "total": 10,
+          "caption": "Step 9 of 10 · Optional"
+        }
+      ]
+
+keywords: [progress, step, wizard, onboarding, registration, multi-step, indicator]
+synonyms:
+  step:    [stage, phase]
+  total:   [count, length]
+related: [progress-ui, stepper-ui]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.0.33",
+  "version": "0.2.0",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {
@@ -32,7 +32,7 @@
     "./core/provider.js"
   ],
   "dependencies": {
-    "@adia-ai/a2ui-utils": "^0.0.2"
+    "@adia-ai/a2ui-utils": "^0.2.0"
   },
   "publishConfig": {
     "access": "public",

package/styles/components.css

@@ -70,6 +70,7 @@
 @import "../components/nav/nav.css";
 @import "../components/nav-group/nav-group.css";
 @import "../components/nav-item/nav-item.css";
+@import "../components/step-progress/step-progress.css";
 @import "../components/otp-input/otp-input.css";
 @import "../components/image/image.css";
 @import "../components/search/search.css";