@helixui/library 3.7.0 → 3.8.0-next.145

package/dist/shared/hx-tooltip-CamO-9nd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-tooltip-CamO-9nd.js","sources":["../../src/components/hx-tooltip/hx-tooltip.styles.ts","../../src/components/hx-tooltip/hx-tooltip.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * hx-tooltip styles.\n *\n * Component-tier tokens with two-level var() fallback:\n *   var(--hx-tooltip-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (3.2.0):\n *   neutral-0 = #FFFFFF, neutral-900 = #0D1825 (surface-inverse anchor).\n */\nexport const helixTooltipStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  .trigger-wrapper {\n    display: inline-block;\n  }\n\n  /*\n   * AAA 2.4.13 Focus Appearance — enforce a ≥2px focus ring on the slotted\n   * trigger. APG forbids the tooltip body from holding focus, so the\n   * trigger is the only AAA-relevant focus surface. Token-driven.\n   */\n  ::slotted([slot='trigger']:focus-visible),\n  ::slotted(button:focus-visible),\n  ::slotted(a:focus-visible) {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-tooltip-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  [part='tooltip'] {\n    position: fixed;\n    z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));\n    max-width: var(--hx-tooltip-max-width, 280px);\n    padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));\n    background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0d1825));\n    color: var(--hx-tooltip-color, var(--hx-color-text-inverse, #ffffff));\n    font-family: var(--hx-tooltip-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));\n    line-height: var(--hx-line-height-normal, 1.5);\n    border-radius: var(--hx-tooltip-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    box-shadow: var(\n      --hx-tooltip-shadow,\n      var(--hx-shadow-sm, 0 2px 8px var(--hx-overlay-black-20, rgba(0, 0, 0, 0.2)))\n    );\n    visibility: hidden;\n    opacity: 0;\n    transition:\n      opacity var(--hx-tooltip-transition-duration, var(--hx-transition-fast, 150ms ease)),\n      visibility var(--hx-tooltip-transition-duration, var(--hx-transition-fast, 150ms ease));\n    overflow-wrap: break-word;\n  }\n\n  [part='tooltip'].visible {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  [part='arrow'] {\n    position: absolute;\n    width: var(--hx-tooltip-arrow-size, 8px);\n    height: var(--hx-tooltip-arrow-size, 8px);\n    background: var(--hx-tooltip-bg, var(--hx-color-surface-inverse, #0d1825));\n    transform: rotate(45deg);\n    pointer-events: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [part='tooltip'] {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */\n\n  @media (forced-colors: active) {\n    [part='tooltip'] {\n      border: 1px solid CanvasText;\n    }\n\n    [part='arrow'] {\n      border: 1px solid CanvasText;\n    }\n  }\n`;\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\n\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixTooltipStyles } from './hx-tooltip.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\nconst _nextTooltipId = createIdCounter('hx-tooltip');\n\n/**\n * A tooltip that displays contextual help text on hover or focus.\n *\n * ## Architecture Note: Light-DOM Description Shim (group-4 round-1)\n *\n * `aria-describedby` IDREFs cannot resolve across the Shadow DOM boundary —\n * the trigger lives in the consumer's light DOM and references a tooltip\n * whose body is in this component's shadow root. The tooltip text must\n * therefore be exposed in DOCUMENT scope.\n *\n * The shim is a single visually-hidden `<span>` appended to `document.body`\n * with the `_tooltipId` as its `id`. The trigger's `aria-describedby` points\n * at this span. The text content is mirrored from the slotted `content`\n * slot on every relevant signal:\n *\n *   1. `firstUpdated` (initial wiring)\n *   2. `slotchange` on the default slot AND the `content` slot (the slotted\n *      element list changes)\n *   3. **Text-content mutations on the assigned `content` slot elements**\n *      (round-23 P2 pattern). Without this observer a framework that\n *      rewrites the slotted `<span slot=\"content\">` `textContent` IN PLACE\n *      (Vue / React keyed text rerender) would leave the shim stale.\n *\n * Cleanup: `disconnectedCallback` removes the shim from `document.body`,\n * disconnects the slot-text observer, and clears the timers. SSR is\n * sidestepped by guarding `document` access — the shim is created lazily\n * the first time `_setupTriggerAria()` runs in a browser environment.\n *\n * `role=\"tooltip\"` is the correct APG role and is NEVER promoted to\n * `role=\"dialog\"` — APG explicitly forbids tooltips from holding focus and\n * the tooltip body is not a focus target. No host-canonical `_internals`\n * work is owed: the trigger is the announced surface, and it correctly\n * references the tooltip via `aria-describedby`.\n *\n * @summary Contextual help text and abbreviations with smart positioning.\n *\n * @tag hx-tooltip\n *\n * @slot - Default slot for the trigger element.\n * @slot content - Tooltip content to display.\n *\n * @csspart tooltip - The tooltip container element.\n * @csspart arrow - The arrow indicator element.\n *\n * @cssprop [--hx-tooltip-bg=var(--hx-color-neutral-900)] - Tooltip background color.\n * @cssprop [--hx-tooltip-color=var(--hx-color-neutral-50)] - Tooltip text color.\n * @cssprop [--hx-tooltip-font-size=var(--hx-font-size-xs)] - Tooltip font size.\n * @cssprop [--hx-tooltip-max-width=280px] - Maximum tooltip width.\n * @cssprop [--hx-tooltip-padding] - Tooltip padding.\n * @cssprop [--hx-tooltip-border-radius=var(--hx-border-radius-sm)] - Tooltip border radius.\n * @cssprop [--hx-tooltip-shadow] - Tooltip box shadow.\n * @cssprop [--hx-tooltip-z-index=9999] - Tooltip z-index.\n * @cssprop [--hx-tooltip-transition-duration=0.15s] - Show/hide transition duration.\n * @cssprop [--hx-tooltip-arrow-size=8px] - Size of the arrow indicator.\n *\n * @example\n * ```html\n * <hx-tooltip>\n *   <button>Hover me</button>\n *   <span slot=\"content\">Helpful context here</span>\n * </hx-tooltip>\n * ```\n *\n * @example Drupal/Twig usage\n * ```twig\n * <hx-tooltip>\n *   <button type=\"button\">{{ trigger_label }}</button>\n *   <span slot=\"content\">{{ tooltip_text }}</span>\n * </hx-tooltip>\n * ```\n * @cssprop [--hx-tooltip-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-z-index-tooltip] - Z-index layer.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-shadow-sm] - Box shadow.\n * @cssprop [--hx-overlay-black-20] - Overlay color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @aaa-certified 2026-05-08\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-tooltip/AAA-AUDIT.md\n * @keyboard-contract dismiss=Escape\n * @aria-pattern tooltip\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated false\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-tooltip\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n */\n\n@customElement('hx-tooltip')\nexport class HelixTooltip extends HelixElement {\n  static override styles = [helixTooltipStyles, forcedColorsSurface];\n\n  /**\n   * Preferred placement of the tooltip relative to the trigger.\n   * Supports all Floating UI placement values including alignment variants\n   * (e.g. 'top-start', 'bottom-end') and 'auto'.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /**\n   * Delay in milliseconds before the tooltip is shown.\n   * @attr show-delay\n   */\n  @property({ type: Number, attribute: 'show-delay' })\n  showDelay = 300;\n\n  /**\n   * Delay in milliseconds before the tooltip is hidden.\n   * @attr hide-delay\n   */\n  @property({ type: Number, attribute: 'hide-delay' })\n  hideDelay = 100;\n\n  /** @internal */\n  @state() private _visible = false;\n\n  /** @internal */\n  private _showTimer: ReturnType<typeof setTimeout> | null = null;\n  /** @internal */\n  private _hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** @internal */\n  private readonly _tooltipId = _nextTooltipId();\n\n  /** @internal */\n  @query('slot:not([name])') private _defaultSlot!: HTMLSlotElement | null;\n  /** @internal */\n  @query('slot[name=\"content\"]') private _contentSlot!: HTMLSlotElement | null;\n  /** @internal */\n  @query('.trigger-wrapper') private _triggerWrapper!: HTMLElement | null;\n  /** @internal */\n  @query('[part=\"tooltip\"]') private _tooltipEl!: HTMLElement | null;\n  /** @internal */\n  @query('[part=\"arrow\"]') private _arrowEl!: HTMLElement | null;\n\n  /**\n   * Visually-hidden description element in light DOM.\n   * Necessary because aria-describedby cannot cross Shadow DOM boundaries —\n   * ARIA ID references are scoped to the element's root node. This element\n   * lives in the document scope so the trigger's aria-describedby resolves correctly.\n   * @internal\n   */\n  private _lightDomDescription: HTMLSpanElement | null = null;\n\n  /**\n   * Watches in-place text mutations on the elements assigned to the\n   * `<slot name=\"content\">`. Without this observer, a framework that\n   * rewrites the slotted `<span slot=\"content\">` `textContent` in place\n   * would leave the document-scope shim stale — the `slotchange` event\n   * does NOT fire on descendant text mutations.\n   *\n   * The observer is reinstalled on every `_setupTriggerAria()` call against\n   * the deduped current set of assigned elements; it is fully torn down in\n   * `disconnectedCallback` to prevent leaks on SSR teardown.\n   * @internal\n   */\n  private _contentSlotTextObserver: MutationObserver | null = null;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n    // Re-run ARIA setup on reconnection (firstUpdated does not re-run).\n    // hasUpdated is true after the first update cycle completes.\n    if (this.hasUpdated) {\n      this._setupTriggerAria();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n    this._clearTimers();\n    this._lightDomDescription?.remove();\n    this._lightDomDescription = null;\n    // Round-23 P2: tear down the slotted-content text observer so a\n    // disconnect-then-reconnect cycle never leaks observers and the\n    // observed light-DOM nodes do not retain a reference to this host.\n    this._contentSlotTextObserver?.disconnect();\n    this._contentSlotTextObserver = null;\n  }\n\n  override firstUpdated(): void {\n    this._setupTriggerAria();\n  }\n\n  // ─── ARIA setup ───\n\n  /** @internal */\n  private _setupTriggerAria(): void {\n    const slot = this._defaultSlot;\n    if (!slot) return;\n    const trigger = slot.assignedElements()[0] as HTMLElement | undefined;\n\n    // Sync content from the content slot into a visually-hidden light DOM element.\n    // aria-describedby cannot cross Shadow DOM boundaries, so the referenced element\n    // must live in the document scope (light DOM), not inside the shadow root.\n    const contentSlot = this._contentSlot;\n    const contentEls = contentSlot?.assignedElements() ?? [];\n    const contentText = contentEls\n      .map((el) => el.textContent)\n      .join(' ')\n      .trim();\n\n    // Guard for SSR — document is unavailable server-side\n    if (!this._lightDomDescription && typeof document !== 'undefined') {\n      this._lightDomDescription = document.createElement('span');\n      this._lightDomDescription.id = this._tooltipId;\n      // Visually hidden but accessible to screen readers via aria-describedby.\n      // Appended to document.body (not this element) so that the ID is in the\n      // document scope and resolves correctly across shadow DOM boundaries.\n      // Web components must not mutate their own light DOM children.\n      this._lightDomDescription.style.cssText =\n        'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';\n      document.body.appendChild(this._lightDomDescription);\n    }\n    if (this._lightDomDescription) {\n      this._lightDomDescription.textContent = contentText;\n    }\n\n    if (trigger) {\n      trigger.setAttribute('aria-describedby', this._tooltipId);\n    }\n\n    // Round-23 P2 pattern: observe in-place text mutations on the assigned\n    // content elements so a framework-driven `textContent` rewrite re-syncs\n    // the document-scope shim. `slotchange` fires only on the assignment\n    // list itself, never on descendant text/attribute mutations.\n    this._installContentSlotTextObserver(contentEls);\n  }\n\n  /**\n   * (Re-)installs the slotted-content text observer over the deduped union\n   * of assigned `content` slot elements. Disconnects any previous observer\n   * before re-attaching so observer count is bounded by component lifetime,\n   * not by `slotchange` event count.\n   * @internal\n   */\n  private _installContentSlotTextObserver(elements: Element[]): void {\n    if (this._contentSlotTextObserver) {\n      this._contentSlotTextObserver.disconnect();\n      this._contentSlotTextObserver = null;\n    }\n    if (elements.length === 0) return;\n    if (typeof MutationObserver === 'undefined') return;\n    const unique = new Set<Element>(elements);\n    const observer = new MutationObserver(() => {\n      // Re-flatten the current assignment and write the fresh text into the\n      // shim. We deliberately do NOT call `_setupTriggerAria()` here — that\n      // would reinstall this very observer in a tight loop. The trigger's\n      // `aria-describedby` and the shim element are already wired; only the\n      // text mirror needs to be refreshed.\n      if (!this._lightDomDescription) return;\n      const contentSlot = this._contentSlot;\n      const fresh =\n        contentSlot\n          ?.assignedElements()\n          .map((el) => el.textContent)\n          .join(' ')\n          .trim() ?? '';\n      if (this._lightDomDescription.textContent !== fresh) {\n        this._lightDomDescription.textContent = fresh;\n      }\n    });\n    for (const el of unique) {\n      observer.observe(el, {\n        characterData: true,\n        subtree: true,\n        childList: true,\n      });\n    }\n    this._contentSlotTextObserver = observer;\n  }\n\n  // ─── Show/Hide ───\n\n  /** @internal */\n  private _scheduleShow(): void {\n    this._clearTimers();\n    this._showTimer = setTimeout(() => {\n      void this._show();\n    }, this.showDelay);\n  }\n\n  /** @internal */\n  private _scheduleHide(): void {\n    this._clearTimers();\n    this._hideTimer = setTimeout(() => {\n      this._hide();\n    }, this.hideDelay);\n  }\n\n  /** @internal */\n  private async _show(): Promise<void> {\n    this._visible = true;\n    await this.updateComplete;\n    await this._updatePosition();\n  }\n\n  /** @internal */\n  private _hide(): void {\n    this._visible = false;\n  }\n\n  /** @internal */\n  private _clearTimers(): void {\n    if (this._showTimer !== null) {\n      clearTimeout(this._showTimer);\n      this._showTimer = null;\n    }\n    if (this._hideTimer !== null) {\n      clearTimeout(this._hideTimer);\n      this._hideTimer = null;\n    }\n  }\n\n  // ─── Positioning ───\n\n  /** @internal */\n  private async _updatePosition(): Promise<void> {\n    const reference = this._triggerWrapper;\n    const tooltipEl = this._tooltipEl;\n    const arrowEl = this._arrowEl;\n\n    if (!reference || !tooltipEl || !arrowEl) return;\n\n    const { computePosition, flip, shift, offset, arrow } = await import('@floating-ui/dom');\n    const { x, y, placement, middlewareData } = await computePosition(reference, tooltipEl, {\n      placement: this.placement,\n      strategy: 'fixed',\n      middleware: [offset(8), flip(), shift({ padding: 8 }), arrow({ element: arrowEl })],\n    });\n\n    Object.assign(tooltipEl.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    const arrowData = middlewareData.arrow;\n    const basePlacement = placement.split('-')[0] ?? 'top';\n    const oppositeSide: Record<string, string> = {\n      top: 'bottom',\n      right: 'left',\n      bottom: 'top',\n      left: 'right',\n    };\n    const staticSide = oppositeSide[basePlacement] ?? 'bottom';\n\n    // Offset is derived from the arrow element's actual size so that custom\n    // --hx-tooltip-arrow-size values position the arrow correctly.\n    Object.assign(arrowEl.style, {\n      left: arrowData?.x != null ? `${arrowData.x}px` : '',\n      top: arrowData?.y != null ? `${arrowData.y}px` : '',\n      right: '',\n      bottom: '',\n      [staticSide]: `${-(arrowEl.offsetWidth / 2)}px`,\n    });\n  }\n\n  // ─── Events ───\n\n  /** @internal */\n  private _handleKeydown = (e: Event): void => {\n    if (!(e instanceof KeyboardEvent)) return;\n    if (e.key === 'Escape' && this._visible) {\n      this._clearTimers();\n      this._hide();\n    }\n  };\n\n  /**\n   * Handle mouseleave on the trigger wrapper.\n   * Does not schedule hide if keyboard focus is still on the trigger element,\n   * preventing mixed keyboard+mouse interactions from dismissing the tooltip\n   * while the user is still navigating by keyboard.\n   * @internal\n   */\n  private _handleTriggerMouseleave(): void {\n    const slot = this._defaultSlot;\n    const trigger = slot?.assignedElements()[0] as HTMLElement | undefined;\n    // Guard for SSR — document is unavailable server-side\n    const active = typeof document !== 'undefined' ? document.activeElement : null;\n    if (trigger && (trigger === active || trigger.contains(active))) {\n      return;\n    }\n    this._scheduleHide();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger-wrapper\"\n        @mouseenter=${this._scheduleShow}\n        @mouseleave=${this._handleTriggerMouseleave}\n        @focusin=${this._scheduleShow}\n        @focusout=${this._scheduleHide}\n      >\n        <slot @slotchange=${this._setupTriggerAria}></slot>\n      </div>\n      <div\n        part=\"tooltip\"\n        id=${this._tooltipId}\n        role=\"tooltip\"\n        aria-hidden=${String(!this._visible)}\n        class=${this._visible ? 'visible' : ''}\n        @mouseenter=${this._clearTimers}\n        @mouseleave=${this._scheduleHide}\n      >\n        <slot name=\"content\" @slotchange=${this._setupTriggerAria}></slot>\n        <div part=\"arrow\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-tooltip': HelixTooltip;\n  }\n}\n"],"names":["helixTooltipStyles","css","_nextTooltipId","createIdCounter","HelixTooltip","HelixElement","e","_a","_b","slot","trigger","contentSlot","contentEls","contentText","el","elements","unique","observer","fresh","reference","tooltipEl","arrowEl","computePosition","flip","shift","offset","arrow","x","y","placement","middlewareData","arrowData","basePlacement","staticSide","active","html","forcedColorsSurface","__decorateClass","property","state","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-top-nav-DP6OFS8C.js → hx-top-nav-vP6oDWMV.js}

@@ -1,9 +1,9 @@
-import { css as v, svg as d, html as p } from "lit";
-import { property as c, state as h, customElement as m } from "lit/decorators.js";
+import { css as c, html as d } from "lit";
+import { property as p, state as v, customElement as h } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
-import { f as x } from "./forced-colors-CTEDFRGa.js";
-import { H as g } from "./helix-element-BNEYeiys.js";
-const f = v`
+import { f as m } from "./forced-colors-CTEDFRGa.js";
+import { H as x } from "./helix-element-BNEYeiys.js";
+const g = c`
   /* ─── Host ─── */
 
   :host {
@@ -82,9 +82,20 @@ const f = v`
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
+  /*
+   * AAA 2.4.13 Focus Appearance — enforce a ≥2px ring on slotted nav
+   * controls (links, buttons, hx-link, hx-button). Slotted bare anchors
+   * otherwise fall back to the 1px browser default.
+   */
+  ::slotted(a:focus-visible),
+  ::slotted(button:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-top-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
   .mobile-toggle__icon {
-    width: var(--hx-space-6, 1.5rem);
-    height: var(--hx-space-6, 1.5rem);
+    --hx-icon-size: var(--hx-space-6, 1.5rem);
   }
 
   /* ─── Collapsible panel (mobile) ─── */
@@ -228,12 +239,12 @@ const f = v`
     }
   }
 `;
-var u = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, s = (n, e, t, o) => {
-  for (var a = o > 1 ? void 0 : o ? _(e, t) : e, i = n.length - 1, r; i >= 0; i--)
-    (r = n[i]) && (a = (o ? r(e, t, a) : r(a)) || a);
-  return o && a && u(e, t, a), a;
+var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, s = (n, e, t, o) => {
+  for (var a = o > 1 ? void 0 : o ? u(e, t) : e, r = n.length - 1, i; r >= 0; r--)
+    (i = n[r]) && (a = (o ? i(e, t, a) : i(a)) || a);
+  return o && a && f(e, t, a), a;
 };
-let l = class extends g {
+let l = class extends x {
   constructor() {
     super(...arguments), this.sticky = !1, this.label = "Site Navigation", this._mobileOpen = !1, this._handleKeydown = (n) => {
       n.key === "Escape" && this._mobileOpen && (this._mobileOpen = !1, this.dispatchEvent(
@@ -268,15 +279,15 @@ let l = class extends g {
       var a;
       const n = 'a[href], button:not([disabled]), [tabindex="0"]', e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot:not([name])"), t = (e == null ? void 0 : e.assignedElements({ flatten: !0 })) ?? [];
       let o = null;
-      for (const i of t) {
-        if (!(i instanceof HTMLElement)) continue;
-        if (i.matches(n)) {
-          o = i;
+      for (const r of t) {
+        if (!(r instanceof HTMLElement)) continue;
+        if (r.matches(n)) {
+          o = r;
           break;
         }
-        const r = i.querySelector(n);
-        if (r) {
-          o = r;
+        const i = r.querySelector(n);
+        if (i) {
+          o = i;
           break;
         }
       }
@@ -286,26 +297,13 @@ let l = class extends g {
   // ─── Render Helpers ───
   /** @internal */
   _renderHamburgerIcon() {
-    return p`
-      <svg
+    return d`
+      <hx-icon
         class="mobile-toggle__icon"
+        library="helix"
+        name=${this._mobileOpen ? "close" : "menu"}
         aria-hidden="true"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        ${this._mobileOpen ? d`
