@helixui/library 0.3.4 → 1.0.1

package/dist/shared/hx-meter-CZ7lnMra.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-meter-CZ7lnMra.js","sources":["../../src/components/hx-meter/hx-meter.styles.ts","../../src/components/hx-meter/hx-meter.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixMeterStyles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .meter {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    width: 100%;\n  }\n\n  .meter__label {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #374151));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .meter__track {\n    position: relative;\n    width: 100%;\n    height: var(--hx-meter-track-height, var(--hx-size-2, 0.5rem));\n    background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e5e7eb));\n    border-radius: var(--hx-meter-track-radius, var(--hx-radius-full, 9999px));\n    overflow: hidden;\n  }\n\n  .meter__indicator {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    height: 100%;\n    border-radius: inherit;\n    background-color: var(--_indicator-color);\n    transition:\n      width var(--hx-duration-fast, 150ms) ease,\n      background-color var(--hx-duration-fast, 150ms) ease;\n  }\n\n  /* ─── Default (no thresholds configured) ─── */\n\n  :host {\n    --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #3b82f6));\n  }\n\n  /* ─── Semantic state colors ─── */\n\n  :host([data-state='optimum']) {\n    --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #22c55e));\n  }\n\n  :host([data-state='warning']) {\n    --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #f59e0b));\n  }\n\n  :host([data-state='danger']) {\n    --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-danger-500, #ef4444));\n  }\n\n  /* ─── State Label (WCAG 1.4.1) ─── */\n  /* Visible text label rendered below the track when a semantic state is active. */\n  /* Ensures the meter state is not conveyed by fill color alone.                 */\n  /* aria-hidden=\"true\" because aria-valuetext already includes the state for AT. */\n\n  .meter__state-label {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    line-height: var(--hx-line-height-tight, 1.25);\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  .meter__state-label[data-state='optimum'] {\n    color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #15803d));\n  }\n\n  .meter__state-label[data-state='warning'] {\n    color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #b45309));\n  }\n\n  .meter__state-label[data-state='danger'] {\n    color: var(--hx-meter-color-danger, var(--hx-color-danger-700, #b91c1c));\n  }\n\n  /* ─── Native meter hidden (we use custom rendering) ─── */\n\n  .meter__native {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMeterStyles } from './hx-meter.styles.js';\n\ntype MeterState = 'optimum' | 'warning' | 'danger' | 'default';\n\n/**\n * A scalar measurement within a known range — e.g., disk usage, health score,\n * or any numeric value with defined min/max bounds. Supports low/high/optimum\n * threshold markers for semantic color feedback.\n *\n * @summary Scalar measurement gauge within a defined range.\n *\n * @tag hx-meter\n *\n * @slot label - Visible label rendered above the meter track. When using this\n *   slot without the `label` attribute, the accessible name is derived from the\n *   slot content via `aria-labelledby`. The `label` attribute is NOT required\n *   when slot content is provided — the component detects slot content and\n *   switches to `aria-labelledby` automatically.\n *\n * @csspart base - The outer wrapper element.\n * @csspart track - The unfilled track bar element.\n * @csspart indicator - The filled bar indicating the current value.\n * @csspart label - The label wrapper element.\n *\n * @cssprop [--hx-meter-track-height] - Height of the track bar.\n * @cssprop [--hx-meter-track-color] - Background color of the unfilled track.\n * @cssprop [--hx-meter-track-radius] - Border radius of the track.\n * @cssprop [--hx-meter-indicator-color] - Default filled bar color (no thresholds).\n * @cssprop [--hx-meter-color-optimum] - Color when value is in the optimum zone.\n * @cssprop [--hx-meter-color-warning] - Color when value is in a warning zone.\n * @cssprop [--hx-meter-color-danger] - Color when value is in the danger zone.\n * @cssprop [--hx-meter-label-color] - Label text color.\n */\n@customElement('hx-meter')\nexport class HelixMeter extends LitElement {\n  static override styles = [tokenStyles, helixMeterStyles];\n\n  private static _counter = 0;\n  private _uid = `hx-meter-${++HelixMeter._counter}`;\n\n  /**\n   * Current value of the meter.\n   * @attr value\n   */\n  @property({ type: Number, reflect: true })\n  value = 0;\n\n  /**\n   * Minimum value of the range.\n   * @attr min\n   */\n  @property({ type: Number, reflect: true })\n  min = 0;\n\n  /**\n   * Maximum value of the range.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 100;\n\n  /**\n   * Threshold below which the value is considered suboptimal (lower range warning).\n   * @attr low\n   */\n  @property({ type: Number, reflect: true })\n  low?: number;\n\n  /**\n   * Threshold above which the value is considered suboptimal (upper range warning).\n   * @attr high\n   */\n  @property({ type: Number, reflect: true })\n  high?: number;\n\n  /**\n   * The optimal value within the range. Used to determine which zone is \"good\".\n   * @attr optimum\n   */\n  @property({ type: Number, reflect: true })\n  optimum?: number;\n\n  /**\n   * Accessible label for the meter. Used as the visible label text and as\n   * the source for `aria-labelledby`. When only slot content is provided\n   * (no `label` attribute), the slot content is used for the accessible name.\n   * @attr label\n   */\n  @property({ type: String })\n  label?: string;\n\n  @state()\n  private _hasSlotContent = false;\n\n  private _clampedValue(): number {\n    return Math.min(Math.max(this.value, this.min), this.max);\n  }\n\n  private _percentage(): number {\n    const range = this.max - this.min;\n    if (range === 0) return 0;\n    return ((this._clampedValue() - this.min) / range) * 100;\n  }\n\n  private _resolveState(): MeterState {\n    const v = this._clampedValue();\n    const hasLow = this.low !== undefined;\n    const hasHigh = this.high !== undefined;\n    const hasOptimum = this.optimum !== undefined;\n\n    if (!hasLow && !hasHigh && !hasOptimum) return 'default';\n\n    // When hasLow/hasHigh/hasOptimum are true, the corresponding property is defined.\n    // Use nullish coalescing to satisfy the type checker while preserving the runtime logic.\n    const lowVal = this.low ?? 0;\n    const highVal = this.high ?? this.max;\n    const inLowZone = hasLow && v < lowVal;\n    const inHighZone = hasHigh && v > highVal;\n    const inMiddleZone = !inLowZone && !inHighZone;\n\n    if (!hasOptimum) {\n      if (inLowZone || inHighZone) return 'warning';\n      return 'optimum';\n    }\n\n    const opt = this.optimum ?? this.min;\n    const optimumInLow = hasLow && opt < lowVal;\n    const optimumInHigh = hasHigh && opt > highVal;\n    const optimumInMiddle = !optimumInLow && !optimumInHigh;\n\n    if (optimumInMiddle) {\n      if (inMiddleZone) return 'optimum';\n      return 'warning';\n    } else if (optimumInLow) {\n      if (inLowZone) return 'optimum';\n      if (inMiddleZone) return 'warning';\n      return 'danger';\n    } else {\n      // optimumInHigh\n      if (inHighZone) return 'optimum';\n      if (inMiddleZone) return 'warning';\n      return 'danger';\n    }\n  }\n\n  private _onLabelSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSlotContent = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  override updated() {\n    // Set data-state on host so :host([data-state]) CSS selectors work\n    this.dataset['state'] = this._resolveState();\n  }\n\n  // ─── WCAG 1.4.1: State label map ───\n  // The indicator bar color alone is insufficient for color-blind users.\n  // A visible state label is rendered below the track when a semantic state\n  // (optimum/warning/danger) is active, providing a non-color visual cue.\n  // aria-valuetext already embeds the state for AT users.\n\n  private static readonly _STATE_LABELS: Partial<Record<MeterState, string>> = {\n    optimum: 'Optimum',\n    warning: 'Warning',\n    danger: 'Danger',\n  };\n\n  override render() {\n    const pct = this._percentage();\n    const state = this._resolveState();\n    const clampedValue = this._clampedValue();\n    const stateLabel = state !== 'default' ? ` — ${state}` : '';\n    const ariaValuetext = `${clampedValue} of ${this.max}${stateLabel}`;\n    const hasVisibleLabel = this.label !== undefined || this._hasSlotContent;\n    const visibleStateLabel = HelixMeter._STATE_LABELS[state];\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"meter\"\n        role=\"meter\"\n        tabindex=\"0\"\n        aria-valuenow=${clampedValue}\n        aria-valuemin=${this.min}\n        aria-valuemax=${this.max}\n        aria-valuetext=${ariaValuetext}\n        aria-label=${ifDefined(!hasVisibleLabel ? `${clampedValue} of ${this.max}` : undefined)}\n        aria-labelledby=${ifDefined(hasVisibleLabel ? `${this._uid}-label` : undefined)}\n      >\n        <span\n          id=${`${this._uid}-label`}\n          part=\"label\"\n          class=\"meter__label\"\n          ?hidden=${!hasVisibleLabel}\n        >\n          <slot name=\"label\" @slotchange=${this._onLabelSlotChange}>${this.label ?? ''}</slot>\n        </span>\n        <div class=\"meter__track\" part=\"track\">\n          <div\n            part=\"indicator\"\n            class=\"meter__indicator\"\n            style=${styleMap({ width: `${pct}%` })}\n          ></div>\n        </div>\n        ${visibleStateLabel\n          ? html`<span class=\"meter__state-label\" data-state=${state} aria-hidden=\"true\"\n              >${visibleStateLabel}</span\n            >`\n          : nothing}\n        <meter\n          class=\"meter__native\"\n          value=${clampedValue}\n          min=${this.min}\n          max=${this.max}\n          low=${ifDefined(this.low)}\n          high=${ifDefined(this.high)}\n          optimum=${ifDefined(this.optimum)}\n          aria-hidden=\"true\"\n          tabindex=\"-1\"\n        ></meter>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-meter': HelixMeter;\n  }\n}\n"],"names":["helixMeterStyles","css","HelixMeter","LitElement","range","v","hasLow","hasHigh","hasOptimum","lowVal","highVal","inLowZone","inHighZone","inMiddleZone","opt","optimumInLow","optimumInHigh","e","slot","pct","state","clampedValue","stateLabel","ariaValuetext","hasVisibleLabel","visibleStateLabel","html","ifDefined","styleMap","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-import { css as g, LitElement as k, svg as _, html as d, nothing as f } from "lit";
-import { property as x, state as b, customElement as y } from "lit/decorators.js";
-import { classMap as v } from "lit/directives/class-map.js";
+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 { repeat as w } from "lit/directives/repeat.js";
 import { tokenStyles as $ } from "@helixui/tokens/lit";
 const C = g`
@@ -44,7 +44,8 @@ const C = g`
   }
 
   [part='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-nav-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -96,7 +97,8 @@ const C = g`
   }
 
   .nav__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-nav-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -244,12 +246,12 @@ const C = g`
     }
   }
 `;
