@adia-ai/web-components 0.0.1

package/components/radio/radio.yaml

@@ -0,0 +1,248 @@
+# 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: AdiaRadio
+tag: radio-ui
+component: Radio
+category: input
+version: 1
+description: Radio button with pure CSS dot. Groups by name attribute. Form-associated.
+props:
+  name:
+    description: Form control name for form data submission
+    type: string
+    default: ""
+  required:
+    description: Marks the radio group as requiring a selection for form validation
+    type: boolean
+    default: false
+    reflect: true
+  checked:
+    description: Whether this radio option is currently selected
+    type: boolean
+    default: false
+    reflect: true
+  disabled:
+    description: Disables interaction and dims the control
+    type: boolean
+    default: false
+    reflect: true
+  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: ""
+  readonly:
+    description: Prevents value changes while keeping the control focusable
+    type: boolean
+    default: false
+    reflect: true
+  value:
+    description: Form value submitted when checked (defaults to 'on' if empty)
+    type: string
+    default: ""
+events:
+  change:
+    description: Fired when this radio becomes selected (bubbles)
+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:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+  - name: focused
+    description: Keyboard focus ring.
+    selector: :focus-visible
+traits:
+  - focusable
+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
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: radio-group
+    description: "Card with radio group for plan selection: Basic, Pro, and Enterprise tiers."
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title",
+            "desc"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Choose a Plan",
+          "variant": "section"
+        },
+        {
+          "id": "desc",
+          "component": "Text",
+          "slot": "description",
+          "variant": "caption",
+          "textContent": "Select the plan that works best for you"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "options"
+          ]
+        },
+        {
+          "id": "options",
+          "component": "Column",
+          "children": [
+            "basic",
+            "pro",
+            "enterprise"
+          ],
+          "gap": "3"
+        },
+        {
+          "id": "basic",
+          "component": "Radio",
+          "label": "Basic — $9/mo",
+          "value": "basic",
+          "name": "plan"
+        },
+        {
+          "id": "pro",
+          "component": "Radio",
+          "label": "Pro — $29/mo",
+          "value": "pro",
+          "name": "plan"
+        },
+        {
+          "id": "enterprise",
+          "component": "Radio",
+          "label": "Enterprise — $99/mo",
+          "value": "enterprise",
+          "name": "plan"
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "confirm-btn"
+          ]
+        },
+        {
+          "id": "confirm-btn",
+          "component": "Button",
+          "text": "Confirm Plan",
+          "variant": "primary",
+          "block": true,
+          "slot": "action"
+        }
+      ]
+keywords:
+  - radio
+  - options
+  - select
+  - checkbox
+  - toggle
+  - switch
+  - survey
+  - questionnaire
+  - poll
+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
+related:
+  - button

package/components/range/range.a2ui.json

