@helixui/library 0.1.0

package/dist/shared/hx-nav-item-CbNibLuK.js

@@ -0,0 +1,605 @@
+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 { t as k } from "./lit-Dpo7RLp4.js";
+const $ = b`
+  :host {
+    display: block;
+    height: 100%;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Nav Container ─── */
+
+  .side-nav {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: var(--hx-side-nav-width, 16rem);
+    background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f3f4f6));
+    transition: width var(--hx-transition-normal, 300ms) ease;
+    overflow: hidden;
+    border-right: var(--hx-border-width-thin, 1px) solid
+      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #374151));
+  }
+
+  /* ─── Collapsed State ─── */
+
+  :host([collapsed]) .side-nav {
+    width: var(--hx-side-nav-collapsed-width, 3.5rem);
+  }
+
+  /* ─── Header ─── */
+
+  .side-nav__header {
+    display: flex;
+    align-items: center;
+    padding: var(--hx-side-nav-header-padding, var(--hx-space-4, 1rem));
+    flex-shrink: 0;
+    min-height: var(--hx-space-14, 3.5rem);
+    border-bottom: var(--hx-border-width-thin, 1px) solid
+      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #374151));
+    overflow: hidden;
+  }
+
+  :host([collapsed]) .side-nav__header {
+    justify-content: center;
+    padding: var(--hx-space-3, 0.75rem);
+  }
+
+  /* ─── Body ─── */
+
+  .side-nav__body {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(--hx-space-2, 0.5rem) 0;
+  }
+
+  /* ─── Footer ─── */
+
+  .side-nav__footer {
+    display: flex;
+    align-items: center;
+    padding: var(--hx-side-nav-footer-padding, var(--hx-space-4, 1rem));
+    flex-shrink: 0;
+    min-height: var(--hx-space-14, 3.5rem);
+    border-top: var(--hx-border-width-thin, 1px) solid
+      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #374151));
+    overflow: hidden;
+  }
+
+  :host([collapsed]) .side-nav__footer {
+    justify-content: center;
+    padding: var(--hx-space-3, 0.75rem);
+  }
+
+  /* ─── Toggle Button ─── */
+
+  .side-nav__toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--hx-space-8, 2rem);
+    height: var(--hx-space-8, 2rem);
+    margin-left: auto;
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--hx-side-nav-toggle-color, var(--hx-color-neutral-400, #9ca3af));
+    cursor: pointer;
+    transition:
+      background-color var(--hx-transition-fast, 150ms) ease,
+      color var(--hx-transition-fast, 150ms) ease;
+  }
+
+  .side-nav__toggle:hover {
+    background-color: var(
+      --hx-overlay-white-10,
+      rgba(255, 255, 255, 0.1)
+    ); /* fallback for browsers without color-mix() */
+    color: var(--hx-color-neutral-100, #f3f4f6);
+  }
+
+  @supports (color: color-mix(in srgb, red 50%, blue)) {
+    .side-nav__toggle:hover {
+      background-color: color-mix(in srgb, currentColor 15%, transparent);
+    }
+  }
+
+  .side-nav__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);
+  }
+
+  .side-nav__toggle svg {
+    width: var(--hx-space-5, 1.25rem);
+    height: var(--hx-space-5, 1.25rem);
+    fill: currentColor;
+    flex-shrink: 0;
+    transition: transform var(--hx-transition-normal, 300ms) ease;
+  }
+
+  :host([collapsed]) .side-nav__toggle svg {
+    transform: rotate(180deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .side-nav {
+      transition: none;
+    }
+
+    .side-nav__toggle svg {
+      transition: none;
+    }
+  }
+`;
+var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, f = (e, a, t, o) => {
+  for (var r = o > 1 ? void 0 : o ? S(a, t) : a, i = e.length - 1, n; i >= 0; i--)
+    (n = e[i]) && (r = (o ? n(a, t, r) : n(r)) || r);
+  return o && r && E(a, t, r), r;
+};
+let p = class extends w {
+  constructor() {
+    super(...arguments), this.collapsed = !1, this.label = "Main Navigation";
+  }
+  // ─── Lifecycle ───
+  updated(e) {
+    super.updated(e), e.has("collapsed") && this._propagateCollapsedToChildren();
+  }
+  // ─── Collapsed State Propagation ───
+  /**
+   * Propagates the collapsed state to all slotted hx-nav-item children by
+   * setting or removing the `data-collapsed` attribute. This allows child
+   * items to respond to collapsed mode via their CSS selectors.
+   */
+  _propagateCollapsedToChildren() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot:not([name])");
+    if (!e) return;
+    const a = e.assignedElements({ flatten: !0 }).filter((o) => o.tagName.toLowerCase() === "hx-nav-item");
+    for (const o of a)
+      o instanceof HTMLElement && (this.collapsed ? o.setAttribute("data-collapsed", "") : o.removeAttribute("data-collapsed"));
+  }
+  /**
+   * Handles the default slot's slotchange event so that if items are added
+   * after initial render, they immediately receive the correct collapsed state.
+   */
+  _onDefaultSlotChange() {
+    this._propagateCollapsedToChildren();
+  }
+  // ─── Keyboard Navigation ───
+  /**
+   * Implements roving tabindex-style ArrowUp/ArrowDown keyboard navigation
+   * among direct hx-nav-item children in the body slot. Disabled items are
+   * skipped. Focus is applied to the interactive element inside the shadow DOM
+   * of each item (anchor or button with part="link").
+   */
+  _handleKeydown(e) {
+    var g, u, _;
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    const a = (g = this.shadowRoot) == null ? void 0 : g.querySelector("slot:not([name])");
+    if (!a) return;
+    const t = a.assignedElements({ flatten: !0 }).filter(
+      (h) => h.tagName.toLowerCase() === "hx-nav-item" && !h.hasAttribute("disabled")
+    );
+    if (t.length === 0) return;
+    const o = document.activeElement;
+    let r = -1;
+    for (let h = 0; h < t.length; h++) {
+      const m = t[h];
+      if (m && (m === o || m.contains(o) || ((u = m.shadowRoot) == null ? void 0 : u.contains(o)) === !0)) {
+        r = h;
+        break;
+      }
+    }
+    e.preventDefault();
+    let i;
+    e.key === "ArrowDown" ? i = r < t.length - 1 ? r + 1 : 0 : i = r > 0 ? r - 1 : t.length - 1;
+    const n = t[i];
+    if (!n) return;
+    const x = (_ = n.shadowRoot) == null ? void 0 : _.querySelector('[part="link"]');
+    x == null || x.focus();
+  }
+  // ─── Event Handling ───
+  _handleToggle() {
+    this.collapsed = !this.collapsed, this.collapsed ? this.dispatchEvent(
+      new CustomEvent("hx-collapse", {
+        bubbles: !0,
+        composed: !0,
+        detail: { collapsed: !0 }
+      })
+    ) : this.dispatchEvent(
+      new CustomEvent("hx-expand", {
+        bubbles: !0,
+        composed: !0,
+        detail: { collapsed: !1 }
+      })
+    );
+  }
+  // ─── Render ───
+  _renderToggleIcon() {
+    return d`<svg viewBox="0 0 20 20" aria-hidden="true">
+      <path
+        d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+      />
+    </svg>`;
+  }
+  render() {
+    return d`
+      <nav part="nav" class="side-nav" aria-label=${this.label}>
+        <div part="header" class="side-nav__header">
+          <slot name="header"></slot>
+          <button
+            part="toggle"
+            class="side-nav__toggle"
+            aria-label=${this.collapsed ? "Expand navigation" : "Collapse navigation"}
+            aria-expanded=${!this.collapsed}
+            aria-controls="side-nav-body"
+            @click=${this._handleToggle}
+          >
+            ${this._renderToggleIcon()}
+          </button>
+        </div>
+
+        <div part="body" class="side-nav__body" id="side-nav-body" @keydown=${this._handleKeydown}>
+          <slot @slotchange=${this._onDefaultSlotChange}></slot>
+        </div>
+
+        <div part="footer" class="side-nav__footer">
+          <slot name="footer"></slot>
+        </div>
+      </nav>
+    `;
+  }
+};
+p.styles = [k, $];
+f([
+  v({ type: Boolean, reflect: !0 })
+], p.prototype, "collapsed", 2);
+f([
+  v({ type: String })
+], p.prototype, "label", 2);
+p = f([
+  y("hx-side-nav")
+], p);
+const T = b`
+  :host {
+    display: block;
+    background-color: var(--hx-nav-item-host-bg, var(--hx-color-neutral-900, #111827));
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ─── Nav Item ─── */
+
+  .nav-item {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* ─── Link / Button ─── */
+
+  .nav-item__link {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-3, 0.75rem);
+    padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));
+    min-height: var(--hx-space-10, 2.5rem);
+    text-decoration: none;
+    color: var(--hx-nav-item-color, var(--hx-color-neutral-300, #d1d5db));
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    margin: 0 var(--hx-space-2, 0.5rem);
+    transition:
+      background-color var(--hx-transition-fast, 150ms) ease,
+      color var(--hx-transition-fast, 150ms) ease;
+    white-space: nowrap;
+    overflow: hidden;
+    cursor: pointer;
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    line-height: var(--hx-line-height-normal, 1.5);
+    position: relative;
+    border: none;
+    background: transparent;
+    width: calc(100% - var(--hx-space-4, 1rem));
+    text-align: left;
+  }
+
+  /* Link variant */
+  a.nav-item__link {
+    display: flex;
+  }
+
+  .nav-item__link:hover {
+    background-color: var(
+      --hx-nav-item-hover-bg,
+      var(--hx-overlay-white-8, rgba(255, 255, 255, 0.08))
+    ); /* fallback for browsers without color-mix() */
+    color: var(--hx-nav-item-hover-color, var(--hx-color-neutral-100, #f3f4f6));
+  }
+
+  @supports (color: color-mix(in srgb, red 50%, blue)) {
+    .nav-item__link:hover {
+      background-color: var(
+        --hx-nav-item-hover-bg,
+        color-mix(in srgb, currentColor 10%, transparent)
+      );
+    }
+  }
+
+  .nav-item__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);
+  }
+
+  /* ─── Active State ─── */
+
+  :host([active]) .nav-item__link {
+    background-color: var(--hx-nav-item-active-bg, var(--hx-color-primary-600, #2563eb));
+    color: var(--hx-nav-item-active-color, var(--hx-color-neutral-50, #f9fafb));
+  }
+
+  :host([active]) .nav-item__link:hover {
+    background-color: var(--hx-nav-item-active-hover-bg, var(--hx-color-primary-700, #1d4ed8));
+  }
+
+  /* ─── Disabled State ─── */
+
+  :host([disabled]) .nav-item__link {
+    opacity: 0.4;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  /* ─── Icon ─── */
+
+  .nav-item__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--hx-space-5, 1.25rem);
+    height: var(--hx-space-5, 1.25rem);
+  }
+
+  /* ─── Label ─── */
+
+  .nav-item__label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition:
+      opacity var(--hx-transition-fast, 150ms) ease,
+      width var(--hx-transition-fast, 150ms) ease;
+  }
+
+  /* ─── Badge ─── */
+
+  .nav-item__badge {
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
+  /* ─── Expand Arrow ─── */
+
+  .nav-item__arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-left: auto;
+    width: var(--hx-space-5, 1.25rem);
+    height: var(--hx-space-5, 1.25rem);
+    transition: transform var(--hx-transition-normal, 300ms) ease;
+  }
+
+  .nav-item__arrow svg {
+    width: var(--hx-space-4, 1rem);
+    height: var(--hx-space-4, 1rem);
+    fill: currentColor;
+  }
+
+  :host([expanded]) .nav-item__arrow {
+    transform: rotate(90deg);
+  }
+
+  /* ─── Children (sub-nav) ─── */
+
+  .nav-item__children {
+    display: flex;
+    flex-direction: column;
+    padding-left: var(--hx-space-6, 1.5rem);
+    max-height: 0;
+    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 */
+  }
+
+  /* ─── Tooltip (collapsed mode) ─── */
+
+  .nav-item__tooltip {
+    position: absolute;
+    left: calc(100% + var(--hx-space-2, 0.5rem));
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: var(--hx-color-neutral-800, #1f2937);
+    color: var(--hx-color-neutral-100, #f3f4f6);
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--hx-transition-fast, 150ms) ease;
+    z-index: var(--hx-z-index-tooltip, 100);
+    box-shadow: var(--hx-shadow-md, 0 2px 8px rgb(0 0 0 / 0.2));
+  }
+
+  :host([data-collapsed]) .nav-item__link:hover .nav-item__tooltip,
+  :host([data-collapsed]) .nav-item__link:focus-visible .nav-item__tooltip {
+    opacity: 1;
+  }
+
+  /* ─── Collapsed host state (propagated from parent) ─── */
+
+  :host([data-collapsed]) .nav-item__label {
+    width: 0;
+    overflow: hidden;
+    opacity: 0;
+  }
+
+  :host([data-collapsed]) .nav-item__badge {
+    display: none;
+  }
+
+  :host([data-collapsed]) .nav-item__arrow {
+    display: none;
+  }
+
+  :host([data-collapsed]) .nav-item__children {
+    display: none !important;
+  }
+
+  :host([data-collapsed]) .nav-item__link {
+    justify-content: center;
+    margin: 0 var(--hx-space-1, 0.25rem);
+    width: calc(100% - var(--hx-space-2, 0.5rem));
+    padding: var(--hx-space-2, 0.5rem);
+    position: relative;
+    overflow: visible;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nav-item__label,
+    .nav-item__arrow,
+    .nav-item__children,
+    .nav-item__tooltip {
+      transition: none;
+    }
+  }
+`;
+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--)
+    (n = e[i]) && (r = (o ? n(a, t, r) : n(r)) || r);
+  return o && r && D(a, t, r), r;
+};
+let s = class extends w {
+  constructor() {
+    super(...arguments), this.href = "", this.active = !1, this.expanded = !1, this.disabled = !1, this._hasChildren = !1, this._isCollapsed = !1;
+  }
+  // ─── Attribute Observer ───
+  static get observedAttributes() {
+    return [...super.observedAttributes, "data-collapsed"];
+  }
+  attributeChangedCallback(e, a, t) {
+    super.attributeChangedCallback(e, a, t), e === "data-collapsed" && (this._isCollapsed = t !== null);
+  }
+  // ─── Slot Change Handler ───
+  _onChildrenSlotChange(e) {
+    const a = e.target;
+    this._hasChildren = a.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  // ─── Private Helpers ───
+  _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(" ");
+  }
+  _handleToggle(e) {
+    this.disabled || (e.preventDefault(), this.expanded = !this.expanded);
+  }
+  _renderExpandArrow() {
+    return d`<span class="nav-item__arrow" aria-hidden="true">
+      <svg viewBox="0 0 20 20">
+        <path
+          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+        />
+      </svg>
+    </span>`;
+  }
+  // ─── Render ───
+  render() {
+    const e = this._getDirectText(), a = d`
+      <span part="icon" class="nav-item__icon">
+        <slot name="icon"></slot>
+      </span>
+      <span part="label" class="nav-item__label">
+        <slot></slot>
+      </span>
+      <span part="badge" class="nav-item__badge">
+        <slot name="badge"></slot>
+      </span>
+      ${this._hasChildren ? this._renderExpandArrow() : l}
+      ${this._isCollapsed ? d`<span id="nav-item-tooltip" class="nav-item__tooltip" role="tooltip">${e}</span>` : l}
+    `, t = this.href && !this._hasChildren ? d`<a
+            part="link"
+            class="nav-item__link"
+            href=${this.href}
+            aria-current=${this.active ? "page" : l}
+            aria-disabled=${this.disabled ? "true" : l}
+            aria-describedby=${this._isCollapsed ? "nav-item-tooltip" : l}
+            tabindex=${this.disabled ? "-1" : "0"}
+          >
+            ${a}
+          </a>` : d`<button
+            part="link"
+            class="nav-item__link"
+            aria-disabled=${this.disabled ? "true" : l}
+            aria-expanded=${this._hasChildren ? String(this.expanded) : l}
+            aria-describedby=${this._isCollapsed ? "nav-item-tooltip" : l}
+            tabindex=${this.disabled ? "-1" : "0"}
+            @click=${this._handleToggle}
+          >
+            ${a}
+          </button>`;
+    return d`
+      <div class="nav-item">
+        ${t}
+        <div part="children" class="nav-item__children" role="group">
+          <slot name="children" @slotchange=${this._onChildrenSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+s.styles = [k, T];
+c([
+  v({ type: String })
+], s.prototype, "href", 2);
+c([
+  v({ type: Boolean, reflect: !0 })
+], s.prototype, "active", 2);
+c([
+  v({ type: Boolean, reflect: !0 })
+], s.prototype, "expanded", 2);
+c([
+  v({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+c([
+  C()
+], s.prototype, "_hasChildren", 2);
+c([
+  C()
+], s.prototype, "_isCollapsed", 2);
+s = c([
+  y("hx-nav-item")
+], s);
+export {
+  s as H,
+  p as a
+};
+//# sourceMappingURL=hx-nav-item-CbNibLuK.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-nav-item-CbNibLuK.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-right: 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-left: 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 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): 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  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  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  private _handleKeydown(e: KeyboardEvent): void {\n    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') 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 {\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : 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  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  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            aria-controls=\"side-nav-body\"\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:\n      opacity var(--hx-transition-fast, 150ms) ease,\n      width 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: flex;\n    flex-direction: column;\n    padding-left: var(--hx-space-6, 1.5rem);\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height var(--hx-transition-normal, 300ms) ease;\n  }\n\n  :host([expanded]) .nav-item__children {\n    max-height: 62.5rem; /* large enough for any submenu depth */\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__label,\n    .nav-item__arrow,\n    .nav-item__children,\n    .nav-item__tooltip {\n      transition: none;\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  @state() private _hasChildren = false;\n\n  /** Whether this item is in collapsed mode. Set externally by hx-side-nav via data-collapsed attribute. */\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  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  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  private _handleToggle(e: Event): void {\n    if (this.disabled) return;\n    e.preventDefault();\n    this.expanded = !this.expanded;\n  }\n\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          <slot name=\"children\" @slotchange=${this._onChildrenSlotChange}></slot>\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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"}