@luzmo/lucero 1.0.1-alpha.3 → 1.0.1-alpha.31

package/components/overlay-DpWon1Rp.js

@@ -0,0 +1,1736 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { unsafeCSS as te, html as x } from "lit";
+import { property as y, query as X, queryAssignedElements as ie, state as se } from "lit/decorators.js";
+import { ifDefined as k } from "lit/directives/if-defined.js";
+import { styleMap as V } from "lit/directives/style-map.js";
+import { r as I } from "./random-id-ByCz1xaq.js";
+import { E as oe, e as ne } from "./element-resolution-FCUT-wql.js";
+import { a as re } from "./base-CdYjmV_8.js";
+import { u as O } from "./focusable-selectors-B4YgbghQ.js";
+import { autoUpdate as j, flip as G, offset as ae, shift as le, size as he, arrow as ce, computePosition as pe } from "@floating-ui/dom";
+import { S as de, r as ue } from "./slottable-request-event-DggLA4Rx.js";
+import { c as _ } from "./condition-attribute-with-id-Dv4lSRbe.js";
+import { f as Y, c as me, j as ge } from "./platform-CqwNrovd.js";
+function fe(a, e, t = []) {
+  for (const [i, s] of e.entries()) {
+    const n = a[i], r = n.parentElement || n.getRootNode();
+    t[i] && t[i](s), r && r !== n && n.replaceWith(s), delete a[i];
+  }
+  return e;
+}
+const ve = (a, e, {
+  position: t,
+  prepareCallback: i
+} = { position: "beforeend" }) => {
+  let { length: s } = a;
+  if (s === 0)
+    return () => a;
+  let n = 1, r = 0;
+  (t === "afterbegin" || t === "afterend") && (n = -1, r = s - 1);
+  const o = new Array(s), h = new Array(s), p = typeof document < "u" ? document.createComment("placeholder for reparented element") : null;
+  do {
+    const l = a[r];
+    i && (h[r] = i(l)), o[r] = p.cloneNode();
+    const c = l.parentElement || l.getRootNode();
+    c && c !== l && c.replaceChild(o[r], l), e.insertAdjacentElement(t, l), r += n;
+  } while (--s > 0);
+  return function() {
+    return fe(o, a, h);
+  };
+}, ye = 1e3, be = 1e3;
+class we {
+  constructor(e = {}) {
+    this.warmUpDelay = ye, this.coolDownDelay = be, this.isWarm = !1, this.timeout = 0, Object.assign(this, e);
+  }
+  openTimer(e) {
+    if (this.cancelCooldownTimer(), !this.component || e !== this.component)
+      return this.component && (this.close(this.component), this.cancelCooldownTimer()), this.component = e, this.isWarm ? Promise.resolve(!1) : (this.promise = new Promise((t) => {
+        this.resolve = t, this.timeout = typeof window < "u" ? window.setTimeout(() => {
+          this.resolve && (this.resolve(!1), this.isWarm = !0);
+        }, this.warmUpDelay) : 0;
+      }), this.promise);
+    if (this.promise)
+      return this.promise;
+    throw new Error("Inconsistent state");
+  }
+  close(e) {
+    this.component && this.component === e && (this.resetCooldownTimer(), this.timeout > 0 && (clearTimeout(this.timeout), this.timeout = 0), this.resolve && (this.resolve(!0), delete this.resolve), delete this.promise, delete this.component);
+  }
+  resetCooldownTimer() {
+    this.isWarm && (this.cooldownTimeout && typeof window < "u" && window.clearTimeout(this.cooldownTimeout), this.cooldownTimeout = typeof window < "u" ? window.setTimeout(() => {
+      this.isWarm = !1, delete this.cooldownTimeout;
+    }, this.coolDownDelay) : void 0);
+  }
+  cancelCooldownTimer() {
+    this.cooldownTimeout && typeof window < "u" && window.clearTimeout(this.cooldownTimeout), delete this.cooldownTimeout;
+  }
+}
+const A = new we(), E = () => {
+}, $ = (a, e, t) => {
+  const i = new AbortController(), s = /* @__PURE__ */ new Map(), n = () => {
+    i.abort(), t();
+  };
+  let r, o;
+  const h = requestAnimationFrame(() => {
+    r = requestAnimationFrame(() => {
+      o = requestAnimationFrame(() => {
+        n();
+      });
+    });
+  }), p = (c) => {
+    c.target === a && (s.set(
+      c.propertyName,
+      s.get(c.propertyName) - 1
+    ), s.get(c.propertyName) || s.delete(c.propertyName), s.size === 0 && n());
+  }, l = (c) => {
+    c.target === a && (s.has(c.propertyName) || s.set(c.propertyName, 0), s.set(
+      c.propertyName,
+      s.get(c.propertyName) + 1
+    ), cancelAnimationFrame(h), cancelAnimationFrame(r), cancelAnimationFrame(o));
+  };
+  a.addEventListener("transitionrun", l, {
+    signal: i.signal
+  }), a.addEventListener("transitionend", p, {
+    signal: i.signal
+  }), a.addEventListener("transitioncancel", p, {
+    signal: i.signal
+  }), e();
+};
+function f() {
+  return new Promise((a) => requestAnimationFrame(() => a()));
+}
+class P extends re {
+  constructor() {
+    super(...arguments), this.dispose = E, this.offset = 0, this.willPreventClose = !1;
+  }
+  applyFocus(e, t) {
+  }
+  /* c8 ignore next 6 */
+  get delayed() {
+    return !1;
+  }
+  set delayed(e) {
+  }
+  /* c8 ignore next 6 */
+  get disabled() {
+    return !1;
+  }
+  set disabled(e) {
+  }
+  get elementResolver() {
+    return this._elementResolver;
+  }
+  set elementResolver(e) {
+    this._elementResolver = e;
+  }
+  /* c8 ignore next 3 */
+  ensureOnDOM(e) {
+  }
+  /* c8 ignore next 5 */
+  makeTransition(e) {
+    return null;
+  }
+  manageDelay(e) {
+  }
+  /* c8 ignore next 3 */
+  manageDialogOpen() {
+  }
+  /* c8 ignore next 3 */
+  managePopoverOpen() {
+  }
+  /* c8 ignore next 3 */
+  managePosition() {
+  }
+  /* c8 ignore next 6 */
+  get open() {
+    return !1;
+  }
+  set open(e) {
+  }
+  get placementController() {
+    return this._placementController;
+  }
+  set placementController(e) {
+    this._placementController = e;
+  }
+  requestSlottable() {
+  }
+  returnFocus() {
+  }
+  /* c8 ignore next 6 */
+  get state() {
+    return "closed";
+  }
+  set state(e) {
+  }
+  /* c8 ignore next 3 */
+  manuallyKeepOpen() {
+  }
+  static update() {
+    const e = new CustomEvent("luzmo-update-overlays", {
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0
+    });
+    document.dispatchEvent(e);
+  }
+  static async open(e, t, i, s) {
+    await Promise.resolve().then(() => q);
+    const n = arguments.length === 2, r = i || e, o = new this();
+    let h = !1;
+    const p = ve([r], o, {
+      position: "beforeend",
+      prepareCallback: (g) => {
+        const w = g.slot;
+        return g.removeAttribute("slot"), () => {
+          g.slot = w;
+        };
+      }
+    });
+    if (o.dispose = () => {
+      o.addEventListener("luzmo-closed", () => {
+        h || (p(), h = !0), requestAnimationFrame(() => {
+          o.remove();
+        });
+      }), o.open = !1, o.dispose = E;
+    }, !n && r && s) {
+      const g = e, w = t, m = s;
+      return P.applyOptions(o, {
+        ...m,
+        delayed: m.delayed || r.hasAttribute("delayed"),
+        trigger: m.virtualTrigger || g,
+        type: w === "modal" ? "modal" : w === "hover" ? "hint" : "auto"
+      }), g.after(o), await o.updateComplete, o.open = !0, o.dispose;
+    }
+    const c = t;
+    return o.append(r), P.applyOptions(o, {
+      ...c,
+      delayed: c.delayed || r.hasAttribute("delayed")
+    }), o.updateComplete.then(() => {
+      o.open = !0;
+    }), o;
+  }
+  static applyOptions(e, t) {
+    e.delayed = !!t.delayed, e.receivesFocus = t.receivesFocus ?? "auto", e.triggerElement = t.trigger || null, e.type = t.type || "modal", e.offset = t.offset ?? 0, e.placement = t.placement, e.willPreventClose = !!t.notImmediatelyClosable;
+  }
+}
+const H = (a) => a.querySelector(
+  O
+), U = (a) => a.assignedElements().find((t) => t.matches(O));
+class M extends Event {
+  constructor() {
+    super("beforetoggle", {
+      bubbles: !1,
+      composed: !1
+    }), this.currentState = "open", this.newState = "closed";
+  }
+}
+class W extends Event {
+  constructor() {
+    super("beforetoggle", {
+      bubbles: !1,
+      composed: !1
+    }), this.currentState = "closed", this.newState = "open";
+  }
+}
+class v extends Event {
+  constructor(e, t, {
+    publish: i,
+    interaction: s,
+    reason: n
+  }) {
+    super(e, {
+      bubbles: i,
+      composed: i
+    }), this.overlay = t, this.detail = {
+      interaction: s,
+      reason: n
+    };
+  }
+}
+class S {
+  constructor(e, t) {
+    this.x = 0, this.y = 0, this.x = e, this.y = t;
+  }
+  updateBoundingClientRect(e, t) {
+    this.x = e, this.y = t, P.update();
+  }
+  getBoundingClientRect() {
+    return {
+      width: 0,
+      height: 0,
+      top: this.y,
+      right: this.x,
+      y: this.y,
+      x: this.x,
+      bottom: this.y,
+      left: this.x,
+      /* c8 ignore next 3 */
+      toJSON() {
+      }
+    };
+  }
+}
+function Ee(a) {
+  class e extends a {
+    async manageDialogOpen() {
+      const i = this.open;
+      if (await f(), await this.managePosition(), this.open !== i)
+        return;
+      const s = await this.dialogMakeTransition(i);
+      this.open === i && await this.dialogApplyFocus(i, s);
+    }
+    dialogMakeTransition(i) {
+      let s = null;
+      const n = (o, h) => () => {
+        if (o.open = i, !i) {
+          const l = () => {
+            o.removeEventListener("close", l);
+          };
+          o.addEventListener("close", l);
+        }
+        if (h > 0)
+          return;
+        const p = i ? W : M;
+        this.dispatchEvent(new p()), i && (o.matches(O) && (s = o), s = s || H(o), s || o.querySelectorAll("slot").forEach((c) => {
+          s || (s = U(c));
+        }), !(!this.isConnected || this.dialogEl.open) && this.dialogEl.showModal());
+      }, r = (o, h) => () => {
+        if (this.open !== i)
+          return;
+        const p = i ? "luzmo-opened" : "luzmo-closed";
+        if (h > 0) {
+          o.dispatchEvent(
+            new v(p, this, {
+              interaction: this.type,
+              publish: !1
+            })
+          );
+          return;
+        }
+        if (!this.isConnected || i !== this.open)
+          return;
+        const l = async () => {
+          const c = this.triggerElement instanceof S;
+          this.dispatchEvent(
+            new v(p, this, {
+              interaction: this.type,
+              publish: c
+            })
+          ), o.dispatchEvent(
+            new v(p, this, {
+              interaction: this.type,
+              publish: !1
+            })
+          ), this.triggerElement && !c && this.triggerElement.dispatchEvent(
+            new v(p, this, {
+              interaction: this.type,
+              publish: !0
+            })
+          ), this.state = i ? "opened" : "closed", this.returnFocus(), await f(), await f(), i === this.open && i === !1 && this.requestSlottable();
+        };
+        !i && this.dialogEl.open ? (this.dialogEl.addEventListener(
+          "close",
+          () => {
+            l();
+          },
+          { once: !0 }
+        ), this.dialogEl.close()) : l();
+      };
+      return this.elements.forEach((o, h) => {
+        $(o, n(o, h), r(o, h));
+      }), s;
+    }
+    dialogApplyFocus(i, s) {
+      this.applyFocus(i, s);
+    }
+  }
+  return e;
+}
+function Pe(a) {
+  class e extends a {
+    async managePopoverOpen() {
+      await this.managePosition();
+    }
+    async manageDelay(i) {
+      if (i === !1 || i !== this.open) {
+        A.close(this);
+        return;
+      }
+      this.delayed && await A.openTimer(this) && (this.open = !i);
+    }
+    ensureOnDOM(i) {
+      document.body.offsetHeight;
+    }
+    makeTransition(i) {
+      if (this.open !== i)
+        return null;
+      let s = null;
+      const n = (o, h) => () => {
+        if (i !== this.open)
+          return;
+        if (o.open = i, h === 0) {
+          const l = i ? W : M;
+          this.dispatchEvent(new l());
+        }
+        if (i !== !0 || (o.matches(O) && (s = o), s = s || H(o), s))
+          return;
+        o.querySelectorAll("slot").forEach((l) => {
+          s || (s = U(l));
+        });
+      }, r = (o, h) => async () => {
+        if (this.open !== i)
+          return;
+        const p = i ? "luzmo-opened" : "luzmo-closed";
+        if (o.dispatchEvent(
+          new v(p, this, {
+            interaction: this.type
+          })
+        ), h > 0)
+          return;
+        const l = this.triggerElement instanceof S;
+        this.dispatchEvent(
+          new v(p, this, {
+            interaction: this.type,
+            publish: l
+          })
+        ), this.triggerElement && !l && this.triggerElement.dispatchEvent(
+          new v(p, this, {
+            interaction: this.type,
+            publish: !0
+          })
+        ), this.state = i ? "opened" : "closed", this.returnFocus(), await f(), await f(), i === this.open && i === !1 && this.requestSlottable();
+      };
+      return this.elements.forEach((o, h) => {
+        $(o, n(o, h), r(o, h));
+      }), s;
+    }
+  }
+  return e;
+}
+const Ce = CSS.supports("(overlay: auto)");
+function J(a) {
+  let e = !1;
+  try {
+    e = a.matches(":popover-open");
+  } catch {
+  }
+  let t = !1;
+  try {
+    t = a.matches(":open");
+  } catch {
+  }
+  return e || t;
+}
+function Oe(a) {
+  class e extends a {
+    async manageDelay(i) {
+      if (i === !1 || i !== this.open) {
+        A.close(this);
+        return;
+      }
+      this.delayed && await A.openTimer(this) && (this.open = !i);
+    }
+    /**
+     * A popover should be hidden _after_ it is no longer on top-layer because
+     * the position metrics will have changed from when it was originally positioned.
+     */
+    shouldHidePopover(i) {
+      if (i && this.open !== i)
+        return;
+      const s = async ({
+        newState: n
+      } = {}) => {
+        n !== "open" && await this.placementController.resetOverlayPosition();
+      };
+      if (!J(this.dialogEl)) {
+        s();
+        return;
+      }
+      this.dialogEl.addEventListener("toggle", s, {
+        once: !0
+      });
+    }
+    shouldShowPopover(i) {
+      let s = !1;
+      try {
+        s = this.dialogEl.matches(":popover-open");
+      } catch {
+      }
+      let n = !1;
+      try {
+        n = this.dialogEl.matches(":open");
+      } catch {
+      }
+      i && this.open === i && !s && !n && this.isConnected && (this.dialogEl.showPopover(), this.managePosition());
+    }
+    async ensureOnDOM(i) {
+      Ce || await this.shouldHidePopover(i), this.shouldShowPopover(i), await f();
+    }
+    makeTransition(i) {
+      if (this.open !== i)
+        return null;
+      let s = null;
+      const n = (o, h) => () => {
+        if (o.open = i, h === 0) {
+          const l = i ? W : M;
+          this.dispatchEvent(new l());
+        }
+        if (!i || (o.matches(O) && (s = o), s = s || H(o), s))
+          return;
+        o.querySelectorAll("slot").forEach((l) => {
+          s || (s = U(l));
+        });
+      }, r = (o, h) => () => {
+        if (this.open !== i)
+          return;
+        const p = i ? "luzmo-opened" : "luzmo-closed";
+        if (h > 0) {
+          o.dispatchEvent(
+            new v(p, this, {
+              interaction: this.type,
+              publish: !1
+            })
+          );
+          return;
+        }
+        const l = async () => {
+          if (this.open !== i)
+            return;
+          await f();
+          const g = this.triggerElement instanceof S;
+          this.dispatchEvent(
+            new v(p, this, {
+              interaction: this.type,
+              publish: g
+            })
+          ), o.dispatchEvent(
+            new v(p, this, {
+              interaction: this.type,
+              publish: !1
+            })
+          ), this.triggerElement && !g && this.triggerElement.dispatchEvent(
+            new v(p, this, {
+              interaction: this.type,
+              publish: !0
+            })
+          ), this.state = i ? "opened" : "closed", this.returnFocus(), await f(), await f(), i === this.open && i === !1 && this.requestSlottable();
+        };
+        if (this.open !== i)
+          return;
+        const c = J(this.dialogEl);
+        i !== !0 && c && this.isConnected ? (this.dialogEl.addEventListener(
+          "beforetoggle",
+          () => {
+            l();
+          },
+          { once: !0 }
+        ), this.dialogEl.hidePopover()) : l();
+      };
+      return this.elements.forEach((o, h) => {
+        $(o, n(o, h), r(o, h));
+      }), s;
+    }
+  }
+  return e;
+}
+const Te = typeof document < "u" && "showPopover" in document.createElement("div");
+class xe {
+  constructor() {
+    this.root = typeof document > "u" ? null : document.body, this.stack = [], this.handleScroll = (e) => {
+      typeof document < "u" && e.target !== document && e.target !== document.documentElement && e.target !== document.body || this.stack.forEach((t) => {
+        t.open && (t.type === "auto" && t.triggerElement instanceof HTMLElement && t.triggerElement.closest(
+          "luzmo-picker, luzmo-select, luzmo-action-menu"
+        ) && e.stopPropagation(), typeof document < "u" && document.dispatchEvent(
+          new CustomEvent("luzmo-update-overlays", {
+            bubbles: !0,
+            composed: !0,
+            cancelable: !0
+          })
+        ));
+      });
+    }, this.handlePointerdown = (e) => {
+      this.pointerdownPath = e.composedPath(), this.lastOverlay = this.stack.at(-1);
+    }, this.handlePointerup = () => {
+      const e = this.pointerdownPath;
+      if (this.pointerdownPath = void 0, this.stack.length === 0 || !(e != null && e.length))
+        return;
+      const t = this.lastOverlay;
+      this.lastOverlay = void 0;
+      const i = this.stack.length - 1, s = this.stack.filter((n, r) => !e.find(
+        (h) => (
+          // The Overlay is in the stack
+          h === n || // The Overlay trigger is in the stack and the Overlay is a "hint"
+          h === (n == null ? void 0 : n.triggerElement) && (n == null ? void 0 : n.type) === "hint" || // The last Overlay in the stack is not the last Overlay at `pointerdown` time and has a
+          // `triggerInteraction` of "longpress", meaning it was opened by this poitner interaction
+          r === i && n !== t && n.triggerInteraction === "longpress"
+        )
+      ) && !n.shouldPreventClose() && n.type !== "manual" && // Don't close if this overlay is modal and not on top of the overlay stack.
+      !(n.type === "modal" && t !== n));
+      s.reverse(), s.forEach((n) => {
+        this.closeOverlay(n);
+        let r = n.parentOverlayToForceClose;
+        for (; r; )
+          this.closeOverlay(r), r = r.parentOverlayToForceClose;
+      });
+    }, this.handleBeforetoggle = (e) => {
+      const { target: t, newState: i } = e;
+      i !== "open" && this.closeOverlay(t);
+    }, this.handleKeydown = (e) => {
+      if (e.code !== "Escape" || this.stack.length === 0)
+        return;
+      const t = this.stack.at(-1);
+      if ((t == null ? void 0 : t.type) === "page") {
+        e.preventDefault();
+        return;
+      }
+      if ((t == null ? void 0 : t.type) === "manual") {
+        this.closeOverlay(t);
+        return;
+      }
+      Te || t && this.closeOverlay(t);
+    }, typeof document < "u" && this.bindEvents();
+  }
+  get document() {
+    return this.root.ownerDocument || document;
+  }
+  bindEvents() {
+    typeof document < "u" && (this.document.addEventListener("pointerdown", this.handlePointerdown), this.document.addEventListener("pointerup", this.handlePointerup), this.document.addEventListener("keydown", this.handleKeydown), this.document.addEventListener("scroll", this.handleScroll, {
+      capture: !0
+    }));
+  }
+  closeOverlay(e) {
+    const t = this.stack.indexOf(e);
+    t !== -1 && this.stack.splice(t, 1), e.open = !1;
+  }
+  /**
+   * Get an array of Overlays that all share the same trigger element.
+   *
+   * @param triggerElement {HTMLELement}
+   * @returns
+   */
+  overlaysByTriggerElement(e) {
+    return this.stack.filter(
+      (t) => t.triggerElement === e
+    );
+  }
+  /**
+   * When overlays are added manage the open state of exisiting overlays appropriately:
+   * - 'modal': should close other non-'modal' and non-'manual' overlays
+   * - 'page': should close other non-'modal' and non-'manual' overlays
+   * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays
+   * - 'manual': shouldn't close other overlays
+   * - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger
+   */
+  add(e) {
+    if (this.stack.includes(e)) {
+      const t = this.stack.indexOf(e);
+      t !== -1 && (this.stack.splice(t, 1), this.stack.push(e));
+      return;
+    }
+    if (e.type === "auto" || e.type === "modal" || e.type === "page") {
+      const t = "luzmo-overlay-query-path", i = new Event(t, {
+        composed: !0,
+        bubbles: !0
+      });
+      e.addEventListener(
+        t,
+        (s) => {
+          const n = s.composedPath();
+          this.stack.forEach((r) => {
+            !n.find((h) => h === r) && r.type !== "manual" && r.type !== "modal" && this.closeOverlay(r);
+          });
+        },
+        { once: !0 }
+      ), e.dispatchEvent(i);
+    } else if (e.type === "hint") {
+      if (this.stack.some(
+        (i) => i.type !== "manual" && i.triggerElement && i.triggerElement === e.triggerElement
+      )) {
+        e.open = !1;
+        return;
+      }
+      this.stack.forEach((i) => {
+        i.type === "hint" && this.closeOverlay(i);
+      });
+    }
+    requestAnimationFrame(() => {
+      this.stack.push(e), e.addEventListener("beforetoggle", this.handleBeforetoggle, {
+        once: !0
+      });
+    });
+  }
+  remove(e) {
+    this.closeOverlay(e);
+  }
+}
+const Q = new xe(), De = ':host{display:contents;pointer-events:none;--luzmo-overlay-animation-distance: .5rem}:host(:has(> luzmo-tooltip)){--luzmo-overlay-animation-distance: var( --luzmo-tooltip-animation-distance, 4px )}.dialog{margin:0;border:0;background:none;padding:0;position:fixed;overflow:visible;opacity:1!important;box-sizing:border-box;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);height:auto;inset:auto;top:0;left:0;display:flex;--luzmo-overlay-open: true}.dialog:not([is-visible]){display:none}.dialog:focus{outline:none}dialog:modal{--luzmo-popover-filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, .15))}:host(:not([open])) .dialog{--luzmo-overlay-open: false}.dialog::backdrop{display:none}.dialog:before{position:absolute;top:-999em;right:-999em;bottom:-999em;left:-999em;content:"";pointer-events:auto!important}.dialog:not(.not-immediately-closable):before{display:none}.dialog>div{width:100%}::slotted(*){pointer-events:auto;visibility:visible!important}::slotted(luzmo-popover){position:static}.dialog:not([actual-placement])[placement*=top]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:var(--luzmo-overlay-animation-distance)}.dialog:not([actual-placement])[placement*=right]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=bottom]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog:not([actual-placement])[placement*=left]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:var(--luzmo-overlay-animation-distance)}.dialog[actual-placement*=top]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:var(--luzmo-overlay-animation-distance)}.dialog[actual-placement*=right]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog[actual-placement*=bottom]{padding-block:var(--luzmo-overlay-animation-distance);margin-top:calc(-1 * var(--luzmo-overlay-animation-distance))}.dialog[actual-placement*=left]{padding-inline:var(--luzmo-overlay-animation-distance);margin-left:var(--luzmo-overlay-animation-distance)}slot[name=longpress-describedby-descriptor]{display:none}@supports selector(:open){.dialog{opacity:0}.dialog:open{opacity:1;--luzmo-popover-filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, .15))}}@supports selector(:popover-open){.dialog{opacity:0}.dialog:popover-open{opacity:1;--luzmo-popover-filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, .15))}}@supports (overlay: auto){.dialog{display:none;transition:all var(--luzmo-overlay-animation-duration, .13s),translate 0s,display var(--luzmo-overlay-animation-duration, .13s);transition-behavior:allow-discrete}.dialog:popover-open,.dialog:modal{display:flex}}@supports (not selector(:open)) and (not selector(:popover-open)){:host:not([open]) .dialog{pointer-events:none}.dialog[actual-placement]{z-index:calc(var(--luzmo-overlay-z-index-base, 1000) + var(--luzmo-overlay-open-count))}}';
+function D(a) {
+  if (a === void 0)
+    return 0;
+  const e = window.devicePixelRatio || 1;
+  return Math.round(a * e) / e;
+}
+const L = 8, Le = 100, ze = (a) => ({
+  left: ["right", "bottom", "top"],
+  "left-start": ["right-start", "bottom", "top"],
+  "left-end": ["right-end", "bottom", "top"],
+  right: ["left", "bottom", "top"],
+  "right-start": ["left-start", "bottom", "top"],
+  "right-end": ["left-end", "bottom", "top"],
+  top: ["bottom", "left", "right"],
+  "top-start": ["bottom-start", "left", "right"],
+  "top-end": ["bottom-end", "left", "right"],
+  bottom: ["top", "left", "right"],
+  "bottom-start": ["top-start", "left", "right"],
+  "bottom-end": ["top-end", "left", "right"]
+})[a] ?? [a], et = Symbol("placement updated");
+class Ae {
+  /**
+   * Creates an instance of the PlacementController.
+   *
+   * @param host - The host element that uses this controller.
+   */
+  constructor(e) {
+    this.originalPlacements = /* @__PURE__ */ new WeakMap(), this.allowPlacementUpdate = !1, this.closeForAncestorUpdate = () => {
+      !this.allowPlacementUpdate && this.options.type !== "modal" && this.cleanup && this.target.dispatchEvent(new Event("close", { bubbles: !0 })), this.allowPlacementUpdate = !1;
+    }, this.updatePlacement = () => {
+      this.computePlacement();
+    }, this.resetOverlayPosition = () => {
+      !this.target || !this.options || (this.clearOverlayPosition(), this.host.offsetHeight, this.computePlacement());
+    }, this.host = e, this.host.addController(this);
+  }
+  /**
+   * Places the overlay relative to the target element.
+   *
+   * This method sets up the necessary configurations and event listeners to manage the
+   * positioning and constraints of the overlay element.
+   *
+   * @param [target=this.target] - The target element for the overlay.
+   * @param [options=this.options] - The options for configuring the overlay placement.
+   * @returns A promise that resolves when the overlay has been placed.
+   */
+  placeOverlay(e = this.target, t = this.options) {
+    if (this.target = e, this.options = t, !e || !t)
+      return;
+    const i = j(
+      t.trigger,
+      e,
+      this.closeForAncestorUpdate,
+      {
+        ancestorResize: !1,
+        elementResize: !1,
+        layoutShift: !1
+      }
+    ), s = j(
+      t.trigger,
+      e,
+      this.updatePlacement,
+      {
+        ancestorScroll: !1
+      }
+    );
+    this.cleanup = () => {
+      var n;
+      (n = this.host.elements) == null || n.forEach((r) => {
+        r.addEventListener(
+          "luzmo-closed",
+          () => {
+            const o = this.originalPlacements.get(r);
+            o && r.setAttribute("placement", o), this.originalPlacements.delete(r);
+          },
+          { once: !0 }
+        );
+      }), i(), s();
+    };
+  }
+  /**
+   * Computes the placement of the overlay relative to the target element.
+   *
+   * This method calculates the necessary positioning and constraints for the overlay element
+   * using various middleware functions. It updates the overlay's style and attributes based
+   * on the computed position.
+   *
+   * @returns A promise that resolves when the placement has been computed.
+   */
+  async computePlacement() {
+    var g, w;
+    const { options: e, target: t } = this;
+    await (document.fonts ? document.fonts.ready : Promise.resolve());
+    const i = e.trigger instanceof HTMLElement ? G() : G({
+      padding: L,
+      fallbackPlacements: ze(e.placement)
+    }), [s = 0, n = 0] = Array.isArray(e == null ? void 0 : e.offset) ? e.offset : [e.offset, 0], r = (g = this.host.elements.find(
+      (m) => m.tipElement
+    )) == null ? void 0 : g.tipElement, o = [
+      ae({
+        mainAxis: s,
+        crossAxis: n
+      }),
+      le({ padding: L }),
+      i,
+      he({
+        padding: L,
+        apply: ({ availableWidth: m, availableHeight: R, rects: { floating: Z } }) => {
+          const K = Math.max(
+            Le,
+            Math.floor(R)
+          ), T = Z.height;
+          this.initialHeight = this.isConstrained && this.initialHeight || T, this.isConstrained = T < this.initialHeight || K <= T;
+          const ee = this.isConstrained ? `${K}px` : "";
+          Object.assign(t.style, {
+            maxWidth: `${Math.floor(m)}px`,
+            maxHeight: ee
+          });
+        }
+      }),
+      ...r ? [
+        ce({
+          element: r,
+          padding: e.tipPadding || L
+        })
+      ] : []
+    ], { x: h, y: p, placement: l, middlewareData: c } = await pe(
+      e.trigger,
+      t,
+      {
+        placement: e.placement,
+        middleware: o,
+        strategy: "fixed"
+      }
+    );
+    if (Object.assign(t.style, {
+      top: "0px",
+      left: "0px",
+      translate: `${D(h)}px ${D(p)}px`
+    }), t.setAttribute("actual-placement", l), (w = this.host.elements) == null || w.forEach((m) => {
+      this.originalPlacements.has(m) || this.originalPlacements.set(
+        m,
+        m.getAttribute("placement")
+      ), m.setAttribute("placement", l);
+    }), r && c.arrow) {
+      const { x: m, y: R } = c.arrow;
+      Object.assign(r.style, {
+        top: l.startsWith("right") || l.startsWith("left") ? "0px" : "",
+        left: l.startsWith("bottom") || l.startsWith("top") ? "0px" : "",
+        translate: `${D(m)}px ${D(R)}px`
+      });
+    }
+  }
+  /**
+   * Clears the overlay's position styles.
+   *
+   * This method removes the max-height and max-width styles from the target element,
+   * and resets the initial height and constrained state of the overlay.
+   */
+  clearOverlayPosition() {
+    this.target && (this.target.style.removeProperty("max-height"), this.target.style.removeProperty("max-width"), this.initialHeight = void 0, this.isConstrained = !1);
+  }
+  /**
+   * Lifecycle method called when the host element is connected to the DOM.
+   *
+   * This method sets up an event listener to reset the overlay's position when the 'luzmo-update-overlays' event is dispatched.
+   */
+  hostConnected() {
+    document.addEventListener(
+      "luzmo-update-overlays",
+      this.resetOverlayPosition
+    );
+  }
+  /**
+   * Lifecycle method called when the host element is updated.
+   *
+   * This method cleans up resources if the overlay is not open.
+   */
+  hostUpdated() {
+    var e;
+    this.host.open || ((e = this.cleanup) == null || e.call(this), this.cleanup = void 0);
+  }
+  /**
+   * Lifecycle method called when the host element is disconnected from the DOM.
+   *
+   * This method removes the event listener and cleans up resources.
+   */
+  hostDisconnected() {
+    var e;
+    (e = this.cleanup) == null || e.call(this), this.cleanup = void 0, document.removeEventListener(
+      "luzmo-update-overlays",
+      this.resetOverlayPosition
+    );
+  }
+}
+var C = /* @__PURE__ */ ((a) => (a.click = "click", a.hover = "hover", a.longpress = "longpress", a))(C || {});
+const N = Symbol("lastInteractionType"), F = "remove-focus-ring-safari-hack";
+class B {
+  constructor(e, { overlay: t, isPersistent: i, handleOverlayReady: s }) {
+    this.target = e, this.isLazilyOpen = !1, this.isPersistent = !1, this.isPersistent = !!i, this.handleOverlayReady = s, this.isPersistent && this.init(), this.overlay = t;
+  }
+  get activelyOpening() {
+    return !1;
+  }
+  get open() {
+    var e;
+    return ((e = this.overlay) == null ? void 0 : e.open) ?? this.isLazilyOpen;
+  }
+  /**
+   * Set `open` against the associated Overlay lazily.
+   */
+  set open(e) {
+    if (e !== this.open) {
+      if (this.isLazilyOpen = e, this.overlay) {
+        this.overlay.open = e, this.target[N] = this.type;
+        return;
+      }
+      e && (customElements.whenDefined("luzmo-overlay").then(async () => {
+        const { LuzmoOverlay: t } = await Promise.resolve().then(() => q);
+        this.overlay = new t(), this.overlay.open = !0, this.target[N] = this.type;
+      }), Promise.resolve().then(() => q));
+    }
+  }
+  get overlay() {
+    return this._overlay;
+  }
+  set overlay(e) {
+    var t;
+    e && this.overlay !== e && (this.overlay && this.overlay.removeController(this), this._overlay = e, this.overlay.addController(this), this.initOverlay(), this.prepareDescription(this.target), (t = this.handleOverlayReady) == null || t.call(this, this.overlay));
+  }
+  prepareDescription(e) {
+  }
+  releaseDescription() {
+  }
+  shouldCompleteOpen() {
+  }
+  /* c8 ignore next 3 */
+  init() {
+  }
+  /* c8 ignore next 3 */
+  initOverlay() {
+  }
+  abort() {
+    var e;
+    this.releaseDescription(), (e = this.abortController) == null || e.abort();
+  }
+  hostConnected() {
+    this.init();
+  }
+  hostDisconnected() {
+    this.isPersistent || this.abort();
+  }
+}
+class Se extends B {
+  constructor() {
+    super(...arguments), this.type = C.click, this.preventNextToggle = !1;
+  }
+  handleClick() {
+    this.preventNextToggle || (this.open = !this.open), this.preventNextToggle = !1;
+  }
+  handlePointerdown() {
+    this.preventNextToggle = this.open;
+  }
+  init() {
+    var t;
+    (t = this.abortController) == null || t.abort(), this.abortController = new AbortController();
+    const { signal: e } = this.abortController;
+    this.target.addEventListener("click", () => this.handleClick(), {
+      signal: e
+    }), this.target.addEventListener(
+      "pointerdown",
+      () => this.handlePointerdown(),
+      { signal: e }
+    );
+  }
+}
+const Re = 300;
+class ke extends B {
+  constructor() {
+    super(...arguments), this.type = C.hover, this.elementIds = [], this.focusedin = !1, this.pointerentered = !1;
+  }
+  handleKeyup(e) {
+    (e.code === "Tab" || e.code === "Escape") && (this.open = !0, this.removeSafariFocusRingClass());
+  }
+  handleTargetFocusin() {
+    if (this.target.matches(":focus-visible")) {
+      if (Y() && this.target[N] === C.click) {
+        this.target.classList.add(F);
+        return;
+      }
+      this.open = !0, this.focusedin = !0, this.removeSafariFocusRingClass();
+    }
+  }
+  handleTargetFocusout() {
+    this.removeSafariFocusRingClass(), this.focusedin = !1, !this.pointerentered && (this.open = !1);
+  }
+  handleTargetPointerenter() {
+    var e;
+    this.hoverTimeout && (clearTimeout(this.hoverTimeout), this.hoverTimeout = void 0), !((e = this.overlay) != null && e.disabled) && (this.open = !0, this.pointerentered = !0);
+  }
+  handleTargetPointerleave() {
+    this.doPointerleave();
+  }
+  // set a timeout once the pointer enters and the overlay is shown
+  // give the user time to enter the overlay
+  handleHostPointerenter() {
+    this.hoverTimeout && (clearTimeout(this.hoverTimeout), this.hoverTimeout = void 0);
+  }
+  handleHostPointerleave() {
+    this.doPointerleave();
+  }
+  prepareDescription() {
+    if (this.overlay.elements.length === 0)
+      return;
+    const e = this.target.getRootNode(), t = this.overlay.elements[0].getRootNode(), i = this.overlay.getRootNode();
+    e === i ? this.prepareOverlayRelativeDescription() : e === t && this.prepareContentRelativeDescription();
+  }
+  prepareOverlayRelativeDescription() {
+    const e = _(
+      this.target,
+      "aria-describedby",
+      [this.overlay.id]
+    );
+    this.releaseDescription = () => {
+      e(), this.releaseDescription = E;
+    };
+  }
+  prepareContentRelativeDescription() {
+    const e = [], t = this.overlay.elements.map((s) => (e.push(s.id), s.id || (s.id = `${this.overlay.tagName.toLowerCase()}-helper-${I()}`), s.id));
+    this.elementIds = e;
+    const i = _(
+      this.target,
+      "aria-describedby",
+      t
+    );
+    this.releaseDescription = () => {
+      i(), this.overlay.elements.map((s, n) => {
+        s.id = this.elementIds[n];
+      }), this.releaseDescription = E;
+    };
+  }
+  doPointerleave() {
+    this.pointerentered = !1;
+    const e = this.target;
+    this.focusedin && e.matches(":focus-visible") || (this.hoverTimeout = setTimeout(() => {
+      this.open = !1;
+    }, Re));
+  }
+  init() {
+    var t;
+    (t = this.abortController) == null || t.abort(), this.abortController = new AbortController();
+    const { signal: e } = this.abortController;
+    this.target.addEventListener("keyup", (i) => this.handleKeyup(i), {
+      signal: e
+    }), this.target.addEventListener("focusin", () => this.handleTargetFocusin(), {
+      signal: e
+    }), this.target.addEventListener(
+      "focusout",
+      () => this.handleTargetFocusout(),
+      { signal: e }
+    ), this.target.addEventListener(
+      "pointerenter",
+      () => this.handleTargetPointerenter(),
+      { signal: e }
+    ), this.target.addEventListener(
+      "pointerleave",
+      () => this.handleTargetPointerleave(),
+      { signal: e }
+    ), this.overlay && this.initOverlay();
+  }
+  initOverlay() {
+    if (!this.abortController)
+      return;
+    const { signal: e } = this.abortController;
+    this.overlay.addEventListener(
+      "pointerenter",
+      () => this.handleHostPointerenter(),
+      { signal: e }
+    ), this.overlay.addEventListener(
+      "pointerleave",
+      () => this.handleHostPointerleave(),
+      { signal: e }
+    );
+  }
+  removeSafariFocusRingClass() {
+    Y() && this.target.classList.contains(F) && this.target.classList.remove(F);
+  }
+}
+const Fe = 300, _e = {
+  touch: "Double tap and long press for additional options",
+  keyboard: "Press Space or Alt+Down Arrow for additional options",
+  mouse: "Click and hold for additional options"
+};
+class Ne extends B {
+  constructor() {
+    super(...arguments), this.type = C.longpress, this.longpressState = null, this.releaseDescription = E, this.handlePointerup = () => {
+      var e;
+      clearTimeout(this.timeout), this.target && (this.longpressState = ((e = this.overlay) == null ? void 0 : e.state) === "opening" ? "pressed" : null, document.removeEventListener("pointerup", this.handlePointerup), document.removeEventListener("pointercancel", this.handlePointerup));
+    };
+  }
+  get activelyOpening() {
+    return this.longpressState === "opening" || this.longpressState === "pressed";
+  }
+  handleLongpress() {
+    this.open = !0, this.longpressState = this.longpressState === "potential" ? "opening" : "pressed";
+  }
+  handlePointerdown(e) {
+    !this.target || e.button !== 0 || (this.longpressState = "potential", document.addEventListener("pointerup", this.handlePointerup), document.addEventListener("pointercancel", this.handlePointerup), "holdAffordance" in this.target) || (this.timeout = setTimeout(() => {
+      this.target && this.target.dispatchEvent(
+        new CustomEvent("longpress", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            source: "pointer"
+          }
+        })
+      );
+    }, Fe));
+  }
+  handleKeydown(e) {
+    const { code: t, altKey: i } = e;
+    i && t === "ArrowDown" && (e.stopPropagation(), e.stopImmediatePropagation());
+  }
+  handleKeyup(e) {
+    const { code: t, altKey: i } = e;
+    if (t === "Space" || i && t === "ArrowDown") {
+      if (!this.target)
+        return;
+      e.stopPropagation(), this.target.dispatchEvent(
+        new CustomEvent("longpress", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            source: "keyboard"
+          }
+        })
+      ), setTimeout(() => {
+        this.longpressState = null;
+      });
+    }
+  }
+  prepareDescription(e) {
+    if (
+      // do not reapply until target is recycled
+      this.releaseDescription !== E || // require "longpress content" to apply relationship
+      this.overlay.elements.length === 0
+    )
+      return;
+    const t = document.createElement("div");
+    t.id = `longpress-describedby-descriptor-${I()}`;
+    const i = me() || ge() ? "touch" : "keyboard";
+    t.textContent = _e[i], t.slot = "longpress-describedby-descriptor";
+    const s = e.getRootNode(), n = this.overlay.getRootNode();
+    s === n ? this.overlay.append(t) : (t.hidden = !("host" in s), e.after(t));
+    const r = _(
+      e,
+      "aria-describedby",
+      [t.id]
+    );
+    this.releaseDescription = () => {
+      r(), t.remove(), this.releaseDescription = E;
+    };
+  }
+  shouldCompleteOpen() {
+    this.longpressState = this.longpressState === "pressed" ? null : this.longpressState;
+  }
+  init() {
+    var t;
+    (t = this.abortController) == null || t.abort(), this.abortController = new AbortController();
+    const { signal: e } = this.abortController;
+    this.target.addEventListener("longpress", () => this.handleLongpress(), {
+      signal: e
+    }), this.target.addEventListener(
+      "pointerdown",
+      (i) => this.handlePointerdown(i),
+      { signal: e }
+    ), this.prepareDescription(this.target), !this.target.holdAffordance && (this.target.addEventListener(
+      "keydown",
+      (i) => this.handleKeydown(i),
+      { signal: e }
+    ), this.target.addEventListener(
+      "keyup",
+      (i) => this.handleKeyup(i),
+      { signal: e }
+    ));
+  }
+}
+const qe = {
+  click: Se,
+  longpress: Ne,
+  hover: ke
+};
+var Ie = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, u = (a, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? $e(e, t) : e, n = a.length - 1, r; n >= 0; n--)
+    (r = a[n]) && (s = (i ? r(e, t, s) : r(s)) || s);
+  return i && s && Ie(e, t, s), s;
+};
+const He = typeof document < "u" && "showPopover" in document.createElement("div");
+let z = Ee(P);
+z = He ? Oe(z) : Pe(z);
+var b;
+const d = (b = class extends z {
+  constructor() {
+    super(...arguments), this._delayed = !1, this._disabled = !1, this.offset = 0, this._open = !1, this.lastRequestSlottableState = !1, this.receivesFocus = "auto", this._state = "closed", this.triggerElement = null, this.type = "auto", this.wasOpen = !1, this.closeOnFocusOut = (e) => {
+      if (!e.relatedTarget)
+        return;
+      const t = new Event("overlay-relation-query", {
+        bubbles: !0,
+        composed: !0
+      });
+      e.relatedTarget.addEventListener(t.type, (i) => {
+        i.composedPath().includes(this) || (this.open = !1);
+      }), e.relatedTarget.dispatchEvent(t);
+    };
+  }
+  get delayed() {
+    var e;
+    return ((e = this.elements.at(-1)) == null ? void 0 : e.hasAttribute("delayed")) || this._delayed;
+  }
+  set delayed(e) {
+    this._delayed = e;
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  set disabled(e) {
+    var t;
+    this._disabled = e, e ? ((t = this.strategy) == null || t.abort(), this.wasOpen = this.open, this.open = !1) : (this.bindEvents(), this.open = this.open || this.wasOpen, this.wasOpen = !1);
+  }
+  /**
+   * Determines if the overlay has a non-virtual trigger element.
+   *
+   * @returns `true` if the trigger element is not a virtual trigger, otherwise `false`.
+   */
+  get hasNonVirtualTrigger() {
+    return !!this.triggerElement && !(this.triggerElement instanceof S);
+  }
+  /**
+   * Provides an instance of the `PlacementController` for managing the positioning
+   * of the overlay relative to its trigger element.
+   *
+   * If the `PlacementController` instance does not already exist, it is created and
+   * assigned to the `_placementController` property.
+   *
+   * @protected
+   * @returns The `PlacementController` instance.
+   */
+  get placementController() {
+    return this._placementController || (this._placementController = new Ae(this)), this._placementController;
+  }
+  get open() {
+    return this._open;
+  }
+  set open(e) {
+    var t;
+    e && this.disabled || e !== this.open && ((t = this.strategy) != null && t.activelyOpening && !e || (this._open = e, this.open && (b.openCount += 1), this.requestUpdate("open", !this.open), this.open && this.requestSlottable()));
+  }
+  get state() {
+    return this._state;
+  }
+  set state(e) {
+    var i;
+    if (e === this.state)
+      return;
+    const t = this.state;
+    this._state = e, (this.state === "opened" || this.state === "closed") && ((i = this.strategy) == null || i.shouldCompleteOpen()), this.requestUpdate("state", t);
+  }
+  /**
+   * Provides an instance of the `ElementResolutionController` for managing the element
+   * that the overlay should be associated with. If the instance does not already exist,
+   * it is created and assigned to the `_elementResolver` property.
+   *
+   * @protected
+   * @returns The `ElementResolutionController` instance.
+   */
+  get elementResolver() {
+    return this._elementResolver || (this._elementResolver = new oe(this)), this._elementResolver;
+  }
+  /**
+   * Determines if the overlay uses a dialog.
+   * Returns `true` if the overlay type is "modal" or "page".
+   *
+   * @private
+   * @returns `true` if the overlay uses a dialog, otherwise `false`.
+   */
+  get usesDialog() {
+    return this.type === "modal" || this.type === "page";
+  }
+  /**
+   * Determines the value for the popover attribute based on the overlay type.
+   *
+   * @private
+   * @returns The popover value or undefined if not applicable.
+   */
+  get popoverValue() {
+    if ("popover" in this)
+      switch (this.type) {
+        case "modal":
+        case "page":
+          return;
+        case "hint":
+          return "manual";
+        default:
+          return this.type;
+      }
+  }
+  /**
+   * Determines if the overlay requires positioning based on its type and state.
+   *
+   * @protected
+   * @returns True if the overlay requires positioning, otherwise false.
+   */
+  get requiresPositioning() {
+    return !(this.type === "page" || !this.open || !this.triggerElement || !this.placement && this.type !== "hint");
+  }
+  /**
+   * Manages the positioning of the overlay relative to its trigger element.
+   *
+   * This method calculates the necessary parameters for positioning the overlay,
+   * such as offset, placement, and tip padding, and then delegates the actual
+   * positioning to the `PlacementController`.
+   *
+   * @protected
+   * @override
+   */
+  managePosition() {
+    if (!this.requiresPositioning || !this.open)
+      return;
+    const e = this.offset || 0, t = this.triggerElement, i = this.placement || "right", s = this.tipPadding;
+    this.placementController.placeOverlay(this.dialogEl, {
+      offset: e,
+      placement: i,
+      tipPadding: s,
+      trigger: t,
+      type: this.type
+    });
+  }
+  /**
+   * Manages the process of opening the popover.
+   *
+   * This method handles the necessary steps to open the popover, including managing delays,
+   * ensuring the popover is in the DOM, making transitions, and applying focus.
+   *
+   * @protected
+   * @override
+   * @returns A promise that resolves when the popover has been fully opened.
+   */
+  async managePopoverOpen() {
+    super.managePopoverOpen();
+    const e = this.open;
+    if (this.open !== e || (await this.manageDelay(e), this.open !== e) || (this.triggerInteraction === "longpress" && await f(), await this.ensureOnDOM(e), this.open !== e))
+      return;
+    const t = await this.makeTransition(e);
+    this.open === e && await this.applyFocus(e, t);
+  }
+  /**
+   * Applies focus to the appropriate element after the popover has been opened.
+   *
+   * This method handles the focus management for the overlay, ensuring that the correct
+   * element receives focus based on the overlay's type and state.
+   *
+   * @protected
+   * @override
+   * @param targetOpenState - The target open state of the overlay.
+   * @param focusEl - The element to focus after opening the popover.
+   * @returns A promise that resolves when the focus has been applied.
+   */
+  async applyFocus(e, t) {
+    if (!(this.receivesFocus === "false" || this.type === "hint")) {
+      if (await f(), await f(), e === this.open && !this.open) {
+        this.hasNonVirtualTrigger && this.contains(this.getRootNode().activeElement) && this.triggerElement.focus();
+        return;
+      }
+      t == null || t.focus();
+    }
+  }
+  /**
+   * Returns focus to the trigger element if the overlay is closed.
+   *
+   * This method ensures that focus is returned to the trigger element when the overlay is closed,
+   * unless the overlay is of type "hint" or the focus is already outside the overlay.
+   *
+   * @protected
+   * @override
+   */
+  returnFocus() {
+    var t;
+    if (this.open || this.type === "hint")
+      return;
+    const e = () => {
+      var n, r;
+      const i = [];
+      let s = typeof document < "u" ? document.activeElement : null;
+      for (; (n = s == null ? void 0 : s.shadowRoot) != null && n.activeElement; )
+        s = s.shadowRoot.activeElement;
+      for (; s; ) {
+        const o = s.assignedSlot || s.parentElement || ((r = s.getRootNode()) == null ? void 0 : r.host);
+        o && i.push(o), s = o;
+      }
+      return i;
+    };
+    this.receivesFocus !== "false" && ((t = this.triggerElement) != null && t.focus) && (this.contains(this.getRootNode().activeElement) || e().includes(this) || typeof document < "u" && document.activeElement === document.body) && this.triggerElement.focus();
+  }
+  /**
+   * Manages the process of opening or closing the overlay.
+   *
+   * This method handles the necessary steps to open or close the overlay, including updating the state,
+   * managing the overlay stack, and handling focus events.
+   *
+   * @protected
+   * @param oldOpen - The previous open state of the overlay.
+   * @returns A promise that resolves when the overlay has been fully managed.
+   */
+  async manageOpen(e) {
+    if (!(!this.isConnected && this.open) && (this.hasUpdated || await this.updateComplete, this.open ? (Q.add(this), this.willPreventClose && (document.addEventListener(
+      "pointerup",
+      () => {
+        this.dialogEl.classList.toggle("not-immediately-closable", !1), this.willPreventClose = !1;
+      },
+      { once: !0 }
+    ), this.dialogEl.classList.toggle("not-immediately-closable", !0))) : (e && this.dispose(), Q.remove(this)), this.open && this.state !== "opened" ? this.state = "opening" : !this.open && this.state !== "closed" && (this.state = "closing"), this.usesDialog ? this.manageDialogOpen() : this.managePopoverOpen(), this.type === "auto")) {
+      const t = this.getRootNode();
+      this.open ? t.addEventListener("focusout", this.closeOnFocusOut, {
+        capture: !0
+      }) : t.removeEventListener("focusout", this.closeOnFocusOut, {
+        capture: !0
+      });
+    }
+  }
+  /**
+   * Binds event handling strategies to the overlay based on the specified trigger interaction.
+   *
+   * This method sets up the appropriate event handling strategy for the overlay, ensuring that
+   * it responds correctly to user interactions such as clicks, hovers, or long presses.
+   *
+   * @protected
+   */
+  bindEvents() {
+    var e;
+    (e = this.strategy) == null || e.abort(), this.strategy = void 0, this.hasNonVirtualTrigger && this.triggerInteraction && (this.strategy = new qe[this.triggerInteraction](
+      this.triggerElement,
+      {
+        overlay: this
+      }
+    ));
+  }
+  /**
+   * Handles the `beforetoggle` event to manage the overlay's state.
+   *
+   * This method checks the new state of the event and calls `handleBrowserClose`
+   * if the new state is not 'open'.
+   *
+   * @protected
+   * @param event - The `beforetoggle` event with the new state.
+   */
+  handleBeforetoggle(e) {
+    e.newState !== "open" && this.handleBrowserClose(e);
+  }
+  /**
+   * Handles the browser's close event to manage the overlay's state.
+   *
+   * This method stops the propagation of the event and closes the overlay if it is not
+   * actively opening. If the overlay is actively opening, it calls `manuallyKeepOpen`.
+   *
+   * @protected
+   * @param event - The browser's close event.
+   */
+  handleBrowserClose(e) {
+    var t;
+    if (e.stopPropagation(), !((t = this.strategy) != null && t.activelyOpening)) {
+      this.open = !1;
+      return;
+    }
+    this.manuallyKeepOpen();
+  }
+  /**
+   * Manually keeps the overlay open.
+   *
+   * This method sets the overlay to open, allows placement updates, and manages the open state.
+   *
+   * @public
+   * @override
+   */
+  manuallyKeepOpen() {
+    this.open = !0, this.placementController.allowPlacementUpdate = !0, this.manageOpen(!1);
+  }
+  /**
+   * Handles the `slotchange` event to manage the overlay's state.
+   *
+   * This method checks if there are any elements in the slot. If there are no elements,
+   * it releases the description from the strategy. If there are elements and the trigger
+   * is non-virtual, it prepares the description for the trigger element.
+   *
+   * @protected
+   */
+  handleSlotchange() {
+    var e, t;
+    this.elements.length === 0 ? (e = this.strategy) == null || e.releaseDescription() : this.hasNonVirtualTrigger && ((t = this.strategy) == null || t.prepareDescription(this.triggerElement));
+  }
+  /**
+   * Determines whether the overlay should prevent closing.
+   *
+   * This method checks the `willPreventClose` flag and resets it to `false`.
+   * It returns the value of the `willPreventClose` flag.
+   *
+   * @public
+   * @returns `true` if the overlay should prevent closing, otherwise `false`.
+   */
+  shouldPreventClose() {
+    const e = this.willPreventClose;
+    return this.willPreventClose = !1, e;
+  }
+  /**
+   * Requests slottable content for the overlay.
+   *
+   * This method dispatches a `SlottableRequestEvent` to request or remove slottable content
+   * based on the current open state of the overlay. It ensures that the same state is not
+   * dispatched twice in a row.
+   *
+   * @protected
+   * @override
+   */
+  requestSlottable() {
+    this.lastRequestSlottableState !== this.open && (this.open || document.body.offsetHeight, this.dispatchEvent(
+      new de(
+        "overlay-content",
+        this.open ? {} : ue
+      )
+    ), this.lastRequestSlottableState = this.open);
+  }
+  /**
+   * Lifecycle method called before the component updates.
+   *
+   * This method handles various tasks before the component updates, such as setting an ID,
+   * managing the open state, resolving the trigger element, and binding events.
+   *
+   * @override
+   * @param changes - The properties that have changed.
+   */
+  willUpdate(e) {
+    var i;
+    if (this.hasAttribute("id") || this.setAttribute("id", `${this.tagName.toLowerCase()}-${I()}`), e.has("open") && (this.hasUpdated || this.open) && this.manageOpen(e.get("open")), e.has("trigger")) {
+      const [s, n] = ((i = this.trigger) == null ? void 0 : i.split("@")) || [];
+      this.elementResolver.selector = s ? `#${s}` : "", this.triggerInteraction = n;
+    }
+    let t = !1;
+    e.has(ne) && (t = this.triggerElement, this.triggerElement = this.elementResolver.element), e.has("triggerElement") && (t = e.get("triggerElement")), t !== !1 && this.bindEvents();
+  }
+  /**
+   * Lifecycle method called after the component updates.
+   *
+   * This method handles various tasks after the component updates, such as updating the placement
+   * attribute, resetting the overlay position, and clearing the overlay position based on the state.
+   *
+   * @override
+   * @param changes - The properties that have changed.
+   */
+  updated(e) {
+    super.updated(e), e.has("placement") && (this.placement ? this.dialogEl.setAttribute("actual-placement", this.placement) : this.dialogEl.removeAttribute("actual-placement"), this.open && e.get("placement") !== void 0 && this.placementController.resetOverlayPosition()), e.has("state") && this.state === "closed" && e.get("state") !== void 0 && this.placementController.clearOverlayPosition();
+  }
+  /**
+   * Renders the content of the overlay.
+   *
+   * This method returns a template result containing a slot element. The slot element
+   * listens for the `slotchange` event to manage the overlay's state.
+   *
+   * @protected
+   * @returns The template result containing the slot element.
+   */
+  renderContent() {
+    return x` <slot @slotchange=${this.handleSlotchange}></slot> `;
+  }
+  /**
+   * Generates a style map for the dialog element.
+   *
+   * This method returns an object containing CSS custom properties for the dialog element.
+   * The `--luzmo-overlay-open-count` custom property is set to the current open count of overlays.
+   *
+   * @private
+   * @returns The style map for the dialog element.
+   */
+  get dialogStyleMap() {
+    return {
+      "--luzmo-overlay-open-count": b.openCount.toString()
+    };
+  }
+  /**
+   * Renders the dialog element for the overlay.
+   *
+   * This method returns a template result containing a dialog element. The dialog element
+   * includes various attributes and event listeners to manage the overlay's state and behavior.
+   *
+   * @protected
+   * @returns The template result containing the dialog element.
+   */
+  renderDialog() {
+    return x`
+      <dialog
+        class="dialog"
+        part="dialog"
+        placement=${k(
+      this.requiresPositioning ? this.placement || "right" : void 0
+    )}
+        style=${V(this.dialogStyleMap)}
+        @close=${this.handleBrowserClose}
+        @cancel=${this.handleBrowserClose}
+        @beforetoggle=${this.handleBeforetoggle}
+        ?is-visible=${this.state !== "closed"}
+      >
+        ${this.renderContent()}
+      </dialog>
+    `;
+  }
+  /**
+   * Renders the popover element for the overlay.
+   *
+   * This method returns a template result containing a div element styled as a popover.
+   * The popover element includes various attributes and event listeners to manage the overlay's state and behavior.
+   *
+   * @protected
+   * @returns The template result containing the popover element.
+   */
+  renderPopover() {
+    return x`
+      <div
+        class="dialog"
+        part="dialog"
+        placement=${k(
+      this.requiresPositioning ? this.placement || "right" : void 0
+    )}
+        popover=${k(this.popoverValue)}
+        style=${V(this.dialogStyleMap)}
+        @beforetoggle=${this.handleBeforetoggle}
+        @close=${this.handleBrowserClose}
+        ?is-visible=${this.state !== "closed"}
+      >
+        ${this.renderContent()}
+      </div>
+    `;
+  }
+  /**
+   * Renders the overlay component.
+   *
+   * This method returns a template result containing either a dialog or popover element
+   * based on the overlay type. It also includes a slot for longpress descriptors.
+   *
+   * @override
+   * @returns The template result containing the overlay content.
+   */
+  render() {
+    const e = this.type === "modal" || this.type === "page";
+    return x`
+      ${e ? this.renderDialog() : this.renderPopover()}
+      <slot name="longpress-describedby-descriptor"></slot>
+    `;
+  }
+  /**
+   * Lifecycle method called when the component is added to the DOM.
+   *
+   * This method sets up event listeners and binds events if the component has already updated.
+   *
+   * @override
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("close", () => {
+      this.open = !1;
+    }), this.hasUpdated && this.bindEvents();
+  }
+  /**
+   * Lifecycle method called when the component is removed from the DOM.
+   *
+   * This method releases the description from the strategy and updates the 'open' property.
+   *
+   * @override
+   */
+  disconnectedCallback() {
+    var e;
+    (e = this.strategy) == null || e.releaseDescription(), this.open = !1, super.disconnectedCallback();
+  }
+}, b.styles = [te(De)], b.openCount = 1, b);
+u([
+  y({ type: Boolean })
+], d.prototype, "delayed", 1);
+u([
+  X(".dialog")
+], d.prototype, "dialogEl", 2);
+u([
+  y({ type: Boolean })
+], d.prototype, "disabled", 1);
+u([
+  ie({
+    flatten: !0,
+    selector: ':not([slot="longpress-describedby-descriptor"], slot)'
+  })
+], d.prototype, "elements", 2);
+u([
+  y({ type: Number })
+], d.prototype, "offset", 2);
+u([
+  y({ type: Boolean, reflect: !0 })
+], d.prototype, "open", 1);
+u([
+  y()
+], d.prototype, "placement", 2);
+u([
+  y({ attribute: "receives-focus" })
+], d.prototype, "receivesFocus", 2);
+u([
+  X("slot")
+], d.prototype, "slotEl", 2);
+u([
+  se()
+], d.prototype, "state", 1);
+u([
+  y({ type: Number, attribute: "tip-padding" })
+], d.prototype, "tipPadding", 2);
+u([
+  y()
+], d.prototype, "trigger", 2);
+u([
+  y({ attribute: !1 })
+], d.prototype, "triggerElement", 2);
+u([
+  y({ attribute: !1 })
+], d.prototype, "triggerInteraction", 2);
+u([
+  y()
+], d.prototype, "type", 2);
+let Ue = d;
+const q = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  LuzmoOverlay: Ue
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Se as C,
+  ke as H,
+  C as I,
+  P as L,
+  Ae as P,
+  F as S,
+  S as V,
+  f as a,
+  B as b,
+  _e as c,
+  Ne as d,
+  Ue as e,
+  q as f,
+  $ as g,
+  N as l,
+  E as n,
+  A as o,
+  et as p,
+  qe as s
+};