vrembem 4.0.0-next.26 → 4.0.0-next.28

package/dev/index.umd.cjs

@@ -9,7 +9,126 @@ 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, _entryPrototype, _focusable, _handleFocusTrap, _handleFocusLock, _handleClick, _handleKeydown, _handleClick2, _handleKeydown2, _handleKeydown3;
+  var _handler, _focusable, _handleFocusTrap, _handleFocusLock, _mode, _state, _breakpoint, _handleClick, _handleKeydown, _handleClick2, _handleKeydown2, _eventListeners, _isHovered, _handleKeydown3;
+  function toCamel(value) {
+    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();
+  }
+  function toMilliseconds(value) {
+    if (typeof value === "number") {
+      return value;
+    }
+    const parsed = parseFloat(value);
+    if (!Number.isNaN(parsed)) {
+      const isMilliseconds = value.includes("ms");
+      return parsed * (isMilliseconds ? 1 : 1e3);
+    }
+    throw new Error(`Could not convert value to milliseconds: ${value}`);
+  }
+  function getPrefix() {
+    return getComputedStyle(document.body).getPropertyValue("--vb-prefix").trim();
+  }
+  function cssVar(property, options) {
+    const settings = {
+      fallback: null,
+      element: document.body,
+      ...options
+    };
+    if (property.slice(0, 2) !== "--") {
+      const prefixValue = getPrefix();
+      if (prefixValue) {
+        property = `${prefixValue}${property}`;
+      }
+      property = `--${property}`;
+    }
+    const cssValue = getComputedStyle(settings.element).getPropertyValue(property).trim();
+    if (cssValue) {
+      return cssValue;
+    } else {
+      if (settings.fallback) {
+        return settings.fallback;
+      } else {
+        throw new Error(`CSS variable "${property}" was not found!`);
+      }
+    }
+  }
+  function getConfig(el, dataConfig = "config") {
+    const string = el.getAttribute(`data-${dataConfig}`) || "";
+    const json = string.replace(/'/g, '"');
+    return json ? JSON.parse(json) : {};
+  }
+  function getCustomProps(entry) {
+    const styles = getComputedStyle(entry.el);
+    const result = {};
+    const keys = Object.keys(entry.context.settings);
+    for (let i = 0; i < keys.length; i++) {
+      const prefix = getPrefix();
+      const module2 = entry.context.module.toLowerCase();
+      const key = toKebab(keys[i]);
+      const value = styles.getPropertyValue(`--${prefix}${module2}-${key}`).trim();
+      if (value) {
+        result[key] = value;
+      }
+    }
+    return result;
+  }
+  function getElement(query) {
+    if (typeof query === "string") {
+      return document.getElementById(query);
+    } else if (query instanceof HTMLElement) {
+      return query;
+    } else {
+      return null;
+    }
+  }
+  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));
+    });
+  }
+  function setOverflowHidden(state, selector) {
+    if (selector) {
+      const els = document.querySelectorAll(selector);
+      els.forEach((el) => {
+        if (state) {
+          el.style.overflow = "hidden";
+        } else {
+          el.style.removeProperty("overflow");
+        }
+      });
+    }
+  }
+  function setInert(state, selector) {
+    if (selector) {
+      const els = document.querySelectorAll(selector);
+      els.forEach((el) => {
+        if (state) {
+          el.inert = true;
+          el.setAttribute("aria-hidden", true);
+        } else {
+          el.inert = null;
+          el.removeAttribute("aria-hidden");
+        }
+      });
+    }
+  }
+  function setGlobalState(state, selectorInert, selectorOverflow) {
+    setInert(!!state, selectorInert);
+    setOverflowHidden(!!state, selectorOverflow);
+  }
   class Breakpoint {
     constructor(value, handler) {
       __privateAdd(this, _handler);
@@ -48,107 +167,146 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   _handler = new WeakMap();
   class Collection {
     constructor(options = {}) {
-      __privateAdd(this, _entryPrototype);
-      const root = this;
       this.module = this.constructor.name;
       this.collection = [];
-      this.settings = Object.assign({ dataConfig: "config" }, options);
-      __privateSet(this, _entryPrototype, {
-        applySettings(obj) {
-          return Object.assign(this.settings, obj);
-        },
-        getDataConfig() {
-          return Object.assign(this.dataConfig, getConfig(this.el, this.getSetting("dataConfig")));
-        },
-        getCustomProps() {
-          return Object.assign(this.customProps, getCustomProps(this.el, root.module, this.customPropKeys));
-        },
-        getSetting(key) {
-          const camel = toCamel(key);
-          const kebab = toKebab(key);
-          if ("dataConfig" in this && camel in this.dataConfig) {
-            return this.dataConfig[camel];
-          }
-          if ("customProps" in this && kebab in this.customProps) {
-            return this.customProps[kebab];
-          }
-          if ("settings" in this && camel in this.settings) {
-            return this.settings[camel];
-          }
-          if ("settings" in root && camel in root.settings) {
-            return root.settings[camel];
-          }
-          throw new Error(`${root.module} setting does not exist: ${key}`);
-        },
-        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;
-          }
-        },
-        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;
-          }
-        }
-      });
+      this.settings = Object.assign({
+        dataConfig: "config",
+        teleport: null,
+        teleportMethod: "append"
+      }, options);
     }
-    createEntry(query, overrides = {}) {
-      const el = getElement(query);
-      const entry = Object.create(__privateGet(this, _entryPrototype));
-      Object.assign(entry, {
-        id: el == null ? void 0 : el.id,
-        el,
-        settings: {},
-        dataConfig: {},
-        customProps: {},
-        customPropKeys: [],
-        returnRef: null
-      }, overrides);
-      return entry;
+    get(value, key = "id") {
+      return this.collection.find((entry) => entry[key] === value);
     }
-    async register(item) {
-      await this.deregister(item);
-      this.collection.push(item);
-      return this.collection;
+    applySettings(obj) {
+      return Object.assign(this.settings, obj);
+    }
+    async createEntry(query, config) {
+      return new CollectionEntry(this, query, config);
+    }
+    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;
     }
-    async deregister(ref) {
-      const index2 = this.collection.findIndex((entry) => {
-        return entry === ref;
-      });
-      if (index2 >= 0) {
+    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) => {
-          delete entry[prop];
+          if (prop != "beforeDeregister" && prop != "afterDeregister") {
+            delete entry[prop];
+          }
         });
         this.collection.splice(index2, 1);
+        await lifecycleHook.call(entry, "afterDeregister", reReg);
+        await lifecycleHook.call(this, "afterDeregister", entry);
       }
       return this.collection;
     }
