@adia-ai/web-components 0.0.1

package/components/tree/tree.css

@@ -0,0 +1,133 @@
+@scope (tree-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --tree-row-height:      var(--a-size);
+    --tree-row-radius:      var(--a-radius-sm);
+    --tree-row-px:          var(--a-space-1);
+    --tree-row-gap:         var(--a-space-1);
+    --tree-actions-gap:     var(--a-space-0-5);
+    --tree-indent:          var(--a-space-4);
+    --tree-chevron-size:    var(--a-space-2);
+    --tree-icon-size:       var(--a-space-3);
+
+    /* ── Typography ── */
+    --tree-font-size:       var(--a-ui-size);
+
+    /* ── Colors ── */
+    --tree-fg:              var(--a-fg);
+    --tree-fg-muted:        var(--a-fg-muted);
+    --tree-bg-hover:        var(--a-bg-muted);
+    --tree-bg-selected:     var(--a-bg-hover);
+
+    /* ── Transition ── */
+    --tree-duration:        var(--a-duration-fast);
+    --tree-easing:          var(--a-easing);
+
+    /* ── State ── */
+    --tree-focus-ring:      var(--a-focus-ring);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    font-size: var(--tree-font-size);
+    color: var(--tree-fg);
+  }
+}
+
+@scope (tree-item-ui) {
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* ── Row ── */
+  [slot="row"] {
+    display: flex;
+    align-items: center;
+    gap: var(--tree-row-gap);
+    height: var(--tree-row-height);
+    padding-inline-end: var(--tree-row-px);
+    border-radius: var(--tree-row-radius);
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition:
+      background var(--tree-duration) var(--tree-easing),
+      color var(--tree-duration) var(--tree-easing);
+    outline: none;
+  }
+
+  [slot="row"]:hover {
+    background: var(--tree-bg-hover);
+  }
+
+  [slot="row"]:focus-visible {
+    box-shadow: var(--tree-focus-ring);
+  }
+
+  :scope[selected] > [slot="row"] {
+    background: var(--tree-bg-selected);
+    color: var(--tree-fg);
+  }
+
+  /* ── Chevron ── */
+  [slot="chevron"] {
+    --a-icon-size: var(--tree-chevron-size);
+    flex-shrink: 0;
+    color: var(--tree-fg-muted);
+    transition: transform var(--tree-duration) var(--tree-easing);
+    transform: rotate(90deg);
+  }
+
+  :scope:not([open]) > [slot="row"] > [slot="chevron"] {
+    transform: rotate(0deg);
+  }
+
+  /* Hide chevron for leaf nodes */
+  :scope:not(:has(> tree-item-ui)) > [slot="row"] > [slot="chevron"] {
+    visibility: hidden;
+  }
+
+  /* ── Icon ── */
+  [slot="icon"] {
+    --a-icon-size: var(--tree-icon-size);
+    color: var(--tree-fg-muted);
+    flex-shrink: 0;
+  }
+
+  :scope[selected] > [slot="row"] [slot="icon"] {
+    color: var(--tree-fg);
+  }
+
+  /* ── Text ── */
+  [slot="text"] {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* ── Actions (right side) ── */
+  [slot="actions"] {
+    display: flex;
+    align-items: center;
+    gap: var(--tree-actions-gap);
+    margin-inline-start: auto;
+    opacity: 0;
+    transition: opacity var(--tree-duration) var(--tree-easing);
+  }
+
+  [slot="row"]:hover [slot="actions"],
+  :scope[selected] > [slot="row"] [slot="actions"] {
+    opacity: 1;
+  }
+
+  /* ── Children — collapsed state ── */
+  :scope:not([open]) > tree-item-ui {
+    display: none;
+  }
+}

package/components/tree/tree.js

@@ -0,0 +1,253 @@
+/**
+ * <tree-ui> — Collapsible tree with nested items.
+ *
+ * Structure:
+ *   <tree-ui>
+ *     <tree-item-ui text="Page" icon="file">
+ *       <tree-item-ui text="Header" icon="layout"></tree-item-ui>
+ *       <tree-item-ui text="Hero" icon="image">
+ *         <tree-item-ui text="Title" icon="text-aa"></tree-item-ui>
+ *         <tree-item-ui text="CTA" icon="cursor-click"></tree-item-ui>
+ *       </tree-item-ui>
+ *       <tree-item-ui text="Footer" icon="layout"></tree-item-ui>
+ *     </tree-item-ui>
+ *   </tree-ui>
+ *
+ * tree-ui is the root container. tree-item-ui handles nesting, collapse, selection.
+ *
+ * Events:
+ *   tree-select — fired on tree-ui when an item is selected (detail: { item, text, value })
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaTree extends AdiaElement {
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('role', 'tree');
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('keydown', this.#onKey);
+  }
+
+  get selectedItem() {
+    return this.querySelector('tree-item-ui[selected]');
+  }
+
+  select(item) {
+    const prev = this.selectedItem;
+    if (prev && prev !== item) prev.removeAttribute('selected');
+    item.setAttribute('selected', '');
+    this.dispatchEvent(new CustomEvent('tree-select', {
+      bubbles: true,
+      detail: { item, text: item.text, value: item.value },
+    }));
+  }
+
+  #onClick = (e) => {
+    const item = e.target.closest('tree-item-ui');
+    if (!item || !this.contains(item)) return;
+
+    // Ignore clicks on action buttons inside the row
+    if (e.target.closest('[slot="actions"] *')) return;
+
+    const row = item.querySelector(':scope > [slot="row"]');
+    if (!row || !(e.target === row || row.contains(e.target))) return;
+
+    // Single click: select + toggle if has children
+    this.select(item);
+    if (item.hasChildren) {
+      item.open = !item.open;
+    }
+  };
+
+  #onKey = (e) => {
+    const item = e.target.closest('tree-item-ui');
+    if (!item) return;
+
+    switch (e.key) {
+      case 'ArrowRight':
+        e.preventDefault();
+        if (item.hasChildren && !item.open) {
+          item.open = true;
+        } else {
+          const first = item.querySelector(':scope > tree-item-ui');
+          if (first) first.querySelector('[slot="row"]')?.focus();
+        }
+        break;
+
+      case 'ArrowLeft':
+        e.preventDefault();
+        if (item.hasChildren && item.open) {
+          item.open = false;
+        } else {
+          const parent = item.parentElement?.closest('tree-item-ui');
+          if (parent) parent.querySelector(':scope > [slot="row"]')?.focus();
+        }
+        break;
+
+      case 'ArrowDown': {
+        e.preventDefault();
+        const next = this.#nextVisible(item);
+        if (next) next.querySelector(':scope > [slot="row"]')?.focus();
+        break;
+      }
+
+      case 'ArrowUp': {
+        e.preventDefault();
+        const prev = this.#prevVisible(item);
+        if (prev) prev.querySelector(':scope > [slot="row"]')?.focus();
+        break;
+      }
+
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        this.select(item);
+        break;
+    }
+  };
+
+  #nextVisible(item) {
+    // If has visible children, go into first child
+    if (item.open && item.hasChildren) {
+      return item.querySelector(':scope > tree-item-ui');
+    }
+    // Otherwise find next sibling or parent's next sibling
+    let current = item;
+    while (current) {
+      const next = current.nextElementSibling;
+      if (next && next.matches('tree-item-ui')) return next;
+      current = current.parentElement?.closest('tree-item-ui');
+    }
+    return null;
+  }
+
+  #prevVisible(item) {
+    const prev = item.previousElementSibling;
+    if (prev && prev.matches('tree-item-ui')) {
+      // Go to last visible descendant of previous sibling
+      let last = prev;
+      while (last.open && last.hasChildren) {
+        const children = last.querySelectorAll(':scope > tree-item-ui');
+        last = children[children.length - 1];
+      }
+      return last;
+    }
+    // Go to parent
+    const parent = item.parentElement?.closest('tree-item-ui');
+    return parent || null;
+  }
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+  }
+}
+customElements.define('tree-ui', AdiaTree);
+
+
+/**
+ * <tree-item-ui> — A single node in the tree.
+ *
+ * Attributes:
+ *   text     — display label
+ *   icon     — icon name (optional, rendered via icon-ui)
+ *   value    — value for selection events
+ *   open     — boolean, expanded state (has children only)
+ *   selected — boolean, selected state
+ *
+ * Slots:
+ *   row      — the clickable row [chevron][icon][text][actions]
+ *   chevron  — collapse toggle indicator
+ *   actions  — right-aligned action icons (eye, lock, etc.)
+ *   children — nested tree-item-ns (auto-detected)
+ */
+class AdiaTreeItem extends AdiaElement {
+  static properties = {
+    text:     { type: String,  default: '', reflect: true },
+    icon:     { type: String,  default: '', reflect: true },
+    value:    { type: String,  default: '', reflect: true },
+    open:     { type: Boolean, default: false, reflect: true },
+    selected: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  get hasChildren() {
+    return this.querySelector(':scope > tree-item-ui') !== null;
+  }
+
+  get depth() {
+    let d = 0;
+    let el = this.parentElement;
+    while (el) {
+      if (el.matches('tree-item-ui')) d++;
+      el = el.parentElement;
+    }
+    return d;
+  }
+
+  connected() {
+    this.setAttribute('role', 'treeitem');
+
+    if (!this.querySelector(':scope > [slot="row"]')) {
+      this.#stamp();
+    }
+  }
+
+  #stamp() {
+    const row = document.createElement('div');
+    row.setAttribute('slot', 'row');
+    row.setAttribute('tabindex', '0');
+
+    // Chevron
+    const chevron = document.createElement('icon-ui');
+    chevron.setAttribute('slot', 'chevron');
+    chevron.setAttribute('name', 'caret-right');
+    row.appendChild(chevron);
+
+    // Icon
+    if (this.icon) {
+      const iconEl = document.createElement('icon-ui');
+      iconEl.setAttribute('name', this.icon);
+      iconEl.setAttribute('slot', 'icon');
+      row.appendChild(iconEl);
+    }
+
+    // Text
+    const textEl = document.createElement('span');
+    textEl.setAttribute('slot', 'text');
+    textEl.textContent = this.text;
+    row.appendChild(textEl);
+
+    // Actions slot placeholder
+    const actions = document.createElement('span');
+    actions.setAttribute('slot', 'actions');
+    row.appendChild(actions);
+
+    this.prepend(row);
+  }
+
+  render() {
+    const row = this.querySelector(':scope > [slot="row"]');
+    if (!row) return;
+
+    // Update depth-based indent
+    row.style.paddingInlineStart = `${this.depth * 16 + 4}px`;
+
+    // Update aria
+    if (this.hasChildren) {
+      this.setAttribute('aria-expanded', String(this.open));
+    } else {
+      this.removeAttribute('aria-expanded');
+    }
+
+    // Update text
+    const textEl = row.querySelector('[slot="text"]');
+    if (textEl && this.text) textEl.textContent = this.text;
+  }
+}
+customElements.define('tree-item-ui', AdiaTreeItem);
+
+export { AdiaTree, AdiaTreeItem };

package/components/tree/tree.yaml

@@ -0,0 +1,92 @@
+# 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: AdiaTree
+tag: tree-ui
+component: Tree
+category: data
+version: 1
+description: Collapsible tree container with keyboard navigation (arrow keys, Enter/Space). Manages
+  selection across nested tree-item-ns.
+props: {}
+events:
+  tree-select:
+    description: "Fired when an item is selected. detail: { item, text, value }"
+slots:
+  default (tree-item-ui children):
+    description: "Child content region for the `default (tree-item-ui children)` slot."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens:
+  --tree-actions-gap:
+    description: Gap between action icons
+  --tree-bg-hover:
+    description: Background color on hover
+  --tree-bg-selected:
+    description: Background color when selected
+  --tree-chevron-size:
+    description: Size of the collapse chevron icon
+  --tree-duration:
+    description: Transition duration
+  --tree-easing:
+    description: Transition easing function
+  --tree-fg:
+    description: Primary text color
+  --tree-fg-muted:
+    description: Muted text color (icons, chevrons)
+  --tree-focus-ring:
+    description: Focus ring box-shadow
+  --tree-font-size:
+    description: Font size for tree items
+  --tree-icon-size:
+    description: Size of the item icon
+  --tree-indent:
+    description: Indentation per nesting level
+  --tree-row-gap:
+    description: Gap between elements within a row
+  --tree-row-height:
+    description: Height of each tree item row
+  --tree-row-px:
+    description: Inline-end padding of each row
+  --tree-row-radius:
+    description: Border radius of each row
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-tree
+    description: Basic Tree usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "Tree"
+        }
+      ]
+keywords:
+  - tree
+  - folder
+synonyms:
+  folder:
+    - inbox
+    - email
+    - sidebar
+    - nav
+    - tree
+related: []

