@adia-ai/web-components 0.0.1

package/components/segmented/segmented.js

@@ -0,0 +1,149 @@
+/**
+ * <segmented-ui value="tab1">
+ *   <segment-ui value="tab1" text="Tab 1"></segment-ui>
+ *   <segment-ui value="tab2" text="Tab 2"></segment-ui>
+ *   <segment-ui value="tab3" text="Tab 3"></segment-ui>
+ * </segmented-ui>
+ *
+ * Mutually exclusive toggle group with animated indicator pill.
+ * Indicator uses CSS transform (GPU-accelerated).
+ */
+
+import { AdiaFormElement } from '@core/form.js';
+import '@components/segment/segment.js';
+
+class AdiaSegmented extends AdiaFormElement {
+  static properties = {
+    ...AdiaFormElement.properties,
+    value: { type: String, default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #indicator = null;
+  #bound = false;
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'radiogroup');
+
+    if (!this.#bound) {
+      this.#bound = true;
+      this.addEventListener('click', this.#handleClick);
+      this.addEventListener('keydown', this.#handleKeydown);
+    }
+
+    // Default to first segment if no value
+    if (!this.value) {
+      const first = this.querySelector('segment-ui:not([disabled])');
+      if (first) this.value = first.value || first.getAttribute('value') || '';
+    }
+  }
+
+  disconnected() {
+    super.disconnected();
+    this.removeEventListener('click', this.#handleClick);
+    this.removeEventListener('keydown', this.#handleKeydown);
+    this.#indicator = null;
+    this.#bound = false;
+  }
+
+  get #segments() {
+    return [...this.querySelectorAll('segment-ui')];
+  }
+
+  get #enabledSegments() {
+    return this.#segments.filter(s => !s.disabled);
+  }
+
+  render() {
+    const segs = this.#segments;
+    if (!segs.length) return;
+
+    // Sync selection state
+    for (const seg of segs) {
+      const segVal = seg.value || seg.getAttribute('value') || '';
+      const isActive = segVal === this.value;
+      if (isActive) {
+        seg.setAttribute('selected', '');
+      } else {
+        seg.removeAttribute('selected');
+      }
+      seg.setAttribute('tabindex', isActive ? '0' : '-1');
+    }
+
+    if (this.label) this.setAttribute('aria-label', this.label);
+
+    this.#updateIndicator(segs);
+  }
+
+  #updateIndicator(segs) {
+    const selectedIdx = segs.findIndex(s => (s.value || s.getAttribute('value') || '') === this.value);
+
+    if (selectedIdx < 0) {
+      this.removeAttribute('data-indicator-ready');
+      return;
+    }
+
+    // Lazy-create indicator (prepend so it's behind segments in paint order)
+    const isNew = !this.#indicator;
+    if (isNew) {
+      this.#indicator = document.createElement('span');
+      this.#indicator.setAttribute('data-indicator', '');
+      this.prepend(this.#indicator);
+    }
+
+    this.style.setProperty('--_segment-count', `${segs.length}`);
+
+    if (isNew) {
+      // First render: position instantly, then enable transition next frame
+      this.#indicator.style.transition = 'none';
+      this.#indicator.style.transform = `translateX(${selectedIdx * 100}%)`;
+      this.setAttribute('data-indicator-ready', '');
+      requestAnimationFrame(() => {
+        if (this.#indicator) this.#indicator.style.transition = '';
+      });
+    } else {
+      this.#indicator.style.transform = `translateX(${selectedIdx * 100}%)`;
+      this.setAttribute('data-indicator-ready', '');
+    }
+  }
+
+  #select(seg) {
+    if (seg.disabled) return;
+    this.value = seg.value;
+    this.syncValue();
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
+  }
+
+  #handleClick = (e) => {
+    const seg = e.target.closest('segment-ui');
+    if (seg && this.contains(seg)) this.#select(seg);
+  };
+
+  #handleKeydown = (e) => {
+    const target = e.target;
+    if (target.tagName !== 'SEGMENT-N') return;
+    const segs = this.#enabledSegments;
+    const idx = segs.indexOf(target);
+    if (idx < 0) return;
+
+    let next;
+    switch (e.key) {
+      case 'ArrowRight': case 'ArrowDown':
+        next = idx < segs.length - 1 ? idx + 1 : 0; break;
+      case 'ArrowLeft': case 'ArrowUp':
+        next = idx > 0 ? idx - 1 : segs.length - 1; break;
+      case 'Home': next = 0; break;
+      case 'End': next = segs.length - 1; break;
+      default: return;
+    }
+
+    e.preventDefault();
+    segs[next].focus();
+    this.#select(segs[next]);
+  };
+}
+customElements.define('segmented-ui', AdiaSegmented);
+
+export { AdiaSegmented };

