@adia-ai/web-components 0.0.1

package/components/tooltip/tooltip.a2ui.json

@@ -0,0 +1,148 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Tooltip.json",
+  "title": "Tooltip",
+  "description": "Tooltip popup on hover/focus. Uses Popover API for top-layer rendering.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "anchor": {
+      "description": "ID of the anchor element that triggers the tooltip.",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "Tooltip"
+    },
+    "delay": {
+      "description": "Delay in milliseconds before showing the tooltip on hover.",
+      "type": "number",
+      "default": 400
+    },
+    "offset": {
+      "description": "Distance in pixels between the tooltip and the anchor element.",
+      "type": "number",
+      "default": 8
+    },
+    "placement": {
+      "description": "Preferred position relative to the anchor element.",
+      "type": "string",
+      "enum": [
+        "top",
+        "bottom",
+        "left",
+        "right",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end"
+      ],
+      "default": "top"
+    },
+    "text": {
+      "description": "Tooltip text content displayed in the overlay.",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {},
+    "examples": [
+      {
+        "description": "Row of icon buttons each wrapped in a Tooltip to provide accessible hover labels.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Row\",\n    \"attrs\": {\n      \"gap\": \"sm\"\n    },\n    \"children\": [\n      \"tip-edit\",\n      \"tip-duplicate\",\n      \"tip-share\",\n      \"tip-delete\"\n    ]\n  },\n  {\n    \"id\": \"tip-edit\",\n    \"component\": \"Tooltip\",\n    \"attrs\": {\n      \"content\": \"Edit item\"\n    },\n    \"children\": [\n      \"btn-edit\"\n    ]\n  },\n  {\n    \"id\": \"btn-edit\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"ghost\",\n      \"icon\": \"edit\",\n      \"aria-label\": \"Edit\",\n      \"size\": \"sm\"\n    }\n  },\n  {\n    \"id\": \"tip-duplicate\",\n    \"component\": \"Tooltip\",\n    \"attrs\": {\n      \"content\": \"Duplicate item\"\n    },\n    \"children\": [\n      \"btn-duplicate\"\n    ]\n  },\n  {\n    \"id\": \"btn-duplicate\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"ghost\",\n      \"icon\": \"copy\",\n      \"aria-label\": \"Duplicate\",\n      \"size\": \"sm\"\n    }\n  },\n  {\n    \"id\": \"tip-share\",\n    \"component\": \"Tooltip\",\n    \"attrs\": {\n      \"content\": \"Share item\"\n    },\n    \"children\": [\n      \"btn-share\"\n    ]\n  },\n  {\n    \"id\": \"btn-share\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"ghost\",\n      \"icon\": \"share\",\n      \"aria-label\": \"Share\",\n      \"size\": \"sm\"\n    }\n  },\n  {\n    \"id\": \"tip-delete\",\n    \"component\": \"Tooltip\",\n    \"attrs\": {\n      \"content\": \"Delete item\"\n    },\n    \"children\": [\n      \"btn-delete\"\n    ]\n  },\n  {\n    \"id\": \"btn-delete\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"danger\",\n      \"icon\": \"trash\",\n      \"aria-label\": \"Delete\",\n      \"size\": \"sm\"\n    }\n  }\n]",
+        "name": "tooltip-buttons"
+      }
+    ],
+    "keywords": [
+      "tooltip",
+      "info",
+      "tutorial",
+      "walkthrough",
+      "tour",
+      "help",
+      "buttons",
+      "hint",
+      "popover"
+    ],
+    "name": "AdiaTooltip",
+    "related": [
+      "button"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "buttons": [
+        "toolbar",
+        "button",
+        "tooltip"
+      ],
+      "help": [
+        "faq",
+        "accordion",
+        "tooltip"
+      ],
+      "hint": [
+        "tooltip",
+        "button",
+        "popover"
+      ],
+      "info": [
+        "alert",
+        "toast",
+        "notification",
+        "tooltip"
+      ],
+      "popover": [
+        "popover",
+        "menu",
+        "tooltip"
+      ],
+      "tooltip": [
+        "tooltip",
+        "button",
+        "popover"
+      ],
+      "tour": [
+        "onboarding",
+        "checklist",
+        "wizard",
+        "tooltip"
+      ],
+      "tutorial": [
+        "onboarding",
+        "checklist",
+        "wizard",
+        "tooltip"
+      ],
+      "walkthrough": [
+        "onboarding",
+        "checklist",
+        "wizard",
+        "tooltip"
+      ]
+    },
+    "tag": "tooltip-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/tooltip/tooltip.css

@@ -0,0 +1,39 @@
+@scope (tooltip-ui) {
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: inline-flex;
+    position: relative;
+  }
+}
+
+/*
+ * ── Tooltip popover (lives in top-layer, outside @scope) ──
+ *
+ * .tooltip-popup is rendered into the top layer via the Popover API,
+ * so it does NOT inherit custom properties from the <tooltip-ui> host.
+ * Therefore we reference --a-* design tokens directly here.
+ * There is no way to bridge component tokens to the top layer via CSS alone.
+ */
+
+.tooltip-popup {
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--a-space-1) var(--a-space-2);
+  background: var(--a-fg);
+  color: var(--a-bg);
+  font-family: var(--a-font-family);
+  font-size: var(--a-ui-sm);
+  line-height: 1.4;
+  border: none;
+  border-radius: var(--a-radius-full);
+  box-shadow: var(--a-shadow-sm);
+  white-space: nowrap;
+  pointer-events: none;
+  /* No z-index needed — Popover API renders in the top layer which
+     has its own stacking above all document content. */
+}
+
+.tooltip-popup:popover-open {
+  display: block;
+}

