@helixui/library 0.1.0

package/dist/shared/hx-nav-BhtMZCze.js

@@ -0,0 +1,537 @@
+import { css as f, LitElement as b, html as d, nothing as m } from "lit";
+import { property as x, state as _, customElement as g } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { repeat as k } from "lit/directives/repeat.js";
+import { t as y } from "./lit-Dpo7RLp4.js";
+const w = f`
+  :host {
+    display: block;
+    font-family: var(--hx-nav-font-family, var(--hx-font-family-sans, sans-serif));
+    font-size: var(--hx-nav-font-size, var(--hx-font-size-sm, 0.875rem));
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Nav Container ─── */
+
+  [part='nav'] {
+    position: relative;
+    background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f3f4f6));
+    padding: var(--hx-nav-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));
+  }
+
+  /* ─── Hamburger Toggle ─── */
+
+  [part='toggle'] {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: var(--hx-space-2, 0.5rem);
+    background: transparent;
+    border: none;
+    border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
+    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f3f4f6));
+    cursor: pointer;
+    transition: background-color var(--hx-transition-fast, 150ms) ease;
+    line-height: 0;
+  }
+
+  [part='toggle']:hover {
+    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #374151));
+  }
+
+  [part='toggle']:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Navigation List ─── */
+
+  [part='list'] {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: var(--hx-space-1, 0.25rem);
+    align-items: center;
+  }
+
+  /* ─── Nav Item ─── */
+
+  [part='item'] {
+    position: relative;
+  }
+
+  /* ─── Nav Link / Button ─── */
+
+  .nav__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-1, 0.25rem);
+    padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));
+    color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #f3f4f6));
+    text-decoration: none;
+    border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: var(--hx-font-weight-medium, 500);
+    line-height: var(--hx-line-height-normal, 1.5);
+    white-space: nowrap;
+    transition:
+      background-color var(--hx-transition-fast, 150ms) ease,
+      color var(--hx-transition-fast, 150ms) ease;
+  }
+
+  .nav__link:hover {
+    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #374151));
+    color: var(--hx-nav-link-hover-color, var(--hx-color-white, #ffffff));
+  }
+
+  .nav__link:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .nav__link--active {
+    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #2563eb));
+    color: var(--hx-nav-link-active-color, var(--hx-color-white, #ffffff));
+  }
+
+  /* ─── Chevron Icon ─── */
+
+  .nav__chevron {
+    transition: transform var(--hx-transition-normal, 200ms) ease;
+    flex-shrink: 0;
+  }
+
+  .nav__link--expanded .nav__chevron {
+    transform: rotate(180deg);
+  }
+
+  /* ─── Submenu ─── */
+
+  .nav__submenu {
+    position: absolute;
+    top: calc(100% + var(--hx-space-1, 0.25rem));
+    left: 0;
+    min-width: 12rem;
+    list-style: none;
+    margin: 0;
+    padding: var(--hx-space-1, 0.25rem) 0;
+    background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #1f2937));
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+    box-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
+    z-index: 100;
+  }
+
+  .nav__submenu[hidden] {
+    display: none;
+  }
+
+  .nav__submenu .nav__link {
+    display: block;
+    width: 100%;
+    text-align: left;
+    border-radius: 0;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
+  }
+
+  /* ─── Vertical / Sidebar Orientation ─── */
+
+  :host([orientation='vertical']) [part='nav'] {
+    padding: var(--hx-space-4, 1rem) var(--hx-space-2, 0.5rem);
+  }
+
+  :host([orientation='vertical']) [part='list'] {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  :host([orientation='vertical']) .nav__link {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  :host([orientation='vertical']) .nav__submenu {
+    position: static;
+    box-shadow: none;
+    border-radius: 0;
+    background-color: transparent;
+    padding: 0;
+    padding-left: var(--hx-space-4, 1rem);
+  }
+
+  :host([orientation='vertical']) .nav__submenu[hidden] {
+    display: none;
+  }
+
+  :host([orientation='vertical']) .nav__submenu .nav__link {
+    padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #d1d5db));
+  }
+
+  /* ─── Mobile Responsive ─── */
+
+  @media (max-width: 768px) {
+    [part='nav'] {
+      display: flex;
+      flex-direction: column;
+      padding: var(--hx-space-2, 0.5rem);
+    }
+
+    [part='toggle'] {
+      display: inline-flex;
+      align-self: flex-end;
+    }
+
+    [part='list'] {
+      display: none;
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+      margin-top: var(--hx-space-2, 0.5rem);
+      gap: var(--hx-space-1, 0.25rem);
+    }
+
+    [part='list'].nav__list--open {
+      display: flex;
+    }
+
+    [part='item'] {
+      width: 100%;
+    }
+
+    .nav__link {
+      width: 100%;
+      justify-content: flex-start;
+    }
+
+    .nav__submenu {
+      position: static;
+      box-shadow: none;
+      border-radius: 0;
+      padding-left: var(--hx-space-4, 1rem);
+      background-color: transparent;
+    }
+
+    .nav__submenu .nav__link {
+      padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);
+    }
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .nav__link,
+    .nav__chevron,
+    [part='toggle'] {
+      transition: none;
+      animation: none;
+    }
+  }
+`;
+var $ = Object.defineProperty, C = Object.getOwnPropertyDescriptor, p = (e, n, a, r) => {
+  for (var t = r > 1 ? void 0 : r ? C(n, a) : n, l = e.length - 1, c; l >= 0; l--)
+    (c = e[l]) && (t = (r ? c(n, a, t) : c(t)) || t);
+  return r && t && $(n, a, t), t;
+};
+let h = class extends b {
+  constructor() {
+    super(...arguments), this.items = [], this.orientation = "horizontal", this.label = "Main navigation", 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.
+   */
+  _sanitizeHref(e) {
+    if (!e || e === "#") return "#";
+    if (e.startsWith("/") || e.startsWith("./") || e.startsWith("../") || e.startsWith("#"))
+      return e;
+    try {
+      const n = new URL(e, window.location.href);
+      if (n.protocol === "http:" || n.protocol === "https:")
+        return e;
+    } catch {
+    }
+    return "#";
+  }
+  // ─── Event Handling ───
+  _handleToggle() {
+    this._mobileOpen = !this._mobileOpen, this._mobileOpen || (this._expandedIndex = null);
+  }
+  _handleItemClick(e, n, a) {
+    var r;
+    a.preventDefault(), (r = e.children) != null && r.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,
+        detail: { item: e }
+      })
+    ));
+  }
+  _handleSubItemClick(e) {
+    this._mobileOpen = !1, this._expandedIndex = null, this.dispatchEvent(
+      new CustomEvent("hx-nav-select", {
+        bubbles: !0,
+        composed: !0,
+        detail: { item: e }
+      })
+    );
+  }
+  _handleKeydown(e, n, a) {
+    var c, s, u;
+    const r = (c = this.shadowRoot) == null ? void 0 : c.querySelectorAll(
+      ':scope > nav > [part="list"] > [part="item"] > [part="link"]'
+    );
+    if (!r) return;
+    const t = Array.from(r), l = t[n];
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown": {
+        if (e.preventDefault(), (s = a.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(
+              '.nav__submenu [part="link"]'
+            );
+            i == null || i.focus();
+          });
+        else {
+          const i = t[n + 1] ?? t[0];
+          i == null || i.focus();
+        }
+        break;
+      }
+      case "ArrowLeft":
+      case "ArrowUp": {
+        e.preventDefault();
+        const i = t[n - 1] ?? t[t.length - 1];
+        i == null || i.focus();
+        break;
+      }
+      case "Escape": {
+        this._expandedIndex = null, l == null || l.focus();
+        break;
+      }
+      case "Enter":
+      case " ": {
+        (u = a.children) != null && u.length && (e.preventDefault(), this._expandedIndex = this._expandedIndex === n ? null : n);
+        break;
+      }
+    }
+  }
+  _handleSubKeydown(e, n) {
+    var c, s, u, i;
+    const a = (c = this.shadowRoot) == null ? void 0 : c.querySelectorAll(
+      '.nav__submenu:not([hidden]) [part="link"]'
+    );
+    if (!a) return;
+    const r = Array.from(a), t = (s = this.shadowRoot) == null ? void 0 : s.activeElement, l = r.indexOf(t);
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const o = r[l + 1] ?? r[0];
+        o == null || o.focus();
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const o = r[l - 1] ?? r[r.length - 1];
+        o == null || o.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"]'
+        );
+        (i = o == null ? void 0 : o[n]) == null || i.focus();
+        break;
+      }
+    }
+  }
+  _handleOutsideClick(e) {
+    var n;
+    !this.contains(e.target) && !((n = this.shadowRoot) != null && n.contains(e.target)) && (this._expandedIndex = null);
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._boundOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._boundOutsideClick);
+  }
+  // ─── Render Helpers ───
+  _renderHamburgerIcon() {
+    return d`<svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      aria-hidden="true"
+    >
+      ${this._mobileOpen ? d`<line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>` : d`<line x1="3" y1="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
+      class="nav__chevron"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        d="M4.5 6L8 9.5 11.5 6"
+        stroke="currentColor"
+        stroke-width="1.5"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>`;
+  }
+  _renderSubMenu(e, n) {
+    const a = this._expandedIndex === n;
+    return d`
+      <ul class="nav__submenu" role="list" aria-label="Submenu" ?hidden=${!a}>
+        ${e.map(
+      (r) => d`
+            <li class="nav__submenu-item">
+              <a
+                part="link"
+                href=${this._sanitizeHref(r.href)}
+                class=${v({
+        nav__link: !0,
+        "nav__link--active": !!r.current
+      })}
+                aria-current=${r.current ? "page" : m}
+                @click=${() => this._handleSubItemClick(r)}
+                @keydown=${(t) => this._handleSubKeydown(t, n)}
+              >
+                ${r.label}
+              </a>
+            </li>
+          `
+    )}
+      </ul>
+    `;
+  }
+  _renderItem(e, n) {
+    var c;
+    const a = !!((c = e.children) != null && c.length), r = this._expandedIndex === n, t = {
+      nav__link: !0,
+      "nav__link--active": !!e.current,
+      "nav__link--has-submenu": a,
+      "nav__link--expanded": r
+    }, l = a ? d`
+          <button
+            part="link"
+            class=${v(t)}
+            aria-expanded=${r ? "true" : "false"}
+            aria-haspopup="menu"
+            @click=${(s) => this._handleItemClick(e, n, s)}
+            @keydown=${(s) => this._handleKeydown(s, n, e)}
+          >
+            ${e.label} ${this._renderChevronIcon()}
+          </button>
+          ${this._renderSubMenu(e.children ?? [], n)}
+        ` : d`
+          <a
+            part="link"
+            href=${this._sanitizeHref(e.href)}
+            class=${v(t)}
+            aria-current=${e.current ? "page" : m}
+            @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">${l}</li> `;
+  }
+  // ─── Render ───
+  render() {
+    const e = {
+      nav__list: !0,
+      "nav__list--open": this._mobileOpen
+    };
+    return d`
+      <nav part="nav" aria-label=${this.label}>
+        <button
+          part="toggle"
+          class="nav__toggle"
+          aria-expanded=${this._mobileOpen ? "true" : "false"}
+          aria-controls="nav-list"
+          aria-label=${this._mobileOpen ? "Close navigation menu" : "Open navigation menu"}
+          @click=${this._handleToggle}
+        >
+          ${this._renderHamburgerIcon()}
+        </button>
+
+        <ul part="list" id="nav-list" class=${v(e)} role="list">
+          ${k(
+      this.items,
+      (n) => n.label,
+      (n, a) => this._renderItem(n, a)
+    )}
+        </ul>
+      </nav>
+    `;
+  }
+};
+h.styles = [y, w];
+p([
+  x({
+    type: Array,
+    converter: {
+      fromAttribute(e) {
+        if (!e) return [];
+        try {
+          const n = JSON.parse(e);
+          return Array.isArray(n) ? n : [];
+        } catch {
+          return [];
+        }
+      }
+    }
+  })
+], h.prototype, "items", 2);
+p([
+  x({ type: String, reflect: !0 })
+], h.prototype, "orientation", 2);
+p([
+  x({ type: String })
+], h.prototype, "label", 2);
+p([
+  _()
+], h.prototype, "_mobileOpen", 2);
+p([
+  _()
+], h.prototype, "_expandedIndex", 2);
+h = p([
+  g("hx-nav")
+], h);
+export {
+  h as H
+};
+//# sourceMappingURL=hx-nav-BhtMZCze.js.map

