@adia-ai/web-components 0.0.1

package/components/range/range.js

@@ -0,0 +1,177 @@
+/**
+ * <range-input label="Width" value="63" min="0" max="100" step="1" suffix="rem"></range-input>
+ *
+ * A draggable numeric field — NOT a slider. The entire field is the scrubber surface.
+ * Horizontal drag on the value changes it. No track, no thumb.
+ *
+ * Layout: [label]  [value] [suffix]
+ *   - Label left-aligned, muted
+ *   - Value right-aligned, bold, editable via horizontal drag
+ *   - Suffix after value, muted
+ *   - While dragging: accent highlight on the field
+ */
+
+import { AdiaFormElement } from '@core/form.js';
+
+class AdiaRange extends AdiaFormElement {
+  static properties = {
+    ...AdiaFormElement.properties,
+    /** value: Number — overrides AdiaFormElement.value (String); syncs as string on form submit. */
+    value:  { type: Number,  default: 0,  reflect: true },
+    min:    { type: Number,  default: 0,  reflect: true },
+    max:    { type: Number,  default: 100, reflect: true },
+    step:   { type: Number,  default: 1,  reflect: true },
+    label:  { type: String,  default: '', reflect: true },
+    suffix: { type: String,  default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #fieldEl = null;
+  #valueEl = null;
+  #dragging = false;
+  #startX = 0;
+  #startVal = 0;
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'spinbutton');
+    this.setAttribute('tabindex', '0');
+
+    if (!this.querySelector('[slot="field"]')) {
+      const inner = `
+        <span slot="label">${this.label}</span>
+        <span slot="value">${this.#format(this.value)}</span>
+        ${this.suffix ? `<span slot="suffix">${this.suffix}</span>` : ''}
+      `;
+      this.innerHTML = `
+        <div slot="field">
+          <div slot="layer" data-layer="base">${inner}</div>
+          <div slot="layer" data-layer="fill" aria-hidden="true">${inner}</div>
+        </div>
+      `;
+    }
+
+    this.#fieldEl = this.querySelector('[slot="field"]');
+    this.#valueEl = this.querySelector('[data-layer="base"] [slot="value"]');
+
+    if (this.#fieldEl) this.#fieldEl.addEventListener('pointerdown', this.#onPointerDown);
+    this.addEventListener('keydown', this.#onKey);
+  }
+
+  render() {
+    if (!this.#fieldEl) return;
+
+    const formatted = this.#format(this.value);
+    if (this.#valueEl) this.#valueEl.textContent = formatted;
+    const fillValueEl = this.querySelector('[data-layer="fill"] [slot="value"]');
+    if (fillValueEl) fillValueEl.textContent = formatted;
+
+    // Update fill percentage via CSS var (drives clip-path on fill layer)
+    const range = this.max - this.min;
+    const pct = range > 0 ? ((this.value - this.min) / range) * 100 : 0;
+    this.style.setProperty('--range-fill-pct', `${pct}%`);
+
+    this.setAttribute('aria-valuemin', this.min);
+    this.setAttribute('aria-valuemax', this.max);
+    this.setAttribute('aria-valuenow', this.value);
+    this.setAttribute('aria-valuetext', `${this.value}${this.suffix ? ' ' + this.suffix : ''}`);
+    this.setAttribute('aria-label', this.label || '');
+
+    this.syncValue(String(this.value));
+  }
+
+  #format(v) {
+    // Show decimal places matching step precision
+    const decimals = (String(this.step).split('.')[1] || '').length;
+    return decimals > 0 ? v.toFixed(decimals) : String(v);
+  }
+
+  #snap(raw) {
+    const stepped = Math.round((raw - this.min) / this.step) * this.step + this.min;
+    return Math.max(this.min, Math.min(this.max, parseFloat(stepped.toFixed(10))));
+  }
+
+  #setValue(v) {
+    const snapped = this.#snap(v);
+    if (snapped === this.value) return;
+    this.value = snapped;
+    this.dispatchEvent(new Event('input', { bubbles: true }));
+  }
+
+  // ── Pointer drag ──
+
+  #valueFromX(clientX) {
+    const rect = this.#fieldEl.getBoundingClientRect();
+    const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    return this.#snap(this.min + ratio * (this.max - this.min));
+  }
+
+  #onPointerDown = (e) => {
+    if (this.disabled) return;
+    e.preventDefault();
+
+    // Click: jump to position immediately
+    this.#setValue(this.#valueFromX(e.clientX));
+
+    // Then start drag from that position
+    this.#dragging = true;
+    this.#startX = e.clientX;
+    this.#startVal = this.value;
+    this.setAttribute('data-dragging', '');
+    this.#fieldEl.setPointerCapture(e.pointerId);
+    this.#fieldEl.addEventListener('pointermove', this.#onPointerMove);
+    this.#fieldEl.addEventListener('pointerup', this.#onPointerUp);
+  };
+
+  #onPointerMove = (e) => {
+    if (!this.#dragging) return;
+    const dx = e.clientX - this.#startX;
+    // 1:1 — dragging across the full field width traverses the full range
+    const fieldWidth = this.#fieldEl.getBoundingClientRect().width;
+    const range = this.max - this.min;
+    const delta = (dx / fieldWidth) * range;
+    this.#setValue(this.#startVal + delta);
+  };
+
+  #onPointerUp = (e) => {
+    this.#dragging = false;
+    this.removeAttribute('data-dragging');
+    this.#fieldEl.releasePointerCapture(e.pointerId);
+    this.#fieldEl.removeEventListener('pointermove', this.#onPointerMove);
+    this.#fieldEl.removeEventListener('pointerup', this.#onPointerUp);
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+
+  // ── Keyboard ──
+
+  #onKey = (e) => {
+    if (this.disabled) return;
+    let v = this.value;
+    switch (e.key) {
+      case 'ArrowRight': case 'ArrowUp':   v += this.step; break;
+      case 'ArrowLeft':  case 'ArrowDown': v -= this.step; break;
+      case 'Home': v = this.min; break;
+      case 'End':  v = this.max; break;
+      case 'PageUp':   v += this.step * 10; break;
+      case 'PageDown': v -= this.step * 10; break;
+      default: return;
+    }
+    e.preventDefault();
+    this.#setValue(v);
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+
+  disconnected() {
+    super.disconnected();
+    this.#fieldEl?.removeEventListener('pointerdown', this.#onPointerDown);
+    this.#fieldEl?.removeEventListener('pointermove', this.#onPointerMove);
+    this.#fieldEl?.removeEventListener('pointerup', this.#onPointerUp);
+    this.removeEventListener('keydown', this.#onKey);
+    this.#fieldEl = null;
+    this.#valueEl = null;
+  }
+}
+customElements.define('range-ui', AdiaRange);
+
+export { AdiaRange };

