@helixui/library 3.7.0 → 3.8.0-next.145

package/dist/shared/hx-nav-GTsAZGOx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-nav-GTsAZGOx.js","sources":["../../src/components/hx-nav/hx-nav.styles.ts","../../src/components/hx-nav/hx-nav.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixNavStyles = css`\n  :host {\n    display: block;\n    font-family: var(--hx-nav-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-nav-font-size, var(--hx-font-size-sm, 0.875rem));\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Nav Container ─── */\n\n  [part='nav'] {\n    position: relative;\n    background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #0d1825));\n    color: var(--hx-nav-color, var(--hx-color-neutral-100, #ebeee9));\n    padding: var(--hx-nav-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));\n  }\n\n  /* ─── Hamburger Toggle ─── */\n\n  [part='toggle'] {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    padding: var(--hx-space-2, 0.5rem);\n    background: transparent;\n    border: none;\n    border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    color: var(--hx-nav-color, var(--hx-color-neutral-100, #ebeee9));\n    cursor: pointer;\n    transition: background-color var(--hx-transition-fast, 150ms) ease;\n    line-height: 0;\n  }\n\n  [part='toggle']:hover {\n    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #313e4b));\n  }\n\n  [part='toggle']:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Navigation List ─── */\n\n  [part='list'] {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    gap: var(--hx-space-1, 0.25rem);\n    align-items: center;\n  }\n\n  /* ─── Nav Item ─── */\n\n  [part='item'] {\n    position: relative;\n  }\n\n  /* ─── Nav Link / Button ─── */\n\n  .nav__link {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));\n    /*\n     * WCAG 2.5.5 (Enhanced) AAA — nav links rendered with default padding\n     * land at ~37 px tall (8 px + 1.5 line-height + 8 px). The link\n     * content is first-party (rendered via consumer-supplied props on\n     * <hx-nav-item>), so the slotted-content carve-out does not apply —\n     * this is a real component obligation. Bind --hx-nav-link-min-height\n     * to --hx-touch-target-min (2.75rem / 44 px) to grow the interactive\n     * area without enlarging the visible label.\n     */\n    min-height: var(--hx-nav-link-min-height, var(--hx-touch-target-min, 2.75rem));\n    color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #ebeee9));\n    text-decoration: none;\n    border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    border: none;\n    background: transparent;\n    cursor: pointer;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: var(--hx-font-weight-medium, 500);\n    line-height: var(--hx-line-height-normal, 1.5);\n    white-space: nowrap;\n    transition:\n      background-color var(--hx-transition-fast, 150ms) ease,\n      color var(--hx-transition-fast, 150ms) ease;\n  }\n\n  .nav__link:hover {\n    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #313e4b));\n    color: var(--hx-nav-link-hover-color, var(--hx-color-neutral-0, #ffffff));\n  }\n\n  .nav__link:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .nav__link--active {\n    background-color: var(--hx-nav-link-active-bg, var(--hx-color-action-primary-bg, #0f6363));\n    /* Use --hx-color-text-on-primary so the active-link text inherits the\n     * action-surface AAA-strict pairing (white on primary-700 in default\n     * themes; black on lighter primary-700 in the high-contrast theme).\n     * Pre-3.4.0 this consumed --hx-color-primary-600 directly which\n     * resolved to Apex #0F7078 + white = 5.82:1 — AAA-large only, AAA\n     * normal fail under WCAG 1.4.6 for body-text-sized link labels. The\n     * Phase 4 Tier 3 chain shift moved action.primary.bg to primary-700\n     * (Apex 7.03:1 with white) and consuming the action semantic here\n     * picks up the AAA-strict pairing across the full 6-brand matrix.\n     * Hardcoding white previously failed AAA-large in high-contrast\n     * (ratio 2.54 vs. 4.5 floor); the on-primary token resolves correctly\n     * in HC mode. */\n    color: var(--hx-nav-link-active-color, var(--hx-color-text-on-primary, #ffffff));\n  }\n\n  /* ─── Chevron Icon ─── */\n\n  .nav__chevron {\n    --hx-icon-size: 16px;\n    transition: transform var(--hx-transition-normal, 200ms) ease;\n    flex-shrink: 0;\n  }\n\n  .nav__link--expanded .nav__chevron {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Hamburger Icon (mobile menu trigger) ─── */\n\n  .nav__hamburger-glyph {\n    --hx-icon-size: 24px;\n  }\n\n  /* ─── Submenu ─── */\n\n  .nav__submenu {\n    position: absolute;\n    top: calc(100% + var(--hx-space-1, 0.25rem));\n    left: 0;\n    min-width: var(--hx-nav-submenu-min-width, 12rem);\n    list-style: none;\n    margin: 0;\n    padding: var(--hx-space-1, 0.25rem) 0;\n    background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #202b39));\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    box-shadow: var(\n      --hx-nav-shadow,\n      var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))\n    );\n    z-index: var(--hx-z-index-dropdown, 1000);\n  }\n\n  .nav__submenu[hidden] {\n    display: none;\n  }\n\n  .nav__submenu .nav__link {\n    display: block;\n    width: 100%;\n    text-align: start;\n    border-radius: 0;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n  }\n\n  /* ─── Vertical / Sidebar Orientation ─── */\n\n  :host([orientation='vertical']) [part='nav'] {\n    padding: var(--hx-space-4, 1rem) var(--hx-space-2, 0.5rem);\n  }\n\n  :host([orientation='vertical']) [part='list'] {\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--hx-space-1, 0.25rem);\n  }\n\n  :host([orientation='vertical']) .nav__link {\n    width: 100%;\n    justify-content: flex-start;\n  }\n\n  :host([orientation='vertical']) .nav__submenu {\n    position: static;\n    box-shadow: none;\n    border-radius: 0;\n    background-color: transparent;\n    padding: 0;\n    padding-inline-start: var(--hx-space-4, 1rem);\n  }\n\n  :host([orientation='vertical']) .nav__submenu[hidden] {\n    display: none;\n  }\n\n  :host([orientation='vertical']) .nav__submenu .nav__link {\n    padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #b6bfb9));\n  }\n\n  /* ─── Mobile Responsive ─── */\n\n  @media (max-width: 768px) {\n    [part='nav'] {\n      display: flex;\n      flex-direction: column;\n      padding: var(--hx-space-2, 0.5rem);\n    }\n\n    [part='toggle'] {\n      display: inline-flex;\n      align-self: flex-end;\n    }\n\n    [part='list'] {\n      display: none;\n      flex-direction: column;\n      align-items: stretch;\n      width: 100%;\n      margin-top: var(--hx-space-2, 0.5rem);\n      gap: var(--hx-space-1, 0.25rem);\n    }\n\n    [part='list'].nav__list--open {\n      display: flex;\n    }\n\n    [part='item'] {\n      width: 100%;\n    }\n\n    .nav__link {\n      width: 100%;\n      justify-content: flex-start;\n    }\n\n    .nav__submenu {\n      position: static;\n      box-shadow: none;\n      border-radius: 0;\n      padding-inline-start: var(--hx-space-4, 1rem);\n      background-color: transparent;\n    }\n\n    .nav__submenu .nav__link {\n      padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);\n    }\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav__link,\n    .nav__chevron,\n    [part='toggle'] {\n      transition: none;\n      animation: none;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    [part='nav'] {\n      border: 1px solid CanvasText;\n    }\n\n    .nav__link--active {\n      border: 1px solid Highlight;\n    }\n\n    .nav__submenu {\n      border: 1px solid CanvasText;\n    }\n  }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport '../hx-icon/hx-icon.js';\nimport { HelixElement } from '../../base/index.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { helixNavStyles } from './hx-nav.styles.js';\n\n/** A single navigation item, optionally with nested children. */\nexport interface NavItem {\n  /** Display label for the item. */\n  label: string;\n  /** Href for the item link. Required unless children are provided. */\n  href?: string;\n  /** Whether this item represents the current page. */\n  current?: boolean;\n  /** Nested sub-menu items. */\n  children?: NavItem[];\n}\n\n/** Layout orientation for the navigation. */\ntype NavOrientation = 'horizontal' | 'vertical';\n\n/**\n * Primary and secondary navigation component.\n * Supports horizontal menu bar and vertical sidebar patterns.\n * Mobile responsive with hamburger toggle.\n *\n * @summary Navigation bar supporting horizontal and vertical layouts with nested submenus.\n *\n * @tag hx-nav\n *\n * @fires {CustomEvent<{item: NavItem}>} hx-nav-select - Dispatched when a nav item is activated.\n *\n * @csspart nav - The nav landmark element.\n * @csspart list - The top-level list element.\n * @csspart item - Each list item wrapper.\n * @csspart link - The anchor or button element inside each item.\n * @csspart toggle - The mobile hamburger toggle button.\n *\n * @cssprop [--hx-nav-bg=var(--hx-color-neutral-900)] - Navigation background color.\n * @cssprop [--hx-nav-color=var(--hx-color-neutral-100)] - Navigation text color.\n * @cssprop [--hx-nav-font-family=var(--hx-font-family-sans)] - Navigation font family.\n * @cssprop [--hx-nav-link-color=var(--hx-color-neutral-100)] - Link text color.\n * @cssprop [--hx-nav-link-hover-bg=var(--hx-color-neutral-700)] - Link hover background.\n * @cssprop [--hx-nav-link-hover-color=var(--hx-color-white)] - Link hover text color.\n * @cssprop [--hx-nav-link-active-bg=var(--hx-color-primary-600)] - Active link background.\n * @cssprop [--hx-nav-link-active-color=var(--hx-color-white)] - Active link text color.\n * @cssprop [--hx-nav-submenu-bg=var(--hx-color-neutral-800)] - Submenu background color.\n * @cssprop [--hx-nav-submenu-min-width=12rem] - Submenu minimum width.\n * @cssprop [--hx-nav-font-size=var(--hx-font-size-sm)] - Navigation font size.\n * @cssprop [--hx-nav-padding=var(--hx-space-2) var(--hx-space-4)] - Navigation padding.\n * @cssprop [--hx-nav-item-padding=var(--hx-space-2) var(--hx-space-3)] - Item padding.\n * @cssprop [--hx-nav-border-radius=var(--hx-border-radius-sm)] - Item border radius.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-nav-focus-ring-color=var(--hx-focus-ring-color)] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-primary-600] - Color.\n * @cssprop [--hx-transition-normal] - Transition timing.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-nav-shadow] - CSS custom property.\n * @cssprop [--hx-shadow-md] - Box shadow.\n * @cssprop [--hx-z-index-dropdown] - Z-index layer.\n * @cssprop [--hx-space-1-5] - Spacing token.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @aaa-certified 2026-05-08\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-nav/AAA-AUDIT.md\n * @keyboard-contract navigate=Arrow,Home,End; activate=Enter,Space\n * @aria-pattern navigation\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/navigation.html\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated false\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-nav\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n */\n@customElement('hx-nav')\nexport class HelixNav extends HelixElement {\n  static override styles = [helixNavStyles, forcedColorsInteractive];\n\n  // ─── Properties ───\n\n  /**\n   * Navigation items array.\n   * @attr items\n   */\n  @property({\n    type: Array,\n    converter: {\n      fromAttribute(value: string | null): NavItem[] {\n        if (!value) return [];\n        try {\n          const parsed: unknown = JSON.parse(value);\n          return Array.isArray(parsed) ? (parsed as NavItem[]) : [];\n        } catch {\n          return [];\n        }\n      },\n    },\n  })\n  items: NavItem[] = [];\n\n  /**\n   * Layout orientation: 'horizontal' (menu bar) or 'vertical' (sidebar).\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: NavOrientation = 'horizontal';\n\n  /**\n   * Accessible label for the nav landmark.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Main navigation';\n\n  /** Accessible label for the navigation toggle button when menu is closed. */\n  @property({ type: String, attribute: 'label-open-menu' })\n  labelOpenMenu = 'Open navigation menu';\n\n  /** Accessible label for the navigation toggle button when menu is open. */\n  @property({ type: String, attribute: 'label-close-menu' })\n  labelCloseMenu = 'Close navigation menu';\n\n  // ─── State ───\n\n  /**\n   * Tracks whether the mobile navigation menu is currently expanded.\n   * @internal\n   */\n  @state() private _mobileOpen = false;\n  /**\n   * Index of the currently expanded top-level nav item with a submenu, or null if none is expanded.\n   * @internal\n   */\n  @state() private _expandedIndex: number | null = null;\n\n  // ─── Private: bound event handler reference ───\n\n  /**\n   * Stable bound reference to the outside-click handler, stored for addEventListener/removeEventListener symmetry.\n   * @internal\n   */\n  private _boundOutsideClick: (e: MouseEvent) => void = this._handleOutsideClick.bind(this);\n\n  /**\n   * Stable bound reference to the focusout handler, stored for addEventListener/removeEventListener symmetry.\n   * @internal\n   */\n  private _boundFocusout: (e: FocusEvent) => void = this._handleFocusout.bind(this);\n\n  /**\n   * Sanitizes a URL to prevent XSS via javascript: or data: URIs.\n   * Only allows http:, https:, relative paths, and fragment-only links.\n   */\n  /** @internal */\n  private _sanitizeHref(href: string | undefined): string {\n    if (!href || href === '#') return '#';\n    // Allow relative paths, fragments, and http(s)\n    if (\n      href.startsWith('/') ||\n      href.startsWith('./') ||\n      href.startsWith('../') ||\n      href.startsWith('#')\n    ) {\n      return href;\n    }\n    if (typeof window === 'undefined') return href;\n    try {\n      const url = new URL(href, window.location.href);\n      if (url.protocol === 'http:' || url.protocol === 'https:') {\n        return href;\n      }\n    } catch {\n      // Invalid URL — fall through to safe default\n    }\n    return '#';\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleToggle(): void {\n    this._mobileOpen = !this._mobileOpen;\n    if (!this._mobileOpen) {\n      this._expandedIndex = null;\n    }\n  }\n\n  /** @internal */\n  private _handleItemClick(item: NavItem, index: number, e: Event): void {\n    e.preventDefault();\n    if (item.children?.length) {\n      this._expandedIndex = this._expandedIndex === index ? null : index;\n    } else {\n      this._mobileOpen = false;\n      this._expandedIndex = null;\n      this.dispatchEvent(\n        new CustomEvent<{ item: NavItem }>('hx-nav-select', {\n          bubbles: true,\n          composed: true,\n          detail: { item },\n        }),\n      );\n    }\n  }\n\n  /** @internal */\n  private _handleSubItemClick(item: NavItem, e: Event): void {\n    e.preventDefault();\n    this._mobileOpen = false;\n    this._expandedIndex = null;\n    this.dispatchEvent(\n      new CustomEvent<{ item: NavItem }>('hx-nav-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleKeydown(e: KeyboardEvent, index: number, item: NavItem): void {\n    const items = this.shadowRoot?.querySelectorAll<HTMLElement>(\n      '[part=\"list\"] > [part=\"item\"] > [part=\"link\"]',\n    );\n    if (!items) return;\n    const itemsArr = Array.from(items);\n    const current = itemsArr[index];\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown': {\n        e.preventDefault();\n        if (item.children?.length && e.key === 'ArrowDown' && this.orientation === 'horizontal') {\n          // open submenu and focus first item\n          this._expandedIndex = index;\n          void this.updateComplete.then(() => {\n            const firstSub = this.shadowRoot?.querySelector<HTMLElement>(\n              `.nav__submenu [part=\"link\"]`,\n            );\n            firstSub?.focus();\n          });\n        } else {\n          const next = itemsArr[index + 1] ?? itemsArr[0];\n          next?.focus();\n        }\n        break;\n      }\n      case 'ArrowLeft':\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prev = itemsArr[index - 1] ?? itemsArr[itemsArr.length - 1];\n        prev?.focus();\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        itemsArr[0]?.focus();\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        itemsArr[itemsArr.length - 1]?.focus();\n        break;\n      }\n      case 'Escape': {\n        this._expandedIndex = null;\n        current?.focus();\n        break;\n      }\n      case 'Enter':\n      case ' ': {\n        if (item.children?.length) {\n          e.preventDefault();\n          const wasExpanded = this._expandedIndex === index;\n          this._expandedIndex = wasExpanded ? null : index;\n          if (!wasExpanded) {\n            void this.updateComplete.then(() => {\n              const firstSub = this.shadowRoot?.querySelector<HTMLElement>(\n                `.nav__submenu:not([hidden]) [part=\"link\"]`,\n              );\n              firstSub?.focus();\n            });\n          }\n        }\n        break;\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleSubKeydown(e: KeyboardEvent, parentIndex: number): void {\n    const subItems = this.shadowRoot?.querySelectorAll<HTMLElement>(\n      `.nav__submenu:not([hidden]) [part=\"link\"]`,\n    );\n    if (!subItems) return;\n    const arr = Array.from(subItems);\n    const focused = (e.currentTarget ?? e.target) as HTMLElement;\n    const currentIdx = arr.indexOf(focused);\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const next = arr[currentIdx + 1] ?? arr[0];\n        next?.focus();\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prev = arr[currentIdx - 1] ?? arr[arr.length - 1];\n        prev?.focus();\n        break;\n      }\n      case 'Escape': {\n        e.preventDefault();\n        this._expandedIndex = null;\n        const parentLinks = this.shadowRoot?.querySelectorAll<HTMLElement>(\n          '[part=\"list\"] > [part=\"item\"] > [part=\"link\"]',\n        );\n        parentLinks?.[parentIndex]?.focus();\n        break;\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleOutsideClick(e: MouseEvent): void {\n    const path = e.composedPath();\n    if (!path.includes(this)) {\n      this._expandedIndex = null;\n    }\n  }\n\n  /**\n   * hx-nav-008: Close expanded submenu when focus moves outside the component.\n   * @internal\n   */\n  private _handleFocusout(e: FocusEvent): void {\n    const relatedTarget = e.relatedTarget as Node | null;\n    if (relatedTarget && this.contains(relatedTarget)) return;\n    if (relatedTarget && this.shadowRoot?.contains(relatedTarget)) return;\n    this._expandedIndex = null;\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (typeof document !== 'undefined') {\n      document.addEventListener('click', this._boundOutsideClick);\n    }\n    this.addEventListener('focusout', this._boundFocusout);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._boundOutsideClick);\n    this.removeEventListener('focusout', this._boundFocusout);\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderHamburgerIcon() {\n    return html`<hx-icon\n      class=\"nav__hamburger-glyph\"\n      library=\"helix\"\n      name=${this._mobileOpen ? 'close' : 'menu'}\n      aria-hidden=\"true\"\n    ></hx-icon>`;\n  }\n\n  /** @internal */\n  private _renderChevronIcon() {\n    return html`<hx-icon\n      class=\"nav__chevron\"\n      library=\"helix\"\n      name=\"chevron-down\"\n      aria-hidden=\"true\"\n    ></hx-icon>`;\n  }\n\n  /** @internal */\n  private _renderSubMenu(children: NavItem[], parentIndex: number, parentLabel: string) {\n    const isExpanded = this._expandedIndex === parentIndex;\n    return html`\n      <ul class=\"nav__submenu\" aria-label=\"${parentLabel} submenu\" ?hidden=${!isExpanded}>\n        ${children.map(\n          (child) => html`\n            <li class=\"nav__submenu-item\">\n              <a\n                part=\"link\"\n                href=${this._sanitizeHref(child.href)}\n                class=${classMap({\n                  nav__link: true,\n                  'nav__link--active': !!child.current,\n                })}\n                aria-current=${child.current ? 'page' : nothing}\n                @click=${(e: Event) => this._handleSubItemClick(child, e)}\n                @keydown=${(e: KeyboardEvent) => this._handleSubKeydown(e, parentIndex)}\n              >\n                ${child.label}\n              </a>\n            </li>\n          `,\n        )}\n      </ul>\n    `;\n  }\n\n  /** @internal */\n  private _renderItem(item: NavItem, index: number) {\n    const hasChildren = !!item.children?.length;\n    const isExpanded = this._expandedIndex === index;\n    const hasCurrentChild = hasChildren && !!item.children?.some((child) => child.current);\n\n    const linkClasses = {\n      nav__link: true,\n      'nav__link--active': !!item.current || hasCurrentChild,\n      'nav__link--has-submenu': hasChildren,\n      'nav__link--expanded': isExpanded,\n    };\n\n    const content = hasChildren\n      ? html`\n          <button\n            part=\"link\"\n            class=${classMap(linkClasses)}\n            aria-expanded=${isExpanded ? 'true' : 'false'}\n            aria-current=${hasCurrentChild ? 'true' : nothing}\n            @click=${(e: Event) => this._handleItemClick(item, index, e)}\n            @keydown=${(e: KeyboardEvent) => this._handleKeydown(e, index, item)}\n          >\n            ${item.label} ${this._renderChevronIcon()}\n          </button>\n          ${this._renderSubMenu(item.children ?? [], index, item.label)}\n        `\n      : html`\n          <a\n            part=\"link\"\n            href=${this._sanitizeHref(item.href)}\n            class=${classMap(linkClasses)}\n            aria-current=${item.current ? 'page' : nothing}\n            @click=${(e: Event) => this._handleItemClick(item, index, e)}\n            @keydown=${(e: KeyboardEvent) => this._handleKeydown(e, index, item)}\n          >\n            ${item.label}\n          </a>\n        `;\n\n    return html` <li part=\"item\" class=\"nav__item\">${content}</li> `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const listClasses = {\n      nav__list: true,\n      'nav__list--open': this._mobileOpen,\n    };\n\n    return html`\n      <nav part=\"nav\" aria-label=${this.label}>\n        <button\n          part=\"toggle\"\n          class=\"nav__toggle\"\n          aria-expanded=${this._mobileOpen ? 'true' : 'false'}\n          aria-controls=\"nav-list\"\n          aria-label=${this._mobileOpen ? this.labelCloseMenu : this.labelOpenMenu}\n          @click=${this._handleToggle}\n        >\n          ${this._renderHamburgerIcon()}\n        </button>\n\n        <ul part=\"list\" id=\"nav-list\" class=${classMap(listClasses)} role=\"list\">\n          ${repeat(\n            this.items,\n            (_item, i) => i,\n            (item, i) => this._renderItem(item, i),\n          )}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\n/** Canonical type alias for the hx-nav component. */\nexport type HxNav = HelixNav;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-nav': HelixNav;\n  }\n}\n"],"names":["helixNavStyles","css","HelixNav","HelixElement","href","url","item","index","e","_a","items","itemsArr","current","_b","firstSub","next","prev","_c","_d","_e","wasExpanded","parentIndex","subItems","arr","focused","currentIdx","parentLinks","relatedTarget","html","children","parentLabel","isExpanded","child","classMap","nothing","hasChildren","hasCurrentChild","linkClasses","content","listClasses","repeat","_item","i","forcedColorsInteractive","__decorateClass","property","value","parsed","state","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAiBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A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"}

