@helixui/library 0.3.4 → 1.0.0

package/dist/shared/{hx-top-nav-8lDKNZUj.js.map → hx-top-nav-DzW7XLv-.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-DzW7XLv-.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=\"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","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-DdH6RbMs.js}

@@ -1,5 +1,5 @@
-import { css as b, LitElement as g, nothing as m, html as f } from "lit";
-import { property as p, state as c, customElement as _ } from "lit/decorators.js";
+import { css as b, LitElement as g, nothing as f, html as x } from "lit";
+import { property as p, state as d, customElement as _ } from "lit/decorators.js";
 import { tokenStyles as y } from "@helixui/tokens/lit";
 const w = b`
   :host {
@@ -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, k = Object.getOwnPropertyDescriptor, m = (e, t, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? k(t, r) : t, a = e.length - 1, o; a >= 0; a--)
+    (o = e[a]) && (s = (i ? o(t, r, s) : o(s)) || s);
+  return i && s && I(t, r, s), s;
 };
-let h = class extends g {
+let c = 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,29 +40,39 @@ 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));
+        t.push(i), i.expanded && t.push(...this._collectVisibleItems(i));
       } 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) {
+  /**
+   * 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, i) => {
+      r.setRovingActive(i === t);
+    });
+  }
+  _focusItem(e) {
     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();
+    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), (i = t[r]) == null || i.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;
@@ -79,97 +89,113 @@ let h = class extends g {
       );
     }
   }
-  _handleKeyDown(t) {
-    var s, n, o;
-    const e = this._getVisibleItems();
-    if (e.length === 0) return;
+  _handleKeyDown(e) {
+    var s, a, o;
+    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) {
-        r = a;
+    for (let n = 0; n < t.length; n++)
+      if (t[n] === i || (a = (s = t[n]) == null ? void 0 : s.shadowRoot) != null && a.activeElement) {
+        r = n;
         break;
       }
-    switch (t.key) {
+    switch (e.key) {
       case "ArrowDown": {
-        t.preventDefault();
-        const a = r < e.length - 1 ? r + 1 : 0;
-        this._focusItem(a);
+        e.preventDefault();
+        const n = r < t.length - 1 ? r + 1 : 0;
+        this._focusItem(n);
         break;
       }
       case "ArrowUp": {
-        t.preventDefault();
-        const a = r > 0 ? r - 1 : e.length - 1;
-        this._focusItem(a);
+        e.preventDefault();
+        const n = r > 0 ? r - 1 : t.length - 1;
+        this._focusItem(n);
         break;
       }
       case "ArrowLeft": {
-        t.preventDefault();
-        const a = e[r];
-        if (!a) break;
-        if (a.expanded && a.hasChildItems)
-          a.expanded = !1;
+        e.preventDefault();
+        const n = t[r];
+        if (!n) break;
+        if (n.expanded && n.hasChildItems)
+          n.expanded = !1;
         else {
-          const u = (o = a.parentElement) == null ? void 0 : o.closest("hx-tree-item");
+          const u = (o = n.parentElement) == null ? void 0 : o.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];
-        if (!a) break;
-        a.hasChildItems && (a.expanded ? this._focusItem(r + 1) : a.expanded = !0);
+        e.preventDefault();
+        const n = t[r];
+        if (!n) break;
+        n.hasChildItems && (n.expanded ? this._focusItem(r + 1) : n.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);
   }
   // ─── Render ───
   render() {
-    return f`
+    const e = this._hasVisibleItems ? "-1" : "0";
+    return x`
       <div
         part="tree"
         class="tree"
         role="tree"
-        tabindex="0"
-        aria-label=${this.label || m}
+        tabindex=${e}
+        aria-label=${this.label || f}
         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([
+c.styles = [y, w];
+m([
   p({ type: String, reflect: !0 })
-], h.prototype, "label", 2);
-x([
+], c.prototype, "label", 2);
+m([
   p({ type: String, reflect: !0 })
-], h.prototype, "selection", 2);
-x([
-  c()
-], h.prototype, "_currentIndex", 2);
-h = x([
+], c.prototype, "selection", 2);
+m([
+  d()
+], c.prototype, "_currentIndex", 2);
+m([
+  d()
+], c.prototype, "_hasVisibleItems", 2);
+c = m([
   _("hx-tree-view")
-], h);
+], c);
 const C = b`
   :host {
     display: block;
@@ -341,14 +367,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, E = Object.getOwnPropertyDescriptor, h = (e, t, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? E(t, r) : t, a = e.length - 1, o; a >= 0; a--)
+    (o = e[a]) && (s = (i ? o(t, r, s) : o(s)) || s);
+  return i && s && S(t, r, s), s;
 };
 let l = 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._level = 1, this._posInSet = 1, this._setSize = 1, this._selectable = !1;
   }
   // ─── Computed ARIA ───
   /**
@@ -361,16 +387,17 @@ 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"
+        (a) => a.tagName.toLowerCase() === "hx-tree-item"
       );
       this._posInSet = s.indexOf(this) + 1, this._setSize = s.length;
     } else
@@ -387,14 +414,26 @@ 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();
   }
   // ─── 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,31 +443,48 @@ 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`
+    return this._hasChildren ? x`
       <button
         part="expand-icon"
         class="expand-btn"
@@ -440,20 +496,20 @@ let l = class extends g {
           <polyline points="6 4 10 8 6 12" />
         </svg>
       </button>
-    ` : f`<span class="expand-placeholder" aria-hidden="true"></span>`;
+    ` : x`<span class="expand-placeholder" aria-hidden="true"></span>`;
   }
   render() {
-    const t = this._hasChildren ? String(this.expanded) : m, e = this._selectable ? String(this.selected) : m;
-    return f`
+    const e = this._hasChildren ? String(this.expanded) : f, t = this._selectable ? String(this.selected) : f;
+    return x`
       <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" : f}
           aria-level=${this._level}
           aria-posinset=${this._posInSet}
           aria-setsize=${this._setSize}
@@ -482,35 +538,38 @@ let l = class extends g {
   }
 };
 l.styles = [y, C];
-d([
+h([
   p({ type: Boolean, reflect: !0 })
 ], l.prototype, "expanded", 2);
-d([
+h([
   p({ type: Boolean, reflect: !0 })
 ], l.prototype, "selected", 2);
-d([
+h([
   p({ type: Boolean, reflect: !0 })
 ], l.prototype, "disabled", 2);
-d([
-  c()
+h([
+  d()
 ], l.prototype, "_hasChildren", 2);
-d([
-  c()
+h([
+  d()
+], l.prototype, "_rovingActive", 2);
+h([
+  d()
 ], l.prototype, "_level", 2);
-d([
-  c()
+h([
+  d()
 ], l.prototype, "_posInSet", 2);
-d([
-  c()
+h([
+  d()
 ], l.prototype, "_setSize", 2);
-d([
-  c()
+h([
+  d()
 ], l.prototype, "_selectable", 2);
-l = d([
+l = h([
   _("hx-tree-item")
 ], l);
 export {
   l as H,
-  h as a
+  c as a
 };
-//# sourceMappingURL=hx-tree-item-Cesh_du5.js.map
+//# sourceMappingURL=hx-tree-item-DdH6RbMs.js.map

package/dist/shared/hx-tree-item-DdH6RbMs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-tree-item-DdH6RbMs.js","sources":["../../src/components/hx-tree-view/hx-tree-view.styles.ts","../../src/components/hx-tree-view/hx-tree-view.ts","../../src/components/hx-tree-view/hx-tree-item.styles.ts","../../src/components/hx-tree-view/hx-tree-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTreeViewStyles = css`\n  :host {\n    display: block;\n    contain: layout style;\n    font-family: var(--hx-tree-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .tree {\n    display: block;\n    outline: none;\n  }\n\n  .tree:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTreeViewStyles } from './hx-tree-view.styles.js';\nimport type { HelixTreeItem, HxTreeItemSelectDetail } from './hx-tree-item.js';\n\n/** Selection mode for the tree. */\nexport type TreeSelection = 'none' | 'single' | 'multiple';\n\n/** Detail type for the `hx-select` event. */\nexport interface HxSelectDetail {\n  /** The tree item that was selected or deselected. */\n  item: HelixTreeItem;\n  /** Whether the item is now selected. */\n  selected: boolean;\n}\n\n/**\n * A hierarchical tree component for navigating nested data structures.\n * Used in healthcare applications for org charts, ICD-10 code hierarchies, and department navigation.\n *\n * Implements WAI-ARIA tree view pattern with `role=\"tree\"` on the container\n * and `role=\"treeitem\"` on each item. Supports `aria-label` via the `label` property\n * for screen reader identification. Full keyboard navigation: Arrow keys for movement,\n * Enter/Space for selection, Home/End for first/last item.\n *\n * ## Scale Limits\n *\n * This component renders all tree items simultaneously in the DOM. It is suitable for\n * trees with up to ~500 visible items. For large taxonomies (e.g., ICD-10 with 70,000+\n * codes), use async/lazy loading: only render top-level nodes initially and populate\n * child nodes on `hx-select` or expand events. The component exposes the `expanded`\n * property on `hx-tree-item` for programmatic control of subtrees, enabling consumer-level\n * virtualization strategies without requiring changes to this component.\n *\n * @summary Hierarchical tree view with expand/collapse and keyboard navigation.\n *\n * @tag hx-tree-view\n *\n * @slot - Default slot for hx-tree-item elements.\n *\n * @fires {CustomEvent<HxSelectDetail>} hx-select - Dispatched when a tree item is selected or deselected.\n *\n * @csspart tree - The tree container element with role=\"tree\".\n *\n * @cssprop [--hx-tree-font-family=var(--hx-font-family-sans)] - Tree font family.\n */\n@customElement('hx-tree-view')\nexport class HelixTreeView extends LitElement {\n  static override styles = [tokenStyles, helixTreeViewStyles];\n\n  // ─── Properties ───\n\n  /**\n   * Accessible label for the tree. Applied as `aria-label` on the tree container.\n   * Provides context to screen readers about the tree's purpose.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  /**\n   * Selection mode for the tree.\n   * - `none` — items cannot be selected\n   * - `single` — only one item can be selected at a time\n   * - `multiple` — multiple items can be selected\n   * @attr selection\n   */\n  @property({ type: String, reflect: true })\n  selection: TreeSelection = 'none';\n\n  // ─── Internal State ───\n\n  @state() private _currentIndex = 0;\n\n  /** Tracks whether the tree has any visible items, to decide the container tabindex. */\n  @state() private _hasVisibleItems = false;\n\n  // ─── Internal Helpers ───\n\n  /**\n   * Returns a flat ordered list of all visible (not inside a collapsed item) hx-tree-items\n   * in depth-first order.\n   */\n  private _getVisibleItems(): HelixTreeItem[] {\n    return this._collectVisibleItems(this);\n  }\n\n  private _collectVisibleItems(container: Element): HelixTreeItem[] {\n    const items: HelixTreeItem[] = [];\n    for (const child of Array.from(container.children)) {\n      if (child.tagName.toLowerCase() === 'hx-tree-item') {\n        const item = child as HelixTreeItem;\n        items.push(item);\n        if (item.expanded) {\n          items.push(...this._collectVisibleItems(item));\n        }\n      } else {\n        items.push(...this._collectVisibleItems(child));\n      }\n    }\n    return items;\n  }\n\n  private _getSelectedItems(): HelixTreeItem[] {\n    return Array.from(this.querySelectorAll<HelixTreeItem>('hx-tree-item[selected]'));\n  }\n\n  /**\n   * Updates the roving tabindex across all visible items so that only the\n   * item at `activeIndex` has `tabindex=\"0\"`. All others receive `tabindex=\"-1\"`.\n   * This is called whenever the active item changes (navigation, initial render).\n   */\n  private _updateRovingTabindex(items: HelixTreeItem[], activeIndex: number): void {\n    items.forEach((item, i) => {\n      item.setRovingActive(i === activeIndex);\n    });\n  }\n\n  private _focusItem(index: number): void {\n    const items = this._getVisibleItems();\n    if (items.length === 0) return;\n    const clamped = Math.max(0, Math.min(index, items.length - 1));\n    this._currentIndex = clamped;\n    this._updateRovingTabindex(items, clamped);\n    items[clamped]?.focus();\n  }\n\n  // ─── Event Handling ───\n\n  private _handleTreeItemSelect(e: Event): void {\n    const event = e as CustomEvent<HxTreeItemSelectDetail>;\n    const item = event.detail.item;\n\n    if (this.selection === 'none') return;\n\n    if (this.selection === 'single') {\n      const wasSelected = item.selected;\n      this._getSelectedItems().forEach((i) => {\n        i.selected = false;\n      });\n      item.selected = !wasSelected;\n    } else if (this.selection === 'multiple') {\n      item.selected = !item.selected;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<HxSelectDetail>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item, selected: item.selected },\n      }),\n    );\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    const items = this._getVisibleItems();\n    if (items.length === 0) return;\n\n    let currentIndex = this._currentIndex;\n    const focused = document.activeElement;\n\n    for (let i = 0; i < items.length; i++) {\n      if (items[i] === focused || items[i]?.shadowRoot?.activeElement) {\n        currentIndex = i;\n        break;\n      }\n    }\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n        this._focusItem(next);\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n        this._focusItem(prev);\n        break;\n      }\n      case 'ArrowLeft': {\n        e.preventDefault();\n        const currentItem = items[currentIndex];\n        if (!currentItem) break;\n        if (currentItem.expanded && currentItem.hasChildItems) {\n          currentItem.expanded = false;\n        } else {\n          const parentItem = currentItem.parentElement?.closest('hx-tree-item') as\n            | HelixTreeItem\n            | undefined;\n          if (parentItem) {\n            const parentIndex = items.indexOf(parentItem);\n            if (parentIndex >= 0) {\n              this._focusItem(parentIndex);\n            }\n          }\n        }\n        break;\n      }\n      case 'ArrowRight': {\n        e.preventDefault();\n        const currentItem = items[currentIndex];\n        if (!currentItem) break;\n        if (currentItem.hasChildItems) {\n          if (!currentItem.expanded) {\n            currentItem.expanded = true;\n          } else {\n            this._focusItem(currentIndex + 1);\n          }\n        }\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        this._focusItem(0);\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        this._focusItem(items.length - 1);\n        break;\n      }\n    }\n  }\n\n  private _handleFocusIn(e: FocusEvent): void {\n    // With roving tabindex, the tree container (tabindex=\"-1\") should only receive\n    // focus when the tree is empty. If focus does land on the container (e.g. the\n    // tree is empty or programmatic focus), redirect to the active item if present.\n    if (e.target === e.currentTarget) {\n      const items = this._getVisibleItems();\n      if (items.length > 0) {\n        this._focusItem(this._currentIndex);\n      }\n    }\n  }\n\n  /**\n   * Initializes the roving tabindex after items are first slotted in.\n   * Ensures the active item (index 0 by default) has tabindex=\"0\" from the start,\n   * so a Tab into the tree lands directly on the first item without a redirect.\n   * Also updates `_hasVisibleItems` so the container tabindex re-renders correctly.\n   */\n  private _handleSlotChange(): void {\n    const items = this._getVisibleItems();\n    this._hasVisibleItems = items.length > 0;\n    if (items.length === 0) return;\n    // Clamp _currentIndex in case items were removed.\n    const clamped = Math.min(this._currentIndex, items.length - 1);\n    this._currentIndex = clamped;\n    this._updateRovingTabindex(items, clamped);\n  }\n\n  // ─── Render ───\n\n  override render() {\n    // Roving tabindex pattern (WCAG 2.4.3 Fix):\n    // The tree container is NOT a Tab stop (tabindex=\"-1\"). Tab focus goes\n    // directly to the active item, which carries tabindex=\"0\". The container\n    // is only a landing target (tabindex=\"0\") when the tree is empty.\n    const containerTabindex = this._hasVisibleItems ? '-1' : '0';\n\n    return html`\n      <div\n        part=\"tree\"\n        class=\"tree\"\n        role=\"tree\"\n        tabindex=${containerTabindex}\n        aria-label=${this.label || nothing}\n        aria-multiselectable=${this.selection === 'multiple' ? 'true' : 'false'}\n        @hx-tree-item-select=${this._handleTreeItemSelect}\n        @keydown=${this._handleKeyDown}\n        @focusin=${this._handleFocusIn}\n      >\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tree-view': HelixTreeView;\n  }\n}\n\n/** Canonical type alias for HelixTreeView. Use this when typing hx-tree-view element references. */\nexport type HxTreeView = HelixTreeView;\n\n/** @deprecated Use {@link HxTreeView} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcTreeView = HelixTreeView;\n","import { css } from 'lit';\n\nexport const helixTreeItemStyles = css`\n  :host {\n    display: block;\n    contain: layout style;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Item Container ─── */\n\n  .item {\n    display: block;\n  }\n\n  /* ─── Item Row ─── */\n\n  .item-row {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-tree-item-gap, var(--hx-space-2, 0.5rem));\n    padding: var(--hx-tree-item-padding-y, var(--hx-space-1, 0.25rem))\n      var(--hx-tree-item-padding-x, var(--hx-space-2, 0.5rem));\n    padding-left: calc(\n      var(--hx-tree-item-padding-x, var(--hx-space-2, 0.5rem)) + var(--_indent-level, 0) *\n        var(--hx-tree-indent-size, 1.5rem)\n    );\n    border-radius: var(--hx-tree-item-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    cursor: pointer;\n    outline: none;\n    color: var(--hx-tree-item-color, var(--hx-color-neutral-900, #111827));\n    font-family: var(--hx-tree-item-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-tree-item-font-size, var(--hx-font-size-sm, 0.875rem));\n    line-height: var(--hx-line-height-normal, 1.5);\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n    user-select: none;\n  }\n\n  .item-row:hover {\n    background-color: var(--hx-tree-item-hover-bg, var(--hx-color-neutral-100, #f3f4f6));\n  }\n\n  .item-row:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n    outline-offset: var(--hx-focus-ring-offset, -2px);\n  }\n\n  /* ─── Selected State ─── */\n\n  :host([selected]) .item-row {\n    background-color: var(--hx-tree-item-selected-bg, var(--hx-color-primary-100, #dbeafe));\n    color: var(--hx-tree-item-selected-color, var(--hx-color-primary-800, #1e40af));\n  }\n\n  :host([selected]) .item-row:hover {\n    background-color: var(--hx-tree-item-selected-hover-bg, var(--hx-color-primary-200, #bfdbfe));\n  }\n\n  /* ─── Disabled State ─── */\n\n  :host([disabled]) .item-row {\n    opacity: 0.4;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ─── Expand Icon ─── */\n\n  .expand-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n  }\n\n  .expand-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: var(--hx-tree-item-expand-icon-color, var(--hx-color-neutral-500, #6b7280));\n    cursor: pointer;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    transition: transform var(--hx-transition-fast, 150ms ease);\n    pointer-events: auto;\n  }\n\n  .expand-btn:hover {\n    background-color: var(\n      --hx-tree-item-expand-hover-bg,\n      var(--hx-overlay-black-6, rgba(0, 0, 0, 0.06))\n    );\n  }\n\n  .expand-btn svg {\n    width: var(--hx-space-3, 0.75rem);\n    height: var(--hx-space-3, 0.75rem);\n    stroke: currentColor;\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  :host([expanded]) .expand-btn svg {\n    transform: rotate(90deg);\n  }\n\n  .expand-placeholder {\n    display: block;\n    width: var(--hx-space-4, 1rem);\n    flex-shrink: 0;\n  }\n\n  /* ─── Icon Slot ─── */\n\n  .item-icon {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    color: var(--hx-tree-item-icon-color, var(--hx-color-neutral-500, #6b7280));\n  }\n\n  .item-icon:empty {\n    display: none;\n  }\n\n  /* ─── Label ─── */\n\n  .item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ─── Children (animated) ─── */\n\n  .children {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows var(--hx-transition-base, 200ms ease);\n    --_indent-level: calc(var(--_indent-level, 0) + 1);\n  }\n\n  .children--expanded {\n    grid-template-rows: 1fr;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .item-row,\n    .expand-btn,\n    .expand-btn svg,\n    .children {\n      transition: none;\n    }\n  }\n\n  .children-inner {\n    overflow: hidden;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTreeItemStyles } from './hx-tree-item.styles.js';\n\n/** Detail type for the `hx-tree-item-select` event. */\nexport interface HxTreeItemSelectDetail {\n  /** The tree item that was selected or activated. */\n  item: HelixTreeItem;\n}\n\n/**\n * A tree item used within an hx-tree-view component.\n * Supports expand/collapse, selection, keyboard navigation, and icon/children slots.\n *\n * @summary Individual item within an hx-tree-view hierarchical tree.\n *\n * @tag hx-tree-item\n *\n * @slot - Default slot for the item label content.\n * @slot icon - Custom icon shown before the label.\n * @slot children - Nested hx-tree-item elements for sub-tree.\n *\n * @csspart item - The outer item container.\n * @csspart row - The interactive item row (contains expand icon, icon slot, and label).\n * @csspart expand-icon - The expand/collapse toggle button.\n * @csspart label - The label text content area.\n * @csspart children - The children container.\n *\n * @cssprop [--hx-tree-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-tree-item-hover-bg=var(--hx-color-neutral-100)] - Hover background color.\n * @cssprop [--hx-tree-item-selected-bg=var(--hx-color-primary-100)] - Selected background color.\n * @cssprop [--hx-tree-item-selected-color=var(--hx-color-primary-800)] - Selected text color.\n * @cssprop [--hx-tree-item-padding-x=var(--hx-space-2)] - Horizontal padding.\n * @cssprop [--hx-tree-item-padding-y=var(--hx-space-1)] - Vertical padding.\n * @cssprop [--hx-tree-indent-size=1.5rem] - Indentation size per level.\n *\n * @fires {CustomEvent<HxTreeItemSelectDetail>} hx-tree-item-select - Dispatched when this item is clicked or activated via keyboard.\n */\n@customElement('hx-tree-item')\nexport class HelixTreeItem extends LitElement {\n  static override styles = [tokenStyles, helixTreeItemStyles];\n\n  // ─── Properties ───\n\n  /**\n   * Whether the item is expanded (showing children).\n   * @attr expanded\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Whether the item is selected.\n   * @attr selected\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /**\n   * Whether the item is disabled (non-interactive).\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  // ─── Internal State ───\n\n  /**\n   * Tracks whether any elements are assigned to the children slot, controlling expand icon visibility.\n   * @internal\n   */\n  @state() private _hasChildren = false;\n\n  /**\n   * Whether this item is the roving-tabindex active item in the tree.\n   * @internal\n   */\n  @state() private _rovingActive = false;\n\n  /**\n   * Cached ARIA position metadata. Computed once on connect and on slotchange\n   * of the parent container, avoiding repeated DOM traversal on every render.\n   * @internal\n   */\n  @state() private _level = 1;\n  /**\n   * One-based position of this item within its sibling set, set as aria-posinset.\n   * @internal\n   */\n  @state() private _posInSet = 1;\n  /**\n   * Total count of sibling hx-tree-item elements at the same level, set as aria-setsize.\n   * @internal\n   */\n  @state() private _setSize = 1;\n  /**\n   * Whether the owning hx-tree-view supports item selection (single or multiple mode).\n   * @internal\n   */\n  @state() private _selectable = false;\n\n  // ─── Computed ARIA ───\n\n  /**\n   * Whether this item has slotted children.\n   * @returns True if one or more elements are assigned to the children slot.\n   */\n  get hasChildItems(): boolean {\n    return this._hasChildren;\n  }\n\n  /**\n   * Recompute all cached ARIA metadata in a single DOM pass.\n   * Called on connect, slotchange, and whenever structural context may change.\n   * @internal\n   */\n  private _updateAriaMetadata(): void {\n    // Compute nesting level by counting ancestor hx-tree-item elements.\n    let level = 1;\n    let el: Element | null = this.parentElement;\n    while (el) {\n      if (el.tagName.toLowerCase() === 'hx-tree-item') level++;\n      el = el.parentElement;\n    }\n    this._level = level;\n\n    // Compute position-in-set and set-size from sibling hx-tree-item elements.\n    const parent = this.parentElement;\n    if (parent) {\n      const siblings = Array.from(parent.children).filter(\n        (c) => c.tagName.toLowerCase() === 'hx-tree-item',\n      );\n      this._posInSet = siblings.indexOf(this) + 1;\n      this._setSize = siblings.length;\n    } else {\n      this._posInSet = 1;\n      this._setSize = 1;\n    }\n\n    // Determine if the owning tree supports selection.\n    const tree = this.closest('hx-tree-view');\n    if (tree) {\n      const selection = tree.getAttribute('selection');\n      this._selectable = selection === 'single' || selection === 'multiple';\n    } else {\n      this._selectable = false;\n    }\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._updateAriaMetadata();\n  }\n\n  // ─── Children Detection ───\n\n  /**\n   * Updates _hasChildren and recomputes ARIA metadata when the children slot assignment changes.\n   * @internal\n   */\n  private _handleChildrenSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasChildren = slot.assignedElements().length > 0;\n    this._updateAriaMetadata();\n  }\n\n  // ─── Event Handlers ───\n\n  /**\n   * Toggles the expanded state when the expand/collapse button is clicked, stopping event propagation.\n   * @internal\n   */\n  private _handleExpandClick(e: Event): void {\n    e.stopPropagation();\n    if (this.disabled) return;\n    this.expanded = !this.expanded;\n  }\n\n  /**\n   * Dispatches the hx-tree-item-select event when the item is activated via click or keyboard.\n   * @internal\n   */\n  private _handleRowClick(): void {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent<HxTreeItemSelectDetail>('hx-tree-item-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item: this },\n      }),\n    );\n  }\n\n  /**\n   * Handles keyboard interaction for the tree item, including expand/collapse, activation, and delegation of list-navigation keys to the parent tree.\n   * @internal\n   */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n\n    switch (e.key) {\n      case 'ArrowRight':\n        e.preventDefault();\n        if (this._hasChildren && !this.expanded) {\n          this.expanded = true;\n        }\n        break;\n      case 'ArrowLeft':\n        e.preventDefault();\n        if (this._hasChildren && this.expanded) {\n          this.expanded = false;\n        }\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this._handleRowClick();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Home':\n      case 'End':\n        // Bubble up to hx-tree-view for navigation\n        break;\n    }\n  }\n\n  // ─── Public API ───\n\n  /**\n   * Sets the roving tabindex state for this item.\n   * When `active` is true, the item row gets `tabindex=\"0\"` making it the\n   * Tab-reachable item in the tree. All other items should be set to false.\n   * Called by the parent hx-tree-view to manage the roving tabindex pattern.\n   */\n  setRovingActive(active: boolean): void {\n    this._rovingActive = active;\n  }\n\n  /** Focus this item's interactive row element. */\n  override focus(): void {\n    const row = this.shadowRoot?.querySelector<HTMLElement>('.item-row');\n    row?.focus();\n  }\n\n  // ─── Render ───\n\n  /**\n   * Renders the expand/collapse chevron button, or a placeholder span when the item has no children.\n   * @internal\n   */\n  private _renderExpandIcon() {\n    if (!this._hasChildren) {\n      return html`<span class=\"expand-placeholder\" aria-hidden=\"true\"></span>`;\n    }\n    return html`\n      <button\n        part=\"expand-icon\"\n        class=\"expand-btn\"\n        tabindex=\"-1\"\n        aria-label=\"${this.expanded ? 'Collapse' : 'Expand'}\"\n        @click=${this._handleExpandClick}\n      >\n        <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n          <polyline points=\"6 4 10 8 6 12\" />\n        </svg>\n      </button>\n    `;\n  }\n\n  override render() {\n    const ariaExpanded = this._hasChildren ? String(this.expanded) : nothing;\n    const ariaSelected = this._selectable ? String(this.selected) : nothing;\n\n    return html`\n      <div part=\"item\" class=\"item\">\n        <div\n          part=\"row\"\n          class=\"item-row\"\n          role=\"treeitem\"\n          tabindex=${this._rovingActive ? '0' : '-1'}\n          aria-expanded=${ariaExpanded}\n          aria-selected=${ariaSelected}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-level=${this._level}\n          aria-posinset=${this._posInSet}\n          aria-setsize=${this._setSize}\n          @click=${this._handleRowClick}\n          @keydown=${this._handleKeyDown}\n        >\n          ${this._renderExpandIcon()}\n          <span class=\"item-icon\">\n            <slot name=\"icon\"></slot>\n          </span>\n          <span part=\"label\" class=\"item-label\">\n            <slot></slot>\n          </span>\n        </div>\n        <div\n          part=\"children\"\n          class=\"children ${this.expanded ? 'children--expanded' : ''}\"\n          role=\"group\"\n        >\n          <div class=\"children-inner\">\n            <slot name=\"children\" @slotchange=${this._handleChildrenSlotChange}></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tree-item': HelixTreeItem;\n  }\n}\n\n/** Canonical type alias for HelixTreeItem. Use this when typing hx-tree-item element references. */\nexport type HxTreeItem = HelixTreeItem;\n\n/** @deprecated Use {@link HxTreeItem} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcTreeItem = HelixTreeItem;\n"],"names":["helixTreeViewStyles","css","HelixTreeView","LitElement","container","items","child","item","activeIndex","index","clamped","_a","wasSelected","i","currentIndex","focused","_b","next","prev","currentItem","parentItem","_c","parentIndex","containerTabindex","html","nothing","tokenStyles","__decorateClass","property","state","customElement","helixTreeItemStyles","HelixTreeItem","level","el","parent","siblings","c","tree","selection","slot","active","row","ariaExpanded","ariaSelected"],"mappings":"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"}