vrembem 4.0.0-next.30 → 4.0.0-next.31

package/dev/index.umd.cjs

@@ -9,9 +9,73 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 
-  var _handler, _focusable, _handleFocusTrap, _handleFocusLock, _mode, _state, _breakpoint, _handleClick, _handleKeydown, _handleClick2, _handleKeydown2, _eventListeners, _isHovered, _handleKeydown3;
+  var _mode, _handleClick, _handleKeydown, _handleClick2, _handleKeydown2, _eventListeners, _isHovered, _handleKeydown3;
+  const notInert = ":not([inert])";
+  const notNegTabIndex = ':not([tabindex^="-"])';
+  const notDisabled = ":not(:disabled)";
+  const focusableSelectors = [
+    `a[href]${notInert}${notNegTabIndex}`,
+    `area[href]${notInert}${notNegTabIndex}`,
+    `input:not([type="hidden"]):not([type="radio"])${notInert}${notNegTabIndex}${notDisabled}`,
+    `input[type="radio"]${notInert}${notNegTabIndex}${notDisabled}`,
+    `select${notInert}${notNegTabIndex}${notDisabled}`,
+    `textarea${notInert}${notNegTabIndex}${notDisabled}`,
+    `button${notInert}${notNegTabIndex}${notDisabled}`,
+    `details${notInert} > summary:first-of-type${notNegTabIndex}`,
+    `iframe${notInert}${notNegTabIndex}`,
+    `audio[controls]${notInert}${notNegTabIndex}`,
+    `video[controls]${notInert}${notNegTabIndex}`,
+    `[contenteditable]${notInert}${notNegTabIndex}`,
+    `[tabindex]${notInert}${notNegTabIndex}`
+  ];
+  function getDataConfig(el, dataConfig = "config") {
+    const string = el.getAttribute(`data-${dataConfig}`) || "";
+    const json = string.replace(/'/g, '"');
+    return json ? JSON.parse(json) : {};
+  }
+  function getElement(query) {
+    if (typeof query === "string") {
+      return document.getElementById(query);
+    } else if (query instanceof HTMLElement) {
+      return query;
+    } else {
+      return null;
+    }
+  }
+  async function maybeRunMethod(obj, name, ...args) {
+    if (name in obj && typeof obj[name] === "function") {
+      await obj[name](...args);
+    }
+  }
+  function teleportElement(what, where, how) {
+    if (typeof where === "string") {
+      const whereEl = document.querySelector(where);
+      if (!whereEl) {
+        throw new Error(`No teleport reference found for selector: ${where}`);
+      }
+      where = whereEl;
+    } else if (!(where instanceof HTMLElement)) {
+      throw new Error(`Not a valid teleport reference: '${where}'`);
+    }
+    if (typeof where[how] != "function")
+      throw new Error(`Not a valid teleport method: '${how}'`);
+    let returnRef = document.createComment(
+      "teleported #" + what.id
+    );
+    what.before(returnRef);
+    where[how](what);
+    return () => {
+      if (returnRef) {
+        returnRef.after(what);
+        returnRef.remove();
+        returnRef = null;
+      }
+    };
+  }
   function toCamel(value) {
-    return value.split("-").map((word, index2) => index2 === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)).join("");
+    return value.split("-").map(
+      (word, index2) => index2 === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)
+    ).join("");
   }
   function toKebab(value) {
     return value.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
@@ -27,16 +91,24 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     }
     throw new Error(`Could not convert value to milliseconds: ${value}`);
   }
