@adia-ai/web-components 0.0.29 → 0.0.34

package/components/nav-group/nav-group.css

@@ -0,0 +1,317 @@
+@scope (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]) > nav-item-ui {
+    display: none;
+  }
+
+  /* Child items default to sm for visual hierarchy */
+  :scope > nav-item-ui:not([size]) {
+    height: var(--nav-item-child-height);
+    font-size: var(--nav-item-child-font);
+  }
+
+  /* ── Collapsed nav: hide text, badge, caret ── */
+  nav-ui[collapsed] & [slot="text"],
+  nav-ui[collapsed] & [slot="badge"],
+  nav-ui[collapsed] & [slot="caret"] {
+    display: none;
+  }
+
+  nav-ui[collapsed] & [slot="header"] {
+    justify-content: center;
+    padding: 0;
+  }
+
+  nav-ui[collapsed] & {
+    align-self: stretch;
+  }
+
+  nav-ui[collapsed] &::after {
+    display: none;
+  }
+
+  @container sidebar (max-width: 96px) {
+    [slot="text"], [slot="badge"], [slot="caret"] {
+      display: none !important;
+    }
+    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. */
+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);
+}
+
+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;
+}
+
+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);
+}
+
+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. */
+nav-group-ui [slot="popover"] [role="option"][aria-current="page"],
+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);
+}
+
+nav-group-ui [slot="popover"] [role="option"][aria-current="page"]::before,
+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);
+}
+
+/* ── Section variant — groups render as kicker labels ──
+   The prior <section-nav-group-ui> defaulted to collapsible:false
+   (header was a label, children always visible). The consolidated
+   nav-group-ui defaults collapsible:true (the primary-variant default).
+   Section variant restores the old kicker rendering so subnav rails
+   show all children without an explicit [open] toggle.
+
+   Two ways to enable: either
+     (a) `<nav-group-ui variant="section">` directly, or
+     (b) `<nav-ui variant="section"> > nav-group-ui`  (cascade from parent).
+   Both selectors apply the same kicker styles. */
+
+nav-group-ui[variant="section"] > [slot="header"],
+nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"] {
+  height: auto;
+  padding: var(--a-space-3) var(--a-space-2) var(--a-space-1);
+  font-size: var(--a-kicker-sm, var(--a-ui-tiny));
+  font-weight: var(--a-weight-medium);
+  color: var(--a-fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  cursor: default;
+  border-radius: 0;
+}
+
+nav-group-ui[variant="section"] > [slot="header"]:hover,
+nav-group-ui[variant="section"] > [slot="header"]:focus-visible,
+nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"]:hover,
+nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"]:focus-visible {
+  background: transparent;
+  color: var(--a-fg-muted);
+}
+
+nav-group-ui[variant="section"] > [slot="header"] [slot="caret"],
+nav-group-ui[variant="section"] > [slot="header"] [slot="icon"]:empty,
+nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"] [slot="caret"],
+nav-ui[variant="section"] > nav-group-ui:not([variant]) > [slot="header"] [slot="icon"]:empty {
+  display: none;
+}
+
+/* Children always visible in section variant (override the
+   :scope:not([open]) > nav-item-ui hide rule from inside @scope). */
+nav-group-ui[variant="section"]:not([open]) > nav-item-ui,
+nav-ui[variant="section"] > nav-group-ui:not([variant]):not([open]) > nav-item-ui {
+  display: flex;
+}
+
+/* No indent rail in section variant — kicker layout doesn't carry it. */
+nav-group-ui[variant="section"]::after,
+nav-ui[variant="section"] > nav-group-ui:not([variant])::after {
+  display: none;
+}

package/components/nav-group/nav-group.js

@@ -0,0 +1,142 @@
+/**
+ * <nav-group-ui> — Collapsible labeled group of nav items inside <nav-ui>.
+ *
+ * Consolidates the prior `app-nav-group-ui` + `section-nav-group-ui`
+ * per ADR-0015 § Nav consolidation. Behavior is unified; the parent
+ * <nav-ui>'s [variant] drives the visual treatment.
+ *
+ * Has icon, label, optional badge, and a caret indicating open/closed.
+ * When the parent <nav-ui> is collapsed (primary variant), clicking the
+ * group opens a popover with its children instead of toggling inline
+ * expansion. When [collapsible] (or always for primary variant), inline
+ * click + keyboard toggle is supported.
+ */
+
+import { UIElement } from '../../core/element.js';
+import { anchorPopover } from '../../core/anchor.js';
+
+class UINavGroup extends UIElement {
+  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 },
+    collapsible: { type: Boolean, default: true,  reflect: true },
+    variant:     { type: String,  default: '',    reflect: true },
+  };
+
+  static template = () => null;
+
+  #popover = null;
+  #anchorCleanup = null;
+  #headerEl = null;
+
+  #onHeaderKey = (e) => {
+    if (!this.collapsible) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.open = !this.open;
+      this.dispatchEvent(new CustomEvent('group-toggle', {
+        bubbles: true,
+        detail: { text: this.text, open: this.open },
+      }));
+    }
+  };
+
+  connected() {
+    this.setAttribute('role', 'group');
+
+    if (!this.querySelector(':scope > [slot="header"]')) {
+      this.#headerEl = document.createElement('div');
+      this.#headerEl.setAttribute('slot', 'header');
+      this.#headerEl.setAttribute('tabindex', '0');
+      this.#headerEl.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(this.#headerEl);
+    } else {
+      this.#headerEl = this.querySelector(':scope > [slot="header"]');
+    }
+
+    this.#headerEl?.addEventListener('keydown', this.#onHeaderKey);
+  }
+
+  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 > nav-item-ui')) {
+        const opt = document.createElement('div');
+        opt.setAttribute('role', 'option');
+        opt.dataset.sourceValue = child.getAttribute('value') || '';
+        opt.textContent = child.text;
+        opt.addEventListener('click', () => {
+          const nav = this.closest('nav-ui');
+          if (nav) nav.select(child);
+          this.#popover.hidePopover();
+        });
+        this.#popover.appendChild(opt);
+      }
+
+      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 > 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.#headerEl?.removeEventListener('keydown', this.#onHeaderKey);
+    this.#anchorCleanup?.();
+    this.#anchorCleanup = null;
+    this.#popover?.hidePopover?.();
+  }
+}
+
+customElements.define('nav-group-ui', UINavGroup);
+export { UINavGroup };

