@helixui/library 0.1.3 → 0.3.0

package/dist/shared/{hx-menu-divider-Bds6Gn6b.js → hx-menu-divider-Buc5XA9E.js}

@@ -1,8 +1,8 @@
-import { css as p, LitElement as f, html as u, nothing as l } from "lit";
-import { customElement as x, property as c, state as _ } from "lit/decorators.js";
+import { css as p, LitElement as f, nothing as l, html as c } from "lit";
+import { property as u, customElement as x, state as _ } from "lit/decorators.js";
 import { tokenStyles as v } from "@helixui/tokens/lit";
-import { classMap as b } from "lit/directives/class-map.js";
-const g = p`
+import { classMap as g } from "lit/directives/class-map.js";
+const y = p`
   :host {
     display: block;
   }
@@ -24,34 +24,44 @@ const g = p`
     outline: none;
   }
 `;
-var y = Object.getOwnPropertyDescriptor, k = (e, t, s, i) => {
-  for (var n = i > 1 ? void 0 : i ? y(t, s) : t, r = e.length - 1, a; r >= 0; r--)
-    (a = e[r]) && (n = a(n) || n);
-  return n;
+var k = Object.defineProperty, w = Object.getOwnPropertyDescriptor, b = (e, t, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? w(t, s) : t, r = e.length - 1, o; r >= 0; r--)
+    (o = e[r]) && (n = (i ? o(t, s, n) : o(n)) || n);
+  return i && n && k(t, s, n), n;
 };
 let d = class extends f {
   constructor() {
-    super(...arguments), this._focusedIndex = -1, this._typeaheadBuffer = "";
+    super(...arguments), this.label = "", this._focusedIndex = -1, this._typeaheadBuffer = "";
   }
   _getItems() {
     return Array.from(this.querySelectorAll("hx-menu-item")).filter(
       (e) => !e.disabled && !e.loading
     );
   }
+  /**
+   * Synchronize roving tabindex across all enabled items.
+   * Only the active item (or first item if none active) gets tabindex=0.
+   */
+  _syncRovingTabIndex() {
+    const e = this._getItems(), t = this._focusedIndex >= 0 ? this._focusedIndex : 0;
+    e.forEach((s, i) => {
+      s.setRovingTabIndex(i === t ? 0 : -1);
+    });
+  }
   /** Focus the first menu item. */
   focusFirst() {
     const t = this._getItems()[0];
-    t !== void 0 && (this._focusedIndex = 0, t.focus());
+    t !== void 0 && (this._focusedIndex = 0, this._syncRovingTabIndex(), t.focus());
   }
   /** Focus the last menu item. */
   focusLast() {
     const e = this._getItems(), t = e[e.length - 1];
-    t !== void 0 && (this._focusedIndex = e.length - 1, t.focus());
+    t !== void 0 && (this._focusedIndex = e.length - 1, this._syncRovingTabIndex(), t.focus());
   }
   _focusItem(e) {
     const t = this._getItems();
     if (t.length === 0) return;
-    this._focusedIndex = Math.max(0, Math.min(e, t.length - 1));
+    this._focusedIndex = Math.max(0, Math.min(e, t.length - 1)), this._syncRovingTabIndex();
     const s = t[this._focusedIndex];
     s !== void 0 && s.focus();
   }
@@ -101,7 +111,7 @@ let d = class extends f {
     const s = /* @__PURE__ */ new Set(["hx-menu-item", "hx-menu-divider"]), i = t.assignedElements().filter((n) => !s.has(n.tagName.toLowerCase()));
     i.length > 0 && console.warn(
       `[hx-menu] Default slot expects <hx-menu-item> or <hx-menu-divider> elements. Found unexpected: ${i.map((n) => `<${n.tagName.toLowerCase()}>`).join(", ")}`
-    );
+    ), this._syncRovingTabIndex();
   }
   _handleItemSelect(e) {
     const t = e.detail, s = this._getItems();
@@ -114,11 +124,12 @@ let d = class extends f {
     );
   }
   render() {
-    return u`
+    return c`
       <div
         part="base"
         class="menu"
         role="menu"
+        aria-label=${this.label || l}
         @keydown=${this._handleKeyDown}
         @hx-item-select=${this._handleItemSelect}
       >
@@ -127,11 +138,14 @@ let d = class extends f {
     `;
   }
 };
-d.styles = [v, g];
-d = k([
+d.styles = [v, y];
+b([
+  u({ type: String, reflect: !0 })
+], d.prototype, "label", 2);
+d = b([
   x("hx-menu")
 ], d);
-const w = p`
+const I = p`
   :host {
     display: block;
   }
@@ -166,6 +180,12 @@ const w = p`
     background-color: var(--hx-menu-item-hover-bg, var(--hx-color-neutral-100, #f1f5f9));
   }
 
+  .menu-item:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #3b82f6));
+    outline-offset: 0px;
+  }
+
   .menu-item__prefix,
   .menu-item__suffix {
     display: inline-flex;
@@ -217,14 +237,18 @@ const w = p`
     }
   }
 `;
-var I = Object.defineProperty, S = Object.getOwnPropertyDescriptor, h = (e, t, s, i) => {
-  for (var n = i > 1 ? void 0 : i ? S(t, s) : t, r = e.length - 1, a; r >= 0; r--)
-    (a = e[r]) && (n = (i ? a(t, s, n) : a(n)) || n);
-  return i && n && I(t, s, n), n;
+var S = Object.defineProperty, C = Object.getOwnPropertyDescriptor, h = (e, t, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? C(t, s) : t, r = e.length - 1, o; r >= 0; r--)
+    (o = e[r]) && (n = (i ? o(t, s, n) : o(n)) || n);
+  return i && n && S(t, s, n), n;
 };
-let o = class extends f {
+let a = class extends f {
   constructor() {
-    super(...arguments), this.value = "", this.disabled = !1, this.checked = !1, this.type = "normal", this.loading = !1, this._hasSubmenu = !1;
+    super(...arguments), this._rovingTabIndex = -1, this.value = "", this.disabled = !1, this.checked = !1, this.type = "normal", this.loading = !1, this._hasSubmenu = !1;
+  }
+  /** @internal Set the roving tabindex value. Called by parent hx-menu. */
+  setRovingTabIndex(e) {
+    this._rovingTabIndex = e;
   }
   /** Focus the inner interactive element. */
   focus(e) {
@@ -275,7 +299,7 @@ let o = class extends f {
     ));
   }
   _renderCheckedIcon() {
-    return u`
+    return c`
       <span part="checked-icon" class="menu-item__checked-icon" aria-hidden="true">
         <svg
           width="1em"
@@ -293,7 +317,7 @@ let o = class extends f {
     `;
   }
   _renderSubmenuIcon() {
-    return u`
+    return c`
       <span part="submenu-icon" class="menu-item__submenu-icon" aria-hidden="true">
         <svg
           width="1em"
@@ -311,7 +335,7 @@ let o = class extends f {
     `;
   }
   _renderSpinner() {
-    return u`
+    return c`
       <svg class="menu-item__spinner" aria-hidden="true" viewBox="0 0 24 24" fill="none">
         <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity="0.3" />
         <path
@@ -338,12 +362,12 @@ let o = class extends f {
       "menu-item": !0,
       "menu-item--checked": this.checked
     };
-    return u`
+    return c`
       <div
         part="base"
-        class=${b(s)}
+        class=${g(s)}
         role=${e}
-        tabindex=${this.disabled ? "-1" : "0"}
+        tabindex=${this.disabled ? "-1" : String(this._rovingTabIndex)}
         aria-disabled=${this.disabled ? "true" : l}
         aria-checked=${t ? this.checked ? "true" : "false" : l}
         aria-haspopup=${this._hasSubmenu ? "true" : l}
@@ -368,33 +392,31 @@ let o = class extends f {
     `;
   }
 };
-o.styles = [v, w];
+a.styles = [v, I];
+h([
+  _()
+], a.prototype, "_rovingTabIndex", 2);
 h([
-  c({ type: String })
-], o.prototype, "value", 2);
+  u({ type: String })
+], a.prototype, "value", 2);
 h([
-  c({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
+  u({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
 h([
-  c({ type: Boolean, reflect: !0 })
-], o.prototype, "checked", 2);
+  u({ type: Boolean, reflect: !0 })
+], a.prototype, "checked", 2);
 h([
-  c({ type: String, reflect: !0 })
-], o.prototype, "type", 2);
+  u({ type: String, reflect: !0 })
+], a.prototype, "type", 2);
 h([
-  c({ type: Boolean, reflect: !0 })
-], o.prototype, "loading", 2);
+  u({ type: Boolean, reflect: !0 })
+], a.prototype, "loading", 2);
 h([
   _()
-], o.prototype, "_hasSubmenu", 2);
-o = h([
+], a.prototype, "_hasSubmenu", 2);
+a = h([
   x("hx-menu-item")
-], o);
-var C = Object.getOwnPropertyDescriptor, D = (e, t, s, i) => {
-  for (var n = i > 1 ? void 0 : i ? C(t, s) : t, r = e.length - 1, a; r >= 0; r--)
-    (a = e[r]) && (n = a(n) || n);
-  return n;
-};
+], a);
 const $ = p`
   :host {
     display: block;
@@ -406,9 +428,14 @@ const $ = p`
     margin: var(--hx-space-1, 0.25rem) calc(-1 * var(--hx-space-1, 0.25rem));
   }
 `;
+var D = Object.getOwnPropertyDescriptor, E = (e, t, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? D(t, s) : t, r = e.length - 1, o; r >= 0; r--)
+    (o = e[r]) && (n = o(n) || n);
+  return n;
+};
 let m = class extends f {
   render() {
-    return u`<div
+    return c`<div
       part="base"
       class="menu-divider"
       role="separator"
@@ -417,12 +444,12 @@ let m = class extends f {
   }
 };
 m.styles = [v, $];
-m = D([
+m = E([
   x("hx-menu-divider")
 ], m);
 export {
   d as H,
   m as a,
-  o as b
+  a as b
 };
-//# sourceMappingURL=hx-menu-divider-Bds6Gn6b.js.map
+//# sourceMappingURL=hx-menu-divider-Buc5XA9E.js.map

package/dist/shared/hx-menu-divider-Buc5XA9E.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-menu-divider-Buc5XA9E.js","sources":["../../src/components/hx-menu/hx-menu.styles.ts","../../src/components/hx-menu/hx-menu.ts","../../src/components/hx-menu/hx-menu-item.styles.ts","../../src/components/hx-menu/hx-menu-item.ts","../../src/components/hx-menu/hx-menu-divider.styles.ts","../../src/components/hx-menu/hx-menu-divider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixMenuStyles = css`\n  :host {\n    display: block;\n  }\n\n  .menu {\n    display: flex;\n    flex-direction: column;\n    padding: var(--hx-space-1, 0.25rem);\n    background: var(--hx-menu-bg, var(--hx-color-neutral-0, #ffffff));\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));\n    border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));\n    box-shadow: var(\n      --hx-menu-shadow,\n      0 4px 6px -1px rgb(0 0 0 / 0.1),\n      0 2px 4px -2px rgb(0 0 0 / 0.1)\n    );\n    min-width: var(--hx-menu-min-width, 10rem);\n    outline: none;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMenuStyles } from './hx-menu.styles.js';\nimport type { HelixMenuItem } from './hx-menu-item.js';\n\n/**\n * A menu container that manages keyboard navigation over a list of menu items.\n * Use with `hx-menu-item` and `hx-menu-divider`.\n *\n * @summary Context/action menu with keyboard-navigable items.\n *\n * @tag hx-menu\n *\n * @slot - Default slot for hx-menu-item and hx-menu-divider elements.\n *\n * @fires {CustomEvent<{item: HelixMenuItem, value: string}>} hx-select - Dispatched when an item is selected.\n * @fires {CustomEvent<void>} hx-close - Dispatched when Escape is pressed.\n *\n * @csspart base - The root menu element.\n *\n * @cssprop [--hx-menu-bg=var(--hx-color-neutral-0)] - Menu background color.\n * @cssprop [--hx-menu-border-color=var(--hx-color-neutral-200)] - Menu border color.\n * @cssprop [--hx-menu-border-radius=var(--hx-border-radius-md)] - Menu border radius.\n * @cssprop [--hx-menu-shadow] - Menu box shadow.\n * @cssprop [--hx-menu-min-width=10rem] - Minimum menu width.\n */\n@customElement('hx-menu')\nexport class HelixMenu extends LitElement {\n  static override styles = [tokenStyles, helixMenuStyles];\n\n  /**\n   * Accessible label for the menu. Rendered as `aria-label` on the inner\n   * `role=\"menu\"` element when set.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  private _focusedIndex = -1;\n\n  private _typeaheadBuffer = '';\n\n  private _typeaheadTimeout: ReturnType<typeof setTimeout> | undefined;\n\n  private _getItems(): HelixMenuItem[] {\n    return Array.from(this.querySelectorAll<HelixMenuItem>('hx-menu-item')).filter(\n      (item) => !item.disabled && !item.loading,\n    );\n  }\n\n  /**\n   * Synchronize roving tabindex across all enabled items.\n   * Only the active item (or first item if none active) gets tabindex=0.\n   */\n  private _syncRovingTabIndex(): void {\n    const items = this._getItems();\n    const activeIndex = this._focusedIndex >= 0 ? this._focusedIndex : 0;\n    items.forEach((item, i) => {\n      item.setRovingTabIndex(i === activeIndex ? 0 : -1);\n    });\n  }\n\n  /** Focus the first menu item. */\n  focusFirst(): void {\n    const items = this._getItems();\n    const first = items[0];\n    if (first !== undefined) {\n      this._focusedIndex = 0;\n      this._syncRovingTabIndex();\n      first.focus();\n    }\n  }\n\n  /** Focus the last menu item. */\n  focusLast(): void {\n    const items = this._getItems();\n    const last = items[items.length - 1];\n    if (last !== undefined) {\n      this._focusedIndex = items.length - 1;\n      this._syncRovingTabIndex();\n      last.focus();\n    }\n  }\n\n  private _focusItem(index: number): void {\n    const items = this._getItems();\n    if (items.length === 0) return;\n    this._focusedIndex = Math.max(0, Math.min(index, items.length - 1));\n    this._syncRovingTabIndex();\n    const target = items[this._focusedIndex];\n    if (target !== undefined) target.focus();\n  }\n\n  private _updateFocusedIndex(): void {\n    const items = this._getItems();\n    const active = this.shadowRoot?.activeElement ?? document.activeElement;\n    // Find the active item by checking if any item's shadow root contains the active element\n    const idx = items.findIndex((item) => item.matches(':focus-within') || item === active);\n    if (idx !== -1) this._focusedIndex = idx;\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    this._updateFocusedIndex();\n    const items = this._getItems();\n    if (items.length === 0) return;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        this._focusItem(this._focusedIndex + 1 < items.length ? this._focusedIndex + 1 : 0);\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        this._focusItem(this._focusedIndex > 0 ? this._focusedIndex - 1 : items.length - 1);\n        break;\n      case 'Home':\n        e.preventDefault();\n        this._focusItem(0);\n        break;\n      case 'End':\n        e.preventDefault();\n        this._focusItem(items.length - 1);\n        break;\n      case 'Escape':\n        e.preventDefault();\n        this.dispatchEvent(new CustomEvent('hx-close', { bubbles: true, composed: true }));\n        break;\n      default:\n        if (e.key.length === 1 && e.key !== ' ' && !e.ctrlKey && !e.metaKey && !e.altKey) {\n          this._handleTypeahead(e.key, items);\n        }\n        break;\n    }\n  }\n\n  private _handleTypeahead(char: string, items: HelixMenuItem[]): void {\n    clearTimeout(this._typeaheadTimeout);\n    this._typeaheadBuffer += char.toLowerCase();\n    this._typeaheadTimeout = setTimeout(() => {\n      this._typeaheadBuffer = '';\n    }, 500);\n\n    const match = items.findIndex((item) => {\n      if (item.disabled || item.hasAttribute('disabled')) return false;\n      const text = item.textContent?.trim().toLowerCase() ?? '';\n      return text.startsWith(this._typeaheadBuffer);\n    });\n\n    if (match !== -1) {\n      this._focusItem(match);\n    }\n  }\n\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target;\n    if (!(slot instanceof HTMLSlotElement)) return;\n    const validTags = new Set(['hx-menu-item', 'hx-menu-divider']);\n    const invalid = slot\n      .assignedElements()\n      .filter((el) => !validTags.has(el.tagName.toLowerCase()));\n    if (invalid.length > 0) {\n      console.warn(\n        `[hx-menu] Default slot expects <hx-menu-item> or <hx-menu-divider> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n      );\n    }\n    // Initialize roving tabindex when items are slotted\n    this._syncRovingTabIndex();\n  }\n\n  private _handleItemSelect(e: Event): void {\n    const detail = (e as CustomEvent<{ item: HelixMenuItem; value: string }>).detail;\n    const items = this._getItems();\n    this._focusedIndex = items.indexOf(detail.item);\n\n    this.dispatchEvent(\n      new CustomEvent('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item: detail.item, value: detail.value },\n      }),\n    );\n  }\n\n  override render() {\n    return html`\n      <div\n        part=\"base\"\n        class=\"menu\"\n        role=\"menu\"\n        aria-label=${this.label || nothing}\n        @keydown=${this._handleKeyDown}\n        @hx-item-select=${this._handleItemSelect}\n      >\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-menu': HelixMenu;\n  }\n}\n","import { css } from 'lit';\n\nexport const helixMenuItemStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  .menu-item {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    cursor: pointer;\n    color: var(--hx-menu-item-color, var(--hx-color-neutral-900, #0f172a));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-family: var(--hx-font-family-sans, sans-serif);\n    line-height: var(--hx-line-height-tight, 1.25);\n    user-select: none;\n    -webkit-user-select: none;\n    outline: none;\n    background: none;\n    width: 100%;\n    box-sizing: border-box;\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .menu-item:hover,\n  .menu-item:focus-visible {\n    background-color: var(--hx-menu-item-hover-bg, var(--hx-color-neutral-100, #f1f5f9));\n  }\n\n  .menu-item:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-500, #3b82f6));\n    outline-offset: 0px;\n  }\n\n  .menu-item__prefix,\n  .menu-item__suffix {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .menu-item__label {\n    flex: 1 1 auto;\n  }\n\n  .menu-item__checked-icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    width: 1em;\n    opacity: 0;\n    transition: opacity var(--hx-transition-fast, 150ms ease);\n  }\n\n  .menu-item--checked .menu-item__checked-icon {\n    opacity: 1;\n  }\n\n  .menu-item__submenu-icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    margin-inline-start: auto;\n  }\n\n  .menu-item__spinner {\n    width: 1em;\n    height: 1em;\n    flex-shrink: 0;\n    animation: hx-menu-spin var(--hx-duration-spinner, 750ms) linear infinite;\n  }\n\n  @keyframes hx-menu-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .menu-item__spinner {\n      animation: none;\n      opacity: var(--hx-opacity-muted, 0.6);\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 { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMenuItemStyles } from './hx-menu-item.styles.js';\n\n/**\n * A single interactive item for use inside `hx-menu`. Supports normal, checkbox,\n * and radio types, loading state, prefix/suffix slots, and submenu nesting.\n * Use `aria-label` on the parent `hx-menu` to provide an accessible name.\n *\n * @summary Interactive item within an hx-menu.\n *\n * @tag hx-menu-item\n *\n * @slot - Default slot for the item label.\n * @slot prefix - Icon or content rendered before the label.\n * @slot suffix - Shortcut text or icon rendered after the label.\n * @slot submenu - A nested hx-menu for submenu content.\n *\n * @fires {CustomEvent<{item: HelixMenuItem, value: string}>} hx-item-select - Dispatched when the item is activated via click, Enter, or Space.\n * @fires {CustomEvent<{item: HelixMenuItem}>} hx-item-submenu-open - Dispatched when ArrowRight is pressed on an item with a submenu.\n *\n * @csspart base - The root item element.\n * @csspart prefix - Prefix slot wrapper.\n * @csspart label - Label slot wrapper.\n * @csspart suffix - Suffix slot wrapper.\n * @csspart submenu-icon - The chevron icon indicating a submenu.\n * @csspart checked-icon - The checkmark icon for checkbox-type items.\n *\n * @cssprop [--hx-menu-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-menu-item-hover-bg=var(--hx-color-neutral-100)] - Item hover/focus background.\n */\n@customElement('hx-menu-item')\nexport class HelixMenuItem extends LitElement {\n  static override styles = [tokenStyles, helixMenuItemStyles];\n\n  /**\n   * @internal Managed by parent hx-menu for roving tabindex.\n   * Only the active item in the menu has tabindex=0; all others have -1.\n   */\n  @state()\n  private _rovingTabIndex = -1;\n\n  /** @internal Set the roving tabindex value. Called by parent hx-menu. */\n  setRovingTabIndex(value: number): void {\n    this._rovingTabIndex = value;\n  }\n\n  /**\n   * The value associated with this item, emitted in the hx-select event.\n   * @attr value\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Whether the item is disabled. Prevents interaction and event dispatch.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the item is checked. Only meaningful when type=\"checkbox\".\n   * @attr checked\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * The type of menu item. \"checkbox\" renders a checkmark and toggles checked state.\n   * \"radio\" renders a checkmark and emits selection for radio-group behavior.\n   * @attr type\n   */\n  @property({ type: String, reflect: true })\n  type: 'normal' | 'checkbox' | 'radio' = 'normal';\n\n  /**\n   * Whether the item is in a loading state. Shows a spinner and prevents interaction.\n   * @attr loading\n   */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  @state()\n  private _hasSubmenu = false;\n\n  /** Focus the inner interactive element. */\n  override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector<HTMLElement>('.menu-item')?.focus(options);\n  }\n\n  private _handleSubmenuSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSubmenu = slot.assignedElements().length > 0;\n  }\n\n  private _activate(): void {\n    if (this.disabled || this.loading) return;\n\n    if (this.type === 'checkbox') {\n      this.checked = !this.checked;\n    } else if (this.type === 'radio') {\n      const menu = this.closest('hx-menu');\n      if (menu) {\n        menu\n          .querySelectorAll<HelixMenuItem>(':scope > hx-menu-item[type=\"radio\"]')\n          .forEach((sibling) => {\n            sibling.checked = sibling === this;\n          });\n      } else {\n        this.checked = true;\n      }\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('hx-item-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item: this, value: this.value },\n      }),\n    );\n  }\n\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled || this.loading) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n    this._activate();\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._activate();\n      return;\n    }\n\n    if (e.key === 'ArrowRight' && this._hasSubmenu) {\n      e.preventDefault();\n      this.dispatchEvent(\n        new CustomEvent('hx-item-submenu-open', {\n          bubbles: true,\n          composed: true,\n          detail: { item: this },\n        }),\n      );\n    }\n  }\n\n  private _renderCheckedIcon() {\n    return html`\n      <span part=\"checked-icon\" class=\"menu-item__checked-icon\" aria-hidden=\"true\">\n        <svg\n          width=\"1em\"\n          height=\"1em\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </span>\n    `;\n  }\n\n  private _renderSubmenuIcon() {\n    return html`\n      <span part=\"submenu-icon\" class=\"menu-item__submenu-icon\" aria-hidden=\"true\">\n        <svg\n          width=\"1em\"\n          height=\"1em\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <polyline points=\"9 18 15 12 9 6\" />\n        </svg>\n      </span>\n    `;\n  }\n\n  private _renderSpinner() {\n    return html`\n      <svg class=\"menu-item__spinner\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"3\" opacity=\"0.3\" />\n        <path\n          d=\"M12 2a10 10 0 0 1 10 10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    `;\n  }\n\n  private _getRole(): string {\n    switch (this.type) {\n      case 'checkbox':\n        return 'menuitemcheckbox';\n      case 'radio':\n        return 'menuitemradio';\n      default:\n        return 'menuitem';\n    }\n  }\n\n  override render() {\n    const role = this._getRole();\n    const hasCheckableRole = this.type === 'checkbox' || this.type === 'radio';\n    const classes = {\n      'menu-item': true,\n      'menu-item--checked': this.checked,\n    };\n\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap(classes)}\n        role=${role}\n        tabindex=${this.disabled ? '-1' : String(this._rovingTabIndex)}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        aria-checked=${hasCheckableRole ? (this.checked ? 'true' : 'false') : nothing}\n        aria-haspopup=${this._hasSubmenu ? 'true' : nothing}\n        aria-busy=${this.loading ? 'true' : nothing}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeyDown}\n      >\n        ${this.loading ? this._renderSpinner() : nothing}\n        ${hasCheckableRole ? this._renderCheckedIcon() : nothing}\n        <span part=\"prefix\" class=\"menu-item__prefix\">\n          <slot name=\"prefix\"></slot>\n        </span>\n        <span part=\"label\" class=\"menu-item__label\">\n          <slot></slot>\n        </span>\n        <span part=\"suffix\" class=\"menu-item__suffix\">\n          <slot name=\"suffix\"></slot>\n        </span>\n        ${this._hasSubmenu ? this._renderSubmenuIcon() : nothing}\n        <slot name=\"submenu\" @slotchange=${this._handleSubmenuSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-menu-item': HelixMenuItem;\n  }\n}\n","import { css } from 'lit';\n\nexport const helixMenuDividerStyles = css`\n  :host {\n    display: block;\n  }\n\n  .menu-divider {\n    height: var(--hx-border-width-thin, 1px);\n    background-color: var(--hx-menu-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n    margin: var(--hx-space-1, 0.25rem) calc(-1 * var(--hx-space-1, 0.25rem));\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMenuDividerStyles } from './hx-menu-divider.styles.js';\n\n/**\n * A visual separator for grouping items within an `hx-menu`.\n *\n * @summary Horizontal divider between menu sections.\n *\n * @tag hx-menu-divider\n *\n * @csspart base - The root separator element.\n *\n * @cssprop [--hx-menu-divider-color=var(--hx-color-neutral-200)] - Divider line color.\n */\n@customElement('hx-menu-divider')\nexport class HelixMenuDivider extends LitElement {\n  static override styles = [tokenStyles, helixMenuDividerStyles];\n\n  override render() {\n    return html`<div\n      part=\"base\"\n      class=\"menu-divider\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n    ></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-menu-divider': HelixMenuDivider;\n  }\n}\n"],"names":["helixMenuStyles","css","HelixMenu","LitElement","item","items","activeIndex","first","last","index","target","active","_a","idx","char","match","slot","validTags","invalid","el","detail","html","nothing","tokenStyles","__decorateClass","property","customElement","helixMenuItemStyles","HelixMenuItem","value","options","_b","menu","sibling","role","hasCheckableRole","classes","classMap","state","helixMenuDividerStyles","HelixMenuDivider"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
-import { css as b, LitElement as g, svg as m, html as d, nothing as _ } from "lit";
-import { property as x, state as f, customElement as k } from "lit/decorators.js";
+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 { repeat as y } from "lit/directives/repeat.js";
-import { tokenStyles as w } from "@helixui/tokens/lit";
-const $ = b`
+import { repeat as w } from "lit/directives/repeat.js";
+import { tokenStyles as $ } from "@helixui/tokens/lit";
+const C = g`
   :host {
     display: block;
     font-family: var(--hx-nav-font-family, var(--hx-font-family-sans, sans-serif));
@@ -122,16 +122,18 @@ const $ = b`
     position: absolute;
     top: calc(100% + var(--hx-space-1, 0.25rem));
     left: 0;
-    min-width: 12rem;
+    min-width: var(--hx-nav-submenu-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:
+    box-shadow: var(
+      --hx-shadow-md,
       0 4px 6px -1px rgb(0 0 0 / 0.1),
-      0 2px 4px -2px rgb(0 0 0 / 0.1);
-    z-index: 100;
+      0 2px 4px -2px rgb(0 0 0 / 0.1)
+    );
+    z-index: var(--hx-z-index-dropdown, 100);
   }
 
   .nav__submenu[hidden] {
@@ -242,12 +244,12 @@ const $ = b`
     }
   }
 `;
-var C = Object.defineProperty, I = Object.getOwnPropertyDescriptor, p = (e, n, a, r) => {
-  for (var t = r > 1 ? void 0 : r ? I(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 && C(n, a, t), t;
+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;
 };
-let h = class extends g {
+let h = 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);
   }
@@ -272,8 +274,8 @@ let h = class extends g {
     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(
+    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(
       new CustomEvent("hx-nav-select", {
         bubbles: !0,
         composed: !0,
@@ -281,8 +283,8 @@ let h = class extends g {
       })
     ));
   }
-  _handleSubItemClick(e) {
-    this._mobileOpen = !1, this._expandedIndex = null, this.dispatchEvent(
+  _handleSubItemClick(e, n) {
+    n.preventDefault(), this._mobileOpen = !1, this._expandedIndex = null, this.dispatchEvent(
       new CustomEvent("hx-nav-select", {
         bubbles: !0,
         composed: !0,
@@ -291,16 +293,16 @@ let h = class extends g {
     );
   }
   _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"]'
+    var c, l, u;
+    const t = (c = this.shadowRoot) == null ? void 0 : c.querySelectorAll(
+      ':scope > [part="nav"] > [part="list"] > [part="item"] > [part="link"]'
     );
-    if (!r) return;
-    const t = Array.from(r), l = t[n];
+    if (!t) return;
+    const r = Array.from(t), s = r[n];
     switch (e.key) {
       case "ArrowRight":
       case "ArrowDown": {
-        if (e.preventDefault(), (s = a.children) != null && s.length && e.key === "ArrowDown" && this.orientation === "horizontal")
+        if (e.preventDefault(), (l = a.children) != null && l.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(
@@ -309,7 +311,7 @@ let h = class extends g {
             i == null || i.focus();
           });
         else {
-          const i = t[n + 1] ?? t[0];
+          const i = r[n + 1] ?? r[0];
           i == null || i.focus();
         }
         break;
@@ -317,38 +319,48 @@ let h = class extends g {
       case "ArrowLeft":
       case "ArrowUp": {
         e.preventDefault();
-        const i = t[n - 1] ?? t[t.length - 1];
+        const i = r[n - 1] ?? r[r.length - 1];
         i == null || i.focus();
         break;
       }
       case "Escape": {
-        this._expandedIndex = null, l == null || l.focus();
+        this._expandedIndex = null, s == null || s.focus();
         break;
       }
       case "Enter":
       case " ": {
-        (u = a.children) != null && u.length && (e.preventDefault(), this._expandedIndex = this._expandedIndex === n ? null : n);
+        if ((u = a.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(
+              '.nav__submenu:not([hidden]) [part="link"]'
+            );
+            o == null || o.focus();
+          });
+        }
         break;
       }
     }
   }
   _handleSubKeydown(e, n) {
-    var c, s, u, i;
+    var c, l, 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);
+    const t = Array.from(a), r = (l = this.shadowRoot) == null ? void 0 : l.activeElement, s = t.indexOf(r);
     switch (e.key) {
       case "ArrowDown": {
         e.preventDefault();
-        const o = r[l + 1] ?? r[0];
+        const o = t[s + 1] ?? t[0];
         o == null || o.focus();
         break;
       }
       case "ArrowUp": {
         e.preventDefault();
-        const o = r[l - 1] ?? r[r.length - 1];
+        const o = t[s - 1] ?? t[t.length - 1];
         o == null || o.focus();
         break;
       }
@@ -363,8 +375,7 @@ let h = class extends g {
     }
   }
   _handleOutsideClick(e) {
-    var n;
-    !this.contains(e.target) && !((n = this.shadowRoot) != null && n.contains(e.target)) && (this._expandedIndex = null);
+    e.composedPath().includes(this) || (this._expandedIndex = null);
   }
   // ─── Lifecycle ───
   connectedCallback() {
@@ -385,8 +396,8 @@ let h = class extends g {
       stroke-linecap="round"
       aria-hidden="true"
     >
-      ${this._mobileOpen ? m`<line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>` : m`<line x1="3" y1="12" x2="21" y2="12"></line>
+      ${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>
             <line x1="3" y1="6" x2="21" y2="6"></line>
             <line x1="3" y1="18" x2="21" y2="18"></line>`}
     </svg>`;
@@ -410,10 +421,15 @@ let h = class extends g {
       />
     </svg>`;
   }
-  _renderSubMenu(e, n) {
-    const a = this._expandedIndex === n;
+  _renderSubMenu(e, n, a) {
+    const t = this._expandedIndex === n;
     return d`
-      <ul class="nav__submenu" role="list" aria-label="Submenu" ?hidden=${!a}>
+      <ul
+        class="nav__submenu"
+        role="list"
+        aria-label="${a} submenu"
+        ?hidden=${!t}
+      >
         ${e.map(
       (r) => d`
             <li class="nav__submenu-item">
@@ -424,9 +440,9 @@ let h = class extends g {
         nav__link: !0,
         "nav__link--active": !!r.current
       })}
-                aria-current=${r.current ? "page" : _}
-                @click=${() => this._handleSubItemClick(r)}
-                @keydown=${(t) => this._handleSubKeydown(t, n)}
+                aria-current=${r.current ? "page" : f}
+                @click=${(s) => this._handleSubItemClick(r, s)}
+                @keydown=${(s) => this._handleSubKeydown(s, n)}
               >
                 ${r.label}
               </a>
@@ -438,36 +454,35 @@ let h = class extends g {
   }
   _renderItem(e, n) {
     var c;
-    const a = !!((c = e.children) != null && c.length), r = this._expandedIndex === n, t = {
+    const a = !!((c = e.children) != null && c.length), t = this._expandedIndex === n, r = {
       nav__link: !0,
       "nav__link--active": !!e.current,
       "nav__link--has-submenu": a,
-      "nav__link--expanded": r
-    }, l = a ? d`
+      "nav__link--expanded": t
+    }, s = 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)}
+            class=${v(r)}
+            aria-expanded=${t ? "true" : "false"}
+            @click=${(l) => this._handleItemClick(e, n, l)}
+            @keydown=${(l) => this._handleKeydown(l, n, e)}
           >
             ${e.label} ${this._renderChevronIcon()}
           </button>
-          ${this._renderSubMenu(e.children ?? [], n)}
+          ${this._renderSubMenu(e.children ?? [], n, e.label)}
         ` : d`
           <a
             part="link"
             href=${this._sanitizeHref(e.href)}
-            class=${v(t)}
-            aria-current=${e.current ? "page" : _}
-            @click=${(s) => this._handleItemClick(e, n, s)}
-            @keydown=${(s) => this._handleKeydown(s, n, e)}
+            class=${v(r)}
+            aria-current=${e.current ? "page" : f}
+            @click=${(l) => this._handleItemClick(e, n, l)}
+            @keydown=${(l) => this._handleKeydown(l, n, e)}
           >
             ${e.label}
           </a>
         `;
-    return d` <li part="item" class="nav__item">${l}</li> `;
+    return d` <li part="item" class="nav__item">${s}</li> `;
   }
   // ─── Render ───
   render() {
@@ -489,9 +504,9 @@ let h = class extends g {
         </button>
 
         <ul part="list" id="nav-list" class=${v(e)} role="list">
-          ${y(
+          ${w(
       this.items,
-      (n) => n.label,
+      (n, a) => a,
       (n, a) => this._renderItem(n, a)
     )}
         </ul>
@@ -499,7 +514,7 @@ let h = class extends g {
     `;
   }
 };
-h.styles = [w, $];
+h.styles = [$, C];
 p([
   x({
     type: Array,
@@ -523,15 +538,15 @@ p([
   x({ type: String })
 ], h.prototype, "label", 2);
 p([
-  f()
+  b()
 ], h.prototype, "_mobileOpen", 2);
 p([
-  f()
+  b()
 ], h.prototype, "_expandedIndex", 2);
 h = p([
-  k("hx-nav")
+  y("hx-nav")
 ], h);
 export {
   h as H
 };
-//# sourceMappingURL=hx-nav-TK0mPfU6.js.map
+//# sourceMappingURL=hx-nav-CWwByFdq.js.map