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

package/dev/index.js

@@ -5,9 +5,73 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 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();
@@ -23,16 +87,24 @@ function toMilliseconds(value) {
   }
   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}`;
@@ -50,10 +122,15 @@ function cssVar(property, options) {
     }
   }
 }
-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);
@@ -61,7 +138,7 @@ function getCustomProps(entry) {
   const keys = entry.getSetting("customProps");
   for (let i = 0; i < keys.length; i++) {
     const prefix = getPrefix();
-    const module = entry.context.module.toLowerCase();
+    const module = entry.parent.module.toLowerCase();
     const key = toKebab(keys[i]);
     const value = styles.getPropertyValue(`--${prefix}${module}-${key}`).trim();
     if (value) {
@@ -70,14 +147,8 @@ function getCustomProps(entry) {
   }
   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);
@@ -86,7 +157,7 @@ function maybeReturnSetting(prop, key, type = "camel") {
 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";
@@ -98,23 +169,7 @@ function getSetting(key, options = {}) {
   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) {
@@ -134,9 +189,9 @@ function setInert(state, selector) {
     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");
       }
     });
@@ -146,308 +201,725 @@ function setGlobalState(state, selectorInert, selectorOverflow) {
   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 = {
@@ -473,9 +945,9 @@ function themeStore(options) {
   }
   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);
     },
@@ -486,7 +958,7 @@ function themeStore(options) {
     callback(name) {
       callbacks[name].call(this);
     },
-    // Getters.
+    // Getters
     get class() {
       return `${settings.prefix}${this.theme}`;
     },
@@ -496,7 +968,7 @@ function themeStore(options) {
     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";
     },
@@ -518,32 +990,61 @@ function themeStore(options) {
 }
 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",
@@ -559,90 +1060,13 @@ const defaults$2 = {
   // 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":
@@ -656,61 +1080,57 @@ function switchMode(entry) {
 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"));
@@ -719,56 +1139,63 @@ class DrawerEntry extends CollectionEntry {
       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}],
@@ -801,8 +1228,8 @@ async function handleClick$2(event) {
           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);
         }
       });
     }
@@ -817,10 +1244,20 @@ function handleKeydown$2(event) {
     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,
@@ -833,22 +1270,30 @@ async function open$2(query, transitionOverride, focus = true) {
       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(
@@ -862,15 +1307,23 @@ async function close$2(query, transitionOverride, focus = true) {
       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;
 }
@@ -887,19 +1340,16 @@ class Drawer extends Collection {
     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);
   }
@@ -942,19 +1392,15 @@ const defaults$1 = {
   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;
   }
@@ -962,18 +1408,18 @@ class ModalEntry extends CollectionEntry {
     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");
@@ -984,7 +1430,7 @@ class ModalEntry extends CollectionEntry {
       this.dialog.setAttribute("tabindex", "-1");
     }
   }
-  async afterRegister() {
+  async onRegisterEntry() {
     if (this.el.classList.contains(this.getSetting("stateOpened"))) {
       await this.open(false);
     } else {
@@ -993,11 +1439,9 @@ class ModalEntry extends CollectionEntry {
       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);
     }
   }
 }
@@ -1006,18 +1450,9 @@ function getModal(query) {
   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) {
@@ -1058,6 +1493,16 @@ function handleKeydown$1(event) {
     }
   }
 }
+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);
@@ -1081,10 +1526,13 @@ async function open$1(query, transitionOverride = void 0, focus = true) {
   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) {
@@ -1109,23 +1557,25 @@ async function close$1(query, transitionOverride, focus = true) {
     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) {
@@ -1144,72 +1594,29 @@ async function replace(query, transition2, focus = true) {
   }
   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);
   }
@@ -1257,16 +1664,14 @@ const defaults = {
     "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, {
@@ -1370,16 +1775,25 @@ async function close(query) {
     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) {
@@ -1389,7 +1803,6 @@ function closeCheck(popover) {
     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();
     }
@@ -1435,9 +1848,12 @@ function handleMouseLeave(popover, event) {
     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) {
@@ -1476,8 +1892,8 @@ function handleDocumentClick(popover) {
   });
 }
 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";
@@ -1510,31 +1926,35 @@ class PopoverEntry extends CollectionEntry {
     }
   }
   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) => {
@@ -1543,11 +1963,13 @@ class PopoverEntry extends CollectionEntry {
           });
         });
       } 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) => {
@@ -1570,7 +1992,7 @@ class PopoverEntry extends CollectionEntry {
       __privateSet(this, _eventListeners, null);
     }
   }
-  async beforeMount() {
+  async onCreateEntry() {
     this.trigger = document.querySelector(
       `[aria-controls="${this.id}"], [aria-describedby="${this.id}"]`
     );
@@ -1582,14 +2004,14 @@ class PopoverEntry extends CollectionEntry {
     }
     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();
     }
@@ -2041,15 +2463,20 @@ const flip$1 = function(options) {
         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) {
@@ -2356,7 +2783,7 @@ function isTopLayer(element) {
 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);
@@ -2552,6 +2979,28 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     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,
@@ -2583,23 +3032,17 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
       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);
@@ -2669,9 +3112,10 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
   } 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);
@@ -2754,6 +3198,9 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     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);
@@ -2763,19 +3210,15 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
       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,
@@ -2852,6 +3295,9 @@ const platform = {
   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;
@@ -2870,12 +3316,13 @@ function observeMove(element, onMove) {
       threshold = 1;
     }
     cleanup();
+    const elementRectForRootMargin = element.getBoundingClientRect();
     const {
       left,
       top,
       width,
       height
-    } = element.getBoundingClientRect();
+    } = elementRectForRootMargin;
     if (!skip) {
       onMove();
     }
@@ -2906,6 +3353,9 @@ function observeMove(element, onMove) {
           refresh(false, ratio);
         }
       }
+      if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        refresh();
+      }
       isFirstUpdate = false;
     }
     try {
@@ -2914,7 +3364,7 @@ function observeMove(element, onMove) {
         // Handle <iframe>s
         root: root.ownerDocument
       });
-    } catch (e) {
+    } catch (_e) {
       io = new IntersectionObserver(handleObserve, options);
     }
     io.observe(element);
@@ -2969,7 +3419,7 @@ function autoUpdate(reference, floating, update, options) {
   }
   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;
@@ -3017,7 +3467,7 @@ async function open(query) {
   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;
@@ -3046,12 +3496,21 @@ async function open(query) {
   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));
   }
@@ -3063,9 +3522,6 @@ class Popover extends Collection {
       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);
   }