@luzmo/lucero 1.0.1-alpha.14 → 1.0.1-alpha.16

package/components/overlay-CN8ISP1F.js

@@ -0,0 +1,2485 @@
+/*! * 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.
+ * */
+var _a;
+import { unsafeCSS, html } from "lit";
+import { property, query, queryAssignedElements, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { r as randomID } from "./random-id-BEc6QIUL.js";
+import { E as ElementResolutionController, e as elementResolverUpdatedSymbol } from "./element-resolution-nMlmW4Jy.js";
+import { a as LuzmoElement } from "./base-DmeVy0cq.js";
+import { u as userFocusableSelector } from "./focusable-selectors-IltOAOd9.js";
+import { autoUpdate, flip, offset, shift, size, arrow, computePosition } from "@floating-ui/dom";
+import { S as SlottableRequestEvent, r as removeSlottableRequest } from "./slottable-request-event-D9WzrdWv.js";
+import { c as conditionAttributeWithId } from "./condition-attribute-with-id-Cn815e9W.js";
+import { f as isWebKit, c as isIOS, j as isAndroid } from "./platform-Cxn0WbyT.js";
+function restoreChildren(placeholderItems, srcElements, cleanupCallbacks = []) {
+  for (const [index, srcElement] of srcElements.entries()) {
+    const placeholderItem = placeholderItems[index];
+    const parentElement = placeholderItem.parentElement || placeholderItem.getRootNode();
+    if (cleanupCallbacks[index]) {
+      cleanupCallbacks[index](srcElement);
+    }
+    if (parentElement && parentElement !== placeholderItem) {
+      placeholderItem.replaceWith(srcElement);
+    }
+    delete placeholderItems[index];
+  }
+  return srcElements;
+}
+const reparentChildren = (srcElements, destination, {
+  position,
+  prepareCallback
+} = { position: "beforeend" }) => {
+  let { length } = srcElements;
+  if (length === 0) {
+    return () => srcElements;
+  }
+  let step = 1;
+  let index = 0;
+  if (position === "afterbegin" || position === "afterend") {
+    step = -1;
+    index = length - 1;
+  }
+  const placeholderItems = new Array(length);
+  const cleanupCallbacks = new Array(length);
+  const placeholderTemplate = typeof document !== "undefined" ? document.createComment("placeholder for reparented element") : null;
+  do {
+    const srcElement = srcElements[index];
+    if (prepareCallback) {
+      cleanupCallbacks[index] = prepareCallback(srcElement);
+    }
+    placeholderItems[index] = placeholderTemplate.cloneNode();
+    const parentElement = srcElement.parentElement || srcElement.getRootNode();
+    if (parentElement && parentElement !== srcElement) {
+      parentElement.replaceChild(placeholderItems[index], srcElement);
+    }
+    destination.insertAdjacentElement(position, srcElement);
+    index += step;
+  } while (--length > 0);
+  return function() {
+    return restoreChildren(placeholderItems, srcElements, cleanupCallbacks);
+  };
+};
+const DEFAULT_WARMUP = 1e3;
+const DEFAULT_COOLDOWN = 1e3;
+class LuzmoOverlayTimer {
+  constructor(options = {}) {
+    this.warmUpDelay = DEFAULT_WARMUP;
+    this.coolDownDelay = DEFAULT_COOLDOWN;
+    this.isWarm = false;
+    this.timeout = 0;
+    Object.assign(this, options);
+  }
+  openTimer(component) {
+    this.cancelCooldownTimer();
+    if (!this.component || component !== this.component) {
+      if (this.component) {
+        this.close(this.component);
+        this.cancelCooldownTimer();
+      }
+      this.component = component;
+      if (this.isWarm) {
+        return Promise.resolve(false);
+      }
+      this.promise = new Promise((resolve) => {
+        this.resolve = resolve;
+        this.timeout = typeof window !== "undefined" ? window.setTimeout(() => {
+          if (this.resolve) {
+            this.resolve(false);
+            this.isWarm = true;
+          }
+        }, this.warmUpDelay) : 0;
+      });
+      return this.promise;
+    } else if (this.promise) {
+      return this.promise;
+    }
+    throw new Error("Inconsistent state");
+  }
+  close(component) {
+    if (this.component && this.component === component) {
+      this.resetCooldownTimer();
+      if (this.timeout > 0) {
+        clearTimeout(this.timeout);
+        this.timeout = 0;
+      }
+      if (this.resolve) {
+        this.resolve(true);
+        delete this.resolve;
+      }
+      delete this.promise;
+      delete this.component;
+    }
+  }
+  resetCooldownTimer() {
+    if (this.isWarm) {
+      if (this.cooldownTimeout && typeof window !== "undefined") {
+        window.clearTimeout(this.cooldownTimeout);
+      }
+      this.cooldownTimeout = typeof window !== "undefined" ? window.setTimeout(() => {
+        this.isWarm = false;
+        delete this.cooldownTimeout;
+      }, this.coolDownDelay) : void 0;
+    }
+  }
+  cancelCooldownTimer() {
+    if (this.cooldownTimeout && typeof window !== "undefined") {
+      window.clearTimeout(this.cooldownTimeout);
+    }
+    delete this.cooldownTimeout;
+  }
+}
+const overlayTimer = new LuzmoOverlayTimer();
+const noop = () => {
+};
+const guaranteedAllTransitionend = (el, action, cb) => {
+  const abortController = new AbortController();
+  const runningTransitions = /* @__PURE__ */ new Map();
+  const cleanup = () => {
+    abortController.abort();
+    cb();
+  };
+  let guarantee2;
+  let guarantee3;
+  const guarantee1 = requestAnimationFrame(() => {
+    guarantee2 = requestAnimationFrame(() => {
+      guarantee3 = requestAnimationFrame(() => {
+        cleanup();
+      });
+    });
+  });
+  const handleTransitionend = (event) => {
+    if (event.target !== el) {
+      return;
+    }
+    runningTransitions.set(
+      event.propertyName,
+      runningTransitions.get(event.propertyName) - 1
+    );
+    if (!runningTransitions.get(event.propertyName)) {
+      runningTransitions.delete(event.propertyName);
+    }
+    if (runningTransitions.size === 0) {
+      cleanup();
+    }
+  };
+  const handleTransitionrun = (event) => {
+    if (event.target !== el) {
+      return;
+    }
+    if (!runningTransitions.has(event.propertyName)) {
+      runningTransitions.set(event.propertyName, 0);
+    }
+    runningTransitions.set(
+      event.propertyName,
+      runningTransitions.get(event.propertyName) + 1
+    );
+    cancelAnimationFrame(guarantee1);
+    cancelAnimationFrame(guarantee2);
+    cancelAnimationFrame(guarantee3);
+  };
+  el.addEventListener("transitionrun", handleTransitionrun, {
+    signal: abortController.signal
+  });
+  el.addEventListener("transitionend", handleTransitionend, {
+    signal: abortController.signal
+  });
+  el.addEventListener("transitioncancel", handleTransitionend, {
+    signal: abortController.signal
+  });
+  action();
+};
+function nextFrame() {
+  return new Promise((res) => requestAnimationFrame(() => res()));
+}
+class LuzmoAbstractOverlay extends LuzmoElement {
+  constructor() {
+    super(...arguments);
+    this.dispose = noop;
+    this.offset = 0;
+    this.willPreventClose = false;
+  }
+  applyFocus(_targetOpenState, _focusEl) {
+    return;
+  }
+  /* c8 ignore next 6 */
+  get delayed() {
+    return false;
+  }
+  set delayed(_delayed) {
+    return;
+  }
+  /* c8 ignore next 6 */
+  get disabled() {
+    return false;
+  }
+  set disabled(_disabled) {
+    return;
+  }
+  get elementResolver() {
+    return this._elementResolver;
+  }
+  set elementResolver(controller) {
+    this._elementResolver = controller;
+  }
+  /* c8 ignore next 3 */
+  ensureOnDOM(_targetOpenState) {
+    return;
+  }
+  /* c8 ignore next 5 */
+  makeTransition(_targetOpenState) {
+    return null;
+  }
+  manageDelay(_targetOpenState) {
+    return;
+  }
+  /* c8 ignore next 3 */
+  manageDialogOpen() {
+    return;
+  }
+  /* c8 ignore next 3 */
+  managePopoverOpen() {
+    return;
+  }
+  /* c8 ignore next 3 */
+  managePosition() {
+    return;
+  }
+  /* c8 ignore next 6 */
+  get open() {
+    return false;
+  }
+  set open(_open) {
+    return;
+  }
+  get placementController() {
+    return this._placementController;
+  }
+  set placementController(controller) {
+    this._placementController = controller;
+  }
+  requestSlottable() {
+  }
+  returnFocus() {
+    return;
+  }
+  /* c8 ignore next 6 */
+  get state() {
+    return "closed";
+  }
+  set state(_state) {
+    return;
+  }
+  /* c8 ignore next 3 */
+  manuallyKeepOpen() {
+    return;
+  }
+  static update() {
+    const overlayUpdateEvent = new CustomEvent("luzmo-update-overlays", {
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    });
+    document.dispatchEvent(overlayUpdateEvent);
+  }
+  static async open(triggerOrContent, interactionOrOptions, content, optionsV1) {
+    await Promise.resolve().then(() => overlay);
+    const v2 = arguments.length === 2;
+    const overlayContent = content || triggerOrContent;
+    const overlay$1 = new this();
+    let restored = false;
+    const restoreContent = reparentChildren([overlayContent], overlay$1, {
+      position: "beforeend",
+      prepareCallback: (el) => {
+        const slot = el.slot;
+        el.removeAttribute("slot");
+        return () => {
+          el.slot = slot;
+        };
+      }
+    });
+    overlay$1.dispose = () => {
+      overlay$1.addEventListener("luzmo-closed", () => {
+        if (!restored) {
+          restoreContent();
+          restored = true;
+        }
+        requestAnimationFrame(() => {
+          overlay$1.remove();
+        });
+      });
+      overlay$1.open = false;
+      overlay$1.dispose = noop;
+    };
+    const v1 = !v2 && overlayContent && optionsV1;
+    if (v1) {
+      const trigger = triggerOrContent;
+      const interaction = interactionOrOptions;
+      const options2 = optionsV1;
+      LuzmoAbstractOverlay.applyOptions(overlay$1, {
+        ...options2,
+        delayed: options2.delayed || overlayContent.hasAttribute("delayed"),
+        trigger: options2.virtualTrigger || trigger,
+        type: interaction === "modal" ? "modal" : interaction === "hover" ? "hint" : "auto"
+      });
+      trigger.after(overlay$1);
+      await overlay$1.updateComplete;
+      overlay$1.open = true;
+      return overlay$1.dispose;
+    }
+    const options = interactionOrOptions;
+    overlay$1.append(overlayContent);
+    LuzmoAbstractOverlay.applyOptions(overlay$1, {
+      ...options,
+      delayed: options.delayed || overlayContent.hasAttribute("delayed")
+    });
+    overlay$1.updateComplete.then(() => {
+      overlay$1.open = true;
+    });
+    return overlay$1;
+  }
+  static applyOptions(overlay2, options) {
+    overlay2.delayed = !!options.delayed;
+    overlay2.receivesFocus = options.receivesFocus ?? "auto";
+    overlay2.triggerElement = options.trigger || null;
+    overlay2.type = options.type || "modal";
+    overlay2.offset = options.offset ?? 0;
+    overlay2.placement = options.placement;
+    overlay2.willPreventClose = !!options.notImmediatelyClosable;
+  }
+}
+const firstFocusableIn = (root) => {
+  const firstFocusable = root.querySelector(
+    userFocusableSelector
+  );
+  return firstFocusable;
+};
+const firstFocusableSlottedIn = (root) => {
+  const firstFocusable = root.assignedElements().find((element) => element.matches(userFocusableSelector));
+  return firstFocusable;
+};
+class BeforetoggleClosedEvent extends Event {
+  constructor() {
+    super("beforetoggle", {
+      bubbles: false,
+      composed: false
+    });
+    this.currentState = "open";
+    this.newState = "closed";
+  }
+}
+class BeforetoggleOpenEvent extends Event {
+  constructor() {
+    super("beforetoggle", {
+      bubbles: false,
+      composed: false
+    });
+    this.currentState = "closed";
+    this.newState = "open";
+  }
+}
+class OverlayStateEvent extends Event {
+  constructor(type, overlay2, {
+    publish,
+    interaction,
+    reason
+  }) {
+    super(type, {
+      bubbles: publish,
+      composed: publish
+    });
+    this.overlay = overlay2;
+    this.detail = {
+      interaction,
+      reason
+    };
+  }
+}
+class VirtualTrigger {
+  constructor(x, y) {
+    this.x = 0;
+    this.y = 0;
+    this.x = x;
+    this.y = y;
+  }
+  updateBoundingClientRect(x, y) {
+    this.x = x;
+    this.y = y;
+    LuzmoAbstractOverlay.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() {
+        return;
+      }
+    };
+  }
+}
+function OverlayDialog(constructor) {
+  class OverlayWithDialog extends constructor {
+    async manageDialogOpen() {
+      const targetOpenState = this.open;
+      await nextFrame();
+      await this.managePosition();
+      if (this.open !== targetOpenState) {
+        return;
+      }
+      const focusEl = await this.dialogMakeTransition(targetOpenState);
+      if (this.open !== targetOpenState) {
+        return;
+      }
+      await this.dialogApplyFocus(targetOpenState, focusEl);
+    }
+    dialogMakeTransition(targetOpenState) {
+      let focusEl = null;
+      const start = (el, index) => () => {
+        el.open = targetOpenState;
+        if (!targetOpenState) {
+          const close = () => {
+            el.removeEventListener("close", close);
+          };
+          el.addEventListener("close", close);
+        }
+        if (index > 0) {
+          return;
+        }
+        const event = targetOpenState ? BeforetoggleOpenEvent : BeforetoggleClosedEvent;
+        this.dispatchEvent(new event());
+        if (!targetOpenState) {
+          return;
+        }
+        if (el.matches(userFocusableSelector)) {
+          focusEl = el;
+        }
+        focusEl = focusEl || firstFocusableIn(el);
+        if (!focusEl) {
+          const childSlots = el.querySelectorAll("slot");
+          childSlots.forEach((slot) => {
+            if (!focusEl) {
+              focusEl = firstFocusableSlottedIn(slot);
+            }
+          });
+        }
+        if (!this.isConnected || this.dialogEl.open) {
+          return;
+        }
+        this.dialogEl.showModal();
+      };
+      const finish = (el, index) => () => {
+        if (this.open !== targetOpenState) {
+          return;
+        }
+        const eventName = targetOpenState ? "luzmo-opened" : "luzmo-closed";
+        if (index > 0) {
+          el.dispatchEvent(
+            new OverlayStateEvent(eventName, this, {
+              interaction: this.type,
+              publish: false
+            })
+          );
+          return;
+        }
+        if (!this.isConnected || targetOpenState !== this.open) {
+          return;
+        }
+        const reportChange = async () => {
+          const hasVirtualTrigger = this.triggerElement instanceof VirtualTrigger;
+          this.dispatchEvent(
+            new OverlayStateEvent(eventName, this, {
+              interaction: this.type,
+              publish: hasVirtualTrigger
+            })
+          );
+          el.dispatchEvent(
+            new OverlayStateEvent(eventName, this, {
+              interaction: this.type,
+              publish: false
+            })
+          );
+          if (this.triggerElement && !hasVirtualTrigger) {
+            this.triggerElement.dispatchEvent(
+              new OverlayStateEvent(eventName, this, {
+                interaction: this.type,
+                publish: true
+              })
+            );
+          }
+          this.state = targetOpenState ? "opened" : "closed";
+          this.returnFocus();
+          await nextFrame();
+          await nextFrame();
+          if (targetOpenState === this.open && targetOpenState === false) {
+            this.requestSlottable();
+          }
+        };
+        if (!targetOpenState && this.dialogEl.open) {
+          this.dialogEl.addEventListener(
+            "close",
+            () => {
+              reportChange();
+            },
+            { once: true }
+          );
+          this.dialogEl.close();
+        } else {
+          reportChange();
+        }
+      };
+      this.elements.forEach((el, index) => {
+        guaranteedAllTransitionend(el, start(el, index), finish(el, index));
+      });
+      return focusEl;
+    }
+    dialogApplyFocus(targetOpenState, focusEl) {
+      this.applyFocus(targetOpenState, focusEl);
+    }
+  }
+  return OverlayWithDialog;
+}
+function OverlayNoPopover(constructor) {
+  class OverlayWithNoPopover extends constructor {
+    async managePopoverOpen() {
+      await this.managePosition();
+    }
+    async manageDelay(targetOpenState) {
+      if (targetOpenState === false || targetOpenState !== this.open) {
+        overlayTimer.close(this);
+        return;
+      }
+      if (this.delayed) {
+        const cancelled = await overlayTimer.openTimer(this);
+        if (cancelled) {
+          this.open = !targetOpenState;
+        }
+      }
+    }
+    ensureOnDOM(_targetOpenState) {
+      document.body.offsetHeight;
+    }
+    makeTransition(targetOpenState) {
+      if (this.open !== targetOpenState) {
+        return null;
+      }
+      let focusEl = null;
+      const start = (el, index) => () => {
+        if (targetOpenState !== this.open) {
+          return;
+        }
+        el.open = targetOpenState;
+        if (index === 0) {
+          const event = targetOpenState ? BeforetoggleOpenEvent : BeforetoggleClosedEvent;
+          this.dispatchEvent(new event());
+        }
+        if (targetOpenState !== true) {
+          return;
+        }
+        if (el.matches(userFocusableSelector)) {
+          focusEl = el;
+        }
+        focusEl = focusEl || firstFocusableIn(el);
+        if (focusEl) {
+          return;
+        }
+        const childSlots = el.querySelectorAll("slot");
+        childSlots.forEach((slot) => {
+          if (!focusEl) {
+            focusEl = firstFocusableSlottedIn(slot);
+          }
+        });
+      };
+      const finish = (el, index) => async () => {
+        if (this.open !== targetOpenState) {
+          return;
+        }
+        const eventName = targetOpenState ? "luzmo-opened" : "luzmo-closed";
+        el.dispatchEvent(
+          new OverlayStateEvent(eventName, this, {
+            interaction: this.type
+          })
+        );
+        if (index > 0) {
+          return;
+        }
+        const hasVirtualTrigger = this.triggerElement instanceof VirtualTrigger;
+        this.dispatchEvent(
+          new OverlayStateEvent(eventName, this, {
+            interaction: this.type,
+            publish: hasVirtualTrigger
+          })
+        );
+        if (this.triggerElement && !hasVirtualTrigger) {
+          this.triggerElement.dispatchEvent(
+            new OverlayStateEvent(eventName, this, {
+              interaction: this.type,
+              publish: true
+            })
+          );
+        }
+        this.state = targetOpenState ? "opened" : "closed";
+        this.returnFocus();
+        await nextFrame();
+        await nextFrame();
+        if (targetOpenState === this.open && targetOpenState === false) {
+          this.requestSlottable();
+        }
+      };
+      this.elements.forEach((el, index) => {
+        guaranteedAllTransitionend(el, start(el, index), finish(el, index));
+      });
+      return focusEl;
+    }
+  }
+  return OverlayWithNoPopover;
+}
+const supportsOverlayAuto = CSS.supports("(overlay: auto)");
+function isOpen(el) {
+  let popoverOpen = false;
+  try {
+    popoverOpen = el.matches(":popover-open");
+  } catch {
+  }
+  let open = false;
+  try {
+    open = el.matches(":open");
+  } catch {
+  }
+  return popoverOpen || open;
+}
+function OverlayPopover(constructor) {
+  class OverlayWithPopover extends constructor {
+    async manageDelay(targetOpenState) {
+      if (targetOpenState === false || targetOpenState !== this.open) {
+        overlayTimer.close(this);
+        return;
+      }
+      if (this.delayed) {
+        const cancelled = await overlayTimer.openTimer(this);
+        if (cancelled) {
+          this.open = !targetOpenState;
+        }
+      }
+    }
+    /**
+     * 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(targetOpenState) {
+      if (targetOpenState && this.open !== targetOpenState) {
+        return;
+      }
+      const update = async ({
+        newState
+      } = {}) => {
+        if (newState === "open") {
+          return;
+        }
+        await this.placementController.resetOverlayPosition();
+      };
+      if (!isOpen(this.dialogEl)) {
+        update();
+        return;
+      }
+      this.dialogEl.addEventListener("toggle", update, {
+        once: true
+      });
+    }
+    shouldShowPopover(targetOpenState) {
+      let popoverOpen = false;
+      try {
+        popoverOpen = this.dialogEl.matches(":popover-open");
+      } catch {
+      }
+      let open = false;
+      try {
+        open = this.dialogEl.matches(":open");
+      } catch {
+      }
+      if (targetOpenState && this.open === targetOpenState && !popoverOpen && !open && this.isConnected) {
+        this.dialogEl.showPopover();
+        this.managePosition();
+      }
+    }
+    async ensureOnDOM(targetOpenState) {
+      if (!supportsOverlayAuto) {
+        await this.shouldHidePopover(targetOpenState);
+      }
+      this.shouldShowPopover(targetOpenState);
+      await nextFrame();
+    }
+    makeTransition(targetOpenState) {
+      if (this.open !== targetOpenState) {
+        return null;
+      }
+      let focusEl = null;
+      const start = (el, index) => () => {
+        el.open = targetOpenState;
+        if (index === 0) {
+          const event = targetOpenState ? BeforetoggleOpenEvent : BeforetoggleClosedEvent;
+          this.dispatchEvent(new event());
+        }
+        if (!targetOpenState) {
+          return;
+        }
+        if (el.matches(userFocusableSelector)) {
+          focusEl = el;
+        }
+        focusEl = focusEl || firstFocusableIn(el);
+        if (focusEl) {
+          return;
+        }
+        const childSlots = el.querySelectorAll("slot");
+        childSlots.forEach((slot) => {
+          if (!focusEl) {
+            focusEl = firstFocusableSlottedIn(slot);
+          }
+        });
+      };
+      const finish = (el, index) => () => {
+        if (this.open !== targetOpenState) {
+          return;
+        }
+        const eventName = targetOpenState ? "luzmo-opened" : "luzmo-closed";
+        if (index > 0) {
+          el.dispatchEvent(
+            new OverlayStateEvent(eventName, this, {
+              interaction: this.type,
+              publish: false
+            })
+          );
+          return;
+        }
+        const reportChange = async () => {
+          if (this.open !== targetOpenState) {
+            return;
+          }
+          await nextFrame();
+          const hasVirtualTrigger = this.triggerElement instanceof VirtualTrigger;
+          this.dispatchEvent(
+            new OverlayStateEvent(eventName, this, {
+              interaction: this.type,
+              publish: hasVirtualTrigger
+            })
+          );
+          el.dispatchEvent(
+            new OverlayStateEvent(eventName, this, {
+              interaction: this.type,
+              publish: false
+            })
+          );
+          if (this.triggerElement && !hasVirtualTrigger) {
+            this.triggerElement.dispatchEvent(
+              new OverlayStateEvent(eventName, this, {
+                interaction: this.type,
+                publish: true
+              })
+            );
+          }
+          this.state = targetOpenState ? "opened" : "closed";
+          this.returnFocus();
+          await nextFrame();
+          await nextFrame();
+          if (targetOpenState === this.open && targetOpenState === false) {
+            this.requestSlottable();
+          }
+        };
+        if (this.open !== targetOpenState) {
+          return;
+        }
+        const open = isOpen(this.dialogEl);
+        if (targetOpenState !== true && open && this.isConnected) {
+          this.dialogEl.addEventListener(
+            "beforetoggle",
+            () => {
+              reportChange();
+            },
+            { once: true }
+          );
+          this.dialogEl.hidePopover();
+        } else {
+          reportChange();
+        }
+      };
+      this.elements.forEach((el, index) => {
+        guaranteedAllTransitionend(el, start(el, index), finish(el, index));
+      });
+      return focusEl;
+    }
+  }
+  return OverlayWithPopover;
+}
+const supportsPopover = typeof document !== "undefined" && "showPopover" in document.createElement("div");
+class OverlayStack {
+  constructor() {
+    this.root = typeof document === "undefined" ? null : document.body;
+    this.stack = [];
+    this.handleScroll = (event) => {
+      if (typeof document !== "undefined" && event.target !== document && event.target !== document.documentElement && event.target !== document.body) {
+        return;
+      }
+      this.stack.forEach((overlay2) => {
+        if (overlay2.open) {
+          if (overlay2.type === "auto" && overlay2.triggerElement instanceof HTMLElement && overlay2.triggerElement.closest(
+            "luzmo-picker, luzmo-select, luzmo-action-menu"
+          )) {
+            event.stopPropagation();
+          }
+          if (typeof document !== "undefined") {
+            document.dispatchEvent(
+              new CustomEvent("luzmo-update-overlays", {
+                bubbles: true,
+                composed: true,
+                cancelable: true
+              })
+            );
+          }
+        }
+      });
+    };
+    this.handlePointerdown = (event) => {
+      this.pointerdownPath = event.composedPath();
+      this.lastOverlay = this.stack.at(-1);
+    };
+    this.handlePointerup = () => {
+      const composedPath = this.pointerdownPath;
+      this.pointerdownPath = void 0;
+      if (this.stack.length === 0) {
+        return;
+      }
+      if (!(composedPath == null ? void 0 : composedPath.length)) {
+        return;
+      }
+      const lastOverlay = this.lastOverlay;
+      this.lastOverlay = void 0;
+      const lastIndex = this.stack.length - 1;
+      const nonAncestorOverlays = this.stack.filter((overlay2, i) => {
+        const inStack = composedPath.find(
+          (el) => (
+            // The Overlay is in the stack
+            el === overlay2 || // The Overlay trigger is in the stack and the Overlay is a "hint"
+            el === (overlay2 == null ? void 0 : overlay2.triggerElement) && (overlay2 == null ? void 0 : overlay2.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
+            i === lastIndex && overlay2 !== lastOverlay && overlay2.triggerInteraction === "longpress"
+          )
+        );
+        return !inStack && !overlay2.shouldPreventClose() && overlay2.type !== "manual" && // Don't close if this overlay is modal and not on top of the overlay stack.
+        !(overlay2.type === "modal" && lastOverlay !== overlay2);
+      });
+      nonAncestorOverlays.reverse();
+      nonAncestorOverlays.forEach((overlay2) => {
+        this.closeOverlay(overlay2);
+        let parentToClose = overlay2.parentOverlayToForceClose;
+        while (parentToClose) {
+          this.closeOverlay(parentToClose);
+          parentToClose = parentToClose.parentOverlayToForceClose;
+        }
+      });
+    };
+    this.handleBeforetoggle = (event) => {
+      const { target, newState: open } = event;
+      if (open === "open") {
+        return;
+      }
+      this.closeOverlay(target);
+    };
+    this.handleKeydown = (event) => {
+      if (event.code !== "Escape") {
+        return;
+      }
+      if (this.stack.length === 0) {
+        return;
+      }
+      const last = this.stack.at(-1);
+      if ((last == null ? void 0 : last.type) === "page") {
+        event.preventDefault();
+        return;
+      }
+      if ((last == null ? void 0 : last.type) === "manual") {
+        this.closeOverlay(last);
+        return;
+      }
+      if (supportsPopover) {
+        return;
+      }
+      if (!last) {
+        return;
+      }
+      this.closeOverlay(last);
+    };
+    if (typeof document !== "undefined") {
+      this.bindEvents();
+    }
+  }
+  get document() {
+    return this.root.ownerDocument || document;
+  }
+  bindEvents() {
+    if (typeof document !== "undefined") {
+      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: true
+      });
+    }
+  }
+  closeOverlay(overlay2) {
+    const overlayIndex = this.stack.indexOf(overlay2);
+    if (overlayIndex !== -1) {
+      this.stack.splice(overlayIndex, 1);
+    }
+    overlay2.open = false;
+  }
+  /**
+   * Get an array of Overlays that all share the same trigger element.
+   *
+   * @param triggerElement {HTMLELement}
+   * @returns
+   */
+  overlaysByTriggerElement(triggerElement) {
+    return this.stack.filter(
+      (overlay2) => overlay2.triggerElement === triggerElement
+    );
+  }
+  /**
+   * 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(overlay2) {
+    if (this.stack.includes(overlay2)) {
+      const overlayIndex = this.stack.indexOf(overlay2);
+      if (overlayIndex !== -1) {
+        this.stack.splice(overlayIndex, 1);
+        this.stack.push(overlay2);
+      }
+      return;
+    }
+    if (overlay2.type === "auto" || overlay2.type === "modal" || overlay2.type === "page") {
+      const queryPathEventName = "luzmo-overlay-query-path";
+      const queryPathEvent = new Event(queryPathEventName, {
+        composed: true,
+        bubbles: true
+      });
+      overlay2.addEventListener(
+        queryPathEventName,
+        (event) => {
+          const path = event.composedPath();
+          this.stack.forEach((overlayEl) => {
+            const inPath = path.find((el) => el === overlayEl);
+            if (!inPath && overlayEl.type !== "manual" && overlayEl.type !== "modal") {
+              this.closeOverlay(overlayEl);
+            }
+          });
+        },
+        { once: true }
+      );
+      overlay2.dispatchEvent(queryPathEvent);
+    } else if (overlay2.type === "hint") {
+      const hasPrevious = this.stack.some(
+        (overlayEl) => overlayEl.type !== "manual" && overlayEl.triggerElement && overlayEl.triggerElement === overlay2.triggerElement
+      );
+      if (hasPrevious) {
+        overlay2.open = false;
+        return;
+      }
+      this.stack.forEach((overlayEl) => {
+        if (overlayEl.type === "hint") {
+          this.closeOverlay(overlayEl);
+        }
+      });
+    }
+    requestAnimationFrame(() => {
+      this.stack.push(overlay2);
+      overlay2.addEventListener("beforetoggle", this.handleBeforetoggle, {
+        once: true
+      });
+    });
+  }
+  remove(overlay2) {
+    this.closeOverlay(overlay2);
+  }
+}
+const overlayStack = new OverlayStack();
+const styles = ':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 roundByDPR(num) {
+  if (num === void 0) {
+    return 0;
+  }
+  const dpr = window.devicePixelRatio || 1;
+  return Math.round(num * dpr) / dpr;
+}
+const REQUIRED_DISTANCE_TO_EDGE = 8;
+const MIN_OVERLAY_HEIGHT = 100;
+const getFallbackPlacements = (placement) => {
+  const fallbacks = {
+    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"]
+  };
+  return fallbacks[placement] ?? [placement];
+};
+const placementUpdatedSymbol = Symbol("placement updated");
+class PlacementController {
+  /**
+   * Creates an instance of the PlacementController.
+   *
+   * @param host - The host element that uses this controller.
+   */
+  constructor(host) {
+    this.originalPlacements = /* @__PURE__ */ new WeakMap();
+    this.allowPlacementUpdate = false;
+    this.closeForAncestorUpdate = () => {
+      if (!this.allowPlacementUpdate && this.options.type !== "modal" && this.cleanup) {
+        this.target.dispatchEvent(new Event("close", { bubbles: true }));
+      }
+      this.allowPlacementUpdate = false;
+    };
+    this.updatePlacement = () => {
+      this.computePlacement();
+    };
+    this.resetOverlayPosition = () => {
+      if (!this.target || !this.options) {
+        return;
+      }
+      this.clearOverlayPosition();
+      this.host.offsetHeight;
+      this.computePlacement();
+    };
+    this.host = host;
+    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(target = this.target, options = this.options) {
+    this.target = target;
+    this.options = options;
+    if (!target || !options) {
+      return;
+    }
+    const cleanupAncestorResize = autoUpdate(
+      options.trigger,
+      target,
+      this.closeForAncestorUpdate,
+      {
+        ancestorResize: false,
+        elementResize: false,
+        layoutShift: false
+      }
+    );
+    const cleanupElementResize = autoUpdate(
+      options.trigger,
+      target,
+      this.updatePlacement,
+      {
+        ancestorScroll: false
+      }
+    );
+    this.cleanup = () => {
+      var _a2;
+      (_a2 = this.host.elements) == null ? void 0 : _a2.forEach((element) => {
+        element.addEventListener(
+          "luzmo-closed",
+          () => {
+            const placement = this.originalPlacements.get(element);
+            if (placement) {
+              element.setAttribute("placement", placement);
+            }
+            this.originalPlacements.delete(element);
+          },
+          { once: true }
+        );
+      });
+      cleanupAncestorResize();
+      cleanupElementResize();
+    };
+  }
+  /**
+   * 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 _a2, _b;
+    const { options, target } = this;
+    await (document.fonts ? document.fonts.ready : Promise.resolve());
+    const flipMiddleware = options.trigger instanceof HTMLElement ? flip() : flip({
+      padding: REQUIRED_DISTANCE_TO_EDGE,
+      fallbackPlacements: getFallbackPlacements(options.placement)
+    });
+    const [mainAxis = 0, crossAxis = 0] = Array.isArray(options == null ? void 0 : options.offset) ? options.offset : [options.offset, 0];
+    const tipElement = (_a2 = this.host.elements.find(
+      (el) => el.tipElement
+    )) == null ? void 0 : _a2.tipElement;
+    const middleware = [
+      offset({
+        mainAxis,
+        crossAxis
+      }),
+      shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),
+      flipMiddleware,
+      size({
+        padding: REQUIRED_DISTANCE_TO_EDGE,
+        apply: ({ availableWidth, availableHeight, rects: { floating } }) => {
+          const maxHeight = Math.max(
+            MIN_OVERLAY_HEIGHT,
+            Math.floor(availableHeight)
+          );
+          const actualHeight = floating.height;
+          this.initialHeight = this.isConstrained ? this.initialHeight || actualHeight : actualHeight;
+          this.isConstrained = actualHeight < this.initialHeight || maxHeight <= actualHeight;
+          const appliedHeight = this.isConstrained ? `${maxHeight}px` : "";
+          Object.assign(target.style, {
+            maxWidth: `${Math.floor(availableWidth)}px`,
+            maxHeight: appliedHeight
+          });
+        }
+      }),
+      ...tipElement ? [
+        arrow({
+          element: tipElement,
+          padding: options.tipPadding || REQUIRED_DISTANCE_TO_EDGE
+        })
+      ] : []
+    ];
+    const { x, y, placement, middlewareData } = await computePosition(
+      options.trigger,
+      target,
+      {
+        placement: options.placement,
+        middleware,
+        strategy: "fixed"
+      }
+    );
+    Object.assign(target.style, {
+      top: "0px",
+      left: "0px",
+      translate: `${roundByDPR(x)}px ${roundByDPR(y)}px`
+    });
+    target.setAttribute("actual-placement", placement);
+    (_b = this.host.elements) == null ? void 0 : _b.forEach((element) => {
+      if (!this.originalPlacements.has(element)) {
+        this.originalPlacements.set(
+          element,
+          element.getAttribute("placement")
+        );
+      }
+      element.setAttribute("placement", placement);
+    });
+    if (tipElement && middlewareData.arrow) {
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
+      Object.assign(tipElement.style, {
+        top: placement.startsWith("right") || placement.startsWith("left") ? "0px" : "",
+        left: placement.startsWith("bottom") || placement.startsWith("top") ? "0px" : "",
+        translate: `${roundByDPR(arrowX)}px ${roundByDPR(arrowY)}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() {
+    if (!this.target) {
+      return;
+    }
+    this.target.style.removeProperty("max-height");
+    this.target.style.removeProperty("max-width");
+    this.initialHeight = void 0;
+    this.isConstrained = false;
+  }
+  /**
+   * 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 _a2;
+    if (!this.host.open) {
+      (_a2 = this.cleanup) == null ? void 0 : _a2.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 _a2;
+    (_a2 = this.cleanup) == null ? void 0 : _a2.call(this);
+    this.cleanup = void 0;
+    document.removeEventListener(
+      "luzmo-update-overlays",
+      this.resetOverlayPosition
+    );
+  }
+}
+var InteractionTypes = /* @__PURE__ */ ((InteractionTypes2) => {
+  InteractionTypes2["click"] = "click";
+  InteractionTypes2["hover"] = "hover";
+  InteractionTypes2["longpress"] = "longpress";
+  return InteractionTypes2;
+})(InteractionTypes || {});
+const lastInteractionType = Symbol("lastInteractionType");
+const SAFARI_FOCUS_RING_CLASS = "remove-focus-ring-safari-hack";
+class InteractionController {
+  constructor(target, { overlay: overlay2, isPersistent, handleOverlayReady }) {
+    this.target = target;
+    this.isLazilyOpen = false;
+    this.isPersistent = false;
+    this.isPersistent = !!isPersistent;
+    this.handleOverlayReady = handleOverlayReady;
+    if (this.isPersistent) {
+      this.init();
+    }
+    this.overlay = overlay2;
+  }
+  get activelyOpening() {
+    return false;
+  }
+  get open() {
+    var _a2;
+    return ((_a2 = this.overlay) == null ? void 0 : _a2.open) ?? this.isLazilyOpen;
+  }
+  /**
+   * Set `open` against the associated Overlay lazily.
+   */
+  set open(open) {
+    if (open === this.open) {
+      return;
+    }
+    this.isLazilyOpen = open;
+    if (this.overlay) {
+      this.overlay.open = open;
+      this.target[lastInteractionType] = this.type;
+      return;
+    }
+    if (!open) {
+      return;
+    }
+    customElements.whenDefined("luzmo-overlay").then(async () => {
+      const { LuzmoOverlay: LuzmoOverlay2 } = await Promise.resolve().then(() => overlay);
+      this.overlay = new LuzmoOverlay2();
+      this.overlay.open = true;
+      this.target[lastInteractionType] = this.type;
+    });
+    Promise.resolve().then(() => overlay);
+  }
+  get overlay() {
+    return this._overlay;
+  }
+  set overlay(overlay2) {
+    var _a2;
+    if (!overlay2) {
+      return;
+    }
+    if (this.overlay === overlay2) {
+      return;
+    }
+    if (this.overlay) {
+      this.overlay.removeController(this);
+    }
+    this._overlay = overlay2;
+    this.overlay.addController(this);
+    this.initOverlay();
+    this.prepareDescription(this.target);
+    (_a2 = this.handleOverlayReady) == null ? void 0 : _a2.call(this, this.overlay);
+  }
+  prepareDescription(_) {
+  }
+  releaseDescription() {
+  }
+  shouldCompleteOpen() {
+  }
+  /* c8 ignore next 3 */
+  init() {
+  }
+  /* c8 ignore next 3 */
+  initOverlay() {
+  }
+  abort() {
+    var _a2;
+    this.releaseDescription();
+    (_a2 = this.abortController) == null ? void 0 : _a2.abort();
+  }
+  hostConnected() {
+    this.init();
+  }
+  hostDisconnected() {
+    if (!this.isPersistent) {
+      this.abort();
+    }
+  }
+}
+class ClickController extends InteractionController {
+  constructor() {
+    super(...arguments);
+    this.type = InteractionTypes.click;
+    this.preventNextToggle = false;
+  }
+  handleClick() {
+    if (!this.preventNextToggle) {
+      this.open = !this.open;
+    }
+    this.preventNextToggle = false;
+  }
+  handlePointerdown() {
+    this.preventNextToggle = this.open;
+  }
+  init() {
+    var _a2;
+    (_a2 = this.abortController) == null ? void 0 : _a2.abort();
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+    this.target.addEventListener("click", () => this.handleClick(), {
+      signal
+    });
+    this.target.addEventListener(
+      "pointerdown",
+      () => this.handlePointerdown(),
+      { signal }
+    );
+  }
+}
+const HOVER_DELAY = 300;
+class HoverController extends InteractionController {
+  constructor() {
+    super(...arguments);
+    this.type = InteractionTypes.hover;
+    this.elementIds = [];
+    this.focusedin = false;
+    this.pointerentered = false;
+  }
+  handleKeyup(event) {
+    if (event.code === "Tab" || event.code === "Escape") {
+      this.open = true;
+      this.removeSafariFocusRingClass();
+    }
+  }
+  handleTargetFocusin() {
+    if (!this.target.matches(":focus-visible")) {
+      return;
+    }
+    if (isWebKit() && this.target[lastInteractionType] === InteractionTypes.click) {
+      this.target.classList.add(SAFARI_FOCUS_RING_CLASS);
+      return;
+    }
+    this.open = true;
+    this.focusedin = true;
+    this.removeSafariFocusRingClass();
+  }
+  handleTargetFocusout() {
+    this.removeSafariFocusRingClass();
+    this.focusedin = false;
+    if (this.pointerentered) {
+      return;
+    }
+    this.open = false;
+  }
+  handleTargetPointerenter() {
+    var _a2;
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = void 0;
+    }
+    if ((_a2 = this.overlay) == null ? void 0 : _a2.disabled) {
+      return;
+    }
+    this.open = true;
+    this.pointerentered = true;
+  }
+  handleTargetPointerleave() {
+    this.doPointerleave();
+  }
+  // set a timeout once the pointer enters and the overlay is shown
+  // give the user time to enter the overlay
+  handleHostPointerenter() {
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = void 0;
+    }
+  }
+  handleHostPointerleave() {
+    this.doPointerleave();
+  }
+  prepareDescription() {
+    if (this.overlay.elements.length === 0) {
+      return;
+    }
+    const triggerRoot = this.target.getRootNode();
+    const contentRoot = this.overlay.elements[0].getRootNode();
+    const overlayRoot = this.overlay.getRootNode();
+    if (triggerRoot === overlayRoot) {
+      this.prepareOverlayRelativeDescription();
+    } else if (triggerRoot === contentRoot) {
+      this.prepareContentRelativeDescription();
+    }
+  }
+  prepareOverlayRelativeDescription() {
+    const releaseDescription = conditionAttributeWithId(
+      this.target,
+      "aria-describedby",
+      [this.overlay.id]
+    );
+    this.releaseDescription = () => {
+      releaseDescription();
+      this.releaseDescription = noop;
+    };
+  }
+  prepareContentRelativeDescription() {
+    const elementIds = [];
+    const appliedIds = this.overlay.elements.map((el) => {
+      elementIds.push(el.id);
+      if (!el.id) {
+        el.id = `${this.overlay.tagName.toLowerCase()}-helper-${randomID()}`;
+      }
+      return el.id;
+    });
+    this.elementIds = elementIds;
+    const releaseDescription = conditionAttributeWithId(
+      this.target,
+      "aria-describedby",
+      appliedIds
+    );
+    this.releaseDescription = () => {
+      releaseDescription();
+      this.overlay.elements.map((el, index) => {
+        el.id = this.elementIds[index];
+      });
+      this.releaseDescription = noop;
+    };
+  }
+  doPointerleave() {
+    this.pointerentered = false;
+    const triggerElement = this.target;
+    if (this.focusedin && triggerElement.matches(":focus-visible")) {
+      return;
+    }
+    this.hoverTimeout = setTimeout(() => {
+      this.open = false;
+    }, HOVER_DELAY);
+  }
+  init() {
+    var _a2;
+    (_a2 = this.abortController) == null ? void 0 : _a2.abort();
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+    this.target.addEventListener("keyup", (event) => this.handleKeyup(event), {
+      signal
+    });
+    this.target.addEventListener("focusin", () => this.handleTargetFocusin(), {
+      signal
+    });
+    this.target.addEventListener(
+      "focusout",
+      () => this.handleTargetFocusout(),
+      { signal }
+    );
+    this.target.addEventListener(
+      "pointerenter",
+      () => this.handleTargetPointerenter(),
+      { signal }
+    );
+    this.target.addEventListener(
+      "pointerleave",
+      () => this.handleTargetPointerleave(),
+      { signal }
+    );
+    if (this.overlay) {
+      this.initOverlay();
+    }
+  }
+  initOverlay() {
+    if (!this.abortController) {
+      return;
+    }
+    const { signal } = this.abortController;
+    this.overlay.addEventListener(
+      "pointerenter",
+      () => this.handleHostPointerenter(),
+      { signal }
+    );
+    this.overlay.addEventListener(
+      "pointerleave",
+      () => this.handleHostPointerleave(),
+      { signal }
+    );
+  }
+  removeSafariFocusRingClass() {
+    if (isWebKit() && this.target.classList.contains(SAFARI_FOCUS_RING_CLASS))
+      this.target.classList.remove(SAFARI_FOCUS_RING_CLASS);
+  }
+}
+const longPressDuration = 300;
+const LONGPRESS_INSTRUCTIONS = {
+  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 LongpressController extends InteractionController {
+  constructor() {
+    super(...arguments);
+    this.type = InteractionTypes.longpress;
+    this.longpressState = null;
+    this.releaseDescription = noop;
+    this.handlePointerup = () => {
+      var _a2;
+      clearTimeout(this.timeout);
+      if (!this.target) {
+        return;
+      }
+      this.longpressState = ((_a2 = this.overlay) == null ? void 0 : _a2.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 = true;
+    this.longpressState = this.longpressState === "potential" ? "opening" : "pressed";
+  }
+  handlePointerdown(event) {
+    if (!this.target) {
+      return;
+    }
+    if (event.button !== 0) {
+      return;
+    }
+    this.longpressState = "potential";
+    document.addEventListener("pointerup", this.handlePointerup);
+    document.addEventListener("pointercancel", this.handlePointerup);
+    const triggerHandlesLongpress = "holdAffordance" in this.target;
+    if (triggerHandlesLongpress) {
+      return;
+    }
+    this.timeout = setTimeout(() => {
+      if (!this.target) {
+        return;
+      }
+      this.target.dispatchEvent(
+        new CustomEvent("longpress", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            source: "pointer"
+          }
+        })
+      );
+    }, longPressDuration);
+  }
+  handleKeydown(event) {
+    const { code, altKey } = event;
+    if (altKey && code === "ArrowDown") {
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+    }
+  }
+  handleKeyup(event) {
+    const { code, altKey } = event;
+    if (code === "Space" || altKey && code === "ArrowDown") {
+      if (!this.target) {
+        return;
+      }
+      event.stopPropagation();
+      this.target.dispatchEvent(
+        new CustomEvent("longpress", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            source: "keyboard"
+          }
+        })
+      );
+      setTimeout(() => {
+        this.longpressState = null;
+      });
+    }
+  }
+  prepareDescription(trigger) {
+    if (
+      // do not reapply until target is recycled
+      this.releaseDescription !== noop || // require "longpress content" to apply relationship
+      this.overlay.elements.length === 0
+    ) {
+      return;
+    }
+    const longpressDescription = document.createElement("div");
+    longpressDescription.id = `longpress-describedby-descriptor-${randomID()}`;
+    const messageType = isIOS() || isAndroid() ? "touch" : "keyboard";
+    longpressDescription.textContent = LONGPRESS_INSTRUCTIONS[messageType];
+    longpressDescription.slot = "longpress-describedby-descriptor";
+    const triggerParent = trigger.getRootNode();
+    const overlayParent = this.overlay.getRootNode();
+    if (triggerParent === overlayParent) {
+      this.overlay.append(longpressDescription);
+    } else {
+      longpressDescription.hidden = !("host" in triggerParent);
+      trigger.after(longpressDescription);
+    }
+    const releaseDescription = conditionAttributeWithId(
+      trigger,
+      "aria-describedby",
+      [longpressDescription.id]
+    );
+    this.releaseDescription = () => {
+      releaseDescription();
+      longpressDescription.remove();
+      this.releaseDescription = noop;
+    };
+  }
+  shouldCompleteOpen() {
+    this.longpressState = this.longpressState === "pressed" ? null : this.longpressState;
+  }
+  init() {
+    var _a2;
+    (_a2 = this.abortController) == null ? void 0 : _a2.abort();
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+    this.target.addEventListener("longpress", () => this.handleLongpress(), {
+      signal
+    });
+    this.target.addEventListener(
+      "pointerdown",
+      (event) => this.handlePointerdown(event),
+      { signal }
+    );
+    this.prepareDescription(this.target);
+    if (this.target.holdAffordance) {
+      return;
+    }
+    this.target.addEventListener(
+      "keydown",
+      (event) => this.handleKeydown(event),
+      { signal }
+    );
+    this.target.addEventListener(
+      "keyup",
+      (event) => this.handleKeyup(event),
+      { signal }
+    );
+  }
+}
+const strategies = {
+  click: ClickController,
+  longpress: LongpressController,
+  hover: HoverController
+};
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const browserSupportsPopover = typeof document !== "undefined" && "showPopover" in document.createElement("div");
+let ComputedOverlayBase = OverlayDialog(LuzmoAbstractOverlay);
+ComputedOverlayBase = browserSupportsPopover ? OverlayPopover(ComputedOverlayBase) : OverlayNoPopover(ComputedOverlayBase);
+const _LuzmoOverlay = (_a = class extends ComputedOverlayBase {
+  constructor() {
+    super(...arguments);
+    this._delayed = false;
+    this._disabled = false;
+    this.offset = 0;
+    this._open = false;
+    this.lastRequestSlottableState = false;
+    this.receivesFocus = "auto";
+    this._state = "closed";
+    this.triggerElement = null;
+    this.type = "auto";
+    this.wasOpen = false;
+    this.closeOnFocusOut = (event) => {
+      if (!event.relatedTarget) {
+        return;
+      }
+      const relationEvent = new Event("overlay-relation-query", {
+        bubbles: true,
+        composed: true
+      });
+      event.relatedTarget.addEventListener(relationEvent.type, (e) => {
+        const path = e.composedPath();
+        const isWithinOverlay = path.includes(this);
+        if (!isWithinOverlay) {
+          this.open = false;
+        }
+      });
+      event.relatedTarget.dispatchEvent(relationEvent);
+    };
+  }
+  get delayed() {
+    var _a2;
+    return ((_a2 = this.elements.at(-1)) == null ? void 0 : _a2.hasAttribute("delayed")) || this._delayed;
+  }
+  set delayed(delayed) {
+    this._delayed = delayed;
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  set disabled(disabled) {
+    var _a2;
+    this._disabled = disabled;
+    if (disabled) {
+      (_a2 = this.strategy) == null ? void 0 : _a2.abort();
+      this.wasOpen = this.open;
+      this.open = false;
+    } else {
+      this.bindEvents();
+      this.open = this.open || this.wasOpen;
+      this.wasOpen = false;
+    }
+  }
+  /**
+   * 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 VirtualTrigger);
+  }
+  /**
+   * 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() {
+    if (!this._placementController) {
+      this._placementController = new PlacementController(this);
+    }
+    return this._placementController;
+  }
+  get open() {
+    return this._open;
+  }
+  set open(open) {
+    var _a2;
+    if (open && this.disabled) {
+      return;
+    }
+    if (open === this.open) {
+      return;
+    }
+    if (((_a2 = this.strategy) == null ? void 0 : _a2.activelyOpening) && !open) {
+      return;
+    }
+    this._open = open;
+    if (this.open) {
+      _a.openCount += 1;
+    }
+    this.requestUpdate("open", !this.open);
+    if (this.open) {
+      this.requestSlottable();
+    }
+  }
+  get state() {
+    return this._state;
+  }
+  set state(state2) {
+    var _a2;
+    if (state2 === this.state) {
+      return;
+    }
+    const oldState = this.state;
+    this._state = state2;
+    if (this.state === "opened" || this.state === "closed") {
+      (_a2 = this.strategy) == null ? void 0 : _a2.shouldCompleteOpen();
+    }
+    this.requestUpdate("state", oldState);
+  }
+  /**
+   * 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() {
+    if (!this._elementResolver) {
+      this._elementResolver = new ElementResolutionController(this);
+    }
+    return 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() {
+    const hasPopoverAttribute = "popover" in this;
+    if (!hasPopoverAttribute) {
+      return void 0;
+    }
+    switch (this.type) {
+      case "modal":
+      case "page": {
+        return void 0;
+      }
+      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() {
+    if (this.type === "page" || !this.open) {
+      return false;
+    }
+    if (!this.triggerElement || !this.placement && this.type !== "hint") {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * 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 offset2 = this.offset || 0;
+    const trigger = this.triggerElement;
+    const placement = this.placement || "right";
+    const tipPadding = this.tipPadding;
+    this.placementController.placeOverlay(this.dialogEl, {
+      offset: offset2,
+      placement,
+      tipPadding,
+      trigger,
+      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 targetOpenState = this.open;
+    if (this.open !== targetOpenState) {
+      return;
+    }
+    await this.manageDelay(targetOpenState);
+    if (this.open !== targetOpenState) {
+      return;
+    }
+    if (this.triggerInteraction === "longpress") {
+      await nextFrame();
+    }
+    await this.ensureOnDOM(targetOpenState);
+    if (this.open !== targetOpenState) {
+      return;
+    }
+    const focusEl = await this.makeTransition(targetOpenState);
+    if (this.open !== targetOpenState) {
+      return;
+    }
+    await this.applyFocus(targetOpenState, focusEl);
+  }
+  /**
+   * 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(targetOpenState, focusEl) {
+    if (this.receivesFocus === "false" || this.type === "hint") {
+      return;
+    }
+    await nextFrame();
+    await nextFrame();
+    if (targetOpenState === this.open && !this.open) {
+      if (this.hasNonVirtualTrigger && this.contains(this.getRootNode().activeElement)) {
+        this.triggerElement.focus();
+      }
+      return;
+    }
+    focusEl == null ? void 0 : focusEl.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 _a2;
+    if (this.open || this.type === "hint") {
+      return;
+    }
+    const getAncestors = () => {
+      var _a3, _b;
+      const ancestors = [];
+      let currentNode = typeof document !== "undefined" ? document.activeElement : null;
+      while ((_a3 = currentNode == null ? void 0 : currentNode.shadowRoot) == null ? void 0 : _a3.activeElement) {
+        currentNode = currentNode.shadowRoot.activeElement;
+      }
+      while (currentNode) {
+        const ancestor = currentNode.assignedSlot || currentNode.parentElement || ((_b = currentNode.getRootNode()) == null ? void 0 : _b.host);
+        if (ancestor) {
+          ancestors.push(ancestor);
+        }
+        currentNode = ancestor;
+      }
+      return ancestors;
+    };
+    if (this.receivesFocus !== "false" && !!((_a2 = this.triggerElement) == null ? void 0 : _a2.focus) && (this.contains(this.getRootNode().activeElement) || getAncestors().includes(this) || typeof document !== "undefined" && 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(oldOpen) {
+    if (!this.isConnected && this.open) {
+      return;
+    }
+    if (!this.hasUpdated) {
+      await this.updateComplete;
+    }
+    if (this.open) {
+      overlayStack.add(this);
+      if (this.willPreventClose) {
+        document.addEventListener(
+          "pointerup",
+          () => {
+            this.dialogEl.classList.toggle("not-immediately-closable", false);
+            this.willPreventClose = false;
+          },
+          { once: true }
+        );
+        this.dialogEl.classList.toggle("not-immediately-closable", true);
+      }
+    } else {
+      if (oldOpen) {
+        this.dispose();
+      }
+      overlayStack.remove(this);
+    }
+    if (this.open && this.state !== "opened") {
+      this.state = "opening";
+    } else if (!this.open && this.state !== "closed") {
+      this.state = "closing";
+    }
+    if (this.usesDialog) {
+      this.manageDialogOpen();
+    } else {
+      this.managePopoverOpen();
+    }
+    if (this.type === "auto") {
+      const listenerRoot = this.getRootNode();
+      if (this.open) {
+        listenerRoot.addEventListener("focusout", this.closeOnFocusOut, {
+          capture: true
+        });
+      } else {
+        listenerRoot.removeEventListener("focusout", this.closeOnFocusOut, {
+          capture: true
+        });
+      }
+    }
+  }
+  /**
+   * 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 _a2;
+    (_a2 = this.strategy) == null ? void 0 : _a2.abort();
+    this.strategy = void 0;
+    if (!this.hasNonVirtualTrigger) {
+      return;
+    }
+    if (!this.triggerInteraction) {
+      return;
+    }
+    this.strategy = new strategies[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(event) {
+    if (event.newState !== "open") {
+      this.handleBrowserClose(event);
+    }
+  }
+  /**
+   * 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(event) {
+    var _a2;
+    event.stopPropagation();
+    if (!((_a2 = this.strategy) == null ? void 0 : _a2.activelyOpening)) {
+      this.open = false;
+      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 = true;
+    this.placementController.allowPlacementUpdate = true;
+    this.manageOpen(false);
+  }
+  /**
+   * 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 _a2, _b;
+    if (this.elements.length === 0) {
+      (_a2 = this.strategy) == null ? void 0 : _a2.releaseDescription();
+    } else if (this.hasNonVirtualTrigger) {
+      (_b = this.strategy) == null ? void 0 : _b.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 shouldPreventClose = this.willPreventClose;
+    this.willPreventClose = false;
+    return shouldPreventClose;
+  }
+  /**
+   * 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() {
+    if (this.lastRequestSlottableState === this.open) {
+      return;
+    }
+    if (!this.open) {
+      document.body.offsetHeight;
+    }
+    this.dispatchEvent(
+      new SlottableRequestEvent(
+        "overlay-content",
+        this.open ? {} : removeSlottableRequest
+      )
+    );
+    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(changes) {
+    var _a2;
+    if (!this.hasAttribute("id")) {
+      this.setAttribute("id", `${this.tagName.toLowerCase()}-${randomID()}`);
+    }
+    if (changes.has("open") && (this.hasUpdated || this.open)) {
+      this.manageOpen(changes.get("open"));
+    }
+    if (changes.has("trigger")) {
+      const [id, interaction] = ((_a2 = this.trigger) == null ? void 0 : _a2.split("@")) || [];
+      this.elementResolver.selector = id ? `#${id}` : "";
+      this.triggerInteraction = interaction;
+    }
+    let oldTrigger = false;
+    if (changes.has(elementResolverUpdatedSymbol)) {
+      oldTrigger = this.triggerElement;
+      this.triggerElement = this.elementResolver.element;
+    }
+    if (changes.has("triggerElement")) {
+      oldTrigger = changes.get("triggerElement");
+    }
+    if (oldTrigger !== false) {
+      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(changes) {
+    super.updated(changes);
+    if (changes.has("placement")) {
+      if (this.placement) {
+        this.dialogEl.setAttribute("actual-placement", this.placement);
+      } else {
+        this.dialogEl.removeAttribute("actual-placement");
+      }
+      if (this.open && changes.get("placement") !== void 0) {
+        this.placementController.resetOverlayPosition();
+      }
+    }
+    if (changes.has("state") && this.state === "closed" && changes.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 html` <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": _a.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 html`
+      <dialog
+        class="dialog"
+        part="dialog"
+        placement=${ifDefined(
+      this.requiresPositioning ? this.placement || "right" : void 0
+    )}
+        style=${styleMap(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 html`
+      <div
+        class="dialog"
+        part="dialog"
+        placement=${ifDefined(
+      this.requiresPositioning ? this.placement || "right" : void 0
+    )}
+        popover=${ifDefined(this.popoverValue)}
+        style=${styleMap(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 isDialog = this.type === "modal" || this.type === "page";
+    return html`
+      ${isDialog ? 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 = false;
+    });
+    if (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 _a2;
+    (_a2 = this.strategy) == null ? void 0 : _a2.releaseDescription();
+    this.open = false;
+    super.disconnectedCallback();
+  }
+}, _a.styles = [unsafeCSS(styles)], _a.openCount = 1, _a);
+__decorateClass([
+  property({ type: Boolean })
+], _LuzmoOverlay.prototype, "delayed", 1);
+__decorateClass([
+  query(".dialog")
+], _LuzmoOverlay.prototype, "dialogEl", 2);
+__decorateClass([
+  property({ type: Boolean })
+], _LuzmoOverlay.prototype, "disabled", 1);
+__decorateClass([
+  queryAssignedElements({
+    flatten: true,
+    selector: ':not([slot="longpress-describedby-descriptor"], slot)'
+  })
+], _LuzmoOverlay.prototype, "elements", 2);
+__decorateClass([
+  property({ type: Number })
+], _LuzmoOverlay.prototype, "offset", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _LuzmoOverlay.prototype, "open", 1);
+__decorateClass([
+  property()
+], _LuzmoOverlay.prototype, "placement", 2);
+__decorateClass([
+  property({ attribute: "receives-focus" })
+], _LuzmoOverlay.prototype, "receivesFocus", 2);
+__decorateClass([
+  query("slot")
+], _LuzmoOverlay.prototype, "slotEl", 2);
+__decorateClass([
+  state()
+], _LuzmoOverlay.prototype, "state", 1);
+__decorateClass([
+  property({ type: Number, attribute: "tip-padding" })
+], _LuzmoOverlay.prototype, "tipPadding", 2);
+__decorateClass([
+  property()
+], _LuzmoOverlay.prototype, "trigger", 2);
+__decorateClass([
+  property({ attribute: false })
+], _LuzmoOverlay.prototype, "triggerElement", 2);
+__decorateClass([
+  property({ attribute: false })
+], _LuzmoOverlay.prototype, "triggerInteraction", 2);
+__decorateClass([
+  property()
+], _LuzmoOverlay.prototype, "type", 2);
+let LuzmoOverlay = _LuzmoOverlay;
+const overlay = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  LuzmoOverlay
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  ClickController as C,
+  HoverController as H,
+  InteractionTypes as I,
+  LuzmoAbstractOverlay as L,
+  PlacementController as P,
+  SAFARI_FOCUS_RING_CLASS as S,
+  VirtualTrigger as V,
+  nextFrame as a,
+  InteractionController as b,
+  LONGPRESS_INSTRUCTIONS as c,
+  LongpressController as d,
+  LuzmoOverlay as e,
+  overlay as f,
+  guaranteedAllTransitionend as g,
+  lastInteractionType as l,
+  noop as n,
+  overlayTimer as o,
+  placementUpdatedSymbol as p,
+  strategies as s
+};