@adia-ai/web-components 0.0.1

package/components/accordion/accordion.js

@@ -0,0 +1,125 @@
+/**
+ * <accordion-ui>
+ *   <accordion-item-ui text="Section 1">Content for section 1</accordion-item-ui>
+ *   <accordion-item-ui text="Section 2">Content for section 2</accordion-item-ui>
+ * </accordion-ui>
+ *
+ * Accordion container + item pair.
+ * Container manages single/multiple open states.
+ * Items handle their own expand/collapse toggle.
+ *
+ * Events (on accordion-item-ui):
+ *   toggle — { detail: { open } }
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+// ── Accordion Container ────────────────────────────────────────
+
+class AdiaAccordion extends AdiaElement {
+  static properties = {
+    multiple: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.addEventListener('toggle', this.#onItemToggle);
+  }
+
+  disconnected() {
+    this.removeEventListener('toggle', this.#onItemToggle);
+  }
+
+  #onItemToggle = (e) => {
+    if (this.multiple) return;
+
+    const target = e.target;
+    if (!target.open) return;
+
+    // Close other items
+    const items = this.querySelectorAll('accordion-item-ui');
+    for (const item of items) {
+      if (item !== target && item.open) {
+        item.open = false;
+      }
+    }
+  };
+}
+customElements.define('accordion-ui', AdiaAccordion);
+
+// ── Accordion Item ─────────────────────────────────────────────
+
+class AdiaAccordionItem extends AdiaElement {
+  static properties = {
+    text: { type: String,  default: '', reflect: true },
+    open: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #bound = false;
+
+  connected() {
+    // Stamp header if not present
+    if (!this.querySelector('[slot="header"]')) {
+      const header = document.createElement('div');
+      header.setAttribute('slot', 'header');
+
+      const label = document.createElement('span');
+      label.setAttribute('slot', 'header-text');
+      header.appendChild(label);
+
+      const caret = document.createElement('icon-ui');
+      caret.setAttribute('name', 'caret-down');
+      caret.setAttribute('slot', 'caret');
+      header.appendChild(caret);
+
+      this.prepend(header);
+    }
+
+    // Stamp content wrapper if not present
+    if (!this.querySelector('[slot="body"]')) {
+      const body = document.createElement('div');
+      body.setAttribute('slot', 'body');
+
+      // Move non-slotted children into body
+      const children = [...this.childNodes].filter(n => {
+        if (n.nodeType === 1) return !n.hasAttribute('slot');
+        return n.nodeType === 3 && n.textContent.trim();
+      });
+      for (const child of children) body.appendChild(child);
+
+      this.appendChild(body);
+    }
+
+    if (!this.#bound) {
+      this.#bound = true;
+      this.addEventListener('click', this.#onClick);
+    }
+  }
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.#bound = false;
+  }
+
+  render() {
+    const label = this.querySelector('[slot="header-text"]');
+    if (label) label.textContent = this.text;
+  }
+
+  #onClick = (e) => {
+    const header = this.querySelector('[slot="header"]');
+    if (!header || !header.contains(e.target)) return;
+
+    this.open = !this.open;
+    this.dispatchEvent(new CustomEvent('toggle', {
+      bubbles: true,
+      detail: { open: this.open },
+    }));
+  };
+}
+customElements.define('accordion-item-ui', AdiaAccordionItem);
+
+export { AdiaAccordion, AdiaAccordionItem };

package/components/accordion/accordion.yaml

@@ -0,0 +1,527 @@
+# 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: AdiaAccordion
+tag: accordion-ui
+component: Accordion
+category: container
+version: 1
+description: Accordion container managing single/multiple open states.
+props:
+  multiple:
+    description: Allow multiple panels to be open simultaneously
+    type: boolean
+    default: false
+events:
+  change:
+    description: Fired when the set of open panels changes
+slots:
+  default:
+    description: pane-ui children
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: accordion-settings
+    description: Settings panel with accordion sections for profile, notifications, and privacy configuration.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "body",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "slots": {
+            "heading": "Settings",
+            "description": "Manage your account preferences and configuration."
+          }
+        },
+        {
+          "id": "body",
+          "component": "Section",
+          "children": [
+            "accordion"
+          ]
+        },
+        {
+          "id": "accordion",
+          "component": "Accordion",
+          "attrs": {
+            "type": "multiple"
+          },
+          "children": [
+            "sec-profile",
+            "sec-notifications",
+            "sec-privacy"
+          ]
+        },
+        {
+          "id": "sec-profile",
+          "component": "AccordionItem",
+          "attrs": {
+            "text": "Profile",
+            "icon": "user"
+          },
+          "children": [
+            "profile-form"
+          ]
+        },
+        {
+          "id": "profile-form",
+          "component": "Column",
+          "attrs": {
+            "gap": "md"
+          },
+          "children": [
+            "profile-name",
+            "profile-email",
+            "profile-bio"
+          ]
+        },
+        {
+          "id": "profile-name",
+          "component": "Input",
+          "attrs": {
+            "label": "Display Name",
+            "placeholder": "Enter your name",
+            "value": "Jane Doe"
+          }
+        },
+        {
+          "id": "profile-email",
+          "component": "Input",
+          "attrs": {
+            "label": "Email",
+            "type": "email",
+            "placeholder": "you@example.com",
+            "value": "jane@example.com"
+          }
+        },
+        {
+          "id": "profile-bio",
+          "component": "TextArea",
+          "attrs": {
+            "label": "Bio",
+            "placeholder": "Tell us about yourself",
+            "rows": 3
+          }
+        },
+        {
+          "id": "sec-notifications",
+          "component": "AccordionItem",
+          "attrs": {
+            "text": "Notifications",
+            "icon": "bell"
+          },
+          "children": [
+            "notif-options"
+          ]
+        },
+        {
+          "id": "notif-options",
+          "component": "Column",
+          "attrs": {
+            "gap": "md"
+          },
+          "children": [
+            "notif-email",
+            "notif-push",
+            "notif-marketing"
+          ]
+        },
+        {
+          "id": "notif-email",
+          "component": "Row",
+          "attrs": {
+            "justify": "between",
+            "align": "center"
+          },
+          "children": [
+            "notif-email-label",
+            "notif-email-toggle"
+          ]
+        },
+        {
+          "id": "notif-email-label",
+          "component": "Text",
+          "attrs": {
+            "variant": "body"
+          },
+          "content": "Email notifications"
+        },
+        {
+          "id": "notif-email-toggle",
+          "component": "Toggle",
+          "attrs": {
+            "checked": true
+          }
+        },
+        {
+          "id": "notif-push",
+          "component": "Row",
+          "attrs": {
+            "justify": "between",
+            "align": "center"
+          },
+          "children": [
+            "notif-push-label",
+            "notif-push-toggle"
+          ]
+        },
+        {
+          "id": "notif-push-label",
+          "component": "Text",
+          "attrs": {
+            "variant": "body"
+          },
+          "content": "Push notifications"
+        },
+        {
+          "id": "notif-push-toggle",
+          "component": "Toggle",
+          "attrs": {
+            "checked": true
+          }
+        },
+        {
+          "id": "notif-marketing",
+          "component": "Row",
+          "attrs": {
+            "justify": "between",
+            "align": "center"
+          },
+          "children": [
+            "notif-marketing-label",
+            "notif-marketing-toggle"
+          ]
+        },
+        {
+          "id": "notif-marketing-label",
+          "component": "Text",
+          "attrs": {
+            "variant": "body"
+          },
+          "content": "Marketing emails"
+        },
+        {
+          "id": "notif-marketing-toggle",
+          "component": "Toggle",
+          "attrs": {
+            "checked": false
+          }
+        },
+        {
+          "id": "sec-privacy",
+          "component": "AccordionItem",
+          "attrs": {
+            "text": "Privacy",
+            "icon": "lock"
+          },
+          "children": [
+            "privacy-options"
+          ]
+        },
+        {
+          "id": "privacy-options",
+          "component": "Column",
+          "attrs": {
+            "gap": "md"
+          },
+          "children": [
+            "priv-profile-vis",
+            "priv-activity",
+            "priv-data"
+          ]
+        },
+        {
+          "id": "priv-profile-vis",
+          "component": "Row",
+          "attrs": {
+            "justify": "between",
+            "align": "center"
+          },
+          "children": [
+            "priv-profile-label",
+            "priv-profile-toggle"
+          ]
+        },
+        {
+          "id": "priv-profile-label",
+          "component": "Text",
+          "attrs": {
+            "variant": "body"
+          },
+          "content": "Public profile"
+        },
+        {
+          "id": "priv-profile-toggle",
+          "component": "Toggle",
+          "attrs": {
+            "checked": true
+          }
+        },
+        {
+          "id": "priv-activity",
+          "component": "Row",
+          "attrs": {
+            "justify": "between",
+            "align": "center"
+          },
+          "children": [
+            "priv-activity-label",
+            "priv-activity-toggle"
+          ]
+        },
+        {
+          "id": "priv-activity-label",
+          "component": "Text",
+          "attrs": {
+            "variant": "body"
+          },
+          "content": "Show activity status"
+        },
+        {
+          "id": "priv-activity-toggle",
+          "component": "Toggle",
+          "attrs": {
+            "checked": false
+          }
+        },
+        {
+          "id": "priv-data",
+          "component": "Row",
+          "attrs": {
+            "justify": "between",
+            "align": "center"
+          },
+          "children": [
+            "priv-data-label",
+            "priv-data-toggle"
+          ]
+        },
+        {
+          "id": "priv-data-label",
+          "component": "Text",
+          "attrs": {
+            "variant": "body"
+          },
+          "content": "Allow analytics collection"
+        },
+        {
+          "id": "priv-data-toggle",
+          "component": "Toggle",
+          "attrs": {
+            "checked": true
+          }
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "save-btn"
+          ]
+        },
+        {
+          "id": "save-btn",
+          "component": "Button",
+          "attrs": {
+            "variant": "primary"
+          },
+          "content": "Save Changes"
+        }
+      ]
+  - name: faq-accordion
+    description: Frequently asked questions presented in an accordion layout with expandable
+      question/answer items.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "body"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title",
+            "desc"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "variant": "section",
+          "textContent": "Frequently Asked Questions"
+        },
+        {
+          "id": "desc",
+          "component": "Text",
+          "slot": "description",
+          "variant": "caption",
+          "textContent": "Find answers to common questions about our platform."
+        },
+        {
+          "id": "body",
+          "component": "Section",
+          "children": [
+            "col-wrap"
+          ]
+        },
+        {
+          "id": "accordion",
+          "component": "Accordion",
+          "children": [
+            "q1",
+            "q2",
+            "q3",
+            "q4",
+            "q5"
+          ]
+        },
+        {
+          "id": "q1",
+          "component": "AccordionItem",
+          "text": "What is included in the free plan?",
+          "children": [
+            "a1"
+          ]
+        },
+        {
+          "id": "a1",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "The free plan includes up to 3 projects, 1 GB of storage, and access to community support forums."
+        },
+        {
+          "id": "q2",
+          "component": "AccordionItem",
+          "text": "Can I upgrade or downgrade at any time?",
+          "children": [
+            "a2"
+          ]
+        },
+        {
+          "id": "a2",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Yes, you can change your plan at any time. When upgrading, you'll be charged a prorated amount."
+        },
+        {
+          "id": "q3",
+          "component": "AccordionItem",
+          "text": "How does billing work for teams?",
+          "children": [
+            "a3"
+          ]
+        },
+        {
+          "id": "a3",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Team billing is per-seat. You're charged for each active team member on a monthly or annual basis."
+        },
+        {
+          "id": "q4",
+          "component": "AccordionItem",
+          "text": "Do you offer refunds?",
+          "children": [
+            "a4"
+          ]
+        },
+        {
+          "id": "a4",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "We offer a full refund within 30 days of purchase. After 30 days, we provide prorated refunds for annual plans."
+        },
+        {
+          "id": "q5",
+          "component": "AccordionItem",
+          "text": "Is my data secure?",
+          "children": [
+            "a5"
+          ]
+        },
+        {
+          "id": "a5",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "We use AES-256 encryption at rest, TLS 1.3 in transit, and are SOC 2 Type II certified."
+        },
+        {
+          "id": "col-wrap",
+          "component": "Column",
+          "children": [
+            "accordion"
+          ],
+          "gap": "4"
+        }
+      ]
+keywords:
+  - accordion
+  - options
+  - faq
+  - questions
+  - help
+  - support
+  - knowledge-base
+  - collapse
+  - expand
+synonyms:
+  accordion:
+    - accordion
+    - faq
+    - settings
+  collapse:
+    - accordion
+    - faq
+    - drawer
+  expand:
+    - accordion
+    - faq
+    - drawer
+  faq:
+    - faq
+    - accordion
+  help:
+    - faq
+    - accordion
+    - tooltip
+  knowledge-base:
+    - faq
+    - accordion
+  options:
+    - settings
+    - radio
+    - segmented
+    - accordion
+  questions:
+    - faq
+    - accordion
+  support:
+    - faq
+    - accordion
+    - chat
+related:
+  - accordion-item
+  - input
+  - text-area
+  - toggle
+  - button

package/components/action-list/action-list.a2ui.json

@@ -0,0 +1,64 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/ActionList.json",
+  "title": "ActionList",
+  "description": "Inline list of command actions with keyboard navigation. Fires action event when an item is clicked or activated via keyboard.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "ActionList"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "navigation",
+    "events": {
+      "action": {
+        "description": "Fired on action."
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic ActionList usage",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"ActionList\"\n  }\n]",
+        "name": "basic-action-list"
+      }
+    ],
+    "keywords": [
+      "actionlist",
+      "action-list",
+      "action",
+      "list"
+    ],
+    "name": "AdiaActionList",
+    "related": [],
+    "slots": {
+      "default (action-item-ui children)": {
+        "description": "Child content region for the `default (action-item-ui children)` slot."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "action-list-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}