package/components/nav-group/nav-group.yaml

@@ -0,0 +1,69 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UINavGroup
+tag: nav-group-ui
+component: NavGroup
+category: layout
+version: 1
+description: |
+  Collapsible labeled group of <nav-item-ui> children inside <nav-ui>.
+  Consolidates the prior `app-nav-group-ui` + `section-nav-group-ui`
+  per ADR-0015 § Nav consolidation.
+
+  When the parent <nav-ui> is collapsed (primary variant), clicking the
+  group opens a popover with its children instead of toggling inline
+  expansion. Inline click + keyboard (Enter/Space) toggle is supported
+  when [collapsible] (default true).
+
+props:
+  text:
+    type: string
+    default: ''
+    description: "Visible group label."
+  icon:
+    type: string
+    default: ''
+    description: "Optional leading icon name (resolved via <icon-ui>)."
+  badge:
+    type: string
+    default: ''
+    description: "Optional trailing badge (count, label)."
+  open:
+    type: boolean
+    default: false
+    description: "Inline-expanded state. Toggled by header click when [collapsible]."
+  collapsible:
+    type: boolean
+    default: true
+    description: "When true, the header row toggles the open state on click/keyboard."
+  variant:
+    type: string
+    default: ''
+    enum: ['', section]
+    description: "Visual treatment. Default ('') renders as a primary-rail group (icon row, caret, collapsible). 'section' renders the header as a static kicker label with always-visible children — matches the prior <section-nav-group-ui>. When the parent <nav-ui> carries variant=\"section\", this group inherits it via CSS cascade unless an explicit variant is set on the group."
+
+events:
+  group-toggle:
+    description: "Fired when the header toggles via click/keyboard. Detail: { text, open }."
+
+slots:
+  default:
+    description: "Children — typically <nav-item-ui> rows."
+  header:
+    description: "Optional custom header. Auto-generated when missing."
+
+states:
+  - name: closed
+    description: Default. Children hidden.
+  - name: open
+    description: Children visible inline.
+
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples: []
+
+keywords: [nav, navigation, group, sidebar, menu]
+synonyms: {}
+related: []

package/components/nav-item/nav-item.a2ui.json

@@ -0,0 +1,106 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/NavItem.json",
+  "title": "NavItem",
+  "description": "Single navigation link inside <nav-ui> (optionally nested under\n<nav-group-ui>). Consolidates the prior `app-nav-item-ui` +\n`section-nav-item-ui` per ADR-0015 § Nav consolidation.\n\nSupports icon, label, optional badge, selected/disabled state, and\nkeyboard activation (Enter/Space). Selection is managed by the parent\n<nav-ui>; clicking or activating an item calls nav.select(this) and\nbubbles a `nav-select` event.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "badge": {
+      "description": "Optional trailing badge.",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "NavItem"
+    },
+    "disabled": {
+      "description": "Suppresses click/keyboard activation; greyed visually.",
+      "type": "boolean",
+      "default": false
+    },
+    "icon": {
+      "description": "Optional leading icon name.",
+      "type": "string",
+      "default": ""
+    },
+    "selected": {
+      "description": "Set by the parent <nav-ui>'s select() method.",
+      "type": "boolean",
+      "default": false
+    },
+    "text": {
+      "description": "Visible item label.",
+      "type": "string",
+      "default": ""
+    },
+    "value": {
+      "description": "Identifier — typically a route or anchor.",
+      "type": "string",
+      "default": ""
+    },
+    "variant": {
+      "description": "Visual treatment. Default ('') renders as a primary-rail item (reserved icon space, in-icon selected accent). 'section' renders flat — no icon space when absent, left-edge accent bar for selected — matching the prior <section-nav-item-ui>. When the parent <nav-ui> carries variant=\"section\", this item inherits it via CSS cascade unless an explicit variant is set.",
+      "type": "string",
+      "enum": [
+        "",
+        "section"
+      ],
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {
+      "nav-select": {
+        "description": "Bubbles when the item is activated. Detail: { item, text, value }."
+      }
+    },
+    "examples": [],
+    "keywords": [
+      "nav",
+      "navigation",
+      "item",
+      "link",
+      "sidebar"
+    ],
+    "name": "UINavItem",
+    "related": [],
+    "slots": {
+      "default": {
+        "description": "Optional override of the default icon + text + badge stamping."
+      }
+    },
+    "states": [
+      {
+        "description": "Default.",
+        "name": "idle"
+      },
+      {
+        "description": "aria-current=page.",
+        "name": "selected"
+      },
+      {
+        "description": "Suppressed activation.",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {},
+    "tag": "nav-item-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}