package/dist/shared/hx-nav-BhtMZCze.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-nav-BhtMZCze.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 var(--hx-focus-ring-color, #2563eb);\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 var(--hx-focus-ring-color, #2563eb);\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: 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:\n      0 4px 6px -1px rgb(0 0 0 / 0.1),\n      0 2px 4px -2px rgb(0 0 0 / 0.1);\n    z-index: 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 } 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-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-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  @state() private _mobileOpen = false;\n  @state() private _expandedIndex: number | null = null;\n\n  // ─── Private: bound event handler reference ───\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): void {\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      ':scope > nav > [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          this._expandedIndex = this._expandedIndex === index ? null : index;\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 = this.shadowRoot?.activeElement 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          ':scope > [part=\"nav\"] > [part=\"list\"] > [part=\"item\"] > [part=\"link\"]',\n        );\n        parentLinks?.[parentIndex]?.focus();\n        break;\n      }\n    }\n  }\n\n  private _handleOutsideClick(e: MouseEvent): void {\n    if (!this.contains(e.target as Node) && !this.shadowRoot?.contains(e.target as Node)) {\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        ? html`<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>`\n        : html`<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) {\n    const isExpanded = this._expandedIndex === parentIndex;\n    return html`\n      <ul class=\"nav__submenu\" role=\"list\" aria-label=\"Submenu\" ?hidden=${!isExpanded}>\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=${() => this._handleSubItemClick(child)}\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' : 'false'}\n            aria-haspopup=\"menu\"\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)}\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' : 'false'}\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) => item.label,\n            (item, i) => this._renderItem(item, i),\n          )}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\n/** Convenience alias matching library 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","parentIndex","subItems","arr","focused","currentIdx","parentLinks","_d","html","children","isExpanded","child","classMap","nothing","hasChildren","linkClasses","content","listClasses","repeat","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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"}