package/components/tooltip/tooltip.js

@@ -0,0 +1,96 @@
+/**
+ * <tooltip-ui text="Helpful tip" placement="top">
+ *   <button-ui text="Hover me"></button-ui>
+ * </tooltip-ui>
+ *
+ * Tooltip popup. Wraps its children and shows a popover on hover/focus.
+ * Uses Popover API (popover="manual") for top-layer rendering.
+ * Positioned via anchorPopover() from @core/anchor.js.
+ *
+ * No click interaction — hover/focus only.
+ */
+
+import { AdiaElement } from '@core/element.js';
+import { anchorPopover } from '@core/anchor.js';
+
+class AdiaTooltip extends AdiaElement {
+  static properties = {
+    text:      { type: String,  default: '', reflect: true },
+    placement: { type: String,  default: 'top', reflect: true },
+    delay:     { type: Number,  default: 400, reflect: true },
+  };
+
+  static template = () => null;
+
+  #popover = null;
+  #timer = null;
+  #cleanup = null;
+
+  connected() {
+    this.addEventListener('mouseenter', this.#onEnter);
+    this.addEventListener('focusin', this.#onEnter);
+    this.addEventListener('mouseleave', this.#onLeave);
+    this.addEventListener('focusout', this.#onLeave);
+  }
+
+  disconnected() {
+    this.removeEventListener('mouseenter', this.#onEnter);
+    this.removeEventListener('focusin', this.#onEnter);
+    this.removeEventListener('mouseleave', this.#onLeave);
+    this.removeEventListener('focusout', this.#onLeave);
+    this.#hide();
+  }
+
+  render() {
+    // Update popover text if already showing
+    if (this.#popover) this.#popover.textContent = this.text;
+  }
+
+  #onEnter = () => {
+    if (!this.text) return;
+    if (this.#timer) clearTimeout(this.#timer);
+    this.#timer = setTimeout(() => this.#show(), this.delay);
+  };
+
+  #onLeave = () => {
+    if (this.#timer) { clearTimeout(this.#timer); this.#timer = null; }
+    this.#hide();
+  };
+
+  #show() {
+    if (this.#popover) return;
+
+    const el = document.createElement('div');
+    const id = `tooltip-${Date.now()}`;
+    el.id = id;
+    el.setAttribute('popover', 'manual');
+    el.setAttribute('role', 'tooltip');
+    el.classList.add('tooltip-popup');
+    el.textContent = this.text;
+    document.body.appendChild(el);
+
+    // Link trigger to tooltip for screen readers
+    this.setAttribute('aria-describedby', id);
+
+    try { el.showPopover(); } catch (_) { /* popover not supported */ }
+
+    this.#popover = el;
+    this.#cleanup = anchorPopover(this, el, { placement: this.placement, gap: 6 });
+  }
+
+  #hide() {
+    if (this.#timer) { clearTimeout(this.#timer); this.#timer = null; }
+    if (!this.#popover) return;
+
+    this.removeAttribute('aria-describedby');
+    this.#cleanup?.();
+    this.#cleanup = null;
+
+    try { this.#popover.hidePopover(); } catch (_) { /* popover not supported */ }
+    this.#popover.remove();
+    this.#popover = null;
+  }
+}
+customElements.define('tooltip-ui', AdiaTooltip);
+
+export { AdiaTooltip };

package/components/tooltip/tooltip.yaml

@@ -0,0 +1,201 @@
+# 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: AdiaTooltip
+tag: tooltip-ui
+component: Tooltip
+category: container
+version: 1
+description: Tooltip popup on hover/focus. Uses Popover API for top-layer rendering.
+props:
+  anchor:
+    description: ID of the anchor element that triggers the tooltip.
+    type: string
+    default: ""
+  delay:
+    description: Delay in milliseconds before showing the tooltip on hover.
+    type: number
+    default: 400
+  offset:
+    description: Distance in pixels between the tooltip and the anchor element.
+    type: number
+    default: 8
+  placement:
+    description: Preferred position relative to the anchor element.
+    type: string
+    default: top
+    enum:
+      - top
+      - bottom
+      - left
+      - right
+      - top-start
+      - top-end
+      - bottom-start
+      - bottom-end
+  text:
+    description: Tooltip text content displayed in the overlay.
+    type: string
+    default: ""
+events: {}
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: tooltip-buttons
+    description: Row of icon buttons each wrapped in a Tooltip to provide accessible hover labels.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Row",
+          "attrs": {
+            "gap": "sm"
+          },
+          "children": [
+            "tip-edit",
+            "tip-duplicate",
+            "tip-share",
+            "tip-delete"
+          ]
+        },
+        {
+          "id": "tip-edit",
+          "component": "Tooltip",
+          "attrs": {
+            "content": "Edit item"
+          },
+          "children": [
+            "btn-edit"
+          ]
+        },
+        {
+          "id": "btn-edit",
+          "component": "Button",
+          "attrs": {
+            "variant": "ghost",
+            "icon": "edit",
+            "aria-label": "Edit",
+            "size": "sm"
+          }
+        },
+        {
+          "id": "tip-duplicate",
+          "component": "Tooltip",
+          "attrs": {
+            "content": "Duplicate item"
+          },
+          "children": [
+            "btn-duplicate"
+          ]
+        },
+        {
+          "id": "btn-duplicate",
+          "component": "Button",
+          "attrs": {
+            "variant": "ghost",
+            "icon": "copy",
+            "aria-label": "Duplicate",
+            "size": "sm"
+          }
+        },
+        {
+          "id": "tip-share",
+          "component": "Tooltip",
+          "attrs": {
+            "content": "Share item"
+          },
+          "children": [
+            "btn-share"
+          ]
+        },
+        {
+          "id": "btn-share",
+          "component": "Button",
+          "attrs": {
+            "variant": "ghost",
+            "icon": "share",
+            "aria-label": "Share",
+            "size": "sm"
+          }
+        },
+        {
+          "id": "tip-delete",
+          "component": "Tooltip",
+          "attrs": {
+            "content": "Delete item"
+          },
+          "children": [
+            "btn-delete"
+          ]
+        },
+        {
+          "id": "btn-delete",
+          "component": "Button",
+          "attrs": {
+            "variant": "danger",
+            "icon": "trash",
+            "aria-label": "Delete",
+            "size": "sm"
+          }
+        }
+      ]
+keywords:
+  - tooltip
+  - info
+  - tutorial
+  - walkthrough
+  - tour
+  - help
+  - buttons
+  - hint
+  - popover
+synonyms:
+  buttons:
+    - toolbar
+    - button
+    - tooltip
+  help:
+    - faq
+    - accordion
+    - tooltip
+  hint:
+    - tooltip
+    - button
+    - popover
+  info:
+    - alert
+    - toast
+    - notification
+    - tooltip
+  popover:
+    - popover
+    - menu
+    - tooltip
+  tooltip:
+    - tooltip
+    - button
+    - popover
+  tour:
+    - onboarding
+    - checklist
+    - wizard
+    - tooltip
+  tutorial:
+    - onboarding
+    - checklist
+    - wizard
+    - tooltip
+  walkthrough:
+    - onboarding
+    - checklist
+    - wizard
+    - tooltip
+related:
+  - button

package/components/tree/tree.a2ui.json

@@ -0,0 +1,119 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Tree.json",
+  "title": "Tree",
+  "description": "Collapsible tree container with keyboard navigation (arrow keys, Enter/Space). Manages selection across nested tree-item-ns.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Tree"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "data",
+    "events": {
+      "tree-select": {
+        "description": "Fired when an item is selected. detail: { item, text, value }"
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic Tree 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\": \"Tree\"\n  }\n]",
+        "name": "basic-tree"
+      }
+    ],
+    "keywords": [
+      "tree",
+      "folder"
+    ],
+    "name": "AdiaTree",
+    "related": [],
+    "slots": {
+      "default (tree-item-ui children)": {
+        "description": "Child content region for the `default (tree-item-ui children)` slot."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "folder": [
+        "inbox",
+        "email",
+        "sidebar",
+        "nav",
+        "tree"
+      ]
+    },
+    "tag": "tree-ui",
+    "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"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}