@helixui/library 0.3.4 → 1.0.1

package/dist/shared/{hx-top-nav-8lDKNZUj.js.map → hx-top-nav-D2bQpns3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-top-nav-8lDKNZUj.js","sources":["../../src/components/hx-top-nav/hx-top-nav.styles.ts","../../src/components/hx-top-nav/hx-top-nav.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTopNavStyles = css`\n  /* ─── Host ─── */\n\n  :host {\n    display: block;\n  }\n\n  /* ─── Header wrapper (landmark) ─── */\n\n  header {\n    display: block;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* ─── Sticky mode ─── */\n\n  :host([sticky]) .nav {\n    position: sticky;\n    top: 0;\n    /* Fallback 1000 is appropriate for sticky navbars (below modals ~1300, above content) */\n    z-index: var(--hx-top-nav-z-index, var(--hx-z-index-sticky, 1000));\n  }\n\n  /* ─── Nav container ─── */\n\n  .nav {\n    background-color: var(--hx-top-nav-bg, var(--hx-color-neutral-0, #ffffff));\n    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #212529));\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  /* ─── Bar row (always visible) ─── */\n\n  .nav__bar {\n    display: flex;\n    align-items: center;\n    min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));\n    padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n    gap: var(--hx-space-4, 1rem);\n  }\n\n  /* ─── Logo ─── */\n\n  .nav__logo {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  /* ─── Mobile toggle (hamburger) ─── */\n\n  .mobile-toggle {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-inline-start: auto;\n    /* var(--hx-space-3, 0.75rem) padding + 24px icon = 48×48px touch target (exceeds WCAG 2.5.5 44×44px) */\n    padding: var(--hx-space-3, 0.75rem);\n    background: transparent;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #343a40));\n    cursor: pointer;\n    line-height: 0;\n  }\n\n  .mobile-toggle:hover {\n    background: var(--hx-color-neutral-100, #f1f3f5);\n  }\n\n  .mobile-toggle:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .mobile-toggle__icon {\n    width: var(--hx-space-6, 1.5rem);\n    height: var(--hx-space-6, 1.5rem);\n  }\n\n  /* ─── Collapsible panel (mobile) ─── */\n\n  .nav__collapsible {\n    display: none;\n    flex-direction: column;\n    width: 100%;\n    padding-block: var(--hx-space-3, 0.75rem);\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));\n  }\n\n  .nav__collapsible--open {\n    display: flex;\n    animation: hx-mobile-nav-open var(--hx-duration-fast, 150ms) ease-out;\n  }\n\n  /* ─── Menu and actions in collapsible (mobile) ─── */\n\n  .nav__menu,\n  .nav__actions {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n  }\n\n  .nav__actions {\n    margin-top: var(--hx-space-3, 0.75rem);\n    padding-top: var(--hx-space-3, 0.75rem);\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));\n  }\n\n  /* ─── Desktop breakpoint ─── */\n\n  /* NOTE: CSS @media queries do not support custom properties.\n     This value corresponds to --hx-breakpoint-md (768px). */\n  @media (min-width: 768px) {\n    /* Make nav a flex row so bar and collapsible sit side-by-side */\n    .nav {\n      display: flex;\n      align-items: center;\n      padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n    }\n\n    .nav__bar {\n      flex-shrink: 0;\n      padding-inline: 0;\n      min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));\n    }\n\n    /* Hide hamburger on desktop */\n    .mobile-toggle {\n      display: none;\n    }\n\n    /* Collapsible becomes a standard inline flex row */\n    .nav__collapsible {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      flex: 1;\n      padding-block: 0;\n      border-top: none;\n      margin-inline-start: auto;\n      gap: var(--hx-space-4, 1rem);\n      animation: none;\n    }\n\n    /* Override open modifier — always visible on desktop regardless of state */\n    .nav__collapsible--open {\n      display: flex;\n      animation: none;\n    }\n\n    /* Menu grows to fill available space */\n    .nav__menu {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      gap: var(--hx-space-1, 0.25rem);\n      flex: 1;\n      padding-inline: 0;\n    }\n\n    /* Actions sit at the far right */\n    .nav__actions {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      gap: var(--hx-space-2, 0.5rem);\n      margin-top: 0;\n      padding-top: 0;\n      padding-inline: 0;\n      border-top: none;\n      flex-shrink: 0;\n    }\n  }\n\n  /* ─── Mobile menu open animation ─── */\n\n  @keyframes hx-mobile-nav-open {\n    from {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav__collapsible--open {\n      animation: none;\n    }\n  }\n`;\n","import { LitElement, html, svg } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTopNavStyles } from './hx-top-nav.styles.js';\n\n/**\n * Top-of-page site navigation bar with logo, menu items, and utility area.\n * Supports sticky positioning, responsive hamburger menu, and full slot-driven\n * content composition for Drupal and other CMS consumers.\n *\n * @summary Site-level navigation bar with logo, nav items, and action slots.\n *\n * @tag hx-top-nav\n *\n * @slot logo - Brand area rendered on the left side.\n * @slot - Default slot for primary navigation items rendered in the center.\n *   IMPORTANT: Do NOT place a `<nav>` element in this slot — the component\n *   already renders a `<nav>` landmark internally. Use a `<div>` or bare links.\n * @slot actions - Utility area rendered on the right side (search, user menu, etc.).\n *\n * @fires {CustomEvent<{open: boolean}>} hx-mobile-toggle - Dispatched when the\n *   hamburger button is toggled. Detail contains the new open state.\n *\n * @csspart header - The outer `<header>` landmark element.\n * @csspart nav - The `<nav>` element inside the header.\n * @csspart logo - The logo slot container.\n * @csspart menu - The primary navigation slot container.\n * @csspart actions - The actions slot container.\n * @csspart mobile-toggle - The hamburger toggle button.\n *\n * @cssprop [--hx-top-nav-bg=var(--hx-color-neutral-0)] - Navigation bar background color.\n * @cssprop [--hx-top-nav-color=var(--hx-color-neutral-800)] - Navigation bar text color.\n * @cssprop [--hx-top-nav-border-color=var(--hx-color-neutral-200)] - Bottom border color.\n * @cssprop [--hx-top-nav-height=var(--hx-space-16)] - Navigation bar height.\n * @cssprop [--hx-top-nav-padding-x=var(--hx-space-6)] - Horizontal padding.\n * @cssprop [--hx-top-nav-z-index=var(--hx-z-index-sticky)] - Z-index for sticky mode.\n * @cssprop [--hx-top-nav-toggle-color=var(--hx-color-neutral-700)] - Hamburger icon color.\n */\n@customElement('hx-top-nav')\nexport class HelixTopNav extends LitElement {\n  static override styles = [tokenStyles, helixTopNavStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * When true, the navigation bar sticks to the top of the viewport during scroll.\n   * @attr sticky\n   */\n  @property({ type: Boolean, reflect: true })\n  sticky = false;\n\n  /**\n   * Accessible label applied to the `<nav>` element via `aria-label`.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Site Navigation';\n\n  // ─── Private State ───\n\n  /** Whether the mobile collapsible menu is currently open. */\n  @state() private _mobileOpen = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  // ─── Event Handling ───\n\n  private _handleMobileToggle(): void {\n    this._mobileOpen = !this._mobileOpen;\n\n    /**\n     * Dispatched when the hamburger button is toggled.\n     * @event hx-mobile-toggle\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ open: boolean }>('hx-mobile-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { open: this._mobileOpen },\n      }),\n    );\n\n    if (this._mobileOpen) {\n      // Move focus to first interactive element in the default slot\n      this.updateComplete.then(() => {\n        const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n        const assigned = slot?.assignedElements({ flatten: true }) ?? [];\n        const firstFocusable = assigned.find((el): el is HTMLElement => el instanceof HTMLElement);\n        firstFocusable?.focus();\n      });\n    }\n  }\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this._mobileOpen) {\n      this._mobileOpen = false;\n      this.dispatchEvent(\n        new CustomEvent<{ open: boolean }>('hx-mobile-toggle', {\n          bubbles: true,\n          composed: true,\n          detail: { open: false },\n        }),\n      );\n      // Return focus to the toggle button\n      this.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"mobile-toggle\"]')?.focus();\n    }\n  };\n\n  // ─── Render Helpers ───\n\n  private _renderHamburgerIcon() {\n    return html`\n      <svg\n        class=\"mobile-toggle__icon\"\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        ${this._mobileOpen\n          ? svg`\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            `\n          : svg`\n              <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n              <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"></line>\n              <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"></line>\n            `}\n      </svg>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const menuClasses = {\n      nav__collapsible: true,\n      'nav__collapsible--open': this._mobileOpen,\n    };\n\n    return html`\n      <header part=\"header\">\n        <nav part=\"nav\" class=\"nav\" aria-label=${this.label}>\n          <div class=\"nav__bar\">\n            <div part=\"logo\" class=\"nav__logo\">\n              <slot name=\"logo\"></slot>\n            </div>\n\n            <button\n              part=\"mobile-toggle\"\n              class=\"mobile-toggle\"\n              type=\"button\"\n              aria-expanded=${String(this._mobileOpen)}\n              aria-controls=\"nav-menu\"\n              aria-label=\"Toggle navigation\"\n              @click=${this._handleMobileToggle}\n            >\n              ${this._renderHamburgerIcon()}\n            </button>\n          </div>\n\n          <div id=\"nav-menu\" class=${classMap(menuClasses)}>\n            <div part=\"menu\" class=\"nav__menu\">\n              <slot></slot>\n            </div>\n\n            <div part=\"actions\" class=\"nav__actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          </div>\n        </nav>\n      </header>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-top-nav': HelixTopNav;\n  }\n}\n"],"names":["helixTopNavStyles","css","HelixTopNav","LitElement","_b","_a","slot","firstFocusable","el","html","svg","menuClasses","classMap","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"hx-top-nav-D2bQpns3.js","sources":["../../src/components/hx-top-nav/hx-top-nav.styles.ts","../../src/components/hx-top-nav/hx-top-nav.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTopNavStyles = css`\n  /* ─── Host ─── */\n\n  :host {\n    display: block;\n  }\n\n  /* ─── Header wrapper (landmark) ─── */\n\n  header {\n    display: block;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* ─── Sticky mode ─── */\n\n  :host([sticky]) .nav {\n    position: sticky;\n    top: 0;\n    /* Fallback 1000 is appropriate for sticky navbars (below modals ~1300, above content) */\n    z-index: var(--hx-top-nav-z-index, var(--hx-z-index-sticky, 1000));\n  }\n\n  /* ─── Nav container ─── */\n\n  .nav {\n    background-color: var(--hx-top-nav-bg, var(--hx-color-neutral-0, #ffffff));\n    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #212529));\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  /* ─── Bar row (always visible) ─── */\n\n  .nav__bar {\n    display: flex;\n    align-items: center;\n    min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));\n    padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n    gap: var(--hx-space-4, 1rem);\n  }\n\n  /* ─── Logo ─── */\n\n  .nav__logo {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  /* ─── Mobile toggle (hamburger) ─── */\n\n  .mobile-toggle {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-inline-start: auto;\n    /* var(--hx-space-3, 0.75rem) padding + 24px icon = 48×48px touch target (exceeds WCAG 2.5.5 44×44px) */\n    padding: var(--hx-space-3, 0.75rem);\n    background: transparent;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #343a40));\n    cursor: pointer;\n    line-height: 0;\n  }\n\n  .mobile-toggle:hover {\n    background: var(--hx-color-neutral-100, #f1f3f5);\n  }\n\n  .mobile-toggle:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .mobile-toggle__icon {\n    width: var(--hx-space-6, 1.5rem);\n    height: var(--hx-space-6, 1.5rem);\n  }\n\n  /* ─── Collapsible panel (mobile) ─── */\n\n  .nav__collapsible {\n    display: none;\n    flex-direction: column;\n    width: 100%;\n    padding-block: var(--hx-space-3, 0.75rem);\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));\n  }\n\n  .nav__collapsible--open {\n    display: flex;\n    animation: hx-mobile-nav-open var(--hx-duration-fast, 150ms) ease-out;\n  }\n\n  /* ─── Menu and actions in collapsible (mobile) ─── */\n\n  .nav__menu,\n  .nav__actions {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n  }\n\n  .nav__actions {\n    margin-top: var(--hx-space-3, 0.75rem);\n    padding-top: var(--hx-space-3, 0.75rem);\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));\n  }\n\n  /* ─── Desktop breakpoint ─── */\n\n  /* NOTE: CSS @media queries do not support custom properties.\n     This value corresponds to --hx-breakpoint-md (768px). */\n  @media (min-width: 768px) {\n    /* Make nav a flex row so bar and collapsible sit side-by-side */\n    .nav {\n      display: flex;\n      align-items: center;\n      padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n    }\n\n    .nav__bar {\n      flex-shrink: 0;\n      padding-inline: 0;\n      min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));\n    }\n\n    /* Hide hamburger on desktop */\n    .mobile-toggle {\n      display: none;\n    }\n\n    /* Collapsible becomes a standard inline flex row */\n    .nav__collapsible {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      flex: 1;\n      padding-block: 0;\n      border-top: none;\n      margin-inline-start: auto;\n      gap: var(--hx-space-4, 1rem);\n      animation: none;\n    }\n\n    /* Override open modifier — always visible on desktop regardless of state */\n    .nav__collapsible--open {\n      display: flex;\n      animation: none;\n    }\n\n    /* Menu grows to fill available space */\n    .nav__menu {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      gap: var(--hx-space-1, 0.25rem);\n      flex: 1;\n      padding-inline: 0;\n    }\n\n    /* Actions sit at the far right */\n    .nav__actions {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      gap: var(--hx-space-2, 0.5rem);\n      margin-top: 0;\n      padding-top: 0;\n      padding-inline: 0;\n      border-top: none;\n      flex-shrink: 0;\n    }\n  }\n\n  /* ─── Mobile menu open animation ─── */\n\n  @keyframes hx-mobile-nav-open {\n    from {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav__collapsible--open {\n      animation: none;\n    }\n  }\n`;\n","import { LitElement, html, svg } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTopNavStyles } from './hx-top-nav.styles.js';\n\n/**\n * Top-of-page site navigation bar with logo, menu items, and utility area.\n * Supports sticky positioning, responsive hamburger menu, and full slot-driven\n * content composition for Drupal and other CMS consumers.\n *\n * @summary Site-level navigation bar with logo, nav items, and action slots.\n *\n * @tag hx-top-nav\n *\n * @slot logo - Brand area rendered on the left side.\n * @slot - Default slot for primary navigation items rendered in the center.\n *   IMPORTANT: Do NOT place a `<nav>` element in this slot — the component\n *   already renders a `<nav>` landmark internally. Use a `<div>` or bare links.\n * @slot actions - Utility area rendered on the right side (search, user menu, etc.).\n *\n * @fires {CustomEvent<{open: boolean}>} hx-mobile-toggle - Dispatched when the\n *   hamburger button is toggled. Detail contains the new open state.\n *\n * @csspart header - The outer `<header>` landmark element.\n * @csspart nav - The `<nav>` element inside the header.\n * @csspart logo - The logo slot container.\n * @csspart menu - The primary navigation slot container.\n * @csspart actions - The actions slot container.\n * @csspart mobile-toggle - The hamburger toggle button.\n *\n * @cssprop [--hx-top-nav-bg=var(--hx-color-neutral-0)] - Navigation bar background color.\n * @cssprop [--hx-top-nav-color=var(--hx-color-neutral-800)] - Navigation bar text color.\n * @cssprop [--hx-top-nav-border-color=var(--hx-color-neutral-200)] - Bottom border color.\n * @cssprop [--hx-top-nav-height=var(--hx-space-16)] - Navigation bar height.\n * @cssprop [--hx-top-nav-padding-x=var(--hx-space-6)] - Horizontal padding.\n * @cssprop [--hx-top-nav-z-index=var(--hx-z-index-sticky)] - Z-index for sticky mode.\n * @cssprop [--hx-top-nav-toggle-color=var(--hx-color-neutral-700)] - Hamburger icon color.\n */\n@customElement('hx-top-nav')\nexport class HelixTopNav extends LitElement {\n  static override styles = [tokenStyles, helixTopNavStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * When true, the navigation bar sticks to the top of the viewport during scroll.\n   * @attr sticky\n   */\n  @property({ type: Boolean, reflect: true })\n  sticky = false;\n\n  /**\n   * Accessible label applied to the `<nav>` element via `aria-label`.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Site Navigation';\n\n  // ─── Private State ───\n\n  /** Whether the mobile collapsible menu is currently open. */\n  @state() private _mobileOpen = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  // ─── Event Handling ───\n\n  private _handleMobileToggle(): void {\n    this._mobileOpen = !this._mobileOpen;\n\n    /**\n     * Dispatched when the hamburger button is toggled.\n     * @event hx-mobile-toggle\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ open: boolean }>('hx-mobile-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { open: this._mobileOpen },\n      }),\n    );\n\n    if (this._mobileOpen) {\n      // Move focus to first truly interactive element in the default slot (WCAG 2.4.3).\n      // A plain HTMLElement (e.g. <div>) is not keyboard-reachable; we must find a\n      // focusable descendant to avoid trapping focus on a non-interactive node.\n      this.updateComplete.then(() => {\n        const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), [tabindex=\"0\"]';\n        const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n        const assigned = slot?.assignedElements({ flatten: true }) ?? [];\n        let firstFocusable: HTMLElement | null = null;\n        for (const el of assigned) {\n          if (!(el instanceof HTMLElement)) continue;\n          if (el.matches(FOCUSABLE_SELECTOR)) {\n            firstFocusable = el;\n            break;\n          }\n          const found = el.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);\n          if (found) {\n            firstFocusable = found;\n            break;\n          }\n        }\n        firstFocusable?.focus();\n      });\n    }\n  }\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this._mobileOpen) {\n      this._mobileOpen = false;\n      this.dispatchEvent(\n        new CustomEvent<{ open: boolean }>('hx-mobile-toggle', {\n          bubbles: true,\n          composed: true,\n          detail: { open: false },\n        }),\n      );\n      // Return focus to the toggle button\n      this.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"mobile-toggle\"]')?.focus();\n    }\n  };\n\n  // ─── Render Helpers ───\n\n  private _renderHamburgerIcon() {\n    return html`\n      <svg\n        class=\"mobile-toggle__icon\"\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        ${this._mobileOpen\n          ? svg`\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            `\n          : svg`\n              <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n              <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"></line>\n              <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"></line>\n            `}\n      </svg>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const menuClasses = {\n      nav__collapsible: true,\n      'nav__collapsible--open': this._mobileOpen,\n    };\n\n    return html`\n      <header part=\"header\">\n        <nav part=\"nav\" class=\"nav\" aria-label=${this.label}>\n          <div class=\"nav__bar\">\n            <div part=\"logo\" class=\"nav__logo\">\n              <slot name=\"logo\"></slot>\n            </div>\n\n            <button\n              part=\"mobile-toggle\"\n              class=\"mobile-toggle\"\n              type=\"button\"\n              aria-expanded=${String(this._mobileOpen)}\n              aria-controls=\"nav-menu\"\n              aria-label=${this._mobileOpen ? 'Close navigation' : 'Open navigation'}\n              @click=${this._handleMobileToggle}\n            >\n              ${this._renderHamburgerIcon()}\n            </button>\n          </div>\n\n          <div id=\"nav-menu\" class=${classMap(menuClasses)}>\n            <div part=\"menu\" class=\"nav__menu\">\n              <slot></slot>\n            </div>\n\n            <div part=\"actions\" class=\"nav__actions\">\n              <slot name=\"actions\"></slot>\n            </div>\n          </div>\n        </nav>\n      </header>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-top-nav': HelixTopNav;\n  }\n}\n"],"names":["helixTopNavStyles","css","HelixTopNav","LitElement","e","_b","_a","FOCUSABLE_SELECTOR","slot","assigned","firstFocusable","el","found","html","svg","menuClasses","classMap","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-tree-item-Cesh_du5.js → hx-tree-item-BobGN76x.js}

@@ -1,4 +1,4 @@
-import { css as b, LitElement as g, nothing as m, html as f } from "lit";
+import { css as b, LitElement as g, html as f, nothing as x } from "lit";
 import { property as p, state as c, customElement as _ } from "lit/decorators.js";
 import { tokenStyles as y } from "@helixui/tokens/lit";
 const w = b`
@@ -23,14 +23,14 @@ const w = b`
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
 `;
-var I = Object.defineProperty, k = Object.getOwnPropertyDescriptor, x = (t, e, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? k(e, r) : e, n = t.length - 1, o; n >= 0; n--)
-    (o = t[n]) && (s = (i ? o(e, r, s) : o(s)) || s);
-  return i && s && I(e, r, s), s;
+var I = Object.defineProperty, C = Object.getOwnPropertyDescriptor, m = (e, t, r, s) => {
+  for (var i = s > 1 ? void 0 : s ? C(t, r) : t, l = e.length - 1, h; l >= 0; l--)
+    (h = e[l]) && (i = (s ? h(t, r, i) : h(i)) || i);
+  return s && i && I(t, r, i), i;
 };
-let h = class extends g {
+let d = class extends g {
   constructor() {
-    super(...arguments), this.label = "", this.selection = "none", this._currentIndex = 0;
+    super(...arguments), this.label = "", this.selection = "none", this._currentIndex = 0, this._hasVisibleItems = !1;
   }
   // ─── Internal Helpers ───
   /**
@@ -40,35 +40,45 @@ let h = class extends g {
   _getVisibleItems() {
     return this._collectVisibleItems(this);
   }
-  _collectVisibleItems(t) {
-    const e = [];
-    for (const r of Array.from(t.children))
+  _collectVisibleItems(e) {
+    const t = [];
+    for (const r of Array.from(e.children))
       if (r.tagName.toLowerCase() === "hx-tree-item") {
-        const i = r;
-        e.push(i), i.expanded && e.push(...this._collectVisibleItems(i));
+        const s = r;
+        t.push(s), s.expanded && t.push(...this._collectVisibleItems(s));
       } else
-        e.push(...this._collectVisibleItems(r));
-    return e;
+        t.push(...this._collectVisibleItems(r));
+    return t;
   }
   _getSelectedItems() {
     return Array.from(this.querySelectorAll("hx-tree-item[selected]"));
   }
-  _focusItem(t) {
-    var i;
-    const e = this._getVisibleItems();
-    if (e.length === 0) return;
-    const r = Math.max(0, Math.min(t, e.length - 1));
-    this._currentIndex = r, (i = e[r]) == null || i.focus();
+  /**
+   * Updates the roving tabindex across all visible items so that only the
+   * item at `activeIndex` has `tabindex="0"`. All others receive `tabindex="-1"`.
+   * This is called whenever the active item changes (navigation, initial render).
+   */
+  _updateRovingTabindex(e, t) {
+    e.forEach((r, s) => {
+      r.setRovingActive(s === t);
+    });
+  }
+  _focusItem(e) {
+    var s;
+    const t = this._getVisibleItems();
+    if (t.length === 0) return;
+    const r = Math.max(0, Math.min(e, t.length - 1));
+    this._currentIndex = r, this._updateRovingTabindex(t, r), (s = t[r]) == null || s.focus();
   }
   // ─── Event Handling ───
-  _handleTreeItemSelect(t) {
-    const r = t.detail.item;
+  _handleTreeItemSelect(e) {
+    const r = e.detail.item;
     if (this.selection !== "none") {
       if (this.selection === "single") {
-        const i = r.selected;
-        this._getSelectedItems().forEach((s) => {
-          s.selected = !1;
-        }), r.selected = !i;
+        const s = r.selected;
+        this._getSelectedItems().forEach((i) => {
+          i.selected = !1;
+        }), r.selected = !s;
       } else this.selection === "multiple" && (r.selected = !r.selected);
       this.dispatchEvent(
         new CustomEvent("hx-select", {
@@ -79,98 +89,118 @@ let h = class extends g {
       );
     }
   }
-  _handleKeyDown(t) {
-    var s, n, o;
-    const e = this._getVisibleItems();
-    if (e.length === 0) return;
+  _handleKeyDown(e) {
+    var i, l, h;
+    const t = this._getVisibleItems();
+    if (t.length === 0) return;
     let r = this._currentIndex;
-    const i = document.activeElement;
-    for (let a = 0; a < e.length; a++)
-      if (e[a] === i || (n = (s = e[a]) == null ? void 0 : s.shadowRoot) != null && n.activeElement) {
+    const s = document.activeElement;
+    for (let a = 0; a < t.length; a++)
+      if (t[a] === s || (l = (i = t[a]) == null ? void 0 : i.shadowRoot) != null && l.activeElement) {
         r = a;
         break;
       }
-    switch (t.key) {
+    switch (e.key) {
       case "ArrowDown": {
-        t.preventDefault();
-        const a = r < e.length - 1 ? r + 1 : 0;
+        e.preventDefault();
+        const a = r < t.length - 1 ? r + 1 : 0;
         this._focusItem(a);
         break;
       }
       case "ArrowUp": {
-        t.preventDefault();
-        const a = r > 0 ? r - 1 : e.length - 1;
+        e.preventDefault();
+        const a = r > 0 ? r - 1 : t.length - 1;
         this._focusItem(a);
         break;
       }
       case "ArrowLeft": {
-        t.preventDefault();
-        const a = e[r];
+        e.preventDefault();
+        const a = t[r];
         if (!a) break;
         if (a.expanded && a.hasChildItems)
           a.expanded = !1;
         else {
-          const u = (o = a.parentElement) == null ? void 0 : o.closest("hx-tree-item");
+          const u = (h = a.parentElement) == null ? void 0 : h.closest("hx-tree-item");
           if (u) {
-            const v = e.indexOf(u);
+            const v = t.indexOf(u);
             v >= 0 && this._focusItem(v);
           }
         }
         break;
       }
       case "ArrowRight": {
-        t.preventDefault();
-        const a = e[r];
+        e.preventDefault();
+        const a = t[r];
         if (!a) break;
         a.hasChildItems && (a.expanded ? this._focusItem(r + 1) : a.expanded = !0);
         break;
       }
       case "Home": {
-        t.preventDefault(), this._focusItem(0);
+        e.preventDefault(), this._focusItem(0);
         break;
       }
       case "End": {
-        t.preventDefault(), this._focusItem(e.length - 1);
+        e.preventDefault(), this._focusItem(t.length - 1);
         break;
       }
     }
   }
-  _handleFocusIn(t) {
-    t.target === t.currentTarget && this._focusItem(this._currentIndex);
+  _handleFocusIn(e) {
+    e.target === e.currentTarget && this._getVisibleItems().length > 0 && this._focusItem(this._currentIndex);
+  }
+  /**
+   * Initializes the roving tabindex after items are first slotted in.
+   * Ensures the active item (index 0 by default) has tabindex="0" from the start,
+   * so a Tab into the tree lands directly on the first item without a redirect.
+   * Also updates `_hasVisibleItems` so the container tabindex re-renders correctly.
+   */
+  _handleSlotChange() {
+    const e = this._getVisibleItems();
+    if (this._hasVisibleItems = e.length > 0, e.length === 0) return;
+    const t = Math.min(this._currentIndex, e.length - 1);
+    this._currentIndex = t, this._updateRovingTabindex(e, t);
+  }
+  // ─── Lifecycle ───
+  firstUpdated() {
+    this.label;
   }
   // ─── Render ───
   render() {
+    const e = this._hasVisibleItems ? "-1" : "0";
     return f`
       <div
         part="tree"
         class="tree"
         role="tree"
-        tabindex="0"
-        aria-label=${this.label || m}
+        tabindex=${e}
+        aria-label=${this.label || "Tree"}
         aria-multiselectable=${this.selection === "multiple" ? "true" : "false"}
         @hx-tree-item-select=${this._handleTreeItemSelect}
         @keydown=${this._handleKeyDown}
         @focusin=${this._handleFocusIn}
       >
-        <slot></slot>
+        <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
     `;
   }
 };
-h.styles = [y, w];
-x([
+d.styles = [y, w];
+m([
   p({ type: String, reflect: !0 })
-], h.prototype, "label", 2);
-x([
+], d.prototype, "label", 2);
+m([
   p({ type: String, reflect: !0 })
-], h.prototype, "selection", 2);
-x([
+], d.prototype, "selection", 2);
+m([
+  c()
+], d.prototype, "_currentIndex", 2);
+m([
   c()
-], h.prototype, "_currentIndex", 2);
-h = x([
+], d.prototype, "_hasVisibleItems", 2);
+d = m([
   _("hx-tree-view")
-], h);
-const C = b`
+], d);
+const k = b`
   :host {
     display: block;
     contain: layout style;
@@ -214,7 +244,8 @@ const C = b`
   }
 
   .item-row:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-tree-item-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
     outline-offset: var(--hx-focus-ring-offset, -2px);
   }
 
