@helixui/library 0.1.0

package/dist/shared/hx-popover-DTe00Q46.js

@@ -0,0 +1,226 @@
+import { css as w, LitElement as E, html as m } from "lit";
+import { property as a, state as A, customElement as k } from "lit/decorators.js";
+import { t as S } from "./lit-Dpo7RLp4.js";
+import { offset as C, flip as $, shift as P, arrow as D, computePosition as F } from "@floating-ui/dom";
+const L = w`
+  :host {
+    /* P2-05: display:contents lets the trigger-wrapper control layout inline;
+       position:relative was vestigial — body uses position:fixed via Floating UI */
+    display: contents;
+  }
+
+  .trigger-wrapper {
+    display: inline-block;
+  }
+
+  [part='body'] {
+    position: fixed;
+    z-index: var(--hx-popover-z-index, 9999);
+    max-width: var(--hx-popover-max-width, 320px);
+    padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));
+    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-popover-color, var(--hx-color-neutral-900, #111827));
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));
+    line-height: var(--hx-line-height-normal, 1.5);
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));
+    box-shadow: var(
+      --hx-popover-shadow,
+      var(--hx-shadow-md, 0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12)))
+    );
+    visibility: hidden;
+    opacity: 0;
+    transition:
+      opacity var(--hx-popover-transition-duration, 0.2s) ease,
+      visibility var(--hx-popover-transition-duration, 0.2s) ease;
+    word-wrap: break-word;
+  }
+
+  [part='body'].visible {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  [part='arrow'] {
+    position: absolute;
+    width: var(--hx-popover-arrow-size, 10px);
+    height: var(--hx-popover-arrow-size, 10px);
+    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    transform: rotate(45deg);
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='body'] {
+      transition: none;
+    }
+  }
+`;
+var O = Object.defineProperty, z = Object.getOwnPropertyDescriptor, n = (e, o, i, t) => {
+  for (var s = t > 1 ? void 0 : t ? z(o, i) : o, h = e.length - 1, d; h >= 0; h--)
+    (d = e[h]) && (s = (t ? d(o, i, s) : d(s)) || s);
+  return t && s && O(o, i, s), s;
+};
+let r = class extends E {
+  constructor() {
+    super(...arguments), this.open = !1, this.placement = "bottom", this.trigger = "click", this.distance = 8, this.skidding = 0, this.arrow = !1, this.label = "Popover", this._visible = !1, this._previousFocus = null, this._popoverId = `hx-popover-${crypto.randomUUID()}`, this._handleDocumentKeydown = (e) => {
+      e.key === "Escape" && this._visible && this._hide();
+    }, this._handleDocumentClick = (e) => {
+      e.target !== this && !this.contains(e.target) && this._hide();
+    }, this._handleAnchorClick = () => {
+      this.trigger === "click" && (this._visible ? this._hide() : this._show());
+    }, this._handleAnchorMouseEnter = () => {
+      this.trigger === "hover" && this._show();
+    }, this._handleAnchorMouseLeave = () => {
+      this.trigger === "hover" && this._hide();
+    }, this._handleAnchorFocusIn = () => {
+      this.trigger === "focus" && this._show();
+    }, this._handleAnchorFocusOut = () => {
+      this.trigger === "focus" && this._hide();
+    };
+  }
+  // ─── Lifecycle ───
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleDocumentClick), document.removeEventListener("keydown", this._handleDocumentKeydown);
+  }
+  firstUpdated() {
+    this._setAnchorAriaExpanded(!1), this.open && this._show();
+  }
+  updated(e) {
+    e.has("open") && (this.open ? this._show() : this._hide());
+  }
+  // ─── ARIA setup ───
+  // P2-03: collapsed _setupAnchorAria + _updateAnchorAriaExpanded into one method
+  _setAnchorAriaExpanded(e) {
+    var t;
+    const o = (t = this.shadowRoot) == null ? void 0 : t.querySelector(
+      'slot[name="anchor"]'
+    );
+    if (!o) return;
+    const i = o.assignedElements()[0];
+    i && i.setAttribute("aria-expanded", String(e));
+  }
+  // ─── Show/Hide ───
+  async _show() {
+    var o;
+    if (this._visible) return;
+    this._previousFocus = document.activeElement, this.dispatchEvent(new CustomEvent("hx-show", { bubbles: !0, composed: !0 })), this._visible = !0, this.open = !0, this._setAnchorAriaExpanded(!0), document.addEventListener("keydown", this._handleDocumentKeydown), await this.updateComplete, this.dispatchEvent(new CustomEvent("hx-after-show", { bubbles: !0, composed: !0 }));
+    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector('[part="body"]');
+    e && e.focus(), setTimeout(() => {
+      document.addEventListener("click", this._handleDocumentClick);
+    }, 0), await this._updatePosition();
+  }
+  async _hide() {
+    var e;
+    this._visible && (document.removeEventListener("click", this._handleDocumentClick), document.removeEventListener("keydown", this._handleDocumentKeydown), this.dispatchEvent(new CustomEvent("hx-hide", { bubbles: !0, composed: !0 })), this._visible = !1, this.open = !1, this._setAnchorAriaExpanded(!1), (e = this._previousFocus) == null || e.focus(), this._previousFocus = null, await this.updateComplete, this.dispatchEvent(new CustomEvent("hx-after-hide", { bubbles: !0, composed: !0 })));
+  }
+  // ─── Positioning ───
+  async _updatePosition() {
+    var c, u, v;
+    const e = (c = this.shadowRoot) == null ? void 0 : c.querySelector(
+      'slot[name="anchor"]'
+    );
+    if (!e) return;
+    const o = e.assignedElements()[0], i = (u = this.shadowRoot) == null ? void 0 : u.querySelector('[part="body"]'), t = this.arrow ? (v = this.shadowRoot) == null ? void 0 : v.querySelector('[part="arrow"]') : null;
+    if (!o || !i) return;
+    const s = [
+      C({ mainAxis: this.distance, crossAxis: this.skidding }),
+      $(),
+      P({ padding: 8 })
+    ];
+    t && s.push(D({ element: t }));
+    const { x: h, y: d, placement: x, middlewareData: p } = await F(o, i, {
+      placement: this.placement,
+      strategy: "fixed",
+      middleware: s
+    });
+    if (Object.assign(i.style, {
+      left: `${h}px`,
+      top: `${d}px`
+    }), t && p.arrow) {
+      const l = p.arrow, b = x.split("-")[0] ?? "bottom", y = { top: "bottom", right: "left", bottom: "top", left: "right" }[b] ?? "bottom";
+      Object.assign(t.style, {
+        left: l.x != null ? `${l.x}px` : "",
+        top: l.y != null ? `${l.y}px` : "",
+        right: "",
+        bottom: "",
+        [y]: "-5px"
+      });
+      const _ = ["border-top", "border-right", "border-bottom", "border-left"];
+      for (const g of _)
+        t.style.setProperty(g, "");
+      const f = {
+        bottom: ["border-bottom", "border-right"],
+        top: ["border-top", "border-left"],
+        right: ["border-top", "border-right"],
+        left: ["border-bottom", "border-left"]
+      }[b] ?? ["border-bottom", "border-right"];
+      t.style.setProperty(f[0], "1px solid transparent"), t.style.setProperty(f[1], "1px solid transparent");
+    }
+  }
+  _handleAnchorSlotChange() {
+    this._setAnchorAriaExpanded(this._visible);
+  }
+  // ─── Render ───
+  render() {
+    return m`
+      <div
+        class="trigger-wrapper"
+        @click=${this._handleAnchorClick}
+        @mouseenter=${this._handleAnchorMouseEnter}
+        @mouseleave=${this._handleAnchorMouseLeave}
+        @focusin=${this._handleAnchorFocusIn}
+        @focusout=${this._handleAnchorFocusOut}
+      >
+        <slot name="anchor" @slotchange=${this._handleAnchorSlotChange}></slot>
+      </div>
+      <div
+        part="body"
+        id=${this._popoverId}
+        role="region"
+        aria-label=${this.label}
+        aria-hidden="${this._visible ? "false" : "true"}"
+        tabindex="-1"
+        ?inert=${!this._visible}
+        class=${this._visible ? "visible" : ""}
+      >
+        <slot></slot>
+        ${this.arrow ? m`<div part="arrow"></div>` : ""}
+      </div>
+    `;
+  }
+};
+r.styles = [S, L];
+n([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "open", 2);
+n([
+  a({ type: String, reflect: !0 })
+], r.prototype, "placement", 2);
+n([
+  a({ type: String, reflect: !0 })
+], r.prototype, "trigger", 2);
+n([
+  a({ type: Number, reflect: !0 })
+], r.prototype, "distance", 2);
+n([
+  a({ type: Number, reflect: !0 })
+], r.prototype, "skidding", 2);
+n([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "arrow", 2);
+n([
+  a({ type: String, reflect: !0 })
+], r.prototype, "label", 2);
+n([
+  A()
+], r.prototype, "_visible", 2);
+r = n([
+  k("hx-popover")
+], r);
+export {
+  r as H
+};
+//# sourceMappingURL=hx-popover-DTe00Q46.js.map

package/dist/shared/hx-popover-DTe00Q46.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-popover-DTe00Q46.js","sources":["../../src/components/hx-popover/hx-popover.styles.ts","../../src/components/hx-popover/hx-popover.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPopoverStyles = css`\n  :host {\n    /* P2-05: display:contents lets the trigger-wrapper control layout inline;\n       position:relative was vestigial — body uses position:fixed via Floating UI */\n    display: contents;\n  }\n\n  .trigger-wrapper {\n    display: inline-block;\n  }\n\n  [part='body'] {\n    position: fixed;\n    z-index: var(--hx-popover-z-index, 9999);\n    max-width: var(--hx-popover-max-width, 320px);\n    padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));\n    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));\n    color: var(--hx-popover-color, var(--hx-color-neutral-900, #111827));\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));\n    line-height: var(--hx-line-height-normal, 1.5);\n    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));\n    border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));\n    box-shadow: var(\n      --hx-popover-shadow,\n      var(--hx-shadow-md, 0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12)))\n    );\n    visibility: hidden;\n    opacity: 0;\n    transition:\n      opacity var(--hx-popover-transition-duration, 0.2s) ease,\n      visibility var(--hx-popover-transition-duration, 0.2s) ease;\n    word-wrap: break-word;\n  }\n\n  [part='body'].visible {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  [part='arrow'] {\n    position: absolute;\n    width: var(--hx-popover-arrow-size, 10px);\n    height: var(--hx-popover-arrow-size, 10px);\n    background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));\n    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));\n    transform: rotate(45deg);\n    pointer-events: none;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [part='body'] {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { computePosition, flip, shift, offset, arrow } from '@floating-ui/dom';\nimport { helixPopoverStyles } from './hx-popover.styles.js';\n\ntype PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end';\n\ntype TriggerMode = 'click' | 'hover' | 'focus' | 'manual';\n\n/**\n * A popover that displays rich floating content attached to a trigger element.\n *\n * @summary Rich floating overlay attached to a trigger element.\n *\n * @tag hx-popover\n *\n * @slot anchor - The trigger element that opens the popover.\n * @slot - Default slot for popover body content.\n *\n * @csspart body - The popover body container element.\n * @csspart arrow - The arrow indicator element.\n *\n * @cssprop [--hx-popover-bg=var(--hx-color-neutral-0)] - Popover background color.\n * @cssprop [--hx-popover-color=var(--hx-color-neutral-900)] - Popover text color.\n * @cssprop [--hx-popover-font-size=var(--hx-font-size-sm)] - Popover font size.\n * @cssprop [--hx-popover-max-width=320px] - Maximum popover width.\n * @cssprop [--hx-popover-padding] - Popover padding.\n * @cssprop [--hx-popover-border-color=var(--hx-color-neutral-200)] - Popover border color.\n * @cssprop [--hx-popover-border-radius=var(--hx-border-radius-md)] - Popover border radius.\n * @cssprop [--hx-popover-shadow] - Popover box shadow.\n * @cssprop [--hx-popover-z-index=9999] - Popover z-index.\n * @cssprop [--hx-popover-transition-duration=0.2s] - Show/hide transition duration.\n * @cssprop [--hx-popover-arrow-size=10px] - Size of the arrow indicator.\n *\n * @fires hx-show - Dispatched when the popover begins to show.\n * @fires hx-after-show - Dispatched after the popover is fully visible.\n * @fires hx-hide - Dispatched when the popover begins to hide.\n * @fires hx-after-hide - Dispatched after the popover is fully hidden.\n *\n * @example\n * ```html\n * <hx-popover placement=\"bottom\" trigger=\"click\">\n *   <button slot=\"anchor\">Open Popover</button>\n *   <p>Rich popover content here.</p>\n * </hx-popover>\n * ```\n */\n@customElement('hx-popover')\nexport class HelixPopover extends LitElement {\n  static override styles = [tokenStyles, helixPopoverStyles];\n\n  /**\n   * Whether the popover is open.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Preferred placement of the popover relative to the anchor.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement: PopoverPlacement = 'bottom';\n\n  /**\n   * How the popover is triggered.\n   * @attr trigger\n   */\n  @property({ type: String, reflect: true })\n  trigger: TriggerMode = 'click';\n\n  /**\n   * Distance in pixels between the popover and the anchor.\n   * @attr distance\n   */\n  @property({ type: Number, reflect: true })\n  distance = 8;\n\n  /**\n   * Alignment offset in pixels along the anchor.\n   * @attr skidding\n   */\n  @property({ type: Number, reflect: true })\n  skidding = 0;\n\n  /**\n   * Whether to show an arrow pointing to the anchor.\n   * @attr arrow\n   */\n  @property({ type: Boolean, reflect: true })\n  arrow = false;\n\n  /**\n   * Accessible label for the popover body (sets aria-label on the dialog).\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = 'Popover';\n\n  @state() private _visible = false;\n\n  private _previousFocus: HTMLElement | null = null;\n\n  // P2-06: use crypto.randomUUID() instead of module-level mutable counter\n  private readonly _popoverId = `hx-popover-${crypto.randomUUID()}`;\n\n  // ─── Lifecycle ───\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleDocumentClick);\n    document.removeEventListener('keydown', this._handleDocumentKeydown);\n  }\n\n  override firstUpdated(): void {\n    this._setAnchorAriaExpanded(false);\n    // Sync initial open state\n    if (this.open) {\n      void this._show();\n    }\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        void this._show();\n      } else {\n        void this._hide();\n      }\n    }\n  }\n\n  // ─── ARIA setup ───\n\n  // P2-03: collapsed _setupAnchorAria + _updateAnchorAriaExpanded into one method\n  private _setAnchorAriaExpanded(value: boolean): void {\n    const anchorSlot = this.shadowRoot?.querySelector(\n      'slot[name=\"anchor\"]',\n    ) as HTMLSlotElement | null;\n    if (!anchorSlot) return;\n    const anchorEl = anchorSlot.assignedElements()[0] as HTMLElement | undefined;\n    if (anchorEl) {\n      anchorEl.setAttribute('aria-expanded', String(value));\n      // aria-controls is omitted: the body lives in Shadow DOM and axe-core\n      // cannot resolve cross-root IDREF values, which causes a critical violation.\n    }\n  }\n\n  // ─── Show/Hide ───\n\n  private async _show(): Promise<void> {\n    if (this._visible) return;\n    // P0-02: save focus target before moving focus into dialog\n    this._previousFocus = document.activeElement as HTMLElement | null;\n    this.dispatchEvent(new CustomEvent('hx-show', { bubbles: true, composed: true }));\n    this._visible = true;\n    this.open = true;\n    this._setAnchorAriaExpanded(true);\n    // P1-03: add Escape listener synchronously before any await so it is registered\n    // by the time the test fires an Escape keydown after a single await el.updateComplete.\n    document.addEventListener('keydown', this._handleDocumentKeydown);\n    await this.updateComplete;\n    // hx-after-show fires after Lit has rendered the visible state. Dispatching here\n    // (before _updatePosition) ensures it fires in the same microtask as the test's\n    // await-continuation, so tests can rely on a single await el.updateComplete.\n    this.dispatchEvent(new CustomEvent('hx-after-show', { bubbles: true, composed: true }));\n    // P0-02: move focus into dialog body\n    const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n    if (bodyEl) bodyEl.focus();\n    // P0-01: listen for outside clicks; deferred to avoid catching the opening click\n    setTimeout(() => {\n      document.addEventListener('click', this._handleDocumentClick);\n    }, 0);\n    await this._updatePosition();\n  }\n\n  private async _hide(): Promise<void> {\n    if (!this._visible) return;\n    document.removeEventListener('click', this._handleDocumentClick);\n    document.removeEventListener('keydown', this._handleDocumentKeydown);\n    this.dispatchEvent(new CustomEvent('hx-hide', { bubbles: true, composed: true }));\n    this._visible = false;\n    this.open = false;\n    this._setAnchorAriaExpanded(false);\n    // P0-02: return focus to the element that was focused before the popover opened\n    this._previousFocus?.focus();\n    this._previousFocus = null;\n    await this.updateComplete;\n    this.dispatchEvent(new CustomEvent('hx-after-hide', { bubbles: true, composed: true }));\n  }\n\n  // ─── Positioning ───\n\n  private async _updatePosition(): Promise<void> {\n    const anchorSlot = this.shadowRoot?.querySelector(\n      'slot[name=\"anchor\"]',\n    ) as HTMLSlotElement | null;\n    if (!anchorSlot) return;\n    const anchorEl = anchorSlot.assignedElements()[0] as HTMLElement | undefined;\n    const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n    const arrowEl = this.arrow\n      ? (this.shadowRoot?.querySelector('[part=\"arrow\"]') as HTMLElement | null)\n      : null;\n\n    if (!anchorEl || !bodyEl) return;\n\n    const middleware = [\n      offset({ mainAxis: this.distance, crossAxis: this.skidding }),\n      flip(),\n      shift({ padding: 8 }),\n    ];\n\n    if (arrowEl) {\n      middleware.push(arrow({ element: arrowEl }));\n    }\n\n    const { x, y, placement, middlewareData } = await computePosition(anchorEl, bodyEl, {\n      placement: this.placement,\n      strategy: 'fixed',\n      middleware,\n    });\n\n    Object.assign(bodyEl.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    if (arrowEl && middlewareData.arrow) {\n      const arrowData = middlewareData.arrow;\n      const basePlacement = placement.split('-')[0] ?? 'bottom';\n      const staticSide =\n        ({ top: 'bottom', right: 'left', bottom: 'top', left: 'right' } as Record<string, string>)[\n          basePlacement\n        ] ?? 'bottom';\n\n      Object.assign(arrowEl.style, {\n        left: arrowData.x != null ? `${arrowData.x}px` : '',\n        top: arrowData.y != null ? `${arrowData.y}px` : '',\n        right: '',\n        bottom: '',\n        [staticSide]: '-5px',\n      });\n\n      // P2-02: hide the two border sides facing the popover body so only\n      // the outward-facing corner is visible (avoids the inner border line).\n      // Reset all four sides first, then make the two inner-facing ones transparent.\n      const borderSides = ['border-top', 'border-right', 'border-bottom', 'border-left'] as const;\n      for (const side of borderSides) {\n        arrowEl.style.setProperty(side, '');\n      }\n      // Maps base placement → the two sides that face inward toward the popover body\n      const innerBorderMap: Record<string, readonly [string, string]> = {\n        bottom: ['border-bottom', 'border-right'],\n        top: ['border-top', 'border-left'],\n        right: ['border-top', 'border-right'],\n        left: ['border-bottom', 'border-left'],\n      };\n      const innerSides = innerBorderMap[basePlacement] ?? ['border-bottom', 'border-right'];\n      arrowEl.style.setProperty(innerSides[0], '1px solid transparent');\n      arrowEl.style.setProperty(innerSides[1], '1px solid transparent');\n    }\n  }\n\n  // ─── Event Handlers ───\n\n  // P1-03 / P0-01: document-level handlers active only while popover is open\n  private _handleDocumentKeydown = (e: Event): void => {\n    if ((e as KeyboardEvent).key === 'Escape' && this._visible) {\n      void this._hide();\n    }\n  };\n\n  // P0-01: close when click target is outside this component\n  private _handleDocumentClick = (e: Event): void => {\n    // Shadow DOM retargets events from within to the host at document level,\n    // so a click on the trigger wrapper appears as e.target === this.\n    if (e.target !== this && !this.contains(e.target as Node)) {\n      void this._hide();\n    }\n  };\n\n  private _handleAnchorClick = (): void => {\n    if (this.trigger !== 'click') return;\n    if (this._visible) {\n      void this._hide();\n    } else {\n      void this._show();\n    }\n  };\n\n  private _handleAnchorMouseEnter = (): void => {\n    if (this.trigger !== 'hover') return;\n    void this._show();\n  };\n\n  private _handleAnchorMouseLeave = (): void => {\n    if (this.trigger !== 'hover') return;\n    void this._hide();\n  };\n\n  private _handleAnchorFocusIn = (): void => {\n    if (this.trigger !== 'focus') return;\n    void this._show();\n  };\n\n  private _handleAnchorFocusOut = (): void => {\n    if (this.trigger !== 'focus') return;\n    void this._hide();\n  };\n\n  private _handleAnchorSlotChange(): void {\n    this._setAnchorAriaExpanded(this._visible);\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger-wrapper\"\n        @click=${this._handleAnchorClick}\n        @mouseenter=${this._handleAnchorMouseEnter}\n        @mouseleave=${this._handleAnchorMouseLeave}\n        @focusin=${this._handleAnchorFocusIn}\n        @focusout=${this._handleAnchorFocusOut}\n      >\n        <slot name=\"anchor\" @slotchange=${this._handleAnchorSlotChange}></slot>\n      </div>\n      <div\n        part=\"body\"\n        id=${this._popoverId}\n        role=\"region\"\n        aria-label=${this.label}\n        aria-hidden=\"${!this._visible ? 'true' : 'false'}\"\n        tabindex=\"-1\"\n        ?inert=${!this._visible}\n        class=${this._visible ? 'visible' : ''}\n      >\n        <slot></slot>\n        ${this.arrow ? html`<div part=\"arrow\"></div>` : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-popover': HelixPopover;\n  }\n}\n"],"names":["helixPopoverStyles","css","HelixPopover","LitElement","changedProperties","value","anchorSlot","_a","anchorEl","bodyEl","_b","arrowEl","_c","middleware","offset","flip","shift","arrow","x","y","placement","middlewareData","computePosition","arrowData","basePlacement","staticSide","borderSides","side","innerSides","html","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-popup-5O6q0jf1.js

@@ -0,0 +1,200 @@
+import { css as b, LitElement as v, html as d } from "lit";
+import { property as r, customElement as x } from "lit/decorators.js";
+import { t as g } from "./lit-Dpo7RLp4.js";
+import { autoUpdate as w, offset as _, autoPlacement as S, flip as A, shift as z, arrow as P, size as E, computePosition as k } from "@floating-ui/dom";
+const U = b`
+  :host {
+    display: inline-block;
+  }
+
+  [part='popup'] {
+    position: fixed;
+    z-index: var(--hx-popup-z-index, 9000);
+    inset: 0 auto auto 0;
+    box-sizing: border-box;
+    transition: var(--hx-popup-transition, none);
+  }
+
+  :host(:not([active])) [part='popup'] {
+    display: none;
+  }
+
+  [part='arrow'] {
+    position: absolute;
+    width: var(--hx-arrow-size, 8px);
+    height: var(--hx-arrow-size, 8px);
+    background: var(--hx-arrow-color, var(--hx-color-surface-overlay, #ffffff));
+    transform: rotate(45deg);
+    pointer-events: none;
+  }
+`;
+var C = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, a = (t, o, e, i) => {
+  for (var n = i > 1 ? void 0 : i ? $(o, e) : o, p = t.length - 1, l; p >= 0; p--)
+    (l = t[p]) && (n = (i ? l(o, e, n) : l(n)) || n);
+  return i && n && C(o, e, n), n;
+};
+let s = class extends v {
+  constructor() {
+    super(...arguments), this._anchorSlotEl = null, this._cleanupAutoUpdate = null, this.anchor = null, this.placement = "bottom", this.active = !1, this.distance = 0, this.skidding = 0, this.arrow = !1, this.arrowPlacement = null, this.arrowPadding = 10, this.flip = !1, this.flipFallbackPlacements = [], this.shift = !1, this.autoSize = !1, this.strategy = "fixed";
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.active && this.updateComplete.then(() => this._startAutoUpdate());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._stopAutoUpdate();
+  }
+  updated(t) {
+    super.updated(t);
+    const o = t.has("active"), e = t.has("placement") || t.has("distance") || t.has("skidding") || t.has("arrow") || t.has("arrowPadding") || t.has("arrowPlacement") || t.has("flip") || t.has("flipFallbackPlacements") || t.has("shift") || t.has("autoSize") || t.has("anchor") || t.has("strategy");
+    o ? this.active ? this._startAutoUpdate() : (this._stopAutoUpdate(), this.autoSize && (this.style.removeProperty("--hx-auto-size-available-width"), this.style.removeProperty("--hx-auto-size-available-height"))) : e && this.active && this._reposition(), t.has("autoSize") && !this.autoSize && (this.style.removeProperty("--hx-auto-size-available-width"), this.style.removeProperty("--hx-auto-size-available-height"));
+  }
+  // ─── Anchor Resolution ───
+  _getAnchorElement() {
+    return this.anchor instanceof Element ? this.anchor : typeof this.anchor == "string" ? this.getRootNode().querySelector(this.anchor) : this._anchorSlotEl;
+  }
+  _handleAnchorSlotChange(t) {
+    const e = t.target.assignedElements();
+    this._anchorSlotEl = e[0] ?? null, this.active && this._reposition();
+  }
+  // ─── Positioning ───
+  _startAutoUpdate() {
+    var e;
+    this._stopAutoUpdate();
+    const t = this._getAnchorElement(), o = (e = this.shadowRoot) == null ? void 0 : e.querySelector('[part="popup"]');
+    !t || !o || (this._cleanupAutoUpdate = w(t, o, () => {
+      this._reposition();
+    }));
+  }
+  _stopAutoUpdate() {
+    var t;
+    (t = this._cleanupAutoUpdate) == null || t.call(this), this._cleanupAutoUpdate = null;
+  }
+  async _reposition() {
+    var u, f;
+    const t = this._getAnchorElement(), o = (u = this.shadowRoot) == null ? void 0 : u.querySelector('[part="popup"]');
+    if (!t || !o) return;
+    const e = this.arrow ? ((f = this.shadowRoot) == null ? void 0 : f.querySelector('[part="arrow"]')) ?? null : null, i = [
+      _({ mainAxis: this.distance, crossAxis: this.skidding })
+    ];
+    this.placement === "auto" ? i.push(S()) : this.flip && i.push(
+      A({
+        fallbackPlacements: this.flipFallbackPlacements
+      })
+    ), this.shift && i.push(z({ padding: 8 })), e && i.push(P({ element: e, padding: this.arrowPadding })), this.autoSize && i.push(
+      E({
+        apply: ({ availableWidth: h, availableHeight: y }) => {
+          this.style.setProperty("--hx-auto-size-available-width", `${h}px`), this.style.setProperty("--hx-auto-size-available-height", `${y}px`);
+        }
+      })
+    );
+    const n = this.placement === "auto" ? "bottom" : this.placement;
+    o.style.position = this.strategy;
+    const { x: p, y: l, placement: c, middlewareData: m } = await k(t, o, {
+      placement: n,
+      strategy: this.strategy,
+      middleware: i
+    });
+    if (Object.assign(o.style, {
+      left: `${p}px`,
+      top: `${l}px`
+    }), e) {
+      const h = m.arrow;
+      this._positionArrow(e, c, h);
+    }
+    this.dispatchEvent(new CustomEvent("hx-reposition", { bubbles: !0, composed: !0 }));
+  }
+  _positionArrow(t, o, e) {
+    const i = o.split("-")[0], p = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right"
+    }[i], l = {
+      left: "",
+      top: "",
+      right: "",
+      bottom: ""
+    };
+    this.arrowPlacement === "start" || this.arrowPlacement === "end" ? i === "top" || i === "bottom" ? l[this.arrowPlacement === "start" ? "left" : "right"] = `${this.arrowPadding}px` : l[this.arrowPlacement === "start" ? "top" : "bottom"] = `${this.arrowPadding}px` : ((e == null ? void 0 : e.x) != null && (l.left = `${e.x}px`), (e == null ? void 0 : e.y) != null && (l.top = `${e.y}px`)), l[p] = "-4px", t.setAttribute("data-placement", i), Object.assign(t.style, l);
+  }
+  // ─── Public API ───
+  /**
+   * Forces the popup to recalculate its position.
+   */
+  async reposition() {
+    await this._reposition();
+  }
+  // ─── Render ───
+  render() {
+    return d`
+      <slot name="anchor" @slotchange=${this._handleAnchorSlotChange}></slot>
+      <div part="popup" ?inert=${!this.active}>
+        <slot></slot>
+        ${this.arrow ? d`<div part="arrow"></div>` : ""}
+      </div>
+    `;
+  }
+};
+s.styles = [g, U];
+a([
+  r({ attribute: "anchor" })
+], s.prototype, "anchor", 2);
+a([
+  r({ type: String, reflect: !0 })
+], s.prototype, "placement", 2);
+a([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "active", 2);
+a([
+  r({ type: Number, reflect: !0 })
+], s.prototype, "distance", 2);
+a([
+  r({ type: Number, reflect: !0 })
+], s.prototype, "skidding", 2);
+a([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "arrow", 2);
+a([
+  r({ attribute: "arrow-placement", reflect: !0 })
+], s.prototype, "arrowPlacement", 2);
+a([
+  r({ type: Number, attribute: "arrow-padding" })
+], s.prototype, "arrowPadding", 2);
+a([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "flip", 2);
+a([
+  r({
+    attribute: "flip-fallback-placements",
+    converter: {
+      fromAttribute(t) {
+        if (!t) return [];
+        try {
+          return JSON.parse(t);
+        } catch {
+          return [];
+        }
+      },
+      toAttribute(t) {
+        return JSON.stringify(t);
+      }
+    }
+  })
+], s.prototype, "flipFallbackPlacements", 2);
+a([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "shift", 2);
+a([
+  r({ type: Boolean, attribute: "auto-size", reflect: !0 })
+], s.prototype, "autoSize", 2);
+a([
+  r({ reflect: !0 })
+], s.prototype, "strategy", 2);
+s = a([
+  x("hx-popup")
+], s);
+export {
+  s as H
+};
+//# sourceMappingURL=hx-popup-5O6q0jf1.js.map

package/dist/shared/hx-popup-5O6q0jf1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-popup-5O6q0jf1.js","sources":["../../src/components/hx-popup/hx-popup.styles.ts","../../src/components/hx-popup/hx-popup.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPopupStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  [part='popup'] {\n    position: fixed;\n    z-index: var(--hx-popup-z-index, 9000);\n    inset: 0 auto auto 0;\n    box-sizing: border-box;\n    transition: var(--hx-popup-transition, none);\n  }\n\n  :host(:not([active])) [part='popup'] {\n    display: none;\n  }\n\n  [part='arrow'] {\n    position: absolute;\n    width: var(--hx-arrow-size, 8px);\n    height: var(--hx-arrow-size, 8px);\n    background: var(--hx-arrow-color, var(--hx-color-surface-overlay, #ffffff));\n    transform: rotate(45deg);\n    pointer-events: none;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport {\n  computePosition,\n  flip as flipMiddleware,\n  shift as shiftMiddleware,\n  offset as offsetMiddleware,\n  arrow as arrowMiddleware,\n  autoUpdate,\n  size as sizeMiddleware,\n  autoPlacement as autoPlacementMiddleware,\n} from '@floating-ui/dom';\nimport type { Placement, Middleware } from '@floating-ui/dom';\nimport { helixPopupStyles } from './hx-popup.styles.js';\n\ntype PopupPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'auto';\n\ntype ArrowPlacement = 'start' | 'center' | 'end';\n\n// More precise type matching @floating-ui/dom's arrow middleware data structure\ntype ArrowData = { x?: number; y?: number; centerOffset: number };\n\n/**\n * A low-level positioning primitive that anchors a floating panel to a reference element.\n * This is the base that hx-tooltip, hx-dropdown, and hx-popover build upon.\n *\n * @summary Low-level popup positioning utility.\n *\n * @tag hx-popup\n *\n * @slot anchor - The reference element the popup is anchored to.\n * @slot - Default slot for popup content.\n *\n * @csspart popup - The popup container element.\n * @csspart arrow - The arrow indicator element (only present when `arrow` is true).\n *\n * @cssprop [--hx-popup-z-index=9000] - Z-index of the popup container.\n * @cssprop [--hx-popup-transition=none] - Transition applied to the popup element.\n *   Consumers who need enter/exit animations can set this property AND override the\n *   default `display: none` hide mechanism via `::part(popup)`. Example:\n *   ```css\n *   hx-popup { --hx-popup-transition: opacity 0.2s ease; }\n *   hx-popup:not([active])::part(popup) { display: block; opacity: 0; pointer-events: none; }\n *   hx-popup[active]::part(popup) { opacity: 1; }\n *   ```\n * @cssprop [--hx-arrow-size=8px] - Size of the arrow element.\n * @cssprop [--hx-arrow-color=var(--hx-color-surface-overlay, #ffffff)] - Color of the arrow element.\n * @cssprop --hx-auto-size-available-width - Available width set by auto-size middleware (on :host).\n * @cssprop --hx-auto-size-available-height - Available height set by auto-size middleware (on :host).\n *\n * @fires {CustomEvent} hx-reposition - Emitted after the popup is repositioned.\n *\n * ## Accessibility Contract\n *\n * `hx-popup` is a **positioning utility**, not an interactive widget. It does not provide\n * ARIA semantics. Consumers are responsible for all accessibility:\n *\n * - **Popup role**: Add `role=\"tooltip\"`, `role=\"dialog\"`, `role=\"listbox\"`, etc. to the\n *   slotted popup content depending on its purpose.\n * - **Trigger state**: The element that triggers the popup MUST set `aria-expanded=\"true/false\"`.\n * - **Association**: Use `aria-controls` on the trigger to reference the popup content element,\n *   and `aria-labelledby` / `aria-describedby` as appropriate.\n * - **Focus management**: `hx-popup` does NOT trap focus. Consumers building dialogs or menus\n *   MUST implement focus trapping and keyboard dismiss (Escape key) themselves.\n * - **Visibility**: The popup is hidden via `display: none` (CSS) and the `inert` attribute\n *   when inactive. Both are reliable accessibility-tree hiding mechanisms.\n *\n * @example\n * ```html\n * <!-- Tooltip pattern -->\n * <hx-popup id=\"my-tooltip\" placement=\"bottom\" distance=\"8\">\n *   <button\n *     slot=\"anchor\"\n *     aria-describedby=\"tooltip-content\"\n *     aria-expanded=\"false\"\n *     aria-controls=\"my-tooltip\"\n *   >\n *     Trigger\n *   </button>\n *   <div id=\"tooltip-content\" role=\"tooltip\">Tooltip text</div>\n * </hx-popup>\n * ```\n *\n * ## Drupal Integration\n *\n * `hx-popup` is a JS utility — Twig provides markup only. No Drupal behavior file is\n * required for basic usage, since the `anchor` slot and `active` attribute are sufficient.\n *\n * ```twig\n * {# Basic Twig usage — prefer anchor slot in server-rendered contexts #}\n * <hx-popup id=\"my-popup\" placement=\"bottom\" distance=\"8\">\n *   <button\n *     slot=\"anchor\"\n *     aria-expanded=\"false\"\n *     aria-controls=\"popup-content\"\n *   >Open</button>\n *   <div id=\"popup-content\" role=\"dialog\" aria-label=\"Popup content\">...</div>\n * </hx-popup>\n * ```\n *\n * ```js\n * // Drupal behavior for toggle interaction\n * Drupal.behaviors.helixPopup = {\n *   attach(context) {\n *     context.querySelectorAll('hx-popup').forEach((popup) => {\n *       const trigger = popup.querySelector('[slot=\"anchor\"]');\n *       if (!trigger) return;\n *       trigger.addEventListener('click', () => {\n *         popup.active = !popup.active;\n *         trigger.setAttribute('aria-expanded', String(popup.active));\n *       });\n *     });\n *   },\n * };\n * ```\n *\n * For Drupal-generated dynamic IDs, prefer the anchor **slot** over the `anchor` CSS selector\n * attribute, since slot-based anchoring does not require knowing the element's ID at render time.\n * If you must use the CSS selector form with dynamic IDs, pass the ID via a Twig variable:\n * ```twig\n * <hx-popup anchor=\"#{{ element['#id'] }}\" placement=\"bottom\">...</hx-popup>\n * ```\n */\n@customElement('hx-popup')\nexport class HelixPopup extends LitElement {\n  static override styles = [tokenStyles, helixPopupStyles];\n\n  private _anchorSlotEl: Element | null = null;\n  private _cleanupAutoUpdate: (() => void) | null = null;\n\n  /**\n   * The reference element to anchor the popup to.\n   *\n   * - **Attribute form** (`anchor=\"#selector\"`): Accepts a CSS selector string resolved via\n   *   `querySelector` from the component's root node. Use this in HTML/Twig markup.\n   * - **Property form** (`el.anchor = element`): Accepts an `Element` reference directly.\n   *   Setting an Element via JS property does NOT reflect to the attribute.\n   *\n   * If not set, the element in the `anchor` slot is used.\n   *\n   * @attr anchor\n   */\n  @property({ attribute: 'anchor' })\n  anchor: string | Element | null = null;\n\n  /**\n   * Preferred placement of the popup relative to the anchor.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement: PopupPlacement = 'bottom';\n\n  /**\n   * Whether the popup is visible.\n   * @attr active\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Gap in pixels between the popup and the anchor element.\n   * @attr distance\n   */\n  @property({ type: Number, reflect: true })\n  distance = 0;\n\n  /**\n   * Offset in pixels along the anchor element's axis.\n   * @attr skidding\n   */\n  @property({ type: Number, reflect: true })\n  skidding = 0;\n\n  /**\n   * Whether to show an arrow pointing to the anchor element.\n   * @attr arrow\n   */\n  @property({ type: Boolean, reflect: true })\n  arrow = false;\n\n  /**\n   * Manual placement of the arrow along the popup edge.\n   * When not set, floating-ui calculates the optimal position.\n   * @attr arrow-placement\n   */\n  @property({ attribute: 'arrow-placement', reflect: true })\n  arrowPlacement: ArrowPlacement | null = null;\n\n  /**\n   * Minimum padding in pixels from the popup edge to the arrow.\n   * @attr arrow-padding\n   */\n  @property({ type: Number, attribute: 'arrow-padding' })\n  arrowPadding = 10;\n\n  /**\n   * When true, flips the popup to the opposite side to avoid overflow.\n   * @attr flip\n   */\n  @property({ type: Boolean, reflect: true })\n  flip = false;\n\n  /**\n   * Fallback placements to try when flipping. Accepts a JSON array string.\n   *\n   * @example\n   * ```html\n   * <!-- Try \"top\" then \"left\" before giving up -->\n   * <hx-popup flip flip-fallback-placements='[\"top\",\"left\"]'>...</hx-popup>\n   * ```\n   *\n   * @attr flip-fallback-placements\n   */\n  @property({\n    attribute: 'flip-fallback-placements',\n    converter: {\n      fromAttribute(value: string | null): PopupPlacement[] {\n        if (!value) return [];\n        try {\n          return JSON.parse(value) as PopupPlacement[];\n        } catch {\n          return [];\n        }\n      },\n      toAttribute(value: PopupPlacement[]): string {\n        return JSON.stringify(value);\n      },\n    },\n  })\n  flipFallbackPlacements: PopupPlacement[] = [];\n\n  /**\n   * When true, shifts the popup along the axis to remain in the viewport.\n   * @attr shift\n   */\n  @property({ type: Boolean, reflect: true })\n  shift = false;\n\n  /**\n   * When true, resizes the popup to fit within the viewport.\n   * Sets --hx-auto-size-available-width and --hx-auto-size-available-height CSS custom\n   * properties on `:host` so they cascade into shadow DOM and are readable from light DOM.\n   * @attr auto-size\n   */\n  @property({ type: Boolean, attribute: 'auto-size', reflect: true })\n  autoSize = false;\n\n  /**\n   * Positioning strategy passed to floating-ui's `computePosition`.\n   *\n   * - `'fixed'` (default): works for most cases; positions relative to the viewport.\n   * - `'absolute'`: use inside `overflow: hidden` / scroll containers where the popup is\n   *   positioned relative to the nearest positioned ancestor instead of the viewport.\n   *\n   * @attr strategy\n   */\n  @property({ reflect: true })\n  strategy: 'fixed' | 'absolute' = 'fixed';\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.active) {\n      void this.updateComplete.then(() => this._startAutoUpdate());\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._stopAutoUpdate();\n  }\n\n  override updated(changedProperties: Map<string | symbol, unknown>): void {\n    super.updated(changedProperties);\n\n    const activeChanged = changedProperties.has('active');\n    const positioningChanged =\n      changedProperties.has('placement') ||\n      changedProperties.has('distance') ||\n      changedProperties.has('skidding') ||\n      changedProperties.has('arrow') ||\n      changedProperties.has('arrowPadding') ||\n      changedProperties.has('arrowPlacement') ||\n      changedProperties.has('flip') ||\n      changedProperties.has('flipFallbackPlacements') ||\n      changedProperties.has('shift') ||\n      changedProperties.has('autoSize') ||\n      changedProperties.has('anchor') ||\n      changedProperties.has('strategy');\n\n    if (activeChanged) {\n      if (this.active) {\n        this._startAutoUpdate();\n      } else {\n        this._stopAutoUpdate();\n        // Clean up autoSize custom properties when popup goes inactive\n        if (this.autoSize) {\n          this.style.removeProperty('--hx-auto-size-available-width');\n          this.style.removeProperty('--hx-auto-size-available-height');\n        }\n      }\n    } else if (positioningChanged && this.active) {\n      void this._reposition();\n    }\n\n    // Remove stale autoSize properties when autoSize is disabled\n    if (changedProperties.has('autoSize') && !this.autoSize) {\n      this.style.removeProperty('--hx-auto-size-available-width');\n      this.style.removeProperty('--hx-auto-size-available-height');\n    }\n  }\n\n  // ─── Anchor Resolution ───\n\n  private _getAnchorElement(): Element | null {\n    if (this.anchor instanceof Element) {\n      return this.anchor;\n    }\n    if (typeof this.anchor === 'string') {\n      return (this.getRootNode() as Document | ShadowRoot).querySelector(this.anchor);\n    }\n    return this._anchorSlotEl;\n  }\n\n  private _handleAnchorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const assigned = slot.assignedElements();\n    this._anchorSlotEl = assigned[0] ?? null;\n    if (this.active) {\n      void this._reposition();\n    }\n  }\n\n  // ─── Positioning ───\n\n  private _startAutoUpdate(): void {\n    this._stopAutoUpdate();\n    const anchorEl = this._getAnchorElement();\n    const popupEl = this.shadowRoot?.querySelector<HTMLElement>('[part=\"popup\"]');\n    if (!anchorEl || !popupEl) return;\n\n    this._cleanupAutoUpdate = autoUpdate(anchorEl, popupEl, () => {\n      void this._reposition();\n    });\n  }\n\n  private _stopAutoUpdate(): void {\n    this._cleanupAutoUpdate?.();\n    this._cleanupAutoUpdate = null;\n  }\n\n  private async _reposition(): Promise<void> {\n    const anchorEl = this._getAnchorElement();\n    const popupEl = this.shadowRoot?.querySelector<HTMLElement>('[part=\"popup\"]');\n    if (!anchorEl || !popupEl) return;\n\n    const arrowEl = this.arrow\n      ? (this.shadowRoot?.querySelector<HTMLElement>('[part=\"arrow\"]') ?? null)\n      : null;\n\n    const middleware: Middleware[] = [\n      offsetMiddleware({ mainAxis: this.distance, crossAxis: this.skidding }),\n    ];\n\n    if (this.placement === 'auto') {\n      middleware.push(autoPlacementMiddleware());\n    } else if (this.flip) {\n      middleware.push(\n        flipMiddleware({\n          fallbackPlacements: this.flipFallbackPlacements as Placement[],\n        }),\n      );\n    }\n\n    if (this.shift) {\n      middleware.push(shiftMiddleware({ padding: 8 }));\n    }\n\n    if (arrowEl) {\n      middleware.push(arrowMiddleware({ element: arrowEl, padding: this.arrowPadding }));\n    }\n\n    if (this.autoSize) {\n      middleware.push(\n        sizeMiddleware({\n          apply: ({ availableWidth, availableHeight }) => {\n            // Set on :host so the custom properties cascade into shadow DOM and\n            // are accessible from light DOM consumers via CSS inheritance.\n            this.style.setProperty('--hx-auto-size-available-width', `${availableWidth}px`);\n            this.style.setProperty('--hx-auto-size-available-height', `${availableHeight}px`);\n          },\n        }),\n      );\n    }\n\n    const effectivePlacement: Placement =\n      this.placement === 'auto' ? 'bottom' : (this.placement as Placement);\n\n    // Set position strategy before computing — inline style takes precedence over CSS\n    popupEl.style.position = this.strategy;\n\n    const { x, y, placement, middlewareData } = await computePosition(anchorEl, popupEl, {\n      placement: effectivePlacement,\n      strategy: this.strategy,\n      middleware,\n    });\n\n    Object.assign(popupEl.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n\n    if (arrowEl) {\n      const arrowData = middlewareData.arrow as ArrowData | undefined;\n      this._positionArrow(arrowEl, placement, arrowData);\n    }\n\n    this.dispatchEvent(new CustomEvent('hx-reposition', { bubbles: true, composed: true }));\n  }\n\n  private _positionArrow(\n    arrowEl: HTMLElement,\n    placement: Placement,\n    arrowData: ArrowData | undefined,\n  ): void {\n    const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n    const staticSides = {\n      top: 'bottom',\n      right: 'left',\n      bottom: 'top',\n      left: 'right',\n    } as const;\n    const staticSide = staticSides[basePlacement];\n\n    const arrowStyle: Record<string, string> = {\n      left: '',\n      top: '',\n      right: '',\n      bottom: '',\n    };\n\n    if (this.arrowPlacement === 'start' || this.arrowPlacement === 'end') {\n      const isVertical = basePlacement === 'top' || basePlacement === 'bottom';\n      if (isVertical) {\n        arrowStyle[this.arrowPlacement === 'start' ? 'left' : 'right'] = `${this.arrowPadding}px`;\n      } else {\n        arrowStyle[this.arrowPlacement === 'start' ? 'top' : 'bottom'] = `${this.arrowPadding}px`;\n      }\n    } else {\n      // 'center' or null: use floating-ui computed position\n      if (arrowData?.x != null) arrowStyle.left = `${arrowData.x}px`;\n      if (arrowData?.y != null) arrowStyle.top = `${arrowData.y}px`;\n    }\n\n    arrowStyle[staticSide] = '-4px';\n    arrowEl.setAttribute('data-placement', basePlacement);\n    Object.assign(arrowEl.style, arrowStyle);\n  }\n\n  // ─── Public API ───\n\n  /**\n   * Forces the popup to recalculate its position.\n   */\n  async reposition(): Promise<void> {\n    await this._reposition();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <slot name=\"anchor\" @slotchange=${this._handleAnchorSlotChange}></slot>\n      <div part=\"popup\" ?inert=${!this.active}>\n        <slot></slot>\n        ${this.arrow ? html`<div part=\"arrow\"></div>` : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-popup': HelixPopup;\n  }\n}\n"],"names":["helixPopupStyles","css","HelixPopup","LitElement","changedProperties","activeChanged","positioningChanged","e","assigned","anchorEl","popupEl","_a","autoUpdate","arrowEl","_b","middleware","offsetMiddleware","autoPlacementMiddleware","flipMiddleware","shiftMiddleware","arrowMiddleware","sizeMiddleware","availableWidth","availableHeight","effectivePlacement","x","y","placement","middlewareData","computePosition","arrowData","basePlacement","staticSide","arrowStyle","html","tokenStyles","__decorateClass","property","value","customElement"],"mappings":"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"}