@adia-ai/web-components 0.0.28 → 0.0.33

package/patterns/app-nav/app-nav.js

@@ -1,112 +0,0 @@
-/**
- * <app-nav-ui> — Collapsible navigation sidebar.
- *
- * Structure:
- *   <app-nav-ui>
- *     <app-nav-group-ui icon="gear" text="Settings" badge="3">
- *       <app-nav-item-ui text="General" value="/settings/general"></app-nav-item-ui>
- *     </app-nav-group-ui>
- *     <app-nav-item-ui icon="user" text="Profile" value="/profile"></app-nav-item-ui>
- *   </app-nav-ui>
- *
- * When [collapsed], labels and badges hide; groups open a popover with their
- * children instead of expanding inline.
- *
- * Event: nav-select (detail: { item, text, value })
- */
-
-import { AdiaElement } from '../../core/element.js';
-
-class AdiaAppNav extends AdiaElement {
-  static properties = {
-    collapsed: { type: Boolean, default: false, reflect: true },
-    divider:   { type: Boolean, default: false, reflect: true },
-  };
-
-  static template = () => null;
-
-  #ro = null;
-
-  connected() {
-    this.setAttribute('role', 'navigation');
-    this.addEventListener('click', this.#onClick);
-    this.#ro = new ResizeObserver(() => this.#updateTooltips());
-    this.#ro.observe(this);
-  }
-
-  render() {
-    this.#updateTooltips();
-  }
-
-  #updateTooltips() {
-    const isCollapsed = this.collapsed || this.getBoundingClientRect().width <= 96;
-    for (const group of this.querySelectorAll(':scope > app-nav-group-ui')) {
-      const header = group.querySelector(':scope > [slot="header"]');
-      if (header) header.title = isCollapsed ? group.text : '';
-    }
-    for (const item of this.querySelectorAll(':scope > app-nav-item-ui')) {
-      item.title = isCollapsed ? item.text : '';
-    }
-  }
-
-  get selectedItem() {
-    return this.querySelector('app-nav-item-ui[selected]');
-  }
-
-  select(item) {
-    const prev = this.selectedItem;
-    if (prev && prev !== item) prev.removeAttribute('selected');
-    item.setAttribute('selected', '');
-    this.dispatchEvent(new CustomEvent('nav-select', {
-      bubbles: true,
-      detail: { item, text: item.text, value: item.value },
-    }));
-  }
-
-  toggle() {
-    this.collapsed = !this.collapsed;
-  }
-
-  #onClick = (e) => {
-    const item = e.target.closest('app-nav-item-ui');
-    if (item && this.contains(item)) {
-      this.select(item);
-      this.#flushHoverState();
-      return;
-    }
-
-    const group = e.target.closest('app-nav-group-ui');
-    if (group && this.contains(group)) {
-      const isCollapsed = this.collapsed || this.getBoundingClientRect().width <= 96;
-      if (isCollapsed) {
-        group.showPopover();
-      } else {
-        const header = group.querySelector(':scope > [slot="header"]');
-        if (header && (e.target === header || header.contains(e.target))) {
-          group.open = !group.open;
-        }
-      }
-    }
-  };
-
-  // Safari macOS leaves `:hover` stuck on items the cursor passed through
-  // when the DOM mutates during click+route navigation (no `mouseleave`
-  // fires). Toggling pointer-events on the container forces Safari to
-  // re-evaluate hover state on next paint without flickering layout.
-  // Documented in docs/BROWSER-COMPAT.md §3a.
-  #flushHoverState() {
-    this.style.pointerEvents = 'none';
-    requestAnimationFrame(() => {
-      this.style.pointerEvents = '';
-    });
-  }
-
-  disconnected() {
-    this.removeEventListener('click', this.#onClick);
-    this.#ro?.disconnect();
-    this.#ro = null;
-  }
-}
-customElements.define('app-nav-ui', AdiaAppNav);
-
-export { AdiaAppNav };