-var I = Object.defineProperty, O = Object.getOwnPropertyDescriptor, p = (e, n, a, t) => {
-  for (var r = t > 1 ? void 0 : t ? O(n, a) : n, s = e.length - 1, c; s >= 0; s--)
-    (c = e[s]) && (r = (t ? c(n, a, r) : c(r)) || r);
-  return t && r && I(n, a, r), r;
+var I = Object.defineProperty, O = Object.getOwnPropertyDescriptor, p = (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 h = class extends k {
+let d = 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);
   }
@@ -273,9 +275,9 @@ let h = class extends k {
   _handleToggle() {
     this._mobileOpen = !this._mobileOpen, this._mobileOpen || (this._expandedIndex = null);
   }
-  _handleItemClick(e, n, a) {
-    var t;
-    a.preventDefault(), (t = e.children) != null && t.length ? this._expandedIndex = this._expandedIndex === n ? null : n : (this._mobileOpen = !1, this._expandedIndex = null, this.dispatchEvent(
+  _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(
       new CustomEvent("hx-nav-select", {
         bubbles: !0,
         composed: !0,
@@ -292,52 +294,52 @@ let h = class extends k {
       })
     );
   }
-  _handleKeydown(e, n, a) {
-    var c, l, u;
-    const t = (c = this.shadowRoot) == null ? void 0 : c.querySelectorAll(
-      ':scope > [part="nav"] > [part="list"] > [part="item"] > [part="link"]'
+  _handleKeydown(e, n, o) {
+    var l, s, u;
+    const a = (l = this.shadowRoot) == null ? void 0 : l.querySelectorAll(
+      '[part="list"] > [part="item"] > [part="link"]'
     );
-    if (!t) return;
-    const r = Array.from(t), s = r[n];
+    if (!a) return;
+    const t = Array.from(a), i = t[n];
     switch (e.key) {
       case "ArrowRight":
       case "ArrowDown": {
-        if (e.preventDefault(), (l = a.children) != null && l.length && e.key === "ArrowDown" && this.orientation === "horizontal")
+        if (e.preventDefault(), (s = o.children) != null && s.length && e.key === "ArrowDown" && this.orientation === "horizontal")
           this._expandedIndex = n, this.updateComplete.then(() => {
-            var o;
-            const i = (o = this.shadowRoot) == null ? void 0 : o.querySelector(
+            var h;
+            const r = (h = this.shadowRoot) == null ? void 0 : h.querySelector(
               '.nav__submenu [part="link"]'
             );
-            i == null || i.focus();
+            r == null || r.focus();
           });
         else {
-          const i = r[n + 1] ?? r[0];
-          i == null || i.focus();
+          const r = t[n + 1] ?? t[0];
+          r == null || r.focus();
         }
         break;
       }
       case "ArrowLeft":
       case "ArrowUp": {
         e.preventDefault();
-        const i = r[n - 1] ?? r[r.length - 1];
-        i == null || i.focus();
+        const r = t[n - 1] ?? t[t.length - 1];
+        r == null || r.focus();
         break;
       }
       case "Escape": {
-        this._expandedIndex = null, s == null || s.focus();
+        this._expandedIndex = null, i == null || i.focus();
         break;
       }
       case "Enter":
       case " ": {
-        if ((u = a.children) != null && u.length) {
+        if ((u = o.children) != null && u.length) {
           e.preventDefault();
-          const i = this._expandedIndex === n;
-          this._expandedIndex = i ? null : n, i || this.updateComplete.then(() => {
-            var m;
-            const o = (m = this.shadowRoot) == null ? void 0 : m.querySelector(
+          const r = this._expandedIndex === n;
+          this._expandedIndex = r ? null : n, r || this.updateComplete.then(() => {
+            var _;
+            const h = (_ = this.shadowRoot) == null ? void 0 : _.querySelector(
               '.nav__submenu:not([hidden]) [part="link"]'
             );
-            o == null || o.focus();
+            h == null || h.focus();
           });
         }
         break;
@@ -345,31 +347,31 @@ let h = class extends k {
     }
   }
   _handleSubKeydown(e, n) {
-    var c, l, u, i;
-    const a = (c = this.shadowRoot) == null ? void 0 : c.querySelectorAll(
+    var l, s, u;
+    const o = (l = this.shadowRoot) == null ? void 0 : l.querySelectorAll(
       '.nav__submenu:not([hidden]) [part="link"]'
     );
-    if (!a) return;
-    const t = Array.from(a), r = (l = this.shadowRoot) == null ? void 0 : l.activeElement, s = t.indexOf(r);
+    if (!o) return;
+    const a = Array.from(o), t = e.currentTarget ?? e.target, i = a.indexOf(t);
     switch (e.key) {
       case "ArrowDown": {
         e.preventDefault();
-        const o = t[s + 1] ?? t[0];
-        o == null || o.focus();
+        const r = a[i + 1] ?? a[0];
+        r == null || r.focus();
         break;
       }
       case "ArrowUp": {
         e.preventDefault();
-        const o = t[s - 1] ?? t[t.length - 1];
-        o == null || o.focus();
+        const r = a[i - 1] ?? a[a.length - 1];
+        r == null || r.focus();
         break;
       }
       case "Escape": {
         e.preventDefault(), this._expandedIndex = null;
-        const o = (u = this.shadowRoot) == null ? void 0 : u.querySelectorAll(
-          ':scope > [part="nav"] > [part="list"] > [part="item"] > [part="link"]'
+        const r = (s = this.shadowRoot) == null ? void 0 : s.querySelectorAll(
+          '[part="list"] > [part="item"] > [part="link"]'
         );
-        (i = o == null ? void 0 : o[n]) == null || i.focus();
+        (u = r == null ? void 0 : r[n]) == null || u.focus();
         break;
       }
     }
@@ -386,7 +388,7 @@ let h = class extends k {
   }
   // ─── Render Helpers ───
   _renderHamburgerIcon() {
-    return d`<svg
+    return c`<svg
       width="24"
       height="24"
       viewBox="0 0 24 24"
@@ -396,14 +398,14 @@ let h = class extends k {
       stroke-linecap="round"
       aria-hidden="true"
     >
-      ${this._mobileOpen ? _`<line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>` : _`<line x1="3" y1="12" x2="21" y2="12"></line>
+      ${this._mobileOpen ? f`<line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>` : f`<line x1="3" y1="12" x2="21" y2="12"></line>
             <line x1="3" y1="6" x2="21" y2="6"></line>
             <line x1="3" y1="18" x2="21" y2="18"></line>`}
     </svg>`;
   }
   _renderChevronIcon() {
-    return d`<svg
+    return c`<svg
       class="nav__chevron"
       width="16"
       height="16"
@@ -421,30 +423,30 @@ let h = class extends k {
       />
     </svg>`;
   }
-  _renderSubMenu(e, n, a) {
-    const t = this._expandedIndex === n;
-    return d`
+  _renderSubMenu(e, n, o) {
+    const a = this._expandedIndex === n;
+    return c`
       <ul
         class="nav__submenu"
         role="list"
-        aria-label="${a} submenu"
-        ?hidden=${!t}
+        aria-label="${o} submenu"
+        ?hidden=${!a}
       >
         ${e.map(
-      (r) => d`
+      (t) => c`
             <li class="nav__submenu-item">
               <a
                 part="link"
-                href=${this._sanitizeHref(r.href)}
-                class=${v({
+                href=${this._sanitizeHref(t.href)}
+                class=${x({
         nav__link: !0,
-        "nav__link--active": !!r.current
+        "nav__link--active": !!t.current
       })}
-                aria-current=${r.current ? "page" : f}
-                @click=${(s) => this._handleSubItemClick(r, s)}
-                @keydown=${(s) => this._handleSubKeydown(s, n)}
+                aria-current=${t.current ? "page" : v}
+                @click=${(i) => this._handleSubItemClick(t, i)}
+                @keydown=${(i) => this._handleSubKeydown(i, n)}
               >
-                ${r.label}
+                ${t.label}
               </a>
             </li>
           `
@@ -453,36 +455,36 @@ let h = class extends k {
     `;
   }
   _renderItem(e, n) {
-    var c;
-    const a = !!((c = e.children) != null && c.length), t = this._expandedIndex === n, r = {
+    var l;
+    const o = !!((l = e.children) != null && l.length), a = this._expandedIndex === n, t = {
       nav__link: !0,
       "nav__link--active": !!e.current,
-      "nav__link--has-submenu": a,
-      "nav__link--expanded": t
-    }, s = a ? d`
+      "nav__link--has-submenu": o,
+      "nav__link--expanded": a
+    }, i = o ? c`
           <button
             part="link"
-            class=${v(r)}
-            aria-expanded=${t ? "true" : "false"}
-            @click=${(l) => this._handleItemClick(e, n, l)}
-            @keydown=${(l) => this._handleKeydown(l, n, e)}
+            class=${x(t)}
+            aria-expanded=${a ? "true" : v}
+            @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)}
-        ` : d`
+        ` : c`
           <a
             part="link"
             href=${this._sanitizeHref(e.href)}
-            class=${v(r)}
-            aria-current=${e.current ? "page" : f}
-            @click=${(l) => this._handleItemClick(e, n, l)}
-            @keydown=${(l) => this._handleKeydown(l, n, e)}
+            class=${x(t)}
+            aria-current=${e.current ? "page" : v}
+            @click=${(s) => this._handleItemClick(e, n, s)}
+            @keydown=${(s) => this._handleKeydown(s, n, e)}
           >
             ${e.label}
           </a>
         `;
-    return d` <li part="item" class="nav__item">${s}</li> `;
+    return c` <li part="item" class="nav__item">${i}</li> `;
   }
   // ─── Render ───
   render() {
@@ -490,12 +492,12 @@ let h = class extends k {
       nav__list: !0,
       "nav__list--open": this._mobileOpen
     };
-    return d`
+    return c`
       <nav part="nav" aria-label=${this.label}>
         <button
           part="toggle"
           class="nav__toggle"
-          aria-expanded=${this._mobileOpen ? "true" : "false"}
+          aria-expanded=${this._mobileOpen ? "true" : v}
           aria-controls="nav-list"
           aria-label=${this._mobileOpen ? "Close navigation menu" : "Open navigation menu"}
           @click=${this._handleToggle}
@@ -503,20 +505,20 @@ let h = class extends k {
           ${this._renderHamburgerIcon()}
         </button>
 
-        <ul part="list" id="nav-list" class=${v(e)} role="list">
+        <ul part="list" id="nav-list" class=${x(e)} role="list">
           ${w(
       this.items,
-      (n, a) => a,
-      (n, a) => this._renderItem(n, a)
+      (n, o) => o,
+      (n, o) => this._renderItem(n, o)
     )}
         </ul>
       </nav>
     `;
   }
 };
-h.styles = [$, C];
+d.styles = [$, C];
 p([
-  x({
+  m({
     type: Array,
     converter: {
       fromAttribute(e) {
@@ -530,23 +532,23 @@ p([
       }
     }
   })
-], h.prototype, "items", 2);
+], d.prototype, "items", 2);
 p([
-  x({ type: String, reflect: !0 })
-], h.prototype, "orientation", 2);
+  m({ type: String, reflect: !0 })
+], d.prototype, "orientation", 2);
 p([
-  x({ type: String })
-], h.prototype, "label", 2);
+  m({ type: String })
+], d.prototype, "label", 2);
 p([
   b()
-], h.prototype, "_mobileOpen", 2);
+], d.prototype, "_mobileOpen", 2);
 p([
   b()
-], h.prototype, "_expandedIndex", 2);
-h = p([
+], d.prototype, "_expandedIndex", 2);
+d = p([
   y("hx-nav")
-], h);
+], d);
 export {
-  h as H
+  d as H
 };
-//# sourceMappingURL=hx-nav-CWwByFdq.js.map
+//# sourceMappingURL=hx-nav-DM6-cGKF.js.map

package/dist/shared/hx-nav-DM6-cGKF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-nav-DM6-cGKF.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  // ─── 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  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  private _handleToggle(): void {\n    this._mobileOpen = !this._mobileOpen;\n    if (!this._mobileOpen) {\n      this._expandedIndex = null;\n    }\n  }\n\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('hx-nav-select', {\n          bubbles: true,\n          composed: true,\n          detail: { item },\n        }),\n      );\n    }\n  }\n\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('hx-nav-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item },\n      }),\n    );\n  }\n\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          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            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  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  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  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  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  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  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 ? 'Close navigation menu' : 'Open navigation menu'}\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-DItaMWl0.js → hx-nav-item-D54-5eUM.js}

@@ -1,6 +1,6 @@
 import { css as b, LitElement as w, html as d, nothing as l } from "lit";
-import { property as v, customElement as y, state as C } from "lit/decorators.js";
-import { tokenStyles as k } from "@helixui/tokens/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`
   :host {
     display: block;
@@ -182,7 +182,7 @@ let p = class extends w {
    */
   _handleKeydown(e) {
     var g, u, _;
-    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    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(
@@ -200,7 +200,7 @@ let p = class extends w {
     }
     e.preventDefault();
     let i;
-    e.key === "ArrowDown" ? i = r < t.length - 1 ? r + 1 : 0 : i = r > 0 ? r - 1 : t.length - 1;
+    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"]');
@@ -257,7 +257,7 @@ let p = class extends w {
     `;
   }
 };
-p.styles = [k, $];
+p.styles = [C, $];
 f([
   v({ type: Boolean, reflect: !0 })
 ], p.prototype, "collapsed", 2);
@@ -490,10 +490,10 @@ const T = b`
     }
   }
 `;
-var D = Object.defineProperty, A = Object.getOwnPropertyDescriptor, c = (e, a, t, o) => {
-  for (var r = o > 1 ? void 0 : o ? A(a, t) : a, i = e.length - 1, n; i >= 0; i--)
+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 && D(a, t, r), r;
+  return o && r && A(a, t, r), r;
 };
 let s = class extends w {
   constructor() {
@@ -575,7 +575,7 @@ let s = class extends w {
     `;
   }
 };
-s.styles = [k, T];
+s.styles = [C, T];
 c([
   v({ type: String })
 ], s.prototype, "href", 2);
@@ -589,10 +589,10 @@ c([
   v({ type: Boolean, reflect: !0 })
 ], s.prototype, "disabled", 2);
 c([
-  C()
+  k()
 ], s.prototype, "_hasChildren", 2);
 c([
-  C()
+  k()
 ], s.prototype, "_isCollapsed", 2);
 s = c([
   y("hx-nav-item")
@@ -601,4 +601,4 @@ export {
   s as H,
   p as a
 };
-//# sourceMappingURL=hx-nav-item-DItaMWl0.js.map
+//# sourceMappingURL=hx-nav-item-D54-5eUM.js.map