@helixui/library 1.0.1 → 1.1.2-next.1

package/dist/shared/{hx-overflow-menu-CobkjAb8.js → hx-overflow-menu-Bz02LPPk.js}

@@ -1,9 +1,9 @@
-import { css as u, LitElement as p, html as c, nothing as d } from "lit";
-import { property as h, state as m, customElement as f } from "lit/decorators.js";
-import { classMap as g } from "lit/directives/class-map.js";
-import { tokenStyles as v } from "@helixui/tokens/lit";
-import { computePosition as x, offset as b, flip as w, shift as y } from "@floating-ui/dom";
-const _ = u`
+import { css as p, LitElement as m, html as h, nothing as d } from "lit";
+import { property as l, state as f, query as u, customElement as g } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { tokenStyles as x } from "@helixui/tokens/lit";
+import { computePosition as b, offset as w, flip as _, shift as y } from "@floating-ui/dom";
+const k = p`
   :host {
     display: inline-block;
     position: relative;
@@ -55,12 +55,16 @@ const _ = u`
   .trigger--sm {
     width: var(--hx-size-8, 2rem);
     height: var(--hx-size-8, 2rem);
+    min-width: var(--hx-size-touch-target, 2.75rem);
+    min-height: var(--hx-size-touch-target, 2.75rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
   .trigger--md {
     width: var(--hx-size-10, 2.5rem);
     height: var(--hx-size-10, 2.5rem);
+    min-width: var(--hx-size-touch-target, 2.75rem);
+    min-height: var(--hx-size-touch-target, 2.75rem);
     font-size: var(--hx-font-size-md, 1rem);
   }
 
@@ -100,7 +104,7 @@ const _ = u`
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     background: none;
     border: none;
-    text-align: left;
+    text-align: start;
     font-size: var(--hx-font-size-sm, 0.875rem);
     color: var(--hx-color-neutral-900, #111827);
     cursor: pointer;
@@ -133,23 +137,23 @@ const _ = u`
     }
   }
 `;
-var k = Object.defineProperty, z = Object.getOwnPropertyDescriptor, l = (e, o, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? z(o, t) : o, i = e.length - 1, a; i >= 0; i--)
-    (a = e[i]) && (r = (n ? a(o, t, r) : a(r)) || r);
-  return n && r && k(o, t, r), r;
+var z = Object.defineProperty, E = Object.getOwnPropertyDescriptor, s = (e, r, t, i) => {
+  for (var o = i > 1 ? void 0 : i ? E(r, t) : r, a = e.length - 1, c; a >= 0; a--)
+    (c = e[a]) && (o = (i ? c(r, t, o) : c(o)) || o);
+  return i && o && z(r, t, o), o;
 };
-let s = class extends p {
+let C = 0, n = class extends m {
   constructor() {
-    super(...arguments), this.placement = "bottom-end", this.size = "md", this.disabled = !1, this.icon = "vertical", this.label = "More actions", this.menuLabel = "Actions", this._open = !1, this._panelId = `hx-overflow-menu-panel-${Math.random().toString(36).slice(2, 9)}`, this._handleTriggerClick = (e) => {
+    super(...arguments), this.placement = "bottom-end", this.size = "md", this.disabled = !1, this.icon = "vertical", this.label = "More actions", this.labelMenu = "Actions", this._open = !1, this._panelId = `hx-overflow-menu-panel-${++C}`, this._handleTriggerClick = (e) => {
       e.stopPropagation(), this._toggle();
     }, this._handleDocumentClick = (e) => {
       if (!this._open) return;
       e.composedPath().includes(this) || this._hide();
     }, this._handleKeydown = (e) => {
-      var o, t, n;
+      var r, t;
       if (this._open) {
         if (e.key === "Escape") {
-          e.stopPropagation(), this._hide(), (t = (o = this.shadowRoot) == null ? void 0 : o.querySelector('[part~="button"]')) == null || t.focus();
+          e.stopPropagation(), this._hide(), (r = this._buttonEl) == null || r.focus();
           return;
         }
         if (e.key === "Tab") {
@@ -158,25 +162,25 @@ let s = class extends p {
         }
         if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") {
           e.preventDefault(), e.stopPropagation();
-          const r = this._getMenuItems();
-          if (r.length === 0) return;
-          const i = r.indexOf(document.activeElement);
+          const i = this._getMenuItems();
+          if (i.length === 0) return;
+          const o = i.indexOf(document.activeElement);
           let a;
-          e.key === "ArrowDown" ? a = i < 0 || i >= r.length - 1 ? 0 : i + 1 : e.key === "ArrowUp" ? a = i <= 0 ? r.length - 1 : i - 1 : e.key === "Home" ? a = 0 : a = r.length - 1, (n = r[a]) == null || n.focus();
+          e.key === "ArrowDown" ? a = o < 0 || o >= i.length - 1 ? 0 : o + 1 : e.key === "ArrowUp" ? a = o <= 0 ? i.length - 1 : o - 1 : e.key === "Home" ? a = 0 : a = i.length - 1, (t = i[a]) == null || t.focus();
         }
       }
     }, this._handleSlotClick = (e) => {
-      var r;
+      var o;
       const t = e.target.closest(
         '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]'
       );
       if (!t || t.hasAttribute("disabled") || t.disabled) return;
-      const n = t.getAttribute("data-value") ?? ((r = t.textContent) == null ? void 0 : r.trim()) ?? "";
+      const i = t.getAttribute("data-value") ?? ((o = t.textContent) == null ? void 0 : o.trim()) ?? "";
       this.dispatchEvent(
         new CustomEvent("hx-select", {
           bubbles: !0,
           composed: !0,
-          detail: { value: n }
+          detail: { value: i }
         })
       ), this._hide();
     };
@@ -189,45 +193,51 @@ let s = class extends p {
     super.disconnectedCallback(), document.removeEventListener("click", this._handleDocumentClick, !0), this.removeEventListener("keydown", this._handleKeydown);
   }
   // ─── Open / Close ───
+  /** @internal */
   async _show() {
     this._open || this.disabled || (this._open = !0, await this.updateComplete, await this._updatePosition(), this._focusFirstItem(), this.dispatchEvent(new CustomEvent("hx-show", { bubbles: !0, composed: !0 })));
   }
+  /** @internal */
   _hide() {
     this._open && (this._open = !1, this.dispatchEvent(new CustomEvent("hx-hide", { bubbles: !0, composed: !0 })));
   }
+  /** @internal */
   _toggle() {
     this._open ? this._hide() : this._show();
   }
   // ─── Positioning (Floating UI) ───
+  /** @internal */
   async _updatePosition() {
-    var r, i;
-    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector('[part~="button"]'), o = (i = this.shadowRoot) == null ? void 0 : i.querySelector('[part~="panel"]');
-    if (!e || !o) return;
-    const { x: t, y: n } = await x(e, o, {
+    const e = this._buttonEl, r = this._panelEl;
+    if (!e || !r) return;
+    const { x: t, y: i } = await b(e, r, {
       placement: this.placement,
       strategy: "fixed",
-      middleware: [b(4), w(), y({ padding: 8 })]
+      middleware: [w(4), _(), y({ padding: 8 })]
     });
-    Object.assign(o.style, {
+    Object.assign(r.style, {
       left: `${t}px`,
-      top: `${n}px`
+      top: `${i}px`
     });
   }
   // ─── Focus management ───
+  /** @internal */
   _focusFirstItem() {
-    var o;
-    (o = this._getMenuItems()[0]) == null || o.focus();
+    var r;
+    (r = this._getMenuItems()[0]) == null || r.focus();
   }
+  /** @internal */
   _getMenuItems() {
-    var o;
-    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot");
+    var r;
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot");
     return (e == null ? void 0 : e.assignedElements({ flatten: !0 }).filter(
       (t) => t instanceof HTMLElement && !t.hasAttribute("disabled") && !t.disabled && (t.getAttribute("role") === "menuitem" || t.getAttribute("role") === "menuitemcheckbox" || t.getAttribute("role") === "menuitemradio" || t.tagName.toLowerCase().startsWith("hx-"))
     )) ?? [];
   }
   // ─── SVG Icons ───
+  /** @internal */
   _renderIcon() {
-    return this.icon === "horizontal" ? c`
+    return this.icon === "horizontal" ? h`
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="1em"
@@ -240,7 +250,7 @@ let s = class extends p {
           <circle cx="12" cy="12" r="2" />
           <circle cx="19" cy="12" r="2" />
         </svg>
-      ` : c`
+      ` : h`
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="1em"
@@ -262,26 +272,26 @@ let s = class extends p {
       [`trigger--${this.size}`]: !0,
       "trigger--open": this._open
     };
-    return c`
+    return h`
       <button
         part="button trigger"
-        class=${g(e)}
+        class=${v(e)}
         type="button"
         aria-label=${this.label}
         aria-haspopup="menu"
-        aria-expanded=${this._open ? "true" : d}
+        aria-expanded=${String(this._open)}
         aria-controls=${this._open ? this._panelId : d}
         ?disabled=${this.disabled}
         @click=${this._handleTriggerClick}
       >
         ${this._renderIcon()}
       </button>
-      ${this._open ? c`
+      ${this._open ? h`
             <div
               id=${this._panelId}
               part="panel menu"
               role="menu"
-              aria-label=${this.menuLabel}
+              aria-label=${this.labelMenu}
               class="panel"
               @click=${this._handleSlotClick}
             >
@@ -291,32 +301,38 @@ let s = class extends p {
     `;
   }
 };
-s.styles = [v, _];
-l([
-  h({ type: String, reflect: !0 })
-], s.prototype, "placement", 2);
-l([
-  h({ type: String, reflect: !0, attribute: "hx-size" })
-], s.prototype, "size", 2);
-l([
-  h({ type: Boolean, reflect: !0 })
-], s.prototype, "disabled", 2);
-l([
-  h({ type: String, reflect: !0 })
-], s.prototype, "icon", 2);
-l([
-  h({ type: String, reflect: !0 })
-], s.prototype, "label", 2);
-l([
-  h({ type: String, reflect: !0, attribute: "menu-label" })
-], s.prototype, "menuLabel", 2);
-l([
-  m()
-], s.prototype, "_open", 2);
-s = l([
-  f("hx-overflow-menu")
-], s);
+n.styles = [x, k];
+s([
+  l({ type: String, reflect: !0 })
+], n.prototype, "placement", 2);
+s([
+  l({ type: String, reflect: !0, attribute: "hx-size" })
+], n.prototype, "size", 2);
+s([
+  l({ type: Boolean, reflect: !0 })
+], n.prototype, "disabled", 2);
+s([
+  l({ type: String, reflect: !0 })
+], n.prototype, "icon", 2);
+s([
+  l({ type: String, reflect: !0 })
+], n.prototype, "label", 2);
+s([
+  l({ type: String, reflect: !0, attribute: "label-menu" })
+], n.prototype, "labelMenu", 2);
+s([
+  f()
+], n.prototype, "_open", 2);
+s([
+  u('[part~="button"]')
+], n.prototype, "_buttonEl", 2);
+s([
+  u('[part~="panel"]')
+], n.prototype, "_panelEl", 2);
+n = s([
+  g("hx-overflow-menu")
+], n);
 export {
-  s as H
+  n as H
 };
-//# sourceMappingURL=hx-overflow-menu-CobkjAb8.js.map
+//# sourceMappingURL=hx-overflow-menu-Bz02LPPk.js.map

package/dist/shared/hx-overflow-menu-Bz02LPPk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-overflow-menu-Bz02LPPk.js","sources":["../../src/components/hx-overflow-menu/hx-overflow-menu.styles.ts","../../src/components/hx-overflow-menu/hx-overflow-menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixOverflowMenuStyles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.4);\n  }\n\n  /* ─── Trigger Button ─── */\n\n  .trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: var(--hx-border-width-thin, 1px) solid transparent;\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    background-color: transparent;\n    color: var(--hx-overflow-menu-button-color, var(--hx-color-neutral-600, #4b5563));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 0.15s ease),\n      color var(--hx-transition-fast, 0.15s ease);\n    flex-shrink: 0;\n    padding: 0;\n    line-height: 1;\n  }\n\n  .trigger:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-overflow-menu-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .trigger:hover:not([disabled]) {\n    background-color: var(--hx-color-neutral-100, #f3f4f6);\n  }\n\n  .trigger--open {\n    background-color: var(--hx-color-neutral-100, #f3f4f6);\n  }\n\n  /* ─── Size Variants ─── */\n\n  .trigger--sm {\n    width: var(--hx-size-8, 2rem);\n    height: var(--hx-size-8, 2rem);\n    min-width: var(--hx-size-touch-target, 2.75rem);\n    min-height: var(--hx-size-touch-target, 2.75rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .trigger--md {\n    width: var(--hx-size-10, 2.5rem);\n    height: var(--hx-size-10, 2.5rem);\n    min-width: var(--hx-size-touch-target, 2.75rem);\n    min-height: var(--hx-size-touch-target, 2.75rem);\n    font-size: var(--hx-font-size-md, 1rem);\n  }\n\n  .trigger--lg {\n    width: var(--hx-size-12, 3rem);\n    height: var(--hx-size-12, 3rem);\n    font-size: var(--hx-font-size-lg, 1.125rem);\n  }\n\n  /* ─── Panel ─── */\n\n  .panel {\n    position: fixed;\n    z-index: var(--hx-overflow-menu-panel-z-index, 1000);\n    min-width: var(--hx-overflow-menu-panel-min-width, 160px);\n    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-neutral-0, #fff));\n    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-neutral-200, #e5e7eb));\n    border-radius: var(\n      --hx-overflow-menu-panel-border-radius,\n      var(--hx-border-radius-md, 0.375rem)\n    );\n    box-shadow: var(\n      --hx-overflow-menu-panel-shadow,\n      0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12))\n    );\n    padding: var(--hx-space-1, 0.25rem) 0;\n    outline: none;\n  }\n\n  /* ─── Slot: menu items ─── */\n\n  ::slotted([role='menuitem']),\n  ::slotted([role='menuitemcheckbox']),\n  ::slotted([role='menuitemradio']) {\n    display: block;\n    width: 100%;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    background: none;\n    border: none;\n    text-align: start;\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    color: var(--hx-color-neutral-900, #111827);\n    cursor: pointer;\n    white-space: nowrap;\n    box-sizing: border-box;\n  }\n\n  ::slotted([role='menuitem']:hover),\n  ::slotted([role='menuitemcheckbox']:hover),\n  ::slotted([role='menuitemradio']:hover) {\n    background-color: var(--hx-color-neutral-50, #f9fafb);\n  }\n\n  ::slotted([role='menuitem']:focus-visible),\n  ::slotted([role='menuitemcheckbox']:focus-visible),\n  ::slotted([role='menuitemradio']:focus-visible) {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-overflow-menu-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500))\n      );\n    outline-offset: 0;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .trigger {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { computePosition, flip, shift, offset } from '@floating-ui/dom';\nimport { helixOverflowMenuStyles } from './hx-overflow-menu.styles.js';\n\nlet _counter = 0;\n\n/**\n * An overflow menu (kebab/meatball menu) that reveals hidden actions via a\n * floating panel. Composed from a trigger button and a slotted menu panel.\n *\n * @summary \"...\" or kebab icon button that reveals hidden actions.\n *\n * @tag hx-overflow-menu\n *\n * @slot - Menu items (e.g. `<button role=\"menuitem\">` or `<hx-menu-item>` elements).\n *\n * @fires {CustomEvent<{value: string}>} hx-select - Dispatched when a menu item is selected.\n * @fires {CustomEvent<void>} hx-show - Dispatched when the panel opens.\n * @fires {CustomEvent<void>} hx-hide - Dispatched when the panel closes.\n *\n * @csspart button - The trigger icon button element.\n * @csspart trigger - Alias for button — the trigger icon button element.\n * @csspart panel - The floating menu panel container.\n * @csspart menu - Alias for panel — the floating menu panel container.\n *\n * @cssprop [--hx-overflow-menu-panel-bg=var(--hx-color-neutral-0,#fff)] - Panel background color.\n * @cssprop [--hx-overflow-menu-panel-border=1px solid var(--hx-color-neutral-200,#e5e7eb)] - Panel border.\n * @cssprop [--hx-overflow-menu-panel-border-radius=var(--hx-border-radius-md)] - Panel border radius.\n * @cssprop [--hx-overflow-menu-panel-shadow=0 4px 16px rgba(0,0,0,0.12)] - Panel box shadow.\n * @cssprop [--hx-overflow-menu-panel-min-width=160px] - Minimum panel width.\n * @cssprop [--hx-overflow-menu-panel-z-index=1000] - Panel z-index.\n * @cssprop [--hx-overflow-menu-button-color=var(--hx-color-neutral-600)] - Trigger icon color.\n *\n * @example\n * ```html\n * <hx-overflow-menu>\n *   <button role=\"menuitem\">Edit</button>\n *   <button role=\"menuitem\">Delete</button>\n * </hx-overflow-menu>\n * ```\n */\n@customElement('hx-overflow-menu')\nexport class HelixOverflowMenu extends LitElement {\n  static override styles = [tokenStyles, helixOverflowMenuStyles];\n\n  /**\n   * Preferred placement of the floating panel relative to the trigger.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end' = 'bottom-end';\n\n  /**\n   * Size of the trigger button.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Whether the trigger button is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Icon orientation: vertical (kebab ⋮) or horizontal (meatball ···).\n   * @attr icon\n   */\n  @property({ type: String, reflect: true })\n  icon: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Accessible label for the trigger button.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = 'More actions';\n\n  /**\n   * Accessible label for the menu panel. Reflected as `label-menu`.\n   * @attr label-menu\n   */\n  @property({ type: String, reflect: true, attribute: 'label-menu' })\n  labelMenu = 'Actions';\n\n  /**\n   * Tracks whether the overflow menu panel is currently open and visible.\n   * @internal\n   */\n  @state() private _open = false;\n\n  /**\n   * Unique ID for the floating panel element, used to wire aria-controls on the trigger button.\n   * @internal\n   */\n  private readonly _panelId = `hx-overflow-menu-panel-${++_counter}`;\n\n  /** @internal */\n  @query('[part~=\"button\"]') private _buttonEl!: HTMLButtonElement | null;\n\n  /** @internal */\n  @query('[part~=\"panel\"]') private _panelEl!: HTMLElement | null;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleDocumentClick, true);\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleDocumentClick, true);\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  // ─── Open / Close ───\n\n  /** @internal */\n  private async _show(): Promise<void> {\n    if (this._open || this.disabled) return;\n    this._open = true;\n    await this.updateComplete;\n    await this._updatePosition();\n    this._focusFirstItem();\n    this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _hide(): void {\n    if (!this._open) return;\n    this._open = false;\n    this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _toggle(): void {\n    if (this._open) {\n      this._hide();\n    } else {\n      void this._show();\n    }\n  }\n\n  // ─── Positioning (Floating UI) ───\n\n  /** @internal */\n  private async _updatePosition(): Promise<void> {\n    const trigger = this._buttonEl as HTMLElement | null;\n    const panel = this._panelEl;\n    if (!trigger || !panel) return;\n\n    const { x, y } = await computePosition(trigger, panel, {\n      placement: this.placement,\n      strategy: 'fixed',\n      middleware: [offset(4), flip(), shift({ padding: 8 })],\n    });\n\n    Object.assign(panel.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n  }\n\n  // ─── Focus management ───\n\n  /** @internal */\n  private _focusFirstItem(): void {\n    const items = this._getMenuItems();\n    items[0]?.focus();\n  }\n\n  /** @internal */\n  private _getMenuItems(): HTMLElement[] {\n    const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\n    return (\n      (slot\n        ?.assignedElements({ flatten: true })\n        .filter(\n          (el) =>\n            el instanceof HTMLElement &&\n            !el.hasAttribute('disabled') &&\n            !(el as HTMLButtonElement).disabled &&\n            (el.getAttribute('role') === 'menuitem' ||\n              el.getAttribute('role') === 'menuitemcheckbox' ||\n              el.getAttribute('role') === 'menuitemradio' ||\n              el.tagName.toLowerCase().startsWith('hx-')),\n        ) as HTMLElement[]) ?? []\n    );\n  }\n\n  // ─── Event Handlers (arrow function class fields — stable reference, no bind needed) ───\n\n  /** @internal */\n  private readonly _handleTriggerClick = (e: MouseEvent): void => {\n    e.stopPropagation();\n    this._toggle();\n  };\n\n  /** @internal */\n  private readonly _handleDocumentClick = (e: MouseEvent): void => {\n    if (!this._open) return;\n    const path = e.composedPath();\n    if (!path.includes(this)) {\n      this._hide();\n    }\n  };\n\n  /** @internal */\n  private readonly _handleKeydown = (e: KeyboardEvent): void => {\n    if (!this._open) return;\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      this._hide();\n      this._buttonEl?.focus();\n      return;\n    }\n    if (e.key === 'Tab') {\n      this._hide();\n      return;\n    }\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n      e.preventDefault();\n      e.stopPropagation();\n      const items = this._getMenuItems();\n      if (items.length === 0) return;\n      const focused = items.indexOf(document.activeElement as HTMLElement);\n      let next: number;\n      if (e.key === 'ArrowDown') {\n        next = focused < 0 || focused >= items.length - 1 ? 0 : focused + 1;\n      } else if (e.key === 'ArrowUp') {\n        next = focused <= 0 ? items.length - 1 : focused - 1;\n      } else if (e.key === 'Home') {\n        next = 0;\n      } else {\n        next = items.length - 1;\n      }\n      items[next]?.focus();\n    }\n  };\n\n  /** @internal */\n  private readonly _handleSlotClick = (e: Event): void => {\n    const target = e.target as HTMLElement;\n    const menuItem = target.closest(\n      '[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]',\n    ) as HTMLElement | null;\n    if (!menuItem) return;\n    if (menuItem.hasAttribute('disabled') || (menuItem as HTMLButtonElement).disabled) return;\n    const value = menuItem.getAttribute('data-value') ?? menuItem.textContent?.trim() ?? '';\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { value },\n      }),\n    );\n    this._hide();\n  };\n\n  // ─── SVG Icons ───\n\n  /** @internal */\n  private _renderIcon() {\n    if (this.icon === 'horizontal') {\n      return html`\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"1em\"\n          height=\"1em\"\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"5\" cy=\"12\" r=\"2\" />\n          <circle cx=\"12\" cy=\"12\" r=\"2\" />\n          <circle cx=\"19\" cy=\"12\" r=\"2\" />\n        </svg>\n      `;\n    }\n    return html`\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"1em\"\n        height=\"1em\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\"\n      >\n        <circle cx=\"12\" cy=\"5\" r=\"2\" />\n        <circle cx=\"12\" cy=\"12\" r=\"2\" />\n        <circle cx=\"12\" cy=\"19\" r=\"2\" />\n      </svg>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const btnClasses = {\n      trigger: true,\n      [`trigger--${this.size}`]: true,\n      'trigger--open': this._open,\n    };\n\n    return html`\n      <button\n        part=\"button trigger\"\n        class=${classMap(btnClasses)}\n        type=\"button\"\n        aria-label=${this.label}\n        aria-haspopup=\"menu\"\n        aria-expanded=${String(this._open)}\n        aria-controls=${this._open ? this._panelId : nothing}\n        ?disabled=${this.disabled}\n        @click=${this._handleTriggerClick}\n      >\n        ${this._renderIcon()}\n      </button>\n      ${this._open\n        ? html`\n            <div\n              id=${this._panelId}\n              part=\"panel menu\"\n              role=\"menu\"\n              aria-label=${this.labelMenu}\n              class=\"panel\"\n              @click=${this._handleSlotClick}\n            >\n              <slot></slot>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-overflow-menu': HelixOverflowMenu;\n  }\n}\n"],"names":["helixOverflowMenuStyles","css","_counter","HelixOverflowMenu","LitElement","_a","items","focused","next","_b","menuItem","value","trigger","panel","x","y","computePosition","offset","flip","shift","slot","el","html","btnClasses","classMap","nothing","tokenStyles","__decorateClass","property","state","query","customElement"],"mappings":";;;;;AAEO,MAAMA,IAA0BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACKvC,IAAIC,IAAW,GAsCFC,IAAN,cAAgCC,EAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,YAYkB,cAOlB,KAAA,OAA2B,MAO3B,KAAA,WAAW,IAOX,KAAA,OAAkC,YAOlC,KAAA,QAAQ,gBAOR,KAAA,YAAY,WAMH,KAAQ,QAAQ,IAMzB,KAAiB,WAAW,0BAA0B,EAAEF,CAAQ,IAoGhE,KAAiB,sBAAsB,CAAC,MAAwB;AAC9D,QAAE,gBAAA,GACF,KAAK,QAAA;AAAA,IACP,GAGA,KAAiB,uBAAuB,CAAC,MAAwB;AAC/D,UAAI,CAAC,KAAK,MAAO;AAEjB,MADa,EAAE,aAAA,EACL,SAAS,IAAI,KACrB,KAAK,MAAA;AAAA,IAET,GAGA,KAAiB,iBAAiB,CAAC,MAA2B;;AAC5D,UAAK,KAAK,OACV;AAAA,YAAI,EAAE,QAAQ,UAAU;AACtB,YAAE,gBAAA,GACF,KAAK,MAAA,IACLG,IAAA,KAAK,cAAL,QAAAA,EAAgB;AAChB;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,OAAO;AACnB,eAAK,MAAA;AACL;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAAa,EAAE,QAAQ,UAAU,EAAE,QAAQ,OAAO;AACvF,YAAE,eAAA,GACF,EAAE,gBAAA;AACF,gBAAMC,IAAQ,KAAK,cAAA;AACnB,cAAIA,EAAM,WAAW,EAAG;AACxB,gBAAMC,IAAUD,EAAM,QAAQ,SAAS,aAA4B;AACnE,cAAIE;AACJ,UAAI,EAAE,QAAQ,cACZA,IAAOD,IAAU,KAAKA,KAAWD,EAAM,SAAS,IAAI,IAAIC,IAAU,IACzD,EAAE,QAAQ,YACnBC,IAAOD,KAAW,IAAID,EAAM,SAAS,IAAIC,IAAU,IAC1C,EAAE,QAAQ,SACnBC,IAAO,IAEPA,IAAOF,EAAM,SAAS,IAExBG,IAAAH,EAAME,CAAI,MAAV,QAAAC,EAAa;AAAA,QACf;AAAA;AAAA,IACF,GAGA,KAAiB,mBAAmB,CAAC,MAAmB;;AAEtD,YAAMC,IADS,EAAE,OACO;AAAA,QACtB;AAAA,MAAA;AAGF,UADI,CAACA,KACDA,EAAS,aAAa,UAAU,KAAMA,EAA+B,SAAU;AACnF,YAAMC,IAAQD,EAAS,aAAa,YAAY,OAAKL,IAAAK,EAAS,gBAAT,gBAAAL,EAAsB,WAAU;AACrF,WAAK;AAAA,QACH,IAAI,YAA+B,aAAa;AAAA,UAC9C,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ,EAAE,OAAAM,EAAA;AAAA,QAAM,CACjB;AAAA,MAAA,GAEH,KAAK,MAAA;AAAA,IACP;AAAA,EAAA;AAAA;AAAA,EA1JS,oBAA0B;AACjC,UAAM,kBAAA,GACN,SAAS,iBAAiB,SAAS,KAAK,sBAAsB,EAAI,GAClE,KAAK,iBAAiB,WAAW,KAAK,cAAc;AAAA,EACtD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,SAAS,oBAAoB,SAAS,KAAK,sBAAsB,EAAI,GACrE,KAAK,oBAAoB,WAAW,KAAK,cAAc;AAAA,EACzD;AAAA;AAAA;AAAA,EAKA,MAAc,QAAuB;AACnC,IAAI,KAAK,SAAS,KAAK,aACvB,KAAK,QAAQ,IACb,MAAM,KAAK,gBACX,MAAM,KAAK,gBAAA,GACX,KAAK,gBAAA,GACL,KAAK,cAAc,IAAI,YAAkB,WAAW,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACxF;AAAA;AAAA,EAGQ,QAAc;AACpB,IAAK,KAAK,UACV,KAAK,QAAQ,IACb,KAAK,cAAc,IAAI,YAAkB,WAAW,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACxF;AAAA;AAAA,EAGQ,UAAgB;AACtB,IAAI,KAAK,QACP,KAAK,MAAA,IAEA,KAAK,MAAA;AAAA,EAEd;AAAA;AAAA;AAAA,EAKA,MAAc,kBAAiC;AAC7C,UAAMC,IAAU,KAAK,WACfC,IAAQ,KAAK;AACnB,QAAI,CAACD,KAAW,CAACC,EAAO;AAExB,UAAM,EAAE,GAAAC,GAAG,GAAAC,EAAA,IAAM,MAAMC,EAAgBJ,GAASC,GAAO;AAAA,MACrD,WAAW,KAAK;AAAA,MAChB,UAAU;AAAA,MACV,YAAY,CAACI,EAAO,CAAC,GAAGC,EAAA,GAAQC,EAAM,EAAE,SAAS,GAAG,CAAC;AAAA,IAAA,CACtD;AAED,WAAO,OAAON,EAAM,OAAO;AAAA,MACzB,MAAM,GAAGC,CAAC;AAAA,MACV,KAAK,GAAGC,CAAC;AAAA,IAAA,CACV;AAAA,EACH;AAAA;AAAA;AAAA,EAKQ,kBAAwB;;AAE9B,KAAAV,IADc,KAAK,cAAA,EACb,CAAC,MAAP,QAAAA,EAAU;AAAA,EACZ;AAAA;AAAA,EAGQ,gBAA+B;;AACrC,UAAMe,KAAOf,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AAC5C,YACGe,KAAA,gBAAAA,EACG,iBAAiB,EAAE,SAAS,GAAA,GAC7B;AAAA,MACC,CAACC,MACCA,aAAc,eACd,CAACA,EAAG,aAAa,UAAU,KAC3B,CAAEA,EAAyB,aAC1BA,EAAG,aAAa,MAAM,MAAM,cAC3BA,EAAG,aAAa,MAAM,MAAM,sBAC5BA,EAAG,aAAa,MAAM,MAAM,mBAC5BA,EAAG,QAAQ,YAAA,EAAc,WAAW,KAAK;AAAA,UACxB,CAAA;AAAA,EAE7B;AAAA;AAAA;AAAA,EA0EQ,cAAc;AACpB,WAAI,KAAK,SAAS,eACTC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAeFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcT;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMC,IAAa;AAAA,MACjB,SAAS;AAAA,MACT,CAAC,YAAY,KAAK,IAAI,EAAE,GAAG;AAAA,MAC3B,iBAAiB,KAAK;AAAA,IAAA;AAGxB,WAAOD;AAAA;AAAA;AAAA,gBAGKE,EAASD,CAAU,CAAC;AAAA;AAAA,qBAEf,KAAK,KAAK;AAAA;AAAA,wBAEP,OAAO,KAAK,KAAK,CAAC;AAAA,wBAClB,KAAK,QAAQ,KAAK,WAAWE,CAAO;AAAA,oBACxC,KAAK,QAAQ;AAAA,iBAChB,KAAK,mBAAmB;AAAA;AAAA,UAE/B,KAAK,aAAa;AAAA;AAAA,QAEpB,KAAK,QACHH;AAAA;AAAA,mBAES,KAAK,QAAQ;AAAA;AAAA;AAAA,2BAGL,KAAK,SAAS;AAAA;AAAA,uBAElB,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA,cAKlCG,CAAO;AAAA;AAAA,EAEf;AACF;AApTatB,EACK,SAAS,CAACuB,GAAa1B,CAAuB;AAO9D2B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BzB,EAQX,WAAA,aAAA,CAAA;AAmBAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GA1BpDzB,EA2BX,WAAA,QAAA,CAAA;AAOAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjC/BzB,EAkCX,WAAA,YAAA,CAAA;AAOAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAxC9BzB,EAyCX,WAAA,QAAA,CAAA;AAOAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA/C9BzB,EAgDX,WAAA,SAAA,CAAA;AAOAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,cAAc;AAAA,GAtDvDzB,EAuDX,WAAA,aAAA,CAAA;AAMiBwB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA7DI1B,EA6DM,WAAA,SAAA,CAAA;AASkBwB,EAAA;AAAA,EAAlCG,EAAM,kBAAkB;AAAA,GAtEd3B,EAsEwB,WAAA,aAAA,CAAA;AAGDwB,EAAA;AAAA,EAAjCG,EAAM,iBAAiB;AAAA,GAzEb3B,EAyEuB,WAAA,YAAA,CAAA;AAzEvBA,IAANwB,EAAA;AAAA,EADNI,EAAc,kBAAkB;AAAA,GACpB5B,CAAA;"}