package/components/range/range.yaml

@@ -0,0 +1,188 @@
+# 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: AdiaRange
+tag: range-ui
+component: Range
+category: input
+version: 1
+description: Draggable numeric field — horizontal drag on the value changes it. No track/thumb, the
+  entire field is the scrubber. Form-associated.
+props:
+  name:
+    description: Form field name
+    type: string
+    default: ""
+  required:
+    description: Required for validation
+    type: boolean
+    default: false
+    reflect: true
+  disabled:
+    description: Disables interaction
+    type: boolean
+    default: false
+    reflect: true
+  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
+  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
+events:
+  change:
+    description: Fired on drag end or keyboard commit
+  input:
+    description: Fired on each value change during drag or keyboard
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+traits: []
+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
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: price-range-filter
+    description: E-commerce price range filter with range slider, min/max number inputs, and apply button.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Price Range",
+          "variant": "section"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "fields"
+          ]
+        },
+        {
+          "id": "fields",
+          "component": "Column",
+          "children": [
+            "range",
+            "inputs-row",
+            "apply-btn"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "range",
+          "component": "Range",
+          "min": 0,
+          "max": 1000,
+          "name": "priceRange"
+        },
+        {
+          "id": "inputs-row",
+          "component": "Row",
+          "children": [
+            "min-input",
+            "separator",
+            "max-input"
+          ],
+          "gap": "3"
+        },
+        {
+          "id": "min-input",
+          "component": "Input",
+          "label": "Min",
+          "type": "number",
+          "name": "minPrice",
+          "placeholder": "0"
+        },
+        {
+          "id": "separator",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "to"
+        },
+        {
+          "id": "max-input",
+          "component": "Input",
+          "label": "Max",
+          "type": "number",
+          "name": "maxPrice",
+          "placeholder": "1000"
+        },
+        {
+          "id": "apply-btn",
+          "component": "Button",
+          "text": "Apply Filter",
+          "variant": "primary"
+        }
+      ]
+keywords:
+  - range
+  - volume
+synonyms:
+  range:
+    - slider
+    - range
+  volume:
+    - slider
+    - range
+    - music
+related:
+  - input
+  - button

package/components/rating/rating.a2ui.json