package/patterns/app-nav/app-nav.yaml

@@ -1,54 +0,0 @@
-$schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaAppNav
-tag: app-nav-ui
-component: AppNav
-category: nav
-version: 1
-description: |
-  Collapsible navigation sidebar. Manages selection state across
-  app-nav-item-ui children and opens popover menus for app-nav-group-ui
-  children when collapsed.
-
-props:
-  collapsed:
-    type: boolean
-    default: false
-    reflect: true
-    description: When true, labels and badges hide; only icons show. Groups use popovers instead of inline expansion.
-
-  divider:
-    type: boolean
-    default: false
-    reflect: true
-    description: Render auto-dividers between groups.
-
-events:
-  nav-select:
-    description: Fired when a child app-nav-item-ui is selected (via click or the .select() method).
-    detail:
-      item: HTMLElement
-      text: string
-      value: string
-
-slots:
-  default:
-    description: app-nav-group-ui and app-nav-item-ui children.
-
-states:
-  - name: idle
-    description: Default, interactive.
-  - name: collapsed
-    attribute: collapsed
-    description: Narrow-width mode; groups open popovers instead of expanding.
-
-traits: []
-
-a2ui:
-  rules:
-    - app-nav-ui is the only valid parent of app-nav-group-ui.
-    - app-nav-item-ui may be a direct child of app-nav-ui OR nested inside app-nav-group-ui.
-
-keywords: [app-nav, sidebar, navigation, nav, menu]
-synonyms:
-  sidebar: [app-nav, nav, navigation]
-related: [AppShell, AppNavGroup, AppNavItem]

package/patterns/app-nav-group/app-nav-group.a2ui.json

@@ -1,82 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://adiaui.dev/a2ui/v0_9/components/AppNavGroup.json",
-  "title": "AppNavGroup",
-  "description": "Collapsible group inside app-nav-ui. Has icon, label, optional badge, and\na caret indicating open/closed. When the parent app-nav-ui is collapsed,\nclicking the group opens a popover with its children instead of toggling\ninline expansion.\n",
-  "type": "object",
-  "allOf": [
-    {
-      "$ref": "common_types.json#/$defs/ComponentCommon"
-    },
-    {
-      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
-    }
-  ],
-  "properties": {
-    "badge": {
-      "description": "Optional badge text (e.g. unread count).",
-      "type": "string",
-      "default": ""
-    },
-    "component": {
-      "const": "AppNavGroup"
-    },
-    "icon": {
-      "description": "Phosphor icon name rendered in the group header.",
-      "type": "string",
-      "default": ""
-    },
-    "open": {
-      "description": "Expanded state. Toggled by header click; ignored when parent nav is collapsed (popover used instead).",
-      "type": "boolean",
-      "default": false
-    },
-    "text": {
-      "description": "Group label text.",
-      "type": "string",
-      "default": ""
-    }
-  },
-  "required": [
-    "component"
-  ],
-  "unevaluatedProperties": false,
-  "x-adiaui": {
-    "anti_patterns": [],
-    "category": "nav",
-    "events": {},
-    "examples": [],
-    "keywords": [
-      "app-nav-group",
-      "nav",
-      "group",
-      "menu-section"
-    ],
-    "name": "AdiaAppNavGroup",
-    "related": [
-      "AppNav",
-      "AppNavItem"
-    ],
-    "slots": {
-      "default": {
-        "description": "app-nav-item-ui children rendered beneath the group header."
-      }
-    },
-    "states": [
-      {
-        "description": "Default, collapsed or open based on [open].",
-        "name": "idle"
-      },
-      {
-        "description": "Group is expanded; children visible.",
-        "attribute": "open",
-        "name": "open"
-      }
-    ],
-    "synonyms": {},
-    "tag": "app-nav-group-ui",
-    "tokens": {},
-    "traits": [],
-    "version": 1
-  }
-}

package/patterns/app-nav-group/app-nav-group.yaml

