@adia-ai/web-components 0.0.1

package/components/stat/stat.css

@@ -0,0 +1,101 @@
+@scope (stat-ui) {
+  :where(:scope) {
+    /* ── Tokens ──
+       Use size-responsive tokens so stat shrinks when parent card has size="sm". */
+    --stat-value-size:   var(--a-title-size);
+    --stat-value-weight: var(--a-weight-bold);
+    --stat-value-fg:     var(--a-fg-strong);
+    --stat-label-size:   var(--a-ui-size);
+    --stat-label-fg:     var(--a-fg);
+    --stat-change-size:  var(--a-ui-size);
+    --stat-up-fg:        var(--a-success-bg);
+    --stat-down-fg:      var(--a-danger-bg);
+    --stat-icon-fg:      var(--a-fg-muted);
+
+    /* ── Spacing ── */
+    --stat-column-gap:   var(--a-space-3);
+    --stat-row-gap:      var(--a-space-2);
+  }
+
+  :scope {
+    /* ── Base ──
+       Layout:
+         label   icon     ← eyebrow row (icon decorative, auto-width)
+         value            ← full-width hero number
+         change           ← trend delta, full width */
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "label  icon"
+      "value  value"
+      "change change";
+    column-gap: var(--stat-column-gap);
+    row-gap: var(--stat-row-gap);
+    align-items: baseline;
+  }
+
+  /* ── Label (eyebrow) ── */
+  [slot="label"] {
+    grid-area: label;
+    font-size: var(--stat-label-size);
+    color: var(--stat-label-fg);
+    line-height: 1.4;
+    min-width: 0;
+  }
+
+  /* ── Change delta (under value) ── */
+  [slot="change"] {
+    grid-column: 1 / -1;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25em;
+    font-size: var(--stat-change-size);
+    line-height: 1;
+    justify-self: start;
+  }
+
+  /* ── Value ── */
+  [slot="value"] {
+    grid-column: 1 / -1;
+    font-size: var(--stat-value-size);
+    font-weight: var(--stat-value-weight);
+    color: var(--stat-value-fg);
+    line-height: 1.2;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Trend arrows via ::before */
+  :scope[trend="up"] [slot="change"]::before {
+    content: "\25B2";
+    color: var(--stat-up-fg);
+  }
+  :scope[trend="up"] [slot="change"] {
+    color: var(--stat-up-fg);
+  }
+
+  :scope[trend="down"] [slot="change"]::before {
+    content: "\25BC";
+    color: var(--stat-down-fg);
+  }
+  :scope[trend="down"] [slot="change"] {
+    color: var(--stat-down-fg);
+  }
+
+  :scope[trend="neutral"] [slot="change"] {
+    color: var(--stat-label-fg);
+  }
+
+  /* ── Icon ── */
+  [slot="icon"] {
+    grid-area: icon;
+    align-self: start;
+    color: var(--stat-icon-fg);
+    --a-icon-size: 1.25rem;
+  }
+
+  [slot="icon"][hidden] { display: none; }
+}

package/components/stat/stat.js

@@ -0,0 +1,91 @@
+/**
+ * <stat-ui value="1,234" label="Total Users" change="+12%" trend="up"></stat-ui>
+ * <stat-ui value="$42.5k" label="Revenue" change="-3%" trend="down"></stat-ui>
+ * <stat-ui value="99.9%" label="Uptime" icon="check-circle"></stat-ui>
+ *
+ * Metric/KPI display — value + label + optional change indicator.
+ *
+ * Trend: up, down, neutral (colors the change badge accordingly)
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaStat extends AdiaElement {
+  static properties = {
+    value:  { type: String, default: '',  reflect: true },
+    label:  { type: String, default: '',  reflect: true },
+    change: { type: String, default: '',  reflect: true },
+    trend:  { type: String, default: '',  reflect: true },
+    icon:   { type: String, default: '',  reflect: true },
+  };
+
+  static template = () => null;
+
+  #valueEl = null;
+  #labelEl = null;
+  #changeEl = null;
+  #iconEl = null;
+
+  connected() {
+    this.#valueEl = this.querySelector(':scope > [slot="value"]');
+    if (!this.#valueEl) {
+      this.#valueEl = document.createElement('span');
+      this.#valueEl.setAttribute('slot', 'value');
+      this.appendChild(this.#valueEl);
+    }
+
+    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.#changeEl = this.querySelector(':scope > [slot="change"]');
+    if (!this.#changeEl) {
+      this.#changeEl = document.createElement('span');
+      this.#changeEl.setAttribute('slot', 'change');
+      this.appendChild(this.#changeEl);
+    }
+
+    this.#iconEl = this.querySelector(':scope > [slot="icon"]');
+    if (!this.#iconEl) {
+      this.#iconEl = document.createElement('icon-ui');
+      this.#iconEl.setAttribute('slot', 'icon');
+      this.appendChild(this.#iconEl);
+    }
+  }
+
+  render() {
+    if (!this.#valueEl) return;
+
+    this.#valueEl.textContent = this.value;
+    this.#labelEl.textContent = this.label;
+
+    // Change badge
+    if (this.change) {
+      this.#changeEl.textContent = this.change;
+      this.#changeEl.hidden = false;
+    } else {
+      this.#changeEl.hidden = true;
+    }
+
+    // Icon
+    if (this.icon) {
+      this.#iconEl.setAttribute('name', this.icon);
+      this.#iconEl.hidden = false;
+    } else {
+      this.#iconEl.hidden = true;
+    }
+  }
+
+  disconnected() {
+    this.#valueEl = null;
+    this.#labelEl = null;
+    this.#changeEl = null;
+    this.#iconEl = null;
+  }
+}
+customElements.define('stat-ui', AdiaStat);
+
+export { AdiaStat };

package/components/stat/stat.yaml

@@ -0,0 +1,206 @@
+# 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: AdiaStat
+tag: stat-ui
+component: Stat
+category: display
+version: 1
+description: Metric/KPI display — value + label + optional change indicator and trend.
+props:
+  change:
+    description: Change indicator text (e.g. '+12%', '-3%')
+    type: string
+    default: ""
+  icon:
+    description: Icon name displayed in the icon slot
+    type: string
+    default: ""
+  label:
+    description: Eyebrow label describing the metric
+    type: string
+    default: ""
+  trend:
+    description: >-
+      Trend direction or narrative subtitle. Canonical values color the change
+      badge (up=success, down=danger, neutral/flat=muted); any other string
+      renders as caption-style text under the primary value.
+    type: string
+    default: ""
+  value:
+    description: The primary metric value to display
+    type: string
+    default: ""
+events: {}
+slots:
+  change:
+    description: "Child content region for the `change` slot."
+  icon:
+    description: "Icon region — single icon-ui child."
+  label:
+    description: "Label region — control label."
+  value:
+    description: "Child content region for the `value` slot."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens:
+  --stat-change-size:
+    description: Font size for the change badge
+  --stat-column-gap:
+    description: Horizontal gap between grid columns
+  --stat-down-fg:
+    description: Color for downward trend
+  --stat-icon-fg:
+    description: Color for the icon
+  --stat-label-fg:
+    description: Text color for the label
+  --stat-label-size:
+    description: Font size for the label
+  --stat-row-gap:
+    description: Vertical gap between grid rows
+  --stat-up-fg:
+    description: Color for upward trend
+  --stat-value-fg:
+    description: Text color for the primary value
+  --stat-value-size:
+    description: Font size for the primary value
+  --stat-value-weight:
+    description: Font weight for the primary value
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-stat
+    description: Basic Stat usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "Stat",
+          "label": "Example Stat",
+          "value": ""
+        }
+      ]
+keywords:
+  - stat
+  - stats
+  - statistics
+  - kpi
+  - numbers
+  - figures
+  - analytics
+  - reporting
+  - insights
+  - monitor
+  - monitoring
+  - health
+  - overview
+  - summary
+  - telemetry
+  - observability
+  - performance
+  - scoreboard
+synonyms:
+  analytics:
+    - chart
+    - dashboard
+    - metric
+    - stat
+    - leaderboard
+  figures:
+    - stat
+    - metric
+    - chart
+  health:
+    - dashboard
+    - metric
+    - stat
+    - progress
+  insights:
+    - chart
+    - dashboard
+    - metric
+    - stat
+  kpi:
+    - stat
+    - metric
+    - dashboard
+    - chart
+  monitor:
+    - dashboard
+    - metric
+    - stat
+    - chart
+    - progress
+  monitoring:
+    - dashboard
+    - metric
+    - stat
+    - chart
+    - progress
+  numbers:
+    - stat
+    - metric
+  observability:
+    - dashboard
+    - metric
+    - chart
+    - stat
+  overview:
+    - dashboard
+    - metric
+    - stat
+    - card
+  performance:
+    - dashboard
+    - metric
+    - chart
+    - stat
+    - progress
+  reporting:
+    - chart
+    - dashboard
+    - metric
+    - stat
+    - table
+    - data
+  scoreboard:
+    - leaderboard
+    - stat
+  statistics:
+    - stat
+    - metric
+    - dashboard
+    - chart
+  stats:
+    - stat
+    - metric
+    - dashboard
+    - chart
+  summary:
+    - dashboard
+    - metric
+    - stat
+    - card
+  telemetry:
+    - dashboard
+    - metric
+    - chart
+    - stat
+related: []

package/components/stepper/stepper.a2ui.json

@@ -0,0 +1,77 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Stepper.json",
+  "title": "Stepper",
+  "description": "Wizard / process stepper — parent step index drives numbered children.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Stepper"
+    },
+    "orientation": {
+      "description": "horizontal | vertical",
+      "type": "string",
+      "default": "horizontal"
+    },
+    "step": {
+      "description": "Current step index (0-based).",
+      "type": "number",
+      "default": 0
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "navigation",
+    "events": {},
+    "examples": [
+      {
+        "description": "Three-step wizard",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Stepper\",\n    \"step\": 1,\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"StepperItem\",\n    \"text\": \"Account\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"StepperItem\",\n    \"text\": \"Details\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"StepperItem\",\n    \"text\": \"Review\"\n  }\n]",
+        "name": "basic"
+      }
+    ],
+    "keywords": [
+      "stepper",
+      "wizard",
+      "steps",
+      "process",
+      "onboarding",
+      "multi-step"
+    ],
+    "name": "AdiaStepper",
+    "related": [
+      "timeline-ui",
+      "progress-ui"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "timeline-ui mode=steps": "stepper-ui"
+    },
+    "tag": "stepper-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/stepper/stepper.css

@@ -0,0 +1,243 @@
+/* ═══════════════════════════════════════════════════════════════
+   STEPPER-N + STEPPER-ITEM-N
+
+   Extracted from the old timeline-ui[mode="steps"]. Wizard-style
+   numbered circles, auto-checkmark on completed, connector line.
+   Parent `step` index drives child state.
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (stepper-ui) {
+  :where(:scope) {
+    /* ── Circle ── */
+    --stepper-size:            2rem;
+    --stepper-bg:              var(--a-bg);
+    --stepper-border:          var(--a-border);
+    --stepper-fg:              var(--a-fg-muted);
+    --stepper-font:            var(--a-ui-sm);
+    --stepper-weight:          var(--a-weight-medium);
+    --stepper-border-size:     2px;
+
+    --stepper-active-bg:       var(--a-bg);
+    --stepper-active-border:   var(--a-accent);
+    --stepper-active-fg:       var(--a-accent);
+
+    --stepper-done-bg:         var(--a-accent);
+    --stepper-done-border:     var(--a-accent);
+    --stepper-done-fg:         var(--a-accent-fg);
+
+    --stepper-line:            var(--a-border-subtle);
+    --stepper-line-done:       var(--a-accent);
+    --stepper-line-size:       2px;
+
+    /* ── Layout ── */
+    --stepper-radius-full:     var(--a-radius-full);
+    --stepper-item-gap:        var(--a-space-3);
+    --stepper-item-gap-sm:     var(--a-space-2);
+    --stepper-pad-x:           var(--a-space-4);
+    --stepper-pad-y:           var(--a-space-6);
+    --stepper-offset-xs:       var(--a-space-1);
+    --stepper-min-width:       5rem;
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    counter-reset: step;
+    gap: 0;
+    min-width: 0;
+  }
+
+  :scope[orientation="vertical"] {
+    flex-direction: column;
+  }
+}
+
+/* ── Item tokens + label/description styling ── */
+:where(stepper-item-ui) {
+  --stepper-label-weight:  var(--a-weight-medium);
+  --stepper-label-size:    var(--a-ui-size);
+  --stepper-label-fg:      var(--a-fg);
+  --stepper-pending-fg:    var(--a-fg-muted);
+  --stepper-desc-fg:       var(--a-fg-subtle);
+  --stepper-desc-size:     var(--a-ui-sm);
+}
+
+stepper-item-ui {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  counter-increment: step;
+  flex: 1;
+  min-width: var(--stepper-min-width);
+  text-align: center;
+  padding-top: calc(var(--stepper-size) + var(--stepper-item-gap-sm));
+  padding-left: 0;
+  padding-bottom: 0;
+}
+
+/* Numbered circle */
+stepper-item-ui::after {
+  content: counter(step);
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: var(--stepper-size);
+  height: var(--stepper-size);
+  border-radius: var(--stepper-radius-full);
+  border: var(--stepper-border-size) solid var(--stepper-border);
+  background: var(--stepper-bg);
+  color: var(--stepper-fg);
+  font-size: var(--stepper-font);
+  font-weight: var(--stepper-weight);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  z-index: 1;
+}
+
+/* Connector line */
+stepper-item-ui::before {
+  content: '';
+  position: absolute;
+  top: calc(var(--stepper-size) / 2);
+  left: calc(50% + var(--stepper-size) / 2 + 2px);
+  right: calc(-50% + var(--stepper-size) / 2 + 2px);
+  height: var(--stepper-line-size);
+  background: var(--stepper-line);
+}
+
+stepper-item-ui[data-last]::before {
+  display: none;
+}
+
+/* Active state */
+stepper-item-ui[active]::after {
+  border-color: var(--stepper-active-border);
+  color: var(--stepper-active-fg);
+  background: var(--stepper-active-bg);
+}
+
+stepper-item-ui[active] [slot="label"] {
+  color: var(--stepper-label-fg);
+  font-weight: var(--stepper-label-weight);
+}
+
+/* Completed state — checkmark replaces number */
+stepper-item-ui[completed]::after {
+  content: '\2713';
+  background: var(--stepper-done-bg);
+  border-color: var(--stepper-done-border);
+  color: var(--stepper-done-fg);
+}
+
+stepper-item-ui[completed]::before {
+  background: var(--stepper-line-done);
+}
+
+stepper-item-ui[completed] [slot="label"] {
+  color: var(--stepper-label-fg);
+}
+
+/* Pending label */
+stepper-item-ui:not([active]):not([completed]) [slot="label"] {
+  color: var(--stepper-pending-fg);
+}
+
+/* Icon replaces number */
+stepper-item-ui:has([slot="icon"])::after {
+  content: '';
+  font-size: 0;
+}
+
+stepper-item-ui [slot="icon"] {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: var(--stepper-size);
+  height: var(--stepper-size);
+  border-radius: var(--stepper-radius-full);
+  border: var(--stepper-border-size) solid var(--stepper-border);
+  background: var(--stepper-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --a-icon-size: 0.625rem;
+  color: var(--stepper-fg);
+  z-index: 1;
+}
+
+stepper-item-ui[active] [slot="icon"] {
+  border-color: var(--stepper-active-border);
+  color: var(--stepper-active-fg);
+  background: var(--stepper-active-bg);
+}
+
+stepper-item-ui[completed] [slot="icon"] {
+  background: var(--stepper-done-bg);
+  border-color: var(--stepper-done-border);
+  color: var(--stepper-done-fg);
+}
+
+/* ── Content slots ── */
+
+stepper-item-ui [slot="label"] {
+  display: block;
+  font-weight: var(--stepper-label-weight);
+  font-size: var(--stepper-label-size);
+  line-height: 1.4;
+  color: var(--stepper-label-fg);
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+
+stepper-item-ui [slot="description"] {
+  display: block;
+  margin-top: var(--stepper-offset-xs);
+  color: var(--stepper-desc-fg);
+  font-size: var(--stepper-desc-size);
+  line-height: 1.5;
+}
+
+stepper-item-ui [slot]:empty {
+  display: none;
+}
+
+/* ── Vertical orientation ── */
+
+stepper-ui[orientation="vertical"] > stepper-item-ui {
+  flex: none;
+  text-align: left;
+  padding-top: 0;
+  padding-left: calc(var(--stepper-size) + var(--stepper-pad-x));
+  padding-bottom: var(--stepper-pad-y);
+  min-height: var(--stepper-size);
+}
+
+stepper-ui[orientation="vertical"] > stepper-item-ui::after {
+  left: 0;
+  top: 0;
+  transform: none;
+}
+
+stepper-ui[orientation="vertical"] > stepper-item-ui::before {
+  left: calc(var(--stepper-size) / 2 - 1px);
+  transform: none;
+  top: calc(var(--stepper-size) + var(--stepper-offset-xs));
+  right: auto;
+  width: var(--stepper-line-size);
+  height: auto;
+  bottom: 0;
+}
+
+stepper-ui[orientation="vertical"] > stepper-item-ui [slot="icon"] {
+  left: 0;
+  transform: none;
+}
+
+stepper-ui[orientation="vertical"] > stepper-item-ui[data-last] {
+  padding-bottom: 0;
+}