@helixui/library 1.1.2 → 2.0.0

package/dist/shared/{hx-nav-item-D3EJatzc.js → hx-nav-item-tM_6bolB.js}

@@ -1,10 +1,17 @@
-import { css as b, LitElement as w, html as d, nothing as l } from "lit";
-import { property as v, customElement as y, state as k } from "lit/decorators.js";
-import { tokenStyles as C } from "@helixui/tokens/lit";
-const $ = b`
+import { css as A, LitElement as $, html as c, nothing as h } from "lit";
+import { property as p, customElement as S, state as E } from "lit/decorators.js";
+import { tokenStyles as I } from "@helixui/tokens/lit";
+const T = A`
   :host {
     display: block;
     height: 100%;
+    /* Mirror the nav background and text on the host so slotted light-DOM
+       content (header, footer slots) inherits the correct dark surface color.
+       Without this, axe-core cannot resolve the background for slotted nodes
+       and evaluates their text against the page white background, producing
+       false-positive color-contrast violations (WCAG 2.1 AA). */
+    background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));
   }
 
   * {
@@ -18,12 +25,12 @@ const $ = b`
     flex-direction: column;
     height: 100%;
     width: var(--hx-side-nav-width, 16rem);
-    background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #111827));
-    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f3f4f6));
+    background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));
     transition: width var(--hx-transition-normal, 300ms) ease;
     overflow: hidden;
     border-inline-end: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #374151));
+      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
   }
 
   /* ─── Collapsed State ─── */
@@ -41,7 +48,7 @@ const $ = b`
     flex-shrink: 0;
     min-height: var(--hx-space-14, 3.5rem);
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #374151));
+      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
     overflow: hidden;
   }
 