@@ -1,59 +0,0 @@
-$schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaAppNavGroup
-tag: app-nav-group-ui
-component: AppNavGroup
-category: nav
-version: 1
-description: |
-  Collapsible group inside app-nav-ui. Has icon, label, optional badge, and
-  a caret indicating open/closed. When the parent app-nav-ui is collapsed,
-  clicking the group opens a popover with its children instead of toggling
-  inline expansion.
-
-props:
-  text:
-    type: string
-    default: ""
-    reflect: true
-    description: Group label text.
-
-  icon:
-    type: string
-    default: ""
-    reflect: true
-    description: Phosphor icon name rendered in the group header.
-
-  badge:
-    type: string
-    default: ""
-    reflect: true
-    description: Optional badge text (e.g. unread count).
-
-  open:
-    type: boolean
-    default: false
-    reflect: true
-    description: Expanded state. Toggled by header click; ignored when parent nav is collapsed (popover used instead).
-
-events: {}
-
-slots:
-  default:
-    description: app-nav-item-ui children rendered beneath the group header.
-
-states:
-  - name: idle
-    description: Default, collapsed or open based on [open].
-  - name: open
-    attribute: open
-    description: Group is expanded; children visible.
-
-traits: []
-
-a2ui:
-  rules:
-    - Must be a direct child of app-nav-ui.
-    - Children must be app-nav-item-ui, not arbitrary components.
-
-keywords: [app-nav-group, nav, group, menu-section]
-related: [AppNav, AppNavItem]

package/patterns/app-nav-item/app-nav-item.a2ui.json

@@ -1,83 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://adiaui.dev/a2ui/v0_9/components/AppNavItem.json",
-  "title": "AppNavItem",
-  "description": "Single navigation link in app-nav-ui, optionally nested inside\napp-nav-group-ui. Icon + label + optional badge. Selection is managed\nby the parent app-nav-ui — set via clicking or nav.select(item).\n",
-  "type": "object",
-  "allOf": [
-    {
-      "$ref": "common_types.json#/$defs/ComponentCommon"
-    },
-    {
-      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
-    }
-  ],
-  "properties": {
-    "badge": {
-      "description": "Optional trailing badge text (count, \"New\", etc.).",
-      "type": "string",
-      "default": ""
-    },
-    "component": {
-      "const": "AppNavItem"
-    },
-    "icon": {
-      "description": "Phosphor icon name (leading).",
-      "type": "string",
-      "default": ""
-    },
-    "selected": {
-      "description": "Current selection. Managed by parent app-nav-ui — don't set multiple siblings.",
-      "type": "boolean",
-      "default": false
-    },
-    "text": {
-      "description": "Item label.",
-      "type": "string",
-      "default": ""
-    },
-    "value": {
-      "description": "Unique identifier for selection tracking (also the route / target id).",
-      "type": "string",
-      "default": ""
-    }
-  },
-  "required": [
-    "component"
-  ],
-  "unevaluatedProperties": false,
-  "x-adiaui": {
-    "anti_patterns": [],
-    "category": "nav",
-    "events": {},
-    "examples": [],
-    "keywords": [
-      "app-nav-item",
-      "nav",
-      "link",
-      "menu-item"
-    ],
-    "name": "AdiaAppNavItem",
-    "related": [
-      "AppNav",
-      "AppNavGroup"
-    ],
-    "slots": {},
-    "states": [
-      {
-        "description": "Default.",
-        "name": "idle"
-      },
-      {
-        "description": "Currently selected nav destination.",
-        "attribute": "selected",
-        "name": "selected"
-      }
-    ],
-    "synonyms": {},
-    "tag": "app-nav-item-ui",
-    "tokens": {},
-    "traits": [],
-    "version": 1
-  }
-}

package/patterns/app-nav-item/app-nav-item.js

