@helixui/library 3.3.1 → 3.4.0

package/dist/shared/hx-menu-divider-BjiRIWKq.js

@@ -0,0 +1,797 @@
+import { css as _, html as u, nothing as o } from "lit";
+import { property as d, customElement as v, state as x, query as T } from "lit/decorators.js";
+import { f as g } from "./forced-colors-CTEDFRGa.js";
+import { d as R } from "./dev-warn-YlwPHjtX.js";
+import { s as y, i as w, r as S } from "./aria-idref-CxvyzfQS.js";
+import { f as C } from "./aria-flatten-DY6v2vah.js";
+import { g as H, f as A, a as M } from "./menu-tree-BNM0SYYq.js";
+import { H as I } from "./helix-element-BNEYeiys.js";
+import { classMap as k } from "lit/directives/class-map.js";
+const O = _`
+  :host {
+    display: block;
+  }
+
+  .menu {
+    display: flex;
+    flex-direction: column;
+    padding: var(--hx-space-1, 0.25rem);
+    background: var(--hx-menu-bg, var(--hx-color-surface-default, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-menu-border-color, var(--hx-color-border-default, #d6dbd5));
+    border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
+    box-shadow: var(
+      --hx-menu-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))
+    );
+    min-width: var(--hx-menu-min-width, 10rem);
+    max-height: var(--hx-menu-max-height, 20rem);
+    overflow-y: auto;
+    outline: none;
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .menu {
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+    }
+  }
+`;
+var $ = Object.defineProperty, D = Object.getOwnPropertyDescriptor, E = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? D(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (i = (n ? a(t, s, i) : a(i)) || i);
+  return n && i && $(t, s, i), i;
+};
+function p(e) {
+  const t = A(e);
+  return t instanceof Element && t.tagName.toLowerCase() === "hx-menu" ? t : null;
+}
+function B(e) {
+  const t = M(e);
+  return t instanceof Element && t.tagName.toLowerCase() === "hx-menu-item" ? t : null;
+}
+let f = class extends I {
+  constructor() {
+    super(...arguments), this.label = "", this._focusedIndex = -1, this._typeaheadBuffer = "", this._typeaheadTimer = null, this._supportsIdrefRefs = !0, this._ariaMirror = null, this._resolvedAccessibleName = "", this._handleSubmenuOpen = (e) => {
+      if (!(e instanceof CustomEvent)) return;
+      const t = e.detail, s = t == null ? void 0 : t.item;
+      s && queueMicrotask(() => {
+        e.defaultPrevented || (s.setSubmenuOpen(!0), s.updateComplete.then(() => {
+          var r;
+          const n = (r = s.shadowRoot) == null ? void 0 : r.querySelector('slot[name="submenu"]'), i = n == null ? void 0 : n.assignedElements({ flatten: !0 }).find((a) => a.tagName.toLowerCase() === "hx-menu");
+          i == null || i.focusFirst();
+        }).catch(() => {
+        }));
+      });
+    }, this._handleSubmenuClose = (e) => {
+      if (!(e instanceof CustomEvent)) return;
+      const t = e.detail, s = t == null ? void 0 : t.item;
+      if (!s || p(s) !== this) return;
+      const i = B(this) ?? s;
+      queueMicrotask(() => {
+        e.defaultPrevented || (i.setSubmenuOpen(!1), i.focus());
+      });
+    }, this._handleHostKeyDown = (e) => {
+      const t = e.target;
+      t instanceof Element && p(t) !== this || this._handleKeyDown(e);
+    }, this._handleItemSelectHost = (e) => {
+      if (!(e instanceof CustomEvent)) return;
+      const t = e.detail, s = t == null ? void 0 : t.item;
+      s && p(s) !== this || this._handleItemSelect(e);
+    };
+  }
+  /**
+   * Return the menu's enabled, top-level `hx-menu-item` children.
+   *
+   * Codex push-gate round-6 finding 3: `querySelectorAll('hx-menu-item')`
+   * walks the entire descendant tree, which on a parent menuitem
+   * includes the slotted nested `<hx-menu>` and ITS items. Treating
+   * those as top-level options corrupts roving tabindex, ArrowUp/Down
+   * navigation, and typeahead matching (typing the first letter of a
+   * grandchild item lands focus there instead of on the next sibling).
+   * Restrict to direct children of `this` so each menu owns only its
+   * own items.
+   *
+   * @internal
+   */
+  _getItems() {
+    return Array.from(this.children).filter(
+      (e) => e.tagName.toLowerCase() === "hx-menu-item" && !e.disabled && !e.loading
+    );
+  }
+  /**
+   * Synchronize roving tabindex across all enabled items.
+   * Only the active item (or first item if none active) gets tabindex=0.
+   */
+  /** @internal */
+  _syncRovingTabIndex() {
+    const e = this._getItems(), t = this._focusedIndex >= 0 ? this._focusedIndex : 0;
+    e.forEach((s, n) => {
+      s.setRovingTabIndex(n === t ? 0 : -1);
+    });
+  }
+  /** Focus the first menu item. */
+  focusFirst() {
+    const t = this._getItems()[0];
+    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, this._syncRovingTabIndex(), t.focus());
+  }
+  /** @internal */
+  _focusItem(e) {
+    const t = this._getItems();
+    if (t.length === 0) return;
+    this._focusedIndex = Math.max(0, Math.min(e, t.length - 1)), this._syncRovingTabIndex();
+    const s = t[this._focusedIndex];
+    s !== void 0 && s.focus();
+  }
+  /** @internal */
+  _updateFocusedIndex() {
+    var n;
+    const e = this._getItems(), t = ((n = this.shadowRoot) == null ? void 0 : n.activeElement) ?? document.activeElement, s = e.findIndex((i) => i.matches(":focus-within") || i === t);
+    s !== -1 && (this._focusedIndex = s);
+  }
+  /** @internal */
+  _handleKeyDown(e) {
+    this._updateFocusedIndex();
+    const t = this._getItems();
+    if (t.length !== 0)
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), this._focusItem(this._focusedIndex + 1 < t.length ? this._focusedIndex + 1 : 0);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), this._focusItem(this._focusedIndex > 0 ? this._focusedIndex - 1 : t.length - 1);
+          break;
+        case "Home":
+          e.preventDefault(), this._focusItem(0);
+          break;
+        case "End":
+          e.preventDefault(), this._focusItem(t.length - 1);
+          break;
+        case "Escape":
+          e.preventDefault(), this.dispatchEvent(new CustomEvent("hx-close", { bubbles: !0, composed: !0 }));
+          break;
+        default:
+          e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && !e.altKey && this._handleTypeahead(e.key, t);
+          break;
+      }
+  }
+  /** @internal */
+  _handleTypeahead(e, t) {
+    this._typeaheadTimer !== null && clearTimeout(this._typeaheadTimer), this._typeaheadBuffer += e.toLowerCase(), this._typeaheadTimer = setTimeout(() => {
+      this._typeaheadBuffer = "", this._typeaheadTimer = null;
+    }, 500);
+    const s = t.findIndex((n) => n.disabled || n.hasAttribute("disabled") ? !1 : this._getTypeaheadLabel(n).toLowerCase().startsWith(this._typeaheadBuffer));
+    s !== -1 && this._focusItem(s);
+  }
+  /**
+   * Read the typeahead label for an item — delegates to the shared
+   * `getMenuItemTypeaheadLabel` util so all four menu-bearing components
+   * (`hx-menu`, `hx-dropdown`, `hx-overflow-menu`, `hx-split-button`)
+   * share one submenu-aware extractor. Codex push-gate round-7 finding 3
+   * extracted this helper from its original home here in `hx-menu.ts`.
+   *
+   * @internal
+   */
+  _getTypeaheadLabel(e) {
+    return H(e);
+  }
+  /** @internal */
+  _handleSlotChange(e) {
+    const t = e.target;
+    if (!(t instanceof HTMLSlotElement)) return;
+    const s = /* @__PURE__ */ new Set(["hx-menu-item", "hx-menu-divider"]), n = t.assignedElements().filter((i) => !s.has(i.tagName.toLowerCase()));
+    n.length > 0 && R(
+      "hx-menu",
+      `Default slot expects <hx-menu-item> or <hx-menu-divider> elements. Found unexpected: ${n.map((i) => `<${i.tagName.toLowerCase()}>`).join(", ")}`
+    ), this._syncRovingTabIndex();
+  }
+  /** @internal */
+  _handleItemSelect(e) {
+    if (!(e instanceof CustomEvent)) return;
+    const t = e.detail, s = this._getItems();
+    this._focusedIndex = s.indexOf(t.item), this.dispatchEvent(
+      new CustomEvent("hx-select", {
+        bubbles: !0,
+        composed: !0,
+        detail: { item: t.item, value: t.value }
+      })
+    );
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : y(this._internals), this.addEventListener("keydown", this._handleHostKeyDown), this.addEventListener("hx-item-select", this._handleItemSelectHost), this.addEventListener("hx-item-submenu-open", this._handleSubmenuOpen), this.addEventListener("hx-item-submenu-close", this._handleSubmenuClose), this._syncHostAriaSemantics(), this._ariaMirror = w(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), this._typeaheadTimer !== null && (clearTimeout(this._typeaheadTimer), this._typeaheadTimer = null), this.removeEventListener("keydown", this._handleHostKeyDown), this.removeEventListener("hx-item-select", this._handleItemSelectHost), this.removeEventListener("hx-item-submenu-open", this._handleSubmenuOpen), this.removeEventListener("hx-item-submenu-close", this._handleSubmenuClose), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null;
+  }
+  updated(e) {
+    super.updated(e), e.has("label") && this._syncHostAriaSemantics();
+  }
+  firstUpdated() {
+    this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby") || this.label;
+  }
+  /**
+   * Mirror menu semantics onto the host via ElementInternals so consumer-
+   * supplied `aria-label`, `aria-labelledby`, and the `label` property all
+   * reach the announced control. Falls back to a flattened-string label on
+   * engines that do not implement `ariaLabelledByElements`.
+   * @internal
+   */
+  _syncHostAriaSemantics() {
+    var a;
+    const e = this._internals;
+    this._supportsIdrefRefs ? e.role = "menu" : (e.role = null, e.ariaLabel = null);
+    const t = ((a = this.getAttribute("aria-label")) == null ? void 0 : a.trim()) || "", s = this.getAttribute("aria-labelledby"), n = S(this, s), i = n.length > 0;
+    if (this._supportsIdrefRefs) {
+      const m = e;
+      m.ariaLabelledByElements = i ? n : null;
+    }
+    let r = "";
+    i ? (r = n.map((c) => C(c)).filter(Boolean).join(" ") || t || this.label || "Menu", this._supportsIdrefRefs && (e.ariaLabel = null)) : t ? (r = t, this._supportsIdrefRefs && (e.ariaLabel = t)) : (r = this.label || "Menu", this._supportsIdrefRefs && (e.ariaLabel = r)), this._resolvedAccessibleName !== r && (this._resolvedAccessibleName = r, this._supportsIdrefRefs || this.requestUpdate());
+  }
+  render() {
+    if (this._supportsIdrefRefs)
+      return u`
+        <div part="base" class="menu">
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </div>
+      `;
+    const e = this._resolvedAccessibleName || this.label || o;
+    return u`
+      <div part="base" class="menu" role="menu" aria-label=${e}>
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+f.styles = [O, g];
+f.__testSupportsIdrefRefsOverride = null;
+E([
+  d({ type: String, reflect: !0 })
+], f.prototype, "label", 2);
+f = E([
+  v("hx-menu")
+], f);
+const N = _`
+  :host {
+    display: block;
+    /* Host carries the roving tabindex on the modern host-canonical path,
+       so it becomes the focusable surface. Strip the default focus outline
+       from the host so the inner .menu-item:focus-visible (and the host
+       :focus-visible rule below) own the visual treatment. */
+    outline: none;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled, 0.5);
+  }
+
+  /* Host is the Tab stop on the modern path; mirror the inner focus-ring
+     onto the host so keyboard focus is visible on whichever surface the
+     UA paints. The inner-element rule below still applies on the legacy
+     fallback path (where the inner div carries the role + tabindex). */
+  :host(:focus-visible) .menu-item {
+    background-color: var(--hx-menu-item-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-menu-item-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-menu-item-focus-ring-offset, 0px);
+  }
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    min-height: var(--hx-touch-target-min, 44px);
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    cursor: pointer;
+    color: var(--hx-menu-item-color, var(--hx-color-text-primary, #0d1825));
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-family: var(--hx-menu-item-font-family, var(--hx-font-family-sans, sans-serif));
+    line-height: var(--hx-line-height-tight, 1.25);
+    user-select: none;
+    -webkit-user-select: none;
+    outline: none;
+    background: none;
+    width: 100%;
+    box-sizing: border-box;
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  .menu-item:hover,
+  .menu-item:focus-visible {
+    background-color: var(--hx-menu-item-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
+  }
+
+  .menu-item:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-menu-item-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-menu-item-focus-ring-offset, 0px);
+  }
+
+  .menu-item__prefix,
+  .menu-item__suffix {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .menu-item__label {
+    flex: 1 1 auto;
+  }
+
+  .menu-item__checked-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: 1em;
+    opacity: 0;
+    transition: opacity var(--hx-transition-fast, 150ms ease);
+  }
+
+  .menu-item--checked .menu-item__checked-icon {
+    opacity: 1;
+  }
+
+  .menu-item__submenu-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-inline-start: auto;
+  }
+
+  .menu-item__spinner {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    animation: hx-menu-spin var(--hx-duration-spinner, 750ms) linear infinite;
+  }
+
+  @keyframes hx-menu-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .menu-item {
+      transition: none;
+    }
+
+    .menu-item__checked-icon {
+      transition: none;
+    }
+
+    .menu-item__spinner {
+      animation: none;
+      opacity: var(--hx-opacity-muted, 0.6);
+    }
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .menu-item {
+      forced-color-adjust: none;
+      color: CanvasText;
+      background-color: Canvas;
+    }
+
+    .menu-item:hover,
+    .menu-item:focus-visible {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+
+    .menu-item:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
+
+    /* Host-canonical focus parity in forced-colors mode. */
+    :host(:focus-visible) .menu-item {
+      background-color: Highlight;
+      color: HighlightText;
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
+
+    :host([disabled]) .menu-item {
+      color: GrayText;
+      opacity: 1;
+    }
+  }
+`;
+var j = Object.defineProperty, K = Object.getOwnPropertyDescriptor, h = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? K(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (i = (n ? a(t, s, i) : a(i)) || i);
+  return n && i && j(t, s, i), i;
+};
+let l = class extends I {
+  constructor() {
+    super(...arguments), this._rovingTabIndex = -1, this.value = "", this.disabled = !1, this.checked = !1, this.type = "normal", this.loading = !1, this._hasSubmenu = !1, this._submenuOpen = !1, this._supportsIdrefRefs = !0, this._ariaMirror = null, this._resolvedAccessibleName = "", this._handleClick = (e) => {
+      if (this._isOwnEvent(e)) {
+        if (this.disabled || this.loading) {
+          e.preventDefault(), e.stopPropagation();
+          return;
+        }
+        this._activate();
+      }
+    }, this._handleKeyDown = (e) => {
+      if (this._isOwnEvent(e)) {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault(), this._activate();
+          return;
+        }
+        if (e.key === "ArrowRight" && this._hasSubmenu) {
+          e.preventDefault(), this.dispatchEvent(
+            new CustomEvent("hx-item-submenu-open", {
+              bubbles: !0,
+              composed: !0,
+              cancelable: !0,
+              detail: { item: this }
+            })
+          );
+          return;
+        }
+        e.key === "ArrowLeft" && (e.preventDefault(), this.dispatchEvent(
+          new CustomEvent("hx-item-submenu-close", {
+            bubbles: !0,
+            composed: !0,
+            cancelable: !0,
+            detail: { item: this }
+          })
+        ));
+      }
+    };
+  }
+  /** @internal Set the roving tabindex value. Called by parent hx-menu. */
+  setRovingTabIndex(e) {
+    this._rovingTabIndex = e, this._applyHostTabIndex();
+  }
+  /** Set whether the nested submenu is open. Called by the component managing submenu visibility. */
+  setSubmenuOpen(e) {
+    this._submenuOpen = e;
+  }
+  /**
+   * Focus the menu item. On the modern host-canonical path, focus lands on
+   * the host (which carries the roving tabindex and announced role). On the
+   * legacy fallback path, focus delegates to the inner element which still
+   * carries the role.
+   */
+  focus(e) {
+    var t;
+    this._supportsIdrefRefs ? HTMLElement.prototype.focus.call(this, e) : (t = this._menuItemEl) == null || t.focus(e);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const e = this.constructor;
+    this._supportsIdrefRefs = e.__testSupportsIdrefRefsOverride !== null ? e.__testSupportsIdrefRefsOverride : y(this._internals), this.closest('hx-menu, hx-split-button, [role="menu"], [role="menubar"]'), this.addEventListener("keydown", this._handleKeyDown), this.addEventListener("click", this._handleClick), this._syncHostAriaSemantics(), this._applyHostTabIndex(), this._ariaMirror = w(this, () => {
+      this._syncHostAriaSemantics();
+    });
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeyDown), this.removeEventListener("click", this._handleClick), (e = this._ariaMirror) == null || e.disconnect(), this._ariaMirror = null;
+  }
+  updated(e) {
+    super.updated(e), (e.has("disabled") || e.has("checked") || e.has("type") || e.has("loading") || e.has("_hasSubmenu") || e.has("_submenuOpen")) && this._syncHostAriaSemantics(), (e.has("_rovingTabIndex") || e.has("disabled")) && this._applyHostTabIndex();
+  }
+  /**
+   * Apply the roving tabindex to the host (modern path) so the host is the
+   * Tab stop. Disabled items are non-tabbable.
+   *
+   * Codex push-gate round-1 finding 3: on the fallback path
+   * (`_supportsIdrefRefs === false`), the inner `.menu-item` element
+   * carries `role="menuitem"` and the roving tabindex via the template
+   * (see `render()`'s legacy branch). If we ALSO assign a non-negative
+   * tabindex to the host, the user gets two focusable surfaces per item —
+   * Tab can land on the host even though the AT-announced role/aria-* live
+   * on the inner element. The host MUST be removed from the tab order on
+   * the fallback path; the inner element is the canonical Tab stop.
+   * @internal
+   */
+  _applyHostTabIndex() {
+    if (!this._supportsIdrefRefs) {
+      this.tabIndex = -1;
+      return;
+    }
+    this.disabled ? this.tabIndex = -1 : this.tabIndex = this._rovingTabIndex;
+  }
+  /**
+   * Mirror menuitem semantics onto the host via ElementInternals. Role is
+   * derived from `type` (normal → menuitem, checkbox → menuitemcheckbox,
+   * radio → menuitemradio). aria-disabled, aria-checked, aria-haspopup,
+   * aria-expanded, and aria-busy reactively follow component state.
+   * Consumer-supplied `aria-label` / `aria-labelledby` on the host project
+   * onto `internals.ariaLabel` / `internals.ariaLabelledByElements`.
+   * @internal
+   */
+  _syncHostAriaSemantics() {
+    var m;
+    const e = this._internals, t = this._getRole();
+    if (!this._supportsIdrefRefs)
+      e.role = null, e.ariaDisabled = null, e.ariaChecked = null, e.ariaHasPopup = null, e.ariaExpanded = null, e.ariaBusy = null;
+    else {
+      e.role = t, e.ariaDisabled = this.disabled ? "true" : null;
+      const c = this.type === "checkbox" || this.type === "radio";
+      e.ariaChecked = c ? this.checked ? "true" : "false" : null, e.ariaHasPopup = this._hasSubmenu ? "menu" : null, e.ariaExpanded = this._hasSubmenu ? this._submenuOpen ? "true" : "false" : null, e.ariaBusy = this.loading ? "true" : null;
+    }
+    const s = ((m = this.getAttribute("aria-label")) == null ? void 0 : m.trim()) || "", n = this.getAttribute("aria-labelledby"), i = S(this, n), r = i.length > 0;
+    if (this._supportsIdrefRefs) {
+      const c = e;
+      c.ariaLabelledByElements = r ? i : null;
+    }
+    let a = "";
+    if (r) {
+      const c = i.map((L) => C(L)).filter(Boolean).join(" ") || s || "";
+      a = c, this._supportsIdrefRefs ? e.ariaLabel = null : e.ariaLabel = c || null;
+    } else s ? (a = s, this._supportsIdrefRefs ? e.ariaLabel = s : e.ariaLabel = null) : e.ariaLabel = null;
+    this._resolvedAccessibleName !== a && (this._resolvedAccessibleName = a, this._supportsIdrefRefs || this.requestUpdate());
+  }
+  /** @internal */
+  _handleSubmenuSlotChange(e) {
+    const t = e.target;
+    this._hasSubmenu = t.assignedElements().length > 0;
+  }
+  /** @internal */
+  _activate() {
+    if (!(this.disabled || this.loading)) {
+      if (this.type === "checkbox")
+        this.checked = !this.checked;
+      else if (this.type === "radio") {
+        const e = this.closest("hx-menu");
+        e ? e.querySelectorAll(':scope > hx-menu-item[type="radio"]').forEach((t) => {
+          t.checked = t === this;
+        }) : this.checked = !0;
+      }
+      this.dispatchEvent(
+        new CustomEvent("hx-item-select", {
+          bubbles: !0,
+          composed: !0,
+          detail: { item: this, value: this.value }
+        })
+      );
+    }
+  }
+  /**
+   * Origin guard for host-bound click/keydown handlers. Returns `true` only
+   * when the event originated on THIS host (its shadow tree) and not on a
+   * nested `hx-menu-item` projected into the `submenu` slot.
+   *
+   * Codex push-gate round-5 P1: nested submenu items are slotted descendants
+   * in the parent's light DOM. Click/keydown events from a Child item bubble
+   * through the parent host's listeners — without this guard, selecting Child
+   * also activates Parent (double `hx-item-select`) and Enter/Space/ArrowRight
+   * on Child re-trigger Parent's handlers (wrong-level activation, second
+   * submenu reopen).
+   *
+   * Walks `composedPath()` and returns the closest `hx-menu-item` ancestor of
+   * the original target; the event is "ours" iff that ancestor is `this`.
+   * Mirrors the inner-vs-host origin discipline used by `hx-checkbox`,
+   * `hx-switch`, and `hx-toggle-button`'s host handlers (`path[0] !== this`)
+   * but adapts for hx-menu-item's nested-host case where path[0] is the
+   * deepest inner element of a slotted child's own shadow tree.
+   * @internal
+   */
+  _isOwnEvent(e) {
+    const t = e.composedPath();
+    for (const s of t)
+      if (s instanceof Element && s.tagName === "HX-MENU-ITEM")
+        return s === this;
+    return !1;
+  }
+  /** @internal */
+  _renderCheckedIcon() {
+    return u`
+      <span part="checked-icon" class="menu-item__checked-icon" aria-hidden="true">
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      </span>
+    `;
+  }
+  /** @internal */
+  _renderSubmenuIcon() {
+    return u`
+      <span part="submenu-icon" class="menu-item__submenu-icon" aria-hidden="true">
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+      </span>
+    `;
+  }
+  /** @internal */
+  _renderSpinner() {
+    return u`
+      <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
+          d="M12 2a10 10 0 0 1 10 10"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+      </svg>
+    `;
+  }
+  /** @internal */
+  _getRole() {
+    switch (this.type) {
+      case "checkbox":
+        return "menuitemcheckbox";
+      case "radio":
+        return "menuitemradio";
+      default:
+        return "menuitem";
+    }
+  }
+  render() {
+    const e = this._getRole(), t = this.type === "checkbox" || this.type === "radio", s = {
+      "menu-item": !0,
+      "menu-item--checked": this.checked
+    };
+    if (this._supportsIdrefRefs)
+      return u`
+        <div part="base" class=${k(s)}>
+          ${this.loading ? this._renderSpinner() : o}
+          ${t ? this._renderCheckedIcon() : o}
+          <span part="prefix" class="menu-item__prefix">
+            <slot name="prefix"></slot>
+          </span>
+          <span part="label" class="menu-item__label">
+            <slot></slot>
+          </span>
+          <span part="suffix" class="menu-item__suffix">
+            <slot name="suffix"></slot>
+          </span>
+          ${this._hasSubmenu ? this._renderSubmenuIcon() : o}
+          <slot name="submenu" @slotchange=${this._handleSubmenuSlotChange}></slot>
+        </div>
+      `;
+    const n = this._resolvedAccessibleName || o;
+    return u`
+      <div
+        part="base"
+        class=${k(s)}
+        role=${e}
+        tabindex=${this.disabled ? "-1" : String(this._rovingTabIndex)}
+        aria-label=${n}
+        aria-disabled=${this.disabled ? "true" : o}
+        aria-checked=${t ? this.checked ? "true" : "false" : o}
+        aria-haspopup=${this._hasSubmenu ? "menu" : o}
+        aria-expanded=${this._hasSubmenu ? this._submenuOpen ? "true" : "false" : o}
+        aria-busy=${this.loading ? "true" : o}
+      >
+        ${this.loading ? this._renderSpinner() : o}
+        ${t ? this._renderCheckedIcon() : o}
+        <span part="prefix" class="menu-item__prefix">
+          <slot name="prefix"></slot>
+        </span>
+        <span part="label" class="menu-item__label">
+          <slot></slot>
+        </span>
+        <span part="suffix" class="menu-item__suffix">
+          <slot name="suffix"></slot>
+        </span>
+        ${this._hasSubmenu ? this._renderSubmenuIcon() : o}
+        <slot name="submenu" @slotchange=${this._handleSubmenuSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+l.styles = [N, g];
+l.__testSupportsIdrefRefsOverride = null;
+h([
+  x()
+], l.prototype, "_rovingTabIndex", 2);
+h([
+  d({ type: String })
+], l.prototype, "value", 2);
+h([
+  d({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+h([
+  d({ type: Boolean, reflect: !0 })
+], l.prototype, "checked", 2);
+h([
+  d({ type: String, reflect: !0 })
+], l.prototype, "type", 2);
+h([
+  d({ type: Boolean, reflect: !0 })
+], l.prototype, "loading", 2);
+h([
+  x()
+], l.prototype, "_hasSubmenu", 2);
+h([
+  x()
+], l.prototype, "_submenuOpen", 2);
+h([
+  T(".menu-item")
+], l.prototype, "_menuItemEl", 2);
+l = h([
+  v("hx-menu-item")
+], l);
+const q = _`
+  :host {
+    display: block;
+  }
+
+  .menu-divider {
+    height: var(--hx-border-width-thin, 1px);
+    background-color: var(--hx-menu-divider-color, var(--hx-color-border-default, #d6dbd5));
+    margin: var(--hx-space-1, 0.25rem) calc(-1 * var(--hx-space-1, 0.25rem));
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .menu-divider {
+      background-color: GrayText;
+    }
+  }
+`;
+var P = Object.getOwnPropertyDescriptor, U = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? P(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (i = a(i) || i);
+  return i;
+};
+let b = class extends I {
+  constructor() {
+    super(...arguments), this._supportsIdrefRefs = !0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._supportsIdrefRefs = y(this._internals);
+    const e = this._internals;
+    e.role = "separator", e.ariaOrientation = "horizontal";
+  }
+  render() {
+    return this._supportsIdrefRefs ? u`<div part="base" class="menu-divider"></div>` : u`<div
+      part="base"
+      class="menu-divider"
+      role="separator"
+      aria-orientation="horizontal"
+    ></div>`;
+  }
+};
+b.styles = [q, g];
+b = U([
+  v("hx-menu-divider")
+], b);
+export {
+  f as H,
+  b as a,
+  l as b
+};
+//# sourceMappingURL=hx-menu-divider-BjiRIWKq.js.map