@adia-ai/web-components 0.0.1

package/components/popover/popover.js

@@ -0,0 +1,170 @@
+/**
+ * <popover-ui trigger="click" placement="bottom-start">
+ *   <button-ui slot="trigger" text="Open"></button-ui>
+ *   <div slot="content">Popover content here</div>
+ * </popover-ui>
+ *
+ * Built on the web platform:
+ *   • Popover API — content has popover="manual"; showPopover() promotes it
+ *     to the top layer (no z-index, no overflow clipping, ESC bubbling handled).
+ *   • CSS Anchor Positioning — used natively when supported, JS fallback otherwise
+ *     (see @core/anchor.js).
+ *
+ * Triggers: click | hover | manual. ESC closes click/manual popovers.
+ */
+
+import { AdiaElement } from '@core/element.js';
+import { anchorPopover } from '@core/anchor.js';
+
+const HOVER_CLOSE_DELAY = 120;
+
+class AdiaPopover extends AdiaElement {
+  static properties = {
+    placement: { type: String,  default: 'bottom', reflect: true },
+    gap:       { type: Number,  default: 4, reflect: true },
+    open:      { type: Boolean, default: false, reflect: true },
+    trigger:   { type: String,  default: 'click', reflect: true },
+  };
+
+  static template = () => null;
+
+  #anchorCleanup = null;
+  #bound = false;
+  #hoverTimer = null;
+  #content = null;
+
+  connected() {
+    const content = this.querySelector('[slot="content"]');
+    if (content) {
+      if (!content.hasAttribute('popover')) content.setAttribute('popover', 'manual');
+      // Sync state when the browser toggles the popover (e.g. light-dismiss, ESC on auto, programmatic).
+      content.addEventListener('toggle', this.#onToggle);
+      this.#content = content;
+    }
+
+    if (!this.#bound) {
+      this.#bound = true;
+
+      if (this.trigger === 'click') {
+        this.addEventListener('click', this.#onClick);
+      }
+
+      if (this.trigger === 'hover') {
+        this.addEventListener('pointerenter', this.#onEnter);
+        this.addEventListener('pointerleave', this.#onLeave);
+        // Also let the pointer cross into the content without closing.
+        if (content) {
+          content.addEventListener('pointerenter', this.#onEnter);
+          content.addEventListener('pointerleave', this.#onLeave);
+        }
+      }
+    }
+  }
+
+  render() {
+    if (this.open) this.#show();
+    else this.#hide();
+  }
+
+  // ── Public API ──
+  show()   { this.open = true; }
+  hide()   { this.open = false; }
+  toggle() { this.open = !this.open; }
+
+  // ── Internal ──
+
+  #show() {
+    const trigger = this.querySelector('[slot="trigger"]');
+    const content = this.#content ?? this.querySelector('[slot="content"]');
+    if (!trigger || !content) return;
+
+    if (!content.matches(':popover-open')) content.showPopover?.();
+
+    this.#anchorCleanup?.();
+    this.#anchorCleanup = anchorPopover(trigger, content, {
+      placement: this.placement,
+      gap: this.gap,
+    });
+
+    if (this.trigger === 'click' || this.trigger === 'manual') {
+      // Defer to next frame so the opening click doesn't trigger outside-dismiss.
+      requestAnimationFrame(() => {
+        document.addEventListener('pointerdown', this.#onOutside);
+        document.addEventListener('keydown', this.#onKey);
+      });
+    }
+  }
+
+  #hide() {
+    this.#anchorCleanup?.();
+    this.#anchorCleanup = null;
+
+    const content = this.#content ?? this.querySelector('[slot="content"]');
+    if (content?.matches(':popover-open')) content.hidePopover?.();
+
+    document.removeEventListener('pointerdown', this.#onOutside);
+    document.removeEventListener('keydown', this.#onKey);
+  }
+
+  // ── Events ──
+
+  #onClick = (e) => {
+    const trigger = this.querySelector('[slot="trigger"]');
+    if (trigger && (e.target === trigger || trigger.contains(e.target))) {
+      this.open = !this.open;
+    }
+  };
+
+  #onOutside = (e) => {
+    if (!this.open) return;
+    const content = this.#content;
+    // Click inside host or inside the (top-layer) content: keep open.
+    if (this.contains(e.target) || content?.contains(e.target)) return;
+    this.open = false;
+  };
+
+  #onKey = (e) => {
+    if (e.key === 'Escape' && this.open) {
+      e.stopPropagation();
+      this.open = false;
+    }
+  };
+
+  #onEnter = () => {
+    clearTimeout(this.#hoverTimer);
+    this.open = true;
+  };
+
+  #onLeave = () => {
+    clearTimeout(this.#hoverTimer);
+    this.#hoverTimer = setTimeout(() => { this.open = false; }, HOVER_CLOSE_DELAY);
+  };
+
+  #onToggle = (e) => {
+    // Reflect browser-driven state changes (e.g. popover-auto light-dismiss).
+    const nowOpen = e.newState === 'open';
+    if (nowOpen !== this.open) this.open = nowOpen;
+  };
+
+  disconnected() {
+    clearTimeout(this.#hoverTimer);
+    this.#hide();
+    if (this.trigger === 'click') {
+      this.removeEventListener('click', this.#onClick);
+    }
+    if (this.trigger === 'hover') {
+      this.removeEventListener('pointerenter', this.#onEnter);
+      this.removeEventListener('pointerleave', this.#onLeave);
+      if (this.#content) {
+        this.#content.removeEventListener('pointerenter', this.#onEnter);
+        this.#content.removeEventListener('pointerleave', this.#onLeave);
+      }
+    }
+    this.#content?.removeEventListener('toggle', this.#onToggle);
+    this.#content = null;
+    this.#bound = false;
+  }
+}
+
+customElements.define('popover-ui', AdiaPopover);
+export { AdiaPopover };

package/components/popover/popover.yaml

@@ -0,0 +1,257 @@
+# 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: AdiaPopover
+tag: popover-ui
+component: Popover
+category: container
+version: 1
+description: "Popover using Popover API + CSS Anchor Positioning. Triggers: click, hover, manual."
+props:
+  type:
+    description: "'auto' dismisses on outside click, 'manual' requires explicit close"
+    type: string
+    default: auto
+    enum:
+      - auto
+      - manual
+  anchor:
+    description: ID of the anchor element to position relative to
+    type: string
+    default: ""
+  gap:
+    description: Pixel offset between the anchor and the popover
+    type: number
+    default: 4
+  open:
+    description: Controls visibility via showPopover()/hidePopover()
+    type: boolean
+    default: false
+    reflect: true
+  placement:
+    description: Popover placement
+    type: string
+    default: bottom
+    enum:
+      - top
+      - bottom
+      - left
+      - right
+      - top-start
+      - top-end
+      - bottom-start
+      - bottom-end
+  trigger:
+    description: Trigger mode
+    type: string
+    default: click
+    enum:
+      - click
+      - hover
+      - manual
+events: {}
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: popover-demo
+    description: Popover component demo showing a trigger button that opens a floating content panel with text.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "pop"
+          ]
+        },
+        {
+          "id": "pop",
+          "component": "Popover",
+          "trigger": "click",
+          "placement": "bottom",
+          "children": [
+            "trigger",
+            "content"
+          ]
+        },
+        {
+          "id": "trigger",
+          "component": "Button",
+          "slot": "trigger",
+          "text": "Open Popover",
+          "variant": "outline"
+        },
+        {
+          "id": "content",
+          "component": "Text",
+          "slot": "content",
+          "textContent": "This is the popover content. It can contain any elements."
+        }
+      ]
+  - name: popover-menu
+    description: Button that triggers a Popover containing a list of menu action items.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Popover",
+          "attrs": {
+            "placement": "bottom-end"
+          },
+          "children": [
+            "trigger",
+            "menu-content"
+          ]
+        },
+        {
+          "id": "trigger",
+          "component": "Button",
+          "attrs": {
+            "variant": "outline",
+            "icon": "more-horizontal",
+            "aria-label": "More actions"
+          }
+        },
+        {
+          "id": "menu-content",
+          "component": "Column",
+          "attrs": {
+            "gap": "xs",
+            "padding": "sm"
+          },
+          "children": [
+            "menu-edit",
+            "menu-duplicate",
+            "menu-share",
+            "menu-div",
+            "menu-delete"
+          ]
+        },
+        {
+          "id": "menu-edit",
+          "component": "Button",
+          "attrs": {
+            "variant": "ghost",
+            "icon": "edit",
+            "full": true,
+            "align": "start"
+          },
+          "content": "Edit"
+        },
+        {
+          "id": "menu-duplicate",
+          "component": "Button",
+          "attrs": {
+            "variant": "ghost",
+            "icon": "copy",
+            "full": true,
+            "align": "start"
+          },
+          "content": "Duplicate"
+        },
+        {
+          "id": "menu-share",
+          "component": "Button",
+          "attrs": {
+            "variant": "ghost",
+            "icon": "share",
+            "full": true,
+            "align": "start"
+          },
+          "content": "Share"
+        },
+        {
+          "id": "menu-div",
+          "component": "Divider"
+        },
+        {
+          "id": "menu-delete",
+          "component": "Button",
+          "attrs": {
+            "variant": "danger",
+            "icon": "trash",
+            "full": true,
+            "align": "start"
+          },
+          "content": "Delete"
+        }
+      ]
+keywords:
+  - popover
+  - popup
+  - modal
+  - dialog
+  - menu
+  - dropdown
+  - actions
+  - tooltip
+  - hint
+  - context-menu
+  - right-click
+synonyms:
+  actions:
+    - toolbar
+    - button
+    - popover
+  context-menu:
+    - popover
+    - menu
+  dialog:
+    - drawer
+    - alert
+    - popover
+    - panel
+  dropdown:
+    - popover
+    - menu
+    - select
+    - form
+  hint:
+    - tooltip
+    - button
+    - popover
+  menu:
+    - nav
+    - sidebar
+    - popover
+    - menu
+    - command
+  modal:
+    - drawer
+    - alert
+    - popover
+    - panel
+  popover:
+    - popover
+    - menu
+    - tooltip
+  popup:
+    - toast
+    - notification
+    - alert
+    - popover
+    - drawer
+  right-click:
+    - popover
+    - menu
+  tooltip:
+    - tooltip
+    - button
+    - popover
+related:
+  - button
+  - divider

package/components/progress/progress.a2ui.json

@@ -0,0 +1,199 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Progress.json",
+  "title": "Progress",
+  "description": "Progress indicator. Bar (default) or spinner. Value < 0 = indeterminate.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Progress"
+    },
+    "indeterminate": {
+      "description": "Force indeterminate mode (animated loop) regardless of value.",
+      "type": "boolean",
+      "default": false
+    },
+    "max": {
+      "description": "Upper bound for value. When omitted, value is treated as a 0..1 fraction.",
+      "type": "number",
+      "default": 100
+    },
+    "value": {
+      "description": "Current progress. 0..max (or 0..1 when max omitted). Negative = indeterminate.",
+      "type": "number",
+      "default": -1
+    },
+    "variant": {
+      "description": "Display variant. Structural values (bar, spinner) set the render mode; semantic values (primary/success/warning/danger/info) set the fill color. Prefer the `color` global attribute for color; variant-as-color accepted for back-compat with older exemplars.",
+      "type": "string",
+      "enum": [
+        "bar",
+        "spinner",
+        "primary",
+        "success",
+        "warning",
+        "danger",
+        "info"
+      ],
+      "default": "bar"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "events": {},
+    "examples": [
+      {
+        "description": "Two-column dashboard with quick actions (buttons) and system status (progress bars).",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Grid\",\n    \"children\": [\n      \"c1\",\n      \"c2\"\n    ],\n    \"columns\": \"2\"\n  },\n  {\n    \"id\": \"c1\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"c1h\",\n      \"c1s\"\n    ]\n  },\n  {\n    \"id\": \"c1h\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"c1t\"\n    ]\n  },\n  {\n    \"id\": \"c1t\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Quick Actions\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"c1s\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"c1col\"\n    ]\n  },\n  {\n    \"id\": \"c1col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"b1\",\n      \"b2\",\n      \"b3\"\n    ]\n  },\n  {\n    \"id\": \"b1\",\n    \"component\": \"Button\",\n    \"text\": \"New Project\",\n    \"variant\": \"solid\",\n    \"iconLeading\": \"plus\"\n  },\n  {\n    \"id\": \"b2\",\n    \"component\": \"Button\",\n    \"text\": \"Invite Member\",\n    \"variant\": \"outline\",\n    \"iconLeading\": \"users\"\n  },\n  {\n    \"id\": \"b3\",\n    \"component\": \"Button\",\n    \"text\": \"View Reports\",\n    \"variant\": \"ghost\",\n    \"iconLeading\": \"chart\"\n  },\n  {\n    \"id\": \"c2\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"c2h\",\n      \"c2s\"\n    ]\n  },\n  {\n    \"id\": \"c2h\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"c2t\"\n    ]\n  },\n  {\n    \"id\": \"c2t\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"System Status\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"c2s\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"c2col\"\n    ]\n  },\n  {\n    \"id\": \"c2col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"p1\",\n      \"p2\",\n      \"p3\"\n    ]\n  },\n  {\n    \"id\": \"p1\",\n    \"component\": \"Progress\",\n    \"value\": \"92\",\n    \"label\": \"CPU\"\n  },\n  {\n    \"id\": \"p2\",\n    \"component\": \"Progress\",\n    \"value\": \"67\",\n    \"label\": \"Memory\"\n  },\n  {\n    \"id\": \"p3\",\n    \"component\": \"Progress\",\n    \"value\": \"34\",\n    \"label\": \"Disk\"\n  }\n]",
+        "name": "dashboard"
+      },
+      {
+        "description": "User onboarding checklist with progress and checkbox items.",
+        "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\": \"Getting Started\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"col\"\n    ]\n  },\n  {\n    \"id\": \"col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"prog\",\n      \"c1\",\n      \"c2\",\n      \"c3\"\n    ],\n    \"gap\": \"3\"\n  },\n  {\n    \"id\": \"prog\",\n    \"component\": \"Progress\",\n    \"value\": 33,\n    \"max\": 100\n  },\n  {\n    \"id\": \"c1\",\n    \"component\": \"CheckBox\",\n    \"label\": \"Complete your profile\",\n    \"checked\": true\n  },\n  {\n    \"id\": \"c2\",\n    \"component\": \"CheckBox\",\n    \"label\": \"Invite team members\"\n  },\n  {\n    \"id\": \"c3\",\n    \"component\": \"CheckBox\",\n    \"label\": \"Create your first project\"\n  }\n]",
+        "name": "onboarding-checklist"
+      }
+    ],
+    "keywords": [
+      "progress",
+      "monitor",
+      "monitoring",
+      "health",
+      "performance",
+      "workflow",
+      "stepper",
+      "wizard",
+      "multi-step",
+      "timeline",
+      "loading",
+      "spinner",
+      "percent",
+      "gamification"
+    ],
+    "name": "AdiaProgress",
+    "related": [
+      "grid",
+      "button",
+      "check-box",
+      "upload"
+    ],
+    "slots": {
+      "fill": {
+        "description": "Bar fill element inside track"
+      },
+      "track": {
+        "description": "Bar track container"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "gamification": [
+        "leaderboard",
+        "badge",
+        "progress"
+      ],
+      "health": [
+        "dashboard",
+        "metric",
+        "stat",
+        "progress"
+      ],
+      "loading": [
+        "loading",
+        "skeleton",
+        "progress",
+        "bar"
+      ],
+      "monitor": [
+        "dashboard",
+        "metric",
+        "stat",
+        "chart",
+        "progress"
+      ],
+      "monitoring": [
+        "dashboard",
+        "metric",
+        "stat",
+        "chart",
+        "progress"
+      ],
+      "multi-step": [
+        "wizard",
+        "step",
+        "progress"
+      ],
+      "percent": [
+        "progress",
+        "bar"
+      ],
+      "performance": [
+        "dashboard",
+        "metric",
+        "chart",
+        "stat",
+        "progress"
+      ],
+      "progress": [
+        "progress",
+        "bar",
+        "tracker",
+        "loading"
+      ],
+      "spinner": [
+        "loading",
+        "skeleton",
+        "progress"
+      ],
+      "stepper": [
+        "wizard",
+        "step",
+        "progress",
+        "tracker"
+      ],
+      "timeline": [
+        "social",
+        "post",
+        "activity",
+        "team",
+        "progress"
+      ],
+      "wizard": [
+        "wizard",
+        "step",
+        "progress",
+        "tracker",
+        "onboarding"
+      ],
+      "workflow": [
+        "kanban",
+        "board",
+        "project",
+        "wizard",
+        "progress",
+        "step"
+      ]
+    },
+    "tag": "progress-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}