-    async registerCollection(items) {
-      await Promise.all(Array.from(items, (item) => {
-        this.register(item);
-      }));
-      return this.collection;
+    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);
+      }
+      await lifecycleHook.call(this, "afterMount");
+      return this;
     }
-    async deregisterCollection() {
+    async unmount() {
+      await lifecycleHook.call(this, "beforeUnmount");
       while (this.collection.length > 0) {
-        await this.deregister(this.collection[0]);
+        await this.deregister(this.collection[0].id);
       }
-      return this.collection;
+      await lifecycleHook.call(this, "afterUnmount");
+      return this;
     }
-    get(value, key = "id") {
-      return this.collection.find((entry) => entry[key] === value);
+  }
+  class CollectionEntry {
+    constructor(context, query, options = {}) {
+      this.context = context;
+      this.id = (query == null ? void 0 : query.id) || query;
+      this.el = getElement(query);
+      this.settings = Object.assign({}, options);
+      this.dataConfig = {};
+      this.customProps = {};
+      this.returnRef = null;
+    }
+    applySettings(obj) {
+      return Object.assign(this.settings, obj);
+    }
+    getDataConfig() {
+      return Object.assign(this.dataConfig, getConfig(this.el, this.getSetting("dataConfig")));
+    }
+    getCustomProps() {
+      return Object.assign(this.customProps, getCustomProps(this));
+    }
+    getSetting(key) {
+      const camel = toCamel(key);
+      const kebab = toKebab(key);
+      if ("dataConfig" in this && camel in this.dataConfig) {
+        return this.dataConfig[camel];
+      }
+      if ("customProps" in this && kebab in this.customProps) {
+        return this.customProps[kebab];
+      }
+      if ("settings" in this && camel in this.settings) {
+        return this.settings[camel];
+      }
+      if ("settings" in this.context && camel in this.context.settings) {
+        return this.context.settings[camel];
+      }
+      throw new Error(`${this.context.module} setting does not exist: ${key}`);
+    }
+    async mount(options = {}) {
+      if (this.el === null) {
+        throw new Error(`${this.context.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();
+      }
+      await lifecycleHook.call(this, "afterMount");
+    }
+    async unmount(reMount = false) {
+      await lifecycleHook.call(this, "beforeUnmount", reMount);
+      if (this.getSetting("teleport")) {
+        this.teleportReturn();
+      }
+      await lifecycleHook.call(this, "afterUnmount", reMount);
+    }
+    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;
+      }
+    }
+    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;
+      }
     }
   }
-  _entryPrototype = new WeakMap();
   class FocusTrap {
     constructor(el = null, selectorFocus = "[data-focus]") {
       __privateAdd(this, _focusable);
@@ -251,58 +409,6 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     const isTab = event.key === "Tab" || event.keyCode === 9;
     if (isTab) event.preventDefault();
   }
-  function getPrefix() {
-    return getComputedStyle(document.body).getPropertyValue("--vb-prefix").trim();
-  }
-  function cssVar(property, options) {
-    const settings = {
-      fallback: null,
-      element: document.body,
-      ...options
-    };
-    if (property.slice(0, 2) !== "--") {
-      const prefixValue = getPrefix();
-      if (prefixValue) {
-        property = `${prefixValue}${property}`;
-      }
-      property = `--${property}`;
-    }
-    const cssValue = getComputedStyle(settings.element).getPropertyValue(property).trim();
-    if (cssValue) {
-      return cssValue;
-    } else {
-      if (settings.fallback) {
-        return settings.fallback;
-      } else {
-        throw new Error(`CSS variable "${property}" was not found!`);
-      }
-    }
-  }
-  function getConfig(el, dataConfig = "config") {
-    const string = el.getAttribute(`data-${dataConfig}`) || "";
-    const json = string.replace(/'/g, '"');
-    return json ? JSON.parse(json) : {};
-  }
-  function getCustomProps(el, module2, array) {
-    const styles = getComputedStyle(el);
-    const result = {};
-    for (let i = 0; i < array.length; i++) {
-      const prefix = getPrefix();
-      const value = styles.getPropertyValue(`--${prefix}${module2.toLowerCase()}-${array[i]}`).trim();
-      if (value) {
-        result[array[i]] = value;
-      }
-    }
-    return result;
-  }
-  function getElement(query) {
-    if (typeof query === "string") {
-      return document.getElementById(query);
-    } else if (query instanceof HTMLElement) {
-      return query;
-    }
-    return void 0;
-  }
   function localStore(key, enable = true) {
     const local = localStorage.getItem(key);
     const store = local ? JSON.parse(local) : {};
@@ -406,75 +512,26 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     api.callback("onInit");
     return api;
   }
-  function toCamel(value) {
-    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();
-  }
-  function transition(el, from, to, duration = "transition-duration") {
-    return new Promise((resolve) => {
-      if (typeof duration === "string") {
-        const cssValue = cssVar(duration, { element: el });
-        const ms = cssValue.includes("ms") ? true : false;
-        duration = parseFloat(cssValue) * (ms ? 1 : 1e3);
-      }
-      el.classList.remove(from.finish);
-      el.classList.add(to.start);
-      setTimeout(() => {
-        el.classList.add(to.finish);
-        el.classList.remove(to.start);
-        resolve(el);
-      }, duration);
-    });
-  }
-  function setOverflowHidden(state, selector) {
-    if (selector) {
-      const els = document.querySelectorAll(selector);
-      els.forEach((el) => {
-        if (state) {
-          el.style.overflow = "hidden";
-        } else {
-          el.style.removeProperty("overflow");
-        }
-      });
-    }
-  }
-  function setInert(state, selector) {
-    if (selector) {
-      const els = document.querySelectorAll(selector);
-      els.forEach((el) => {
-        if (state) {
-          el.inert = true;
-          el.setAttribute("aria-hidden", true);
-        } else {
-          el.inert = null;
-          el.removeAttribute("aria-hidden");
-        }
-      });
-    }
-  }
-  function updateGlobalState(state, selectorInert, selectorOverflow) {
-    setInert(!!state, selectorInert);
-    setOverflowHidden(!!state, selectorOverflow);
-  }
   const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     Breakpoint,
     Collection,
+    CollectionEntry,
     FocusTrap,
     cssVar,
     getConfig,
     getCustomProps,
     getElement,
     getPrefix,
+    lifecycleHook,
     localStore,
+    setGlobalState,
     teleport,
     themeStore,
     toCamel,
     toKebab,
-    transition,
-    updateGlobalState
+    toMilliseconds,
+    transition
   }, Symbol.toStringTag, { value: "Module" }));
   const defaults$2 = {
     // Data attributes
@@ -483,7 +540,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     dataToggle: "drawer-toggle",
     dataBreakpoint: "drawer-breakpoint",
     // Selectors
-    selectorDrawer: ".drawer",
+    selector: ".drawer",
     selectorDialog: ".drawer__dialog",
     selectorScreen: ".drawer",
     selectorFocus: "[data-focus]",
@@ -499,7 +556,6 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     // Feature toggles
     breakpoints: null,
     customEventPrefix: "drawer:",
-    eventListeners: true,
     store: true,
     storeKey: "VB:DrawerState",
     setTabindex: true,
@@ -557,28 +613,154 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     }
   }
   function getDrawer(query) {
-    const entry = typeof query === "string" ? this.get(query) : this.get(query.id);
+    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);
+  }
+  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":
+        return toInline.call(this, entry);
+      case "modal":
+        return toModal.call(this, entry);
+      default:
+        throw new Error(`"${entry.mode}" is not a valid drawer mode.`);
+    }
+  }
+  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
+    }));
+    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
+    }));
+    return entry;
+  }
+  class DrawerEntry extends CollectionEntry {
+    constructor(context, query, options = {}) {
+      super(context, query, options);
+      __privateAdd(this, _mode);
+      __privateAdd(this, _state);
+      __privateAdd(this, _breakpoint);
+      this.dialog = null;
+      this.trigger = null;
+      __privateSet(this, _breakpoint, new Breakpoint());
+      __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) {
+      __privateSet(this, _mode, value);
+      switchMode.call(this.context, this);
+    }
+    get state() {
+      return __privateGet(this, _state);
+    }
+    set state(value) {
+      __privateSet(this, _state, value);
+      if (this.mode === "inline" && value != "opening" && value != "closing") {
+        this.inlineState = value;
+        if (this.getSetting("store")) {
+          this.context.store.set(this.id, value);
+        }
+      }
+      if (value === "indeterminate") {
+        this.el.classList.remove(this.getSetting("stateOpened"));
+        this.el.classList.remove(this.getSetting("stateOpening"));
+        this.el.classList.remove(this.getSetting("stateClosed"));
+        this.el.classList.remove(this.getSetting("stateClosing"));
+      }
+    }
+    async open(transition2, focus) {
+      return this.context.open(this, transition2, focus);
+    }
+    async close(transition2, focus) {
+      return this.context.close(this, transition2, focus);
+    }
+    async toggle(transition2, focus) {
+      return this.context.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;
       }
-    } else {
-      if (entry.trigger) {
-        entry.trigger.focus();
-        entry.trigger = null;
+    }
+    async beforeMount() {
+      const dialog = this.el.querySelector(this.getSetting("selectorDialog"));
+      this.dialog = dialog ? dialog : this.el;
+      if (this.getSetting("setTabindex")) {
+        this.dialog.setAttribute("tabindex", "-1");
       }
-      this.focusTrap.unmount();
+      applyInitialState(this);
+      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") {
+        await this.close(false);
+      }
+      this.context.store.set(this.id);
+      this.unmountBreakpoint();
     }
   }
+  _mode = new WeakMap();
+  _state = new WeakMap();
+  _breakpoint = new WeakMap();
   async function handleClick$2(event) {
     const trigger = event.target.closest(`
     [data-${this.settings.dataOpen}],
@@ -611,8 +793,8 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
             entry.trigger = trigger;
             return entry.close();
           } else {
-            const parent = event.target.closest(this.settings.selectorDrawer);
-            if (parent) return this.close(parent);
+            const parent = event.target.closest(this.settings.selector);
+            if (parent) return this.close(parent.id);
           }
         });
       }
@@ -624,45 +806,27 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   }
   function handleKeydown$2(event) {
     if (event.key === "Escape") {
-      if (this.activeModal) return this.close(this.activeModal);
-    }
-  }
-  async function deregister$2(obj, close2 = true) {
-    const index2 = this.collection.findIndex((entry) => {
-      return entry.id === obj.id;
-    });
-    if (index2 >= 0) {
-      const entry = this.collection[index2];
-      if (close2 && entry.state === "opened") {
-        await entry.close(false);
-      }
-      this.store.set(entry.id);
-      entry.unmountBreakpoint();
-      Object.getOwnPropertyNames(entry).forEach((prop) => {
-        delete entry[prop];
-      });
-      this.collection.splice(index2, 1);
+      if (this.activeModal) return this.close(this.activeModal.id);
     }
-    return this.collection;
   }
   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 (transitionOverride != void 0 ? transitionOverride : entry.getSetting("transition")) {
-        await transition(entry.el, {
-          start: entry.getSetting("stateClosing"),
-          finish: entry.getSetting("stateClosed")
-        }, {
-          start: entry.getSetting("stateOpening"),
-          finish: entry.getSetting("stateOpened")
-        }, entry.getSetting("transitionDuration"));
+        await transition(
+          entry.el,
+          entry.getSetting("stateClosed"),
+          entry.getSetting("stateOpening"),
+          entry.getSetting("stateOpened"),
+          entry.getSetting("transitionDuration")
+        );
       } else {
         entry.el.classList.add(entry.getSetting("stateOpened"));
         entry.el.classList.remove(entry.getSetting("stateClosed"));
       }
       entry.state = "opened";
