@adia-ai/web-components 0.0.1

package/components/skeleton/skeleton.yaml

@@ -0,0 +1,153 @@
+# 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: AdiaSkeleton
+tag: skeleton-ui
+component: Skeleton
+category: display
+version: 1
+description: Placeholder shimmer for loading states. Purely presentational.
+props:
+  height:
+    description: Height of the placeholder.
+    type: string
+    default: 1.2em
+  radius:
+    description: Border radius
+    type: string
+    default: sm
+    enum:
+      - none
+      - sm
+      - md
+      - lg
+      - full
+  static:
+    description: When true, suppress the shimmer animation.
+    type: boolean
+    default: false
+  variant:
+    description: Visual preset — text-line, circle (avatar), rect (card), image (aspect box).
+    type: string
+    default: rect
+    enum: [text, circle, rect, image]
+  width:
+    description: Width of the placeholder.
+    type: string
+    default: 100%
+events: {}
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: loading-skeleton
+    description: Column of skeleton components mimicking a card layout for loading states.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "sk-avatar",
+            "sk-title"
+          ]
+        },
+        {
+          "id": "sk-avatar",
+          "component": "Skeleton",
+          "slot": "icon",
+          "variant": "circle",
+          "width": "40px",
+          "height": "40px"
+        },
+        {
+          "id": "sk-title",
+          "component": "Skeleton",
+          "slot": "heading",
+          "variant": "text",
+          "width": "60%"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "body"
+          ]
+        },
+        {
+          "id": "body",
+          "component": "Column",
+          "gap": "2",
+          "children": [
+            "sk1",
+            "sk2",
+            "sk3",
+            "sk4"
+          ]
+        },
+        {
+          "id": "sk1",
+          "component": "Skeleton",
+          "variant": "text",
+          "width": "100%"
+        },
+        {
+          "id": "sk2",
+          "component": "Skeleton",
+          "variant": "text",
+          "width": "90%"
+        },
+        {
+          "id": "sk3",
+          "component": "Skeleton",
+          "variant": "text",
+          "width": "95%"
+        },
+        {
+          "id": "sk4",
+          "component": "Skeleton",
+          "variant": "text",
+          "width": "70%"
+        }
+      ]
+keywords:
+  - skeleton
+  - loading
+  - spinner
+  - placeholder
+  - shimmer
+synonyms:
+  loading:
+    - loading
+    - skeleton
+    - progress
+    - bar
+  placeholder:
+    - loading
+    - skeleton
+    - empty
+  shimmer:
+    - loading
+    - skeleton
+  skeleton:
+    - loading
+    - skeleton
+  spinner:
+    - loading
+    - skeleton
+    - progress
+related: []

package/components/slider/slider.a2ui.json

