@luzmo/lucero 1.0.1-alpha.18 → 1.0.1-alpha.19

package/components/overlay-LViy9VWM.cjs

@@ -1,2484 +0,0 @@
-/*! * 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.
- * */
-"use strict";
-var _a;
-const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-const ifDefined_js = require("lit/directives/if-defined.js");
-const styleMap_js = require("lit/directives/style-map.js");
-const randomId = require("./random-id-BE6HA503.cjs");
-const elementResolution = require("./element-resolution-DCsrhGZO.cjs");
-const base = require("./base-COw9n7UR.cjs");
-const focusableSelectors = require("./focusable-selectors-D0t_5P7C.cjs");
-const dom = require("@floating-ui/dom");
-const slottableRequestEvent = require("./slottable-request-event-CANixJnR.cjs");
-const conditionAttributeWithId = require("./condition-attribute-with-id-DEc2Yjne.cjs");
-const platform = require("./platform-CxDar3Dn.cjs");
-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 base.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(
-    focusableSelectors.userFocusableSelector
-  );
-  return firstFocusable;
-};
-const firstFocusableSlottedIn = (root) => {
-  const firstFocusable = root.assignedElements().find((element) => element.matches(focusableSelectors.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(focusableSelectors.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(focusableSelectors.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(focusableSelectors.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 = dom.autoUpdate(
-      options.trigger,
-      target,
-      this.closeForAncestorUpdate,
-      {
-        ancestorResize: false,
-        elementResize: false,
-        layoutShift: false
-      }
-    );
-    const cleanupElementResize = dom.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 ? dom.flip() : dom.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 = [
-      dom.offset({
-        mainAxis,
-        crossAxis
-      }),
-      dom.shift({ padding: REQUIRED_DISTANCE_TO_EDGE }),
-      flipMiddleware,
-      dom.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 ? [
-        dom.arrow({
-          element: tipElement,
-          padding: options.tipPadding || REQUIRED_DISTANCE_TO_EDGE
-        })
-      ] : []
-    ];
-    const { x, y, placement, middlewareData } = await dom.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 (platform.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.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.randomID()}`;
-      }
-      return el.id;
-    });
-    this.elementIds = elementIds;
-    const releaseDescription = conditionAttributeWithId.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 (platform.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.randomID()}`;
-    const messageType = platform.isIOS() || platform.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.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 elementResolution.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 offset = this.offset || 0;
-    const trigger = this.triggerElement;
-    const placement = this.placement || "right";
-    const tipPadding = this.tipPadding;
-    this.placementController.placeOverlay(this.dialogEl, {
-      offset,
-      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.SlottableRequestEvent(
-        "overlay-content",
-        this.open ? {} : slottableRequestEvent.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.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(elementResolution.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 lit.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 lit.html`
-      <dialog
-        class="dialog"
-        part="dialog"
-        placement=${ifDefined_js.ifDefined(
-      this.requiresPositioning ? this.placement || "right" : void 0
-    )}
-        style=${styleMap_js.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 lit.html`
-      <div
-        class="dialog"
-        part="dialog"
-        placement=${ifDefined_js.ifDefined(
-      this.requiresPositioning ? this.placement || "right" : void 0
-    )}
-        popover=${ifDefined_js.ifDefined(this.popoverValue)}
-        style=${styleMap_js.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 lit.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 = [lit.unsafeCSS(styles)], _a.openCount = 1, _a);
-__decorateClass([
-  decorators_js.property({ type: Boolean })
-], _LuzmoOverlay.prototype, "delayed", 1);
-__decorateClass([
-  decorators_js.query(".dialog")
-], _LuzmoOverlay.prototype, "dialogEl", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean })
-], _LuzmoOverlay.prototype, "disabled", 1);
-__decorateClass([
-  decorators_js.queryAssignedElements({
-    flatten: true,
-    selector: ':not([slot="longpress-describedby-descriptor"], slot)'
-  })
-], _LuzmoOverlay.prototype, "elements", 2);
-__decorateClass([
-  decorators_js.property({ type: Number })
-], _LuzmoOverlay.prototype, "offset", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], _LuzmoOverlay.prototype, "open", 1);
-__decorateClass([
-  decorators_js.property()
-], _LuzmoOverlay.prototype, "placement", 2);
-__decorateClass([
-  decorators_js.property({ attribute: "receives-focus" })
-], _LuzmoOverlay.prototype, "receivesFocus", 2);
-__decorateClass([
-  decorators_js.query("slot")
-], _LuzmoOverlay.prototype, "slotEl", 2);
-__decorateClass([
-  decorators_js.state()
-], _LuzmoOverlay.prototype, "state", 1);
-__decorateClass([
-  decorators_js.property({ type: Number, attribute: "tip-padding" })
-], _LuzmoOverlay.prototype, "tipPadding", 2);
-__decorateClass([
-  decorators_js.property()
-], _LuzmoOverlay.prototype, "trigger", 2);
-__decorateClass([
-  decorators_js.property({ attribute: false })
-], _LuzmoOverlay.prototype, "triggerElement", 2);
-__decorateClass([
-  decorators_js.property({ attribute: false })
-], _LuzmoOverlay.prototype, "triggerInteraction", 2);
-__decorateClass([
-  decorators_js.property()
-], _LuzmoOverlay.prototype, "type", 2);
-let LuzmoOverlay = _LuzmoOverlay;
-const overlay = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  LuzmoOverlay
-}, Symbol.toStringTag, { value: "Module" }));
-exports.ClickController = ClickController;
-exports.HoverController = HoverController;
-exports.InteractionController = InteractionController;
-exports.InteractionTypes = InteractionTypes;
-exports.LONGPRESS_INSTRUCTIONS = LONGPRESS_INSTRUCTIONS;
-exports.LongpressController = LongpressController;
-exports.LuzmoAbstractOverlay = LuzmoAbstractOverlay;
-exports.LuzmoOverlay = LuzmoOverlay;
-exports.PlacementController = PlacementController;
-exports.SAFARI_FOCUS_RING_CLASS = SAFARI_FOCUS_RING_CLASS;
-exports.VirtualTrigger = VirtualTrigger;
-exports.guaranteedAllTransitionend = guaranteedAllTransitionend;
-exports.lastInteractionType = lastInteractionType;
-exports.nextFrame = nextFrame;
-exports.noop = noop;
-exports.overlay = overlay;
-exports.overlayTimer = overlayTimer;
-exports.placementUpdatedSymbol = placementUpdatedSymbol;
-exports.strategies = strategies;