-      if (entry.mode === "modal") updateGlobalState(true, entry.getSetting("selectorInert"), entry.getSetting("selectorOverflow"));
+      if (entry.mode === "modal") setGlobalState(true, entry.getSetting("selectorInert"), entry.getSetting("selectorOverflow"));
       if (focus) {
         updateFocusState$1.call(this, entry);
       }
@@ -679,19 +843,19 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       entry.state = "closing";
       document.activeElement.blur();
       if (transitionOverride != void 0 ? transitionOverride : entry.getSetting("transition")) {
-        await transition(entry.el, {
-          start: entry.getSetting("stateOpening"),
-          finish: entry.getSetting("stateOpened")
-        }, {
-          start: entry.getSetting("stateClosing"),
-          finish: entry.getSetting("stateClosed")
-        }, entry.getSetting("transitionDuration"));
+        await transition(
+          entry.el,
+          entry.getSetting("stateOpened"),
+          entry.getSetting("stateClosing"),
+          entry.getSetting("stateClosed"),
+          entry.getSetting("transitionDuration")
+        );
       } else {
         entry.el.classList.add(entry.getSetting("stateClosed"));
         entry.el.classList.remove(entry.getSetting("stateOpened"));
       }
       entry.state = "closed";
-      if (entry.mode === "modal") updateGlobalState(false, entry.getSetting("selectorInert"), entry.getSetting("selectorOverflow"));
+      if (entry.mode === "modal") setGlobalState(false, entry.getSetting("selectorInert"), entry.getSetting("selectorOverflow"));
       if (focus) {
         updateFocusState$1.call(this, entry);
       }