@@ -0,0 +1,162 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Slider.json",
+  "title": "Slider",
+  "description": "Range slider with track, fill, and thumb. Supports label, suffix, and keyboard control. 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": "Slider"
+    },
+    "disabled": {
+      "description": "Disables interaction",
+      "type": "boolean",
+      "default": false
+    },
+    "error": {
+      "description": "Validation error",
+      "type": "string",
+      "default": ""
+    },
+    "label": {
+      "description": "Label text above the slider",
+      "type": "string",
+      "default": ""
+    },
+    "max": {
+      "description": "Maximum slider value",
+      "type": "number",
+      "default": 100
+    },
+    "min": {
+      "description": "Minimum slider value",
+      "type": "number",
+      "default": 0
+    },
+    "name": {
+      "description": "Form field name",
+      "type": "string",
+      "default": ""
+    },
+    "showValue": {
+      "description": "Displays current value below the slider",
+      "type": "boolean",
+      "default": false
+    },
+    "step": {
+      "description": "Step increment between values",
+      "type": "number",
+      "default": 1
+    },
+    "suffix": {
+      "description": "Value suffix text",
+      "type": "string",
+      "default": ""
+    },
+    "value": {
+      "description": "Current slider value",
+      "type": "number",
+      "default": 50
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "input",
+    "events": {
+      "change": {
+        "description": "Fired when the value changes (on blur for inputs, on selection for pickers)."
+      },
+      "input": {
+        "description": "Fired on each slider movement"
+      }
+    },
+    "examples": [
+      {
+        "description": "Card with labeled slider components for adjusting values like volume, brightness, and contrast.",
+        "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\": \"Audio & Display\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"sliders\"\n    ]\n  },\n  {\n    \"id\": \"sliders\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"volume\",\n      \"brightness\",\n      \"contrast\"\n    ],\n    \"gap\": \"6\"\n  },\n  {\n    \"id\": \"volume\",\n    \"component\": \"Slider\",\n    \"label\": \"Volume\",\n    \"min\": 0,\n    \"max\": 100,\n    \"value\": 75,\n    \"name\": \"volume\"\n  },\n  {\n    \"id\": \"brightness\",\n    \"component\": \"Slider\",\n    \"label\": \"Brightness\",\n    \"min\": 0,\n    \"max\": 100,\n    \"value\": 50,\n    \"name\": \"brightness\"\n  },\n  {\n    \"id\": \"contrast\",\n    \"component\": \"Slider\",\n    \"label\": \"Contrast\",\n    \"min\": 0,\n    \"max\": 100,\n    \"value\": 60,\n    \"name\": \"contrast\"\n  }\n]",
+        "name": "slider-range"
+      },
+      {
+        "description": "Card with color pickers, theme select, density slider, and preview area for theme customization.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"size\": \"lg\",\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\": \"Theme Customizer\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"desc\",\n    \"component\": \"Text\",\n    \"slot\": \"description\",\n    \"variant\": \"caption\",\n    \"textContent\": \"Personalize your interface appearance\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"fields\"\n    ]\n  },\n  {\n    \"id\": \"fields\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"colors-row\",\n      \"theme-select\",\n      \"density\",\n      \"preview-label\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"colors-row\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"primary-color\",\n      \"accent-color\"\n    ],\n    \"gap\": \"3\"\n  },\n  {\n    \"id\": \"primary-color\",\n    \"component\": \"Input\",\n    \"label\": \"Primary Color\",\n    \"type\": \"color\",\n    \"name\": \"primaryColor\",\n    \"value\": \"#6366f1\"\n  },\n  {\n    \"id\": \"accent-color\",\n    \"component\": \"Input\",\n    \"label\": \"Accent Color\",\n    \"type\": \"color\",\n    \"name\": \"accentColor\",\n    \"value\": \"#f59e0b\"\n  },\n  {\n    \"id\": \"theme-select\",\n    \"component\": \"Select\",\n    \"label\": \"Theme\",\n    \"name\": \"theme\",\n    \"placeholder\": \"Select theme...\"\n  },\n  {\n    \"id\": \"density\",\n    \"component\": \"Slider\",\n    \"label\": \"Density\",\n    \"min\": 1,\n    \"max\": 5,\n    \"value\": 3,\n    \"name\": \"density\"\n  },\n  {\n    \"id\": \"preview-label\",\n    \"component\": \"Text\",\n    \"variant\": \"caption\",\n    \"textContent\": \"Preview will update in real time\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"reset-btn\",\n      \"save-btn\"\n    ]\n  },\n  {\n    \"id\": \"reset-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Reset to Default\",\n    \"variant\": \"ghost\"\n  },\n  {\n    \"id\": \"save-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Save Theme\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "theme-customizer"
+      }
+    ],
+    "keywords": [
+      "slider",
+      "range",
+      "volume"
+    ],
+    "name": "AdiaSlider",
+    "related": [
+      "input",
+      "select",
+      "button",
+      "embed"
+    ],
+    "slots": {
+      "input": {
+        "description": "Native range input element"
+      },
+      "label": {
+        "description": "Label element above the slider"
+      },
+      "value": {
+        "description": "Current value display"
+      }
+    },
+    "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": "slider-ui",
+    "tokens": {
+      "--slider-fill": {
+        "description": "Filled track / thumb color"
+      },
+      "--slider-thumb-size": {
+        "description": "Thumb diameter"
+      },
+      "--slider-track": {
+        "description": "Track background color"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/slider/slider.css

@@ -0,0 +1,137 @@
+@scope (slider-ui) {
+  :where(:scope) {
+    /* ── Layout ── (sizes scale with universal [size] attribute) */
+    --slider-gap:               var(--a-space-1);
+    --slider-readout-gap:       var(--a-space-0-5);
+    --slider-radius:            var(--a-radius-full);
+    --slider-track-height:      calc(var(--a-size) * 0.125);
+    --slider-track-area-height: calc(var(--a-size) * 0.75);
+    --slider-thumb-size:        calc(var(--a-size) * 0.375);
+
+    /* ── Colors ── */
+    --slider-track-bg:          var(--a-bg-muted);
+    --slider-fill-bg:           var(--a-accent-bg);
+    --slider-thumb-bg:          var(--a-accent-bg);
+    --slider-thumb-border:      var(--a-bg); /* intentional: cutout ring must match page bg */
+    --slider-thumb-hover-ring:  0 0 0 4px var(--a-bg-muted);
+    --slider-fill-bg-disabled:  var(--a-border-subtle);
+    --slider-thumb-bg-disabled: var(--a-fg-muted);
+    --slider-label-fg:          var(--a-fg-muted);
+    --slider-value-fg:          var(--a-fg);
+    --slider-suffix-fg:         var(--a-fg-muted);
+
+    /* ── Typography ── */
+    --slider-font-size:         var(--a-ui-size);
+    --slider-value-weight:      var(--a-weight-bold);
+
+    /* ── Transition ── */
+    --slider-duration:          var(--a-duration-fast);
+    --slider-easing:            var(--a-easing);
+
+    /* ── State ── */
+    --slider-focus-ring:        var(--a-focus-ring);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--slider-gap);
+  }
+
+  :scope[data-direction="row"] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+  }
+
+  /* Header row: [label]  [value suffix] */
+  [slot="header"] {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    font-size: var(--slider-font-size);
+  }
+
+  [slot="label"] {
+    color: var(--slider-label-fg);
+  }
+
+  [slot="readout"] {
+    display: flex;
+    align-items: baseline;
+    gap: var(--slider-readout-gap);
+  }
+
+  [slot="value"] {
+    color: var(--slider-value-fg);
+    font-weight: var(--slider-value-weight);
+    font-variant-numeric: tabular-nums;
+  }
+
+  [slot="suffix"] {
+    color: var(--slider-suffix-fg);
+  }
+
+  /* Track */
+  [slot="track"] {
+    position: relative;
+    height: var(--slider-track-area-height);
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    touch-action: none;
+  }
+
+  [slot="fill"] {
+    position: absolute;
+    left: 0;
+    height: var(--slider-track-height);
+    border-radius: var(--slider-radius);
+    background: var(--slider-fill-bg);
+    pointer-events: none;
+  }
+
+  [slot="track"]::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: var(--slider-track-height);
+    border-radius: var(--slider-radius);
+    background: var(--slider-track-bg);
+  }
+
+  /* Thumb */
+  [slot="thumb"] {
+    position: absolute;
+    width: var(--slider-thumb-size);
+    height: var(--slider-thumb-size);
+    border-radius: var(--slider-radius);
+    background: var(--slider-thumb-bg);
+    border: 2px solid var(--slider-thumb-border);
+    transform: translateX(-50%);
+    cursor: grab;
+    touch-action: none;
+    transition:
+      transform var(--slider-duration) var(--slider-easing),
+      box-shadow var(--slider-duration) var(--slider-easing);
+    z-index: 1;
+  }
+  [slot="thumb"]:hover {
+    box-shadow: var(--slider-thumb-hover-ring);
+  }
+  [slot="thumb"]:active {
+    transform: translateX(-50%) scale(1.15);
+    cursor: grabbing;
+  }
+  :scope:focus-visible { outline: none; }
+  :scope:focus-visible [slot="thumb"] { box-shadow: var(--slider-focus-ring); }
+
+  /* Disabled */
+  :scope[disabled] [slot="track"] { cursor: not-allowed; }
+  :scope[disabled] [slot="fill"] { background: var(--slider-fill-bg-disabled); }
+  :scope[disabled] [slot="thumb"] { cursor: not-allowed; background: var(--slider-thumb-bg-disabled); }
+  :scope[disabled] [slot="thumb"]:hover { box-shadow: none; }
+}