package/components/upload/upload.a2ui.json

@@ -0,0 +1,185 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Upload.json",
+  "title": "Upload",
+  "description": "File upload with drag-and-drop. Uses showOpenFilePicker with input[type=file] fallback. Form-associated.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "required": {
+      "description": "Marks as required",
+      "type": "boolean",
+      "default": false
+    },
+    "accept": {
+      "description": "Accepted file types (e.g. image/*,.pdf)",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "Upload"
+    },
+    "disabled": {
+      "description": "Disables interaction",
+      "type": "boolean",
+      "default": false
+    },
+    "hint": {
+      "description": "Help text below the dropzone",
+      "type": "string",
+      "default": ""
+    },
+    "label": {
+      "description": "Label text above the dropzone",
+      "type": "string",
+      "default": ""
+    },
+    "multiple": {
+      "description": "Allows selecting multiple files",
+      "type": "boolean",
+      "default": false
+    },
+    "name": {
+      "description": "Form field name",
+      "type": "string",
+      "default": ""
+    },
+    "value": {
+      "description": "Current value",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "input",
+    "events": {
+      "change": {
+        "description": "Fired when files are selected via click or drag-and-drop"
+      }
+    },
+    "examples": [
+      {
+        "description": "Data import wizard with file upload, progress tracking, and action buttons.",
+        "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\": \"Import Data\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"col\"\n    ]\n  },\n  {\n    \"id\": \"col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"upload\",\n      \"prog\",\n      \"actions\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"upload\",\n    \"component\": \"Upload\",\n    \"accept\": \".csv,.xlsx\",\n    \"label\": \"Drop files here\"\n  },\n  {\n    \"id\": \"prog\",\n    \"component\": \"Progress\",\n    \"value\": 0,\n    \"max\": 100\n  },\n  {\n    \"id\": \"actions\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"cancel\",\n      \"start\"\n    ],\n    \"gap\": \"2\"\n  },\n  {\n    \"id\": \"cancel\",\n    \"component\": \"Button\",\n    \"text\": \"Cancel\",\n    \"variant\": \"outline\"\n  },\n  {\n    \"id\": \"start\",\n    \"component\": \"Button\",\n    \"text\": \"Import\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "data-import"
+      },
+      {
+        "description": "Card with upload component, file list area, and submit button.",
+        "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\": \"Upload Files\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"desc\",\n    \"component\": \"Text\",\n    \"slot\": \"description\",\n    \"variant\": \"caption\",\n    \"textContent\": \"Drag and drop or browse to upload\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"content\"\n    ]\n  },\n  {\n    \"id\": \"content\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"uploader\",\n      \"file-list\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"uploader\",\n    \"component\": \"Upload\",\n    \"accept\": \"*/*\",\n    \"multiple\": true\n  },\n  {\n    \"id\": \"file-list\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"file-list-label\"\n    ],\n    \"gap\": \"2\"\n  },\n  {\n    \"id\": \"file-list-label\",\n    \"component\": \"Text\",\n    \"variant\": \"caption\",\n    \"textContent\": \"No files selected\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"ftr-actions\"\n    ]\n  },\n  {\n    \"id\": \"ftr-actions\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"cancel-btn\",\n      \"submit-btn\"\n    ]\n  },\n  {\n    \"id\": \"cancel-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Cancel\",\n    \"variant\": \"ghost\"\n  },\n  {\n    \"id\": \"submit-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Upload\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "file-upload-form"
+      }
+    ],
+    "keywords": [
+      "upload",
+      "attach",
+      "dropzone",
+      "drag",
+      "import",
+      "transfer",
+      "file-manager",
+      "files"
+    ],
+    "name": "AdiaUpload",
+    "related": [
+      "progress",
+      "button",
+      "grid",
+      "image",
+      "input"
+    ],
+    "slots": {
+      "dropzone": {
+        "description": "Click/drop target area"
+      },
+      "filelist": {
+        "description": "List of selected file names"
+      },
+      "hint": {
+        "description": "Help text below the dropzone"
+      },
+      "input": {
+        "description": "Hidden native file input"
+      },
+      "label": {
+        "description": "Label element above the dropzone"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {
+      "attach": [
+        "file",
+        "upload",
+        "image"
+      ],
+      "drag": [
+        "file",
+        "upload",
+        "import",
+        "kanban"
+      ],
+      "dropzone": [
+        "file",
+        "upload",
+        "image",
+        "import"
+      ],
+      "file-manager": [
+        "data",
+        "table",
+        "file",
+        "upload"
+      ],
+      "files": [
+        "data",
+        "table",
+        "file",
+        "upload"
+      ],
+      "import": [
+        "data",
+        "import",
+        "file",
+        "upload",
+        "table"
+      ],
+      "transfer": [
+        "data",
+        "import",
+        "upload"
+      ],
+      "upload": [
+        "file",
+        "upload",
+        "image",
+        "import",
+        "data"
+      ]
+    },
+    "tag": "upload-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}