@@ -710,186 +874,44 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       return close$2.call(this, entry, transition2, focus);
     }
   }
-  function switchMode(entry) {
-    switch (entry.mode) {
-      case "inline":
-        return toInline.call(this, entry);
-      case "modal":
-        return toModal.call(this, entry);
-      default:
-        throw new Error(`"${entry.mode}" is not a valid drawer mode.`);
-    }
-  }
-  async function toInline(entry) {
-    entry.el.classList.remove(entry.getSetting("classModal"));
-    entry.dialog.removeAttribute("aria-modal");
-    updateGlobalState(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
-    }));
-    return entry;
-  }
-  async function toModal(entry) {
-    entry.el.classList.add(entry.getSetting("classModal"));
-    entry.dialog.setAttribute("aria-modal", "true");
-    await close$2.call(this, entry, false, false);
-    entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
-      detail: this,
-      bubbles: true
-    }));
-    return entry;
-  }
-  async function register$2(el, config = {}) {
-    await deregister$2.call(this, el, false);
-    const root = this;
-    const breakpoint = new Breakpoint();
-    let _mode, _state = "indeterminate";
-    const entry = this.createEntry(el);
-    Object.assign(entry, {
-      dialog: null,
-      trigger: null,
-      inlineState: "indeterminate",
-      open(transition2, focus) {
-        return open$2.call(root, this, transition2, focus);
-      },
-      close(transition2, focus) {
-        return close$2.call(root, this, transition2, focus);
-      },
-      toggle(transition2, focus) {
-        return toggle.call(root, this, transition2, focus);
-      },
-      deregister() {
-        return deregister$2.call(root, this);
-      },
-      mountBreakpoint() {
-        const value = this.breakpoint;
-        const handler = this.handleBreakpoint.bind(this);
-        breakpoint.mount(value, handler);
-        return this;
-      },
-      unmountBreakpoint() {
-        breakpoint.unmount();
-        return this;
-      },
-      handleBreakpoint(event) {
-        const bpMode = event.matches ? "inline" : "modal";
-        if (this.mode != bpMode) {
-          this.mode = bpMode;
-        }
-        return this;
-      }
-    });
-    Object.defineProperties(entry, Object.getOwnPropertyDescriptors({
-      get breakpoint() {
-        return getBreakpoint.call(root, el);
-      },
-      get store() {
-        return root.store.get(this.id);
-      },
-      get mode() {
-        return _mode;
-      },
-      set mode(value) {
-        _mode = value;
-        switchMode.call(root, this);
-      },
-      get state() {
-        return _state;
-      },
-      set state(value) {
-        _state = value;
-        if (this.mode === "inline" && value != "opening" && value != "closing") {
-          this.inlineState = value;
-          if (this.getSetting("store")) {
-            root.store.set(this.id, value);
-          }
-        }
-        if (value === "indeterminate") {
-          this.el.classList.remove(this.getSetting("stateOpened"));
-          this.el.classList.remove(this.getSetting("stateOpening"));
-          this.el.classList.remove(this.getSetting("stateClosed"));
-          this.el.classList.remove(this.getSetting("stateClosing"));
-        }
-      }
-    }));
-    entry.applySettings(config);
-    entry.getDataConfig();
-    if (entry.getSetting("teleport")) {
-      entry.teleport();
-    }
-    this.collection.push(entry);
-    const dialog = el.querySelector(entry.getSetting("selectorDialog"));
-    entry.dialog = dialog ? dialog : el;
-    if (entry.getSetting("setTabindex")) {
-      entry.dialog.setAttribute("tabindex", "-1");
-    }
-    applyInitialState(entry);
-    entry.inlineState = entry.state;
-    entry.mode = el.classList.contains(entry.getSetting("classModal")) ? "modal" : "inline";
-    if (entry.breakpoint) {
-      entry.mountBreakpoint();
-    }
-    return entry;
-  }
   class Drawer extends Collection {
     constructor(options) {
       super({ ...defaults$2, ...options });
       __privateAdd(this, _handleClick);
       __privateAdd(this, _handleKeydown);
       this.focusTrap = new FocusTrap();
-      this.store = localStore(this.settings.storeKey, this.settings.store);
       __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 mount(options = null) {
-      if (options) this.settings = { ...this.settings, ...options };
-      const drawers = document.querySelectorAll(this.settings.selectorDrawer);
-      await this.registerCollection(drawers);
-      if (this.settings.eventListeners) {
-        this.mountEventListeners();
-      }
-      return this;
+    async createEntry(query, config) {
+      return new DrawerEntry(this, query, config);
     }
-    async unmount() {
-      await this.deregisterCollection();
-      if (this.settings.eventListeners) {
-        this.unmountEventListeners();
-      }
-      return this;
+    async open(id, transition2, focus) {
+      return open$2.call(this, id, transition2, focus);
+    }
+    async close(id, transition2, focus) {
+      return close$2.call(this, id, transition2, focus);
+    }
+    async toggle(id, transition2, focus) {
+      return toggle.call(this, id, transition2, focus);
     }
-    mountEventListeners() {
+    async afterMount() {
       document.addEventListener("click", __privateGet(this, _handleClick), false);
       document.addEventListener("keydown", __privateGet(this, _handleKeydown), false);
     }
-    unmountEventListeners() {
+    async beforeUnmount() {
+      this.trigger = null;
+    }
+    async afterUnmount() {
       document.removeEventListener("click", __privateGet(this, _handleClick), false);
       document.removeEventListener("keydown", __privateGet(this, _handleKeydown), false);
     }
-    register(query, config = {}) {
-      let el = typeof query == "string" ? document.getElementById(query) : query;
-      return el ? register$2.call(this, el, config) : Promise.reject(new Error(`Failed to register; drawer not found with ID of: "${query.id || query}".`));
-    }
-    deregister(query) {
-      let obj = this.get(query.id || query);
-      return obj ? deregister$2.call(this, obj) : Promise.reject(new Error(`Failed to deregister; drawer does not exist in collection with ID of: "${query.id || query}".`));
-    }
-    open(id, transition2, focus) {
-      return open$2.call(this, id, transition2, focus);
-    }
-    close(id, transition2, focus) {
-      return close$2.call(this, id, transition2, focus);
-    }
-    toggle(id, transition2, focus) {
-      return toggle.call(this, id, transition2, focus);
-    }
   }
   _handleClick = new WeakMap();
   _handleKeydown = new WeakMap();
@@ -899,7 +921,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     dataClose: "modal-close",
     dataReplace: "modal-replace",
     // Selectors
-    selectorModal: ".modal",
+    selector: ".modal",
     selectorDialog: ".modal__dialog",
     selectorScreen: ".modal",
     selectorRequired: '[role="alertdialog"]',
@@ -913,13 +935,61 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     stateClosed: "is-closed",
     // Feature settings
     customEventPrefix: "modal:",
-    eventListeners: true,
     setTabindex: true,
     teleport: null,
     teleportMethod: "append",
     transition: true,
     transitionDuration: "modal-transition-duration"
   };
+  class ModalEntry extends CollectionEntry {
+    constructor(context, query, options = {}) {
+      super(context, query, options);
+      this.state = "closed";
+      this.dialog = null;
+    }
+    get isRequired() {
+      return this.dialog.matches(this.getSetting("selectorRequired"));
+    }
+    async open(transition2, focus) {
+      return this.context.open(this, transition2, focus);
+    }
+    async close(transition2, focus) {
+      return this.context.close(this, transition2, focus);
+    }
+    async replace(transition2, focus) {
+      return this.context.replace(this, transition2, focus);
+    }
+    async deregister() {
+      return this.context.deregister(this.id);
+    }
+    async beforeMount() {
+      const dialog = this.el.querySelector(this.getSetting("selectorDialog"));
+      this.dialog = dialog ? dialog : this.el;
+      this.dialog.setAttribute("aria-modal", "true");
+      if (!this.dialog.hasAttribute("role")) {
+        this.dialog.setAttribute("role", "dialog");
+      }
+      if (this.getSetting("setTabindex")) {
+        this.dialog.setAttribute("tabindex", "-1");
+      }
+    }
+    async afterRegister() {
+      if (this.el.classList.contains(this.getSetting("stateOpened"))) {
+        await this.open(false);
+      } else {
+        this.el.classList.remove(this.getSetting("stateOpening"));
+        this.el.classList.remove(this.getSetting("stateClosing"));
+        this.el.classList.add(this.getSetting("stateClosed"));
+      }
+    }
+    async beforeUnmount(reMount = false) {
+      if (!reMount && this.state === "opened") {
+        await this.close(false);
+      } else {
+        this.context.stack.remove(this);
+      }
+    }
+  }
   function getModal(query) {
     const entry = typeof query === "string" ? this.get(query) : this.get(query.id);
     if (entry) {
@@ -950,14 +1020,14 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       if (trigger.matches(`[data-${this.settings.dataOpen}]`)) {
         const selector = trigger.getAttribute(`data-${this.settings.dataOpen}`).trim();
         const entry = getModal.call(this, selector);
-        const fromModal = event.target.closest(this.settings.selectorModal);
+        const fromModal = event.target.closest(this.settings.selector);
         if (!fromModal) this.trigger = trigger;
         return entry.open();
       }
       if (trigger.matches(`[data-${this.settings.dataReplace}]`)) {
         const selector = trigger.getAttribute(`data-${this.settings.dataReplace}`).trim();
         const entry = getModal.call(this, selector);
-        const fromModal = event.target.closest(this.settings.selectorModal);
+        const fromModal = event.target.closest(this.settings.selector);
         if (!fromModal) this.trigger = trigger;
         return entry.replace();
       }
@@ -977,27 +1047,6 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
     }
   }
-  async function deregister$1(obj, close2 = true) {
-    const index2 = this.collection.findIndex((entry) => {
-      return entry.id === obj.id;
-    });
-    if (index2 >= 0) {
-      const entry = this.collection[index2];
-      if (close2 && entry.state === "opened") {
-        await entry.close(false);
-      } else {
-        this.stack.remove(entry);
-      }
-      if (entry.getSetting("teleport")) {
-        entry.teleportReturn();
-      }
-      Object.getOwnPropertyNames(entry).forEach((prop) => {
-        delete entry[prop];
-      });
-      this.collection.splice(index2, 1);
-    }
-    return this.collection;
-  }
   async function open$1(query, transitionOverride = void 0, focus = true) {
     const entry = getModal.call(this, query);
     this.stack.moveToTop(entry);
@@ -1005,13 +1054,13 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       entry.state = "opening";
       this.stack.add(entry);
       if (transitionOverride != void 0 ? transitionOverride : entry.getSetting("transition")) {
-        await transition(entry.el, {
-          start: entry.getSetting("stateClosing"),
-          finish: entry.getSetting("stateClosed")
-        }, {
-          start: entry.getSetting("stateOpening"),
-          finish: entry.getSetting("stateOpened")
-        }, entry.getSetting("transitionDuration"));
+        await transition(
+          entry.el,
+          entry.getSetting("stateClosed"),
+          entry.getSetting("stateOpening"),
+          entry.getSetting("stateOpened"),
+          entry.getSetting("transitionDuration")
+        );
       } else {
         entry.el.classList.add(entry.getSetting("stateOpened"));
         entry.el.classList.remove(entry.getSetting("stateClosed"));
@@ -1033,13 +1082,13 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       entry.state = "closing";
       document.activeElement.blur();
       if (transitionOverride != void 0 ? transitionOverride : entry.getSetting("transition")) {
-        await transition(entry.el, {
-          start: entry.getSetting("stateOpening"),
-          finish: entry.getSetting("stateOpened")
-        }, {
-          start: entry.getSetting("stateClosing"),
-          finish: entry.getSetting("stateClosed")
-        }, entry.getSetting("transitionDuration"));
+        await transition(
+          entry.el,
+          entry.getSetting("stateOpened"),
+          entry.getSetting("stateClosing"),
+          entry.getSetting("stateClosed"),
+          entry.getSetting("transitionDuration")
+        );
       } else {
         entry.el.classList.add(entry.getSetting("stateClosed"));
         entry.el.classList.remove(entry.getSetting("stateOpened"));
@@ -1084,55 +1133,6 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     }
     return { opened: resultOpened, closed: resultClosed };
   }
-  async function register$1(el, config = {}) {
-    await deregister$1.call(this, el, false);
-    const root = this;
-    const entry = this.createEntry(el);
-    Object.assign(entry, {
-      state: "closed",
-      dialog: null,
-      open(transition2, focus) {
-        return open$1.call(root, this, transition2, focus);
-      },
-      close(transition2, focus) {
-        return close$1.call(root, this, transition2, focus);
-      },
-      replace(transition2, focus) {
-        return replace.call(root, this, transition2, focus);
-      },
-      deregister() {
-        return deregister$1.call(root, this);
-      }
-    });
-    Object.defineProperties(entry, Object.getOwnPropertyDescriptors({
-      get isRequired() {
-        return this.dialog.matches(this.getSetting("selectorRequired"));
-      }
-    }));
-    entry.applySettings(config);
-    entry.getDataConfig();
-    const dialog = el.querySelector(entry.getSetting("selectorDialog"));
-    entry.dialog = dialog ? dialog : el;
-    entry.dialog.setAttribute("aria-modal", "true");
-    if (!entry.dialog.hasAttribute("role")) {
-      entry.dialog.setAttribute("role", "dialog");
-    }
-    if (entry.getSetting("setTabindex")) {
-      entry.dialog.setAttribute("tabindex", "-1");
-    }
-    if (entry.getSetting("teleport")) {
-      entry.teleport();
-    }
-    this.collection.push(entry);
-    if (entry.el.classList.contains(entry.getSetting("stateOpened"))) {
-      await entry.open(false);
-    } else {
-      entry.el.classList.remove(entry.getSetting("stateOpening"));
-      entry.el.classList.remove(entry.getSetting("stateClosing"));
-      entry.el.classList.add(entry.getSetting("stateClosed"));
-    }
-    return entry;
-  }
   function stack(settings) {
     const stackArray = [];
     return {
@@ -1150,8 +1150,8 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
           entry.el.style.zIndex = parseInt(value) + index2 + 1;
         });
       },
-      updateGlobalState() {
-        updateGlobalState(this.top, settings.selectorInert, settings.selectorOverflow);
+      setGlobalState() {
+        setGlobalState(this.top, settings.selectorInert, settings.selectorOverflow);
         this.updateIndex();
       },
       add(entry) {
@@ -1159,7 +1159,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         const value = getComputedStyle(entry.el)["z-index"];
         entry.el.style.zIndex = parseInt(value) + stackArray.length + 1;
         stackArray.push(entry);
-        this.updateGlobalState();
+        this.setGlobalState();
       },
       remove(entry) {
         const index2 = stackArray.findIndex((item) => {
@@ -1168,7 +1168,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         if (index2 >= 0) {
           entry.el.style.zIndex = null;
           stackArray.splice(index2, 1);
-          this.updateGlobalState();
+          this.setGlobalState();
         }
       },
       moveToTop(entry) {
@@ -1189,53 +1189,23 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       __privateAdd(this, _handleKeydown2);
       this.trigger = null;
       this.focusTrap = new FocusTrap();
-      this.stack = stack(this.settings);
       __privateSet(this, _handleClick2, handleClick$1.bind(this));
       __privateSet(this, _handleKeydown2, handleKeydown$1.bind(this));
+      this.stack = stack(this.settings);
     }
     get active() {
       return this.stack.top;
     }
-    async mount(options) {
-      if (options) this.settings = { ...this.settings, ...options };
-      const modals = document.querySelectorAll(this.settings.selectorModal);
-      await this.registerCollection(modals);
-      if (this.settings.eventListeners) {
-        this.mountEventListeners();
-      }
-      return this;
-    }
-    async unmount() {
-      this.trigger = null;
-      await this.deregisterCollection();
-      if (this.settings.eventListeners) {
-        this.unmountEventListeners();
-      }
-      return this;
-    }
-    mountEventListeners() {
-      document.addEventListener("click", __privateGet(this, _handleClick2), false);
-      document.addEventListener("keydown", __privateGet(this, _handleKeydown2), false);
-    }
-    unmountEventListeners() {
-      document.removeEventListener("click", __privateGet(this, _handleClick2), false);
-      document.removeEventListener("keydown", __privateGet(this, _handleKeydown2), false);
-    }
-    register(query, config = {}) {
-      let el = typeof query == "string" ? document.getElementById(query) : query;
-      return el ? register$1.call(this, el, config) : Promise.reject(new Error(`Failed to register; modal not found with ID of: "${query.id || query}".`));
+    async createEntry(query, config) {
+      return new ModalEntry(this, query, config);
     }
-    deregister(query) {
-      let obj = this.get(query.id || query);
-      return obj ? deregister$1.call(this, obj) : Promise.reject(new Error(`Failed to deregister; modal does not exist in collection with ID of: "${query.id || query}".`));
-    }
-    open(id, transition2, focus) {
+    async open(id, transition2, focus) {
       return open$1.call(this, id, transition2, focus);
     }
-    close(id, transition2, focus) {
+    async close(id, transition2, focus) {
       return close$1.call(this, id, transition2, focus);
     }
-    replace(id, transition2, focus) {
+    async replace(id, transition2, focus) {
       return replace.call(this, id, transition2, focus);
     }
     async closeAll(exclude = false, transition2, focus = true) {
@@ -1245,17 +1215,28 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
       return result;
     }
+    async afterMount() {
+      document.addEventListener("click", __privateGet(this, _handleClick2), false);
+      document.addEventListener("keydown", __privateGet(this, _handleKeydown2), false);
+    }
+    async beforeUnmount() {
+      this.trigger = null;
+    }
+    async afterUnmount() {
+      document.removeEventListener("click", __privateGet(this, _handleClick2), false);
+      document.removeEventListener("keydown", __privateGet(this, _handleKeydown2), false);
+    }
   }
   _handleClick2 = new WeakMap();
   _handleKeydown2 = new WeakMap();
   const defaults = {
     // Selectors
-    selectorPopover: ".popover",
+    selector: ".popover",
     selectorTooltip: ".popover_tooltip",
     selectorArrow: ".popover__arrow",
     // State classes
     stateActive: "is-active",
-    // Custom property defaults
+    // Custom properties and their defaults
     placement: "bottom",
     event: "click",
     offset: 0,
@@ -1264,7 +1245,6 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     arrowPadding: 0,
     toggleDelay: 0,
     // Feature settings
-    eventListeners: true,
     teleport: null,
     teleportMethod: "append"
   };
@@ -1357,38 +1337,6 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       throw new Error(`Popover not found in collection with id of "${query}".`);
     }
   }
-  function getPopoverID(obj) {
-    if (typeof obj === "string") {
-      return obj;
-    } else if (typeof obj.hasAttribute === "function") {
-      if (obj.closest(this.settings.selectorPopover)) {
-        obj = obj.closest(this.settings.selectorPopover);
-        return obj.id;
-      } else if (obj.hasAttribute("aria-controls")) {
-        return obj.getAttribute("aria-controls");
-      } else if (obj.hasAttribute("aria-describedby")) {
-        return obj.getAttribute("aria-describedby");
-      } else return false;
-    } else return false;
-  }
-  function getPopoverElements(query) {
-    const id = getPopoverID.call(this, query);
-    if (id) {
-      const popover = document.querySelector(`#${id}`);
-      const trigger = document.querySelector(`[aria-controls="${id}"]`) || document.querySelector(`[aria-describedby="${id}"]`);
-      if (!trigger && !popover) {
-        return { error: new Error(`No popover elements found using the ID: "${id}".`) };
-      } else if (!trigger) {
-        return { error: new Error(`No popover trigger associated with the provided popover: "${id}".`) };
-      } else if (!popover) {
-        return { error: new Error(`No popover associated with the provided popover trigger: "${id}".`) };
-      } else {
-        return { popover, trigger };
-      }
-    } else {
-      return { error: new Error("Could not resolve the popover ID.") };
-    }
-  }
   async function close(query) {
     const popover = query ? getPopover.call(this, query) : await closeAll.call(this);
     if (popover && popover.state === "opened") {
@@ -1397,7 +1345,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       if (!popover.isTooltip) {
         popover.trigger.setAttribute("aria-expanded", "false");
       }
-      popover.cleanup();
+      popover.floatingCleanup();
       popover.state = "closed";
       if (popover.trigger === this.trigger) {
         this.trigger = null;
@@ -1434,7 +1382,6 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     } else {
       this.trigger = popover.trigger;
       popover.open();
-      handleDocumentClick.call(this, popover);
     }
   }
   function handleTooltipClick(popover) {
@@ -1508,40 +1455,130 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
     });
   }
-  async function deregister(obj) {
-    const index2 = this.collection.findIndex((entry) => {
-      return entry.id === obj.id;
-    });
-    if (index2 >= 0) {
-      const entry = this.collection[index2];
-      if (entry.state === "opened") {
-        entry.close();
-      }
-      entry.cleanup();
-      deregisterEventListeners(entry);
-      if (entry.getSetting("teleport")) {
-        entry.teleportReturn();
-      }
-      Object.getOwnPropertyNames(entry).forEach((prop) => {
-        delete entry[prop];
+  class PopoverEntry extends CollectionEntry {
+    constructor(context, query, options = {}) {
+      super(context, query, options);
+      __privateAdd(this, _eventListeners);
+      __privateAdd(this, _isHovered);
+      this.state = "closed";
+      this.toggleDelayId = null;
+      this.trigger = null;
+      __privateSet(this, _eventListeners, null);
+      __privateSet(this, _isHovered, {
+        el: false,
+        trigger: false
       });
-      this.collection.splice(index2, 1);
+      this.floatingCleanup = () => {
+      };
     }
-    return this.collection;
-  }
-  function deregisterEventListeners(entry) {
-    if (entry._eventListeners) {
-      entry._eventListeners.forEach((evObj) => {
-        evObj.el.forEach((el) => {
-          evObj.type.forEach((type) => {
-            entry[el].removeEventListener(type, evObj.listener, false);
+    get isTooltip() {
+      return !!this.el.closest(this.getSetting("selectorTooltip")) || this.el.getAttribute("role") == "tooltip";
+    }
+    get isHovered() {
+      return __privateGet(this, _isHovered).el || __privateGet(this, _isHovered).trigger;
+    }
+    set isHovered(event) {
+      const state = event.type == "mouseenter" ? true : event.type == "mouseleave" ? false : void 0;
+      if (state == void 0) return;
+      switch (event.target) {
+        case this.el:
+          __privateGet(this, _isHovered).el = state;
+          break;
+        case this.trigger:
+          __privateGet(this, _isHovered).trigger = state;
+          break;
+      }
+    }
+    async open() {
+      return this.context.open(this);
+    }
+    async close() {
+      return this.context.close(this);
+    }
+    async deregister() {
+      return this.context.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)
+          }]);
+          __privateGet(this, _eventListeners).forEach((evObj) => {
+            evObj.el.forEach((el) => {
+              evObj.type.forEach((type) => {
+                this[el].addEventListener(type, evObj.listener, false);
+              });
+            });
+          });
+        } else {
+          __privateSet(this, _eventListeners, [{
+            el: ["trigger"],
+            type: ["click"],
+            listener: handleClick.bind(this.context, this)
+          }]);
+          __privateGet(this, _eventListeners).forEach((evObj) => {
+            evObj.el.forEach((el) => {
+              evObj.type.forEach((type) => {
+                this[el].addEventListener(type, evObj.listener, false);
+              });
+            });
+          });
+        }
+      }
+    }
+    deregisterEventListeners() {
+      if (__privateGet(this, _eventListeners)) {
+        __privateGet(this, _eventListeners).forEach((evObj) => {
+          evObj.el.forEach((el) => {
+            evObj.type.forEach((type) => {
+              this[el].removeEventListener(type, evObj.listener, false);
+            });
           });
         });
-      });
-      delete entry._eventListeners;
+        __privateSet(this, _eventListeners, null);
+      }
+    }
+    async beforeMount() {
+      this.trigger = document.querySelector(
+        `[aria-controls="${this.id}"], [aria-describedby="${this.id}"]`
+      );
+      if (this.isTooltip) {
+        this.settings.event = "hover";
+        this.el.setAttribute("role", "tooltip");
+      } else {
+        this.trigger.setAttribute("aria-expanded", "false");
+      }
+      this.registerEventListeners();
+    }
+    async afterRegister() {
+      if (this.el.classList.contains(this.getSetting("stateActive"))) {
+        await this.open();
+      } else {
+        this.el.inert = true;
+      }
+    }
+    async beforeUnmount() {
+      if (this.state === "opened") {
+        await this.close();
+      }
+      this.floatingCleanup();
+      this.deregisterEventListeners();
     }
-    return entry;
   }
+  _eventListeners = new WeakMap();
+  _isHovered = new WeakMap();
   const min = Math.min;
   const max = Math.max;
   const round = Math.round;
@@ -2964,7 +3001,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     const middlewareOptions = getMiddlewareOptions(popover);
     const arrowEl = popover.el.querySelector(middlewareOptions.arrow.element);
     middlewareOptions.arrow.element = arrowEl ? arrowEl : void 0;
-    popover.cleanup = autoUpdate(popover.trigger, popover.el, () => {
+    popover.floatingCleanup = autoUpdate(popover.trigger, popover.el, () => {
       computePosition(popover.trigger, popover.el, {
         placement: popover.getSetting("placement"),
         middleware: [
@@ -2986,189 +3023,43 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       });
     });
     popover.state = "opened";
-    return popover;
-  }
-  async function register(el, trigger, config = {}) {
-    await deregister.call(this, el);
-    const root = this;
-    const _isHovered = {
-      el: false,
-      trigger: false
-    };
-    const _customPropKeys = [
-      "placement",
-      "event",
-      "offset",
-      "flip-padding",
-      "shift-padding",
-      "arrow-padding",
-      "toggle-delay"
-    ];
-    const entry = this.createEntry(el, { customPropKeys: _customPropKeys });
-    Object.assign(entry, {
-      state: "closed",
-      trigger,
-      toggleDelayId: null,
-      cleanup: () => {
-      },
-      open() {
-        return open.call(root, this);
-      },
-      close() {
-        return close.call(root, this);
-      },
-      deregister() {
-        return deregister.call(root, this);
-      }
-    });
-    Object.defineProperties(entry, Object.getOwnPropertyDescriptors({
-      set isHovered(event) {
-        const state = event.type == "mouseenter" ? true : event.type == "mouseleave" ? false : void 0;
-        if (state == void 0) return;
-        switch (event.target) {
-          case this.el:
-            _isHovered.el = state;
-            break;
-          case this.trigger:
-            _isHovered.trigger = state;
-            break;
-        }
-      },
-      get isHovered() {
-        return _isHovered.el || _isHovered.trigger;
-      },
-      get isTooltip() {
-        return !!el.closest(root.settings.selectorTooltip) || el.getAttribute("role") == "tooltip";
-      }
-    }));
-    if (entry.isTooltip) {
-      entry.settings.event = "hover";
-    }
-    entry.applySettings(config);
-    entry.getDataConfig();
-    entry.getCustomProps();
-    if (entry.isTooltip) {
-      entry.el.setAttribute("role", "tooltip");
-    }
-    if (!entry.isTooltip) {
-      entry.trigger.setAttribute("aria-expanded", "false");
-    }
-    registerEventListeners.call(this, entry);
-    if (entry.getSetting("teleport")) {
-      entry.teleport();
-    }
-    this.collection.push(entry);
-    if (entry.el.classList.contains(this.settings.stateActive)) {
-      await entry.open();
-      handleDocumentClick.call(this, entry);
-    } else {
-      entry.el.inert = true;
-    }
-    return entry;
-  }
-  function registerEventListeners(entry) {
-    if (!entry._eventListeners) {
-      const eventType = entry.getSetting("event");
-      if (eventType === "hover") {
-        entry._eventListeners = [{
-          el: ["el", "trigger"],
-          type: ["mouseenter", "focus"],
-          listener: handleMouseEnter.bind(this, entry)
-        }, {
-          el: ["el", "trigger"],
-          type: ["mouseleave", "focusout"],
-          listener: handleMouseLeave.bind(this, entry)
-        }, {
-          el: ["trigger"],
-          type: ["click"],
-          listener: handleTooltipClick.bind(this, entry)
-        }];
-        entry._eventListeners.forEach((evObj) => {
-          evObj.el.forEach((el) => {
-            evObj.type.forEach((type) => {
-              entry[el].addEventListener(type, evObj.listener, false);
-            });
-          });
-        });
-      } else {
-        entry._eventListeners = [{
-          el: ["trigger"],
-          type: ["click"],
-          listener: handleClick.bind(this, entry)
-        }];
-        entry._eventListeners.forEach((evObj) => {
-          evObj.el.forEach((el) => {
-            evObj.type.forEach((type) => {
-              entry[el].addEventListener(type, evObj.listener, false);
-            });
-          });
-        });
-      }
+    if (popover.getSetting("event") === "click") {
+      handleDocumentClick.call(this, popover);
     }
-    return entry;
+    return popover;
   }
   class Popover extends Collection {
-    constructor(options) {
+    constructor(options = {}) {
       super({ ...defaults, ...options });
       __privateAdd(this, _handleKeydown3);
       this.trigger = null;
       __privateSet(this, _handleKeydown3, handleKeydown.bind(this));
     }
     get active() {
-      return this.collection.find((popover) => popover.state == "opened");
+      return this.get("opened", "state");
     }
     get activeHover() {
       return this.collection.find((popover) => {
         return popover.state == "opened" && popover.getSetting("event") == "hover";
       });
     }
-    async mount(options) {
-      if (options) this.settings = { ...this.settings, ...options };
-      const popovers = document.querySelectorAll(this.settings.selectorPopover);
-      await this.registerCollection(popovers);
-      if (this.settings.eventListeners) {
-        this.mountEventListeners(false);
-      }
-      return this;
-    }
-    async unmount() {
-      this.trigger = null;
-      await this.deregisterCollection();
-      if (this.settings.eventListeners) {
-        this.unmountEventListeners(false);
-      }
-      return this;
-    }
-    mountEventListeners(processCollection = true) {
-      if (processCollection) {
-        this.collection.forEach((popover) => {
-          registerEventListeners.call(this, popover);
-        });
-      }
-      document.addEventListener("keydown", __privateGet(this, _handleKeydown3), false);
+    async createEntry(query, config) {
+      return new PopoverEntry(this, query, config);
     }
-    unmountEventListeners(processCollection = true) {
-      if (processCollection) {
-        this.collection.forEach((popover) => {
-          deregisterEventListeners(popover);
-        });
-      }
-      document.removeEventListener("keydown", __privateGet(this, _handleKeydown3), false);
+    async open(id) {
+      return open.call(this, id);
     }
-    register(query, config = {}) {
-      const els = getPopoverElements.call(this, query);
-      if (els.error) return Promise.reject(els.error);
-      return register.call(this, els.popover, els.trigger, config);
+    async close(id) {
+      return close.call(this, id);
     }
-    deregister(query) {
-      let obj = this.get(query.id || query);
-      return obj ? deregister.call(this, obj) : Promise.reject(new Error(`Failed to deregister; popover does not exist in collection with ID of: "${query.id || query}".`));
+    async afterMount() {
+      document.addEventListener("keydown", __privateGet(this, _handleKeydown3), false);
     }
-    open(id) {
-      return open.call(this, id);
+    async beforeUnmount() {
+      this.trigger = null;
     }
-    close(id) {
-      return close.call(this, id);
+    async afterUnmount() {
+      document.removeEventListener("keydown", __privateGet(this, _handleKeydown3), false);
     }
   }
   _handleKeydown3 = new WeakMap();