@adia-ai/web-components 0.0.1

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

@@ -0,0 +1,261 @@
+@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);
+  }
+
+  :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-lg);
+  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-sm);
+  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

@@ -0,0 +1,116 @@
+/**
+ * <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

@@ -0,0 +1,59 @@
+$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

@@ -0,0 +1,83 @@
+{
+  "$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.css

@@ -0,0 +1,156 @@
+@scope (app-nav-item-ui) {
+  :where(:scope) {
+    --nav-item-accent:          var(--a-accent);
+    --nav-item-row-height:      var(--a-size);
+    --nav-item-row-height-sm:   var(--a-size-sm);
+    --nav-item-row-height-lg:   var(--a-size-lg);
+    --nav-item-row-px:          var(--a-ui-px);
+    --nav-item-row-gap:         var(--a-space-1);
+    --nav-item-row-radius:      var(--a-radius-md);
+    --nav-item-font-size:       var(--a-ui-size);
+    --nav-item-font-size-sm:    var(--a-ui-sm);
+    --nav-item-font-size-lg:    var(--a-ui-lg);
+    --nav-item-fg:              var(--a-ui-text-subtle);
+    --nav-item-fg-hover:        var(--a-ui-text-hover);
+    --nav-item-fg-selected:     var(--a-ui-text-selected);
+    --nav-item-icon-fg:         var(--a-ui-text-muted);
+    --nav-item-icon-fg-selected: var(--nav-item-accent);
+    --nav-item-bg-hover:        var(--a-ui-bg-hover);
+    --nav-item-bg-selected:     var(--a-ui-bg-selected);
+    --nav-item-icon-size:       calc(var(--nav-item-row-height) - var(--a-space-2));
+    --nav-item-badge-size:      var(--a-ui-sm);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--nav-item-row-gap);
+    height: var(--nav-item-row-height);
+    padding: 0 var(--nav-item-row-px);
+    border-radius: var(--nav-item-row-radius);
+    font-size: var(--nav-item-font-size);
+    color: var(--nav-item-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;
+  }
+
+  :scope:hover {
+    background: var(--nav-item-bg-hover);
+    color: var(--nav-item-fg-hover);
+  }
+
+  :scope:hover [slot="icon"] {
+    color: var(--nav-item-fg-hover);
+  }
+
+  :scope:focus-visible {
+    background: var(--nav-item-bg-hover);
+    color: var(--nav-item-fg-hover);
+    outline: none;
+  }
+
+  :scope[selected] {
+    background: var(--nav-item-bg-selected);
+    color: var(--nav-item-fg-selected);
+    font-weight: var(--nav-item-selected-weight);
+  }
+
+  :scope[selected] [slot="icon"] {
+    color: var(--nav-item-icon-fg-selected);
+  }
+
+  /* Icon slot — always present, reserves space even when empty */
+  [slot="icon"] {
+    width: var(--nav-item-icon-size);
+    height: var(--nav-item-icon-size);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--nav-item-icon-fg);
+    transition: color var(--nav-duration-fast) var(--nav-easing);
+  }
+
+  [slot="icon"] icon-ui {
+    --a-icon-size: calc(var(--nav-item-icon-font-size) + 2px);
+  }
+
+  /* Selected accent line — shown on empty icon slot */
+  :scope[selected] [slot="icon"]:empty::before {
+    content: '';
+    width: 2px;
+    height: 1em;
+    border-radius: 1px;
+    background: var(--nav-item-accent);
+  }
+
+  [slot="text"] {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  [slot="badge"] {
+    font-size: var(--nav-item-badge-size);
+    color: var(--nav-item-badge-fg);
+    background: var(--nav-item-badge-bg);
+    padding: 1px var(--nav-item-badge-px);
+    border-radius: var(--nav-item-badge-radius);
+    line-height: 1.4;
+    margin-inline-start: auto;
+  }
+
+  [slot="trailing"] {
+    margin-inline-start: auto;
+    font-size: var(--nav-item-trailing-font);
+    color: var(--nav-item-trailing-fg);
+    border: 1px solid var(--nav-item-trailing-border);
+    border-radius: var(--nav-item-trailing-radius);
+    padding: 0 var(--nav-item-trailing-px);
+    line-height: 1.6;
+    flex-shrink: 0;
+  }
+
+  /* ── Collapsed nav: hide text, badge, trailing ── */
+  app-nav-ui[collapsed] & [slot="text"],
+  app-nav-ui[collapsed] & [slot="badge"],
+  app-nav-ui[collapsed] & [slot="trailing"] {
+    display: none;
+  }
+
+  app-nav-ui[collapsed] & {
+    justify-content: center;
+    padding: 0;
+  }
+
+  @container sidebar (max-width: 96px) {
+    [slot="text"], [slot="badge"], [slot="trailing"] {
+      display: none !important;
+    }
+    [slot="icon"] icon-ui {
+      --a-icon-size: 18px;
+    }
+    :scope {
+      justify-content: center;
+      padding: 0;
+    }
+  }
+
+  /* ── Size variants ── */
+  :scope[size="sm"] {
+    --nav-item-row-height: var(--nav-item-row-height-sm);
+    --nav-item-font-size:  var(--nav-item-font-size-sm);
+  }
+
+  :scope[size="lg"] {
+    --nav-item-row-height: var(--nav-item-row-height-lg);
+    --nav-item-font-size:  var(--nav-item-font-size-lg);
+  }
+}