@helixui/library 1.0.1 → 1.1.2

package/dist/shared/{hx-nav-DM6-cGKF.js → hx-nav-3JsN2Oak.js}

@@ -1,9 +1,9 @@
-import { css as g, LitElement as k, svg as f, html as c, nothing as v } from "lit";
-import { property as m, state as b, customElement as y } from "lit/decorators.js";
-import { classMap as x } from "lit/directives/class-map.js";
+import { css as g, LitElement as k, svg as f, html as d, nothing as x } from "lit";
+import { property as v, state as b, customElement as y } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
 import { repeat as w } from "lit/directives/repeat.js";
-import { tokenStyles as $ } from "@helixui/tokens/lit";
-const C = g`
+import { tokenStyles as C } from "@helixui/tokens/lit";
+const $ = g`
   :host {
     display: block;
     font-family: var(--hx-nav-font-family, var(--hx-font-family-sans, sans-serif));
@@ -246,19 +246,20 @@ const C = g`
     }
   }
 `;
-var I = Object.defineProperty, O = Object.getOwnPropertyDescriptor, p = (e, n, o, a) => {
+var I = Object.defineProperty, O = Object.getOwnPropertyDescriptor, h = (e, n, o, a) => {
   for (var t = a > 1 ? void 0 : a ? O(n, o) : n, i = e.length - 1, l; i >= 0; i--)
     (l = e[i]) && (t = (a ? l(n, o, t) : l(t)) || t);
   return a && t && I(n, o, t), t;
 };
-let d = class extends k {
+let c = class extends k {
   constructor() {
-    super(...arguments), this.items = [], this.orientation = "horizontal", this.label = "Main navigation", this._mobileOpen = !1, this._expandedIndex = null, this._boundOutsideClick = this._handleOutsideClick.bind(this);
+    super(...arguments), this.items = [], this.orientation = "horizontal", this.label = "Main navigation", this.labelOpenMenu = "Open navigation menu", this.labelCloseMenu = "Close navigation menu", this._mobileOpen = !1, this._expandedIndex = null, this._boundOutsideClick = this._handleOutsideClick.bind(this);
   }
   /**
    * Sanitizes a URL to prevent XSS via javascript: or data: URIs.
    * Only allows http:, https:, relative paths, and fragment-only links.
    */
+  /** @internal */
   _sanitizeHref(e) {
     if (!e || e === "#") return "#";
     if (e.startsWith("/") || e.startsWith("./") || e.startsWith("../") || e.startsWith("#"))
@@ -272,9 +273,11 @@ let d = class extends k {
     return "#";
   }
   // ─── Event Handling ───
+  /** @internal */
   _handleToggle() {
     this._mobileOpen = !this._mobileOpen, this._mobileOpen || (this._expandedIndex = null);
   }
+  /** @internal */
   _handleItemClick(e, n, o) {
     var a;
     o.preventDefault(), (a = e.children) != null && a.length ? this._expandedIndex = this._expandedIndex === n ? null : n : (this._mobileOpen = !1, this._expandedIndex = null, this.dispatchEvent(
@@ -285,6 +288,7 @@ let d = class extends k {
       })
     ));
   }
+  /** @internal */
   _handleSubItemClick(e, n) {
     n.preventDefault(), this._mobileOpen = !1, this._expandedIndex = null, this.dispatchEvent(
       new CustomEvent("hx-nav-select", {
@@ -294,6 +298,7 @@ let d = class extends k {
       })
     );
   }
+  /** @internal */
   _handleKeydown(e, n, o) {
     var l, s, u;
     const a = (l = this.shadowRoot) == null ? void 0 : l.querySelectorAll(
@@ -306,8 +311,8 @@ let d = class extends k {
       case "ArrowDown": {
         if (e.preventDefault(), (s = o.children) != null && s.length && e.key === "ArrowDown" && this.orientation === "horizontal")
           this._expandedIndex = n, this.updateComplete.then(() => {
-            var h;
-            const r = (h = this.shadowRoot) == null ? void 0 : h.querySelector(
+            var p;
+            const r = (p = this.shadowRoot) == null ? void 0 : p.querySelector(
               '.nav__submenu [part="link"]'
             );
             r == null || r.focus();
@@ -336,16 +341,17 @@ let d = class extends k {
           const r = this._expandedIndex === n;
           this._expandedIndex = r ? null : n, r || this.updateComplete.then(() => {
             var _;
-            const h = (_ = this.shadowRoot) == null ? void 0 : _.querySelector(
+            const p = (_ = this.shadowRoot) == null ? void 0 : _.querySelector(
               '.nav__submenu:not([hidden]) [part="link"]'
             );
-            h == null || h.focus();
+            p == null || p.focus();
           });
         }
         break;
       }
     }
   }
+  /** @internal */
   _handleSubKeydown(e, n) {
     var l, s, u;
     const o = (l = this.shadowRoot) == null ? void 0 : l.querySelectorAll(
@@ -376,6 +382,7 @@ let d = class extends k {
       }
     }
   }
+  /** @internal */
   _handleOutsideClick(e) {
     e.composedPath().includes(this) || (this._expandedIndex = null);
   }
@@ -387,8 +394,9 @@ let d = class extends k {
     super.disconnectedCallback(), document.removeEventListener("click", this._boundOutsideClick);
   }
   // ─── Render Helpers ───
+  /** @internal */
   _renderHamburgerIcon() {
-    return c`<svg
+    return d`<svg
       width="24"
       height="24"
       viewBox="0 0 24 24"
@@ -404,8 +412,9 @@ let d = class extends k {
             <line x1="3" y1="18" x2="21" y2="18"></line>`}
     </svg>`;
   }
+  /** @internal */
   _renderChevronIcon() {
-    return c`<svg
+    return d`<svg
       class="nav__chevron"
       width="16"
       height="16"
@@ -423,9 +432,10 @@ let d = class extends k {
       />
     </svg>`;
   }
+  /** @internal */
   _renderSubMenu(e, n, o) {
     const a = this._expandedIndex === n;
-    return c`
+    return d`
       <ul
         class="nav__submenu"
         role="list"
@@ -433,16 +443,16 @@ let d = class extends k {
         ?hidden=${!a}
       >
         ${e.map(
-      (t) => c`
+      (t) => d`
             <li class="nav__submenu-item">
               <a
                 part="link"
                 href=${this._sanitizeHref(t.href)}
-                class=${x({
+                class=${m({
         nav__link: !0,
         "nav__link--active": !!t.current
       })}
-                aria-current=${t.current ? "page" : v}
+                aria-current=${t.current ? "page" : x}
                 @click=${(i) => this._handleSubItemClick(t, i)}
                 @keydown=${(i) => this._handleSubKeydown(i, n)}
               >
@@ -454,6 +464,7 @@ let d = class extends k {
       </ul>
     `;
   }
+  /** @internal */
   _renderItem(e, n) {
     var l;
     const o = !!((l = e.children) != null && l.length), a = this._expandedIndex === n, t = {
@@ -461,30 +472,30 @@ let d = class extends k {
       "nav__link--active": !!e.current,
       "nav__link--has-submenu": o,
       "nav__link--expanded": a
-    }, i = o ? c`
+    }, i = o ? d`
           <button
             part="link"
-            class=${x(t)}
-            aria-expanded=${a ? "true" : v}
+            class=${m(t)}
+            aria-expanded=${a ? "true" : x}
             @click=${(s) => this._handleItemClick(e, n, s)}
             @keydown=${(s) => this._handleKeydown(s, n, e)}
           >
             ${e.label} ${this._renderChevronIcon()}
           </button>
           ${this._renderSubMenu(e.children ?? [], n, e.label)}
-        ` : c`
+        ` : d`
           <a
             part="link"
             href=${this._sanitizeHref(e.href)}
-            class=${x(t)}
-            aria-current=${e.current ? "page" : v}
+            class=${m(t)}
+            aria-current=${e.current ? "page" : x}
             @click=${(s) => this._handleItemClick(e, n, s)}
             @keydown=${(s) => this._handleKeydown(s, n, e)}
           >
             ${e.label}
           </a>
         `;
-    return c` <li part="item" class="nav__item">${i}</li> `;
+    return d` <li part="item" class="nav__item">${i}</li> `;
   }
   // ─── Render ───
   render() {
@@ -492,20 +503,20 @@ let d = class extends k {
       nav__list: !0,
       "nav__list--open": this._mobileOpen
     };
-    return c`
+    return d`
       <nav part="nav" aria-label=${this.label}>
         <button
           part="toggle"
           class="nav__toggle"
-          aria-expanded=${this._mobileOpen ? "true" : v}
+          aria-expanded=${this._mobileOpen ? "true" : x}
           aria-controls="nav-list"
-          aria-label=${this._mobileOpen ? "Close navigation menu" : "Open navigation menu"}
+          aria-label=${this._mobileOpen ? this.labelCloseMenu : this.labelOpenMenu}
           @click=${this._handleToggle}
         >
           ${this._renderHamburgerIcon()}
         </button>
 
-        <ul part="list" id="nav-list" class=${x(e)} role="list">
+        <ul part="list" id="nav-list" class=${m(e)} role="list">
           ${w(
       this.items,
       (n, o) => o,
@@ -516,9 +527,9 @@ let d = class extends k {
     `;
   }
 };
-d.styles = [$, C];
-p([
-  m({
+c.styles = [C, $];
+h([
+  v({
     type: Array,
     converter: {
       fromAttribute(e) {
@@ -532,23 +543,29 @@ p([
       }
     }
   })
-], d.prototype, "items", 2);
-p([
-  m({ type: String, reflect: !0 })
-], d.prototype, "orientation", 2);
-p([
-  m({ type: String })
-], d.prototype, "label", 2);
-p([
+], c.prototype, "items", 2);
+h([
+  v({ type: String, reflect: !0 })
+], c.prototype, "orientation", 2);
+h([
+  v({ type: String })
+], c.prototype, "label", 2);
+h([
+  v({ type: String, attribute: "label-open-menu" })
+], c.prototype, "labelOpenMenu", 2);
+h([
+  v({ type: String, attribute: "label-close-menu" })
+], c.prototype, "labelCloseMenu", 2);
+h([
   b()
-], d.prototype, "_mobileOpen", 2);
-p([
+], c.prototype, "_mobileOpen", 2);
+h([
   b()
-], d.prototype, "_expandedIndex", 2);
-d = p([
+], c.prototype, "_expandedIndex", 2);
+c = h([
   y("hx-nav")
-], d);
+], c);
 export {
-  d as H
+  c as H
 };
-//# sourceMappingURL=hx-nav-DM6-cGKF.js.map
+//# sourceMappingURL=hx-nav-3JsN2Oak.js.map

package/dist/shared/hx-nav-3JsN2Oak.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-nav-3JsN2Oak.js","sources":["../../src/components/hx-nav/hx-nav.styles.ts","../../src/components/hx-nav/hx-nav.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixNavStyles = css`\n  :host {\n    display: block;\n    font-family: var(--hx-nav-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-nav-font-size, var(--hx-font-size-sm, 0.875rem));\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Nav Container ─── */\n\n  [part='nav'] {\n    position: relative;\n    background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #111827));\n    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f3f4f6));\n    padding: var(--hx-nav-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));\n  }\n\n  /* ─── Hamburger Toggle ─── */\n\n  [part='toggle'] {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    padding: var(--hx-space-2, 0.5rem);\n    background: transparent;\n    border: none;\n    border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f3f4f6));\n    cursor: pointer;\n    transition: background-color var(--hx-transition-fast, 150ms) ease;\n    line-height: 0;\n  }\n\n  [part='toggle']:hover {\n    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #374151));\n  }\n\n  [part='toggle']:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Navigation List ─── */\n\n  [part='list'] {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    gap: var(--hx-space-1, 0.25rem);\n    align-items: center;\n  }\n\n  /* ─── Nav Item ─── */\n\n  [part='item'] {\n    position: relative;\n  }\n\n  /* ─── Nav Link / Button ─── */\n\n  .nav__link {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));\n    color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #f3f4f6));\n    text-decoration: none;\n    border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    border: none;\n    background: transparent;\n    cursor: pointer;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: var(--hx-font-weight-medium, 500);\n    line-height: var(--hx-line-height-normal, 1.5);\n    white-space: nowrap;\n    transition:\n      background-color var(--hx-transition-fast, 150ms) ease,\n      color var(--hx-transition-fast, 150ms) ease;\n  }\n\n  .nav__link:hover {\n    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #374151));\n    color: var(--hx-nav-link-hover-color, var(--hx-color-white, #ffffff));\n  }\n\n  .nav__link:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .nav__link--active {\n    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #2563eb));\n    color: var(--hx-nav-link-active-color, var(--hx-color-white, #ffffff));\n  }\n\n  /* ─── Chevron Icon ─── */\n\n  .nav__chevron {\n    transition: transform var(--hx-transition-normal, 200ms) ease;\n    flex-shrink: 0;\n  }\n\n  .nav__link--expanded .nav__chevron {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Submenu ─── */\n\n  .nav__submenu {\n    position: absolute;\n    top: calc(100% + var(--hx-space-1, 0.25rem));\n    left: 0;\n    min-width: var(--hx-nav-submenu-min-width, 12rem);\n    list-style: none;\n    margin: 0;\n    padding: var(--hx-space-1, 0.25rem) 0;\n    background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #1f2937));\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    box-shadow: var(\n      --hx-shadow-md,\n      0 4px 6px -1px rgb(0 0 0 / 0.1),\n      0 2px 4px -2px rgb(0 0 0 / 0.1)\n    );\n    z-index: var(--hx-z-index-dropdown, 100);\n  }\n\n  .nav__submenu[hidden] {\n    display: none;\n  }\n\n  .nav__submenu .nav__link {\n    display: block;\n    width: 100%;\n    text-align: left;\n    border-radius: 0;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n  }\n\n  /* ─── Vertical / Sidebar Orientation ─── */\n\n  :host([orientation='vertical']) [part='nav'] {\n    padding: var(--hx-space-4, 1rem) var(--hx-space-2, 0.5rem);\n  }\n\n  :host([orientation='vertical']) [part='list'] {\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--hx-space-1, 0.25rem);\n  }\n\n  :host([orientation='vertical']) .nav__link {\n    width: 100%;\n    justify-content: flex-start;\n  }\n\n  :host([orientation='vertical']) .nav__submenu {\n    position: static;\n    box-shadow: none;\n    border-radius: 0;\n    background-color: transparent;\n    padding: 0;\n    padding-left: var(--hx-space-4, 1rem);\n  }\n\n  :host([orientation='vertical']) .nav__submenu[hidden] {\n    display: none;\n  }\n\n  :host([orientation='vertical']) .nav__submenu .nav__link {\n    padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #d1d5db));\n  }\n\n  /* ─── Mobile Responsive ─── */\n\n  @media (max-width: 768px) {\n    [part='nav'] {\n      display: flex;\n      flex-direction: column;\n      padding: var(--hx-space-2, 0.5rem);\n    }\n\n    [part='toggle'] {\n      display: inline-flex;\n      align-self: flex-end;\n    }\n\n    [part='list'] {\n      display: none;\n      flex-direction: column;\n      align-items: stretch;\n      width: 100%;\n      margin-top: var(--hx-space-2, 0.5rem);\n      gap: var(--hx-space-1, 0.25rem);\n    }\n\n    [part='list'].nav__list--open {\n      display: flex;\n    }\n\n    [part='item'] {\n      width: 100%;\n    }\n\n    .nav__link {\n      width: 100%;\n      justify-content: flex-start;\n    }\n\n    .nav__submenu {\n      position: static;\n      box-shadow: none;\n      border-radius: 0;\n      padding-left: var(--hx-space-4, 1rem);\n      background-color: transparent;\n    }\n\n    .nav__submenu .nav__link {\n      padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);\n    }\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav__link,\n    .nav__chevron,\n    [part='toggle'] {\n      transition: none;\n      animation: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, svg } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixNavStyles } from './hx-nav.styles.js';\n\n/** A single navigation item, optionally with nested children. */\nexport interface NavItem {\n  /** Display label for the item. */\n  label: string;\n  /** Href for the item link. Required unless children are provided. */\n  href?: string;\n  /** Whether this item represents the current page. */\n  current?: boolean;\n  /** Nested sub-menu items. */\n  children?: NavItem[];\n}\n\n/** Layout orientation for the navigation. */\ntype NavOrientation = 'horizontal' | 'vertical';\n\n/**\n * Primary and secondary navigation component.\n * Supports horizontal menu bar and vertical sidebar patterns.\n * Mobile responsive with hamburger toggle.\n *\n * @summary Navigation bar supporting horizontal and vertical layouts with nested submenus.\n *\n * @tag hx-nav\n *\n * @fires {CustomEvent<{item: NavItem}>} hx-nav-select - Dispatched when a nav item is activated.\n *\n * @csspart nav - The nav landmark element.\n * @csspart list - The top-level list element.\n * @csspart item - Each list item wrapper.\n * @csspart link - The anchor or button element inside each item.\n * @csspart toggle - The mobile hamburger toggle button.\n *\n * @cssprop [--hx-nav-bg=var(--hx-color-neutral-900)] - Navigation background color.\n * @cssprop [--hx-nav-color=var(--hx-color-neutral-100)] - Navigation text color.\n * @cssprop [--hx-nav-font-family=var(--hx-font-family-sans)] - Navigation font family.\n * @cssprop [--hx-nav-link-color=var(--hx-color-neutral-100)] - Link text color.\n * @cssprop [--hx-nav-link-hover-bg=var(--hx-color-neutral-700)] - Link hover background.\n * @cssprop [--hx-nav-link-hover-color=var(--hx-color-white)] - Link hover text color.\n * @cssprop [--hx-nav-link-active-bg=var(--hx-color-primary-600)] - Active link background.\n * @cssprop [--hx-nav-link-active-color=var(--hx-color-white)] - Active link text color.\n * @cssprop [--hx-nav-submenu-bg=var(--hx-color-neutral-800)] - Submenu background color.\n * @cssprop [--hx-nav-submenu-min-width=12rem] - Submenu minimum width.\n * @cssprop [--hx-nav-font-size=var(--hx-font-size-sm)] - Navigation font size.\n * @cssprop [--hx-nav-padding=var(--hx-space-2) var(--hx-space-4)] - Navigation padding.\n * @cssprop [--hx-nav-item-padding=var(--hx-space-2) var(--hx-space-3)] - Item padding.\n * @cssprop [--hx-nav-border-radius=var(--hx-border-radius-sm)] - Item border radius.\n */\n@customElement('hx-nav')\nexport class HelixNav extends LitElement {\n  static override styles = [tokenStyles, helixNavStyles];\n\n  // ─── Properties ───\n\n  /**\n   * Navigation items array.\n   * @attr items\n   */\n  @property({\n    type: Array,\n    converter: {\n      fromAttribute(value: string | null): NavItem[] {\n        if (!value) return [];\n        try {\n          const parsed: unknown = JSON.parse(value);\n          return Array.isArray(parsed) ? (parsed as NavItem[]) : [];\n        } catch {\n          return [];\n        }\n      },\n    },\n  })\n  items: NavItem[] = [];\n\n  /**\n   * Layout orientation: 'horizontal' (menu bar) or 'vertical' (sidebar).\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: NavOrientation = 'horizontal';\n\n  /**\n   * Accessible label for the nav landmark.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Main navigation';\n\n  /** Accessible label for the navigation toggle button when menu is closed. */\n  @property({ type: String, attribute: 'label-open-menu' })\n  labelOpenMenu = 'Open navigation menu';\n\n  /** Accessible label for the navigation toggle button when menu is open. */\n  @property({ type: String, attribute: 'label-close-menu' })\n  labelCloseMenu = 'Close navigation menu';\n\n  // ─── State ───\n\n  /**\n   * Tracks whether the mobile navigation menu is currently expanded.\n   * @internal\n   */\n  @state() private _mobileOpen = false;\n  /**\n   * Index of the currently expanded top-level nav item with a submenu, or null if none is expanded.\n   * @internal\n   */\n  @state() private _expandedIndex: number | null = null;\n\n  // ─── Private: bound event handler reference ───\n\n  /**\n   * Stable bound reference to the outside-click handler, stored for addEventListener/removeEventListener symmetry.\n   * @internal\n   */\n  private _boundOutsideClick: (e: MouseEvent) => void = this._handleOutsideClick.bind(this);\n\n  /**\n   * Sanitizes a URL to prevent XSS via javascript: or data: URIs.\n   * Only allows http:, https:, relative paths, and fragment-only links.\n   */\n  /** @internal */\n  private _sanitizeHref(href: string | undefined): string {\n    if (!href || href === '#') return '#';\n    // Allow relative paths, fragments, and http(s)\n    if (\n      href.startsWith('/') ||\n      href.startsWith('./') ||\n      href.startsWith('../') ||\n      href.startsWith('#')\n    ) {\n      return href;\n    }\n    try {\n      const url = new URL(href, window.location.href);\n      if (url.protocol === 'http:' || url.protocol === 'https:') {\n        return href;\n      }\n    } catch {\n      // Invalid URL — fall through to safe default\n    }\n    return '#';\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleToggle(): void {\n    this._mobileOpen = !this._mobileOpen;\n    if (!this._mobileOpen) {\n      this._expandedIndex = null;\n    }\n  }\n\n  /** @internal */\n  private _handleItemClick(item: NavItem, index: number, e: Event): void {\n    e.preventDefault();\n    if (item.children?.length) {\n      this._expandedIndex = this._expandedIndex === index ? null : index;\n    } else {\n      this._mobileOpen = false;\n      this._expandedIndex = null;\n      this.dispatchEvent(\n        new CustomEvent<{ item: NavItem }>('hx-nav-select', {\n          bubbles: true,\n          composed: true,\n          detail: { item },\n        }),\n      );\n    }\n  }\n\n  /** @internal */\n  private _handleSubItemClick(item: NavItem, e: Event): void {\n    e.preventDefault();\n    this._mobileOpen = false;\n    this._expandedIndex = null;\n    this.dispatchEvent(\n      new CustomEvent<{ item: NavItem }>('hx-nav-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleKeydown(e: KeyboardEvent, index: number, item: NavItem): void {\n    const items = this.shadowRoot?.querySelectorAll<HTMLElement>(\n      '[part=\"list\"] > [part=\"item\"] > [part=\"link\"]',\n    );\n    if (!items) return;\n    const itemsArr = Array.from(items);\n    const current = itemsArr[index];\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown': {\n        e.preventDefault();\n        if (item.children?.length && e.key === 'ArrowDown' && this.orientation === 'horizontal') {\n          // open submenu and focus first item\n          this._expandedIndex = index;\n          void this.updateComplete.then(() => {\n            const firstSub = this.shadowRoot?.querySelector<HTMLElement>(\n              `.nav__submenu [part=\"link\"]`,\n            );\n            firstSub?.focus();\n          });\n        } else {\n          const next = itemsArr[index + 1] ?? itemsArr[0];\n          next?.focus();\n        }\n        break;\n      }\n      case 'ArrowLeft':\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prev = itemsArr[index - 1] ?? itemsArr[itemsArr.length - 1];\n        prev?.focus();\n        break;\n      }\n      case 'Escape': {\n        this._expandedIndex = null;\n        current?.focus();\n        break;\n      }\n      case 'Enter':\n      case ' ': {\n        if (item.children?.length) {\n          e.preventDefault();\n          const wasExpanded = this._expandedIndex === index;\n          this._expandedIndex = wasExpanded ? null : index;\n          if (!wasExpanded) {\n            void this.updateComplete.then(() => {\n              const firstSub = this.shadowRoot?.querySelector<HTMLElement>(\n                `.nav__submenu:not([hidden]) [part=\"link\"]`,\n              );\n              firstSub?.focus();\n            });\n          }\n        }\n        break;\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleSubKeydown(e: KeyboardEvent, parentIndex: number): void {\n    const subItems = this.shadowRoot?.querySelectorAll<HTMLElement>(\n      `.nav__submenu:not([hidden]) [part=\"link\"]`,\n    );\n    if (!subItems) return;\n    const arr = Array.from(subItems);\n    const focused = (e.currentTarget ?? e.target) as HTMLElement;\n    const currentIdx = arr.indexOf(focused);\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const next = arr[currentIdx + 1] ?? arr[0];\n        next?.focus();\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prev = arr[currentIdx - 1] ?? arr[arr.length - 1];\n        prev?.focus();\n        break;\n      }\n      case 'Escape': {\n        e.preventDefault();\n        this._expandedIndex = null;\n        const parentLinks = this.shadowRoot?.querySelectorAll<HTMLElement>(\n          '[part=\"list\"] > [part=\"item\"] > [part=\"link\"]',\n        );\n        parentLinks?.[parentIndex]?.focus();\n        break;\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleOutsideClick(e: MouseEvent): void {\n    const path = e.composedPath();\n    if (!path.includes(this)) {\n      this._expandedIndex = null;\n    }\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._boundOutsideClick);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._boundOutsideClick);\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderHamburgerIcon() {\n    return html`<svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      aria-hidden=\"true\"\n    >\n      ${this._mobileOpen\n        ? svg`<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>`\n        : svg`<line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"></line>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"></line>`}\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderChevronIcon() {\n    return html`<svg\n      class=\"nav__chevron\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M4.5 6L8 9.5 11.5 6\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        fill=\"none\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderSubMenu(children: NavItem[], parentIndex: number, parentLabel: string) {\n    const isExpanded = this._expandedIndex === parentIndex;\n    return html`\n      <ul\n        class=\"nav__submenu\"\n        role=\"list\"\n        aria-label=\"${parentLabel} submenu\"\n        ?hidden=${!isExpanded}\n      >\n        ${children.map(\n          (child) => html`\n            <li class=\"nav__submenu-item\">\n              <a\n                part=\"link\"\n                href=${this._sanitizeHref(child.href)}\n                class=${classMap({\n                  nav__link: true,\n                  'nav__link--active': !!child.current,\n                })}\n                aria-current=${child.current ? 'page' : nothing}\n                @click=${(e: Event) => this._handleSubItemClick(child, e)}\n                @keydown=${(e: KeyboardEvent) => this._handleSubKeydown(e, parentIndex)}\n              >\n                ${child.label}\n              </a>\n            </li>\n          `,\n        )}\n      </ul>\n    `;\n  }\n\n  /** @internal */\n  private _renderItem(item: NavItem, index: number) {\n    const hasChildren = !!item.children?.length;\n    const isExpanded = this._expandedIndex === index;\n\n    const linkClasses = {\n      nav__link: true,\n      'nav__link--active': !!item.current,\n      'nav__link--has-submenu': hasChildren,\n      'nav__link--expanded': isExpanded,\n    };\n\n    const content = hasChildren\n      ? html`\n          <button\n            part=\"link\"\n            class=${classMap(linkClasses)}\n            aria-expanded=${isExpanded ? 'true' : nothing}\n            @click=${(e: Event) => this._handleItemClick(item, index, e)}\n            @keydown=${(e: KeyboardEvent) => this._handleKeydown(e, index, item)}\n          >\n            ${item.label} ${this._renderChevronIcon()}\n          </button>\n          ${this._renderSubMenu(item.children ?? [], index, item.label)}\n        `\n      : html`\n          <a\n            part=\"link\"\n            href=${this._sanitizeHref(item.href)}\n            class=${classMap(linkClasses)}\n            aria-current=${item.current ? 'page' : nothing}\n            @click=${(e: Event) => this._handleItemClick(item, index, e)}\n            @keydown=${(e: KeyboardEvent) => this._handleKeydown(e, index, item)}\n          >\n            ${item.label}\n          </a>\n        `;\n\n    return html` <li part=\"item\" class=\"nav__item\">${content}</li> `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const listClasses = {\n      nav__list: true,\n      'nav__list--open': this._mobileOpen,\n    };\n\n    return html`\n      <nav part=\"nav\" aria-label=${this.label}>\n        <button\n          part=\"toggle\"\n          class=\"nav__toggle\"\n          aria-expanded=${this._mobileOpen ? 'true' : nothing}\n          aria-controls=\"nav-list\"\n          aria-label=${this._mobileOpen ? this.labelCloseMenu : this.labelOpenMenu}\n          @click=${this._handleToggle}\n        >\n          ${this._renderHamburgerIcon()}\n        </button>\n\n        <ul part=\"list\" id=\"nav-list\" class=${classMap(listClasses)} role=\"list\">\n          ${repeat(\n            this.items,\n            (_item, i) => i,\n            (item, i) => this._renderItem(item, i),\n          )}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\n/** Canonical type alias for the hx-nav component. */\nexport type HxNav = HelixNav;\n\n/** @deprecated Use {@link HxNav} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcNav = HelixNav;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-nav': HelixNav;\n  }\n}\n"],"names":["helixNavStyles","css","HelixNav","LitElement","href","url","item","index","e","_a","items","itemsArr","current","_b","firstSub","next","prev","_c","wasExpanded","parentIndex","subItems","arr","focused","currentIdx","parentLinks","html","svg","children","parentLabel","isExpanded","child","classMap","nothing","hasChildren","linkClasses","content","listClasses","repeat","_item","i","tokenStyles","__decorateClass","property","value","parsed","state","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAiBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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-nav-item-D54-5eUM.js → hx-nav-item-D3EJatzc.js}

@@ -22,7 +22,7 @@ const $ = b`
     color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f3f4f6));
     transition: width var(--hx-transition-normal, 300ms) ease;
     overflow: hidden;
-    border-right: var(--hx-border-width-thin, 1px) solid
+    border-inline-end: var(--hx-border-width-thin, 1px) solid
       var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #374151));
   }
 
@@ -85,7 +85,7 @@ const $ = b`
     justify-content: center;
     width: var(--hx-space-8, 2rem);
     height: var(--hx-space-8, 2rem);
-    margin-left: auto;
+    margin-inline-start: auto;
     flex-shrink: 0;
     padding: 0;
     border: none;
@@ -134,6 +134,10 @@ const $ = b`
       transition: none;
     }
 
+    .side-nav__toggle {
+      transition: none;
+    }
+
     .side-nav__toggle svg {
       transition: none;
     }
@@ -158,6 +162,7 @@ let p = class extends w {
    * setting or removing the `data-collapsed` attribute. This allows child
    * items to respond to collapsed mode via their CSS selectors.
    */
+  /** @internal */
   _propagateCollapsedToChildren() {
     var t;
     const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot:not([name])");
@@ -170,6 +175,7 @@ let p = class extends w {
    * Handles the default slot's slotchange event so that if items are added
    * after initial render, they immediately receive the correct collapsed state.
    */
+  /** @internal */
   _onDefaultSlotChange() {
     this._propagateCollapsedToChildren();
   }
@@ -180,8 +186,9 @@ let p = class extends w {
    * skipped. Focus is applied to the interactive element inside the shadow DOM
    * of each item (anchor or button with part="link").
    */
+  /** @internal */
   _handleKeydown(e) {
-    var g, u, _;
+    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;
@@ -193,7 +200,7 @@ let p = class extends w {
     let r = -1;
     for (let h = 0; h < t.length; h++) {
       const m = t[h];
-      if (m && (m === o || m.contains(o) || ((u = m.shadowRoot) == null ? void 0 : u.contains(o)) === !0)) {
+      if (m && (m === o || m.contains(o) || ((_ = m.shadowRoot) == null ? void 0 : _.contains(o)) === !0)) {
         r = h;
         break;
       }
@@ -203,10 +210,11 @@ let p = class extends w {
     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 = (_ = n.shadowRoot) == null ? void 0 : _.querySelector('[part="link"]');
+    const x = (u = n.shadowRoot) == null ? void 0 : u.querySelector('[part="link"]');
     x == null || x.focus();
   }
   // ─── Event Handling ───
+  /** @internal */
   _handleToggle() {
     this.collapsed = !this.collapsed, this.collapsed ? this.dispatchEvent(
       new CustomEvent("hx-collapse", {
@@ -223,6 +231,7 @@ let p = class extends w {
     );
   }
   // ─── Render ───
+  /** @internal */
   _renderToggleIcon() {
     return d`<svg viewBox="0 0 20 20" aria-hidden="true">
       <path
@@ -377,9 +386,7 @@ const T = b`
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
-    transition:
-      opacity var(--hx-transition-fast, 150ms) ease,
-      width var(--hx-transition-fast, 150ms) ease;
+    transition: opacity var(--hx-transition-fast, 150ms) ease;
   }
 
   /* ─── Badge ─── */
@@ -415,16 +422,22 @@ const T = b`
   /* ─── Children (sub-nav) ─── */
 
   .nav-item__children {
-    display: flex;
-    flex-direction: column;
-    padding-left: var(--hx-space-6, 1.5rem);
-    max-height: 0;
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows var(--hx-transition-normal, 300ms ease);
     overflow: hidden;
-    transition: max-height var(--hx-transition-normal, 300ms) ease;
   }
 
   :host([expanded]) .nav-item__children {
-    max-height: 62.5rem; /* large enough for any submenu depth */
+    grid-template-rows: 1fr;
+  }
+
+  .nav-item__children-inner {
+    overflow: hidden;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    padding-left: var(--hx-space-6, 1.5rem);
   }
 
   /* ─── Tooltip (collapsed mode) ─── */
@@ -482,12 +495,17 @@ const T = b`
   }
 
   @media (prefers-reduced-motion: reduce) {
+    .nav-item__link,
     .nav-item__label,
     .nav-item__arrow,
     .nav-item__children,
     .nav-item__tooltip {
       transition: none;
     }
+
+    :host([expanded]) .nav-item__children {
+      grid-template-rows: 1fr;
+    }
   }
 `;
 var A = Object.defineProperty, D = Object.getOwnPropertyDescriptor, c = (e, a, t, o) => {
@@ -507,20 +525,24 @@ let s = class extends w {
     super.attributeChangedCallback(e, a, t), e === "data-collapsed" && (this._isCollapsed = t !== null);
   }
   // ─── Slot Change Handler ───
+  /** @internal */
   _onChildrenSlotChange(e) {
     const a = e.target;
     this._hasChildren = a.assignedNodes({ flatten: !0 }).length > 0;
   }
   // ─── Private Helpers ───
+  /** @internal */
   _getDirectText() {
     return Array.from(this.childNodes).filter((e) => e.nodeType === Node.TEXT_NODE).map((e) => {
       var a;
       return ((a = e.textContent) == null ? void 0 : a.trim()) ?? "";
     }).filter(Boolean).join(" ");
   }
+  /** @internal */
   _handleToggle(e) {
     this.disabled || (e.preventDefault(), this.expanded = !this.expanded);
   }
+  /** @internal */
   _renderExpandArrow() {
     return d`<span class="nav-item__arrow" aria-hidden="true">
       <svg viewBox="0 0 20 20">
@@ -569,7 +591,9 @@ let s = class extends w {
       <div class="nav-item">
         ${t}
         <div part="children" class="nav-item__children" role="group">
-          <slot name="children" @slotchange=${this._onChildrenSlotChange}></slot>
+          <div class="nav-item__children-inner">
+            <slot name="children" @slotchange=${this._onChildrenSlotChange}></slot>
+          </div>
         </div>
       </div>
     `;
@@ -601,4 +625,4 @@ export {
   s as H,
   p as a
 };
-//# sourceMappingURL=hx-nav-item-D54-5eUM.js.map
+//# sourceMappingURL=hx-nav-item-D3EJatzc.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-nav-item-D3EJatzc.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  }\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, #111827));\n    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f3f4f6));\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, #374151));\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, #374151));\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, #374151));\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, #9ca3af));\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, #f3f4f6);\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 var(--hx-focus-ring-color, #2563eb);\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    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return;\n\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(\n        (el): el is HTMLElement =>\n          el.tagName.toLowerCase() === 'hx-nav-item' && !el.hasAttribute('disabled'),\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    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    const focusTarget = targetItem.shadowRoot?.querySelector<HTMLElement>('[part=\"link\"]');\n    focusTarget?.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    background-color: var(--hx-nav-item-host-bg, var(--hx-color-neutral-900, #111827));\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, #d1d5db));\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: left;\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, #f3f4f6));\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 var(--hx-focus-ring-color, #2563eb);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Active State ─── */\n\n  :host([active]) .nav-item__link {\n    background-color: var(--hx-nav-item-active-bg, var(--hx-color-primary-600, #2563eb));\n    color: var(--hx-nav-item-active-color, var(--hx-color-neutral-50, #f9fafb));\n  }\n\n  :host([active]) .nav-item__link:hover {\n    background-color: var(--hx-nav-item-active-hover-bg, var(--hx-color-primary-700, #1d4ed8));\n  }\n\n  /* ─── Disabled State ─── */\n\n  :host([disabled]) .nav-item__link {\n    opacity: 0.4;\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-left: 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-left: 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-left: 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    background-color: var(--hx-color-neutral-800, #1f2937);\n    color: var(--hx-color-neutral-100, #f3f4f6);\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, 100);\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  // ─── 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  // ─── 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=\"nav-item-tooltip\" 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 ? 'nav-item-tooltip' : 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 ? 'nav-item-tooltip' : 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","activeEl","currentIndex","i","_b","nextIndex","targetItem","focusTarget","_c","html","tokenStyles","__decorateClass","property","customElement","helixNavItemStyles","HelixNavItem","name","old","value","n","label","innerContent","nothing","linkEl","state"],"mappings":"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"}