@@ -0,0 +1,151 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Range.json",
+  "title": "Range",
+  "description": "Draggable numeric field — horizontal drag on the value changes it. No track/thumb, the entire field is the scrubber. Form-associated.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "required": {
+      "description": "Required for validation",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Range"
+    },
+    "disabled": {
+      "description": "Disables interaction",
+      "type": "boolean",
+      "default": false
+    },
+    "error": {
+      "description": "Validation error",
+      "type": "string",
+      "default": ""
+    },
+    "label": {
+      "description": "Left-aligned label text",
+      "type": "string",
+      "default": ""
+    },
+    "max": {
+      "description": "Maximum value",
+      "type": "number",
+      "default": 100
+    },
+    "min": {
+      "description": "Minimum value",
+      "type": "number",
+      "default": 0
+    },
+    "name": {
+      "description": "Form field name",
+      "type": "string",
+      "default": ""
+    },
+    "step": {
+      "description": "Step increment",
+      "type": "number",
+      "default": 1
+    },
+    "suffix": {
+      "description": "Unit suffix after value (px, rem, %)",
+      "type": "string",
+      "default": ""
+    },
+    "value": {
+      "description": "Current numeric value",
+      "type": "number",
+      "default": 0
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "input",
+    "events": {
+      "change": {
+        "description": "Fired on drag end or keyboard commit"
+      },
+      "input": {
+        "description": "Fired on each value change during drag or keyboard"
+      }
+    },
+    "examples": [
+      {
+        "description": "E-commerce price range filter with range slider, min/max number inputs, and apply button.",
+        "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\": \"Price Range\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"fields\"\n    ]\n  },\n  {\n    \"id\": \"fields\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"range\",\n      \"inputs-row\",\n      \"apply-btn\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"range\",\n    \"component\": \"Range\",\n    \"min\": 0,\n    \"max\": 1000,\n    \"name\": \"priceRange\"\n  },\n  {\n    \"id\": \"inputs-row\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"min-input\",\n      \"separator\",\n      \"max-input\"\n    ],\n    \"gap\": \"3\"\n  },\n  {\n    \"id\": \"min-input\",\n    \"component\": \"Input\",\n    \"label\": \"Min\",\n    \"type\": \"number\",\n    \"name\": \"minPrice\",\n    \"placeholder\": \"0\"\n  },\n  {\n    \"id\": \"separator\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"to\"\n  },\n  {\n    \"id\": \"max-input\",\n    \"component\": \"Input\",\n    \"label\": \"Max\",\n    \"type\": \"number\",\n    \"name\": \"maxPrice\",\n    \"placeholder\": \"1000\"\n  },\n  {\n    \"id\": \"apply-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Apply Filter\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "price-range-filter"
+      }
+    ],
+    "keywords": [
+      "range",
+      "volume"
+    ],
+    "name": "AdiaRange",
+    "related": [
+      "input",
+      "button"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {
+      "range": [
+        "slider",
+        "range"
+      ],
+      "volume": [
+        "slider",
+        "range",
+        "music"
+      ]
+    },
+    "tag": "range-ui",
+    "tokens": {
+      "--range-background": {
+        "description": "Field background"
+      },
+      "--range-border-color": {
+        "description": "Border color"
+      },
+      "--range-fill-background": {
+        "description": "Fill bar background"
+      },
+      "--range-height": {
+        "description": "Field height"
+      },
+      "--range-label-color": {
+        "description": "Label text color"
+      },
+      "--range-radius": {
+        "description": "Border radius"
+      },
+      "--range-value-color": {
+        "description": "Value text color"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/range/range.css

@@ -0,0 +1,148 @@
+@scope (range-ui) {
+  :where(:scope) {
+    /* ── Tokens (wired to --a-ui-*) ── */
+    --range-bg:              var(--a-ui-bg);
+    --range-fill-bg:         var(--a-ui-bg);
+    --range-fill-bg-hover:   var(--a-ui-bg-hover);
+    --range-fill-bg-active:  var(--a-ui-bg-active);
+    --range-fill-bg-disabled: var(--a-canvas-muted);
+    --range-fill-fg:         var(--a-ui-fg);
+    --range-fill-fg-disabled: var(--a-ui-text-disabled);
+    --range-fill-label-fg:   var(--a-ui-text-subtle);
+    --range-border:          var(--a-ui-border);
+    --range-border-hover:    var(--a-ui-border-hover);
+    --range-border-focus:    var(--a-ui-border-active);
+    --range-radius:          var(--a-radius);
+    --range-height:          var(--a-size);
+    --range-px:              var(--a-ui-px);
+    --range-font-size:       var(--a-ui-size);
+    --range-label-fg:        var(--a-ui-text-placeholder);
+    --range-value-fg:        var(--a-ui-text);
+    --range-value-weight:    var(--a-weight-bold);
+    --range-suffix-fg:       var(--a-ui-text-placeholder);
+    --range-fill-pct:        0%;
+
+    /* ── Transitions ── */
+    --range-duration:        var(--a-duration-fast);
+    --range-easing:          var(--a-easing);
+
+    /* ── Layout ── */
+    --range-layer-gap:       var(--a-space-1);
+
+    /* ── Hover text ── */
+    --range-label-fg-hover:  var(--a-fg-subtle);
+
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: block;
+    cursor: ew-resize;
+  }
+  :scope[disabled] { cursor: not-allowed; }
+
+  [slot="field"] {
+    position: relative;
+    display: block;
+    min-height: var(--range-height);
+    border: 1px solid var(--range-border);
+    border-radius: var(--range-radius);
+    overflow: hidden;
+    background: var(--range-bg);
+    font: inherit;
+    font-size: var(--range-font-size);
+    line-height: 1;
+    transition:
+      border-color var(--range-duration) var(--range-easing),
+      background var(--range-duration) var(--range-easing);
+    user-select: none;
+    touch-action: none;
+  }
+  [slot="field"]:hover {
+    border-color: var(--range-border-hover);
+  }
+  :scope:focus-visible { outline: none; }
+  :scope:focus-visible [slot="field"] {
+    border-color: var(--range-border-focus);
+  }
+
+  /* ── Dual-layer fill: identical layouts, overlay clipped to fill % ── */
+  [slot="layer"] {
+    display: flex;
+    align-items: center;
+    gap: var(--range-layer-gap);
+    min-height: var(--range-height);
+    padding: 0 var(--range-px);
+    box-sizing: border-box;
+  }
+
+  [data-layer="fill"] {
+    position: absolute;
+    inset: 0;
+    background: var(--range-fill-bg);
+    clip-path: inset(0 calc(100% - var(--range-fill-pct)) 0 0);
+    pointer-events: none;
+    transition: clip-path var(--range-duration) var(--range-easing);
+  }
+
+  /* Base layer text colors */
+  [data-layer="base"] [slot="label"]  { color: var(--range-label-fg); }
+  [data-layer="base"] [slot="value"]  { color: var(--range-value-fg); font-weight: var(--range-value-weight); }
+  [data-layer="base"] [slot="suffix"] { color: var(--range-suffix-fg); }
+
+  /* Fill layer text colors (what shows through the filled portion) */
+  [data-layer="fill"] [slot="label"]  { color: var(--range-fill-label-fg); }
+  [data-layer="fill"] [slot="value"]  { color: var(--range-fill-fg); font-weight: var(--range-value-weight); }
+  [data-layer="fill"] [slot="suffix"] { color: var(--range-fill-fg); opacity: 0.75; }
+
+  /* Shared layout rules */
+  [slot="label"] {
+    white-space: nowrap;
+  }
+  [slot="value"] {
+    margin-inline-start: auto;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+  [slot="suffix"] {
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  /* Hover / focus label brightening on base only */
+  [slot="field"]:hover [data-layer="base"] [slot="label"],
+  :scope:focus-visible [data-layer="base"] [slot="label"] {
+    color: var(--range-label-fg-hover);
+  }
+  [slot="field"]:hover [data-layer="base"] [slot="suffix"],
+  :scope:focus-visible [data-layer="base"] [slot="suffix"] {
+    color: var(--range-label-fg-hover);
+  }
+
+  /* Hover: brighten the fill */
+  :scope:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
+    background: var(--range-fill-bg-hover);
+  }
+
+  /* Dragging: deepest fill, sharper border, instant (no transition lag on the clip) */
+  :scope[data-dragging] [slot="field"] {
+    border-color: var(--range-border-focus);
+  }
+  :scope[data-dragging] [data-layer="fill"] {
+    background: var(--range-fill-bg-active);
+    transition: none;
+  }
+
+  /* Disabled: muted fill + muted text */
+  :scope[disabled] [data-layer="fill"] {
+    background: var(--range-fill-bg-disabled);
+  }
+  :scope[disabled] [data-layer="fill"] [slot="value"],
+  :scope[disabled] [data-layer="fill"] [slot="suffix"],
+  :scope[disabled] [data-layer="fill"] [slot="label"] {
+    color: var(--range-fill-fg-disabled);
+  }
+
+  /* Size handled by universal [size] attribute system. */
+}