@@ -1,42 +0,0 @@
-/**
- * <app-nav-item-ui> — Single navigation link in app-nav-ui (optionally
- * nested under app-nav-group-ui). Supports icon, label, and optional badge.
- *
- * Selection is managed by the parent app-nav-ui; setting `selected` is
- * a side-effect of calling nav.select(item) or user click.
- */
-
-import { AdiaElement } from '../../core/element.js';
-
-class AdiaAppNavItem extends AdiaElement {
-  static properties = {
-    text:     { type: String,  default: '', reflect: true },
-    icon:     { type: String,  default: '', reflect: true },
-    value:    { type: String,  default: '', reflect: true },
-    badge:    { type: String,  default: '', reflect: true },
-    selected: { type: Boolean, default: false, reflect: true },
-  };
-
-  static template = () => null;
-
-  connected() {
-    this.setAttribute('role', 'link');
-    this.setAttribute('tabindex', '0');
-
-    if (!this.querySelector('[slot="text"]')) {
-      this.innerHTML = `
-        <span slot="icon">${this.icon ? `<icon-ui name="${this.icon}"></icon-ui>` : ''}</span>
-        <span slot="text">${this.text}</span>
-        ${this.badge ? `<span slot="badge">${this.badge}</span>` : ''}
-      `;
-    }
-  }
-
-  render() {
-    const textEl = this.querySelector('[slot="text"]');
-    if (textEl) textEl.textContent = this.text;
-  }
-}
-customElements.define('app-nav-item-ui', AdiaAppNavItem);
-
-export { AdiaAppNavItem };

package/patterns/app-nav-item/app-nav-item.yaml

@@ -1,62 +0,0 @@
-$schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaAppNavItem
-tag: app-nav-item-ui
-component: AppNavItem
-category: nav
-version: 1
-description: |
-  Single navigation link in app-nav-ui, optionally nested inside
-  app-nav-group-ui. Icon + label + optional badge. Selection is managed
-  by the parent app-nav-ui — set via clicking or nav.select(item).
-
-props:
-  text:
-    type: string
-    default: ""
-    reflect: true
-    description: Item label.
-
-  icon:
-    type: string
-    default: ""
-    reflect: true
-    description: Phosphor icon name (leading).
-
-  value:
-    type: string
-    default: ""
-    reflect: true
-    description: Unique identifier for selection tracking (also the route / target id).
-
-  badge:
-    type: string
-    default: ""
-    reflect: true
-    description: Optional trailing badge text (count, "New", etc.).
-
-  selected:
-    type: boolean
-    default: false
-    reflect: true
-    description: Current selection. Managed by parent app-nav-ui — don't set multiple siblings.
-
-events: {}
-
-slots: {}
-
-states:
-  - name: idle
-    description: Default.
-  - name: selected
-    attribute: selected
-    description: Currently selected nav destination.
-
-traits: []
-
-a2ui:
-  rules:
-    - Must be a descendant of app-nav-ui (direct child or via app-nav-group-ui).
-    - Only one sibling may have selected=true at a time; prefer calling nav.select() over setting the attribute manually.
-
-keywords: [app-nav-item, nav, link, menu-item]
-related: [AppNav, AppNavGroup]

package/patterns/app-shell/app-shell.a2ui.json