-              <line x1="18" y1="6" x2="6" y2="18"></line>
-              <line x1="6" y1="6" x2="18" y2="18"></line>
-            ` : d`
-              <line x1="3" y1="6" x2="21" y2="6"></line>
-              <line x1="3" y1="12" x2="21" y2="12"></line>
-              <line x1="3" y1="18" x2="21" y2="18"></line>
-            `}
-      </svg>
+      ></hx-icon>
     `;
   }
   // ─── Render ───
@@ -314,7 +312,7 @@ let l = class extends g {
       nav__collapsible: !0,
       "nav__collapsible--open": this._mobileOpen
     };
-    return p`
+    return d`
       <header part="header">
         <nav part="nav" class="nav" aria-label=${this.label}>
           <div class="nav__bar">
@@ -349,20 +347,20 @@ let l = class extends g {
     `;
   }
 };
-l.styles = [f, x];
+l.styles = [g, m];
 s([
-  c({ type: Boolean, reflect: !0 })
+  p({ type: Boolean, reflect: !0 })
 ], l.prototype, "sticky", 2);
 s([
-  c({ type: String })
+  p({ type: String })
 ], l.prototype, "label", 2);
 s([
-  h()
+  v()
 ], l.prototype, "_mobileOpen", 2);
 l = s([
-  m("hx-top-nav")
+  h("hx-top-nav")
 ], l);
 export {
   l as H
 };
-//# sourceMappingURL=hx-top-nav-DP6OFS8C.js.map
+//# sourceMappingURL=hx-top-nav-vP6oDWMV.js.map

package/dist/shared/hx-top-nav-vP6oDWMV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-top-nav-vP6oDWMV.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-surface-default, #ffffff));\n    color: var(--hx-top-nav-color, var(--hx-color-text-strong, #202b39));\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-border-default, #d6dbd5));\n    font-family: var(--hx-top-nav-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-text-strong, #202b39));\n    cursor: pointer;\n    line-height: 0;\n  }\n\n  .mobile-toggle:hover {\n    background: var(--hx-top-nav-toggle-hover-bg, var(--hx-color-surface-sunken, #ebeee9));\n  }\n\n  .mobile-toggle:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-top-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /*\n   * AAA 2.4.13 Focus Appearance — enforce a ≥2px ring on slotted nav\n   * controls (links, buttons, hx-link, hx-button). Slotted bare anchors\n   * otherwise fall back to the 1px browser default.\n   */\n  ::slotted(a:focus-visible),\n  ::slotted(button:focus-visible) {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-top-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .mobile-toggle__icon {\n    --hx-icon-size: 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-border-default, #d6dbd5));\n  }\n\n  .nav__collapsible--open {\n    display: flex;\n    animation: hx-mobile-nav-open var(--hx-duration-fast, 100ms) 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-border-default, #d6dbd5));\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  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .nav {\n      border-bottom-color: CanvasText;\n    }\n\n    .mobile-toggle {\n      color: ButtonText;\n      border: 1px solid ButtonText;\n    }\n\n    .nav__collapsible {\n      border-top-color: CanvasText;\n    }\n\n    .nav__actions {\n      border-top-color: CanvasText;\n    }\n  }\n`;\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport '../hx-icon/hx-icon.js';\nimport { HelixElement } from '../../base/index.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\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 * @cssprop [--hx-top-nav-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-z-index-sticky] - Z-index layer.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-space-16] - Spacing token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-duration-fast] - Animation duration.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @aaa-certified 2026-05-08\n * @aaa-criteria 1.4.6, 1.4.9, 2.1.3, 2.3.3, 2.4.12, 2.4.13, 2.5.5, 3.2.5, 3.3.6, forced-colors, apg-keyboard\n * @aaa-audit src/components/hx-top-nav/AAA-AUDIT.md\n * @keyboard-contract navigate=Arrow,Home,End; activate=Enter,Space\n * @aria-pattern navigation\n * @aria-pattern-source https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/navigation.html\n * @forced-colors-supported true\n * @stability stable\n * @since 3.7.0\n * @form-associated false\n * @theme-aware true\n * @brand-aware true\n * @drupal-sdc-eligible true\n * @react-wrapper-status complete\n * @figma-component-name hx-top-nav\n * @priority-tier P0\n * @phi-handles false\n * @clinical-context none\n */\n@customElement('hx-top-nav')\nexport class HelixTopNav extends HelixElement {\n  static override styles = [helixTopNavStyles, forcedColorsInteractive];\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  /** @internal */\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  /** @internal */\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      void 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  /** @internal */\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 after Lit re-render completes\n      void this.updateComplete.then(() => {\n        this.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"mobile-toggle\"]')?.focus();\n      });\n    }\n  };\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderHamburgerIcon() {\n    return html`\n      <hx-icon\n        class=\"mobile-toggle__icon\"\n        library=\"helix\"\n        name=${this._mobileOpen ? 'close' : 'menu'}\n        aria-hidden=\"true\"\n      ></hx-icon>\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","HelixElement","e","_b","_a","FOCUSABLE_SELECTOR","slot","assigned","firstFocusable","el","found","html","menuClasses","classMap","forcedColorsInteractive","__decorateClass","property","state","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAoBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;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"}

package/dist/shared/{hx-tree-item-CXyspGxI.js → hx-tree-item-D8hwKd5m.js}

@@ -81,9 +81,9 @@ function R(e) {
   return null;
 }
 var H = Object.defineProperty, T = Object.getOwnPropertyDescriptor, b = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? T(t, s) : t, n = e.length - 1, l; n >= 0; n--)
-    (l = e[n]) && (r = (i ? l(t, s, r) : l(r)) || r);
-  return i && r && H(t, s, r), r;
+  for (var a = i > 1 ? void 0 : i ? T(t, s) : t, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (a = (i ? l(t, s, a) : l(a)) || a);
+  return i && a && H(t, s, a), a;
 };
 let d = class extends A {
   constructor() {
@@ -154,8 +154,8 @@ let d = class extends A {
     if (this.selection !== "none") {
       if (this.selection === "single") {
         const i = s.selected;
-        this._getSelectedItems().forEach((r) => {
-          r.selected = !1;
+        this._getSelectedItems().forEach((a) => {
+          a.selected = !1;
         }), s.selected = !i;
       } else this.selection === "multiple" && (s.selected = !s.selected);
       this.dispatchEvent(
@@ -169,37 +169,37 @@ let d = class extends A {
   }
   /** @internal */
   _handleKeyDown(e) {
-    var r, n, l;
+    var a, n, l;
     const t = this._getVisibleItems();
     if (t.length === 0) return;
     let s = this._currentIndex;
     const i = document.activeElement;
-    for (let a = 0; a < t.length; a++)
-      if (t[a] === i || (n = (r = t[a]) == null ? void 0 : r.shadowRoot) != null && n.activeElement) {
-        s = a;
+    for (let r = 0; r < t.length; r++)
+      if (t[r] === i || (n = (a = t[r]) == null ? void 0 : a.shadowRoot) != null && n.activeElement) {
+        s = r;
         break;
       }
     switch (e.key) {
       case "ArrowDown": {
         e.preventDefault();
-        const a = s < t.length - 1 ? s + 1 : 0;
-        this._focusItem(a);
+        const r = s < t.length - 1 ? s + 1 : 0;
+        this._focusItem(r);
         break;
       }
       case "ArrowUp": {
         e.preventDefault();
-        const a = s > 0 ? s - 1 : t.length - 1;
-        this._focusItem(a);
+        const r = s > 0 ? s - 1 : t.length - 1;
+        this._focusItem(r);
         break;
       }
       case "ArrowLeft": {
         e.preventDefault();
-        const a = t[s];
-        if (!a || a.disabled) break;
-        if (a.expanded && a.hasChildItems)
-          a.expanded = !1, this._invalidateVisibleItemsCache();
+        const r = t[s];
+        if (!r || r.disabled) break;
+        if (r.expanded && r.hasChildItems)
+          r.expanded = !1, this._invalidateVisibleItemsCache();
         else {
-          const p = (l = a.parentElement) == null ? void 0 : l.closest("hx-tree-item");
+          const p = (l = r.parentElement) == null ? void 0 : l.closest("hx-tree-item");
           if (p) {
             const _ = t.indexOf(p);
             _ >= 0 && this._focusItem(_);
@@ -209,9 +209,9 @@ let d = class extends A {
       }
       case "ArrowRight": {
         e.preventDefault();
-        const a = t[s];
-        if (!a || a.disabled) break;
-        a.hasChildItems && (a.expanded ? this._focusItem(s + 1) : (a.expanded = !0, this._invalidateVisibleItemsCache()));
+        const r = t[s];
+        if (!r || r.disabled) break;
+        r.hasChildItems && (r.expanded ? this._focusItem(s + 1) : (r.expanded = !0, this._invalidateVisibleItemsCache()));
         break;
       }
       case "Home": {
@@ -225,8 +225,8 @@ let d = class extends A {
       default: {
         if (e.key.length === 1) {
           e.preventDefault();
-          const a = this._findTypeaheadMatch(e.key.toLowerCase(), s);
-          a !== -1 && this._focusItem(a);
+          const r = this._findTypeaheadMatch(e.key.toLowerCase(), s);
+          r !== -1 && this._focusItem(r);
         }
         break;
       }
@@ -241,9 +241,9 @@ let d = class extends A {
     const s = this._getVisibleItems();
     if (s.length === 0) return -1;
     for (let i = 1; i <= s.length; i++) {
-      const r = (t + i) % s.length, n = s[r];
+      const a = (t + i) % s.length, n = s[a];
       if (n && n.labelText.toLowerCase().startsWith(e))
-        return r;
+        return a;
     }
     return -1;
   }
@@ -260,9 +260,9 @@ let d = class extends A {
   _updateAriaMetadataForContainer(e, t) {
     const s = this.selection === "single" || this.selection === "multiple", i = Array.from(e.children).filter(
       (n) => n.tagName.toLowerCase() === "hx-tree-item"
-    ), r = i.length;
+    ), a = i.length;
     i.forEach((n, l) => {
-      n.setAriaMetadata(t, l + 1, r, s), this._updateAriaMetadataForContainer(n, t + 1);
+      n.setAriaMetadata(t, l + 1, a, s), this._updateAriaMetadataForContainer(n, t + 1);
     });
   }
   /**
@@ -318,13 +318,13 @@ let d = class extends A {
     var l;
     const e = this._internals;
     this._supportsIdrefRefs ? (e.role = "tree", e.ariaMultiSelectable = this.selection === "none" ? null : this.selection === "multiple" ? "true" : "false") : (e.role = null, e.ariaLabel = null, e.ariaMultiSelectable = null);
-    const t = ((l = this.getAttribute("aria-label")) == null ? void 0 : l.trim()) || "", s = this.getAttribute("aria-labelledby"), i = S(this, s), r = i.length > 0;
+    const t = ((l = this.getAttribute("aria-label")) == null ? void 0 : l.trim()) || "", s = this.getAttribute("aria-labelledby"), i = S(this, s), a = i.length > 0;
     if (this._supportsIdrefRefs) {
-      const a = e;
-      a.ariaLabelledByElements = r ? i : null;
+      const r = e;
+      r.ariaLabelledByElements = a ? i : null;
     }
     let n = "";
-    r ? (n = i.map((p) => C(p)).filter(Boolean).join(" ") || t || this.label || "Tree", this._supportsIdrefRefs && (e.ariaLabel = null)) : t ? (n = t, this._supportsIdrefRefs && (e.ariaLabel = t)) : (n = this.label || "Tree", this._supportsIdrefRefs && (e.ariaLabel = n)), this._resolvedAccessibleName !== n && (this._resolvedAccessibleName = n, this._supportsIdrefRefs || this.requestUpdate());
+    a ? (n = i.map((p) => C(p)).filter(Boolean).join(" ") || t || this.label || "Tree", this._supportsIdrefRefs && (e.ariaLabel = null)) : t ? (n = t, this._supportsIdrefRefs && (e.ariaLabel = t)) : (n = this.label || "Tree", this._supportsIdrefRefs && (e.ariaLabel = n)), this._resolvedAccessibleName !== n && (this._resolvedAccessibleName = n, this._supportsIdrefRefs || this.requestUpdate());
   }
   // ─── Render ───
   render() {
@@ -477,18 +477,12 @@ const $ = x`
     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);