package/dist/shared/{hx-nav-item-CODtUlew.js → hx-nav-item-CxE7Mp3M.js}

@@ -1,4 +1,4 @@
-import { css as A, html as h, nothing as c } from "lit";
+import { css as A, html as c, nothing as h } from "lit";
 import { property as p, customElement as T, state as $ } from "lit/decorators.js";
 import { H as I } from "./helix-element-BNEYeiys.js";
 import { c as E } from "./id-counter-DuX8vsui.js";
@@ -100,8 +100,15 @@ const S = A`
     display: flex;
     align-items: center;
     justify-content: center;
+    /* Visual icon area stays 2rem (32px) — preserves the side-nav header
+       silhouette while the wrapping touch target grows to 44×44 to meet
+       WCAG 2.5.5 (Enhanced) AAA. min-width/min-height own the hit area;
+       width/height drive the visual painted area, but the button's
+       intrinsic size always matches the hit-area floor. */
     width: var(--hx-space-8, 2rem);
     height: var(--hx-space-8, 2rem);
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     margin-inline-start: auto;
     flex-shrink: 0;
     padding: 0;
@@ -147,15 +154,13 @@ const S = A`
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
-  .side-nav__toggle svg {
-    width: var(--hx-space-5, 1.25rem);
-    height: var(--hx-space-5, 1.25rem);
-    fill: currentColor;
+  .side-nav__toggle .side-nav__toggle-glyph {
+    --hx-icon-size: var(--hx-space-5, 1.25rem);
     flex-shrink: 0;
     transition: transform var(--hx-transition-normal, 300ms) ease;
   }
 
-  :host([collapsed]) .side-nav__toggle svg {
+  :host([collapsed]) .side-nav__toggle .side-nav__toggle-glyph {
     transform: rotate(180deg);
   }
 
@@ -252,9 +257,9 @@ let x = class extends I {
    */
   /** @internal */
   _handleKeydown(e) {
-    var _, y, w, k, C;
+    var b, y, w, k, C;
     if (!["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Home", "End"].includes(e.key)) return;
-    const a = (_ = this.shadowRoot) == null ? void 0 : _.querySelector("slot:not([name])");
+    const a = (b = this.shadowRoot) == null ? void 0 : b.querySelector("slot:not([name])");
     if (!a) return;
     const i = a.assignedElements({ flatten: !0 }).filter(
       (r) => r.tagName.toLowerCase() === "hx-nav-item" && !r.hasAttribute("disabled")
@@ -311,8 +316,8 @@ let x = class extends I {
     e.preventDefault();
     let f;
     e.key === "ArrowDown" ? f = n < t.length - 1 ? n + 1 : 0 : e.key === "ArrowUp" ? f = n > 0 ? n - 1 : t.length - 1 : e.key === "Home" ? f = 0 : f = t.length - 1;
-    const b = t[f];
-    b && b.focus();
+    const _ = t[f];
+    _ && _.focus();
   }
   // ─── Event Handling ───
   /** @internal */
@@ -334,14 +339,15 @@ let x = class extends I {
   // ─── Render ───
   /** @internal */
   _renderToggleIcon() {
-    return h`<svg viewBox="0 0 20 20" aria-hidden="true">
-      <path
-        d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-      />
-    </svg>`;
+    return c`<hx-icon
+      class="side-nav__toggle-glyph"
+      library="helix"
+      name="chevron-left"
+      aria-hidden="true"
+    ></hx-icon>`;
   }
   render() {
-    return h`
+    return c`
       <nav part="nav" class="side-nav" aria-label=${this.label}>
         <div part="header" class="side-nav__header">
           <slot name="header"></slot>
@@ -530,10 +536,8 @@ const D = A`
     transition: transform var(--hx-transition-normal, 300ms) ease;
   }
 
-  .nav-item__arrow svg {
-    width: var(--hx-space-4, 1rem);
-    height: var(--hx-space-4, 1rem);
-    fill: currentColor;
+  .nav-item__arrow .nav-item__arrow-glyph {
+    --hx-icon-size: var(--hx-space-4, 1rem);
   }
 
   :host([expanded]) .nav-item__arrow {
@@ -688,10 +692,10 @@ var N = Object.defineProperty, j = Object.getOwnPropertyDescriptor, v = (e, o, a
     (n = e[l]) && (t = (i ? n(o, a, t) : n(t)) || t);
   return i && t && N(o, a, t), t;
 };
-const L = E("hx-nav-item");
+const O = E("hx-nav-item");
 let d = class extends I {
   constructor() {
-    super(...arguments), this._tooltipId = `${L()}-tooltip`, this.href = "", this.active = !1, this.expanded = !1, this.disabled = !1, this._hasChildren = !1, this._isCollapsed = !1;
+    super(...arguments), this._tooltipId = `${O()}-tooltip`, this.href = "", this.active = !1, this.expanded = !1, this.disabled = !1, this._hasChildren = !1, this._isCollapsed = !1;
   }
   // ─── Attribute Observer ───
   static get observedAttributes() {
@@ -732,17 +736,18 @@ let d = class extends I {
   }
   /** @internal */
   _renderExpandArrow() {
-    return h`<span class="nav-item__arrow" aria-hidden="true">
-      <svg viewBox="0 0 20 20">
-        <path
-          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-        />
-      </svg>
+    return c`<span class="nav-item__arrow" aria-hidden="true">
+      <hx-icon
+        class="nav-item__arrow-glyph"
+        library="helix"
+        name="chevron-right"
+        aria-hidden="true"
+      ></hx-icon>
     </span>`;
   }
   // ─── Render ───
   render() {
-    const e = this._getDirectText(), o = h`
+    const e = this._getDirectText(), o = c`
       <span part="icon" class="nav-item__icon">
         <slot name="icon"></slot>
       </span>
@@ -752,30 +757,30 @@ let d = class extends I {
       <span part="badge" class="nav-item__badge">
         <slot name="badge"></slot>
       </span>
-      ${this._hasChildren ? this._renderExpandArrow() : c}
-      ${this._isCollapsed ? h`<span id=${this._tooltipId} class="nav-item__tooltip" role="tooltip">${e}</span>` : c}
-    `, a = this.href && !this._hasChildren ? h`<a
+      ${this._hasChildren ? this._renderExpandArrow() : h}
+      ${this._isCollapsed ? c`<span id=${this._tooltipId} class="nav-item__tooltip" role="tooltip">${e}</span>` : h}
+    `, a = this.href && !this._hasChildren ? c`<a
             part="link"
             class="nav-item__link"
             href=${this.href}
-            aria-current=${this.active ? "page" : c}
-            aria-disabled=${this.disabled ? "true" : c}
-            aria-describedby=${this._isCollapsed ? this._tooltipId : c}
+            aria-current=${this.active ? "page" : h}
+            aria-disabled=${this.disabled ? "true" : h}
+            aria-describedby=${this._isCollapsed ? this._tooltipId : h}
             tabindex=${this.disabled ? "-1" : "0"}
           >
             ${o}
-          </a>` : h`<button
+          </a>` : c`<button
             part="link"
             class="nav-item__link"
-            aria-disabled=${this.disabled ? "true" : c}
-            aria-expanded=${this._hasChildren ? String(this.expanded) : c}
-            aria-describedby=${this._isCollapsed ? this._tooltipId : c}
+            aria-disabled=${this.disabled ? "true" : h}
+            aria-expanded=${this._hasChildren ? String(this.expanded) : h}
+            aria-describedby=${this._isCollapsed ? this._tooltipId : h}
             tabindex=${this.disabled ? "-1" : "0"}
             @click=${this._handleToggle}
           >
             ${o}
           </button>`;
-    return h`
+    return c`
       <div class="nav-item">
         ${a}
         <div part="children" class="nav-item__children" role="group">
@@ -813,4 +818,4 @@ export {
   d as H,
   x as a
 };
-//# sourceMappingURL=hx-nav-item-CODtUlew.js.map
+//# sourceMappingURL=hx-nav-item-CxE7Mp3M.js.map

package/dist/shared/hx-nav-item-CxE7Mp3M.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-nav-item-CxE7Mp3M.js","sources":["../../src/components/hx-side-nav/hx-side-nav.styles.ts","../../src/components/hx-side-nav/hx-side-nav.ts","../../src/components/hx-side-nav/hx-nav-item.styles.ts","../../src/components/hx-side-nav/hx-nav-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSideNavStyles = css`\n  :host {\n    display: block;\n    height: 100%;\n    /* Mirror the nav background and text on the host so slotted light-DOM\n       content (header, footer slots) inherits the correct dark surface color.\n       Without this, axe-core cannot resolve the background for slotted nodes\n       and evaluates their text against the page white background, producing\n       false-positive color-contrast violations (WCAG 2.1 AA). */\n    background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0d1825));\n    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ffffff));\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Nav Container ─── */\n\n  .side-nav {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: var(--hx-side-nav-width, 16rem);\n    background-color: var(--hx-side-nav-bg, var(--hx-color-surface-inverse, #0d1825));\n    color: var(--hx-side-nav-color, var(--hx-color-text-inverse, #ffffff));\n    transition: width var(--hx-transition-normal, 300ms) ease;\n    overflow: hidden;\n    border-inline-end: var(--hx-border-width-thin, 1px) solid\n      var(\n        --hx-side-nav-border-color,\n        var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))\n      );\n  }\n\n  /* ─── Collapsed State ─── */\n\n  :host([collapsed]) .side-nav {\n    width: var(--hx-side-nav-collapsed-width, 3.5rem);\n  }\n\n  /* ─── Header ─── */\n\n  .side-nav__header {\n    display: flex;\n    align-items: center;\n    padding: var(--hx-side-nav-header-padding, var(--hx-space-4, 1rem));\n    flex-shrink: 0;\n    min-height: var(--hx-space-14, 3.5rem);\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(\n        --hx-side-nav-border-color,\n        var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))\n      );\n    overflow: hidden;\n  }\n\n  :host([collapsed]) .side-nav__header {\n    justify-content: center;\n    padding: var(--hx-space-3, 0.75rem);\n  }\n\n  /* ─── Body ─── */\n\n  .side-nav__body {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: var(--hx-space-2, 0.5rem) 0;\n  }\n\n  /* ─── Footer ─── */\n\n  .side-nav__footer {\n    display: flex;\n    align-items: center;\n    padding: var(--hx-side-nav-footer-padding, var(--hx-space-4, 1rem));\n    flex-shrink: 0;\n    min-height: var(--hx-space-14, 3.5rem);\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(\n        --hx-side-nav-border-color,\n        var(--hx-color-border-on-dark-strong, rgba(255, 255, 255, 0.7))\n      );\n    overflow: hidden;\n  }\n\n  :host([collapsed]) .side-nav__footer {\n    justify-content: center;\n    padding: var(--hx-space-3, 0.75rem);\n  }\n\n  /* ─── Toggle Button ─── */\n\n  .side-nav__toggle {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /* Visual icon area stays 2rem (32px) — preserves the side-nav header\n       silhouette while the wrapping touch target grows to 44×44 to meet\n       WCAG 2.5.5 (Enhanced) AAA. min-width/min-height own the hit area;\n       width/height drive the visual painted area, but the button's\n       intrinsic size always matches the hit-area floor. */\n    width: var(--hx-space-8, 2rem);\n    height: var(--hx-space-8, 2rem);\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    margin-inline-start: auto;\n    flex-shrink: 0;\n    padding: 0;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: var(--hx-side-nav-toggle-color, var(--hx-color-text-inverse, #ffffff));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms) ease,\n      color var(--hx-transition-fast, 150ms) ease;\n  }\n\n  .side-nav__toggle:hover {\n    /* Read both deprecated --hx-color-border-on-dark-subtle (3.2.0/3.2.1 API)\n       and canonical --hx-color-surface-on-dark-overlay-subtle so consumer\n       overrides on either name reach paint. Deprecated removal: 4.0.0.\n       Hex fallback for browsers without color-mix(). */\n    background-color: var(\n      --hx-color-border-on-dark-subtle,\n      var(--hx-color-surface-on-dark-overlay-subtle, rgba(255, 255, 255, 0.1))\n    );\n    color: var(--hx-side-nav-toggle-hover-color, var(--hx-color-text-inverse, #ffffff));\n  }\n\n  @supports (color: color-mix(in srgb, red 50%, blue)) {\n    /* Fold color-mix() into the same deprecated-first chain so consumer\n       overrides on either token reach paint on the modern path too. */\n    .side-nav__toggle:hover {\n      background-color: var(\n        --hx-color-border-on-dark-subtle,\n        var(\n          --hx-color-surface-on-dark-overlay-subtle,\n          color-mix(in srgb, currentColor 15%, transparent)\n        )\n      );\n    }\n  }\n\n  .side-nav__toggle:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-side-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .side-nav__toggle .side-nav__toggle-glyph {\n    --hx-icon-size: var(--hx-space-5, 1.25rem);\n    flex-shrink: 0;\n    transition: transform var(--hx-transition-normal, 300ms) ease;\n  }\n\n  :host([collapsed]) .side-nav__toggle .side-nav__toggle-glyph {\n    transform: rotate(180deg);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .side-nav {\n      transition: none;\n    }\n\n    .side-nav__toggle {\n      transition: none;\n    }\n\n    .side-nav__toggle svg {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .side-nav {\n      border-inline-end-color: CanvasText;\n    }\n\n    .side-nav__header {\n      border-bottom-color: CanvasText;\n    }\n\n    .side-nav__footer {\n      border-top-color: CanvasText;\n    }\n\n    .side-nav__toggle {\n      forced-color-adjust: none;\n      background-color: ButtonFace;\n      color: ButtonText;\n      border: 1px solid ButtonText;\n    }\n\n    .side-nav__toggle:hover {\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n    }\n\n    .side-nav__toggle:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n  }\n`;\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../hx-icon/hx-icon.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixSideNavStyles } from './hx-side-nav.styles.js';\n\n/**\n * A collapsible left-side navigation panel with nested menu item support.\n * Designed for clinical portals, admin dashboards, and department navigation.\n *\n * @summary Collapsible side navigation panel for enterprise healthcare applications.\n *\n * @tag hx-side-nav\n *\n * @slot - Default slot for hx-nav-item children.\n * @slot header - Logo or branding content.\n * @slot footer - User profile or settings content.\n *\n * @fires {CustomEvent<{ collapsed: boolean }>} hx-collapse - Dispatched when the nav collapses to icon-only mode.\n * @fires {CustomEvent<{ collapsed: boolean }>} hx-expand - Dispatched when the nav expands to full width.\n *\n * @csspart nav - The outer nav element.\n * @csspart header - The header section.\n * @csspart body - The scrollable body section.\n * @csspart footer - The footer section.\n * @csspart toggle - The collapse/expand toggle button.\n *\n * @cssprop [--hx-side-nav-width=16rem] - Full expanded width.\n * @cssprop [--hx-side-nav-collapsed-width=3.5rem] - Collapsed icon-only width.\n * @cssprop [--hx-side-nav-bg=var(--hx-color-surface-inverse)] - Background color.\n * @cssprop [--hx-side-nav-color=var(--hx-color-text-inverse)] - Text color.\n * @cssprop [--hx-side-nav-border-color=var(--hx-color-border-on-dark-strong)] - Border color (against the dark surface-inverse host bg).\n * @cssprop [--hx-side-nav-header-padding=var(--hx-space-4)] - Header padding.\n * @cssprop [--hx-side-nav-footer-padding=var(--hx-space-4)] - Footer padding.\n * @cssprop [--hx-side-nav-toggle-color=var(--hx-color-text-inverse)] - Toggle button icon color (resting).\n * @cssprop [--hx-side-nav-toggle-hover-color=var(--hx-color-text-inverse)] - Toggle button icon color on hover.\n * @cssprop [--hx-color-surface-inverse] - Side-nav surface fill (resolves to neutral-900 light, near-black dark).\n * @cssprop [--hx-color-text-inverse] - Side-nav text color (resolves to neutral-0).\n * @cssprop [--hx-color-border-on-dark-strong] - Container/header/footer divider border (overlay-white-70 light, overlay-black-50 dark — sized for visibility on the mode-flipped surface-inverse).\n * @cssprop [--hx-color-surface-on-dark-overlay-subtle] - Toggle button hover surface (overlay-white-10 primitive — translucent fill, not a border).\n * @cssprop [--hx-color-border-on-dark-subtle] - DEPRECATED 3.2.2; renamed to --hx-color-surface-on-dark-overlay-subtle (the value paints a translucent fill, not a border). Toggle-hover rule reads both names via deprecated-first fallback so existing overrides keep working until removal in 4.0.0.\n * @aaa-certified 2026-05-08\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-side-nav/AAA-AUDIT.md\n * @keyboard-contract navigate=Arrow,Home,End; activate=Enter,Space\n * @aria-pattern navigation\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/navigation.html\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated false\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-side-nav\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n */\n@customElement('hx-side-nav')\nexport class HelixSideNav extends HelixElement {\n  // 3.2.1: forced-colors deference is owned by the bespoke @media block in\n  // hx-side-nav.styles.ts (toggle button, header/footer borders). Do NOT also\n  // compose forcedColorsInteractive — XOR rule per the mixin docstring.\n  static override styles = [helixSideNavStyles];\n\n  // ─── Properties ───\n\n  /**\n   * When true, the nav collapses to show icons only.\n   * @attr collapsed\n   */\n  @property({ type: Boolean, reflect: true })\n  collapsed = false;\n\n  /**\n   * The accessible label for the nav landmark.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Main Navigation';\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('collapsed')) {\n      this._propagateCollapsedToChildren();\n    }\n  }\n\n  // ─── Collapsed State Propagation ───\n\n  /**\n   * Propagates the collapsed state to all slotted hx-nav-item children by\n   * setting or removing the `data-collapsed` attribute. This allows child\n   * items to respond to collapsed mode via their CSS selectors.\n   */\n  /** @internal */\n  private _propagateCollapsedToChildren(): void {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (!slot) return;\n\n    const navItems = slot\n      .assignedElements({ flatten: true })\n      .filter((el) => el.tagName.toLowerCase() === 'hx-nav-item');\n\n    for (const item of navItems) {\n      if (!(item instanceof HTMLElement)) continue;\n      if (this.collapsed) {\n        item.setAttribute('data-collapsed', '');\n      } else {\n        item.removeAttribute('data-collapsed');\n      }\n    }\n  }\n\n  /**\n   * Handles the default slot's slotchange event so that if items are added\n   * after initial render, they immediately receive the correct collapsed state.\n   */\n  /** @internal */\n  private _onDefaultSlotChange(): void {\n    this._propagateCollapsedToChildren();\n  }\n\n  // ─── Keyboard Navigation ───\n\n  /**\n   * Implements roving tabindex-style ArrowUp/ArrowDown keyboard navigation\n   * among direct hx-nav-item children in the body slot. Disabled items are\n   * skipped. Focus is applied to the interactive element inside the shadow DOM\n   * of each item (anchor or button with part=\"link\").\n   */\n  /** @internal */\n  private _handleKeydown(e: KeyboardEvent): void {\n    const validKeys = ['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Home', 'End'];\n    if (!validKeys.includes(e.key)) return;\n\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (!slot) return;\n\n    const topLevelItems = slot\n      .assignedElements({ flatten: true })\n      .filter(\n        (el): el is HTMLElement =>\n          el.tagName.toLowerCase() === 'hx-nav-item' && !el.hasAttribute('disabled'),\n      );\n\n    if (topLevelItems.length === 0) return;\n\n    // Build a flattened list of navigable items: direct children plus visible\n    // child items from expanded parent items (per ARIA APG tree pattern).\n    const navItems: HTMLElement[] = [];\n    for (const item of topLevelItems) {\n      navItems.push(item);\n      // If this item is expanded, include its non-disabled children\n      if (item.hasAttribute('expanded')) {\n        const childrenSlot =\n          item.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"children\"]');\n        if (childrenSlot) {\n          const childItems = childrenSlot\n            .assignedElements({ flatten: true })\n            .filter(\n              (el): el is HTMLElement =>\n                el.tagName.toLowerCase() === 'hx-nav-item' && !el.hasAttribute('disabled'),\n            );\n          navItems.push(...childItems);\n        }\n      }\n    }\n\n    if (navItems.length === 0) return;\n\n    // Find which item currently contains focus\n    const activeEl = document.activeElement;\n    let currentIndex = -1;\n    for (let i = 0; i < navItems.length; i++) {\n      const item = navItems[i];\n      if (!item) continue;\n      if (\n        item === activeEl ||\n        item.contains(activeEl) ||\n        item.shadowRoot?.contains(activeEl) === true\n      ) {\n        currentIndex = i;\n        break;\n      }\n    }\n\n    // Handle ArrowRight/ArrowLeft for expand/collapse (ARIA APG tree pattern)\n    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {\n      e.preventDefault();\n      const currentItem = currentIndex >= 0 ? navItems[currentIndex] : null;\n      if (!currentItem) return;\n\n      if (e.key === 'ArrowRight') {\n        // If the item has children and is collapsed, expand it\n        if (\n          currentItem.hasAttribute('expanded') === false &&\n          currentItem.querySelector('[slot=\"children\"]')\n        ) {\n          currentItem.setAttribute('expanded', '');\n          (currentItem as HTMLElement & { expanded?: boolean }).expanded = true;\n        } else if (currentItem.hasAttribute('expanded')) {\n          // Already expanded: move focus to first child item\n          const childrenSlot =\n            currentItem.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"children\"]');\n          if (childrenSlot) {\n            const firstChild = childrenSlot\n              .assignedElements({ flatten: true })\n              .find(\n                (el): el is HTMLElement =>\n                  el.tagName.toLowerCase() === 'hx-nav-item' && !el.hasAttribute('disabled'),\n              );\n            if (firstChild) {\n              firstChild.focus();\n              return;\n            }\n          }\n        }\n      } else {\n        // ArrowLeft: if expanded, collapse; if collapsed or non-expandable, find parent\n        if (currentItem.hasAttribute('expanded')) {\n          currentItem.removeAttribute('expanded');\n          (currentItem as HTMLElement & { expanded?: boolean }).expanded = false;\n        } else {\n          // Move focus to parent item if this item is a child in another item's slot\n          const parentNavItem =\n            currentItem.closest<HTMLElement>('hx-nav-item:not(:scope)') ??\n            currentItem.parentElement?.closest<HTMLElement>('hx-nav-item') ??\n            null;\n          if (parentNavItem && !parentNavItem.hasAttribute('disabled')) {\n            parentNavItem.focus();\n          }\n        }\n      }\n      return;\n    }\n\n    e.preventDefault();\n\n    let nextIndex: number;\n    if (e.key === 'ArrowDown') {\n      nextIndex = currentIndex < navItems.length - 1 ? currentIndex + 1 : 0;\n    } else if (e.key === 'ArrowUp') {\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : navItems.length - 1;\n    } else if (e.key === 'Home') {\n      nextIndex = 0;\n    } else {\n      nextIndex = navItems.length - 1;\n    }\n\n    const targetItem = navItems[nextIndex];\n    if (!targetItem) return;\n    // WCAG 2.1.1: call the public focus() method on the nav item rather than\n    // piercing its Shadow DOM directly. hx-nav-item.focus() delegates to the\n    // internal [part=\"link\"] element, preserving shadow encapsulation.\n    targetItem.focus();\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleToggle(): void {\n    this.collapsed = !this.collapsed;\n\n    if (this.collapsed) {\n      /**\n       * Dispatched when the nav collapses to icon-only mode.\n       * @event hx-collapse\n       */\n      this.dispatchEvent(\n        new CustomEvent<{ collapsed: boolean }>('hx-collapse', {\n          bubbles: true,\n          composed: true,\n          detail: { collapsed: true },\n        }),\n      );\n    } else {\n      /**\n       * Dispatched when the nav expands to full width.\n       * @event hx-expand\n       */\n      this.dispatchEvent(\n        new CustomEvent<{ collapsed: boolean }>('hx-expand', {\n          bubbles: true,\n          composed: true,\n          detail: { collapsed: false },\n        }),\n      );\n    }\n  }\n\n  // ─── Render ───\n\n  /** @internal */\n  private _renderToggleIcon() {\n    return html`<hx-icon\n      class=\"side-nav__toggle-glyph\"\n      library=\"helix\"\n      name=\"chevron-left\"\n      aria-hidden=\"true\"\n    ></hx-icon>`;\n  }\n\n  override render() {\n    return html`\n      <nav part=\"nav\" class=\"side-nav\" aria-label=${this.label}>\n        <div part=\"header\" class=\"side-nav__header\">\n          <slot name=\"header\"></slot>\n          <button\n            part=\"toggle\"\n            class=\"side-nav__toggle\"\n            aria-label=${this.collapsed ? 'Expand navigation' : 'Collapse navigation'}\n            aria-expanded=${!this.collapsed}\n            @click=${this._handleToggle}\n          >\n            ${this._renderToggleIcon()}\n          </button>\n        </div>\n\n        <div part=\"body\" class=\"side-nav__body\" id=\"side-nav-body\" @keydown=${this._handleKeydown}>\n          <slot @slotchange=${this._onDefaultSlotChange}></slot>\n        </div>\n\n        <div part=\"footer\" class=\"side-nav__footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n      </nav>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-side-nav': HelixSideNav;\n  }\n}\n\nexport type { HelixSideNav as HxSideNav };\n","import { css } from 'lit';\n\nexport const helixNavItemStyles = css`\n  :host {\n    display: block;\n    /* The host background must be a concrete color so that axe-core can\n       resolve text contrast ratios for shadow-DOM content correctly.\n       surface-inverse + text-inverse flip per mode: dark-on-light in dark\n       mode, light-on-dark in light mode. */\n    background-color: var(--hx-nav-item-host-bg, var(--hx-color-surface-inverse, #0d1825));\n    color: var(--hx-nav-item-color, var(--hx-color-text-inverse, #ffffff));\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Nav Item ─── */\n\n  .nav-item {\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* ─── Link / Button ─── */\n\n  .nav-item__link {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-3, 0.75rem);\n    padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));\n    min-height: var(--hx-space-10, 2.5rem);\n    text-decoration: none;\n    color: var(--hx-nav-item-color, var(--hx-color-text-inverse, #ffffff));\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    margin: 0 var(--hx-space-2, 0.5rem);\n    transition:\n      background-color var(--hx-transition-fast, 150ms) ease,\n      color var(--hx-transition-fast, 150ms) ease;\n    white-space: nowrap;\n    overflow: hidden;\n    cursor: pointer;\n    font-family: var(--hx-nav-item-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    line-height: var(--hx-line-height-normal, 1.5);\n    position: relative;\n    border: none;\n    background: transparent;\n    width: calc(100% - var(--hx-space-4, 1rem));\n    text-align: start;\n  }\n\n  /* Link variant */\n  a.nav-item__link {\n    display: flex;\n  }\n\n  .nav-item__link:hover {\n    background-color: var(\n      --hx-nav-item-hover-bg,\n      var(--hx-overlay-white-8, rgba(255, 255, 255, 0.08))\n    ); /* fallback for browsers without color-mix() */\n    color: var(--hx-nav-item-hover-color, var(--hx-color-text-inverse, #ffffff));\n  }\n\n  @supports (color: color-mix(in srgb, red 50%, blue)) {\n    .nav-item__link:hover {\n      background-color: var(\n        --hx-nav-item-hover-bg,\n        color-mix(in srgb, currentColor 10%, transparent)\n      );\n    }\n  }\n\n  .nav-item__link:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-nav-item-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Active State ─── */\n\n  :host([active]) .nav-item__link {\n    /* Active state sits on the darker primary-600 (#0F7078) fill. White text\n       (#ffffff) on primary-600 = 5.82:1 WCAG AA pass. text-on-primary now\n       resolves to neutral-900 (intended for the lighter primary-500 surface)\n       which would fail here. text.on-primary-strong holds at neutral-0 across\n       modes (no dark flip) so the active fg stays AA. 3.2.1: routed through\n       the action.* / on-{role}-strong semantic tier per token-cascade\n       remediation (no more bare primary-600 / neutral-0 consumption). */\n    background-color: var(\n      --hx-nav-item-active-bg,\n      var(--hx-color-action-primary-bg-hover, #0f7078)\n    );\n    color: var(--hx-nav-item-active-color, var(--hx-color-text-on-primary-strong, #ffffff));\n  }\n\n  :host([active]) .nav-item__link:hover {\n    /* text.on-primary-strong (#ffffff) on primary-700 (#0F6363) = WCAG AA ✓ */\n    background-color: var(\n      --hx-nav-item-active-hover-bg,\n      var(--hx-color-action-primary-bg-active, #0f6363)\n    );\n  }\n\n  /* ─── Disabled State ─── */\n\n  :host([disabled]) .nav-item__link {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  /* ─── Icon ─── */\n\n  .nav-item__icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--hx-space-5, 1.25rem);\n    height: var(--hx-space-5, 1.25rem);\n  }\n\n  /* ─── Label ─── */\n\n  .nav-item__label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transition: opacity var(--hx-transition-fast, 150ms) ease;\n  }\n\n  /* ─── Badge ─── */\n\n  .nav-item__badge {\n    margin-inline-start: auto;\n    flex-shrink: 0;\n  }\n\n  /* ─── Expand Arrow ─── */\n\n  .nav-item__arrow {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin-inline-start: auto;\n    width: var(--hx-space-5, 1.25rem);\n    height: var(--hx-space-5, 1.25rem);\n    transition: transform var(--hx-transition-normal, 300ms) ease;\n  }\n\n  .nav-item__arrow .nav-item__arrow-glyph {\n    --hx-icon-size: var(--hx-space-4, 1rem);\n  }\n\n  :host([expanded]) .nav-item__arrow {\n    transform: rotate(90deg);\n  }\n\n  /* ─── Children (sub-nav) ─── */\n\n  .nav-item__children {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows var(--hx-transition-normal, 300ms ease);\n    overflow: hidden;\n  }\n\n  :host([expanded]) .nav-item__children {\n    grid-template-rows: 1fr;\n  }\n\n  .nav-item__children-inner {\n    overflow: hidden;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    padding-inline-start: var(--hx-space-6, 1.5rem);\n  }\n\n  /* ─── Tooltip (collapsed mode) ─── */\n\n  .nav-item__tooltip {\n    position: absolute;\n    left: calc(100% + var(--hx-space-2, 0.5rem));\n    top: 50%;\n    transform: translateY(-50%);\n    /* tooltip is an inverted surface — flips per mode via surface-inverse /\n       text-inverse. 3.2.1: wrapped with component-tier slots so consumers can\n       theme tooltip surface/text without overriding the global semantics. */\n    background-color: var(--hx-nav-item-tooltip-bg, var(--hx-color-surface-inverse, #0d1825));\n    color: var(--hx-nav-item-tooltip-color, var(--hx-color-text-inverse, #ffffff));\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    white-space: nowrap;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity var(--hx-transition-fast, 150ms) ease;\n    z-index: var(--hx-z-index-tooltip, 1600);\n    box-shadow: var(--hx-shadow-md, 0 2px 8px rgb(0 0 0 / 0.2));\n  }\n\n  :host([data-collapsed]) .nav-item__link:hover .nav-item__tooltip,\n  :host([data-collapsed]) .nav-item__link:focus-visible .nav-item__tooltip {\n    opacity: 1;\n  }\n\n  /* ─── Collapsed host state (propagated from parent) ─── */\n\n  :host([data-collapsed]) .nav-item__label {\n    width: 0;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  :host([data-collapsed]) .nav-item__badge {\n    display: none;\n  }\n\n  :host([data-collapsed]) .nav-item__arrow {\n    display: none;\n  }\n\n  :host([data-collapsed]) .nav-item__children {\n    display: none !important;\n  }\n\n  :host([data-collapsed]) .nav-item__link {\n    justify-content: center;\n    margin: 0 var(--hx-space-1, 0.25rem);\n    width: calc(100% - var(--hx-space-2, 0.5rem));\n    padding: var(--hx-space-2, 0.5rem);\n    position: relative;\n    overflow: visible;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav-item__link,\n    .nav-item__label,\n    .nav-item__arrow,\n    .nav-item__children,\n    .nav-item__tooltip {\n      transition: none;\n    }\n\n    :host([expanded]) .nav-item__children {\n      grid-template-rows: 1fr;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    /*\n     * Bespoke block — sole owner of forced-colors deference for hx-nav-item\n     * (the forcedColorsInteractive mixin is intentionally NOT composed; XOR\n     * rule in styles/forced-colors.ts). Mirrors the mixin's interactive\n     * contract (ButtonFace / ButtonText / Highlight on hover, GrayText on\n     * disabled) for the .nav-item__link interactive surface, then layers the\n     * component-specific active-state border and tooltip border on top.\n     */\n    .nav-item__link {\n      forced-color-adjust: none;\n      background-color: ButtonFace;\n      color: ButtonText;\n      border: 1px solid ButtonText;\n    }\n\n    .nav-item__link:hover {\n      background-color: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n    }\n\n    /*\n     * Reset opacity on the SAME selector that sets it (.nav-item__link, line\n     * 109) — the original :host([disabled]) reset was scoped to the host and\n     * therefore had no effect on the link's 0.5 opacity. In forced-colors mode\n     * GrayText must render at full opacity to preserve the system contrast\n     * contract (WCAG 2.1 AA non-text contrast).\n     */\n    :host([disabled]) .nav-item__link {\n      opacity: 1;\n      color: GrayText;\n      border-color: GrayText;\n    }\n\n    :host([active]:not([disabled])) .nav-item__link {\n      border-color: Highlight;\n    }\n\n    .nav-item__link:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .nav-item__tooltip {\n      border: 1px solid CanvasText;\n    }\n  }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '../hx-icon/hx-icon.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixNavItemStyles } from './hx-nav-item.styles.js';\n\nconst _nextNavItemId = createIdCounter('hx-nav-item');\n\n/**\n * A navigation item for use inside hx-side-nav.\n * Supports icons, badges, sub-navigation, and active/disabled states.\n *\n * @summary Navigation item for hx-side-nav with support for icons, badges, and nested children.\n *\n * @tag hx-nav-item\n *\n * @slot - Default slot for item label text.\n * @slot icon - Icon to display before the label.\n * @slot badge - Badge content (e.g., notification count).\n * @slot children - Nested hx-nav-item children for sub-navigation.\n *\n * @csspart link - The anchor or button element.\n * @csspart icon - The icon container.\n * @csspart label - The label container.\n * @csspart badge - The badge container.\n * @csspart children - The children container.\n *\n * @cssprop [--hx-nav-item-color=var(--hx-color-text-inverse)] - Item text color.\n * @cssprop [--hx-nav-item-hover-bg] - Item hover background.\n * @cssprop [--hx-nav-item-hover-color=var(--hx-color-text-inverse)] - Item hover text color.\n * @cssprop [--hx-nav-item-active-bg=var(--hx-color-action-primary-bg-hover)] - Active item background.\n * @cssprop [--hx-nav-item-active-color=var(--hx-color-text-on-primary-strong)] - Active item text color.\n * @cssprop [--hx-nav-item-padding] - Item padding.\n * @cssprop [--hx-nav-item-host-bg=var(--hx-color-surface-inverse)] - Component host background color.\n * @cssprop [--hx-nav-item-tooltip-bg=var(--hx-color-surface-inverse)] - Tooltip background color (collapsed-rail tooltip).\n * @cssprop [--hx-nav-item-tooltip-color=var(--hx-color-text-inverse)] - Tooltip text color (collapsed-rail tooltip).\n */\n@customElement('hx-nav-item')\nexport class HelixNavItem extends HelixElement {\n  // 3.2.1: forced-colors deference is owned by the bespoke @media block in\n  // hx-nav-item.styles.ts (active border, focus outline, tooltip border).\n  // Do NOT also compose forcedColorsInteractive — XOR rule per the mixin\n  // docstring.\n  static override styles = [helixNavItemStyles];\n\n  /** @internal — per-instance tooltip ID */\n  private _tooltipId = `${_nextNavItemId()}-tooltip`;\n\n  // ─── Properties ───\n\n  /**\n   * The URL this nav item links to.\n   * @attr href\n   */\n  @property({ type: String })\n  href = '';\n\n  /**\n   * Whether this item is the current/active page.\n   * @attr active\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Whether the sub-navigation is expanded.\n   * @attr expanded\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Whether this nav item is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  // ─── State ───\n\n  /** Whether the children slot has assigned nodes. Updated via slotchange. */\n  /** @internal */\n  @state() private _hasChildren = false;\n\n  /** Whether this item is in collapsed mode. Set externally by hx-side-nav via data-collapsed attribute. */\n  /** @internal */\n  @state() private _isCollapsed = false;\n\n  // ─── Attribute Observer ───\n\n  static override get observedAttributes(): string[] {\n    return [...super.observedAttributes, 'data-collapsed'];\n  }\n\n  override attributeChangedCallback(name: string, old: string | null, value: string | null): void {\n    super.attributeChangedCallback(name, old, value);\n    if (name === 'data-collapsed') {\n      this._isCollapsed = value !== null;\n    }\n  }\n\n  // ─── Public API ───\n\n  /**\n   * Delegates focus to the internal link or button element (part=\"link\").\n   * Allows parent components to focus nav items without piercing the Shadow DOM.\n   * WCAG 2.1.1: keyboard navigation must not cross shadow boundaries via\n   * direct shadowRoot queries.\n   */\n  override focus(options?: FocusOptions): void {\n    const inner = this.shadowRoot?.querySelector<HTMLElement>('[part=\"link\"]');\n    if (inner) {\n      inner.focus(options);\n    } else {\n      super.focus(options);\n    }\n  }\n\n  // ─── Slot Change Handler ───\n\n  /** @internal */\n  private _onChildrenSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasChildren = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Private Helpers ───\n\n  /** @internal */\n  private _getDirectText(): string {\n    return Array.from(this.childNodes)\n      .filter((n) => n.nodeType === Node.TEXT_NODE)\n      .map((n) => n.textContent?.trim() ?? '')\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  /** @internal */\n  private _handleToggle(e: Event): void {\n    if (this.disabled) return;\n    e.preventDefault();\n    this.expanded = !this.expanded;\n  }\n\n  /** @internal */\n  private _renderExpandArrow() {\n    return html`<span class=\"nav-item__arrow\" aria-hidden=\"true\">\n      <hx-icon\n        class=\"nav-item__arrow-glyph\"\n        library=\"helix\"\n        name=\"chevron-right\"\n        aria-hidden=\"true\"\n      ></hx-icon>\n    </span>`;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const label = this._getDirectText();\n\n    const innerContent = html`\n      <span part=\"icon\" class=\"nav-item__icon\">\n        <slot name=\"icon\"></slot>\n      </span>\n      <span part=\"label\" class=\"nav-item__label\">\n        <slot></slot>\n      </span>\n      <span part=\"badge\" class=\"nav-item__badge\">\n        <slot name=\"badge\"></slot>\n      </span>\n      ${this._hasChildren ? this._renderExpandArrow() : nothing}\n      ${this._isCollapsed\n        ? html`<span id=${this._tooltipId} class=\"nav-item__tooltip\" role=\"tooltip\">${label}</span>`\n        : nothing}\n    `;\n\n    // Render as anchor when href provided and no expandable children\n    const linkEl =\n      this.href && !this._hasChildren\n        ? html`<a\n            part=\"link\"\n            class=\"nav-item__link\"\n            href=${this.href}\n            aria-current=${this.active ? 'page' : nothing}\n            aria-disabled=${this.disabled ? 'true' : nothing}\n            aria-describedby=${this._isCollapsed ? this._tooltipId : nothing}\n            tabindex=${this.disabled ? '-1' : '0'}\n          >\n            ${innerContent}\n          </a>`\n        : html`<button\n            part=\"link\"\n            class=\"nav-item__link\"\n            aria-disabled=${this.disabled ? 'true' : nothing}\n            aria-expanded=${this._hasChildren ? String(this.expanded) : nothing}\n            aria-describedby=${this._isCollapsed ? this._tooltipId : nothing}\n            tabindex=${this.disabled ? '-1' : '0'}\n            @click=${this._handleToggle}\n          >\n            ${innerContent}\n          </button>`;\n\n    return html`\n      <div class=\"nav-item\">\n        ${linkEl}\n        <div part=\"children\" class=\"nav-item__children\" role=\"group\">\n          <div class=\"nav-item__children-inner\">\n            <slot name=\"children\" @slotchange=${this._onChildrenSlotChange}></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-nav-item': HelixNavItem;\n  }\n}\n\nexport type { HelixNavItem as HxNavItem };\n"],"names":["helixSideNavStyles","css","HelixSideNav","HelixElement","changedProperties","slot","_a","navItems","el","item","topLevelItems","childrenSlot","_b","childItems","activeEl","currentIndex","i","_c","currentItem","_d","firstChild","parentNavItem","_e","nextIndex","targetItem","html","__decorateClass","property","customElement","helixNavItemStyles","_nextNavItemId","createIdCounter","HelixNavItem","name","old","value","options","inner","n","label","innerContent","nothing","linkEl","state"],"mappings":"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AA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}