package/components/slider/slider.js

@@ -0,0 +1,162 @@
+/**
+ * <slider-ui label="Width" value="63" min="0" max="200" step="1" suffix="rem"></slider-ui>
+ *
+ * Layout:
+ *   [label]                    [value] [suffix]
+ *   [====fill====●─────────────────track──────]
+ */
+
+import { AdiaFormElement } from '@core/form.js';
+
+class AdiaSlider extends AdiaFormElement {
+  static properties = {
+    ...AdiaFormElement.properties,
+    /** value: Number — overrides AdiaFormElement.value (String); syncs as string on form submit. */
+    value:  { type: Number,  default: 50, 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;
+
+  #trackEl = null;
+  #thumbEl = null;
+  #dragging = false;
+
+  get #pct() {
+    const range = this.max - this.min;
+    return range > 0 ? ((this.value - this.min) / range) * 100 : 0;
+  }
+
+  #format(v) {
+    const decimals = (String(this.step).split('.')[1] || '').length;
+    return decimals > 0 ? v.toFixed(decimals) : String(v);
+  }
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'slider');
+    this.setAttribute('tabindex', '0');
+    this.setAttribute('aria-valuemin', this.min);
+    this.setAttribute('aria-valuemax', this.max);
+
+    if (!this.querySelector('[slot="track"]')) {
+      this.innerHTML = `
+        <div slot="header">
+          ${this.label ? `<span slot="label">${this.label}</span>` : ''}
+          <span slot="readout">
+            <span slot="value">${this.#format(this.value)}</span>
+            ${this.suffix ? `<span slot="suffix">${this.suffix}</span>` : ''}
+          </span>
+        </div>
+        <div slot="track">
+          <div slot="fill"></div>
+          <div slot="thumb" tabindex="0"></div>
+        </div>
+      `;
+    }
+
+    this.#trackEl = this.querySelector('[slot="track"]');
+    this.#thumbEl = this.querySelector('[slot="thumb"]');
+
+    if (this.#thumbEl) this.#thumbEl.addEventListener('pointerdown', this.#onPointerDown);
+    if (this.#trackEl) this.#trackEl.addEventListener('click', this.#onTrackClick);
+    this.addEventListener('keydown', this.#onKey);
+  }
+
+  render() {
+    if (!this.#trackEl) return;
+
+    const pct = this.#pct;
+    const fill = this.querySelector('[slot="fill"]');
+    if (fill) fill.style.width = `${pct}%`;
+    if (this.#thumbEl) this.#thumbEl.style.left = `${pct}%`;
+
+    const valueEl = this.querySelector('[slot="value"]');
+    if (valueEl) valueEl.textContent = this.#format(this.value);
+
+    this.setAttribute('aria-valuenow', this.value);
+    this.setAttribute('aria-valuetext', `${this.#format(this.value)}${this.suffix ? ' ' + this.suffix : ''}`);
+    this.syncValue(String(this.value));
+  }
+
+  #valueFromX(clientX) {
+    const rect = this.#trackEl.getBoundingClientRect();
+    const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const raw = this.min + ratio * (this.max - this.min);
+    return this.#snap(raw);
+  }
+
+  #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) {
+    if (v === this.value) return;
+    this.value = v;
+    this.dispatchEvent(new Event('input', { bubbles: true }));
+  }
+
+  #onPointerDown = (e) => {
+    if (this.disabled) return;
+    e.preventDefault();
+    this.#dragging = true;
+    this.#thumbEl.setPointerCapture(e.pointerId);
+    this.#thumbEl.addEventListener('pointermove', this.#onPointerMove);
+    this.#thumbEl.addEventListener('pointerup', this.#onPointerUp);
+  };
+
+  #onPointerMove = (e) => {
+    if (!this.#dragging) return;
+    this.#setValue(this.#valueFromX(e.clientX));
+  };
+
+  #onPointerUp = (e) => {
+    this.#dragging = false;
+    this.#thumbEl.releasePointerCapture(e.pointerId);
+    this.#thumbEl.removeEventListener('pointermove', this.#onPointerMove);
+    this.#thumbEl.removeEventListener('pointerup', this.#onPointerUp);
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+
+  #onTrackClick = (e) => {
+    if (this.disabled || e.target === this.#thumbEl) return;
+    this.#setValue(this.#valueFromX(e.clientX));
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+
+  #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(this.#snap(v));
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+
+  disconnected() {
+    super.disconnected();
+    this.#thumbEl?.removeEventListener('pointerdown', this.#onPointerDown);
+    this.#trackEl?.removeEventListener('click', this.#onTrackClick);
+    this.#thumbEl?.removeEventListener('pointermove', this.#onPointerMove);
+    this.#thumbEl?.removeEventListener('pointerup', this.#onPointerUp);
+    this.removeEventListener('keydown', this.#onKey);
+    this.#trackEl = null;
+    this.#thumbEl = null;
+  }
+}
+customElements.define('slider-ui', AdiaSlider);
+
+export { AdiaSlider };