-    stroke: currentColor;
-    fill: none;
-    stroke-width: 2;
-    stroke-linecap: round;
-    stroke-linejoin: round;
+  .expand-btn .expand-glyph {
+    --hx-icon-size: var(--hx-space-3, 0.75rem);
     transition: transform var(--hx-transition-fast, 150ms ease);
   }
 
-  :host([expanded]) .expand-btn svg {
+  :host([expanded]) .expand-btn .expand-glyph {
     transform: rotate(90deg);
   }
 
@@ -566,9 +560,9 @@ const $ = x`
   }
 `;
 var M = Object.defineProperty, D = Object.getOwnPropertyDescriptor, h = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? D(t, s) : t, n = e.length - 1, l; n >= 0; n--)
-    (l = e[n]) && (r = (i ? l(t, s, r) : l(r)) || r);
-  return i && r && M(t, s, r), r;
+  for (var a = i > 1 ? void 0 : i ? D(t, s) : t, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (a = (i ? l(t, s, a) : l(a)) || a);
+  return i && a && M(t, s, a), a;
 };
 let o = class extends A {
   constructor() {
@@ -628,16 +622,16 @@ let o = class extends A {
     this._level = e;
     const s = this.parentElement;
     if (s) {
-      const r = Array.from(s.children).filter(
+      const a = Array.from(s.children).filter(
         (n) => n.tagName.toLowerCase() === "hx-tree-item"
       );
-      this._posInSet = r.indexOf(this) + 1, this._setSize = r.length;
+      this._posInSet = a.indexOf(this) + 1, this._setSize = a.length;
     } else
       this._posInSet = 1, this._setSize = 1;
     const i = this.closest("hx-tree-view");
     if (i) {
-      const r = i.getAttribute("selection");
-      this._selectable = r === "single" || r === "multiple";
+      const a = i.getAttribute("selection");
+      this._selectable = a === "single" || a === "multiple";
     } else
       this._selectable = !1;
   }
@@ -700,15 +694,15 @@ let o = class extends A {
     var l;
     const e = this._internals;
     this._supportsIdrefRefs ? (e.role = "treeitem", e.ariaDisabled = this.disabled ? "true" : null, e.ariaSelected = this._selectable ? this.selected ? "true" : "false" : null, e.ariaExpanded = this._hasChildren ? this.expanded ? "true" : "false" : null, e.ariaLevel = String(this._level), e.ariaPosInSet = String(this._posInSet), e.ariaSetSize = String(this._setSize)) : (e.role = null, e.ariaLabel = null, e.ariaDisabled = null, e.ariaSelected = null, e.ariaExpanded = null, e.ariaLevel = null, e.ariaPosInSet = null, e.ariaSetSize = null);
-    const t = ((l = this.getAttribute("aria-label")) == null ? void 0 : l.trim()) || "", s = this.getAttribute("aria-labelledby"), i = S(this, s), r = i.length > 0;
+    const t = ((l = this.getAttribute("aria-label")) == null ? void 0 : l.trim()) || "", s = this.getAttribute("aria-labelledby"), i = S(this, s), a = i.length > 0;
     if (this._supportsIdrefRefs) {
-      const a = e;
-      a.ariaLabelledByElements = r ? i : null;
+      const r = e;
+      r.ariaLabelledByElements = a ? i : null;
     }
     let n = "";
-    if (r) {
-      const a = i.map((p) => C(p)).filter(Boolean).join(" ") || t || "";
-      n = a, this._supportsIdrefRefs ? e.ariaLabel = null : e.ariaLabel = a || null;
+    if (a) {
+      const r = i.map((p) => C(p)).filter(Boolean).join(" ") || t || "";
+      n = r, this._supportsIdrefRefs ? e.ariaLabel = null : e.ariaLabel = r || null;
     } else t ? (n = t, e.ariaLabel = t) : e.ariaLabel = null;
     this._resolvedAccessibleName !== n && (this._resolvedAccessibleName = n, this._supportsIdrefRefs || this.requestUpdate());
   }
@@ -816,9 +810,12 @@ let o = class extends A {
         aria-label="${this.expanded ? "Collapse" : "Expand"}"
         @click=${this._handleExpandClick}
       >
-        <svg viewBox="0 0 16 16" aria-hidden="true">
-          <polyline points="6 4 10 8 6 12" />
-        </svg>
+        <hx-icon
+          class="expand-glyph"
+          library="helix"
+          name="chevron-right"
+          aria-hidden="true"
+        ></hx-icon>
       </button>
     ` : f`<span class="expand-placeholder" aria-hidden="true"></span>`;
   }
@@ -922,4 +919,4 @@ export {
   o as H,
   d as a
 };
-//# sourceMappingURL=hx-tree-item-CXyspGxI.js.map
+//# sourceMappingURL=hx-tree-item-D8hwKd5m.js.map