@@ -271,6 +302,12 @@ const C = b`
     );
   }
 
+  .expand-btn:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-tree-item-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
   .expand-btn svg {
     width: var(--hx-space-3, 0.75rem);
     height: var(--hx-space-3, 0.75rem);
@@ -341,14 +378,14 @@ const C = b`
     overflow: hidden;
   }
 `;
-var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, d = (t, e, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? E(e, r) : e, n = t.length - 1, o; n >= 0; n--)
-    (o = t[n]) && (s = (i ? o(e, r, s) : o(s)) || s);
-  return i && s && S(e, r, s), s;
+var S = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, o = (e, t, r, s) => {
+  for (var i = s > 1 ? void 0 : s ? $(t, r) : t, l = e.length - 1, h; l >= 0; l--)
+    (h = e[l]) && (i = (s ? h(t, r, i) : h(i)) || i);
+  return s && i && S(t, r, i), i;
 };
-let l = class extends g {
+let n = class extends g {
   constructor() {
-    super(...arguments), this.expanded = !1, this.selected = !1, this.disabled = !1, this._hasChildren = !1, this._level = 1, this._posInSet = 1, this._setSize = 1, this._selectable = !1;
+    super(...arguments), this.expanded = !1, this.selected = !1, this.disabled = !1, this._hasChildren = !1, this._rovingActive = !1, this._labelText = "", this._level = 1, this._posInSet = 1, this._setSize = 1, this._selectable = !1;
   }
   // ─── Computed ARIA ───
   /**
@@ -361,24 +398,25 @@ let l = class extends g {
   /**
    * Recompute all cached ARIA metadata in a single DOM pass.
    * Called on connect, slotchange, and whenever structural context may change.
+   * @internal
    */
   _updateAriaMetadata() {
-    let t = 1, e = this.parentElement;
-    for (; e; )
-      e.tagName.toLowerCase() === "hx-tree-item" && t++, e = e.parentElement;
-    this._level = t;
+    let e = 1, t = this.parentElement;
+    for (; t; )
+      t.tagName.toLowerCase() === "hx-tree-item" && e++, t = t.parentElement;
+    this._level = e;
     const r = this.parentElement;
     if (r) {
-      const s = Array.from(r.children).filter(
-        (n) => n.tagName.toLowerCase() === "hx-tree-item"
+      const i = Array.from(r.children).filter(
+        (l) => l.tagName.toLowerCase() === "hx-tree-item"
       );
-      this._posInSet = s.indexOf(this) + 1, this._setSize = s.length;
+      this._posInSet = i.indexOf(this) + 1, this._setSize = i.length;
     } else
       this._posInSet = 1, this._setSize = 1;
-    const i = this.closest("hx-tree-view");
-    if (i) {
-      const s = i.getAttribute("selection");
-      this._selectable = s === "single" || s === "multiple";
+    const s = this.closest("hx-tree-view");
+    if (s) {
+      const i = s.getAttribute("selection");
+      this._selectable = i === "single" || i === "multiple";
     } else
       this._selectable = !1;
   }
@@ -387,14 +425,34 @@ let l = class extends g {
     super.connectedCallback(), this._updateAriaMetadata();
   }
   // ─── Children Detection ───
-  _handleChildrenSlotChange(t) {
-    const e = t.target;
-    this._hasChildren = e.assignedElements().length > 0, this._updateAriaMetadata();
+  /**
+   * Updates _hasChildren and recomputes ARIA metadata when the children slot assignment changes.
+   * @internal
+   */
+  _handleChildrenSlotChange(e) {
+    const t = e.target;
+    this._hasChildren = t.assignedElements().length > 0, this._updateAriaMetadata();
+  }
+  /**
+   * Captures the text content from the default (label) slot for use on the children group label.
+   * @internal
+   */
+  _handleLabelSlotChange(e) {
+    const r = e.target.assignedNodes({ flatten: !0 });
+    this._labelText = r.map((s) => s.textContent ?? "").join("").trim();
   }
   // ─── Event Handlers ───
-  _handleExpandClick(t) {
-    t.stopPropagation(), !this.disabled && (this.expanded = !this.expanded);
+  /**
+   * Toggles the expanded state when the expand/collapse button is clicked, stopping event propagation.
+   * @internal
+   */
+  _handleExpandClick(e) {
+    e.stopPropagation(), !this.disabled && (this.expanded = !this.expanded);
   }
+  /**
+   * Dispatches the hx-tree-item-select event when the item is activated via click or keyboard.
+   * @internal
+   */
   _handleRowClick() {
     this.disabled || this.dispatchEvent(
       new CustomEvent("hx-tree-item-select", {
@@ -404,29 +462,46 @@ let l = class extends g {
       })
     );
   }
-  _handleKeyDown(t) {
+  /**
+   * Handles keyboard interaction for the tree item, including expand/collapse, activation, and delegation of list-navigation keys to the parent tree.
+   * @internal
+   */
+  _handleKeyDown(e) {
     if (!this.disabled)
-      switch (t.key) {
+      switch (e.key) {
         case "ArrowRight":
-          t.preventDefault(), this._hasChildren && !this.expanded && (this.expanded = !0);
+          e.preventDefault(), this._hasChildren && !this.expanded && (this.expanded = !0);
           break;
         case "ArrowLeft":
-          t.preventDefault(), this._hasChildren && this.expanded && (this.expanded = !1);
+          e.preventDefault(), this._hasChildren && this.expanded && (this.expanded = !1);
           break;
         case "Enter":
         case " ":
-          t.preventDefault(), this._handleRowClick();
+          e.preventDefault(), this._handleRowClick();
           break;
       }
   }
   // ─── Public API ───
+  /**
+   * Sets the roving tabindex state for this item.
+   * When `active` is true, the item row gets `tabindex="0"` making it the
+   * Tab-reachable item in the tree. All other items should be set to false.
+   * Called by the parent hx-tree-view to manage the roving tabindex pattern.
+   */
+  setRovingActive(e) {
+    this._rovingActive = e;
+  }
   /** Focus this item's interactive row element. */
   focus() {
-    var e;
-    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".item-row");
-    t == null || t.focus();
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".item-row");
+    e == null || e.focus();
   }
   // ─── Render ───
+  /**
+   * Renders the expand/collapse chevron button, or a placeholder span when the item has no children.
+   * @internal
+   */
   _renderExpandIcon() {
     return this._hasChildren ? f`
       <button