-  function getPrefix() {
-    return getComputedStyle(document.body).getPropertyValue("--vb-prefix").trim();
+  function transition(el, init, interim, final, duration = 0) {
+    return new Promise((resolve) => {
+      el.classList.remove(init);
+      el.classList.add(interim);
+      setTimeout(() => {
+        el.classList.add(final);
+        el.classList.remove(interim);
+        resolve(el);
+      }, toMilliseconds(duration));
+    });
   }
-  function cssVar(property, options) {
+  function cssVar(property, options = {}) {
     const settings = {
       fallback: null,
       element: document.body,
       ...options
     };
-    if (property.slice(0, 2) !== "--") {
+    if (!property.startsWith("--")) {
       const prefixValue = getPrefix();
       if (prefixValue) {
         property = `${prefixValue}${property}`;
@@ -54,10 +126,15 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
     }
   }
-  function getConfig(el, dataConfig = "config") {
-    const string = el.getAttribute(`data-${dataConfig}`) || "";
-    const json = string.replace(/'/g, '"');
-    return json ? JSON.parse(json) : {};
+  async function dispatchLifecycleHook(name, parent2, entry) {
+    await maybeRunMethod(parent2, name, entry);
+    if (entry) {
+      await maybeRunMethod(entry, name);
+    }
+    for (const plugin of parent2.plugins) {
+      await maybeRunMethod(plugin, name, { plugin, parent: parent2, entry });
+    }
+    await parent2.emit(name, entry);
   }
   function getCustomProps(entry) {
     const styles = getComputedStyle(entry.el);
@@ -65,7 +142,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     const keys = entry.getSetting("customProps");
     for (let i = 0; i < keys.length; i++) {
       const prefix = getPrefix();
-      const module2 = entry.context.module.toLowerCase();
+      const module2 = entry.parent.module.toLowerCase();
       const key = toKebab(keys[i]);
       const value = styles.getPropertyValue(`--${prefix}${module2}-${key}`).trim();
       if (value) {
@@ -74,14 +151,8 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     }
     return result;
   }
-  function getElement(query) {
-    if (typeof query === "string") {
-      return document.getElementById(query);
-    } else if (query instanceof HTMLElement) {
-      return query;
-    } else {
-      return null;
-    }
+  function getPrefix() {
+    return getComputedStyle(document.body).getPropertyValue("--vb-prefix").trim();
   }
   function maybeReturnSetting(prop, key, type = "camel") {
     key = type === "camel" ? toCamel(key) : toKebab(key);
@@ -90,7 +161,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   function getSetting(key, options = {}) {
     const {
       fallback,
-      props = ["dataConfig", "customProps", "settings", "context.settings"]
+      props = ["dataConfig", "customProps", "settings", "parent.settings"]
     } = options;
     for (const prop of props) {
       const type = prop !== "customProps" ? "camel" : "kebab";
@@ -102,23 +173,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     if (fallback !== void 0) {
       return fallback;
     }
-    throw new Error(`${this.context.module} setting does not exist: ${key}`);
-  }
-  async function lifecycleHook(name, ...args) {
-    if (name in this && typeof this[name] === "function") {
-      await this[name](...args);
-    }
-  }
-  function transition(el, init, interim, final, duration = 0) {
-    return new Promise((resolve) => {
-      el.classList.remove(init);
-      el.classList.add(interim);
-      setTimeout(() => {
-        el.classList.add(final);
-        el.classList.remove(interim);
-        resolve(el);
-      }, toMilliseconds(duration));
-    });
+    throw new Error(`${this.parent.module} setting does not exist: ${key}`);
   }
   function setOverflowHidden(state, selector) {
     if (selector) {
@@ -138,9 +193,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       els.forEach((el) => {
         if (state) {
           el.inert = true;
-          el.setAttribute("aria-hidden", true);
+          el.setAttribute("aria-hidden", "true");
         } else {
-          el.inert = null;
+          el.inert = false;
           el.removeAttribute("aria-hidden");
         }
       });
@@ -150,308 +205,725 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     setInert(!!state, selectorInert);
     setOverflowHidden(!!state, selectorOverflow);
   }
-  class Breakpoint {
-    constructor(value, handler) {
-      __privateAdd(this, _handler);
-      this.value = value;
-      __privateSet(this, _handler, handler);
-      this.mql = null;
-    }
-    get handler() {
-      return __privateGet(this, _handler);
-    }
-    // Unmount existing handler before setting a new one.
-    set handler(func) {
-      if (this.mql) {
-        this.mql.removeEventListener("change", __privateGet(this, _handler));
-      }
-      __privateSet(this, _handler, func);
-    }
-    mount(value, handler) {
-      if (value) this.value = value;
-      if (handler) __privateSet(this, _handler, handler);
-      if (!this.value) return this;
-      this.mql = window.matchMedia(`(min-width: ${this.value})`);
-      this.mql.addEventListener("change", __privateGet(this, _handler));
-      __privateGet(this, _handler).call(this, this.mql);
-      return this;
+  const eventEmitter = {
+    on(event, listener, ...args) {
+      if (!this.events[event]) {
+        this.events[event] = [];
+      }
+      const listenerExists = this.events[event].some(
+        (entry) => entry.listener === listener
+      );
+      if (!listenerExists) {
+        this.events[event].push({ listener, args });
+      }
+    },
+    off(event, listenerRef) {
+      if (!this.events[event]) return;
+      this.events[event] = this.events[event].filter(
+        (entry) => entry.listener !== listenerRef
+      );
+    },
+    async emit(event, data) {
+      event = event.startsWith("on") ? event.slice(2, 3).toLowerCase() + event.slice(3) : event;
+      if (!this.events[event]) return;
+      for (const { listener, args } of this.events[event]) {
+        await listener(data, ...args);
+      }
     }
-    unmount() {
-      if (!this.mql) return this;
-      this.mql.removeEventListener("change", __privateGet(this, _handler));
-      this.value = null;
-      __privateSet(this, _handler, null);
-      this.mql = null;
-      return this;
+  };
+  class FocusableArray extends Array {
+    constructor(el = null) {
+      super();
+      this.el = el;
+      if (this.el) this.set();
+    }
+    get first() {
+      return this[0];
+    }
+    get last() {
+      return this[this.length - 1];
+    }
+    set(el = this.el) {
+      this.length = 0;
+      this.push(...el.querySelectorAll(focusableSelectors.join(",")));
+    }
+    clear() {
+      this.length = 0;
     }
   }
-  _handler = new WeakMap();
-  class Collection {
-    constructor(options = {}) {
-      this.module = this.constructor.name;
-      this.collection = [];
-      this.settings = Object.assign({
-        dataConfig: "config",
-        customProps: [],
-        teleport: null,
-        teleportMethod: "append"
-      }, options);
+  class FocusTrap {
+    constructor(el = null) {
+      this.el = el;
+      this.focusable = new FocusableArray();
+      this.handleFocusTrap = handleFocusTrap.bind(this);
     }
-    get(value, key = "id") {
-      return this.collection.find((entry) => entry[key] === value);
+    on(el = this.el) {
+      this.focusable.set(el);
+      this.focusable.length ? document.addEventListener("keydown", this.handleFocusTrap) : document.addEventListener("keydown", handleFocusLock);
     }
-    applySettings(obj) {
-      return Object.assign(this.settings, obj);
+    off() {
+      this.focusable.clear();
+      document.removeEventListener("keydown", this.handleFocusTrap);
+      document.removeEventListener("keydown", handleFocusLock);
     }
-    async createEntry(query, config) {
-      return new CollectionEntry(this, query, config);
+  }
+  function handleFocusLock(event) {
+    if (event.key === "Tab" || event.keyCode === 9) event.preventDefault();
+  }
+  function handleFocusTrap(event) {
+    if (event.key !== "Tab" && event.keyCode !== 9) return;
+    const { activeElement } = document;
+    const { el, focusable } = this;
+    const isShiftTab = event.shiftKey;
+    const isFirstOrRoot = activeElement === focusable.first || activeElement === el;
+    const isLastOrRoot = activeElement === focusable.last || activeElement === el;
+    if (isShiftTab && isFirstOrRoot || !isShiftTab && isLastOrRoot) {
+      event.preventDefault();
+      (isShiftTab ? focusable.last : focusable.first).focus();
     }
-    async register(query, config = {}) {
-      await this.deregister((query == null ? void 0 : query.id) || query, true);
-      const entry = await this.createEntry(query, config);
-      await entry.mount();
-      await lifecycleHook.call(this, "beforeRegister", entry);
-      await lifecycleHook.call(entry, "beforeRegister");
-      this.collection.push(entry);
-      await lifecycleHook.call(entry, "afterRegister");
-      await lifecycleHook.call(this, "afterRegister", entry);
-      return entry;
+  }
+  function localStore(key, enable = true) {
+    const local = localStorage.getItem(key);
+    const store = local ? JSON.parse(local) : {};
+    return {
+      get(prop, fallback = void 0) {
+        if (!prop) return store;
+        return prop in store ? store[prop] : fallback;
+      },
+      set(prop, value) {
+        if (value) {
+          store[prop] = value;
+        } else {
+          delete store[prop];
+        }
+        if (enable) localStorage.setItem(key, JSON.stringify(store));
+        return store;
+      }
+    };
+  }
+  class PluginsArray extends Array {
+    constructor(presets2 = {}) {
+      super();
+      this.presets = presets2;
+    }
+    applySettings(plugin) {
+      var _a;
+      const defaults2 = (plugin == null ? void 0 : plugin.defaults) || {};
+      const preset = ((_a = this.presets) == null ? void 0 : _a[plugin.name]) || {};
+      const options = (plugin == null ? void 0 : plugin.options) || {};
+      plugin.settings = { ...defaults2, ...preset, ...options };
+    }
+    validate(plugin) {
+      if (!("name" in plugin) || typeof plugin.name !== "string") {
+        console.error("Plugin requires a name!");
+        return false;
+      }
+      return true;
     }
-    async deregister(id, reReg = false) {
-      const index2 = this.collection.findIndex((entry) => entry.id === id);
-      if (~index2) {
-        const entry = this.collection[index2];
-        await entry.unmount(reReg);
-        await lifecycleHook.call(this, "beforeDeregister", entry);
-        await lifecycleHook.call(entry, "beforeDeregister", reReg);
-        Object.getOwnPropertyNames(entry).forEach((prop) => {
-          if (prop != "beforeDeregister" && prop != "afterDeregister") {
-            delete entry[prop];
+    get(name) {
+      return this.find((plugin) => plugin.name === name);
+    }
+    add(plugin) {
+      if (Array.isArray(plugin)) {
+        plugin.forEach((plugin2) => this.add(plugin2));
+      } else {
+        this.applySettings(plugin);
+        if (this.validate(plugin)) {
+          const index2 = this.findIndex((item) => item.name === plugin.name);
+          if (~index2) {
+            this[index2] = plugin;
+          } else {
+            this.push(plugin);
           }
+        }
+      }
+    }
+    remove(name) {
+      const index2 = this.findIndex((plugin) => plugin.name === name);
+      if (~index2) {
+        this.splice(index2, 1);
+      }
+    }
+  }
+  class StackArray extends Array {
+    constructor(settings = {}) {
+      super();
+      this.settings = settings;
+    }
+    get copy() {
+      return [...this];
+    }
+    get top() {
+      const result = this[this.length - 1];
+      return result ? result : null;
+    }
+    updateIndex() {
+      this.forEach((entry, index2) => {
+        entry.el.style.zIndex = null;
+        const value = getComputedStyle(entry.el)["z-index"];
+        entry.el.style.zIndex = parseInt(value) + index2 + 1;
+      });
+    }
+    onChange() {
+      this.updateIndex();
+      if (typeof this.settings.onChange === "function") {
+        this.settings.onChange();
+      }
+    }
+    add(entry) {
+      this.push(entry);
+      this.onChange();
+    }
+    remove(entry) {
+      const index2 = this.findIndex((item) => item.id === entry.id);
+      if (~index2) {
+        entry.el.style.zIndex = null;
+        this.splice(index2, 1);
+        this.onChange();
+      }
+    }
+    moveToTop(entry) {
+      const index2 = this.findIndex((item) => item.id === entry.id);
+      if (~index2) {
+        this.splice(index2, 1);
+        this.add(entry);
+      }
+    }
+  }
+  const defaults$8 = {
+    condition: true
+  };
+  const colors = {
+    primary: "hsl(152deg 60% 50%)",
+    secondary: "hsl(214deg 50% 50%)",
+    neutral: "hsl(214deg 20% 50%)",
+    important: "hsl(0deg 80% 50%)"
+  };
+  function debug(options = {}) {
+    const props = {
+      name: "debug",
+      defaults: defaults$8,
+      options
+    };
+    function log(name, args = [], colorKeys = ["primary", "secondary"]) {
+      const colorStyles = colorKeys.map((key) => `color: ${colors[key]}`);
+      console.log(`%c📡 DEBUG: %c${name}`, ...colorStyles, ...args);
+    }
+    function getValue(obj, ...args) {
+      return typeof obj === "function" ? obj(...args) : obj;
+    }
+    const refs = {
+      beforeMountRef: log.bind(null, "Event > beforeMount()"),
+      afterMountRef: log.bind(null, "Event > afterMount()"),
+      beforeUnmountRef: log.bind(
+        null,
+        "Event > beforeUnmount()",
+        [],
+        ["important", "neutral"]
+      ),
+      afterUnmountRef: log.bind(
+        null,
+        "Event > afterUnmount()",
+        [],
+        ["important", "neutral"]
+      ),
+      createEntryRef: (entry, { parent: parent2, plugin }) => {
+        if (getValue(plugin.settings.condition, entry)) {
+          const count = parent2.collection.length;
+          log(`Event > createEntry() > [${count}] #${entry.id}`);
+        }
+      },
+      registerEntryRef: (entry, { parent: parent2, plugin }) => {
+        if (getValue(plugin.settings.condition, entry)) {
+          const count = parent2.collection.length;
+          log(`Event > registerEntry() > [${count}] #${entry.id}`);
+        }
+      },
+      destroyEntryRef: (entry, { parent: parent2, plugin }) => {
+        if (getValue(plugin.settings.condition, entry)) {
+          const count = parent2.collection.length;
+          log(
+            `Event > destroyEntry() > [${count}] #${entry.id}`,
+            [],
+            ["important", "neutral"]
+          );
+        }
+      },
+      deregisterEntryRef: (entry, { parent: parent2, plugin }) => {
+        if (getValue(plugin.settings.condition, entry)) {
+          const count = parent2.collection.length;
+          log(
+            `Event > deregisterEntry() > [${count}] #${entry.id}`,
+            [],
+            ["important", "neutral"]
+          );
+        }
+      }
+    };
+    const methods = {
+      // Plugin setup/teardown methods
+      setup({ parent: parent2 }) {
+        log("Plugin > setup()", arguments, ["secondary", "neutral"]);
+        parent2.on("beforeMount", refs.beforeMountRef);
+        parent2.on("createEntry", refs.createEntryRef, { parent: parent2, plugin: this });
+        parent2.on("registerEntry", refs.registerEntryRef, {
+          parent: parent2,
+          plugin: this
         });
-        this.collection.splice(index2, 1);
-        await lifecycleHook.call(entry, "afterDeregister", reReg);
-        await lifecycleHook.call(this, "afterDeregister", entry);
+        parent2.on("afterMount", refs.afterMountRef);
+        parent2.on("beforeUnmount", refs.beforeUnmountRef);
+        parent2.on("destroyEntry", refs.destroyEntryRef, { parent: parent2, plugin: this });
+        parent2.on("deregisterEntry", refs.deregisterEntryRef, {
+          parent: parent2,
+          plugin: this
+        });
+        parent2.on("afterUnmount", refs.afterUnmountRef);
+      },
+      teardown({ parent: parent2 }) {
+        log("Plugin > teardown()", arguments, ["secondary", "neutral"]);
+        parent2.off("beforeMount", refs.beforeMountRef);
+        parent2.off("createEntry", refs.createEntryRef);
+        parent2.off("registerEntry", refs.registerEntryRef);
+        parent2.off("afterMount", refs.afterMountRef);
+        parent2.off("beforeUnmount", refs.beforeUnmountRef);
+        parent2.off("destroyEntry", refs.destroyEntryRef);
+        parent2.off("deregisterEntry", refs.deregisterEntryRef);
+        parent2.off("afterUnmount", refs.afterUnmountRef);
+      },
+      // Mount lifecycle hooks
+      beforeMount() {
+        log("Hook > beforeMount()", arguments);
+      },
+      onCreateEntry({ parent: parent2, entry }) {
+        if (getValue(this.settings.condition, entry)) {
+          const count = parent2.collection.length;
+          log(`Hook > onCreateEntry() > [${count}] #${entry.id}`, arguments);
+        }
+      },
+      onRegisterEntry({ parent: parent2, entry }) {
+        if (getValue(this.settings.condition, entry)) {
+          const count = parent2.collection.length - 1;
+          log(`Hook > onRegisterEntry() > [${count}] #${entry.id}`, arguments);
+        }
+      },
+      afterMount() {
+        log("Hook > afterMount()", arguments);
+      },
+      // Unmount lifecycle hooks
+      beforeUnmount() {
+        log("Hook > beforeUnmount()", arguments, ["important", "neutral"]);
+      },
+      onDestroyEntry({ parent: parent2, entry }) {
+        if (getValue(this.settings.condition, entry)) {
+          const count = parent2.collection.length - 1;
+          log(`Hook > onDestroyEntry() > [${count}] #${entry.id}`, arguments, [
+            "important",
+            "neutral"
+          ]);
+        }
+      },
+      onDeregisterEntry({ parent: parent2, entry }) {
+        if (getValue(this.settings.condition, entry)) {
+          const count = parent2.collection.length;
+          log(`Hook > onDeregisterEntry() > [${count}] #${entry.id}`, arguments, [
+            "important",
+            "neutral"
+          ]);
+        }
+      },
+      afterUnmount() {
+        log("Hook > afterUnmount()", arguments, ["important", "neutral"]);
+      }
+    };
+    return { ...props, ...methods };
+  }
+  const defaults$7 = {
+    condition: true
+  };
+  function focusTrap(options = {}) {
+    const props = {
+      name: "focusTrap",
+      defaults: defaults$7,
+      options
+    };
+    const methods = {
+      setup({ parent: parent2 }) {
+        parent2.on("opened", enableFocusTrap, this);
+        parent2.on("closed", disableFocusTrap, this);
+      },
+      teardown({ parent: parent2 }) {
+        parent2.off("opened", enableFocusTrap);
+        parent2.off("closed", disableFocusTrap);
+      },
+      onCreateEntry({ entry }) {
+        entry.focusTrap = new FocusTrap();
       }
-      return this.collection;
+    };
+    function getValue(obj, ...args) {
+      return typeof obj === "function" ? obj(...args) : obj;
+    }
+    function enableFocusTrap(entry, plugin) {
+      var _a;
+      const contextObj = { plugin, parent: entry.parent, entry };
+      if (getValue(plugin.settings.condition, contextObj)) {
+        (_a = entry.focusTrap) == null ? void 0 : _a.on(entry.dialog);
+      }
+    }
+    function disableFocusTrap(entry, plugin) {
+      var _a;
+      const contextObj = { plugin, parent: entry.parent, entry };
+      if (getValue(plugin.settings.condition, contextObj)) {
+        (_a = entry.focusTrap) == null ? void 0 : _a.off();
+      }
+    }
+    return { ...props, ...methods };
+  }
+  const defaults$6 = {
+    // The data attributes to get the breakpoint values from.
+    dataBreakpoint: "breakpoint",
+    // The data attributes to get the media query value from.
+    dataMediaQuery: "media-query",
+    // The string token to replace in the media query string.
+    token: "{{BP}}",
+    // Sets a global breakpoint. Can be overridden by setting a data attribute
+    // value. Notice: setting this option will enable a media query breakpoint on
+    // all entries.
+    breakpoint: null,
+    // The default media query string to use. Can be overridden by setting a data
+    // attribute value.
+    mediaQuery: "(min-width: {{BP}})",
+    // Maps entry ID or breakpoint key to breakpoint values. This is referenced
+    // when getting an entries breakpoint value.
+    breakpoints: {},
+    // Maps entry ID's to a media query strings. Media query may contain a token.
+    // This is referenced when getting an entries media query string.
+    mediaQueries: {},
+    // The function to run when the MediaQueryList triggers a "change" event.
+    // This is run once on initial mount.
+    onChange: () => {
     }
-    async mount(options = {}) {
-      this.applySettings(options);
-      await lifecycleHook.call(this, "beforeMount");
-      const els = document.querySelectorAll(this.settings.selector);
-      for (const el of els) {
-        await this.register(el);
+  };
+  function mediaQuery(options = {}) {
+    const props = {
+      name: "mediaQuery",
+      defaults: defaults$6,
+      options
+    };
+    const methods = {
+      onCreateEntry({ entry }) {
+        setupMediaQueryList.call(this, entry);
+      },
+      onDestroyEntry({ entry }) {
+        removeMediaQueryList(entry);
       }
-      await lifecycleHook.call(this, "afterMount");
-      return this;
+    };
+    function getMediaQuery(entry) {
+      const value = entry.el.getAttribute(`data-${this.settings.dataMediaQuery}`);
+      if (!value && entry.id in this.settings.mediaQueries) {
+        return this.settings.mediaQueries[entry.id];
+      }
+      return value;
     }
-    async unmount() {
-      await lifecycleHook.call(this, "beforeUnmount");
-      while (this.collection.length > 0) {
-        await this.deregister(this.collection[0].id);
+    function getBreakpointValue(entry) {
+      let value = entry.el.getAttribute(`data-${this.settings.dataBreakpoint}`);
+      if (!value && entry.id in this.settings.breakpoints) {
+        value = this.settings.breakpoints[entry.id];
       }
-      await lifecycleHook.call(this, "afterUnmount");
-      return this;
+      if (value && value in this.settings.breakpoints) {
+        value = this.settings.breakpoints[value];
+      }
+      if (value) {
+        const customProp = getComputedStyle(document.body).getPropertyValue(`--${getPrefix()}breakpoint-${value}`).trim();
+        value = customProp || value;
+      }
+      return value || this.settings.breakpoint;
+    }
+    function setupMediaQueryList(entry) {
+      let mq = getMediaQuery.call(this, entry);
+      const bp = getBreakpointValue.call(this, entry);
+      if (!bp && !mq) return;
+      if (bp && !mq) {
+        mq = this.settings.mediaQuery;
+      }
+      const mqs = mq.replace(new RegExp(`${this.settings.token}`, "g"), bp);
+      entry.mql = window.matchMedia(mqs);
+      entry.mql.onchange = (event) => {
+        this.settings.onChange(event, entry);
+      };
+      this.settings.onChange(entry.mql, entry);
+    }
+    function removeMediaQueryList(entry) {
+      if (!entry.mql) return;
+      entry.mql.onchange = null;
+      entry.mql = null;
+    }
+    return { ...props, ...methods };
+  }
+  const defaults$5 = {
+    // The property on entry objects to watch.
+    prop: "state",
+    // The default value or a function to compute the initial value.
+    value: null,
+    // The local storage key prefix.
+    keyPrefix: "VB:",
+    // The local storage key to use. If not provided, module name and prop value
+    // will be used e.g., "VB:ModalState".
+    key: null,
+    // Condition to determine whether or not to store the value in local storage.
+    condition: false,
+    // The function to run whenever the value changes.
+    onChange() {
+    }
+  };
+  function propStore(options = {}) {
+    const props = {
+      name: "propStore",
+      defaults: defaults$5,
+      options,
+      store: null
+    };
+    const methods = {
+      setup({ parent: parent2 }) {
+        this.store = localStore(getKey.call(this, parent2.module));
+      },
+      async onCreateEntry({ entry }) {
+        await setupPropStore.call(this, entry);
+      },
+      onDestroyEntry({ entry }) {
+        removePropStore.call(this, entry);
+      }
+    };
+    async function setupPropStore(entry) {
+      let _value = entry[this.settings.prop] || null;
+      const contextObj = { plugin: this, parent: entry.parent, entry };
+      Object.defineProperty(entry, this.settings.prop, {
+        configurable: true,
+        get() {
+          return _value;
+        },
+        set: async (newValue) => {
+          if (_value === newValue) return;
+          const oldValue = _value;
+          _value = newValue;
+          const condition = getValue(
+            this.settings.condition,
+            contextObj,
+            newValue,
+            oldValue
+          );
+          if (condition) {
+            this.store.set(entry.id, newValue);
+          }
+          await this.settings.onChange(contextObj, newValue, oldValue);
+        }
+      });
+      Object.defineProperty(entry, "store", {
+        configurable: true,
+        get: () => {
+          return this.store.get(entry.id);
+        },
+        set: (value) => {
+          entry[this.settings.prop] = value;
+        }
+      });
+      entry[this.settings.prop] = await getValue(this.settings.value, contextObj) || entry[this.settings.prop];
+    }
+    function getValue(obj, ...args) {
+      return typeof obj === "function" ? obj(...args) : obj;
+    }
+    async function removePropStore(entry) {
+      const currentValue = entry[this.settings.prop];
+      delete entry[this.settings.prop];
+      entry[this.settings.prop] = currentValue;
+      this.store.set(entry.id, null);
+    }
+    function getKey(moduleName) {
+      const prop = this.settings.prop.charAt(0).toUpperCase() + this.settings.prop.slice(1);
+      const key = this.settings.key || moduleName + prop;
+      return this.settings.keyPrefix + key;
+    }
+    return { ...props, ...methods };
+  }
+  const defaults$4 = {
+    where: null,
+    how: "append"
+  };
+  function teleport(options = {}) {
+    const props = {
+      name: "teleport",
+      defaults: defaults$4,
+      options
+    };
+    const methods = {
+      onCreateEntry({ plugin, entry }) {
+        teleport2(plugin, entry);
+      },
+      onDestroyEntry({ plugin, entry }) {
+        teleportReturn(plugin, entry);
+      }
+    };
+    function teleport2(plugin, entry) {
+      entry.teleport = () => {
+        if (typeof entry.teleportReturn === "function") {
+          entry.teleportReturn();
+        }
+        entry.teleportReturn = teleportElement(
+          entry.el,
+          entry.getSetting("teleport", { fallback: plugin.settings.where }),
+          entry.getSetting("teleportMethod", { fallback: plugin.settings.how })
+        );
+      };
+      entry.teleport();
+      entry.parent.emit("teleport", { plugin, parent, entry });
     }
+    function teleportReturn(plugin, entry) {
+      if (typeof entry.teleportReturn === "function") {
+        entry.teleportReturn();
+      }
+      entry.parent.emit("teleportReturn", { plugin, parent, entry });
+    }
+    return { ...props, ...methods };
   }
+  const defaults$3 = {
+    dataConfig: "config",
+    customProps: []
+  };
   class CollectionEntry {
-    constructor(context, query, options = {}) {
-      this.context = context;
+    constructor(parent2, query, options = {}) {
+      this.parent = parent2;
       this.id = (query == null ? void 0 : query.id) || query;
       this.el = getElement(query);
-      this.settings = Object.assign({}, options);
+      this.settings = { ...options };
       this.dataConfig = {};
       this.customProps = {};
-      this.returnRef = null;
     }
-    applySettings(obj) {
-      return Object.assign(this.settings, obj);
+    applySettings(options) {
+      return Object.assign(this.settings, options);
     }
-    getDataConfig() {
-      return Object.assign(this.dataConfig, getConfig(this.el, this.getSetting("dataConfig")));
+    getSetting(key, options) {
+      return getSetting.call(this, key, options);
     }
-    getCustomProps() {
-      return Object.assign(this.customProps, getCustomProps(this));
+    buildDataConfig() {
+      return Object.assign(
+        this.dataConfig,
+        getDataConfig(this.el, this.getSetting("dataConfig"))
+      );
     }
-    getSetting(key, options = {}) {
-      return getSetting.call(this, key, options);
+    buildCustomProps() {
+      return Object.assign(this.customProps, getCustomProps(this));
     }
-    async mount(options = {}) {
+    async init(options = {}) {
       if (this.el === null) {
-        throw new Error(`${this.context.module} element was not found with ID: "${this.id}"`);
+        throw new Error(
+          `${this.parent.module} element was not found with ID: "${this.id}"`
+        );
       }
       this.applySettings(options);
-      this.getDataConfig();
-      this.getCustomProps();
-      await lifecycleHook.call(this, "beforeMount");
-      if (this.getSetting("teleport")) {
-        this.teleport();
+      this.buildDataConfig();
+      this.buildCustomProps();
+    }
+    async destroy() {
+      Object.getOwnPropertyNames(this).forEach((prop) => {
+        if (prop !== "id") {
+          delete this[prop];
+        }
+      });
+    }
+  }
+  class Collection {
+    constructor(options = {}) {
+      this.module = this.constructor.name;
+      this.collection = [];
+      this.entryClass = CollectionEntry;
+      this.settings = { ...defaults$3, ...options };
+      this.plugins = new PluginsArray(this.settings.presets);
+      this.events = {};
+      Object.assign(this, eventEmitter);
+    }
+    get(value, key = "id") {
+      return this.collection.find((entry) => entry[key] === value);
+    }
+    applySettings(options) {
+      return Object.assign(this.settings, options);
+    }
+    async createEntry(query, config) {
+      const entry = new this.entryClass(this, query, config);
+      await maybeRunMethod(entry, "init");
+      await dispatchLifecycleHook("onCreateEntry", this, entry);
+      return entry;
+    }
+    async destroyEntry(entry) {
+      await dispatchLifecycleHook("onDestroyEntry", this, entry);
+      await maybeRunMethod(entry, "destroy");
+      return entry;
+    }
+    async register(query, config = {}) {
+      const element = getElement(query);
+      if (element === null) {
+        throw new Error(
+          `${this.module} element was not found with ID: "${(query == null ? void 0 : query.id) || query}"`
+        );
+      }
+      const index2 = this.collection.findIndex((item) => item.id === element.id);
+      if (~index2) {
+        const entry = this.collection[index2];
+        entry.el = element;
+        if (typeof entry.init === "function") {
+          await entry.init(config);
+        }
+        return entry;
+      } else {
+        const entry = await this.createEntry(element, config);
+        this.collection.push(entry);
+        await dispatchLifecycleHook("onRegisterEntry", this, entry);
+        return entry;
       }
-      await lifecycleHook.call(this, "afterMount");
     }
-    async unmount(reMount = false) {
-      await lifecycleHook.call(this, "beforeUnmount", reMount);
-      if (this.getSetting("teleport")) {
-        this.teleportReturn();
+    async deregister(id) {
+      const index2 = this.collection.findIndex((entry) => entry.id === id);
+      if (~index2) {
+        const entry = await this.destroyEntry(this.collection[index2]);
+        await dispatchLifecycleHook(
+          "onDeregisterEntry",
+          this,
+          this.collection[index2]
+        );
+        this.collection.splice(index2, 1);
+        return entry;
       }
-      await lifecycleHook.call(this, "afterUnmount", reMount);
+      return null;
     }
-    teleport(ref = this.getSetting("teleport"), method = this.getSetting("teleportMethod")) {
-      if (!this.returnRef) {
-        this.returnRef = teleport(this.el, ref, method);
-        return this.el;
-      } else {
-        console.error("Element has already been teleported:", this.el);
-        return false;
+    async mount(options = {}) {
+      var _a;
+      this.applySettings(options);
+      for (const plugin of ((_a = this.settings) == null ? void 0 : _a.plugins) || []) {
+        this.plugins.add(plugin);
       }
-    }
-    teleportReturn() {
-      if (this.returnRef) {
-        this.returnRef = teleport(this.el, this.returnRef);
-        return this.el;
-      } else {
-        console.error("No return reference found:", this.el);
-        return false;
+      for (const plugin of this.plugins) {
+        await maybeRunMethod(plugin, "setup", { plugin, parent: this });
       }
+      await dispatchLifecycleHook("beforeMount", this);
+      const els = document.querySelectorAll(this.settings.selector);
+      for (const el of els) {
+        await this.register(el);
+      }
+      await dispatchLifecycleHook("afterMount", this);
+      return this;
     }
-  }
-  class FocusTrap {
-    constructor(el = null, selectorFocus = "[data-focus]") {
-      __privateAdd(this, _focusable);
-      __privateAdd(this, _handleFocusTrap);
-      __privateAdd(this, _handleFocusLock);
-      this.el = el;
-      this.selectorFocus = selectorFocus;
-      __privateSet(this, _handleFocusTrap, handleFocusTrap.bind(this));
-      __privateSet(this, _handleFocusLock, handleFocusLock.bind(this));
-    }
-    get focusable() {
-      return __privateGet(this, _focusable);
-    }
-    set focusable(value) {
-      __privateSet(this, _focusable, value);
-      if (__privateGet(this, _focusable).length) {
-        document.removeEventListener("keydown", __privateGet(this, _handleFocusLock));
-        document.addEventListener("keydown", __privateGet(this, _handleFocusTrap));
-      } else {
-        document.removeEventListener("keydown", __privateGet(this, _handleFocusTrap));
-        document.addEventListener("keydown", __privateGet(this, _handleFocusLock));
-      }
-    }
-    get focusableFirst() {
-      return this.focusable[0];
-    }
-    get focusableLast() {
-      return this.focusable[this.focusable.length - 1];
-    }
-    mount(el, selectorFocus) {
-      if (el) this.el = el;
-      if (selectorFocus) this.selectorFocus = selectorFocus;
-      this.focusable = this.getFocusable();
-      this.focus();
-    }
-    unmount() {
-      this.el = null;
-      this.focusable = [];
-      document.removeEventListener("keydown", __privateGet(this, _handleFocusTrap));
-      document.removeEventListener("keydown", __privateGet(this, _handleFocusLock));
-    }
-    focus(el = this.el, selectorFocus = this.selectorFocus) {
-      const result = el.querySelector(selectorFocus) || el;
-      result.focus();
-    }
-    getFocusable(el = this.el) {
-      const focusable = [];
-      const initFocus = document.activeElement;
-      const initScrollTop = el.scrollTop;
-      const selector = focusableSelectors.join(",");
-      const els = el.querySelectorAll(selector);
-      els.forEach((el2) => {
-        el2.focus();
-        if (document.activeElement === el2) {
-          focusable.push(el2);
-        }
-      });
-      el.scrollTop = initScrollTop;
-      initFocus.focus();
-      return focusable;
-    }
-  }
-  _focusable = new WeakMap();
-  _handleFocusTrap = new WeakMap();
-  _handleFocusLock = new WeakMap();
-  const notInert = ":not([inert])";
-  const notNegTabIndex = ':not([tabindex^="-"])';
-  const notDisabled = ":not(:disabled)";
-  const focusableSelectors = [
-    `a[href]${notInert}${notNegTabIndex}`,
-    `area[href]${notInert}${notNegTabIndex}`,
-    `input:not([type="hidden"]):not([type="radio"])${notInert}${notNegTabIndex}${notDisabled}`,
-    `input[type="radio"]${notInert}${notNegTabIndex}${notDisabled}`,
-    `select${notInert}${notNegTabIndex}${notDisabled}`,
-    `textarea${notInert}${notNegTabIndex}${notDisabled}`,
-    `button${notInert}${notNegTabIndex}${notDisabled}`,
-    `details${notInert} > summary:first-of-type${notNegTabIndex}`,
-    `iframe${notInert}${notNegTabIndex}`,
-    `audio[controls]${notInert}${notNegTabIndex}`,
-    `video[controls]${notInert}${notNegTabIndex}`,
-    `[contenteditable]${notInert}${notNegTabIndex}`,
-    `[tabindex]${notInert}${notNegTabIndex}`
-  ];
-  function handleFocusTrap(event) {
-    const isTab = event.key === "Tab" || event.keyCode === 9;
-    if (!isTab) return;
-    if (event.shiftKey) {
-      if (document.activeElement === this.focusableFirst || document.activeElement === this.el) {
-        event.preventDefault();
-        this.focusableLast.focus();
+    async unmount() {
+      await dispatchLifecycleHook("beforeUnmount", this);
+      while (this.collection.length > 0) {
+        await this.deregister(this.collection[0].id);
       }
-    } else {
-      if (document.activeElement === this.focusableLast || document.activeElement === this.el) {
-        event.preventDefault();
-        this.focusableFirst.focus();
+      await dispatchLifecycleHook("afterUnmount", this);
+      for (const plugin of this.plugins) {
+        await maybeRunMethod(plugin, "teardown", { plugin, parent: this });
       }
-    }
-  }
-  function handleFocusLock(event) {
-    const isTab = event.key === "Tab" || event.keyCode === 9;
-    if (isTab) event.preventDefault();
-  }
-  function localStore(key, enable = true) {
-    const local = localStorage.getItem(key);
-    const store = local ? JSON.parse(local) : {};
-    return {
-      get(prop) {
-        return prop ? store[prop] : store;
-      },
-      set(prop, value) {
-        if (value) {
-          store[prop] = value;
-        } else {
-          delete store[prop];
-        }
-        if (enable) localStorage.setItem(key, JSON.stringify(store));
-        return store;
+      for (const plugin of [...this.plugins]) {
+        this.plugins.remove(plugin.name);
       }
-    };
-  }
-  function teleport(what, where, how) {
-    const isComment = where.nodeType === Node.COMMENT_NODE;
-    const isElement2 = where.nodeType === Node.ELEMENT_NODE;
-    where = isComment || isElement2 ? where : document.querySelector(where);
-    if (isComment) how = "after";
-    if (!where) throw new Error(`Not a valid teleport reference: '${where}'`);
-    if (typeof where[how] != "function") throw new Error(`Not a valid teleport method: '${how}'`);
-    let returnRef = null;
-    if (!isComment) {
-      returnRef = document.createComment("teleported #" + what.id);
-      what.before(returnRef);
-    }
-    where[how](what);
-    if (isComment) {
-      where.remove();
+      return this;
     }
-    return returnRef;
   }
   function themeStore(options) {
     const settings = {
@@ -477,9 +949,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     }
     const profile = localStore(settings.storeKey);
     const api = {
-      // Store our settings in the API.
+      // Store our settings in the API
       settings,
-      // Actions.
+      // Actions
       add(value) {
         settings.themes.push(value);
       },
@@ -490,7 +962,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       callback(name) {
         callbacks[name].call(this);
       },
-      // Getters.
+      // Getters
       get class() {
         return `${settings.prefix}${this.theme}`;
       },
@@ -500,7 +972,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       get themes() {
         return settings.themes;
       },
-      // Setup the theme get and set methods.
+      // Setup the theme get and set methods
       get theme() {
         return profile.get("theme") || "root";
       },
@@ -522,32 +994,61 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   }
   const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    Breakpoint,
     Collection,
     CollectionEntry,
     FocusTrap,
+    FocusableArray,
+    PluginsArray,
+    StackArray,
     cssVar,
-    getConfig,
+    debug,
+    dispatchLifecycleHook,
+    eventEmitter,
+    focusTrap,
+    focusableSelectors,
     getCustomProps,
+    getDataConfig,
     getElement,
     getPrefix,
     getSetting,
-    lifecycleHook,
     localStore,
+    maybeRunMethod,
+    mediaQuery,
+    propStore,
     setGlobalState,
     teleport,
+    teleportElement,
     themeStore,
     toCamel,
     toKebab,
     toMilliseconds,
     transition
   }, Symbol.toStringTag, { value: "Module" }));
+  const presets = {
+    focusTrap: {
+      condition: ({ entry }) => {
+        return entry.state === "closed" || entry.state === "opened" && entry.mode === "modal";
+      }
+    },
+    mediaQuery: {
+      onChange(event, entry) {
+        entry.mode = event.matches ? "inline" : "modal";
+      }
+    },
+    propStore: {
+      prop: "inlineState",
+      value: ({ entry }) => entry.store,
+      condition: ({ entry }) => ["opened", "closed", "indeterminate"].includes(entry.state),
+      onChange: ({ entry }) => entry.applyState()
+    }
+  };
   const defaults$2 = {
+    // Plugin presets
+    presets,
     // Data attributes
     dataOpen: "drawer-open",
     dataClose: "drawer-close",
     dataToggle: "drawer-toggle",
-    dataBreakpoint: "drawer-breakpoint",
     // Selectors
     selector: ".drawer",
     selectorDialog: ".drawer__dialog",
@@ -563,90 +1064,13 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     // Classes
     classModal: "drawer_modal",
     // Feature toggles
-    customProps: [
-      "transition-duration"
-    ],
+    customProps: ["transition-duration"],
     breakpoints: null,
     customEventPrefix: "drawer:",
-    store: true,
-    storeKey: "VB:DrawerState",
     setTabindex: true,
-    teleport: null,
-    teleportMethod: "prepend",
     transition: true,
     transitionDuration: 300
   };
-  function applyInitialState(entry) {
-    if (entry.store === "opened") {
-      entry.open(false, false);
-    } else if (entry.store === "closed") {
-      entry.close(false, false);
-    } else if (entry.store === "indeterminate") {
-      entry.state = "indeterminate";
-    } else {
-      if (entry.el.classList.contains(entry.getSetting("stateOpened"))) {
-        entry.open(false, false);
-      } else if (entry.el.classList.contains(entry.getSetting("stateClosed"))) {
-        entry.close(false, false);
-      } else {
-        entry.state = "indeterminate";
-      }
-    }
-  }
-  async function applyInlineState(entry) {
-    if (entry.store === "opened") {
-      await entry.open(false, false);
-    } else if (entry.store === "closed") {
-      await entry.close(false, false);
-    } else if (entry.store === "indeterminate") {
-      if (entry.state != "indeterminate") {
-        entry.state = "indeterminate";
-      }
-    } else {
-      if (entry.state != entry.inlineState) {
-        entry.state = entry.inlineState;
-      }
-      if (entry.inlineState === "opened") {
-        await entry.open(false, false);
-      } else if (entry.inlineState === "closed") {
-        await entry.close(false, false);
-      }
-    }
-  }
-  function getBreakpoint(drawer) {
-    const prefix = getPrefix();
-    const bp = drawer.getAttribute(`data-${this.settings.dataBreakpoint}`);
-    if (this.settings.breakpoints && this.settings.breakpoints[bp]) {
-      return this.settings.breakpoints[bp];
-    } else if (getComputedStyle(document.body).getPropertyValue(`--${prefix}breakpoint-${bp}`).trim()) {
-      return getComputedStyle(document.body).getPropertyValue(`--${prefix}breakpoint-${bp}`).trim();
-    } else {
-      return bp;
-    }
-  }
-  function getDrawer(query) {
-    const entry = typeof query === "string" ? this.get(query) : query;
-    if (entry) {
-      return entry;
-    } else {
-      throw new Error(`Drawer not found in collection with id of "${query.id || query}".`);
-    }
-  }
-  function updateFocusState$1(entry) {
-    if (entry.state === "opened") {
-      if (entry.mode === "modal") {
-        this.focusTrap.mount(entry.dialog, this.settings.selectorFocus);
-      } else {
-        this.focusTrap.focus(entry.dialog, this.settings.selectorFocus);
-      }
-    } else {
-      if (entry.trigger) {
-        entry.trigger.focus();
-        entry.trigger = null;
-      }
-      this.focusTrap.unmount();
-    }
-  }
   function switchMode(entry) {
     switch (entry.mode) {
       case "inline":
@@ -660,61 +1084,57 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   async function toInline(entry) {
     entry.el.classList.remove(entry.getSetting("classModal"));
     entry.dialog.removeAttribute("aria-modal");
-    setGlobalState(false, entry.getSetting("selectorInert"), entry.getSetting("selectorOverflow"));
-    this.focusTrap.unmount();
-    await applyInlineState(entry);
-    entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
-      detail: this,
-      bubbles: true
-    }));
+    setGlobalState(
+      false,
+      entry.getSetting("selectorInert"),
+      entry.getSetting("selectorOverflow")
+    );
+    entry.applyState();
+    entry.el.dispatchEvent(
+      new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
+        detail: this,
+        bubbles: true
+      })
+    );
+    await entry.parent.emit("switchMode", entry);
     return entry;
   }
   async function toModal(entry) {
     entry.el.classList.add(entry.getSetting("classModal"));
     entry.dialog.setAttribute("aria-modal", "true");
     await entry.close(false, false);
-    entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
-      detail: this,
-      bubbles: true
-    }));
+    entry.el.dispatchEvent(
+      new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
+        detail: this,
+        bubbles: true
+      })
+    );
+    await entry.parent.emit("switchMode", entry);
     return entry;
   }
   class DrawerEntry extends CollectionEntry {
-    constructor(context, query, options = {}) {
-      super(context, query, options);
+    constructor(parent2, query, options = {}) {
+      super(parent2, query, options);
       __privateAdd(this, _mode);
-      __privateAdd(this, _state);
-      __privateAdd(this, _breakpoint);
       this.dialog = null;
       this.trigger = null;
-      __privateSet(this, _breakpoint, new Breakpoint());
+      this.state = null;
+      this.inlineState = null;
       __privateSet(this, _mode, "indeterminate");
-      __privateSet(this, _state, "indeterminate");
-      this.inlineState = "indeterminate";
-    }
-    get breakpoint() {
-      return getBreakpoint.call(this.context, this.el);
-    }
-    get store() {
-      return this.context.store.get(this.id);
     }
     get mode() {
       return __privateGet(this, _mode);
     }
     set mode(value) {
+      if (__privateGet(this, _mode) === value) return;
       __privateSet(this, _mode, value);
-      switchMode.call(this.context, this);
+      switchMode.call(this.parent, this);
     }
-    get state() {
-      return __privateGet(this, _state);
-    }
-    set state(value) {
-      __privateSet(this, _state, value);
-      if (this.mode === "inline" && value != "opening" && value != "closing") {
+    setState(value) {
+      this.state = value;
+      const ignoreStates = ["opening", "closing"];
+      if (this.mode === "inline" && !ignoreStates.includes(value)) {
         this.inlineState = value;
-        if (this.getSetting("store")) {
-          this.context.store.set(this.id, value);
-        }
       }
       if (value === "indeterminate") {
         this.el.classList.remove(this.getSetting("stateOpened"));
@@ -723,56 +1143,63 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         this.el.classList.remove(this.getSetting("stateClosing"));
       }
     }
+    async applyState() {
+      if (this.mode === "modal") return;
+      if (this.inlineState === "opened") {
+        return await this.open(false, false);
+      }
+      if (this.inlineState === "closed") {
+        return await this.close(false, false);
+      }
+      if (this.state === null) {
+        if (this.el.classList.contains(this.getSetting("stateOpened"))) {
+          return await this.open(false, false);
+        }
+        if (this.el.classList.contains(this.getSetting("stateClosed"))) {
+          return await this.close(false, false);
+        }
+      }
+      return this.setState("indeterminate");
+    }
     async open(transition2, focus) {
-      return this.context.open(this, transition2, focus);
+      return this.parent.open(this, transition2, focus);
     }
     async close(transition2, focus) {
-      return this.context.close(this, transition2, focus);
+      return this.parent.close(this, transition2, focus);
     }
     async toggle(transition2, focus) {
-      return this.context.toggle(this, transition2, focus);
+      return this.parent.toggle(this, transition2, focus);
     }
     async deregister() {
-      return this.context.deregister(this.id);
-    }
-    mountBreakpoint() {
-      const value = this.breakpoint;
-      const handler = this.handleBreakpoint.bind(this);
-      __privateGet(this, _breakpoint).mount(value, handler);
-    }
-    unmountBreakpoint() {
-      __privateGet(this, _breakpoint).unmount();
-    }
-    handleBreakpoint(event) {
-      const bpMode = event.matches ? "inline" : "modal";
-      if (this.mode != bpMode) {
-        this.mode = bpMode;
-      }
+      return this.parent.deregister(this.id);
     }
-    async beforeMount() {
+    async onCreateEntry() {
       const dialog = this.el.querySelector(this.getSetting("selectorDialog"));
       this.dialog = dialog ? dialog : this.el;
       if (this.getSetting("setTabindex")) {
         this.dialog.setAttribute("tabindex", "-1");
       }
-      applyInitialState(this);
+      await this.applyState();
       this.inlineState = this.state;
       this.mode = this.el.classList.contains(this.getSetting("classModal")) ? "modal" : "inline";
-      if (this.breakpoint) {
-        this.mountBreakpoint();
-      }
     }
-    async beforeUnmount(close2 = true) {
-      if (close2 && this.state === "opened") {
+    async onDestroyEntry() {
+      if (this.mode === "modal" && this.state === "opened") {
         await this.close(false);
       }
-      this.context.store.set(this.id);
-      this.unmountBreakpoint();
     }
   }
   _mode = new WeakMap();
-  _state = new WeakMap();
-  _breakpoint = new WeakMap();
+  function getDrawer(query) {
+    const entry = typeof query === "string" ? this.get(query) : query;
+    if (entry) {
+      return entry;
+    } else {
+      throw new Error(
+        `Drawer not found in collection with id of "${query.id || query}".`
+      );
+    }
+  }
   async function handleClick$2(event) {
     const trigger = event.target.closest(`
     [data-${this.settings.dataOpen}],
@@ -805,8 +1232,8 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
             entry.trigger = trigger;
             return entry.close();
           } else {
-            const parent = event.target.closest(this.settings.selector);
-            if (parent) return this.close(parent.id);
+            const parent2 = event.target.closest(this.settings.selector);
+            if (parent2) return this.close(parent2.id);
           }
         });
       }
@@ -821,10 +1248,20 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       if (this.activeModal) return this.close(this.activeModal.id);
     }
   }
+  function updateFocusState$1(entry) {
+    if (entry.state === "opened") {
+      (entry.dialog.querySelector(this.settings.selectorFocus) || entry.dialog).focus();
+    } else {
+      if (entry.trigger) {
+        entry.trigger.focus();
+        entry.trigger = null;
+      }
+    }
+  }
   async function open$2(query, transitionOverride, focus = true) {
     const entry = getDrawer.call(this, query);
-    if (entry.state === "closed" || entry.state === "indeterminate") {
-      entry.state = "opening";
+    if (entry.state === "closed" || entry.state === "indeterminate" || entry.state === null) {
+      entry.setState("opening");
       if (transitionOverride != void 0 ? transitionOverride : entry.getSetting("transition")) {
         await transition(
           entry.el,
@@ -837,22 +1274,30 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         entry.el.classList.add(entry.getSetting("stateOpened"));
         entry.el.classList.remove(entry.getSetting("stateClosed"));
       }
-      entry.state = "opened";
-      if (entry.mode === "modal") setGlobalState(true, entry.getSetting("selectorInert"), entry.getSetting("selectorOverflow"));
+      entry.setState("opened");
+      if (entry.mode === "modal")
+        setGlobalState(
+          true,
+          entry.getSetting("selectorInert"),
+          entry.getSetting("selectorOverflow")
+        );
       if (focus) {
         updateFocusState$1.call(this, entry);
       }
-      entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "opened", {
-        detail: this,
-        bubbles: true
-      }));
+      entry.el.dispatchEvent(
+        new CustomEvent(entry.getSetting("customEventPrefix") + "opened", {
+          detail: this,
+          bubbles: true
+        })
+      );
+      await entry.parent.emit("opened", entry);
     }
     return entry;
   }
   async function close$2(query, transitionOverride, focus = true) {
     const entry = getDrawer.call(this, query);
-    if (entry.state === "opened" || entry.state === "indeterminate") {
-      entry.state = "closing";
+    if (entry.state === "opened" || entry.state === "indeterminate" || entry.state === null) {
+      entry.setState("closing");
       document.activeElement.blur();
       if (transitionOverride != void 0 ? transitionOverride : entry.getSetting("transition")) {
         await transition(
@@ -866,15 +1311,23 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         entry.el.classList.add(entry.getSetting("stateClosed"));
         entry.el.classList.remove(entry.getSetting("stateOpened"));
       }
-      entry.state = "closed";
-      if (entry.mode === "modal") setGlobalState(false, entry.getSetting("selectorInert"), entry.getSetting("selectorOverflow"));
+      entry.setState("closed");
+      if (entry.mode === "modal")
+        setGlobalState(
+          false,
+          entry.getSetting("selectorInert"),
+          entry.getSetting("selectorOverflow")
+        );
       if (focus) {
         updateFocusState$1.call(this, entry);
       }
-      entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "closed", {
-        detail: this,
-        bubbles: true
-      }));
+      entry.el.dispatchEvent(
+        new CustomEvent(entry.getSetting("customEventPrefix") + "closed", {
+          detail: this,
+          bubbles: true
+        })
+      );
+      await entry.parent.emit("closed", entry);
     }
     return entry;
   }
@@ -891,19 +1344,16 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       super({ ...defaults$2, ...options });
       __privateAdd(this, _handleClick);
       __privateAdd(this, _handleKeydown);
-      this.focusTrap = new FocusTrap();
+      this.module = "Drawer";
+      this.entryClass = DrawerEntry;
       __privateSet(this, _handleClick, handleClick$2.bind(this));
       __privateSet(this, _handleKeydown, handleKeydown$2.bind(this));
-      this.store = localStore(this.settings.storeKey, this.settings.store);
     }
     get activeModal() {
       return this.collection.find((entry) => {
         return entry.state === "opened" && entry.mode === "modal";
       });
     }
-    async createEntry(query, config) {
-      return new DrawerEntry(this, query, config);
-    }
     async open(id, transition2, focus) {
       return open$2.call(this, id, transition2, focus);
     }
@@ -946,19 +1396,15 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     stateClosing: "is-closing",
     stateClosed: "is-closed",
     // Feature settings
-    customProps: [
-      "transition-duration"
-    ],
+    customProps: ["transition-duration"],
     customEventPrefix: "modal:",
     setTabindex: true,
-    teleport: null,
-    teleportMethod: "append",
     transition: true,
     transitionDuration: 300
   };
   class ModalEntry extends CollectionEntry {
-    constructor(context, query, options = {}) {
-      super(context, query, options);
+    constructor(parent2, query, options = {}) {
+      super(parent2, query, options);
       this.state = "closed";
       this.dialog = null;
     }
@@ -966,18 +1412,18 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       return this.dialog.matches(this.getSetting("selectorRequired"));
     }
     async open(transition2, focus) {
-      return this.context.open(this, transition2, focus);
+      return this.parent.open(this, transition2, focus);
     }
     async close(transition2, focus) {
-      return this.context.close(this, transition2, focus);
+      return this.parent.close(this, transition2, focus);
     }
     async replace(transition2, focus) {
-      return this.context.replace(this, transition2, focus);
+      return this.parent.replace(this, transition2, focus);
     }
     async deregister() {
-      return this.context.deregister(this.id);
+      return this.parent.deregister(this.id);
     }
-    async beforeMount() {
+    async onCreateEntry() {
       const dialog = this.el.querySelector(this.getSetting("selectorDialog"));
       this.dialog = dialog ? dialog : this.el;
       this.dialog.setAttribute("aria-modal", "true");
@@ -988,7 +1434,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         this.dialog.setAttribute("tabindex", "-1");
       }
     }
-    async afterRegister() {
+    async onRegisterEntry() {
       if (this.el.classList.contains(this.getSetting("stateOpened"))) {
         await this.open(false);
       } else {
@@ -997,11 +1443,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         this.el.classList.add(this.getSetting("stateClosed"));
       }
     }
-    async beforeUnmount(reMount = false) {
-      if (!reMount && this.state === "opened") {
+    async onDestroyEntry() {
+      if (this.state === "opened") {
         await this.close(false);
-      } else {
-        this.context.stack.remove(this);
       }
     }
   }
@@ -1010,18 +1454,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     if (entry) {
       return entry;
     } else {
-      throw new Error(`Modal not found in collection with id of "${query.id || query}".`);
-    }
-  }
-  function updateFocusState() {
-    if (this.active) {
-      this.focusTrap.mount(this.active.dialog, this.settings.selectorFocus);
-    } else {
-      if (this.trigger) {
-        this.trigger.focus();
-        this.trigger = null;
-      }
-      this.focusTrap.unmount();
+      throw new Error(
+        `Modal not found in collection with id of "${query.id || query}".`
+      );
     }
   }
   async function handleClick$1(event) {
@@ -1062,6 +1497,16 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
     }
   }
+  function updateFocusState() {
+    if (this.active) {
+      (this.active.dialog.querySelector(this.settings.selectorFocus) || this.active.dialog).focus();
+    } else {
+      if (this.trigger) {
+        this.trigger.focus();
+        this.trigger = null;
+      }
+    }
+  }
   async function open$1(query, transitionOverride = void 0, focus = true) {
     const entry = getModal.call(this, query);
     this.stack.moveToTop(entry);
@@ -1085,10 +1530,13 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     if (focus) {
       updateFocusState.call(this);
     }
-    entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "opened", {
-      detail: this,
-      bubbles: true
-    }));
+    entry.el.dispatchEvent(
+      new CustomEvent(entry.getSetting("customEventPrefix") + "opened", {
+        detail: entry,
+        bubbles: true
+      })
+    );
+    await entry.parent.emit("opened", entry);
     return entry;
   }
   async function close$1(query, transitionOverride, focus = true) {
@@ -1113,23 +1561,25 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       if (focus) {
         updateFocusState.call(this);
       }
-      entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "closed", {
-        detail: this,
-        bubbles: true
-      }));
+      entry.el.dispatchEvent(
+        new CustomEvent(entry.getSetting("customEventPrefix") + "closed", {
+          detail: entry,
+          bubbles: true
+        })
+      );
+      await entry.parent.emit("closed", entry);
     }
     return entry;
   }
   async function closeAll$1(exclude, transition2) {
     const result = [];
-    await Promise.all(this.stack.value.map(async (modal) => {
-      if (exclude && exclude === modal.id) {
-        Promise.resolve();
-      } else {
-        result.push(await close$1.call(this, modal, transition2, false));
-      }
-      modal.trigger = null;
-    }));
+    await Promise.all(
+      this.stack.copy.map(async (entry) => {
+        if (exclude && exclude === entry.id) return;
+        result.push(await close$1.call(this, entry, transition2, false));
+        entry.trigger = null;
+      })
+    );
     return result;
   }
   async function replace(query, transition2, focus = true) {
@@ -1148,72 +1598,29 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     }
     return { opened: resultOpened, closed: resultClosed };
   }
-  function stack(settings) {
-    const stackArray = [];
-    return {
-      get value() {
-        return [...stackArray];
-      },
-      get top() {
-        const result = stackArray[stackArray.length - 1];
-        return result ? result : null;
-      },
-      updateIndex() {
-        stackArray.forEach((entry, index2) => {
-          entry.el.style.zIndex = null;
-          const value = getComputedStyle(entry.el)["z-index"];
-          entry.el.style.zIndex = parseInt(value) + index2 + 1;
-        });
-      },
-      setGlobalState() {
-        setGlobalState(this.top, settings.selectorInert, settings.selectorOverflow);
-        this.updateIndex();
-      },
-      add(entry) {
-        entry.el.style.zIndex = null;
-        const value = getComputedStyle(entry.el)["z-index"];
-        entry.el.style.zIndex = parseInt(value) + stackArray.length + 1;
-        stackArray.push(entry);
-        this.setGlobalState();
-      },
-      remove(entry) {
-        const index2 = stackArray.findIndex((item) => {
-          return item.id === entry.id;
-        });
-        if (index2 >= 0) {
-          entry.el.style.zIndex = null;
-          stackArray.splice(index2, 1);
-          this.setGlobalState();
-        }
-      },
-      moveToTop(entry) {
-        const index2 = stackArray.findIndex((item) => {
-          return item.id === entry.id;
-        });
-        if (index2 >= 0) {
-          stackArray.splice(index2, 1);
-          this.add(entry);
-        }
-      }
-    };
-  }
   class Modal extends Collection {
     constructor(options) {
       super({ ...defaults$1, ...options });
       __privateAdd(this, _handleClick2);
       __privateAdd(this, _handleKeydown2);
+      this.module = "Modal";
+      this.entryClass = ModalEntry;
       this.trigger = null;
-      this.focusTrap = new FocusTrap();
       __privateSet(this, _handleClick2, handleClick$1.bind(this));
       __privateSet(this, _handleKeydown2, handleKeydown$1.bind(this));
-      this.stack = stack(this.settings);
+      this.stack = new StackArray({
+        onChange: () => {
+          setGlobalState(
+            this.stack.top,
+            this.settings.selectorInert,
+            this.settings.selectorOverflow
+          );
+        }
+      });
     }
     get active() {
       return this.stack.top;
     }
-    async createEntry(query, config) {
-      return new ModalEntry(this, query, config);
-    }
     async open(id, transition2, focus) {
       return open$1.call(this, id, transition2, focus);
     }
@@ -1261,16 +1668,14 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       "arrow-padding",
       "toggle-delay"
     ],
+    customEventPrefix: "popover:",
     placement: "bottom",
     event: "click",
     offset: 0,
     flipPadding: 0,
     shiftPadding: 0,
     arrowPadding: 0,
-    toggleDelay: 0,
-    // Feature settings
-    teleport: null,
-    teleportMethod: "append"
+    toggleDelay: 0
   };
   function applyPositionStyle(el, x, y) {
     Object.assign(el.style, {
@@ -1374,16 +1779,25 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       if (popover.trigger === this.trigger) {
         this.trigger = null;
       }
+      popover.el.dispatchEvent(
+        new CustomEvent(popover.getSetting("customEventPrefix") + "closed", {
+          detail: this,
+          bubbles: true
+        })
+      );
+      await popover.parent.emit("closed", popover);
     }
     return popover;
   }
   async function closeAll() {
     const result = [];
-    await Promise.all(this.collection.map(async (popover) => {
-      if (popover.state === "opened") {
-        result.push(await close.call(this, popover));
-      }
-    }));
+    await Promise.all(
+      this.collection.map(async (popover) => {
+        if (popover.state === "opened") {
+          result.push(await close.call(this, popover));
+        }
+      })
+    );
     return result;
   }
   function closeCheck(popover) {
@@ -1393,7 +1807,6 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       let isFocused = document.activeElement.closest(
         `#${popover.id}, [aria-controls="${popover.id}"], [aria-describedby="${popover.id}"]`
       );
-      isFocused = isFocused ? isFocused.matches(":focus-visible") : false;
       if (!isHovered && !isFocused) {
         popover.close();
       }
@@ -1439,9 +1852,12 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       if (popover.toggleDelayId) {
         clearTimeout(popover.toggleDelayId);
       }
-      popover.toggleDelayId = setTimeout(() => {
-        closeCheck.call(this, popover);
-      }, getDelay(popover, 1));
+      popover.toggleDelayId = setTimeout(
+        () => {
+          closeCheck.call(this, popover);
+        },
+        getDelay(popover, 1)
+      );
     }, 1);
   }
   function handleKeydown(event) {
@@ -1480,8 +1896,8 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     });
   }
   class PopoverEntry extends CollectionEntry {
-    constructor(context, query, options = {}) {
-      super(context, query, options);
+    constructor(parent2, query, options = {}) {
+      super(parent2, query, options);
       __privateAdd(this, _eventListeners);
       __privateAdd(this, _isHovered);
       this.state = "closed";
@@ -1514,31 +1930,35 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
     }
     async open() {
-      return this.context.open(this);
+      return this.parent.open(this);
     }
     async close() {
-      return this.context.close(this);
+      return this.parent.close(this);
     }
     async deregister() {
-      return this.context.deregister(this.id);
+      return this.parent.deregister(this.id);
     }
     registerEventListeners() {
       if (!__privateGet(this, _eventListeners)) {
         const eventType = this.getSetting("event");
         if (eventType === "hover") {
-          __privateSet(this, _eventListeners, [{
-            el: ["el", "trigger"],
-            type: ["mouseenter", "focus"],
-            listener: handleMouseEnter.bind(this.context, this)
-          }, {
-            el: ["el", "trigger"],
-            type: ["mouseleave", "focusout"],
-            listener: handleMouseLeave.bind(this.context, this)
-          }, {
-            el: ["trigger"],
-            type: ["click"],
-            listener: handleTooltipClick.bind(this.context, this)
-          }]);
+          __privateSet(this, _eventListeners, [
+            {
+              el: ["el", "trigger"],
+              type: ["mouseenter", "focus"],
+              listener: handleMouseEnter.bind(this.parent, this)
+            },
+            {
+              el: ["el", "trigger"],
+              type: ["mouseleave", "focusout"],
+              listener: handleMouseLeave.bind(this.parent, this)
+            },
+            {
+              el: ["trigger"],
+              type: ["click"],
+              listener: handleTooltipClick.bind(this.parent, this)
+            }
+          ]);
           __privateGet(this, _eventListeners).forEach((evObj) => {
             evObj.el.forEach((el) => {
               evObj.type.forEach((type) => {
@@ -1547,11 +1967,13 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
             });
           });
         } else {
-          __privateSet(this, _eventListeners, [{
-            el: ["trigger"],
-            type: ["click"],
-            listener: handleClick.bind(this.context, this)
-          }]);
+          __privateSet(this, _eventListeners, [
+            {
+              el: ["trigger"],
+              type: ["click"],
+              listener: handleClick.bind(this.parent, this)
+            }
+          ]);
           __privateGet(this, _eventListeners).forEach((evObj) => {
             evObj.el.forEach((el) => {
               evObj.type.forEach((type) => {
@@ -1574,7 +1996,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         __privateSet(this, _eventListeners, null);
       }
     }
-    async beforeMount() {
+    async onCreateEntry() {
       this.trigger = document.querySelector(
         `[aria-controls="${this.id}"], [aria-describedby="${this.id}"]`
       );
@@ -1586,14 +2008,14 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
       this.registerEventListeners();
     }
-    async afterRegister() {
+    async onRegisterEntry() {
       if (this.el.classList.contains(this.getSetting("stateActive"))) {
         await this.open();
       } else {
         this.el.inert = true;
       }
     }
-    async beforeUnmount() {
+    async onDestroyEntry() {
       if (this.state === "opened") {
         await this.close();
       }
@@ -2045,15 +2467,20 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
           const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
           const nextPlacement = placements[nextIndex];
           if (nextPlacement) {
-            return {
-              data: {
-                index: nextIndex,
-                overflows: overflowsData
-              },
-              reset: {
-                placement: nextPlacement
-              }
-            };
+            var _overflowsData$;
+            const ignoreCrossAxisOverflow = checkCrossAxis === "alignment" ? initialSideAxis !== getSideAxis(nextPlacement) : false;
+            const hasInitialMainAxisOverflow = ((_overflowsData$ = overflowsData[0]) == null ? void 0 : _overflowsData$.overflows[0]) > 0;
+            if (!ignoreCrossAxisOverflow || hasInitialMainAxisOverflow) {
+              return {
+                data: {
+                  index: nextIndex,
+                  overflows: overflowsData
+                },
+                reset: {
+                  placement: nextPlacement
+                }
+              };
+            }
           }
           let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
           if (!resetPlacement) {
@@ -2360,7 +2787,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   function isContainingBlock(elementOrCss) {
     const webkit = isWebKit();
     const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
-    return css.transform !== "none" || css.perspective !== "none" || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || ["transform", "perspective", "filter"].some((value) => (css.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css.contain || "").includes(value));
+    return ["transform", "translate", "scale", "rotate", "perspective"].some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || ["transform", "translate", "scale", "rotate", "perspective", "filter"].some((value) => (css.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css.contain || "").includes(value));
   }
   function getContainingBlock(element) {
     let currentNode = getParentNode(element);
@@ -2556,6 +2983,28 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       y
     });
   }
+  function getWindowScrollBarX(element, rect) {
+    const leftScroll = getNodeScroll(element).scrollLeft;
+    if (!rect) {
+      return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+    }
+    return rect.left + leftScroll;
+  }
+  function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
+    if (ignoreScrollbarX === void 0) {
+      ignoreScrollbarX = false;
+    }
+    const htmlRect = documentElement.getBoundingClientRect();
+    const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 : (
+      // RTL <body> scrollbar.
+      getWindowScrollBarX(documentElement, htmlRect)
+    ));
+    const y = htmlRect.top + scroll.scrollTop;
+    return {
+      x,
+      y
+    };
+  }
   function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     let {
       elements,
@@ -2587,23 +3036,17 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         offsets.y = offsetRect.y + offsetParent.clientTop;
       }
     }
+    const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
     return {
       width: rect.width * scale.x,
       height: rect.height * scale.y,
-      x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
-      y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
+      x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
+      y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
     };
   }
   function getClientRects(element) {
     return Array.from(element.getClientRects());
   }
-  function getWindowScrollBarX(element, rect) {
-    const leftScroll = getNodeScroll(element).scrollLeft;
-    if (!rect) {
-      return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
-    }
-    return rect.left + leftScroll;
-  }
   function getDocumentRect(element) {
     const html = getDocumentElement(element);
     const scroll = getNodeScroll(element);
@@ -2673,9 +3116,10 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     } else {
       const visualOffsets = getVisualOffsets(element);
       rect = {
-        ...clippingAncestor,
         x: clippingAncestor.x - visualOffsets.x,
-        y: clippingAncestor.y - visualOffsets.y
+        y: clippingAncestor.y - visualOffsets.y,
+        width: clippingAncestor.width,
+        height: clippingAncestor.height
       };
     }
     return rectToClientRect(rect);
@@ -2758,6 +3202,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       scrollTop: 0
     };
     const offsets = createCoords(0);
+    function setLeftRTLScrollbarOffset() {
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
     if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
       if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
         scroll = getNodeScroll(offsetParent);
@@ -2767,19 +3214,15 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         offsets.x = offsetRect.x + offsetParent.clientLeft;
         offsets.y = offsetRect.y + offsetParent.clientTop;
       } else if (documentElement) {
-        offsets.x = getWindowScrollBarX(documentElement);
+        setLeftRTLScrollbarOffset();
       }
     }
-    let htmlX = 0;
-    let htmlY = 0;
-    if (documentElement && !isOffsetParentAnElement && !isFixed) {
-      const htmlRect = documentElement.getBoundingClientRect();
-      htmlY = htmlRect.top + scroll.scrollTop;
-      htmlX = htmlRect.left + scroll.scrollLeft - // RTL <body> scrollbar.
-      getWindowScrollBarX(documentElement, htmlRect);
+    if (isFixed && !isOffsetParentAnElement && documentElement) {
+      setLeftRTLScrollbarOffset();
     }
-    const x = rect.left + scroll.scrollLeft - offsets.x - htmlX;
-    const y = rect.top + scroll.scrollTop - offsets.y - htmlY;
+    const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+    const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
+    const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
     return {
       x,
       y,
@@ -2856,6 +3299,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     isElement,
     isRTL
   };
+  function rectsAreEqual(a, b) {
+    return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+  }
   function observeMove(element, onMove) {
     let io = null;
     let timeoutId;
@@ -2874,12 +3320,13 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         threshold = 1;
       }
       cleanup();
+      const elementRectForRootMargin = element.getBoundingClientRect();
       const {
         left,
         top,
         width,
         height
-      } = element.getBoundingClientRect();
+      } = elementRectForRootMargin;
       if (!skip) {
         onMove();
       }
@@ -2910,6 +3357,9 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
             refresh(false, ratio);
           }
         }
+        if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+          refresh();
+        }
         isFirstUpdate = false;
       }
       try {
@@ -2918,7 +3368,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
           // Handle <iframe>s
           root: root.ownerDocument
         });
-      } catch (e) {
+      } catch (_e) {
         io = new IntersectionObserver(handleObserve, options);
       }
       io.observe(element);
@@ -2973,7 +3423,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     }
     function frameLoop() {
       const nextRefRect = getBoundingClientRect(reference);
-      if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+      if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
         update();
       }
       prevRefRect = nextRefRect;
@@ -3021,7 +3471,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     if (!popover.isTooltip) {
       popover.trigger.setAttribute("aria-expanded", "true");
     }
-    popover.getCustomProps();
+    popover.buildCustomProps();
     const middlewareOptions = getMiddlewareOptions(popover);
     const arrowEl = popover.el.querySelector(middlewareOptions.arrow.element);
     middlewareOptions.arrow.element = arrowEl ? arrowEl : void 0;
@@ -3050,12 +3500,21 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     if (popover.getSetting("event") === "click") {
       handleDocumentClick.call(this, popover);
     }
+    popover.el.dispatchEvent(
+      new CustomEvent(popover.getSetting("customEventPrefix") + "opened", {
+        detail: this,
+        bubbles: true
+      })
+    );
+    await popover.parent.emit("opened", popover);
     return popover;
   }
   class Popover extends Collection {
     constructor(options = {}) {
       super({ ...defaults, ...options });
       __privateAdd(this, _handleKeydown3);
+      this.module = "Popover";
+      this.entryClass = PopoverEntry;
       this.trigger = null;
       __privateSet(this, _handleKeydown3, handleKeydown.bind(this));
     }
@@ -3067,9 +3526,6 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         return popover.state == "opened" && popover.getSetting("event") == "hover";
       });
     }
-    async createEntry(query, config) {
-      return new PopoverEntry(this, query, config);
-    }
     async open(id) {
       return open.call(this, id);
     }