@@ -1,129 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://adiaui.dev/a2ui/v0_9/components/AppShell.json",
-  "title": "AppShell",
-  "description": "Behavior-only application shell. Wires sidebar toggles, resize handles,\na Cmd+K command palette, and a ResizeObserver that drives responsive\nsidebar collapse. Author supplies the DOM (aside[data-sidebar], main,\ndialog[data-command]); app-shell-ui binds the interactions.\n",
-  "type": "object",
-  "allOf": [
-    {
-      "$ref": "common_types.json#/$defs/ComponentCommon"
-    },
-    {
-      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
-    }
-  ],
-  "properties": {
-    "component": {
-      "const": "AppShell"
-    },
-    "mode": {
-      "description": "Layout variant — default is bordered surface; rounded softens edges; borderless removes the outer chrome.",
-      "type": "string",
-      "enum": [
-        "",
-        "rounded",
-        "borderless"
-      ],
-      "default": ""
-    }
-  },
-  "required": [
-    "component"
-  ],
-  "unevaluatedProperties": false,
-  "x-adiaui": {
-    "anti_patterns": [],
-    "category": "layout",
-    "events": {
-      "command-select": {
-        "description": "Forwarded from the command palette when an option is chosen.",
-        "detail": {
-          "value": "string"
-        }
-      },
-      "sidebar-resize": {
-        "description": "Fired as a sidebar is dragged; debounced on the trailing edge.",
-        "detail": {
-          "sidebar": "string",
-          "width": "number"
-        }
-      },
-      "sidebar-toggle": {
-        "description": "Fired when a sidebar is collapsed or expanded.",
-        "detail": {
-          "expanded": "boolean",
-          "sidebar": "string"
-        }
-      }
-    },
-    "examples": [],
-    "keywords": [
-      "app-shell",
-      "shell",
-      "layout",
-      "admin",
-      "dashboard",
-      "sidebar",
-      "nav"
-    ],
-    "name": "AdiaAppShell",
-    "related": [
-      "AppNav",
-      "AppNavGroup",
-      "AppNavItem",
-      "Command"
-    ],
-    "slots": {
-      "description": {
-        "description": "Secondary metadata inside any chrome bar. Muted + --a-ui-sm size."
-      },
-      "default": {
-        "description": "Author-supplied page DOM. Expected structure — aside[data-sidebar] for navigation, main for content, optional dialog[data-command] for Cmd+K."
-      },
-      "action": {
-        "description": "Trailing control cluster inside any chrome bar. The first [slot=\"action\"] child pushes itself (and siblings) to the end; subsequent siblings flow with gap. Coexists with legacy <span data-spacer> / <div data-actions> hooks for one release — new code should prefer slots."
-      },
-      "action-leading": {
-        "description": "Leading (inline-start) control cluster inside any chrome bar. Pairs with [slot=\"action\"] for dual-cluster chrome (e.g. back button + breadcrumb on the left, primary actions on the right). Replaces the legacy <span data-spacer> hack."
-      },
-      "heading": {
-        "description": "Primary label inside any chrome bar. Medium-weight + strong fg."
-      },
-      "icon": {
-        "description": "Leading glyph inside any chrome bar — > main > header / footer and [data-sidebar] > header / footer. Muted color, flex-align."
-      }
-    },
-    "states": [
-      {
-        "description": "Default, interactive shell.",
-        "name": "idle"
-      },
-      {
-        "description": "Leading sidebar is collapsed; content expands.",
-        "attribute": "data-sidebar-leading-collapsed",
-        "name": "collapsed-leading"
-      },
-      {
-        "description": "Trailing sidebar (inspector) is collapsed.",
-        "attribute": "data-sidebar-trailing-collapsed",
-        "name": "collapsed-trailing"
-      }
-    ],
-    "synonyms": {
-      "admin": [
-        "dashboard",
-        "shell",
-        "app-shell"
-      ],
-      "dashboard": [
-        "admin",
-        "shell",
-        "app-shell"
-      ]
-    },
-    "tag": "app-shell-ui",
-    "tokens": {},
-    "traits": [],
-    "version": 1
-  }
-}

package/patterns/app-shell/app-shell.css

@@ -1,14 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   App Shell — <app-shell-ui> pattern component CSS
-
-   Split into constituent parts for maintainability.
-   Import order matters: tokens first, then structure, then overrides.
-   ═══════════════════════════════════════════════════════════════ */
-
-@import "./css/app-shell.tokens.css";
-@import "./css/app-shell.shell.css";
-@import "./css/app-shell.main.css";
-@import "./css/app-shell.sidebar.css";
-@import "./css/app-shell.collapsed.css";
-@import "./css/app-shell.templates.css";
-@import "./css/app-shell.helpers.css";