@adia-ai/web-components 0.0.1

package/components/search/search.js

@@ -0,0 +1,124 @@
+/**
+ * <search-ui placeholder="Search..."></search-ui>
+ * <search-ui debounce="500"></search-ui>
+ *
+ * Search input with magnifying-glass icon, clear button, and debounce.
+ * Composes input-ui internally — no raw <input> stamping.
+ * Fires debounced 'search' event. Clear button resets and fires immediately.
+ */
+
+import { AdiaFormElement } from '@core/form.js';
+
+class AdiaSearch extends AdiaFormElement {
+  static properties = {
+    ...AdiaFormElement.properties,
+    placeholder: { type: String, default: 'Search...', reflect: true },
+    debounce:    { type: Number, default: 300, reflect: true },
+  };
+
+  static template = () => null;
+
+  #inputEl = null;
+  #suffixEl = null;
+  #timer = null;
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'search');
+
+    if (!this.querySelector('input-ui')) {
+      this.innerHTML = `<input-ui
+        type="search"
+        prefix="magnifying-glass"
+        suffix="x-circle"
+        placeholder="${this.placeholder}"
+        ${this.disabled ? 'disabled' : ''}
+      ></input-ui>`;
+    }
+
+    this.#inputEl = this.querySelector('input-ui');
+    if (this.#inputEl) {
+      this.#inputEl.addEventListener('input', this.#onInput);
+      this.#inputEl.addEventListener('keydown', this.#onKeydown);
+      this.#suffixEl = this.#inputEl.querySelector('[slot="suffix"]');
+      if (this.#suffixEl) {
+        this.#suffixEl.style.cursor = 'pointer';
+        this.#suffixEl.addEventListener('click', this.#onClear);
+      }
+    }
+  }
+
+  render() {
+    if (!this.#inputEl) return;
+
+    this.#inputEl.setAttribute('placeholder', this.placeholder);
+    if (this.disabled) this.#inputEl.setAttribute('disabled', '');
+    else this.#inputEl.removeAttribute('disabled');
+
+    // Reflect value for CSS (clear button visibility)
+    this.setAttribute('value', this.value || '');
+  }
+
+  #onInput = () => {
+    this.value = this.#inputEl.value;
+    this.syncValue(this.value);
+    this.dispatchEvent(new Event('input', { bubbles: true }));
+
+    clearTimeout(this.#timer);
+    this.#timer = setTimeout(() => {
+      this.dispatchEvent(new CustomEvent('search', {
+        bubbles: true,
+        detail: { value: this.value },
+      }));
+    }, this.debounce || 300);
+  };
+
+  #onKeydown = (e) => {
+    if (e.key === 'Enter') {
+      clearTimeout(this.#timer);
+      this.dispatchEvent(new CustomEvent('search', {
+        bubbles: true,
+        detail: { value: this.value },
+      }));
+    }
+    if (e.key === 'Escape') {
+      this.#onClear();
+    }
+  };
+
+  #onClear = () => {
+    clearTimeout(this.#timer);
+    this.value = '';
+    if (this.#inputEl) this.#inputEl.value = '';
+    this.syncValue('');
+    this.setAttribute('value', '');
+    this.dispatchEvent(new Event('input', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('search', {
+      bubbles: true,
+      detail: { value: '' },
+    }));
+    this.#inputEl?.focus();
+  };
+
+  focus() { this.#inputEl?.focus(); }
+
+  clear() { this.#onClear(); }
+
+  disconnected() {
+    super.disconnected();
+    clearTimeout(this.#timer);
+    this.#timer = null;
+    if (this.#inputEl) {
+      this.#inputEl.removeEventListener('input', this.#onInput);
+      this.#inputEl.removeEventListener('keydown', this.#onKeydown);
+    }
+    if (this.#suffixEl) {
+      this.#suffixEl.removeEventListener('click', this.#onClear);
+    }
+    this.#inputEl = null;
+    this.#suffixEl = null;
+  }
+}
+customElements.define('search-ui', AdiaSearch);
+
+export { AdiaSearch };

package/components/search/search.yaml

@@ -0,0 +1,154 @@
+# 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: AdiaSearch
+tag: search-ui
+component: Search
+category: input
+version: 1
+description: Search input with magnifying-glass icon, clear button, and debounced search event.
+props:
+  name:
+    description: Form field name
+    type: string
+    default: ""
+  required:
+    description: Marks as required
+    type: boolean
+    default: false
+    reflect: true
+  debounce:
+    description: Debounce delay in ms before search event fires
+    type: number
+    default: 300
+  disabled:
+    description: Disables interaction
+    type: boolean
+    default: false
+    reflect: true
+  icon:
+    description: Leading icon name. Defaults to search (magnifying glass).
+    type: string
+    default: search
+  placeholder:
+    description: Placeholder text
+    type: string
+    default: Search...
+  value:
+    description: Current search query
+    type: string
+    default: ""
+events:
+  clear:
+    description: Fired when the clear button is clicked
+  input:
+    description: "Fired on each input change during typing."
+  search:
+    description: Debounced CustomEvent with detail.query containing the search string
+slots:
+  clear:
+    description: Clear button (shown when value is non-empty)
+  input:
+    description: Native search input element
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+traits: []
+tokens:
+  --search-background:
+    description: Input background color
+  --search-border-color:
+    description: Input border color
+  --search-font-size:
+    description: Input font size
+  --search-foreground:
+    description: Input text color
+  --search-radius:
+    description: Input border radius
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-search
+    description: Basic Search usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "Search",
+          "name": "search",
+          "placeholder": "Enter search...",
+          "value": ""
+        }
+      ]
+keywords:
+  - search
+  - marketplace
+  - find
+  - lookup
+  - autocomplete
+  - typeahead
+  - spotlight
+  - omnibar
+  - combobox
+synonyms:
+  autocomplete:
+    - search
+    - command
+    - palette
+    - tag
+  combobox:
+    - search
+    - command
+    - select
+  find:
+    - search
+    - filter
+    - command
+  lookup:
+    - search
+    - filter
+    - command
+  marketplace:
+    - product
+    - pricing
+    - card
+    - image
+    - grid
+    - search
+    - filter
+  omnibar:
+    - command
+    - palette
+    - search
+  search:
+    - search
+    - filter
+    - command
+    - palette
+  spotlight:
+    - command
+    - palette
+    - search
+  typeahead:
+    - search
+    - command
+    - palette
+related: []

package/components/section/section.a2ui.json

@@ -0,0 +1,78 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Section.json",
+  "title": "Section",
+  "description": "Content section inside a Card. Groups related content between Header and Footer.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "bleed": {
+      "description": "Remove section padding so children can reach the card edges (used for full-bleed media).",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Section"
+    },
+    "scroll": {
+      "description": "Enable overflow scrolling",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {},
+    "examples": [
+      {
+        "description": "Chat interface with message bubbles containing avatar and text pairs, plus an input footer.",
+        "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    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Chat\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"messages\"\n    ]\n  },\n  {\n    \"id\": \"messages\",\n    \"component\": \"Column\",\n    \"gap\": \"3\",\n    \"children\": [\n      \"msg1\",\n      \"msg2\",\n      \"msg3\",\n      \"msg4\"\n    ]\n  },\n  {\n    \"id\": \"msg1\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a1\",\n      \"t1\"\n    ]\n  },\n  {\n    \"id\": \"a1\",\n    \"component\": \"Avatar\",\n    \"name\": \"User\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t1\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Hello! Can you help me with something?\"\n  },\n  {\n    \"id\": \"msg2\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a2\",\n      \"t2\"\n    ]\n  },\n  {\n    \"id\": \"a2\",\n    \"component\": \"Avatar\",\n    \"name\": \"Assistant\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t2\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Of course! I'd be happy to help. What do you need?\"\n  },\n  {\n    \"id\": \"msg3\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a3\",\n      \"t3\"\n    ]\n  },\n  {\n    \"id\": \"a3\",\n    \"component\": \"Avatar\",\n    \"name\": \"User\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t3\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"I need to build a dashboard layout.\"\n  },\n  {\n    \"id\": \"msg4\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a4\",\n      \"t4\"\n    ]\n  },\n  {\n    \"id\": \"a4\",\n    \"component\": \"Avatar\",\n    \"name\": \"Assistant\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t4\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Great choice! Let me suggest some patterns for that.\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"input-row\"\n    ]\n  },\n  {\n    \"id\": \"input-row\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"chat-input\",\n      \"send-btn\"\n    ]\n  },\n  {\n    \"id\": \"chat-input\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Type a message...\"\n  },\n  {\n    \"id\": \"send-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Send\",\n    \"icon\": \"send\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "chat-interface"
+      },
+      {
+        "description": "Command palette card with search input and a list of command options.",
+        "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      \"search\"\n    ]\n  },\n  {\n    \"id\": \"search\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Type a command or search...\",\n    \"icon\": \"search\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"options\"\n    ]\n  },\n  {\n    \"id\": \"options\",\n    \"component\": \"Column\",\n    \"gap\": \"1\",\n    \"children\": [\n      \"opt1\",\n      \"opt2\",\n      \"opt3\",\n      \"opt4\",\n      \"opt5\"\n    ]\n  },\n  {\n    \"id\": \"opt1\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i1\",\n      \"l1\"\n    ]\n  },\n  {\n    \"id\": \"i1\",\n    \"component\": \"Icon\",\n    \"name\": \"file\"\n  },\n  {\n    \"id\": \"l1\",\n    \"component\": \"Text\",\n    \"textContent\": \"Open File\"\n  },\n  {\n    \"id\": \"opt2\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i2\",\n      \"l2\"\n    ]\n  },\n  {\n    \"id\": \"i2\",\n    \"component\": \"Icon\",\n    \"name\": \"gear\"\n  },\n  {\n    \"id\": \"l2\",\n    \"component\": \"Text\",\n    \"textContent\": \"Settings\"\n  },\n  {\n    \"id\": \"opt3\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i3\",\n      \"l3\"\n    ]\n  },\n  {\n    \"id\": \"i3\",\n    \"component\": \"Icon\",\n    \"name\": \"palette\"\n  },\n  {\n    \"id\": \"l3\",\n    \"component\": \"Text\",\n    \"textContent\": \"Change Theme\"\n  },\n  {\n    \"id\": \"opt4\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i4\",\n      \"l4\"\n    ]\n  },\n  {\n    \"id\": \"i4\",\n    \"component\": \"Icon\",\n    \"name\": \"users\"\n  },\n  {\n    \"id\": \"l4\",\n    \"component\": \"Text\",\n    \"textContent\": \"Manage Users\"\n  },\n  {\n    \"id\": \"opt5\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i5\",\n      \"l5\"\n    ]\n  },\n  {\n    \"id\": \"i5\",\n    \"component\": \"Icon\",\n    \"name\": \"sign-out\"\n  },\n  {\n    \"id\": \"l5\",\n    \"component\": \"Text\",\n    \"textContent\": \"Sign Out\"\n  }\n]",
+        "name": "command-palette"
+      }
+    ],
+    "keywords": [
+      "section"
+    ],
+    "name": "AdiaSection",
+    "related": [
+      "avatar",
+      "input",
+      "button",
+      "alert",
+      "skeleton"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "section-n",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/section/section.yaml

@@ -0,0 +1,338 @@
+# 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: AdiaSection
+tag: section-n
+component: Section
+category: container
+version: 1
+description: Content section inside a Card. Groups related content between Header and Footer.
+props:
+  scroll:
+    description: Enable overflow scrolling
+    type: boolean
+    default: false
+  bleed:
+    description: Remove section padding so children can reach the card edges (used for full-bleed media).
+    type: boolean
+    default: false
+    reflect: true
+events: {}
+slots:
+  default:
+    description: "Default slot — primary child content."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: chat-interface
+    description: Chat interface with message bubbles containing avatar and text pairs, plus an input footer.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Chat"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "messages"
+          ]
+        },
+        {
+          "id": "messages",
+          "component": "Column",
+          "gap": "3",
+          "children": [
+            "msg1",
+            "msg2",
+            "msg3",
+            "msg4"
+          ]
+        },
+        {
+          "id": "msg1",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a1",
+            "t1"
+          ]
+        },
+        {
+          "id": "a1",
+          "component": "Avatar",
+          "name": "User",
+          "size": "sm"
+        },
+        {
+          "id": "t1",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Hello! Can you help me with something?"
+        },
+        {
+          "id": "msg2",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a2",
+            "t2"
+          ]
+        },
+        {
+          "id": "a2",
+          "component": "Avatar",
+          "name": "Assistant",
+          "size": "sm"
+        },
+        {
+          "id": "t2",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Of course! I'd be happy to help. What do you need?"
+        },
+        {
+          "id": "msg3",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a3",
+            "t3"
+          ]
+        },
+        {
+          "id": "a3",
+          "component": "Avatar",
+          "name": "User",
+          "size": "sm"
+        },
+        {
+          "id": "t3",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "I need to build a dashboard layout."
+        },
+        {
+          "id": "msg4",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a4",
+            "t4"
+          ]
+        },
+        {
+          "id": "a4",
+          "component": "Avatar",
+          "name": "Assistant",
+          "size": "sm"
+        },
+        {
+          "id": "t4",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Great choice! Let me suggest some patterns for that."
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "input-row"
+          ]
+        },
+        {
+          "id": "input-row",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "chat-input",
+            "send-btn"
+          ]
+        },
+        {
+          "id": "chat-input",
+          "component": "Input",
+          "placeholder": "Type a message..."
+        },
+        {
+          "id": "send-btn",
+          "component": "Button",
+          "text": "Send",
+          "icon": "send",
+          "variant": "primary"
+        }
+      ]
+  - name: command-palette
+    description: Command palette card with search input and a list of command options.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "search"
+          ]
+        },
+        {
+          "id": "search",
+          "component": "Input",
+          "placeholder": "Type a command or search...",
+          "icon": "search"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "options"
+          ]
+        },
+        {
+          "id": "options",
+          "component": "Column",
+          "gap": "1",
+          "children": [
+            "opt1",
+            "opt2",
+            "opt3",
+            "opt4",
+            "opt5"
+          ]
+        },
+        {
+          "id": "opt1",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i1",
+            "l1"
+          ]
+        },
+        {
+          "id": "i1",
+          "component": "Icon",
+          "name": "file"
+        },
+        {
+          "id": "l1",
+          "component": "Text",
+          "textContent": "Open File"
+        },
+        {
+          "id": "opt2",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i2",
+            "l2"
+          ]
+        },
+        {
+          "id": "i2",
+          "component": "Icon",
+          "name": "gear"
+        },
+        {
+          "id": "l2",
+          "component": "Text",
+          "textContent": "Settings"
+        },
+        {
+          "id": "opt3",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i3",
+            "l3"
+          ]
+        },
+        {
+          "id": "i3",
+          "component": "Icon",
+          "name": "palette"
+        },
+        {
+          "id": "l3",
+          "component": "Text",
+          "textContent": "Change Theme"
+        },
+        {
+          "id": "opt4",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i4",
+            "l4"
+          ]
+        },
+        {
+          "id": "i4",
+          "component": "Icon",
+          "name": "users"
+        },
+        {
+          "id": "l4",
+          "component": "Text",
+          "textContent": "Manage Users"
+        },
+        {
+          "id": "opt5",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i5",
+            "l5"
+          ]
+        },
+        {
+          "id": "i5",
+          "component": "Icon",
+          "name": "sign-out"
+        },
+        {
+          "id": "l5",
+          "component": "Text",
+          "textContent": "Sign Out"
+        }
+      ]
+keywords:
+  - section
+synonyms: {}
+related:
+  - avatar
+  - input
+  - button
+  - alert
+  - skeleton