@@ -0,0 +1,105 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Rating.json",
+  "title": "Rating",
+  "description": "Pictorial discrete rating (stars by default) with optional half-step precision. Supports keyboard, mouse hover preview, and form participation.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "allowHalf": {
+      "description": "Enable 0.5-step precision on click/hover",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Rating"
+    },
+    "icon": {
+      "description": "Phosphor icon name for each symbol (e.g. star, heart, thumbs-up)",
+      "type": "string",
+      "default": "star"
+    },
+    "max": {
+      "description": "Number of rating symbols",
+      "type": "number",
+      "default": 5
+    },
+    "name": {
+      "description": "Form participation — field name when submitted",
+      "type": "string",
+      "default": ""
+    },
+    "readonly": {
+      "description": "Display-only — disables interaction but remains readable",
+      "type": "boolean",
+      "default": false
+    },
+    "size": {
+      "description": "Symbol size",
+      "type": "string",
+      "enum": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md"
+    },
+    "value": {
+      "description": "Current rating value (0..max, supports 0.5 steps when allowHalf)",
+      "type": "number",
+      "default": 0
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "form",
+    "events": {
+      "[object Object]": {
+        "description": "Fired on [object Object]."
+      }
+    },
+    "examples": [],
+    "keywords": [
+      "rating",
+      "stars",
+      "review",
+      "feedback",
+      "score",
+      "vote",
+      "heart",
+      "like"
+    ],
+    "name": "AdiaRating",
+    "related": [],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "rating": [
+        "rating",
+        "star rating",
+        "review score",
+        "feedback rating"
+      ]
+    },
+    "tag": "rating-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/rating/rating.css

@@ -0,0 +1,92 @@
+@scope (rating-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --rating-gap:              var(--a-space-1);
+    --rating-symbol-size:      var(--a-space-5);
+
+    /* ── Colors ── */
+    --rating-fg-empty:         var(--a-fg-muted);
+    --rating-fg-filled:        var(--a-fg-strong);
+    --rating-fg-hover:         var(--a-fg-strong);
+
+    /* ── Interaction ── */
+    --rating-duration:         var(--a-duration-fast);
+    --rating-easing:           var(--a-easing);
+    --rating-focus-ring:       0 0 0 2px var(--a-focus-ring);
+    --rating-focus-offset:     var(--a-space-1);
+    --rating-focus-radius:     var(--a-radius-sm);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--rating-gap);
+    cursor: pointer;
+    user-select: none;
+    line-height: 1;
+  }
+
+  :scope[readonly],
+  :scope[disabled] {
+    cursor: default;
+  }
+  :scope[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  :scope:focus-visible {
+    outline: none;
+    border-radius: var(--rating-focus-radius);
+    box-shadow: var(--rating-focus-ring);
+    outline-offset: var(--rating-focus-offset);
+  }
+
+  [data-rating-symbol] {
+    position: relative;
+    display: inline-block;
+    width:  var(--rating-symbol-size);
+    height: var(--rating-symbol-size);
+    color: var(--rating-fg-empty);
+    transition: color var(--rating-duration) var(--rating-easing);
+  }
+
+  [data-rating-symbol] icon-ui {
+    --a-icon-size: var(--rating-symbol-size);
+    position: absolute;
+    inset: 0;
+  }
+
+  [data-rating-symbol-fg] {
+    color: var(--rating-fg-filled);
+    clip-path: inset(0 100% 0 0);
+    transition: clip-path var(--rating-duration) var(--rating-easing);
+  }
+
+  [data-rating-symbol][data-fill="half"] [data-rating-symbol-fg] {
+    clip-path: inset(0 50% 0 0);
+  }
+  [data-rating-symbol][data-fill="full"] [data-rating-symbol-fg] {
+    clip-path: inset(0 0 0 0);
+  }
+
+  :scope:hover [data-rating-symbol] {
+    color: var(--rating-fg-hover);
+  }
+
+  /* ── Variants override TOKENS only ── */
+  :scope[variant="accent"] {
+    --rating-fg-filled: var(--a-accent-bg);
+    --rating-fg-hover:  var(--a-accent-bg);
+  }
+  :scope[variant="warning"] {
+    --rating-fg-filled: var(--a-warning-bg);
+    --rating-fg-hover:  var(--a-warning-bg);
+  }
+
+  /* ── Size ── */
+  :scope[size="sm"] { --rating-symbol-size: var(--a-space-4); }
+  :scope[size="lg"] { --rating-symbol-size: var(--a-space-7); }
+}

package/components/rating/rating.js

