@adia-ai/web-components 0.4.6 → 0.4.8

package/components/tree/class.js

@@ -0,0 +1,245 @@
+/**
+ * Non-side-effect class export for `<tree-ui>` (+ co-located primitives).
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/tree`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <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 { UIElement } from '../../core/element.js';
+
+export class UITree extends UIElement {
+  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);
+  }
+}
+
+export class UITreeItem extends UIElement {
+  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;
+  }
+}

package/components/tree/tree.a2ui.json

@@ -24,6 +24,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "data",
+    "composes": [
+      "icon-ui"
+    ],
     "events": {
       "tree-select": {
         "description": "Fired when an item is selected. detail: { item, text, value }"

package/components/tree/tree.d.ts

@@ -0,0 +1,25 @@
+/**
+ * `<tree-ui>` — Collapsible tree container with keyboard navigation (arrow keys, Enter/Space). Manages selection across nested tree-item-ns.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/tree
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export type TreeSelectEvent = CustomEvent<unknown>;
+
+export class UITree extends UIElement {
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UITree, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'tree-select', listener: (ev: TreeSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/tree/tree.js

@@ -1,253 +1,18 @@
 /**
- * <tree-ui> — Collapsible tree with nested items.
+ * `<tree-ui>` — auto-registers the tag on import.
  *
- * 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>
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * tree-ui is the root container. tree-item-ui handles nesting, collapse, selection.
+ *   import { UITree, UITreeItem } from '@adia-ai/web-components/components/tree/class';
  *
- * Events:
- *   tree-select — fired on tree-ui when an item is selected (detail: { item, text, value })
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
+import { defineIfFree } from '../../core/register.js';
+import { UITree, UITreeItem } from './class.js';
 
-class UITree extends UIElement {
-  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', UITree);
-
-
-/**
- * <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 UITreeItem extends UIElement {
-  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', UITreeItem);
+defineIfFree('tree-ui', UITree);
+defineIfFree('tree-item-ui', UITreeItem);
 
 export { UITree, UITreeItem };

package/components/tree/tree.yaml

@@ -8,6 +8,10 @@ category: data
 version: 1
 description: Collapsible tree container with keyboard navigation (arrow keys, Enter/Space). Manages
   selection across nested tree-item-ns.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - icon-ui
 props: {}
 events:
   tree-select: