@helixui/library 3.8.0 → 3.9.0-next.150

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

@@ -154,15 +154,13 @@ const S = A`
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
-  .side-nav__toggle svg {
-    width: var(--hx-space-5, 1.25rem);
-    height: var(--hx-space-5, 1.25rem);
-    fill: currentColor;
+  .side-nav__toggle .side-nav__toggle-glyph {
+    --hx-icon-size: var(--hx-space-5, 1.25rem);
     flex-shrink: 0;
     transition: transform var(--hx-transition-normal, 300ms) ease;
   }
 
-  :host([collapsed]) .side-nav__toggle svg {
+  :host([collapsed]) .side-nav__toggle .side-nav__toggle-glyph {
     transform: rotate(180deg);
   }
 
@@ -214,10 +212,10 @@ const S = A`
     }
   }
 `;
-var H = Object.defineProperty, B = Object.getOwnPropertyDescriptor, u = (e, r, a, i) => {
-  for (var t = i > 1 ? void 0 : i ? B(r, a) : r, l = e.length - 1, n; l >= 0; l--)
-    (n = e[l]) && (t = (i ? n(r, a, t) : n(t)) || t);
-  return i && t && H(r, a, t), t;
+var H = Object.defineProperty, B = Object.getOwnPropertyDescriptor, u = (e, o, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? B(o, a) : o, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (t = (i ? n(o, a, t) : n(t)) || t);
+  return i && t && H(o, a, t), t;
 };
 let x = class extends I {
   constructor() {
@@ -238,8 +236,8 @@ let x = class extends I {
     var a;
     const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot:not([name])");
     if (!e) return;
-    const r = e.assignedElements({ flatten: !0 }).filter((i) => i.tagName.toLowerCase() === "hx-nav-item");
-    for (const i of r)
+    const o = e.assignedElements({ flatten: !0 }).filter((i) => i.tagName.toLowerCase() === "hx-nav-item");
+    for (const i of o)
       i instanceof HTMLElement && (this.collapsed ? i.setAttribute("data-collapsed", "") : i.removeAttribute("data-collapsed"));
   }
   /**
@@ -259,18 +257,18 @@ let x = class extends I {
    */
   /** @internal */
   _handleKeydown(e) {
-    var _, w, y, k, C;
+    var b, y, w, k, C;
     if (!["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Home", "End"].includes(e.key)) return;
-    const a = (_ = this.shadowRoot) == null ? void 0 : _.querySelector("slot:not([name])");
+    const a = (b = this.shadowRoot) == null ? void 0 : b.querySelector("slot:not([name])");
     if (!a) return;
     const i = a.assignedElements({ flatten: !0 }).filter(
-      (o) => o.tagName.toLowerCase() === "hx-nav-item" && !o.hasAttribute("disabled")
+      (r) => r.tagName.toLowerCase() === "hx-nav-item" && !r.hasAttribute("disabled")
     );
     if (i.length === 0) return;
     const t = [];
-    for (const o of i)
-      if (t.push(o), o.hasAttribute("expanded")) {
-        const s = (w = o.shadowRoot) == null ? void 0 : w.querySelector('slot[name="children"]');
+    for (const r of i)
+      if (t.push(r), r.hasAttribute("expanded")) {
+        const s = (y = r.shadowRoot) == null ? void 0 : y.querySelector('slot[name="children"]');
         if (s) {
           const g = s.assignedElements({ flatten: !0 }).filter(
             (m) => m.tagName.toLowerCase() === "hx-nav-item" && !m.hasAttribute("disabled")
@@ -281,22 +279,22 @@ let x = class extends I {
     if (t.length === 0) return;
     const l = document.activeElement;
     let n = -1;
-    for (let o = 0; o < t.length; o++) {
-      const s = t[o];
-      if (s && (s === l || s.contains(l) || ((y = s.shadowRoot) == null ? void 0 : y.contains(l)) === !0)) {
-        n = o;
+    for (let r = 0; r < t.length; r++) {
+      const s = t[r];
+      if (s && (s === l || s.contains(l) || ((w = s.shadowRoot) == null ? void 0 : w.contains(l)) === !0)) {
+        n = r;
         break;
       }
     }
     if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
       e.preventDefault();
-      const o = n >= 0 ? t[n] : null;
-      if (!o) return;
+      const r = n >= 0 ? t[n] : null;
+      if (!r) return;
       if (e.key === "ArrowRight") {
-        if (o.hasAttribute("expanded") === !1 && o.querySelector('[slot="children"]'))
-          o.setAttribute("expanded", ""), o.expanded = !0;
-        else if (o.hasAttribute("expanded")) {
-          const s = (k = o.shadowRoot) == null ? void 0 : k.querySelector('slot[name="children"]');
+        if (r.hasAttribute("expanded") === !1 && r.querySelector('[slot="children"]'))
+          r.setAttribute("expanded", ""), r.expanded = !0;
+        else if (r.hasAttribute("expanded")) {
+          const s = (k = r.shadowRoot) == null ? void 0 : k.querySelector('slot[name="children"]');
           if (s) {
             const g = s.assignedElements({ flatten: !0 }).find(
               (m) => m.tagName.toLowerCase() === "hx-nav-item" && !m.hasAttribute("disabled")
@@ -307,10 +305,10 @@ let x = class extends I {
             }
           }
         }
-      } else if (o.hasAttribute("expanded"))
-        o.removeAttribute("expanded"), o.expanded = !1;
+      } else if (r.hasAttribute("expanded"))
+        r.removeAttribute("expanded"), r.expanded = !1;
       else {
-        const s = o.closest("hx-nav-item:not(:scope)") ?? ((C = o.parentElement) == null ? void 0 : C.closest("hx-nav-item")) ?? null;
+        const s = r.closest("hx-nav-item:not(:scope)") ?? ((C = r.parentElement) == null ? void 0 : C.closest("hx-nav-item")) ?? null;
         s && !s.hasAttribute("disabled") && s.focus();
       }
       return;
@@ -318,8 +316,8 @@ let x = class extends I {
     e.preventDefault();
     let f;
     e.key === "ArrowDown" ? f = n < t.length - 1 ? n + 1 : 0 : e.key === "ArrowUp" ? f = n > 0 ? n - 1 : t.length - 1 : e.key === "Home" ? f = 0 : f = t.length - 1;
-    const b = t[f];
-    b && b.focus();
+    const _ = t[f];
+    _ && _.focus();
   }
   // ─── Event Handling ───
   /** @internal */
@@ -341,11 +339,12 @@ let x = class extends I {
   // ─── Render ───
   /** @internal */
   _renderToggleIcon() {
-    return c`<svg viewBox="0 0 20 20" aria-hidden="true">
-      <path
-        d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-      />
-    </svg>`;
+    return c`<hx-icon
+      class="side-nav__toggle-glyph"
+      library="helix"
+      name="chevron-left"
+      aria-hidden="true"
+    ></hx-icon>`;
   }
   render() {
     return c`
@@ -537,10 +536,8 @@ const D = A`
     transition: transform var(--hx-transition-normal, 300ms) ease;
   }
 
-  .nav-item__arrow svg {
-    width: var(--hx-space-4, 1rem);
-    height: var(--hx-space-4, 1rem);
-    fill: currentColor;
+  .nav-item__arrow .nav-item__arrow-glyph {
+    --hx-icon-size: var(--hx-space-4, 1rem);
   }
 
   :host([expanded]) .nav-item__arrow {
@@ -690,22 +687,22 @@ const D = A`
     }
   }
 `;
-var N = Object.defineProperty, j = Object.getOwnPropertyDescriptor, v = (e, r, a, i) => {
-  for (var t = i > 1 ? void 0 : i ? j(r, a) : r, l = e.length - 1, n; l >= 0; l--)
-    (n = e[l]) && (t = (i ? n(r, a, t) : n(t)) || t);
-  return i && t && N(r, a, t), t;
+var N = Object.defineProperty, j = Object.getOwnPropertyDescriptor, v = (e, o, a, i) => {
+  for (var t = i > 1 ? void 0 : i ? j(o, a) : o, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (t = (i ? n(o, a, t) : n(t)) || t);
+  return i && t && N(o, a, t), t;
 };
-const L = E("hx-nav-item");
+const O = E("hx-nav-item");
 let d = class extends I {
   constructor() {
-    super(...arguments), this._tooltipId = `${L()}-tooltip`, this.href = "", this.active = !1, this.expanded = !1, this.disabled = !1, this._hasChildren = !1, this._isCollapsed = !1;
+    super(...arguments), this._tooltipId = `${O()}-tooltip`, this.href = "", this.active = !1, this.expanded = !1, this.disabled = !1, this._hasChildren = !1, this._isCollapsed = !1;
   }
   // ─── Attribute Observer ───
   static get observedAttributes() {
     return [...super.observedAttributes, "data-collapsed"];
   }
-  attributeChangedCallback(e, r, a) {
-    super.attributeChangedCallback(e, r, a), e === "data-collapsed" && (this._isCollapsed = a !== null);
+  attributeChangedCallback(e, o, a) {
+    super.attributeChangedCallback(e, o, a), e === "data-collapsed" && (this._isCollapsed = a !== null);
   }
   // ─── Public API ───
   /**
@@ -716,21 +713,21 @@ let d = class extends I {
    */
   focus(e) {
     var a;
-    const r = (a = this.shadowRoot) == null ? void 0 : a.querySelector('[part="link"]');
-    r ? r.focus(e) : super.focus(e);
+    const o = (a = this.shadowRoot) == null ? void 0 : a.querySelector('[part="link"]');
+    o ? o.focus(e) : super.focus(e);
   }
   // ─── Slot Change Handler ───
   /** @internal */
   _onChildrenSlotChange(e) {
-    const r = e.target;
-    this._hasChildren = r.assignedNodes({ flatten: !0 }).length > 0;
+    const o = e.target;
+    this._hasChildren = o.assignedNodes({ flatten: !0 }).length > 0;
   }
   // ─── Private Helpers ───
   /** @internal */
   _getDirectText() {
     return Array.from(this.childNodes).filter((e) => e.nodeType === Node.TEXT_NODE).map((e) => {
-      var r;
-      return ((r = e.textContent) == null ? void 0 : r.trim()) ?? "";
+      var o;
+      return ((o = e.textContent) == null ? void 0 : o.trim()) ?? "";
     }).filter(Boolean).join(" ");
   }
   /** @internal */
@@ -740,16 +737,17 @@ let d = class extends I {
   /** @internal */
   _renderExpandArrow() {
     return c`<span class="nav-item__arrow" aria-hidden="true">
-      <svg viewBox="0 0 20 20">
-        <path
-          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-        />
-      </svg>
+      <hx-icon
+        class="nav-item__arrow-glyph"
+        library="helix"
+        name="chevron-right"
+        aria-hidden="true"
+      ></hx-icon>
     </span>`;
   }
   // ─── Render ───
   render() {
-    const e = this._getDirectText(), r = c`
+    const e = this._getDirectText(), o = c`
       <span part="icon" class="nav-item__icon">
         <slot name="icon"></slot>
       </span>
@@ -770,7 +768,7 @@ let d = class extends I {
             aria-describedby=${this._isCollapsed ? this._tooltipId : h}
             tabindex=${this.disabled ? "-1" : "0"}
           >
-            ${r}
+            ${o}
           </a>` : c`<button
             part="link"
             class="nav-item__link"
@@ -780,7 +778,7 @@ let d = class extends I {
             tabindex=${this.disabled ? "-1" : "0"}
             @click=${this._handleToggle}
           >
-            ${r}
+            ${o}
           </button>`;
     return c`
       <div class="nav-item">
@@ -820,4 +818,4 @@ export {
   d as H,
   x as a
 };
-//# sourceMappingURL=hx-nav-item-ClN17f1y.js.map
+//# sourceMappingURL=hx-nav-item-CxE7Mp3M.js.map

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

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

package/dist/shared/{hx-number-input-MggsT7F0.js → hx-number-input-Bvyc9kOi.js}

@@ -1,13 +1,13 @@
 import { css as f, html as a, nothing as h } from "lit";
-import { property as l, query as _, state as c, customElement as b } from "lit/decorators.js";
+import { property as s, query as _, state as c, customElement as b } from "lit/decorators.js";
 import { classMap as m } from "lit/directives/class-map.js";
 import { ifDefined as p } from "lit/directives/if-defined.js";
 import { live as x } from "lit/directives/live.js";
 import { F as v } from "./FormMixin-B8PXk5RQ.js";
 import { b as g } from "./forced-colors-CTEDFRGa.js";
 import { H as y } from "./helix-element-BNEYeiys.js";
-import { c as w } from "./id-counter-DuX8vsui.js";
-const S = f`
+import { c as S } from "./id-counter-DuX8vsui.js";
+const w = f`
   :host {
     display: block;
   }
@@ -212,10 +212,9 @@ const S = f`
     cursor: not-allowed;
   }
 
-  .field__stepper-btn svg {
+  .field__stepper-glyph {
     pointer-events: none;
-    width: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
-    height: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
+    --hx-icon-size: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
   }
 
   /* Size sm adjustments for stepper */
@@ -332,12 +331,12 @@ const S = f`
     }
   }
 `;
-var $ = Object.defineProperty, I = Object.getOwnPropertyDescriptor, o = (e, t, r, s) => {
-  for (var n = s > 1 ? void 0 : s ? I(t, r) : t, d = e.length - 1, u; d >= 0; d--)
-    (u = e[d]) && (n = (s ? u(t, r, n) : u(n)) || n);
-  return s && n && $(t, r, n), n;
+var $ = Object.defineProperty, I = Object.getOwnPropertyDescriptor, o = (e, t, r, l) => {
+  for (var n = l > 1 ? void 0 : l ? I(t, r) : t, d = e.length - 1, u; d >= 0; d--)
+    (u = e[d]) && (n = (l ? u(t, r, n) : u(n)) || n);
+  return l && n && $(t, r, n), n;
 };
-const T = w("hx-number-input");
+const T = S("hx-number-input");
 let i = class extends v(y) {
   constructor() {
     super(...arguments), this.name = "", this.value = null, this.required = !1, this.disabled = !1, this.readonly = !1, this.min = void 0, this.max = void 0, this.step = 1, this.label = "", this.error = "", this.helpText = "", this.size = "md", this.noStepper = !1, this.requiredMessage = "This field is required.", this.incrementLabel = "Increment", this.decrementLabel = "Decrement", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._defaultValue = null, this._longPressTimer = null, this._repeatInterval = null, this._inputId = T(), this._helpTextId = `${this._inputId}-help`, this._errorId = `${this._inputId}-error`;
@@ -377,10 +376,10 @@ let i = class extends v(y) {
     if ((e.has("value") || e.has("required") || e.has("min") || e.has("max") || e.has("step")) && this._syncFormValue(), e.has("error") && this.error) {
       const r = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[role="alert"]');
       if (r) {
-        const s = this.error;
+        const l = this.error;
         requestAnimationFrame(() => {
           r.textContent = "", requestAnimationFrame(() => {
-            r.textContent = s;
+            r.textContent = l;
           });
         });
       }
@@ -418,8 +417,8 @@ let i = class extends v(y) {
       return;
     }
     if (this.value !== null && this.step && this.step !== 0) {
-      const e = this._finite(this.step) ?? 1, t = this._finite(this.min) ?? 0, r = Math.abs((this.value - t) % e), s = 1e-9;
-      if (r > s && Math.abs(r - e) > s) {
+      const e = this._finite(this.step) ?? 1, t = this._finite(this.min) ?? 0, r = Math.abs((this.value - t) % e), l = 1e-9;
+      if (r > l && Math.abs(r - e) > l) {
         this._internals.setValidity(
           { stepMismatch: !0 },
           `Value must be a multiple of ${e}.`,
@@ -459,8 +458,8 @@ let i = class extends v(y) {
   /** @internal */
   _clamp(e) {
     let t = e;
-    const r = this._finite(this.min), s = this._finite(this.max);
-    return r !== void 0 && (t = Math.max(r, t)), s !== void 0 && (t = Math.min(s, t)), t;
+    const r = this._finite(this.min), l = this._finite(this.max);
+    return r !== void 0 && (t = Math.max(r, t)), l !== void 0 && (t = Math.min(l, t)), t;
   }
   // ─── Stepper Helpers ───
   /** @internal */
@@ -474,8 +473,8 @@ let i = class extends v(y) {
   /** @internal */
   _applyStep(e) {
     if (this.disabled || this.readonly) return;
-    const t = this.value ?? 0, r = this._finite(this.step) ?? 1, s = this._clamp(parseFloat((t + e * r).toFixed(10)));
-    s !== this.value && (this.value = s, this._handleInteractionInput(), this.dispatchEvent(
+    const t = this.value ?? 0, r = this._finite(this.step) ?? 1, l = this._clamp(parseFloat((t + e * r).toFixed(10)));
+    l !== this.value && (this.value = l, this._handleInteractionInput(), this.dispatchEvent(
       new CustomEvent("hx-change", {
         bubbles: !0,
         composed: !0,
@@ -546,25 +545,21 @@ let i = class extends v(y) {
   // ─── Render Helpers ───
   /** @internal */
   _renderIncrementIcon() {
-    return a`<svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 12 12"
+    return a`<hx-icon
+      class="field__stepper-glyph"
+      library="helix"
+      name="plus"
       aria-hidden="true"
-      focusable="false"
-    >
-      <path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-    </svg>`;
+    ></hx-icon>`;
   }
   /** @internal */
   _renderDecrementIcon() {
-    return a`<svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 12 12"
+    return a`<hx-icon
+      class="field__stepper-glyph"
+      library="helix"
+      name="dash"
       aria-hidden="true"
-      focusable="false"
-    >
-      <path d="M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-    </svg>`;
+    ></hx-icon>`;
   }
   // ─── Render ───
   render() {
@@ -579,7 +574,7 @@ let i = class extends v(y) {
     }, r = [
       e ? this._errorId : null,
       !e && (this.helpText || this._hasHelpSlot) ? this._helpTextId : null
-    ].filter(Boolean).join(" ") || void 0, s = this.value !== null ? String(this.value) : "";
+    ].filter(Boolean).join(" ") || void 0, l = this.value !== null ? String(this.value) : "";
     return a`
       <div part="field" class=${m(t)}>
         <div class="field__label-wrapper">
@@ -603,7 +598,7 @@ let i = class extends v(y) {
             class="field__input"
             id=${this._inputId}
             type="number"
-            .value=${x(s)}
+            .value=${x(l)}
             min=${p(this.min)}
             max=${p(this.max)}
             step=${this.step}
@@ -679,13 +674,13 @@ let i = class extends v(y) {
     `;
   }
 };
-i.styles = [S, g];
+i.styles = [w, g];
 i.formAssociated = !0;
 o([
-  l({ type: String, reflect: !0 })
+  s({ type: String, reflect: !0 })
 ], i.prototype, "name", 2);
 o([
-  l({
+  s({
     type: Number,
     reflect: !0,
     converter: {
@@ -699,46 +694,46 @@ o([
   })
 ], i.prototype, "value", 2);
 o([
-  l({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], i.prototype, "required", 2);
 o([
-  l({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], i.prototype, "disabled", 2);
 o([
-  l({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], i.prototype, "readonly", 2);
 o([
-  l({ type: Number })
+  s({ type: Number })
 ], i.prototype, "min", 2);
 o([
-  l({ type: Number })
+  s({ type: Number })
 ], i.prototype, "max", 2);
 o([
-  l({ type: Number })
+  s({ type: Number })
 ], i.prototype, "step", 2);
 o([
-  l({ type: String })
+  s({ type: String })
 ], i.prototype, "label", 2);
 o([
-  l({ type: String })
+  s({ type: String })
 ], i.prototype, "error", 2);
 o([
-  l({ type: String, attribute: "help-text" })
+  s({ type: String, attribute: "help-text" })
 ], i.prototype, "helpText", 2);
 o([
-  l({ type: String, attribute: "hx-size" })
+  s({ type: String, attribute: "hx-size" })
 ], i.prototype, "size", 2);
 o([
-  l({ type: Boolean, attribute: "no-stepper" })
+  s({ type: Boolean, attribute: "no-stepper" })
 ], i.prototype, "noStepper", 2);
 o([
-  l({ attribute: "required-message" })
+  s({ attribute: "required-message" })
 ], i.prototype, "requiredMessage", 2);
 o([
-  l({ attribute: "increment-label" })
+  s({ attribute: "increment-label" })
 ], i.prototype, "incrementLabel", 2);
 o([
-  l({ attribute: "decrement-label" })
+  s({ attribute: "decrement-label" })
 ], i.prototype, "decrementLabel", 2);
 o([
   _(".field__input")
@@ -758,4 +753,4 @@ i = o([
 export {
   i as H
 };
-//# sourceMappingURL=hx-number-input-MggsT7F0.js.map
+//# sourceMappingURL=hx-number-input-Bvyc9kOi.js.map