@cognivo/components 0.8.0

package/dist/components/cg-navbar/cg-navbar.js

@@ -0,0 +1,473 @@
+import { css as u, LitElement as p, nothing as g, html as l } from "lit";
+import { property as d, state as b, query as v, customElement as f } from "lit/decorators.js";
+import { h, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, a, t, s) => {
+  for (var r = s > 1 ? void 0 : s ? w(a, t) : a, i = e.length - 1, c; i >= 0; i--)
+    (c = e[i]) && (r = (s ? c(a, t, r) : c(r)) || r);
+  return s && r && y(a, t, r), r;
+};
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.items = [], this.active = "", this.variant = "solid", this.sticky = !1, this.bordered = !1, this.compactOnScroll = !1, this.mobileOpen = !1, this.brandHref = "", this._scrolled = !1, this._resizeObserver = null, this._onScroll = () => {
+      if (!this.compactOnScroll) return;
+      const e = window.scrollY > 16;
+      e !== this._scrolled && (this._scrolled = e, this._navEl && (this._navEl.dataset.compact = String(this._scrolled)));
+    }, this._onDocClick = (e) => {
+      this.mobileOpen && (e.composedPath().includes(this) || this.closeMobileMenu());
+    }, this._onKeydown = (e) => {
+      e.key === "Escape" && this.mobileOpen && this.closeMobileMenu();
+    };
+  }
+  // ─── Lifecycle ──────────────────────────────────────────────────
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("scroll", this._onScroll, { passive: !0 }), document.addEventListener("click", this._onDocClick), document.addEventListener("keydown", this._onKeydown), this._resizeObserver = new ResizeObserver(() => this._updateIndicator()), requestAnimationFrame(() => {
+      this._itemsEl && this._resizeObserver && this._resizeObserver.observe(this._itemsEl);
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("scroll", this._onScroll), document.removeEventListener("click", this._onDocClick), document.removeEventListener("keydown", this._onKeydown), this._resizeObserver?.disconnect(), this._resizeObserver = null;
+  }
+  updated(e) {
+    (e.has("active") || e.has("items") || e.has("variant")) && requestAnimationFrame(() => this._updateIndicator());
+  }
+  firstUpdated() {
+    requestAnimationFrame(() => this._updateIndicator());
+  }
+  // ─── Public methods ─────────────────────────────────────────────
+  closeMobileMenu() {
+    this.mobileOpen && (this.mobileOpen = !1, this.dispatchEvent(new CustomEvent("cg-navbar-toggle", {
+      detail: { open: !1 },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  // ─── Internals ──────────────────────────────────────────────────
+  _updateIndicator() {
+    const e = this.items.findIndex((t) => t.value === this.active);
+    if (e < 0 || !this._itemsEl || !this._indicatorEl) {
+      this._indicatorEl && (this._indicatorEl.dataset.ready = "false");
+      return;
+    }
+    const a = this._itemsEl.querySelectorAll(".item")[e];
+    a && (this._indicatorEl.style.width = `${a.offsetWidth}px`, this._indicatorEl.style.transform = `translateX(${a.offsetLeft}px)`, this._indicatorEl.dataset.ready = "true");
+  }
+  _selectItem(e, a) {
+    if (e.disabled) {
+      a?.preventDefault();
+      return;
+    }
+    this.active = e.value, this.dispatchEvent(new CustomEvent("cg-navbar-select", {
+      detail: { value: e.value, item: e },
+      bubbles: !0,
+      composed: !0
+    })), this.mobileOpen && this.closeMobileMenu();
+  }
+  _toggleMobile() {
+    this.mobileOpen = !this.mobileOpen, this.dispatchEvent(new CustomEvent("cg-navbar-toggle", {
+      detail: { open: this.mobileOpen },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _onItemKeydown(e, a) {
+    const t = this.items.map((i, c) => ({ it: i, i: c })).filter(({ it: i }) => !i.disabled), s = t.findIndex(({ i }) => i === a);
+    let r = s;
+    if (e.key === "ArrowLeft" || e.key === "ArrowUp" ? (e.preventDefault(), r = (s - 1 + t.length) % t.length) : e.key === "ArrowRight" || e.key === "ArrowDown" ? (e.preventDefault(), r = (s + 1) % t.length) : e.key === "Home" ? (e.preventDefault(), r = 0) : e.key === "End" && (e.preventDefault(), r = t.length - 1), r !== s) {
+      const i = t[r];
+      i && (this._selectItem(i.it, e), this.updateComplete.then(() => {
+        this._itemsEl?.querySelectorAll(".item")?.[i.i]?.focus();
+      }));
+    }
+  }
+  // ─── Render helpers ─────────────────────────────────────────────
+  _renderItem(e, a, t = !1) {
+    const s = e.value === this.active, r = t ? "mobile-item" : "item", i = t ? `--idx:${a};animation-delay:calc(${a} * 50ms);` : "";
+    return l`
+      <a
+        class=${r}
+        href=${e.href}
+        target=${e.external ? "_blank" : g}
+        rel=${e.external ? "noopener noreferrer" : g}
+        role=${t ? "menuitem" : "tab"}
+        aria-selected=${s ? "true" : "false"}
+        aria-disabled=${e.disabled ? "true" : "false"}
+        tabindex=${s || t ? "0" : "-1"}
+        style=${i}
+        @click=${(c) => this._selectItem(e, c)}
+        @keydown=${(c) => !t && this._onItemKeydown(c, a)}
+      >
+        ${e.icon ? l`<span class="item-icon" aria-hidden="true" .innerHTML=${e.icon}></span>` : g}
+        <span>${e.label}</span>
+        ${e.badge ? l`<span class="item-badge">${e.badge}</span>` : g}
+        ${e.kbd ? l`<span class="item-kbd">${e.kbd}</span>` : g}
+      </a>
+    `;
+  }
+  render() {
+    const e = this.items.length > 0;
+    return l`
+      <nav role="navigation" aria-label="Main navigation">
+        ${this.brandHref ? l`<a class="brand" href=${this.brandHref}><slot name="brand"></slot></a>` : l`<div class="brand"><slot name="brand"></slot></div>`}
+        ${e ? l`
+          <div class="items" role="tablist">
+            <span class="indicator" data-ready="false"></span>
+            ${this.items.map((a, t) => this._renderItem(a, t, !1))}
+          </div>
+        ` : g}
+        <div class="center"><slot name="center"></slot></div>
+        <div class="end">
+          <slot name="end"></slot>
+          <button
+            class="menu-btn"
+            type="button"
+            aria-label="Toggle menu"
+            aria-expanded=${this.mobileOpen ? "true" : "false"}
+            aria-controls="cg-navbar-mobile-panel"
+            @click=${this._toggleMobile}
+          >
+            ${this.mobileOpen ? l`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>` : l`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 12h18M3 6h18M3 18h18"/></svg>`}
+          </button>
+        </div>
+        <div id="cg-navbar-mobile-panel" class="mobile-panel" role="menu">
+          <slot name="mobile-menu">
+            ${e ? this.items.map((a, t) => this._renderItem(a, t, !0)) : g}
+          </slot>
+        </div>
+      </nav>
+    `;
+  }
+};
+o.styles = [h, m, u`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    /* ── Outer nav container ─────────────────────────────────────── */
+    nav {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-24);
+      height: var(--cg-component-navbar-height);
+      padding: 0 var(--cg-component-navbar-padding-x);
+      background: var(--cg-color-surface-base-background);
+      color: var(--cg-color-surface-base-text);
+      transition:
+        height var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        background var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        backdrop-filter var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+
+    :host([sticky]) nav {
+      position: sticky;
+      top: 0;
+      z-index: var(--cg-z-index-500);
+    }
+
+    :host([bordered]) nav {
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);
+    }
+
+    /* Compact-on-scroll — applied via JS toggling the [data-compact] attribute */
+    nav[data-compact="true"] {
+      height: var(--cg-component-navbar-height-compact);
+      box-shadow: var(--cg-shadow-elevation-md);
+    }
+
+    /* Variant: glass — translucent + blur */
+    :host([variant="glass"]) nav {
+      background: color-mix(in srgb, var(--cg-color-surface-base-background) 72%, transparent);
+      backdrop-filter: saturate(180%) blur(20px);
+      -webkit-backdrop-filter: saturate(180%) blur(20px);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);
+    }
+
+    /* Variant: floating — detached pill */
+    :host([variant="floating"]) nav {
+      margin: var(--cg-component-navbar-floating-margin);
+      height: calc(var(--cg-component-navbar-height) - 2 * var(--cg-component-navbar-floating-margin));
+      padding: 0 var(--cg-spacing-20);
+      background: color-mix(in srgb, var(--cg-color-surface-base-background) 80%, transparent);
+      backdrop-filter: saturate(180%) blur(20px);
+      -webkit-backdrop-filter: saturate(180%) blur(20px);
+      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);
+      border-radius: var(--cg-border-radius-full);
+      box-shadow: var(--cg-shadow-elevation-lg);
+    }
+    :host([variant="floating"]) nav[data-compact="true"] {
+      height: calc(var(--cg-component-navbar-height-compact) - 2 * var(--cg-component-navbar-floating-margin));
+    }
+
+    /* ── Brand ───────────────────────────────────────────────────── */
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      font-size: var(--cg-font-size-base);
+      font-weight: var(--cg-font-weight-semibold);
+      letter-spacing: -0.01em;
+      flex-shrink: 0;
+      color: var(--cg-color-surface-base-text);
+      text-decoration: none;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .brand:hover { opacity: 0.8; }
+
+    /* ── Items list (tablist with sliding indicator) ─────────────── */
+    .items {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: var(--cg-component-navbar-item-gap);
+      padding: var(--cg-spacing-4);
+      background: color-mix(in srgb, var(--cg-color-surface-container-background) 50%, transparent);
+      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);
+      border-radius: var(--cg-border-radius-full);
+    }
+
+    /* Floating variant strips the inner pill chrome (avoid card-in-card). */
+    :host([variant="floating"]) .items {
+      background: transparent;
+      border: none;
+      padding: 0;
+    }
+
+    /* Sliding active indicator */
+    .indicator {
+      position: absolute;
+      top: var(--cg-spacing-4);
+      left: 0;
+      height: calc(100% - 2 * var(--cg-spacing-4));
+      box-sizing: border-box;
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);
+      border-radius: var(--cg-border-radius-full);
+      box-shadow: var(--cg-shadow-elevation-sm);
+      transition:
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-in-out),
+        width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-in-out),
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      pointer-events: none;
+      z-index: 0;
+      opacity: 0;
+    }
+    .indicator[data-ready="true"] { opacity: 1; }
+
+    :host([variant="floating"]) .indicator {
+      top: 0;
+      height: 100%;
+    }
+
+    /* Per-item anchor */
+    .item {
+      position: relative;
+      z-index: 1;
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      padding: var(--cg-component-navbar-item-padding-y) var(--cg-component-navbar-item-padding-x);
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      text-decoration: none;
+      border-radius: var(--cg-border-radius-full);
+      cursor: pointer;
+      transition:
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .item:hover:not([aria-disabled="true"]) {
+      color: var(--cg-color-surface-base-text);
+      background: var(--cg-color-action-tertiary-background-hover);
+      transform: translateY(calc(var(--cg-spacing-1) * -1));
+    }
+    .item:active:not([aria-disabled="true"]) {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .item[aria-selected="true"] {
+      color: var(--cg-color-surface-base-text);
+    }
+    .item[aria-disabled="true"] {
+      opacity: 0.5;
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+    .item:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
+    }
+
+    .item-icon {
+      display: inline-flex;
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+    }
+    .item-icon svg { width: 100%; height: 100%; }
+
+    .item-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 0 var(--cg-spacing-6);
+      height: var(--cg-spacing-16);
+      background: var(--cg-color-accent-text);
+      color: var(--cg-color-action-primary-text-default);
+      border-radius: var(--cg-border-radius-full);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      letter-spacing: 0.02em;
+    }
+
+    .item-kbd {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      padding: 0 var(--cg-spacing-4);
+      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);
+      border-radius: var(--cg-border-radius-50);
+      line-height: var(--cg-spacing-16);
+    }
+
+    /* ── Center / End ────────────────────────────────────────────── */
+    .center {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+      min-width: 0;
+    }
+    .end {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      flex-shrink: 0;
+      margin-left: auto;
+    }
+
+    /* ── Mobile menu button ──────────────────────────────────────── */
+    .menu-btn {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-40);
+      height: var(--cg-spacing-40);
+      padding: 0;
+      border: none;
+      background: transparent;
+      color: var(--cg-color-surface-base-text);
+      border-radius: var(--cg-border-radius-100);
+      cursor: pointer;
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .menu-btn:hover { background: var(--cg-color-action-tertiary-background-hover); }
+    .menu-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .menu-btn:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
+    }
+
+    /* ── Mobile slide-down panel ─────────────────────────────────── */
+    .mobile-panel {
+      display: none;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      padding: var(--cg-spacing-12);
+      background: var(--cg-color-surface-base-background);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);
+      box-shadow: var(--cg-shadow-elevation-xl);
+      flex-direction: column;
+      gap: var(--cg-spacing-2);
+      animation: slideDown var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+    }
+    :host([mobile-open]) .mobile-panel { display: flex; }
+
+    .mobile-item {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      text-decoration: none;
+      border-radius: var(--cg-border-radius-100);
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      animation: itemIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) backwards;
+    }
+    .mobile-item:hover { background: var(--cg-color-action-tertiary-background-hover); }
+    .mobile-item[aria-selected="true"] {
+      background: var(--cg-color-surface-container-background);
+      box-shadow: var(--cg-shadow-elevation-sm);
+    }
+    .mobile-item[aria-disabled="true"] {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    @keyframes slideDown {
+      from { opacity: 0; transform: translateY(calc(-1 * var(--cg-spacing-8))); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes itemIn {
+      from { opacity: 0; transform: translateX(calc(-1 * var(--cg-spacing-12))); }
+      to   { opacity: 1; transform: translateX(0); }
+    }
+
+    /* Responsive — collapse below the breakpoint */
+    @media (max-width: 768px) {
+      .items, .center { display: none; }
+      .menu-btn { display: inline-flex; }
+    }
+  `];
+n([
+  d({ type: Array })
+], o.prototype, "items", 2);
+n([
+  d()
+], o.prototype, "active", 2);
+n([
+  d({ reflect: !0 })
+], o.prototype, "variant", 2);
+n([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "sticky", 2);
+n([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "bordered", 2);
+n([
+  d({ type: Boolean, reflect: !0, attribute: "compact-on-scroll" })
+], o.prototype, "compactOnScroll", 2);
+n([
+  d({ type: Boolean, reflect: !0, attribute: "mobile-open" })
+], o.prototype, "mobileOpen", 2);
+n([
+  d()
+], o.prototype, "brandHref", 2);
+n([
+  b()
+], o.prototype, "_scrolled", 2);
+n([
+  v(".items")
+], o.prototype, "_itemsEl", 2);
+n([
+  v(".indicator")
+], o.prototype, "_indicatorEl", 2);
+n([
+  v("nav")
+], o.prototype, "_navEl", 2);
+o = n([
+  f("cg-navbar")
+], o);
+export {
+  o as CgNavbar
+};
+//# sourceMappingURL=cg-navbar.js.map

package/dist/components/cg-navbar/cg-navbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-navbar.js","sources":["../../../src/components/cg-navbar/cg-navbar.ts"],"sourcesContent":["import { LitElement, html, css, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface NavItem {\n  /** Stable identifier — what `active` matches against. */\n  value: string;\n  /** Visible text. */\n  label: string;\n  /** Href for the underlying anchor. */\n  href: string;\n  /** Optional leading icon (SVG markup string). */\n  icon?: string;\n  /** Keyboard hint, rendered as a small `cg-kbd` chip on the right. */\n  kbd?: string;\n  /** Marks the item disabled. */\n  disabled?: boolean;\n  /** Optional badge text (e.g., \"New\"). */\n  badge?: string;\n  /** Open in a new tab. */\n  external?: boolean;\n}\n\n/**\n * @element cg-navbar\n * Top navigation bar with animated sliding active indicator, programmatic\n * items API, three coherent variants (`solid` / `glass` / `floating`),\n * mobile responsive panel, scroll-aware compact mode, and full keyboard\n * navigation (arrow keys, Home, End, Escape).\n *\n * @example\n * ```html\n * <cg-navbar\n *   variant=\"glass\"\n *   sticky\n *   active=\"docs\"\n *   .items=${[\n *     { value: 'docs', label: 'Docs', href: '/docs' },\n *     { value: 'components', label: 'Components', href: '/components' },\n *     { value: 'tokens', label: 'Tokens', href: '/tokens', badge: 'New' },\n *   ]}\n * >\n *   <span slot=\"brand\">Cognivo</span>\n *   <cg-button slot=\"end\" variant=\"primary\">Sign in</cg-button>\n * </cg-navbar>\n * ```\n *\n * @slot brand - Brand area (leftmost). Logo + name.\n * @slot center - Optional center content (search, breadcrumbs). Hidden below mobileBreakpoint.\n * @slot end - Right region for actions, profile, theme toggle.\n * @slot mobile-menu - Optional override for the mobile panel content.\n *\n * @fires {CustomEvent<{open: boolean}>} cg-navbar-toggle - Mobile menu toggled\n * @fires {CustomEvent<{value: string, item: NavItem}>} cg-navbar-select - A nav item activated\n */\n@customElement('cg-navbar')\nexport class CgNavbar extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      width: 100%;\n    }\n\n    /* ── Outer nav container ─────────────────────────────────────── */\n    nav {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-24);\n      height: var(--cg-component-navbar-height);\n      padding: 0 var(--cg-component-navbar-padding-x);\n      background: var(--cg-color-surface-base-background);\n      color: var(--cg-color-surface-base-text);\n      transition:\n        height var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        backdrop-filter var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n\n    :host([sticky]) nav {\n      position: sticky;\n      top: 0;\n      z-index: var(--cg-z-index-500);\n    }\n\n    :host([bordered]) nav {\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n    }\n\n    /* Compact-on-scroll — applied via JS toggling the [data-compact] attribute */\n    nav[data-compact=\"true\"] {\n      height: var(--cg-component-navbar-height-compact);\n      box-shadow: var(--cg-shadow-elevation-md);\n    }\n\n    /* Variant: glass — translucent + blur */\n    :host([variant=\"glass\"]) nav {\n      background: color-mix(in srgb, var(--cg-color-surface-base-background) 72%, transparent);\n      backdrop-filter: saturate(180%) blur(20px);\n      -webkit-backdrop-filter: saturate(180%) blur(20px);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n    }\n\n    /* Variant: floating — detached pill */\n    :host([variant=\"floating\"]) nav {\n      margin: var(--cg-component-navbar-floating-margin);\n      height: calc(var(--cg-component-navbar-height) - 2 * var(--cg-component-navbar-floating-margin));\n      padding: 0 var(--cg-spacing-20);\n      background: color-mix(in srgb, var(--cg-color-surface-base-background) 80%, transparent);\n      backdrop-filter: saturate(180%) blur(20px);\n      -webkit-backdrop-filter: saturate(180%) blur(20px);\n      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n      border-radius: var(--cg-border-radius-full);\n      box-shadow: var(--cg-shadow-elevation-lg);\n    }\n    :host([variant=\"floating\"]) nav[data-compact=\"true\"] {\n      height: calc(var(--cg-component-navbar-height-compact) - 2 * var(--cg-component-navbar-floating-margin));\n    }\n\n    /* ── Brand ───────────────────────────────────────────────────── */\n    .brand {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-semibold);\n      letter-spacing: -0.01em;\n      flex-shrink: 0;\n      color: var(--cg-color-surface-base-text);\n      text-decoration: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .brand:hover { opacity: 0.8; }\n\n    /* ── Items list (tablist with sliding indicator) ─────────────── */\n    .items {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--cg-component-navbar-item-gap);\n      padding: var(--cg-spacing-4);\n      background: color-mix(in srgb, var(--cg-color-surface-container-background) 50%, transparent);\n      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n      border-radius: var(--cg-border-radius-full);\n    }\n\n    /* Floating variant strips the inner pill chrome (avoid card-in-card). */\n    :host([variant=\"floating\"]) .items {\n      background: transparent;\n      border: none;\n      padding: 0;\n    }\n\n    /* Sliding active indicator */\n    .indicator {\n      position: absolute;\n      top: var(--cg-spacing-4);\n      left: 0;\n      height: calc(100% - 2 * var(--cg-spacing-4));\n      box-sizing: border-box;\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n      border-radius: var(--cg-border-radius-full);\n      box-shadow: var(--cg-shadow-elevation-sm);\n      transition:\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-in-out),\n        width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-in-out),\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      pointer-events: none;\n      z-index: 0;\n      opacity: 0;\n    }\n    .indicator[data-ready=\"true\"] { opacity: 1; }\n\n    :host([variant=\"floating\"]) .indicator {\n      top: 0;\n      height: 100%;\n    }\n\n    /* Per-item anchor */\n    .item {\n      position: relative;\n      z-index: 1;\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-component-navbar-item-padding-y) var(--cg-component-navbar-item-padding-x);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      text-decoration: none;\n      border-radius: var(--cg-border-radius-full);\n      cursor: pointer;\n      transition:\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .item:hover:not([aria-disabled=\"true\"]) {\n      color: var(--cg-color-surface-base-text);\n      background: var(--cg-color-action-tertiary-background-hover);\n      transform: translateY(calc(var(--cg-spacing-1) * -1));\n    }\n    .item:active:not([aria-disabled=\"true\"]) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .item[aria-selected=\"true\"] {\n      color: var(--cg-color-surface-base-text);\n    }\n    .item[aria-disabled=\"true\"] {\n      opacity: 0.5;\n      pointer-events: none;\n      cursor: not-allowed;\n    }\n    .item:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n\n    .item-icon {\n      display: inline-flex;\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n    }\n    .item-icon svg { width: 100%; height: 100%; }\n\n    .item-badge {\n      display: inline-flex;\n      align-items: center;\n      padding: 0 var(--cg-spacing-6);\n      height: var(--cg-spacing-16);\n      background: var(--cg-color-accent-text);\n      color: var(--cg-color-action-primary-text-default);\n      border-radius: var(--cg-border-radius-full);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      letter-spacing: 0.02em;\n    }\n\n    .item-kbd {\n      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      padding: 0 var(--cg-spacing-4);\n      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n      border-radius: var(--cg-border-radius-50);\n      line-height: var(--cg-spacing-16);\n    }\n\n    /* ── Center / End ────────────────────────────────────────────── */\n    .center {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n      min-width: 0;\n    }\n    .end {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      flex-shrink: 0;\n      margin-left: auto;\n    }\n\n    /* ── Mobile menu button ──────────────────────────────────────── */\n    .menu-btn {\n      display: none;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      padding: 0;\n      border: none;\n      background: transparent;\n      color: var(--cg-color-surface-base-text);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .menu-btn:hover { background: var(--cg-color-action-tertiary-background-hover); }\n    .menu-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .menu-btn:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n\n    /* ── Mobile slide-down panel ─────────────────────────────────── */\n    .mobile-panel {\n      display: none;\n      position: absolute;\n      top: 100%;\n      left: 0;\n      right: 0;\n      padding: var(--cg-spacing-12);\n      background: var(--cg-color-surface-base-background);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n      animation: slideDown var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    :host([mobile-open]) .mobile-panel { display: flex; }\n\n    .mobile-item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      text-decoration: none;\n      border-radius: var(--cg-border-radius-100);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      animation: itemIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) backwards;\n    }\n    .mobile-item:hover { background: var(--cg-color-action-tertiary-background-hover); }\n    .mobile-item[aria-selected=\"true\"] {\n      background: var(--cg-color-surface-container-background);\n      box-shadow: var(--cg-shadow-elevation-sm);\n    }\n    .mobile-item[aria-disabled=\"true\"] {\n      opacity: 0.5;\n      pointer-events: none;\n    }\n\n    @keyframes slideDown {\n      from { opacity: 0; transform: translateY(calc(-1 * var(--cg-spacing-8))); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes itemIn {\n      from { opacity: 0; transform: translateX(calc(-1 * var(--cg-spacing-12))); }\n      to   { opacity: 1; transform: translateX(0); }\n    }\n\n    /* Responsive — collapse below the breakpoint */\n    @media (max-width: 768px) {\n      .items, .center { display: none; }\n      .menu-btn { display: inline-flex; }\n    }\n  `];\n\n  // ─── Public API ─────────────────────────────────────────────────\n\n  @property({ type: Array }) items: NavItem[] = [];\n  @property() active = '';\n  @property({ reflect: true }) variant: 'solid' | 'glass' | 'floating' = 'solid';\n  @property({ type: Boolean, reflect: true }) sticky = false;\n  @property({ type: Boolean, reflect: true }) bordered = false;\n  @property({ type: Boolean, reflect: true, attribute: 'compact-on-scroll' }) compactOnScroll = false;\n  @property({ type: Boolean, reflect: true, attribute: 'mobile-open' }) mobileOpen = false;\n  @property() brandHref = '';\n\n  // ─── Internal state ─────────────────────────────────────────────\n\n  @state() private _scrolled = false;\n\n  @query('.items') private _itemsEl?: HTMLElement;\n  @query('.indicator') private _indicatorEl?: HTMLElement;\n  @query('nav') private _navEl?: HTMLElement;\n\n  private _resizeObserver: ResizeObserver | null = null;\n  private _onScroll = (): void => {\n    if (!this.compactOnScroll) return;\n    const next = window.scrollY > 16;\n    if (next !== this._scrolled) {\n      this._scrolled = next;\n      if (this._navEl) this._navEl.dataset.compact = String(this._scrolled);\n    }\n  };\n  private _onDocClick = (e: MouseEvent): void => {\n    if (!this.mobileOpen) return;\n    if (!e.composedPath().includes(this)) this.closeMobileMenu();\n  };\n  private _onKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this.mobileOpen) {\n      this.closeMobileMenu();\n    }\n  };\n\n  // ─── Lifecycle ──────────────────────────────────────────────────\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    window.addEventListener('scroll', this._onScroll, { passive: true });\n    document.addEventListener('click', this._onDocClick);\n    document.addEventListener('keydown', this._onKeydown);\n    this._resizeObserver = new ResizeObserver(() => this._updateIndicator());\n    requestAnimationFrame(() => {\n      if (this._itemsEl && this._resizeObserver) this._resizeObserver.observe(this._itemsEl);\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('scroll', this._onScroll);\n    document.removeEventListener('click', this._onDocClick);\n    document.removeEventListener('keydown', this._onKeydown);\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = null;\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (changed.has('active') || changed.has('items') || changed.has('variant')) {\n      requestAnimationFrame(() => this._updateIndicator());\n    }\n  }\n\n  override firstUpdated(): void {\n    requestAnimationFrame(() => this._updateIndicator());\n  }\n\n  // ─── Public methods ─────────────────────────────────────────────\n\n  closeMobileMenu(): void {\n    if (!this.mobileOpen) return;\n    this.mobileOpen = false;\n    this.dispatchEvent(new CustomEvent('cg-navbar-toggle', {\n      detail: { open: false }, bubbles: true, composed: true,\n    }));\n  }\n\n  // ─── Internals ──────────────────────────────────────────────────\n\n  private _updateIndicator(): void {\n    const idx = this.items.findIndex(i => i.value === this.active);\n    if (idx < 0 || !this._itemsEl || !this._indicatorEl) {\n      if (this._indicatorEl) this._indicatorEl.dataset.ready = 'false';\n      return;\n    }\n    const itemEl = this._itemsEl.querySelectorAll<HTMLElement>('.item')[idx];\n    if (!itemEl) return;\n    this._indicatorEl.style.width = `${itemEl.offsetWidth}px`;\n    this._indicatorEl.style.transform = `translateX(${itemEl.offsetLeft}px)`;\n    this._indicatorEl.dataset.ready = 'true';\n  }\n\n  private _selectItem(item: NavItem, e?: MouseEvent | KeyboardEvent): void {\n    if (item.disabled) {\n      e?.preventDefault();\n      return;\n    }\n    this.active = item.value;\n    this.dispatchEvent(new CustomEvent('cg-navbar-select', {\n      detail: { value: item.value, item },\n      bubbles: true,\n      composed: true,\n    }));\n    if (this.mobileOpen) this.closeMobileMenu();\n  }\n\n  private _toggleMobile(): void {\n    this.mobileOpen = !this.mobileOpen;\n    this.dispatchEvent(new CustomEvent('cg-navbar-toggle', {\n      detail: { open: this.mobileOpen },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _onItemKeydown(e: KeyboardEvent, idx: number): void {\n    const enabled = this.items.map((it, i) => ({ it, i })).filter(({ it }) => !it.disabled);\n    const enabledIdx = enabled.findIndex(({ i }) => i === idx);\n    let next = enabledIdx;\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      next = (enabledIdx - 1 + enabled.length) % enabled.length;\n    } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      next = (enabledIdx + 1) % enabled.length;\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      next = 0;\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      next = enabled.length - 1;\n    }\n    if (next !== enabledIdx) {\n      const target = enabled[next];\n      if (target) {\n        this._selectItem(target.it, e);\n        this.updateComplete.then(() => {\n          const items = this._itemsEl?.querySelectorAll<HTMLElement>('.item');\n          items?.[target.i]?.focus();\n        });\n      }\n    }\n  }\n\n  // ─── Render helpers ─────────────────────────────────────────────\n\n  private _renderItem(item: NavItem, idx: number, mobile = false) {\n    const selected = item.value === this.active;\n    const cls = mobile ? 'mobile-item' : 'item';\n    const styleVar = mobile ? `--idx:${idx};animation-delay:calc(${idx} * 50ms);` : '';\n    return html`\n      <a\n        class=${cls}\n        href=${item.href}\n        target=${item.external ? '_blank' : nothing}\n        rel=${item.external ? 'noopener noreferrer' : nothing}\n        role=${mobile ? 'menuitem' : 'tab'}\n        aria-selected=${selected ? 'true' : 'false'}\n        aria-disabled=${item.disabled ? 'true' : 'false'}\n        tabindex=${selected || mobile ? '0' : '-1'}\n        style=${styleVar}\n        @click=${(e: MouseEvent) => this._selectItem(item, e)}\n        @keydown=${(e: KeyboardEvent) => !mobile && this._onItemKeydown(e, idx)}\n      >\n        ${item.icon ? html`<span class=\"item-icon\" aria-hidden=\"true\" .innerHTML=${item.icon}></span>` : nothing}\n        <span>${item.label}</span>\n        ${item.badge ? html`<span class=\"item-badge\">${item.badge}</span>` : nothing}\n        ${item.kbd ? html`<span class=\"item-kbd\">${item.kbd}</span>` : nothing}\n      </a>\n    `;\n  }\n\n  override render() {\n    const hasItems = this.items.length > 0;\n    return html`\n      <nav role=\"navigation\" aria-label=\"Main navigation\">\n        ${this.brandHref\n          ? html`<a class=\"brand\" href=${this.brandHref}><slot name=\"brand\"></slot></a>`\n          : html`<div class=\"brand\"><slot name=\"brand\"></slot></div>`}\n        ${hasItems ? html`\n          <div class=\"items\" role=\"tablist\">\n            <span class=\"indicator\" data-ready=\"false\"></span>\n            ${this.items.map((item, idx) => this._renderItem(item, idx, false))}\n          </div>\n        ` : nothing}\n        <div class=\"center\"><slot name=\"center\"></slot></div>\n        <div class=\"end\">\n          <slot name=\"end\"></slot>\n          <button\n            class=\"menu-btn\"\n            type=\"button\"\n            aria-label=\"Toggle menu\"\n            aria-expanded=${this.mobileOpen ? 'true' : 'false'}\n            aria-controls=\"cg-navbar-mobile-panel\"\n            @click=${this._toggleMobile}\n          >\n            ${this.mobileOpen\n              ? html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`\n              : html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M3 12h18M3 6h18M3 18h18\"/></svg>`\n            }\n          </button>\n        </div>\n        <div id=\"cg-navbar-mobile-panel\" class=\"mobile-panel\" role=\"menu\">\n          <slot name=\"mobile-menu\">\n            ${hasItems ? this.items.map((item, idx) => this._renderItem(item, idx, true)) : nothing}\n          </slot>\n        </div>\n      </nav>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-navbar': CgNavbar;\n  }\n}\n"],"names":["CgNavbar","LitElement","next","changed","idx","i","itemEl","item","e","enabled","it","enabledIdx","target","mobile","selected","cls","styleVar","html","nothing","hasItems","hostBlock","reducedMotion","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}

package/dist/components/cg-navigation-menu/cg-navigation-menu.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+export interface NavMenuLink {
+    title: string;
+    description?: string;
+    icon?: string;
+    href?: string;
+}
+export interface NavMenuSection {
+    heading?: string;
+    links: NavMenuLink[];
+}
+export interface NavMenuItem {
+    label: string;
+    id?: string;
+    sections: NavMenuSection[];
+}
+/**
+ * @element cg-navigation-menu
+ * Horizontal mega-menu with large panel drop-downs grouped by section.
+ *
+ * @fires {CustomEvent<{menu:string,link:string}>} cg-navigation-menu-select
+ */
+export declare class CgNavigationMenu extends LitElement {
+    static styles: import('lit').CSSResult[];
+    items: NavMenuItem[];
+    openDelay: number;
+    closeDelay: number;
+    /** Panel grid column count. Default 2. */
+    columns: 1 | 2 | 3 | 4;
+    private _openIndex;
+    private _openTimer;
+    private _closeTimer;
+    private _clearTimers;
+    private _scheduleOpen;
+    private _scheduleClose;
+    disconnectedCallback(): void;
+    private _onKeydown;
+    private _selectLink;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-navigation-menu': CgNavigationMenu;
+    }
+}
+//# sourceMappingURL=cg-navigation-menu.d.ts.map

package/dist/components/cg-navigation-menu/cg-navigation-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-navigation-menu.d.ts","sourceRoot":"","sources":["../../../src/components/cg-navigation-menu/cg-navigation-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,cAAc,EAAE,CAAC;CAC5B;AAED;;;;;GAKG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BA8InB;IAEwB,KAAK,EAAE,WAAW,EAAE,CAAM;IACzB,SAAS,SAAM;IACf,UAAU,SAAO;IAC7C,0CAA0C;IACd,OAAO,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IAE9C,OAAO,CAAC,UAAU,CAAM;IACjC,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,cAAc;IAKb,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,WAAW;IAQV,MAAM;CA+ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}