@@ -0,0 +1,138 @@
+/**
+ * <rating-ui> — Discrete pictorial rating (stars by default).
+ *
+ * Supports keyboard (arrows), mouse hover preview, and 0.5-step precision.
+ * The host is role=slider per ARIA APG for custom rating widgets.
+ *
+ *   <rating-ui value="3.5" max="5" allow-half name="review"></rating-ui>
+ *   <rating-ui value="4" icon="heart" variant="accent"></rating-ui>
+ *   <rating-ui value="5" readonly></rating-ui>
+ */
+
+import { AdiaFormElement } from '@core/form.js';
+
+class AdiaRating extends AdiaFormElement {
+  static properties = {
+    ...AdiaFormElement.properties,
+    /** value: Number — overrides AdiaFormElement.value (String); syncs as string on form submit. */
+    value:     { type: Number,  default: 0, reflect: true },
+    max:       { type: Number,  default: 5, reflect: true },
+    icon:      { type: String,  default: 'star', reflect: true },
+    readonly:  { type: Boolean, default: false, reflect: true },
+    allowHalf: { type: Boolean, default: false, reflect: true, attribute: 'allow-half' },
+    size:      { type: String,  default: 'md', reflect: true },
+  };
+
+  static template = () => null;
+
+  #hoverValue = null;
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'slider');
+    this.setAttribute('aria-orientation', 'horizontal');
+    this.setAttribute('aria-valuemin', '0');
+    if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', this.readonly ? '-1' : '0');
+    this.addEventListener('pointermove', this.#onPointer);
+    this.addEventListener('pointerleave', this.#onLeave);
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('keydown', this.#onKey);
+  }
+
+  render() {
+    const max = Number(this.max) || 5;
+    const display = this.#hoverValue ?? (Number(this.value) || 0);
+
+    const symbols = Array.from({ length: max }, (_, i) => {
+      const slotValue = i + 1;
+      const fill =
+        display >= slotValue        ? 'full' :
+        display >= slotValue - 0.5  ? 'half' :
+                                      'empty';
+      return `
+        <span data-rating-symbol data-fill="${fill}" aria-hidden="true">
+          <icon-ui name="${this.icon}" data-rating-symbol-bg></icon-ui>
+          <icon-ui name="${this.icon}" weight="fill" data-rating-symbol-fg></icon-ui>
+        </span>
+      `;
+    }).join('');
+
+    this.innerHTML = symbols;
+    this.setAttribute('aria-valuemax', String(max));
+    this.setAttribute('aria-valuenow', String(Number(this.value) || 0));
+    this.setAttribute('aria-valuetext', `${Number(this.value) || 0} out of ${max}`);
+    if (this.readonly) this.setAttribute('aria-readonly', 'true');
+    else this.removeAttribute('aria-readonly');
+  }
+
+  #valueFromEvent(e) {
+    const symbols = [...this.querySelectorAll('[data-rating-symbol]')];
+    const target = symbols.find(s => s.contains(e.target));
+    if (!target) return null;
+    const idx = symbols.indexOf(target);
+    if (idx === -1) return null;
+    if (this.allowHalf) {
+      const rect = target.getBoundingClientRect();
+      const isHalf = (e.clientX - rect.left) < rect.width / 2;
+      return idx + (isHalf ? 0.5 : 1);
+    }
+    return idx + 1;
+  }
+
+  #onPointer = (e) => {
+    if (this.readonly || this.disabled) return;
+    const v = this.#valueFromEvent(e);
+    if (v == null) return;
+    if (v !== this.#hoverValue) {
+      this.#hoverValue = v;
+      this.render();
+    }
+  };
+
+  #onLeave = () => {
+    if (this.#hoverValue == null) return;
+    this.#hoverValue = null;
+    this.render();
+  };
+
+  #onClick = (e) => {
+    if (this.readonly || this.disabled) return;
+    const v = this.#valueFromEvent(e);
+    if (v == null) return;
+    this.#commit(v);
+  };
+
+  #onKey = (e) => {
+    if (this.readonly || this.disabled) return;
+    const step = this.allowHalf ? 0.5 : 1;
+    const max = Number(this.max) || 5;
+    const v = Number(this.value) || 0;
+    let next = v;
+    if (e.key === 'ArrowRight' || e.key === 'ArrowUp')   { next = Math.min(max, v + step); }
+    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { next = Math.max(0, v - step); }
+    else if (e.key === 'Home') next = 0;
+    else if (e.key === 'End')  next = max;
+    else return;
+    e.preventDefault();
+    this.#commit(next);
+  };
+
+  #commit(v) {
+    this.value = v;
+    this.#hoverValue = null;
+    this.syncValue(String(v));
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.render();
+  }
+
+  disconnected() {
+    super.disconnected();
+    this.removeEventListener('pointermove', this.#onPointer);
+    this.removeEventListener('pointerleave', this.#onLeave);
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+  }
+}
+
+customElements.define('rating-ui', AdiaRating);
+export { AdiaRating };