@adia-ai/web-components 0.0.1

package/components/progress-row/progress-row.js

@@ -0,0 +1,92 @@
+/**
+ * <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 { AdiaElement } from '@core/element.js';
+
+class AdiaProgressRow extends AdiaElement {
+  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');
+      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');
+    }
+  }
+}
+
+customElements.define('progress-row-ui', AdiaProgressRow);
+
+export { AdiaProgressRow };

package/components/progress-row/progress-row.yaml

@@ -0,0 +1,87 @@
+# 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: AdiaProgressRow
+tag: progress-row-ui
+component: ProgressRow
+category: data
+version: 1
+description: Inline labeled progress row with label, progress bar, and meta text. Used for storage
+  quotas, capacity breakdowns, usage indicators.
+props:
+  label:
+    description: Left-hand label text
+    type: string
+    default: ""
+  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
+  max:
+    description: Upper bound for value. Defaults to 100.
+    type: number
+    default: 100
+  icon:
+    description: Optional Phosphor icon name rendered leading the label.
+    type: string
+    default: ""
+  variant:
+    description: Color variant for the progress fill
+    type: string
+    default: ""
+    enum:
+      - success
+      - warning
+      - danger
+      - info
+      - primary
+events: {}
+slots:
+  label:
+    description: "Label region — control label."
+  meta:
+    description: "Child content region for the `meta` slot."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-progress-row
+    description: Basic ProgressRow usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "ProgressRow",
+          "label": "Example ProgressRow"
+        }
+      ]
+keywords:
+  - progressrow
+  - progress-row
+  - progress
+  - row
+synonyms: {}
+related: []

package/components/radio/radio.a2ui.json

@@ -0,0 +1,232 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Radio.json",
+  "title": "Radio",
+  "description": "Radio button with pure CSS dot. Groups by name attribute. Form-associated.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "required": {
+      "description": "Marks the radio group as requiring a selection for form validation",
+      "type": "boolean",
+      "default": false
+    },
+    "checked": {
+      "description": "Whether this radio option is currently selected",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Radio"
+    },
+    "disabled": {
+      "description": "Disables interaction and dims the control",
+      "type": "boolean",
+      "default": false
+    },
+    "error": {
+      "description": "Validation error message displayed by the parent form wrapper",
+      "type": "string",
+      "default": ""
+    },
+    "hint": {
+      "description": "Helper text displayed below the label",
+      "type": "string",
+      "default": ""
+    },
+    "label": {
+      "description": "Label text, rendered via CSS attr(label) on ::after",
+      "type": "string",
+      "default": ""
+    },
+    "name": {
+      "description": "Form control name for form data submission",
+      "type": "string",
+      "default": ""
+    },
+    "readonly": {
+      "description": "Prevents value changes while keeping the control focusable",
+      "type": "boolean",
+      "default": false
+    },
+    "value": {
+      "description": "Form value submitted when checked (defaults to 'on' if empty)",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "input",
+    "events": {
+      "change": {
+        "description": "Fired when this radio becomes selected (bubbles)"
+      }
+    },
+    "examples": [
+      {
+        "description": "Card with radio group for plan selection: Basic, Pro, and Enterprise tiers.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\",\n      \"desc\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Choose a Plan\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"desc\",\n    \"component\": \"Text\",\n    \"slot\": \"description\",\n    \"variant\": \"caption\",\n    \"textContent\": \"Select the plan that works best for you\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"options\"\n    ]\n  },\n  {\n    \"id\": \"options\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"basic\",\n      \"pro\",\n      \"enterprise\"\n    ],\n    \"gap\": \"3\"\n  },\n  {\n    \"id\": \"basic\",\n    \"component\": \"Radio\",\n    \"label\": \"Basic — $9/mo\",\n    \"value\": \"basic\",\n    \"name\": \"plan\"\n  },\n  {\n    \"id\": \"pro\",\n    \"component\": \"Radio\",\n    \"label\": \"Pro — $29/mo\",\n    \"value\": \"pro\",\n    \"name\": \"plan\"\n  },\n  {\n    \"id\": \"enterprise\",\n    \"component\": \"Radio\",\n    \"label\": \"Enterprise — $99/mo\",\n    \"value\": \"enterprise\",\n    \"name\": \"plan\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"confirm-btn\"\n    ]\n  },\n  {\n    \"id\": \"confirm-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Confirm Plan\",\n    \"variant\": \"primary\",\n    \"block\": true,\n    \"slot\": \"action\"\n  }\n]",
+        "name": "radio-group"
+      }
+    ],
+    "keywords": [
+      "radio",
+      "options",
+      "select",
+      "checkbox",
+      "toggle",
+      "switch",
+      "survey",
+      "questionnaire",
+      "poll"
+    ],
+    "name": "AdiaRadio",
+    "related": [
+      "button"
+    ],
+    "slots": {
+      "dot": {
+        "description": "Radio dot indicator, sized via --dot-size"
+      },
+      "hint": {
+        "description": "Hint text container, rendered via CSS attr(hint) on ::after"
+      },
+      "label": {
+        "description": "Label text container, rendered via CSS attr(label) on ::after"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      },
+      {
+        "description": "Keyboard focus ring.",
+        "name": "focused",
+        "selector": ":focus-visible"
+      }
+    ],
+    "synonyms": {
+      "checkbox": [
+        "radio",
+        "checklist",
+        "form"
+      ],
+      "options": [
+        "settings",
+        "radio",
+        "segmented",
+        "accordion"
+      ],
+      "poll": [
+        "form",
+        "radio",
+        "chart"
+      ],
+      "questionnaire": [
+        "form",
+        "create",
+        "radio",
+        "wizard"
+      ],
+      "select": [
+        "radio",
+        "segmented",
+        "form"
+      ],
+      "survey": [
+        "form",
+        "create",
+        "radio"
+      ],
+      "switch": [
+        "segmented",
+        "radio",
+        "settings"
+      ],
+      "toggle": [
+        "segmented",
+        "radio",
+        "settings"
+      ]
+    },
+    "tag": "radio-ui",
+    "tokens": {
+      "--radio-checked-background": {
+        "description": "Override checked state background"
+      },
+      "--radio-checked-border-color": {
+        "description": "Override checked state border color"
+      },
+      "--radio-checked-foreground": {
+        "description": "Override inner dot color when checked"
+      },
+      "--radio-disabled-opacity": {
+        "description": "Override disabled state opacity"
+      },
+      "--radio-dot-background": {
+        "description": "Override default dot background"
+      },
+      "--radio-dot-border-color": {
+        "description": "Override default dot border color"
+      },
+      "--radio-dot-radius": {
+        "description": "Override dot border radius"
+      },
+      "--radio-dot-size": {
+        "description": "Override dot diameter (default: 64% of --a-content-height)"
+      },
+      "--radio-focus-color": {
+        "description": "Override focus ring color"
+      },
+      "--radio-gap": {
+        "description": "Override gap between dot and label"
+      },
+      "--radio-hint-color": {
+        "description": "Override hint text color"
+      },
+      "--radio-hint-font-size": {
+        "description": "Override hint font size"
+      },
+      "--radio-hover-border-color": {
+        "description": "Override hover state border color"
+      },
+      "--radio-label-color": {
+        "description": "Override label text color"
+      },
+      "--radio-label-font-family": {
+        "description": "Override label font family"
+      },
+      "--radio-label-font-size": {
+        "description": "Override label font size"
+      },
+      "--radio-label-line-height": {
+        "description": "Override label line height"
+      },
+      "--radio-transition": {
+        "description": "Override transition timing"
+      }
+    },
+    "traits": [
+      "focusable"
+    ],
+    "version": 1
+  }
+}

package/components/radio/radio.css

@@ -0,0 +1,102 @@
+@scope (radio-ui) {
+  :where(:scope) {
+    /* ── Layout ── (size scales with universal [size] attribute via --a-toggle-size) */
+    --radio-size:             var(--a-toggle-size);
+    --radio-gap:              var(--a-space-2);
+    --radio-radius:           var(--a-radius-full);
+
+    /* ── Colors ── */
+    --radio-bg:               var(--a-ui-bg);
+    --radio-border:           var(--a-ui-border);
+    --radio-border-hover:     var(--a-fg-subtle);
+    --radio-bg-hover:         var(--a-bg-muted);
+
+    /* ── State: checked ── */
+    --radio-bg-checked:       var(--a-primary);
+    --radio-border-checked:   var(--a-primary);
+    --radio-fg-checked:       white;
+    --radio-bg-checked-hover: var(--a-primary-hover);
+
+    /* ── State: disabled ── */
+    --radio-fg-disabled:      var(--a-fg-muted);
+
+    /* ── State: focus ── */
+    --radio-focus-ring:       var(--a-focus-ring);
+
+    /* ── Typography ── */
+    --radio-font-size:        var(--a-ui-size);
+
+    /* ── Transition ── */
+    --radio-duration:         var(--a-duration-fast);
+    --radio-easing:           var(--a-easing);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--radio-gap);
+    cursor: pointer;
+    user-select: none;
+    font-size: var(--radio-font-size);
+    outline: none;
+  }
+  :scope[disabled] { cursor: not-allowed; color: var(--radio-fg-disabled); }
+
+  /* Dot */
+  [slot="dot"] {
+    flex-shrink: 0;
+    width: var(--radio-size);
+    height: var(--radio-size);
+    border: 1.5px solid var(--radio-border);
+    border-radius: var(--radio-radius);
+    background: var(--radio-bg);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      background var(--radio-duration) var(--radio-easing),
+      border-color var(--radio-duration) var(--radio-easing);
+  }
+
+  /* Inner dot — scales from 0 to 40% when checked */
+  [slot="dot"]::after {
+    content: '';
+    width: 0;
+    height: 0;
+    border-radius: var(--radio-radius);
+    background: var(--radio-fg-checked);
+    transition:
+      width var(--radio-duration) var(--radio-easing),
+      height var(--radio-duration) var(--radio-easing);
+  }
+
+  :scope[checked] [slot="dot"]::after {
+    width: calc(var(--radio-size) * 0.6);
+    height: calc(var(--radio-size) * 0.6);
+  }
+
+  :scope:not([disabled]):hover [slot="dot"] {
+    border-color: var(--radio-border-hover);
+    background: var(--radio-bg-hover);
+  }
+
+  :scope[checked] [slot="dot"] {
+    background: var(--radio-bg-checked);
+    border-color: var(--radio-border-checked);
+  }
+
+  :scope[checked]:not([disabled]):hover [slot="dot"] {
+    background: var(--radio-bg-checked-hover);
+    border-color: var(--radio-bg-checked-hover);
+  }
+
+  /* Label */
+  :scope[label]::after { content: attr(label); }
+
+  /* Focus */
+  :scope:focus-visible [slot="dot"] { box-shadow: var(--radio-focus-ring); }
+
+  /* Size handled by universal [size] attribute system. */
+}