@@ -68,7 +75,7 @@ const $ = b`
     flex-shrink: 0;
     min-height: var(--hx-space-14, 3.5rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #374151));
+      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
     overflow: hidden;
   }
 
@@ -91,7 +98,7 @@ const $ = b`
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-side-nav-toggle-color, var(--hx-color-neutral-400, #9ca3af));
+    color: var(--hx-side-nav-toggle-color, var(--hx-color-neutral-400, #94a3b8));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms) ease,
@@ -103,7 +110,7 @@ const $ = b`
       --hx-overlay-white-10,
       rgba(255, 255, 255, 0.1)
     ); /* fallback for browsers without color-mix() */
-    color: var(--hx-color-neutral-100, #f3f4f6);
+    color: var(--hx-color-neutral-100, #f1f5f9);
   }
 
   @supports (color: color-mix(in srgb, red 50%, blue)) {
@@ -113,7 +120,8 @@ const $ = b`
   }
 
   .side-nav__toggle:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -143,12 +151,12 @@ const $ = b`
     }
   }
 `;
-var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, f = (e, a, t, o) => {
-  for (var r = o > 1 ? void 0 : o ? S(a, t) : a, i = e.length - 1, n; i >= 0; i--)
-    (n = e[i]) && (r = (o ? n(a, t, r) : n(r)) || r);
-  return o && r && E(a, t, r), r;
+var D = Object.defineProperty, N = Object.getOwnPropertyDescriptor, g = (e, a, o, i) => {
+  for (var t = i > 1 ? void 0 : i ? N(a, o) : a, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (t = (i ? n(a, o, t) : n(t)) || t);
+  return i && t && D(a, o, t), t;
 };
-let p = class extends w {
+let x = class extends $ {
   constructor() {
     super(...arguments), this.collapsed = !1, this.label = "Main Navigation";
   }
@@ -164,12 +172,12 @@ let p = class extends w {
    */
   /** @internal */
   _propagateCollapsedToChildren() {
-    var t;
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot:not([name])");
+    var o;
+    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot:not([name])");
     if (!e) return;
-    const a = e.assignedElements({ flatten: !0 }).filter((o) => o.tagName.toLowerCase() === "hx-nav-item");
-    for (const o of a)
-      o instanceof HTMLElement && (this.collapsed ? o.setAttribute("data-collapsed", "") : o.removeAttribute("data-collapsed"));
+    const a = e.assignedElements({ flatten: !0 }).filter((i) => i.tagName.toLowerCase() === "hx-nav-item");
+    for (const i of a)
+      i instanceof HTMLElement && (this.collapsed ? i.setAttribute("data-collapsed", "") : i.removeAttribute("data-collapsed"));
   }
   /**
    * Handles the default slot's slotchange event so that if items are added
@@ -188,30 +196,67 @@ let p = class extends w {
    */
   /** @internal */
   _handleKeydown(e) {
-    var g, _, u;
-    if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
-    const a = (g = this.shadowRoot) == null ? void 0 : g.querySelector("slot:not([name])");
-    if (!a) return;
-    const t = a.assignedElements({ flatten: !0 }).filter(
-      (h) => h.tagName.toLowerCase() === "hx-nav-item" && !h.hasAttribute("disabled")
+    var b, w, y, C, k;
+    if (!["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Home", "End"].includes(e.key)) return;
+    const o = (b = this.shadowRoot) == null ? void 0 : b.querySelector("slot:not([name])");
+    if (!o) return;
+    const i = o.assignedElements({ flatten: !0 }).filter(
+      (r) => r.tagName.toLowerCase() === "hx-nav-item" && !r.hasAttribute("disabled")
     );
+    if (i.length === 0) return;
+    const t = [];
+    for (const r of i)
+      if (t.push(r), r.hasAttribute("expanded")) {
+        const s = (w = r.shadowRoot) == null ? void 0 : w.querySelector('slot[name="children"]');
+        if (s) {
+          const u = s.assignedElements({ flatten: !0 }).filter(
+            (m) => m.tagName.toLowerCase() === "hx-nav-item" && !m.hasAttribute("disabled")
+          );
+          t.push(...u);
+        }
+      }
     if (t.length === 0) return;
-    const o = document.activeElement;
-    let r = -1;
-    for (let h = 0; h < t.length; h++) {
-      const m = t[h];
-      if (m && (m === o || m.contains(o) || ((_ = m.shadowRoot) == null ? void 0 : _.contains(o)) === !0)) {
-        r = h;
+    const l = document.activeElement;
+    let n = -1;
+    for (let r = 0; r < t.length; r++) {
+      const s = t[r];
+      if (s && (s === l || s.contains(l) || ((y = s.shadowRoot) == null ? void 0 : y.contains(l)) === !0)) {
+        n = r;
         break;
       }
     }
+    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+      e.preventDefault();
+      const r = n >= 0 ? t[n] : null;
+      if (!r) return;
+      if (e.key === "ArrowRight") {
+        if (r.hasAttribute("expanded") === !1 && r.querySelector('[slot="children"]'))
+          r.setAttribute("expanded", ""), r.expanded = !0;
+        else if (r.hasAttribute("expanded")) {
+          const s = (C = r.shadowRoot) == null ? void 0 : C.querySelector('slot[name="children"]');
+          if (s) {
+            const u = s.assignedElements({ flatten: !0 }).find(
+              (m) => m.tagName.toLowerCase() === "hx-nav-item" && !m.hasAttribute("disabled")
+            );
+            if (u) {
+              u.focus();
+              return;
+            }
+          }
+        }
+      } else if (r.hasAttribute("expanded"))
+        r.removeAttribute("expanded"), r.expanded = !1;
+      else {
+        const s = r.closest("hx-nav-item:not(:scope)") ?? ((k = r.parentElement) == null ? void 0 : k.closest("hx-nav-item")) ?? null;
+        s && !s.hasAttribute("disabled") && s.focus();
+      }
+      return;
+    }
     e.preventDefault();
-    let i;
-    e.key === "ArrowDown" ? i = r < t.length - 1 ? r + 1 : 0 : e.key === "ArrowUp" ? i = r > 0 ? r - 1 : t.length - 1 : e.key === "Home" ? i = 0 : i = t.length - 1;
-    const n = t[i];
-    if (!n) return;
-    const x = (u = n.shadowRoot) == null ? void 0 : u.querySelector('[part="link"]');
-    x == null || x.focus();
+    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 _ = t[f];
+    _ && _.focus();
   }
   // ─── Event Handling ───
   /** @internal */
@@ -233,14 +278,14 @@ let p = class extends w {
   // ─── Render ───
   /** @internal */
   _renderToggleIcon() {
-    return d`<svg viewBox="0 0 20 20" aria-hidden="true">
+    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>`;
   }
   render() {
-    return d`
+    return c`
       <nav part="nav" class="side-nav" aria-label=${this.label}>
         <div part="header" class="side-nav__header">
           <slot name="header"></slot>
@@ -266,20 +311,24 @@ let p = class extends w {
     `;
   }
 };
-p.styles = [C, $];
-f([
-  v({ type: Boolean, reflect: !0 })
-], p.prototype, "collapsed", 2);
-f([
-  v({ type: String })
-], p.prototype, "label", 2);
-p = f([
-  y("hx-side-nav")
-], p);
-const T = b`
+x.styles = [I, T];
+g([
+  p({ type: Boolean, reflect: !0 })
+], x.prototype, "collapsed", 2);
+g([
+  p({ type: String })
+], x.prototype, "label", 2);
+x = g([
+  S("hx-side-nav")
+], x);
+const L = A`
   :host {
     display: block;
-    background-color: var(--hx-nav-item-host-bg, var(--hx-color-neutral-900, #111827));
+    /* The host background must be a concrete color so that axe-core can
+       resolve text contrast ratios for shadow-DOM content correctly.
+       WCAG 2.1 AA: neutral-300 (#cbd5e1) on neutral-900 (#0f172a) = 12.02:1. */
+    background-color: var(--hx-nav-item-host-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-nav-item-color, var(--hx-color-neutral-300, #cbd5e1));
   }
 
   * {
@@ -302,7 +351,7 @@ const T = b`
     padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));
     min-height: var(--hx-space-10, 2.5rem);
     text-decoration: none;
-    color: var(--hx-nav-item-color, var(--hx-color-neutral-300, #d1d5db));
+    color: var(--hx-nav-item-color, var(--hx-color-neutral-300, #cbd5e1));
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     margin: 0 var(--hx-space-2, 0.5rem);
     transition:
@@ -319,7 +368,7 @@ const T = b`
     border: none;
     background: transparent;
     width: calc(100% - var(--hx-space-4, 1rem));
-    text-align: left;
+    text-align: start;
   }
 
   /* Link variant */
@@ -332,7 +381,7 @@ const T = b`
       --hx-nav-item-hover-bg,
       var(--hx-overlay-white-8, rgba(255, 255, 255, 0.08))
     ); /* fallback for browsers without color-mix() */
-    color: var(--hx-nav-item-hover-color, var(--hx-color-neutral-100, #f3f4f6));
+    color: var(--hx-nav-item-hover-color, var(--hx-color-neutral-100, #f1f5f9));
   }
 
   @supports (color: color-mix(in srgb, red 50%, blue)) {
@@ -345,25 +394,28 @@ const T = b`
   }
 
   .nav-item__link:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   /* ─── Active State ─── */
 
   :host([active]) .nav-item__link {
-    background-color: var(--hx-nav-item-active-bg, var(--hx-color-primary-600, #2563eb));
-    color: var(--hx-nav-item-active-color, var(--hx-color-neutral-50, #f9fafb));
+    /* neutral-50 (#f8fafc) on primary-600 (#1d4ed8) = 6.41:1 — WCAG AA ✓ */
+    background-color: var(--hx-nav-item-active-bg, var(--hx-color-primary-600, #1d4ed8));
+    color: var(--hx-nav-item-active-color, var(--hx-color-neutral-50, #f8fafc));
   }
 
   :host([active]) .nav-item__link:hover {
-    background-color: var(--hx-nav-item-active-hover-bg, var(--hx-color-primary-700, #1d4ed8));
+    /* neutral-50 (#f8fafc) on primary-700 (#1e40af) = 8.34:1 — WCAG AA ✓ */
+    background-color: var(--hx-nav-item-active-hover-bg, var(--hx-color-primary-700, #1e40af));
   }
 
   /* ─── Disabled State ─── */
 
   :host([disabled]) .nav-item__link {
-    opacity: 0.4;
+    opacity: var(--hx-opacity-disabled, 0.5);
     pointer-events: none;
     cursor: not-allowed;
   }
@@ -392,7 +444,7 @@ const T = b`
   /* ─── Badge ─── */
 
   .nav-item__badge {
-    margin-left: auto;
+    margin-inline-start: auto;
     flex-shrink: 0;
   }
 
@@ -403,7 +455,7 @@ const T = b`
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    margin-left: auto;
+    margin-inline-start: auto;
     width: var(--hx-space-5, 1.25rem);
     height: var(--hx-space-5, 1.25rem);
     transition: transform var(--hx-transition-normal, 300ms) ease;
@@ -437,7 +489,7 @@ const T = b`
     min-height: 0;
     display: flex;
     flex-direction: column;
-    padding-left: var(--hx-space-6, 1.5rem);
+    padding-inline-start: var(--hx-space-6, 1.5rem);
   }
 
   /* ─── Tooltip (collapsed mode) ─── */
@@ -447,8 +499,9 @@ const T = b`
     left: calc(100% + var(--hx-space-2, 0.5rem));
     top: 50%;
     transform: translateY(-50%);
-    background-color: var(--hx-color-neutral-800, #1f2937);
-    color: var(--hx-color-neutral-100, #f3f4f6);
+    /* neutral-100 (#f1f5f9) on neutral-800 (#1e293b) = 13.35:1 — WCAG AA ✓ */
+    background-color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-neutral-100, #f1f5f9);
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     font-size: var(--hx-font-size-xs, 0.75rem);
@@ -456,7 +509,7 @@ const T = b`
     pointer-events: none;
     opacity: 0;
     transition: opacity var(--hx-transition-fast, 150ms) ease;
-    z-index: var(--hx-z-index-tooltip, 100);
+    z-index: var(--hx-z-index-tooltip, 1600);
     box-shadow: var(--hx-shadow-md, 0 2px 8px rgb(0 0 0 / 0.2));
   }
 
@@ -508,21 +561,33 @@ const T = b`
     }
   }
 `;
-var A = Object.defineProperty, D = Object.getOwnPropertyDescriptor, c = (e, a, t, o) => {
-  for (var r = o > 1 ? void 0 : o ? D(a, t) : a, i = e.length - 1, n; i >= 0; i--)
-    (n = e[i]) && (r = (o ? n(a, t, r) : n(r)) || r);
-  return o && r && A(a, t, r), r;
+var j = Object.defineProperty, B = Object.getOwnPropertyDescriptor, v = (e, a, o, i) => {
+  for (var t = i > 1 ? void 0 : i ? B(a, o) : a, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (t = (i ? n(a, o, t) : n(t)) || t);
+  return i && t && j(a, o, t), t;
 };
-let s = class extends w {
+let d = class extends $ {
   constructor() {
-    super(...arguments), this.href = "", this.active = !1, this.expanded = !1, this.disabled = !1, this._hasChildren = !1, this._isCollapsed = !1;
+    super(), this.href = "", this.active = !1, this.expanded = !1, this.disabled = !1, this._hasChildren = !1, this._isCollapsed = !1, this._tooltipId = `nav-item-tooltip-${++d._instanceCounter}`;
   }
   // ─── Attribute Observer ───
   static get observedAttributes() {
     return [...super.observedAttributes, "data-collapsed"];
   }
-  attributeChangedCallback(e, a, t) {
-    super.attributeChangedCallback(e, a, t), e === "data-collapsed" && (this._isCollapsed = t !== null);
+  attributeChangedCallback(e, a, o) {
+    super.attributeChangedCallback(e, a, o), e === "data-collapsed" && (this._isCollapsed = o !== null);
+  }
+  // ─── Public API ───
+  /**
+   * Delegates focus to the internal link or button element (part="link").
+   * Allows parent components to focus nav items without piercing the Shadow DOM.
+   * WCAG 2.1.1: keyboard navigation must not cross shadow boundaries via
+   * direct shadowRoot queries.
+   */
+  focus(e) {
+    var o;
+    const a = (o = this.shadowRoot) == null ? void 0 : o.querySelector('[part="link"]');
+    a ? a.focus(e) : super.focus(e);
   }
   // ─── Slot Change Handler ───
   /** @internal */
@@ -544,7 +609,7 @@ let s = class extends w {
   }
   /** @internal */
   _renderExpandArrow() {
-    return d`<span class="nav-item__arrow" aria-hidden="true">
+    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"
@@ -554,7 +619,7 @@ let s = class extends w {
   }
   // ─── Render ───
   render() {
-    const e = this._getDirectText(), a = d`
+    const e = this._getDirectText(), a = c`
       <span part="icon" class="nav-item__icon">
         <slot name="icon"></slot>
       </span>
@@ -564,32 +629,32 @@ let s = class extends w {
       <span part="badge" class="nav-item__badge">
         <slot name="badge"></slot>
       </span>
-      ${this._hasChildren ? this._renderExpandArrow() : l}
-      ${this._isCollapsed ? d`<span id="nav-item-tooltip" class="nav-item__tooltip" role="tooltip">${e}</span>` : l}
-    `, t = this.href && !this._hasChildren ? d`<a
+      ${this._hasChildren ? this._renderExpandArrow() : h}
+      ${this._isCollapsed ? c`<span id=${this._tooltipId} class="nav-item__tooltip" role="tooltip">${e}</span>` : h}
+    `, o = this.href && !this._hasChildren ? c`<a
             part="link"
             class="nav-item__link"
             href=${this.href}
-            aria-current=${this.active ? "page" : l}
-            aria-disabled=${this.disabled ? "true" : l}
-            aria-describedby=${this._isCollapsed ? "nav-item-tooltip" : l}
+            aria-current=${this.active ? "page" : h}
+            aria-disabled=${this.disabled ? "true" : h}
+            aria-describedby=${this._isCollapsed ? this._tooltipId : h}
             tabindex=${this.disabled ? "-1" : "0"}
           >
             ${a}
-          </a>` : d`<button
+          </a>` : c`<button
             part="link"
             class="nav-item__link"
-            aria-disabled=${this.disabled ? "true" : l}
-            aria-expanded=${this._hasChildren ? String(this.expanded) : l}
-            aria-describedby=${this._isCollapsed ? "nav-item-tooltip" : l}
+            aria-disabled=${this.disabled ? "true" : h}
+            aria-expanded=${this._hasChildren ? String(this.expanded) : h}
+            aria-describedby=${this._isCollapsed ? this._tooltipId : h}
             tabindex=${this.disabled ? "-1" : "0"}
             @click=${this._handleToggle}
           >
             ${a}
           </button>`;
-    return d`
+    return c`
       <div class="nav-item">
-        ${t}
+        ${o}
         <div part="children" class="nav-item__children" role="group">
           <div class="nav-item__children-inner">
             <slot name="children" @slotchange=${this._onChildrenSlotChange}></slot>
@@ -599,30 +664,31 @@ let s = class extends w {
     `;
   }
 };
-s.styles = [C, T];
-c([
-  v({ type: String })
-], s.prototype, "href", 2);
-c([
-  v({ type: Boolean, reflect: !0 })
-], s.prototype, "active", 2);
-c([
-  v({ type: Boolean, reflect: !0 })
-], s.prototype, "expanded", 2);
-c([
-  v({ type: Boolean, reflect: !0 })
-], s.prototype, "disabled", 2);
-c([
-  k()
-], s.prototype, "_hasChildren", 2);
-c([
-  k()
-], s.prototype, "_isCollapsed", 2);
-s = c([
-  y("hx-nav-item")
-], s);
+d.styles = [I, L];
+d._instanceCounter = 0;
+v([
+  p({ type: String })
+], d.prototype, "href", 2);
+v([
+  p({ type: Boolean, reflect: !0 })
+], d.prototype, "active", 2);
+v([
+  p({ type: Boolean, reflect: !0 })
+], d.prototype, "expanded", 2);
+v([
+  p({ type: Boolean, reflect: !0 })
+], d.prototype, "disabled", 2);
+v([
+  E()
+], d.prototype, "_hasChildren", 2);
+v([
+  E()
+], d.prototype, "_isCollapsed", 2);
+d = v([
+  S("hx-nav-item")
+], d);
 export {
-  s as H,
-  p as a
+  d as H,
+  x as a
 };
-//# sourceMappingURL=hx-nav-item-D3EJatzc.js.map
+//# sourceMappingURL=hx-nav-item-tM_6bolB.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-nav-item-tM_6bolB.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-neutral-900, #0f172a));\n    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));\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-neutral-900, #0f172a));\n    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));\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(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));\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(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));\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(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));\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    width: var(--hx-space-8, 2rem);\n    height: var(--hx-space-8, 2rem);\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-neutral-400, #94a3b8));\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    background-color: var(\n      --hx-overlay-white-10,\n      rgba(255, 255, 255, 0.1)\n    ); /* fallback for browsers without color-mix() */\n    color: var(--hx-color-neutral-100, #f1f5f9);\n  }\n\n  @supports (color: color-mix(in srgb, red 50%, blue)) {\n    .side-nav__toggle:hover {\n      background-color: color-mix(in srgb, currentColor 15%, transparent);\n    }\n  }\n\n  .side-nav__toggle:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .side-nav__toggle svg {\n    width: var(--hx-space-5, 1.25rem);\n    height: var(--hx-space-5, 1.25rem);\n    fill: currentColor;\n    flex-shrink: 0;\n    transition: transform var(--hx-transition-normal, 300ms) ease;\n  }\n\n  :host([collapsed]) .side-nav__toggle svg {\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","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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-neutral-900)] - Background color.\n * @cssprop [--hx-side-nav-color=var(--hx-color-neutral-100)] - Text color.\n * @cssprop [--hx-side-nav-border-color=var(--hx-color-neutral-700)] - Border color.\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-neutral-400)] - Toggle button icon color.\n */\n@customElement('hx-side-nav')\nexport class HelixSideNav extends LitElement {\n  static override styles = [tokenStyles, 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`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        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\"\n      />\n    </svg>`;\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       WCAG 2.1 AA: neutral-300 (#cbd5e1) on neutral-900 (#0f172a) = 12.02:1. */\n    background-color: var(--hx-nav-item-host-bg, var(--hx-color-neutral-900, #0f172a));\n    color: var(--hx-nav-item-color, var(--hx-color-neutral-300, #cbd5e1));\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-neutral-300, #cbd5e1));\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-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-neutral-100, #f1f5f9));\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-focus-ring-color, var(--hx-color-primary-400, #60a5fa));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Active State ─── */\n\n  :host([active]) .nav-item__link {\n    /* neutral-50 (#f8fafc) on primary-600 (#1d4ed8) = 6.41:1 — WCAG AA ✓ */\n    background-color: var(--hx-nav-item-active-bg, var(--hx-color-primary-600, #1d4ed8));\n    color: var(--hx-nav-item-active-color, var(--hx-color-neutral-50, #f8fafc));\n  }\n\n  :host([active]) .nav-item__link:hover {\n    /* neutral-50 (#f8fafc) on primary-700 (#1e40af) = 8.34:1 — WCAG AA ✓ */\n    background-color: var(--hx-nav-item-active-hover-bg, var(--hx-color-primary-700, #1e40af));\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 svg {\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n    fill: currentColor;\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    /* neutral-100 (#f1f5f9) on neutral-800 (#1e293b) = 13.35:1 — WCAG AA ✓ */\n    background-color: var(--hx-color-neutral-800, #1e293b);\n    color: var(--hx-color-neutral-100, #f1f5f9);\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","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixNavItemStyles } from './hx-nav-item.styles.js';\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-neutral-300)] - Item text color.\n * @cssprop [--hx-nav-item-hover-bg] - Item hover background.\n * @cssprop [--hx-nav-item-hover-color=var(--hx-color-neutral-100)] - Item hover text color.\n * @cssprop [--hx-nav-item-active-bg=var(--hx-color-primary-600)] - Active item background.\n * @cssprop [--hx-nav-item-active-color=var(--hx-color-neutral-50)] - Active item text color.\n * @cssprop [--hx-nav-item-padding] - Item padding.\n * @cssprop [--hx-nav-item-host-bg=var(--hx-color-neutral-900)] - Component host background color.\n */\n@customElement('hx-nav-item')\nexport class HelixNavItem extends LitElement {\n  static override styles = [tokenStyles, helixNavItemStyles];\n\n  /** @internal — incremented for each instance to guarantee unique tooltip IDs */\n  private static _instanceCounter = 0;\n\n  /** @internal — per-instance tooltip ID */\n  private _tooltipId: string;\n\n  constructor() {\n    super();\n    this._tooltipId = `nav-item-tooltip-${++HelixNavItem._instanceCounter}`;\n  }\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      <svg viewBox=\"0 0 20 20\">\n        <path\n          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\"\n        />\n      </svg>\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","LitElement","changedProperties","slot","_a","navItems","el","item","topLevelItems","childrenSlot","_b","childItems","activeEl","currentIndex","i","_c","currentItem","_d","firstChild","parentNavItem","_e","nextIndex","targetItem","html","tokenStyles","__decorateClass","property","customElement","helixNavItemStyles","HelixNavItem","name","old","value","options","inner","n","label","innerContent","nothing","linkEl","state"],"mappings":"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"}