@@ -443,17 +518,17 @@ let l = class extends g {
     ` : f`<span class="expand-placeholder" aria-hidden="true"></span>`;
   }
   render() {
-    const t = this._hasChildren ? String(this.expanded) : m, e = this._selectable ? String(this.selected) : m;
+    const e = this._hasChildren ? String(this.expanded) : x, t = this._selectable ? String(this.selected) : x;
     return f`
       <div part="item" class="item">
         <div
           part="row"
           class="item-row"
           role="treeitem"
-          tabindex="-1"
-          aria-expanded=${t}
-          aria-selected=${e}
-          aria-disabled=${this.disabled ? "true" : m}
+          tabindex=${this._rovingActive ? "0" : "-1"}
+          aria-expanded=${e}
+          aria-selected=${t}
+          aria-disabled=${this.disabled ? "true" : x}
           aria-level=${this._level}
           aria-posinset=${this._posInSet}
           aria-setsize=${this._setSize}
@@ -465,13 +540,14 @@ let l = class extends g {
             <slot name="icon"></slot>
           </span>
           <span part="label" class="item-label">
-            <slot></slot>
+            <slot @slotchange=${this._handleLabelSlotChange}></slot>
           </span>
         </div>
         <div
           part="children"
           class="children ${this.expanded ? "children--expanded" : ""}"
           role="group"
+          aria-label=${this._labelText ? `${this._labelText} children` : "children"}
         >
           <div class="children-inner">
             <slot name="children" @slotchange=${this._handleChildrenSlotChange}></slot>
@@ -481,36 +557,42 @@ let l = class extends g {
     `;
   }
 };
-l.styles = [y, C];
-d([
+n.styles = [y, k];
+o([
   p({ type: Boolean, reflect: !0 })
-], l.prototype, "expanded", 2);
-d([
+], n.prototype, "expanded", 2);
+o([
   p({ type: Boolean, reflect: !0 })
-], l.prototype, "selected", 2);
-d([
+], n.prototype, "selected", 2);
+o([
   p({ type: Boolean, reflect: !0 })
-], l.prototype, "disabled", 2);
-d([
+], n.prototype, "disabled", 2);
+o([
+  c()
+], n.prototype, "_hasChildren", 2);
+o([
+  c()
+], n.prototype, "_rovingActive", 2);
+o([
   c()
-], l.prototype, "_hasChildren", 2);
-d([
+], n.prototype, "_labelText", 2);
+o([
   c()
-], l.prototype, "_level", 2);
-d([
+], n.prototype, "_level", 2);
+o([
   c()
-], l.prototype, "_posInSet", 2);
-d([
+], n.prototype, "_posInSet", 2);
+o([
   c()
-], l.prototype, "_setSize", 2);
-d([
+], n.prototype, "_setSize", 2);
+o([
   c()
-], l.prototype, "_selectable", 2);
-l = d([
+], n.prototype, "_selectable", 2);
+n = o([
   _("hx-tree-item")
-], l);
+], n);
 export {
-  l as H,
-  h as a
+  n as H,
+  d as a
 };
-//# sourceMappingURL=hx-tree-item-Cesh_du5.js.map
+//# sourceMappingURL=hx-tree-item-BobGN76x.js.map