package/components/radio/radio.js

@@ -0,0 +1,73 @@
+/**
+ * <radio-ui> — Radio button. The host IS the control.
+ * Pure CSS dot via [slot="dot"]::after inner circle. No SVG, no inset shadow hack.
+ */
+
+import { AdiaFormElement } from '@core/form.js';
+import { html } from '@core/element.js';
+
+class AdiaRadio extends AdiaFormElement {
+  static properties = {
+    ...AdiaFormElement.properties,
+    checked:  { type: Boolean, default: false, reflect: true },
+    label:    { type: String,  default: '', reflect: true },
+  };
+
+  static template = () => html`<span slot="dot"></span>`;
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'radio');
+    this.setAttribute('tabindex', '0');
+    this.addEventListener('click', this.#select);
+    this.addEventListener('keydown', this.#onKey);
+  }
+
+  render() {
+    this.setAttribute('aria-checked', String(this.checked));
+    if (this.label) this.setAttribute('aria-label', this.label);
+    if (this.checked) this.syncValue(this.value || 'on');
+  }
+
+  #select = () => {
+    if (this.disabled || this.checked) return;
+    const group = this.closest('fieldset, [role="radiogroup"]') || this.parentElement;
+    if (group) {
+      for (const r of group.querySelectorAll(`radio-ui[name="${this.name}"]`)) {
+        if (r !== this && r.checked) r.checked = false;
+      }
+    }
+    this.checked = true;
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+
+  #onKey = (e) => {
+    if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); this.#select(); }
+    if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+      e.preventDefault();
+      const next = this.#sibling(1);
+      if (next) { next.focus(); next.click(); }
+    }
+    if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+      e.preventDefault();
+      const prev = this.#sibling(-1);
+      if (prev) { prev.focus(); prev.click(); }
+    }
+  };
+
+  #sibling(dir) {
+    const group = this.closest('fieldset, [role="radiogroup"]') || this.parentElement;
+    const radios = [...(group?.querySelectorAll(`radio-ui[name="${this.name}"]`) || [])];
+    const i = radios.indexOf(this);
+    return radios[(i + dir + radios.length) % radios.length] || null;
+  }
+
+  disconnected() {
+    super.disconnected();
+    this.removeEventListener('click', this.#select);
+    this.removeEventListener('keydown', this.#onKey);
+  }
+}
+customElements.define('radio-ui', AdiaRadio);
+
+export { AdiaRadio };