@cognivo/components 0.8.0 → 0.8.2

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

@@ -1 +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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"}
+{"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 768px.\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(var(--cg-blur-backdrop));\n      -webkit-backdrop-filter: saturate(180%) blur(var(--cg-blur-backdrop));\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(var(--cg-blur-backdrop));\n      -webkit-backdrop-filter: saturate(180%) blur(var(--cg-blur-backdrop));\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: var(--cg-letter-spacing-tight);\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: var(--cg-letter-spacing-wide);\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:\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      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: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    .mobile-item:active:not([aria-disabled=\"true\"]) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\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      // The panel goes display:none — restore focus to the toggle so\n      // keyboard users aren't stranded on <body>.\n      this.updateComplete.then(() =>\n        this.renderRoot.querySelector<HTMLElement>('.menu-btn')?.focus());\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        // Roving focus only — arrowing must not select/navigate. Activation\n        // stays on Enter/click via the anchor's native behavior.\n        const items = this._itemsEl?.querySelectorAll<HTMLElement>('.item');\n        items?.[target.i]?.focus();\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 ? `animation-delay:calc(${idx} * var(--cg-transition-duration-fast) / 2);` : '';\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 ? nothing : '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\">\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

@@ -23,6 +23,8 @@ export interface NavMenuItem {
 export declare class CgNavigationMenu extends LitElement {
     static styles: import('lit').CSSResult[];
     items: NavMenuItem[];
+    /** Accessible name for the navigation landmark. */
+    label: string;
     openDelay: number;
     closeDelay: number;
     /** Panel grid column count. Default 2. */
@@ -35,6 +37,7 @@ export declare class CgNavigationMenu extends LitElement {
     private _scheduleClose;
     disconnectedCallback(): void;
     private _onKeydown;
+    private _onFocusOut;
     private _selectLink;
     render(): import('lit').TemplateResult<1>;
 }

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

@@ -1 +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"}
+{"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,4BAkJnB;IAEwB,KAAK,EAAE,WAAW,EAAE,CAAM;IACrD,mDAAmD;IACvC,KAAK,SAAqB;IACV,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;IAKnB,OAAO,CAAC,WAAW;IAQV,MAAM;CAkDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/components/cg-navigation-menu/cg-navigation-menu.js

@@ -1,14 +1,14 @@
-import { css as p, LitElement as u, nothing as s, html as n } from "lit";
-import { property as c, state as v, customElement as h } from "lit/decorators.js";
-import { h as m, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
-var b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (r, e, l, a) => {
-  for (var t = a > 1 ? void 0 : a ? _(e, l) : e, g = r.length - 1, d; g >= 0; g--)
-    (d = r[g]) && (t = (a ? d(e, l, t) : d(t)) || t);
-  return a && t && b(e, l, t), t;
+import { css as p, LitElement as u, nothing as a, html as n } from "lit";
+import { property as s, state as v, customElement as h } from "lit/decorators.js";
+import { h as f, r as m } from "../../chunks/premium.css-DHekUEUt.js";
+var b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (r, e, l, c) => {
+  for (var t = c > 1 ? void 0 : c ? _(e, l) : e, g = r.length - 1, d; g >= 0; g--)
+    (d = r[g]) && (t = (c ? d(e, l, t) : d(t)) || t);
+  return c && t && b(e, l, t), t;
 };
 let i = class extends u {
   constructor() {
-    super(...arguments), this.items = [], this.openDelay = 80, this.closeDelay = 120, this.columns = 2, this._openIndex = -1, this._openTimer = null, this._closeTimer = null;
+    super(...arguments), this.items = [], this.label = "Main navigation", this.openDelay = 80, this.closeDelay = 120, this.columns = 2, this._openIndex = -1, this._openTimer = null, this._closeTimer = null;
   }
   _clearTimers() {
     this._openTimer && (clearTimeout(this._openTimer), this._openTimer = null), this._closeTimer && (clearTimeout(this._closeTimer), this._closeTimer = null);
@@ -29,6 +29,10 @@ let i = class extends u {
   _onKeydown(r) {
     r.key === "Escape" && this._openIndex !== -1 && (r.preventDefault(), this._openIndex = -1);
   }
+  _onFocusOut(r) {
+    const e = r.relatedTarget;
+    (!e || !this.renderRoot.contains(e)) && this._scheduleClose();
+  }
   _selectLink(r, e) {
     this.dispatchEvent(new CustomEvent("cg-navigation-menu-select", {
       bubbles: !0,
@@ -38,19 +42,21 @@ let i = class extends u {
   }
   render() {
     return n`
-      <nav role="navigation" @mouseleave=${this._scheduleClose} @keydown=${this._onKeydown}>
+      <nav
+        role="navigation"
+        aria-label=${this.label}
+        @mouseleave=${this._scheduleClose}
+        @keydown=${this._onKeydown}
+        @focusout=${this._onFocusOut}
+      >
         ${this.items.map((r, e) => n`
           <button
             class="trigger ${this._openIndex === e ? "open" : ""}"
-            aria-haspopup="menu"
             aria-expanded=${this._openIndex === e ? "true" : "false"}
-            aria-controls="cg-navigation-menu-panel"
+            aria-controls=${this._openIndex === e ? "cg-navigation-menu-panel" : a}
             @mouseenter=${() => this._scheduleOpen(e)}
-            @focus=${() => {
-      this._openIndex = e;
-    }}
             @click=${() => {
-      this._openIndex = this._openIndex === e ? -1 : e;
+      this._clearTimers(), this._openIndex = this._openIndex === e ? -1 : e;
     }}
           >
             <span>${r.label}</span>
@@ -65,7 +71,6 @@ let i = class extends u {
           <div
             id="cg-navigation-menu-panel"
             class="panel"
-            role="menu"
             style=${`--cg-nm-columns: ${this.columns};`}
             @mouseenter=${() => {
       this._clearTimers();
@@ -74,23 +79,23 @@ let i = class extends u {
           >
             ${this.items[this._openIndex].sections.map((r) => n`
               <div>
-                ${r.heading ? n`<h4 class="section-heading">${r.heading}</h4>` : s}
+                ${r.heading ? n`<h4 class="section-heading">${r.heading}</h4>` : a}
                 ${r.links.map((e) => n`
-                  <button class="link" role="menuitem" @click=${() => this._selectLink(this.items[this._openIndex], e)}>
-                    ${e.icon ? n`<span class="link-icon" aria-hidden="true" .innerHTML=${e.icon}></span>` : s}
+                  <button class="link" @click=${() => this._selectLink(this.items[this._openIndex], e)}>
+                    ${e.icon ? n`<span class="link-icon" aria-hidden="true" .innerHTML=${e.icon}></span>` : a}
                     <span class="link-title">${e.title}</span>
-                    ${e.description ? n`<span class="link-desc">${e.description}</span>` : s}
+                    ${e.description ? n`<span class="link-desc">${e.description}</span>` : a}
                   </button>
                 `)}
               </div>
             `)}
           </div>
-        ` : s}
+        ` : a}
       </nav>
     `;
   }
 };
-i.styles = [m, f, p`
+i.styles = [f, m, p`
     :host {
       display: block;
       font-family: var(--cg-font-family-primary);
@@ -123,6 +128,10 @@ i.styles = [m, f, p`
     .trigger.open {
       background: var(--cg-color-action-tertiary-background-hover);
     }
+    /* Distinct open indicator: accent underline so open != hover. */
+    .trigger.open:not(:focus-visible) {
+      box-shadow: inset 0 calc(-1 * var(--cg-border-width-100)) 0 var(--cg-color-action-primary-border-default);
+    }
     .trigger:active { transform: scale(var(--cg-interaction-press-scale)); }
     .trigger:focus-visible {
       outline: none;
@@ -234,16 +243,19 @@ i.styles = [m, f, p`
     }
   `];
 o([
-  c({ type: Array })
+  s({ type: Array })
 ], i.prototype, "items", 2);
 o([
-  c({ type: Number })
+  s()
+], i.prototype, "label", 2);
+o([
+  s({ type: Number })
 ], i.prototype, "openDelay", 2);
 o([
-  c({ type: Number })
+  s({ type: Number })
 ], i.prototype, "closeDelay", 2);
 o([
-  c({ type: Number })
+  s({ type: Number })
 ], i.prototype, "columns", 2);
 o([
   v()

package/dist/components/cg-navigation-menu/cg-navigation-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"cg-navigation-menu.js","sources":["../../../src/components/cg-navigation-menu/cg-navigation-menu.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface NavMenuLink {\n  title: string;\n  description?: string;\n  icon?: string;\n  href?: string;\n}\n\nexport interface NavMenuSection {\n  heading?: string;\n  links: NavMenuLink[];\n}\n\nexport interface NavMenuItem {\n  label: string;\n  id?: string;\n  sections: NavMenuSection[];\n}\n\n/**\n * @element cg-navigation-menu\n * Horizontal mega-menu with large panel drop-downs grouped by section.\n *\n * @fires {CustomEvent<{menu:string,link:string}>} cg-navigation-menu-select\n */\n@customElement('cg-navigation-menu')\nexport class CgNavigationMenu extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      font-family: var(--cg-font-family-primary);\n      color: var(--cg-color-surface-container-text);\n    }\n\n    [role=\"navigation\"] {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n    }\n\n    .trigger {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      background: transparent;\n      border: none;\n      color: inherit;\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger:hover,\n    .trigger.open {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .trigger:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .trigger: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    /* Caret indicator on triggers — rotates 180° when open. */\n    .trigger-caret {\n      display: inline-flex;\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      color: var(--cg-color-surface-container-outlined);\n      transition:\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger:hover .trigger-caret,\n    .trigger.open .trigger-caret { color: var(--cg-color-surface-base-text); }\n    .trigger.open .trigger-caret { transform: rotate(180deg); }\n\n    .panel {\n      position: absolute;\n      top: calc(100% + var(--cg-spacing-8));\n      left: 0;\n      z-index: var(--cg-z-index-500);\n      min-width: var(--cg-component-navigation-menu-panel-min-width);\n      padding: var(--cg-spacing-24);\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      border-radius: var(--cg-border-radius-200);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      display: grid;\n      grid-template-columns: repeat(var(--cg-nm-columns), minmax(0, 1fr));\n      gap: var(--cg-spacing-20);\n      transform-origin: top;\n      animation: navMenuPanelIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    @keyframes navMenuPanelIn {\n      from { opacity: 0; transform: translateY(calc(-1 * var(--cg-spacing-6))) scale(0.98); }\n      to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n\n    .section-heading {\n      margin: 0 0 var(--cg-spacing-12) var(--cg-spacing-12);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wider);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    .link {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-12);\n      background: transparent;\n      border: none;\n      text-align: left;\n      color: inherit;\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      text-decoration: none;\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      width: 100%;\n      box-sizing: border-box;\n    }\n    /* Optional leading icon — stacks above the title (vertical rhythm). */\n    .link-icon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      margin-bottom: var(--cg-spacing-4);\n      background: var(--cg-color-action-tertiary-background-hover);\n      border-radius: var(--cg-border-radius-100);\n      color: var(--cg-color-accent-text);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .link-icon svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n    .link:hover .link-icon { background: var(--cg-color-surface-container-background); }\n    .link:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .link:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .link: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    .link-title {\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .link-desc {\n      font-size: var(--cg-font-size-xs);\n      line-height: var(--cg-line-height-relaxed);\n      color: var(--cg-color-surface-container-outlined);\n    }\n  `];\n\n  @property({ type: Array }) items: NavMenuItem[] = [];\n  @property({ type: Number }) openDelay = 80;\n  @property({ type: Number }) closeDelay = 120;\n  /** Panel grid column count. Default 2. */\n  @property({ type: Number }) columns: 1 | 2 | 3 | 4 = 2;\n\n  @state() private _openIndex = -1;\n  private _openTimer: number | null = null;\n  private _closeTimer: number | null = null;\n\n  private _clearTimers() {\n    if (this._openTimer) { clearTimeout(this._openTimer); this._openTimer = null; }\n    if (this._closeTimer) { clearTimeout(this._closeTimer); this._closeTimer = null; }\n  }\n\n  private _scheduleOpen(i: number): void {\n    this._clearTimers();\n    this._openTimer = window.setTimeout(() => { this._openIndex = i; }, this.openDelay);\n  }\n\n  private _scheduleClose(): void {\n    this._clearTimers();\n    this._closeTimer = window.setTimeout(() => { this._openIndex = -1; }, this.closeDelay);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearTimers();\n  }\n\n  private _onKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && this._openIndex !== -1) {\n      e.preventDefault();\n      this._openIndex = -1;\n    }\n  }\n\n  private _selectLink(menu: NavMenuItem, link: NavMenuLink): void {\n    this.dispatchEvent(new CustomEvent('cg-navigation-menu-select', {\n      bubbles: true, composed: true,\n      detail: { menu: menu.id ?? menu.label, link: link.title, href: link.href },\n    }));\n    this._openIndex = -1;\n  }\n\n  override render() {\n    return html`\n      <nav role=\"navigation\" @mouseleave=${this._scheduleClose} @keydown=${this._onKeydown}>\n        ${this.items.map((menu, i) => html`\n          <button\n            class=\"trigger ${this._openIndex === i ? 'open' : ''}\"\n            aria-haspopup=\"menu\"\n            aria-expanded=${this._openIndex === i ? 'true' : 'false'}\n            aria-controls=\"cg-navigation-menu-panel\"\n            @mouseenter=${() => this._scheduleOpen(i)}\n            @focus=${() => { this._openIndex = i; }}\n            @click=${() => { this._openIndex = this._openIndex === i ? -1 : i; }}\n          >\n            <span>${menu.label}</span>\n            <span class=\"trigger-caret\" aria-hidden=\"true\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"6 9 12 15 18 9\"/>\n              </svg>\n            </span>\n          </button>\n        `)}\n        ${this._openIndex >= 0 && this.items[this._openIndex] ? html`\n          <div\n            id=\"cg-navigation-menu-panel\"\n            class=\"panel\"\n            role=\"menu\"\n            style=${`--cg-nm-columns: ${this.columns};`}\n            @mouseenter=${() => { this._clearTimers(); }}\n            @mouseleave=${this._scheduleClose}\n          >\n            ${this.items[this._openIndex]!.sections.map(section => html`\n              <div>\n                ${section.heading ? html`<h4 class=\"section-heading\">${section.heading}</h4>` : nothing}\n                ${section.links.map(link => html`\n                  <button class=\"link\" role=\"menuitem\" @click=${() => this._selectLink(this.items[this._openIndex]!, link)}>\n                    ${link.icon ? html`<span class=\"link-icon\" aria-hidden=\"true\" .innerHTML=${link.icon}></span>` : nothing}\n                    <span class=\"link-title\">${link.title}</span>\n                    ${link.description ? html`<span class=\"link-desc\">${link.description}</span>` : nothing}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        ` : nothing}\n      </nav>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-navigation-menu': CgNavigationMenu;\n  }\n}\n"],"names":["CgNavigationMenu","LitElement","i","e","menu","link","html","section","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-navigation-menu.js","sources":["../../../src/components/cg-navigation-menu/cg-navigation-menu.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface NavMenuLink {\n  title: string;\n  description?: string;\n  icon?: string;\n  href?: string;\n}\n\nexport interface NavMenuSection {\n  heading?: string;\n  links: NavMenuLink[];\n}\n\nexport interface NavMenuItem {\n  label: string;\n  id?: string;\n  sections: NavMenuSection[];\n}\n\n/**\n * @element cg-navigation-menu\n * Horizontal mega-menu with large panel drop-downs grouped by section.\n *\n * @fires {CustomEvent<{menu:string,link:string}>} cg-navigation-menu-select\n */\n@customElement('cg-navigation-menu')\nexport class CgNavigationMenu extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      font-family: var(--cg-font-family-primary);\n      color: var(--cg-color-surface-container-text);\n    }\n\n    [role=\"navigation\"] {\n      position: relative;\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n    }\n\n    .trigger {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      background: transparent;\n      border: none;\n      color: inherit;\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger:hover,\n    .trigger.open {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    /* Distinct open indicator: accent underline so open != hover. */\n    .trigger.open:not(:focus-visible) {\n      box-shadow: inset 0 calc(-1 * var(--cg-border-width-100)) 0 var(--cg-color-action-primary-border-default);\n    }\n    .trigger:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .trigger: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    /* Caret indicator on triggers — rotates 180° when open. */\n    .trigger-caret {\n      display: inline-flex;\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      color: var(--cg-color-surface-container-outlined);\n      transition:\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger:hover .trigger-caret,\n    .trigger.open .trigger-caret { color: var(--cg-color-surface-base-text); }\n    .trigger.open .trigger-caret { transform: rotate(180deg); }\n\n    .panel {\n      position: absolute;\n      top: calc(100% + var(--cg-spacing-8));\n      left: 0;\n      z-index: var(--cg-z-index-500);\n      min-width: var(--cg-component-navigation-menu-panel-min-width);\n      padding: var(--cg-spacing-24);\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      border-radius: var(--cg-border-radius-200);\n      box-shadow: var(--cg-shadow-elevation-xl);\n      display: grid;\n      grid-template-columns: repeat(var(--cg-nm-columns), minmax(0, 1fr));\n      gap: var(--cg-spacing-20);\n      transform-origin: top;\n      animation: navMenuPanelIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    @keyframes navMenuPanelIn {\n      from { opacity: 0; transform: translateY(calc(-1 * var(--cg-spacing-6))) scale(0.98); }\n      to { opacity: 1; transform: translateY(0) scale(1); }\n    }\n\n    .section-heading {\n      margin: 0 0 var(--cg-spacing-12) var(--cg-spacing-12);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wider);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    .link {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-12);\n      background: transparent;\n      border: none;\n      text-align: left;\n      color: inherit;\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      text-decoration: none;\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      width: 100%;\n      box-sizing: border-box;\n    }\n    /* Optional leading icon — stacks above the title (vertical rhythm). */\n    .link-icon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      margin-bottom: var(--cg-spacing-4);\n      background: var(--cg-color-action-tertiary-background-hover);\n      border-radius: var(--cg-border-radius-100);\n      color: var(--cg-color-accent-text);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .link-icon svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n    .link:hover .link-icon { background: var(--cg-color-surface-container-background); }\n    .link:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .link:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .link: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    .link-title {\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .link-desc {\n      font-size: var(--cg-font-size-xs);\n      line-height: var(--cg-line-height-relaxed);\n      color: var(--cg-color-surface-container-outlined);\n    }\n  `];\n\n  @property({ type: Array }) items: NavMenuItem[] = [];\n  /** Accessible name for the navigation landmark. */\n  @property() label = 'Main navigation';\n  @property({ type: Number }) openDelay = 80;\n  @property({ type: Number }) closeDelay = 120;\n  /** Panel grid column count. Default 2. */\n  @property({ type: Number }) columns: 1 | 2 | 3 | 4 = 2;\n\n  @state() private _openIndex = -1;\n  private _openTimer: number | null = null;\n  private _closeTimer: number | null = null;\n\n  private _clearTimers() {\n    if (this._openTimer) { clearTimeout(this._openTimer); this._openTimer = null; }\n    if (this._closeTimer) { clearTimeout(this._closeTimer); this._closeTimer = null; }\n  }\n\n  private _scheduleOpen(i: number): void {\n    this._clearTimers();\n    this._openTimer = window.setTimeout(() => { this._openIndex = i; }, this.openDelay);\n  }\n\n  private _scheduleClose(): void {\n    this._clearTimers();\n    this._closeTimer = window.setTimeout(() => { this._openIndex = -1; }, this.closeDelay);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearTimers();\n  }\n\n  private _onKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && this._openIndex !== -1) {\n      e.preventDefault();\n      this._openIndex = -1;\n    }\n  }\n\n  private _onFocusOut(e: FocusEvent): void {\n    const target = e.relatedTarget as Node | null;\n    if (!target || !this.renderRoot.contains(target)) this._scheduleClose();\n  }\n\n  private _selectLink(menu: NavMenuItem, link: NavMenuLink): void {\n    this.dispatchEvent(new CustomEvent('cg-navigation-menu-select', {\n      bubbles: true, composed: true,\n      detail: { menu: menu.id ?? menu.label, link: link.title, href: link.href },\n    }));\n    this._openIndex = -1;\n  }\n\n  override render() {\n    return html`\n      <nav\n        role=\"navigation\"\n        aria-label=${this.label}\n        @mouseleave=${this._scheduleClose}\n        @keydown=${this._onKeydown}\n        @focusout=${this._onFocusOut}\n      >\n        ${this.items.map((menu, i) => html`\n          <button\n            class=\"trigger ${this._openIndex === i ? 'open' : ''}\"\n            aria-expanded=${this._openIndex === i ? 'true' : 'false'}\n            aria-controls=${this._openIndex === i ? 'cg-navigation-menu-panel' : nothing}\n            @mouseenter=${() => this._scheduleOpen(i)}\n            @click=${() => { this._clearTimers(); this._openIndex = this._openIndex === i ? -1 : i; }}\n          >\n            <span>${menu.label}</span>\n            <span class=\"trigger-caret\" aria-hidden=\"true\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <polyline points=\"6 9 12 15 18 9\"/>\n              </svg>\n            </span>\n          </button>\n        `)}\n        ${this._openIndex >= 0 && this.items[this._openIndex] ? html`\n          <div\n            id=\"cg-navigation-menu-panel\"\n            class=\"panel\"\n            style=${`--cg-nm-columns: ${this.columns};`}\n            @mouseenter=${() => { this._clearTimers(); }}\n            @mouseleave=${this._scheduleClose}\n          >\n            ${this.items[this._openIndex]!.sections.map(section => html`\n              <div>\n                ${section.heading ? html`<h4 class=\"section-heading\">${section.heading}</h4>` : nothing}\n                ${section.links.map(link => html`\n                  <button class=\"link\" @click=${() => this._selectLink(this.items[this._openIndex]!, link)}>\n                    ${link.icon ? html`<span class=\"link-icon\" aria-hidden=\"true\" .innerHTML=${link.icon}></span>` : nothing}\n                    <span class=\"link-title\">${link.title}</span>\n                    ${link.description ? html`<span class=\"link-desc\">${link.description}</span>` : nothing}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        ` : nothing}\n      </nav>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-navigation-menu': CgNavigationMenu;\n  }\n}\n"],"names":["CgNavigationMenu","LitElement","i","e","target","menu","link","html","nothing","section","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-number-input/cg-number-input.d.ts

@@ -35,6 +35,7 @@ export declare class CgNumberInput extends LitElement {
     private _startRepeat;
     private _stopRepeat;
     private _onInput;
+    private _commitInput;
     private _onKeyDown;
     disconnectedCallback(): void;
     render(): import('lit').TemplateResult<1>;

package/dist/components/cg-number-input/cg-number-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cg-number-input.d.ts","sourceRoot":"","sources":["../../../src/components/cg-number-input/cg-number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;GAIG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BA2GnB;IAEyB,KAAK,SAAK;IACV,GAAG,SAAa;IAChB,GAAG,SAAY;IACf,IAAI,SAAK;IACzB,KAAK,SAAM;IACqB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,OAAO,UAAS;IAC/B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtE,IAAI,SAAM;IACO,QAAQ,UAAS;IAErC,OAAO,CAAC,OAAO,EAAE,cAAc;IAcxC,iBAAiB;IAKjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAI7B,OAAO,CAAC,QAAQ,CAAS;IAClC,OAAO,CAAC,YAAY,CAAK;IAET,OAAO,CAAC,MAAM,CAAoB;IAElD,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,UAAU;IAClB,OAAO,CAAC,UAAU;IAElB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,WAAW;IAEnB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,UAAU;IAKT,oBAAoB;IAEpB,MAAM;CAyChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"cg-number-input.d.ts","sourceRoot":"","sources":["../../../src/components/cg-number-input/cg-number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;GAIG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BA+GnB;IAEyB,KAAK,SAAK;IACV,GAAG,SAAa;IAChB,GAAG,SAAY;IACf,IAAI,SAAK;IACzB,KAAK,SAAM;IACqB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,OAAO,UAAS;IAC/B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtE,IAAI,SAAM;IACO,QAAQ,UAAS;IAErC,OAAO,CAAC,OAAO,EAAE,cAAc;IAcxC,iBAAiB;IAKjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAI7B,OAAO,CAAC,QAAQ,CAAS;IAClC,OAAO,CAAC,YAAY,CAAK;IAET,OAAO,CAAC,MAAM,CAAoB;IAElD,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,UAAU;IAClB,OAAO,CAAC,UAAU;IAElB,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,WAAW,CAA8C;IAEjE,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,UAAU;IAQT,oBAAoB;IAEpB,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}