@adia-ai/web-components 0.0.27 → 0.0.29

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.css

@@ -1,264 +0,0 @@
-@scope (app-nav-group-ui) {
-  :where(:scope) {
-    --nav-group-row-height:    var(--a-size);
-    --nav-group-row-height-sm: var(--a-size-sm);
-    --nav-group-row-height-lg: var(--a-size-lg);
-    --nav-group-row-px:        var(--a-ui-px);
-    --nav-group-row-gap:       var(--a-space-1);
-    --nav-group-row-radius:    var(--a-radius-md);
-    --nav-group-font-size:     var(--a-ui-size);
-    --nav-group-font-size-sm:  var(--a-ui-sm);
-    --nav-group-font-size-lg:  var(--a-ui-lg);
-    --nav-group-fg:            var(--a-fg);
-    --nav-group-fg-hover:      var(--a-fg-strong);
-    --nav-group-fg-muted:      var(--a-fg-muted);
-    --nav-group-fg-selected:   var(--a-fg-strong);
-    --nav-group-bg-hover:      var(--a-bg-muted);
-    --nav-group-icon-size:     calc(var(--nav-group-row-height) - var(--a-space-2));
-    --nav-group-badge-size:    var(--a-ui-sm);
-
-    --nav-item-child-height:    var(--a-size-sm);
-    --nav-item-child-font:      var(--nav-group-font-size);
-  }
-
-  :scope {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    gap: var(--nav-gap);
-    position: relative;
-  }
-
-  /* Continuous indent rail */
-  :scope[open]::after {
-    content: '';
-    position: absolute;
-    left: calc(var(--nav-group-row-px) + var(--nav-group-icon-size) / 2);
-    transform: translateX(-50%);
-    top: var(--nav-group-row-height);
-    bottom: calc(var(--nav-group-row-height) / 2);
-    width: 1px;
-    background: var(--nav-group-indent-rail-bg);
-    pointer-events: none;
-  }
-  :scope[open] > [slot="header"],
- :scope[open] > [slot="header"] [slot="icon"] {
-    color: var(--nav-group-fg-selected);
-  }
-
-  /* Header row */
-  [slot="header"] {
-    display: flex;
-    align-items: center;
-    gap: var(--nav-group-row-gap);
-    height: var(--nav-group-row-height);
-    padding: 0 var(--nav-group-row-px);
-    border-radius: var(--nav-group-row-radius);
-    font-size: var(--nav-group-font-size);
-    color: var(--nav-group-fg);
-    cursor: pointer;
-    user-select: none;
-    white-space: nowrap;
-    transition:
-      background var(--nav-duration-fast) var(--nav-easing),
-      color var(--nav-duration-fast) var(--nav-easing);
-    outline: none;
-  }
-
-  [slot="header"]:hover {
-    background: var(--nav-group-bg-hover);
-    color: var(--nav-group-fg-hover);
-  }
-
-  [slot="header"]:hover [slot="icon"] {
-    color: var(--nav-group-fg-hover);
-  }
-
-  [slot="header"]:focus-visible {
-    background: var(--nav-group-bg-hover);
-    color: var(--nav-group-fg-hover);
-    outline: none;
-  }
-
-  [slot="header"] [slot="icon"] {
-    width: var(--nav-group-icon-size);
-    height: var(--nav-group-icon-size);
-    flex-shrink: 0;
-    color: var(--nav-group-fg-muted);
-    transition: color var(--nav-duration-fast) var(--nav-easing);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  [slot="header"] [slot="icon"] icon-ui {
-    --a-icon-size: calc(var(--nav-group-icon-font-size) + 2px);
-  }
-
-  [slot="header"] [slot="text"] {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-weight: var(--nav-group-text-weight);
-  }
-
-  [slot="header"] [slot="badge"] {
-    font-size: var(--nav-group-badge-size);
-    color: var(--nav-group-fg-muted);
-    background: var(--nav-group-badge-bg);
-    padding: 1px var(--nav-group-badge-px);
-    border-radius: var(--nav-group-badge-radius);
-    line-height: 1.4;
-  }
-
-  [slot="header"] [slot="caret"] {
-    /*--a-icon-size: 0.5rem;*/
-    color: var(--nav-group-fg-muted);
-    transition:
-      transform var(--nav-duration-fast) var(--nav-easing),
-      color var(--nav-duration-fast) var(--nav-easing);
-    transform: rotate(90deg);
-    flex-shrink: 0;
-
-    --a-icon-size: var(--a-caret-size);
-  }
-
-  [slot="header"]:hover [slot="caret"] {
-    color: var(--nav-group-fg-hover);
-  }
-
-  :scope:not([open]) > [slot="header"] [slot="caret"] {
-    transform: rotate(0deg);
-  }
-
-  /* Children — hidden when collapsed */
-  :scope:not([open]) > app-nav-item-ui {
-    display: none;
-  }
-
-  /* Child items default to sm for visual hierarchy */
-  :scope > app-nav-item-ui:not([size]) {
-    height: var(--nav-item-child-height);
-    font-size: var(--nav-item-child-font);
-  }
-
-  /* ── Collapsed nav: hide text, badge, caret ── */
-  app-nav-ui[collapsed] & [slot="text"],
-  app-nav-ui[collapsed] & [slot="badge"],
-  app-nav-ui[collapsed] & [slot="caret"] {
-    display: none;
-  }
-
-  app-nav-ui[collapsed] & [slot="header"] {
-    justify-content: center;
-    padding: 0;
-  }
-
-  app-nav-ui[collapsed] & {
-    align-self: stretch;
-  }
-
-  app-nav-ui[collapsed] &::after {
-    display: none;
-  }
-
-  @container sidebar (max-width: 96px) {
-    [slot="text"], [slot="badge"], [slot="caret"] {
-      display: none !important;
-    }
-    app-nav-item-ui {
-      display: none !important;
-    }
-    [slot="header"] {
-      justify-content: center;
-      padding: 0;
-    }
-    [slot="icon"] icon-ui {
-      --a-icon-size: --a-icon-size;
-    }
-    [slot="caret"] icon-ui {
-      --a-icon-size: --a-caret-size;
-    }
-    :scope {
-      align-self: stretch;
-    }
-    :scope::after {
-      display: none;
-    }
-  }
-
-  /* ── Size variants ── */
-  :scope[size="sm"] {
-    --nav-group-row-height: var(--nav-group-row-height-sm);
-    --nav-group-font-size:  var(--nav-group-font-size-sm);
-  }
-
-  :scope[size="lg"] {
-    --nav-group-row-height: var(--nav-group-row-height-lg);
-    --nav-group-font-size:  var(--nav-group-font-size-lg);
-  }
-}
-
-/* Nav-group popover (outside @scope — lives in top layer)
-   Popovers are promoted to the top layer and cannot inherit
-   pattern-level custom properties, so raw --a-* tokens are
-   used intentionally here. */
-app-nav-group-ui [slot="popover"] {
-  margin: 0;
-  padding: var(--a-space-1);
-  border: 1px solid var(--a-border-subtle);
-  border-radius: var(--a-radius);
-  background: var(--a-bg-subtle);
-  box-shadow: var(--a-shadow-lg);
-  min-width: 160px;
-  max-height: calc(100vh - 3rem);
-  overflow-y: auto;
-  font-size: var(--a-ui-size);
-}
-
-app-nav-group-ui [slot="popover-label"] {
-  padding: var(--a-space-1) var(--a-space-2);
-  font-weight: var(--a-weight-medium);
-  color: var(--a-fg-muted);
-  font-size: var(--a-ui-tiny);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-
-app-nav-group-ui [slot="popover"] [role="option"] {
-  padding: var(--a-space-1) var(--a-space-2);
-  border-radius: var(--a-radius);
-  color: var(--a-fg-subtle);
-  cursor: pointer;
-  white-space: nowrap;
-  transition:
-    background var(--a-duration-fast) var(--a-easing),
-    color var(--a-duration-fast) var(--a-easing);
-}
-
-app-nav-group-ui [slot="popover"] [role="option"]:hover {
-  background: var(--a-bg-hover);
-  color: var(--a-fg-strong);
-}
-
-/* Selected / current option — mirrors the main rail's nav-item selection:
-   muted fill + leading 2px accent bar. */
-app-nav-group-ui [slot="popover"] [role="option"][aria-current="page"],
-app-nav-group-ui [slot="popover"] [role="option"][aria-selected="true"] {
-  position: relative;
-  background: var(--a-bg-hover);
-  color: var(--a-fg-strong);
-  font-weight: var(--a-weight-medium);
-}
-
-app-nav-group-ui [slot="popover"] [role="option"][aria-current="page"]::before,
-app-nav-group-ui [slot="popover"] [role="option"][aria-selected="true"]::before {
-  content: '';
-  position: absolute;
-  inset-inline-start: calc(var(--a-space-2) * -0.5);
-  inset-block: 25%;
-  width: 2px;
-  border-radius: 1px;
-  background: var(--a-accent);
-}

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

@@ -1,116 +0,0 @@
-/**
- * <app-nav-group-ui> — Collapsible group of nav items 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.
- */
-
-import { AdiaElement } from '../../core/element.js';
-import { anchorPopover } from '../../core/anchor.js';
-
-class AdiaAppNavGroup extends AdiaElement {
-  static properties = {
-    text:  { type: String,  default: '', reflect: true },
-    icon:  { type: String,  default: '', reflect: true },
-    badge: { type: String,  default: '', reflect: true },
-    open:  { type: Boolean, default: false, reflect: true },
-  };
-
-  static template = () => null;
-
-  #popover = null;
-  #anchorCleanup = null;
-
-  connected() {
-    this.setAttribute('role', 'group');
-
-    if (!this.querySelector(':scope > [slot="header"]')) {
-      const header = document.createElement('div');
-      header.setAttribute('slot', 'header');
-      header.setAttribute('tabindex', '0');
-      header.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>` : ''}
-        <icon-ui slot="caret" name="caret-right"></icon-ui>
-      `;
-      this.prepend(header);
-    }
-  }
-
-  render() {
-    const textEl = this.querySelector('[slot="header"] [slot="text"]');
-    if (textEl) textEl.textContent = this.text;
-
-    const badgeEl = this.querySelector('[slot="header"] [slot="badge"]');
-    if (badgeEl) badgeEl.textContent = this.badge;
-
-    this.setAttribute('aria-expanded', String(this.open));
-  }
-
-  showPopover() {
-    if (!this.#popover) {
-      this.#popover = document.createElement('div');
-      this.#popover.setAttribute('slot', 'popover');
-      this.#popover.setAttribute('popover', 'auto');
-
-      const label = document.createElement('div');
-      label.setAttribute('slot', 'popover-label');
-      label.textContent = this.text;
-      this.#popover.appendChild(label);
-
-      for (const child of this.querySelectorAll(':scope > app-nav-item-ui')) {
-        const clone = document.createElement('div');
-        clone.setAttribute('role', 'option');
-        clone.dataset.sourceValue = child.getAttribute('value') || '';
-        clone.textContent = child.text;
-        clone.addEventListener('click', () => {
-          const nav = this.closest('app-nav-ui');
-          if (nav) nav.select(child);
-          this.#popover.hidePopover();
-        });
-        this.#popover.appendChild(clone);
-      }
-
-      this.appendChild(this.#popover);
-
-      this.#popover.addEventListener('toggle', (e) => {
-        if (e.newState === 'closed') {
-          this.#anchorCleanup?.();
-          this.#anchorCleanup = null;
-        }
-      });
-    }
-
-    for (const opt of this.#popover.querySelectorAll('[role="option"]')) {
-      const srcValue = opt.dataset.sourceValue;
-      const src = srcValue
-        ? this.querySelector(`:scope > app-nav-item-ui[value="${srcValue}"]`)
-        : null;
-      if (src?.hasAttribute('selected')) {
-        opt.setAttribute('aria-current', 'page');
-        opt.setAttribute('aria-selected', 'true');
-      } else {
-        opt.removeAttribute('aria-current');
-        opt.removeAttribute('aria-selected');
-      }
-    }
-
-    this.#popover.showPopover();
-
-    this.#anchorCleanup?.();
-    this.#anchorCleanup = anchorPopover(this, this.#popover, {
-      placement: 'right', gap: 4,
-    });
-  }
-
-  disconnected() {
-    this.#anchorCleanup?.();
-    this.#anchorCleanup = null;
-    this.#popover?.hidePopover?.();
-  }
-}
-customElements.define('app-nav-group-ui', AdiaAppNavGroup);
-
-export { AdiaAppNavGroup };

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]