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

package/dev/index.js

@@ -5,7 +5,126 @@ 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, _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 module = entry.context.module.toLowerCase();
+    const key = toKebab(keys[i]);
+    const value = styles.getPropertyValue(`--${prefix}${module}-${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);
@@ -44,107 +163,146 @@ class Breakpoint {
 _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);
@@ -247,58 +405,6 @@ function handleFocusLock(event) {
   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, module, array) {
-  const styles = getComputedStyle(el);
-  const result = {};
-  for (let i = 0; i < array.length; i++) {
-    const prefix = getPrefix();
-    const value = styles.getPropertyValue(`--${prefix}${module.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) : {};
@@ -402,75 +508,26 @@ function themeStore(options) {
   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
@@ -479,7 +536,7 @@ const defaults$2 = {
   dataToggle: "drawer-toggle",
   dataBreakpoint: "drawer-breakpoint",
   // Selectors
-  selectorDrawer: ".drawer",
+  selector: ".drawer",
   selectorDialog: ".drawer__dialog",
   selectorScreen: ".drawer",
   selectorFocus: "[data-focus]",
@@ -495,7 +552,6 @@ const defaults$2 = {
   // Feature toggles
   breakpoints: null,
   customEventPrefix: "drawer:",
-  eventListeners: true,
   store: true,
   storeKey: "VB:DrawerState",
   setTabindex: true,
@@ -553,28 +609,154 @@ function getBreakpoint(drawer) {
   }
 }
 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}],
@@ -607,8 +789,8 @@ async function handleClick$2(event) {
           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);
         }
       });
     }
@@ -620,45 +802,27 @@ async function handleClick$2(event) {
 }
 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);
     }
@@ -675,19 +839,19 @@ async function close$2(query, transitionOverride, focus = true) {
     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);
     }
@@ -706,186 +870,44 @@ async function toggle(query, transition2, focus) {
     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();
@@ -895,7 +917,7 @@ const defaults$1 = {
   dataClose: "modal-close",
   dataReplace: "modal-replace",
   // Selectors
-  selectorModal: ".modal",
+  selector: ".modal",
   selectorDialog: ".modal__dialog",
   selectorScreen: ".modal",
   selectorRequired: '[role="alertdialog"]',
@@ -909,13 +931,61 @@ const defaults$1 = {
   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) {
@@ -946,14 +1016,14 @@ async function handleClick$1(event) {
     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();
     }
@@ -973,27 +1043,6 @@ function handleKeydown$1(event) {
     }
   }
 }
-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);
@@ -1001,13 +1050,13 @@ async function open$1(query, transitionOverride = void 0, focus = true) {
     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"));
@@ -1029,13 +1078,13 @@ async function close$1(query, transitionOverride, focus = true) {
     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"));
@@ -1080,55 +1129,6 @@ async function replace(query, transition2, focus = true) {
   }
   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 {
@@ -1146,8 +1146,8 @@ function stack(settings) {
         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) {
@@ -1155,7 +1155,7 @@ function stack(settings) {
       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) => {
@@ -1164,7 +1164,7 @@ function stack(settings) {
       if (index2 >= 0) {
         entry.el.style.zIndex = null;
         stackArray.splice(index2, 1);
-        this.updateGlobalState();
+        this.setGlobalState();
       }
     },
     moveToTop(entry) {
@@ -1185,53 +1185,23 @@ class Modal extends Collection {
     __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) {
@@ -1241,17 +1211,28 @@ class Modal extends Collection {
     }
     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,
@@ -1260,7 +1241,6 @@ const defaults = {
   arrowPadding: 0,
   toggleDelay: 0,
   // Feature settings
-  eventListeners: true,
   teleport: null,
   teleportMethod: "append"
 };
@@ -1353,38 +1333,6 @@ function getPopover(query) {
     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") {
@@ -1393,7 +1341,7 @@ async function close(query) {
     if (!popover.isTooltip) {
       popover.trigger.setAttribute("aria-expanded", "false");
     }
-    popover.cleanup();
+    popover.floatingCleanup();
     popover.state = "closed";
     if (popover.trigger === this.trigger) {
       this.trigger = null;
@@ -1430,7 +1378,6 @@ function handleClick(popover) {
   } else {
     this.trigger = popover.trigger;
     popover.open();
-    handleDocumentClick.call(this, popover);
   }
 }
 function handleTooltipClick(popover) {
@@ -1504,40 +1451,130 @@ function handleDocumentClick(popover) {
     }
   });
 }
-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;
@@ -2960,7 +2997,7 @@ async function open(query) {
   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: [
@@ -2982,189 +3019,43 @@ async function open(query) {
     });
   });
   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();