package/components/segmented/segmented.yaml

@@ -0,0 +1,91 @@
+# 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: AdiaSegmented
+tag: segmented-ui
+component: Segmented
+category: navigation
+version: 1
+description: <segmented-ui value="tab1">
+props:
+  value:
+    description: Value of the currently selected segment.
+    type: string
+    default: ""
+events:
+  change:
+    description: Fired when the selected segment changes. detail contains { value }.
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-segmented
+    description: Basic Segmented usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "Segmented",
+          "value": ""
+        }
+      ]
+keywords:
+  - segmented
+  - options
+  - select
+  - toggle
+  - switch
+  - tab
+  - tabs
+  - button-group
+synonyms:
+  button-group:
+    - toolbar
+    - button
+    - segmented
+  options:
+    - settings
+    - radio
+    - segmented
+    - accordion
+  select:
+    - radio
+    - segmented
+    - form
+  switch:
+    - segmented
+    - radio
+    - settings
+  tab:
+    - tabs
+    - panel
+    - segmented
+  tabs:
+    - tabs
+    - panel
+    - segmented
+  toggle:
+    - segmented
+    - radio
+    - settings
+related: []

package/components/select/select.a2ui.json

@@ -0,0 +1,203 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Select.json",
+  "title": "Select",
+  "description": "Alias for ChoicePicker. Dropdown select with options.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "required": {
+      "description": "Marks the field as required for form validation",
+      "type": "boolean",
+      "default": false
+    },
+    "avatar": {
+      "description": "URL for leading avatar image (takes precedence over icon)",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "Select"
+    },
+    "disabled": {
+      "description": "Disables interaction and dims the control",
+      "type": "boolean",
+      "default": false
+    },
+    "error": {
+      "description": "Validation error message",
+      "type": "string",
+      "default": ""
+    },
+    "free-text": {
+      "description": "With searchable: commit the typed query on Enter when no option matches (unconstrained autocomplete)",
+      "type": "boolean",
+      "default": false
+    },
+    "icon": {
+      "description": "Leading icon name rendered inside the trigger",
+      "type": "string",
+      "default": ""
+    },
+    "label": {
+      "description": "Label text above the trigger",
+      "type": "string",
+      "default": ""
+    },
+    "maxlength": {
+      "description": "Maximum character length for validation",
+      "type": "number",
+      "default": null
+    },
+    "minlength": {
+      "description": "Minimum character length for validation",
+      "type": "number",
+      "default": null
+    },
+    "multiple": {
+      "description": "Enables multi-select (comma-separated values)",
+      "type": "boolean",
+      "default": false
+    },
+    "name": {
+      "description": "Form control name for form data submission",
+      "type": "string",
+      "default": ""
+    },
+    "open": {
+      "description": "Whether the listbox is open",
+      "type": "boolean",
+      "default": false
+    },
+    "pattern": {
+      "description": "Regex pattern for validation",
+      "type": "string",
+      "default": ""
+    },
+    "placeholder": {
+      "description": "Placeholder when no option is selected",
+      "type": "string",
+      "default": "Select..."
+    },
+    "readonly": {
+      "description": "Prevents selection changes while keeping the field focusable",
+      "type": "boolean",
+      "default": false
+    },
+    "searchable": {
+      "description": "Enables a search/filter input inside the listbox",
+      "type": "boolean",
+      "default": false
+    },
+    "value": {
+      "description": "Currently selected option value",
+      "type": "string",
+      "default": ""
+    },
+    "variant": {
+      "description": "Visual variant — default chrome, `outline` for bordered, `ghost` for inline.",
+      "type": "string",
+      "enum": [
+        "default",
+        "outline",
+        "ghost",
+        "soft"
+      ],
+      "default": "default"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "input",
+    "events": {
+      "change": {
+        "description": "Fired when selected value changes"
+      }
+    },
+    "examples": [
+      {
+        "description": "Design system settings page with brand header, photo upload section, bleed/margin controls, and approval workflow.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"photo-sec\",\n      \"settings-sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"hdr-title\",\n      \"hdr-desc\"\n    ]\n  },\n  {\n    \"id\": \"hdr-title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Bleed Design Settings\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"hdr-desc\",\n    \"component\": \"Text\",\n    \"slot\": \"description\",\n    \"textContent\": \"Configure bleed margins, upload artwork, and preview before approval.\",\n    \"variant\": \"body\"\n  },\n  {\n    \"id\": \"photo-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"photo-col\"\n    ]\n  },\n  {\n    \"id\": \"photo-col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"photo-label\",\n      \"photo-img\",\n      \"photo-btn\"\n    ],\n    \"gap\": \"3\"\n  },\n  {\n    \"id\": \"photo-label\",\n    \"component\": \"Text\",\n    \"textContent\": \"Artwork Upload\",\n    \"variant\": \"label\"\n  },\n  {\n    \"id\": \"photo-img\",\n    \"component\": \"Image\",\n    \"src\": \"https://picsum.photos/400/200\",\n    \"aspect\": \"2/1\"\n  },\n  {\n    \"id\": \"photo-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Upload Photo\",\n    \"variant\": \"secondary\"\n  },\n  {\n    \"id\": \"settings-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"settings-col\"\n    ]\n  },\n  {\n    \"id\": \"settings-col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"bleed-mode\",\n      \"bleed-margin\",\n      \"bleed-unit\",\n      \"approved\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"bleed-mode\",\n    \"component\": \"Select\",\n    \"label\": \"Bleed Mode\",\n    \"name\": \"bleed-mode\",\n    \"placeholder\": \"Select mode...\"\n  },\n  {\n    \"id\": \"bleed-margin\",\n    \"component\": \"Input\",\n    \"label\": \"Bleed Margin\",\n    \"name\": \"bleed-margin\",\n    \"type\": \"number\",\n    \"placeholder\": \"e.g. 3\"\n  },\n  {\n    \"id\": \"bleed-unit\",\n    \"component\": \"Select\",\n    \"label\": \"Unit\",\n    \"name\": \"bleed-unit\",\n    \"placeholder\": \"mm\"\n  },\n  {\n    \"id\": \"approved\",\n    \"component\": \"CheckBox\",\n    \"label\": \"Approved for production\",\n    \"name\": \"approved\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"preview-btn\",\n      \"apply-btn\"\n    ]\n  },\n  {\n    \"id\": \"preview-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Preview\",\n    \"variant\": \"secondary\"\n  },\n  {\n    \"id\": \"apply-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Apply\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "bleed-design-settings"
+      },
+      {
+        "description": "Simple account creation form with text fields, select, and action buttons.",
+        "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\": \"Create Account\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"desc\",\n    \"component\": \"Text\",\n    \"slot\": \"description\",\n    \"variant\": \"caption\",\n    \"textContent\": \"Fill in your details\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"form\"\n    ]\n  },\n  {\n    \"id\": \"form\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"name\",\n      \"email\",\n      \"role\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"name\",\n    \"component\": \"Input\",\n    \"label\": \"Full Name\",\n    \"placeholder\": \"Kim Granlund\",\n    \"name\": \"name\",\n    \"required\": true\n  },\n  {\n    \"id\": \"email\",\n    \"component\": \"Input\",\n    \"label\": \"Email\",\n    \"type\": \"email\",\n    \"placeholder\": \"kim@adia.health\",\n    \"name\": \"email\",\n    \"required\": true\n  },\n  {\n    \"id\": \"role\",\n    \"component\": \"Select\",\n    \"label\": \"Role\",\n    \"placeholder\": \"Choose role...\",\n    \"name\": \"role\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"cancel\",\n      \"submit\"\n    ]\n  },\n  {\n    \"id\": \"cancel\",\n    \"component\": \"Button\",\n    \"text\": \"Cancel\",\n    \"variant\": \"ghost\"\n  },\n  {\n    \"id\": \"submit\",\n    \"component\": \"Button\",\n    \"text\": \"Create\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "create-form"
+      }
+    ],
+    "keywords": [
+      "select",
+      "dropdown",
+      "combobox",
+      "autocomplete"
+    ],
+    "name": "AdiaSelect",
+    "related": [
+      "image",
+      "button",
+      "input",
+      "check-box",
+      "upload"
+    ],
+    "slots": {
+      "label": {
+        "description": "Label element above the trigger"
+      },
+      "listbox": {
+        "description": "Popover container for options (role=listbox)"
+      },
+      "trigger": {
+        "description": "Button that opens the listbox"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {
+      "autocomplete": [
+        "combobox",
+        "typeahead",
+        "suggest",
+        "free-text"
+      ],
+      "combobox": [
+        "search",
+        "command",
+        "select",
+        "autocomplete",
+        "typeahead",
+        "filter"
+      ],
+      "dropdown": [
+        "popover",
+        "menu",
+        "select",
+        "form"
+      ]
+    },
+    "tag": "select-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}