vrembem 1.42.1 → 3.0.1

package/dev/scripts.modern.js

@@ -1,288 +1,366 @@
-const 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 _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
       }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+var id = 0;
+
+function _classPrivateFieldLooseKey(name) {
+  return "__private_" + id++ + "_" + name;
+}
+
+function _classPrivateFieldLooseBase(receiver, privateKey) {
+  if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
+    throw new TypeError("attempted to use private field on non-instance");
+  }
+
+  return receiver;
+}
+
+var _handler = /*#__PURE__*/_classPrivateFieldLooseKey("handler");
+
+class Breakpoint {
+  constructor(value, handler) {
+    Object.defineProperty(this, _handler, {
+      writable: true,
+      value: void 0
     });
+    this.value = value;
+    _classPrivateFieldLooseBase(this, _handler)[_handler] = handler;
+    this.mql = null;
   }
-};
-const setOverflowHidden = (state, selector) => {
-  if (selector) {
-    const els = document.querySelectorAll(selector);
-    els.forEach(el => {
-      if (state) {
-        el.style.overflow = 'hidden';
+
+  get handler() {
+    return _classPrivateFieldLooseBase(this, _handler)[_handler];
+  } // Unmount existing handler before setting a new one.
+
+
+  set handler(func) {
+    if (this.mql) {
+      // Conditionally use removeListener() for IE11 support.
+      if (typeof this.mql.removeEventListener === 'function') {
+        this.mql.removeEventListener('change', _classPrivateFieldLooseBase(this, _handler)[_handler]);
       } else {
-        el.style.removeProperty('overflow');
+        this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
       }
-    });
-  }
-};
-const setTabindex = selector => {
-  if (selector) {
-    const els = document.querySelectorAll(selector);
-    els.forEach(el => {
-      el.setAttribute('tabindex', '-1');
-    });
+    }
+
+    _classPrivateFieldLooseBase(this, _handler)[_handler] = func;
   }
-};
 
-/**
- * Adds a class or classes to a Node or NodeList.
- * @param {Node || NodeList} el - Element(s) to add class(es) to.
- * @param  {String || Array} cl - Class(es) to add.
- */
-const addClass = (el, ...cl) => {
-  el = el.forEach ? el : [el];
-  el.forEach(el => {
-    el.classList.add(...cl);
-  });
-};
+  mount(value, handler) {
+    // Update passed params.
+    if (value) this.value = value;
+    if (handler) _classPrivateFieldLooseBase(this, _handler)[_handler] = handler; // Guard if no breakpoint was set.
 
-/**
- * Takes a hyphen cased string and converts it to camel case.
- * @param {String } str - the string to convert to camel case.
- * @returns {Boolean} - returns a camel cased string.
- */
-const camelCase = str => {
-  return str.replace(/-([a-z])/g, function (g) {
-    return g[1].toUpperCase();
-  });
-};
+    if (!this.value) return this; // Setup and store the MediaQueryList instance.
 
-var focusableSelectors = ['a[href]:not([tabindex^="-"])', 'area[href]:not([tabindex^="-"])', 'input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])', 'input[type="radio"]:not([disabled]):not([tabindex^="-"])', 'select:not([disabled]):not([tabindex^="-"])', 'textarea:not([disabled]):not([tabindex^="-"])', 'button:not([disabled]):not([tabindex^="-"])', 'iframe:not([tabindex^="-"])', 'audio[controls]:not([tabindex^="-"])', 'video[controls]:not([tabindex^="-"])', '[contenteditable]:not([tabindex^="-"])', '[tabindex]:not([tabindex^="-"])'];
+    this.mql = window.matchMedia(`(min-width: ${this.value})`); // Conditionally use addListener() for IE11 support.
 
-const focusTarget = (target, settings) => {
-  const innerFocus = target.querySelector(`[data-${settings.dataFocus}]`);
+    if (typeof this.mql.addEventListener === 'function') {
+      this.mql.addEventListener('change', _classPrivateFieldLooseBase(this, _handler)[_handler]);
+    } else {
+      this.mql.addListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
+    } // Run the handler.
 
-  if (innerFocus) {
-    innerFocus.focus();
-  } else {
-    const innerElement = target.querySelector('[tabindex="-1"]');
-    if (innerElement) innerElement.focus();
+
+    _classPrivateFieldLooseBase(this, _handler)[_handler](this.mql);
+
+    return this;
   }
-};
-const focusTrigger = (obj = null) => {
-  if (!obj || !obj.memory || !obj.memory.trigger) return;
-  obj.memory.trigger.focus();
-  obj.memory.trigger = null;
-};
-class FocusTrap {
+
+  unmount() {
+    // Guard if no MediaQueryList instance exists.
+    if (!this.mql) return this; // Conditionally use removeListener() for IE11 support.
+
+    if (typeof this.mql.removeEventListener === 'function') {
+      this.mql.removeEventListener('change', _classPrivateFieldLooseBase(this, _handler)[_handler]);
+    } else {
+      this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
+    } // Set value, handler and MediaQueryList to null.
+
+
+    this.value = null;
+    _classPrivateFieldLooseBase(this, _handler)[_handler] = null;
+    this.mql = null;
+    return this;
+  }
+
+}
+
+class Collection {
   constructor() {
-    this.target = null;
-    this.__handlerFocusTrap = this.handlerFocusTrap.bind(this);
+    this.collection = [];
   }
 
-  init(target) {
-    this.target = target;
-    this.inner = this.target.querySelector('[tabindex="-1"]');
-    this.focusable = this.getFocusable();
+  async register(item) {
+    await this.deregister(item);
+    this.collection.push(item);
+    return this.collection;
+  }
 
-    if (this.focusable.length) {
-      this.focusableFirst = this.focusable[0];
-      this.focusableLast = this.focusable[this.focusable.length - 1];
-      this.target.addEventListener('keydown', this.__handlerFocusTrap);
-    } else {
-      this.target.addEventListener('keydown', this.handlerFocusLock);
+  async deregister(ref) {
+    const index = this.collection.findIndex(entry => {
+      return entry === ref;
+    });
+
+    if (index >= 0) {
+      const entry = this.collection[index];
+      Object.getOwnPropertyNames(entry).forEach(prop => {
+        delete entry[prop];
+      });
+      this.collection.splice(index, 1);
     }
+
+    return this.collection;
   }
 
-  destroy() {
-    if (!this.target) return;
-    this.inner = null;
-    this.focusable = null;
-    this.focusableFirst = null;
-    this.focusableLast = null;
-    this.target.removeEventListener('keydown', this.__handlerFocusTrap);
-    this.target.removeEventListener('keydown', this.handlerFocusLock);
-    this.target = null;
-  }
-
-  refresh() {
-    // Check if a target has been set
-    if (!this.target) return; // Remove existing  events
-
-    this.target.removeEventListener('keydown', this.__handlerFocusTrap);
-    this.target.removeEventListener('keydown', this.handlerFocusLock); // Get the focusable elements
-
-    this.focusable = this.getFocusable(); // Setup the focus handlers based on focusable length
-
-    if (this.focusable.length) {
-      // If there are focusable elements, setup focus trap
-      this.focusableFirst = this.focusable[0];
-      this.focusableLast = this.focusable[this.focusable.length - 1];
-      this.target.addEventListener('keydown', this.__handlerFocusTrap);
-    } else {
-      // If there are no focusable elements, setup focus lock
-      this.focusableFirst = null;
-      this.focusableLast = null;
-      this.target.addEventListener('keydown', this.handlerFocusLock);
+  async registerCollection(items) {
+    await Promise.all(Array.from(items, item => {
+      this.register(item);
+    }));
+    return this.collection;
+  }
+
+  async deregisterCollection() {
+    while (this.collection.length > 0) {
+      await this.deregister(this.collection[0]);
     }
+
+    return this.collection;
   }
 
-  handlerFocusTrap(event) {
-    const isTab = event.key === 'Tab' || event.keyCode === 9;
-    if (!isTab) return;
+  get(value, key = 'id') {
+    return this.collection.find(item => {
+      return item[key] === value;
+    });
+  }
 
-    if (event.shiftKey) {
-      if (document.activeElement === this.focusableFirst || document.activeElement === this.inner) {
-        this.focusableLast.focus();
-        event.preventDefault();
-      }
+}
+
+var focusableSelectors = ['a[href]:not([tabindex^="-"])', 'area[href]:not([tabindex^="-"])', 'input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])', 'input[type="radio"]:not([disabled]):not([tabindex^="-"])', 'select:not([disabled]):not([tabindex^="-"])', 'textarea:not([disabled]):not([tabindex^="-"])', 'button:not([disabled]):not([tabindex^="-"])', 'iframe:not([tabindex^="-"])', 'audio[controls]:not([tabindex^="-"])', 'video[controls]:not([tabindex^="-"])', '[contenteditable]:not([tabindex^="-"])', '[tabindex]:not([tabindex^="-"])'];
+
+var _focusable = /*#__PURE__*/_classPrivateFieldLooseKey("focusable");
+
+var _handleFocusTrap = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusTrap");
+
+var _handleFocusLock = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusLock");
+
+class FocusTrap {
+  constructor(el = null, selectorFocus = '[data-focus]') {
+    Object.defineProperty(this, _focusable, {
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(this, _handleFocusTrap, {
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(this, _handleFocusLock, {
+      writable: true,
+      value: void 0
+    });
+    this.el = el;
+    this.selectorFocus = selectorFocus;
+    _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap] = handleFocusTrap.bind(this);
+    _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock] = handleFocusLock.bind(this);
+  }
+
+  get focusable() {
+    return _classPrivateFieldLooseBase(this, _focusable)[_focusable];
+  }
+
+  set focusable(value) {
+    // Update the focusable value.
+    _classPrivateFieldLooseBase(this, _focusable)[_focusable] = value; // Apply event listeners based on new focusable array length.
+
+    if (_classPrivateFieldLooseBase(this, _focusable)[_focusable].length) {
+      document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
+      document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
     } else {
-      if (document.activeElement === this.focusableLast || document.activeElement === this.inner) {
-        this.focusableFirst.focus();
-        event.preventDefault();
-      }
+      document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
+      document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
     }
   }
 
-  handlerFocusLock(event) {
-    const isTab = event.key === 'Tab' || event.keyCode === 9;
-    if (isTab) event.preventDefault();
+  get focusableFirst() {
+    return this.focusable[0];
   }
 
-  getFocusable() {
-    const focusable = [];
+  get focusableLast() {
+    return this.focusable[this.focusable.length - 1];
+  }
+
+  mount(el, selectorFocus) {
+    // Update passed params.
+    if (el) this.el = el;
+    if (selectorFocus) this.selectorFocus = selectorFocus; // Get the focusable elements.
+
+    this.focusable = this.getFocusable(); // Set the focus on the element.
+
+    this.focus();
+  }
+
+  unmount() {
+    // Set element to null.
+    this.el = null; // Apply empty array to focusable.
+
+    this.focusable = []; // Remove event listeners
+
+    document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
+    document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
+  }
+
+  focus(el = this.el, selectorFocus = this.selectorFocus) {
+    // Query for the focus selector, otherwise return this element.
+    const result = el.querySelector(selectorFocus) || el; // Give the returned element focus.
+
+    result.focus();
+  }
+
+  getFocusable(el = this.el) {
+    // Initialize the focusable array.
+    const focusable = []; // Store the initial focus and scroll position.
+
     const initFocus = document.activeElement;
-    const initScrollTop = this.inner ? this.inner.scrollTop : 0;
-    this.target.querySelectorAll(focusableSelectors.join(',')).forEach(el => {
-      el.focus();
+    const initScrollTop = el.scrollTop; // Query for all the focusable elements.
+
+    const els = el.querySelectorAll(focusableSelectors.join(',')); // Loop through all focusable elements.
+
+    els.forEach(el => {
+      // Set them to focus and check 
+      el.focus(); // Test that the element took focus.
 
-      if (el === document.activeElement) {
+      if (document.activeElement === el) {
+        // Add element to the focusable array.
         focusable.push(el);
       }
-    });
-    if (this.inner) this.inner.scrollTop = initScrollTop;
-    initFocus.focus();
+    }); // Restore the initial scroll position and focus.
+
+    el.scrollTop = initScrollTop;
+    initFocus.focus(); // Return the focusable array.
+
     return focusable;
   }
 
 }
 
-/**
- * Get an element(s) from a selector or return value if not a string.
- * @param {String} selector - Selector to query.
- * @param {Boolean} single - Whether to return a single or all matches.
- */
-const getElement = function getElement(selector, single = 0) {
-  if (typeof selector !== 'string') return selector;
-  return single ? document.querySelector(selector) : document.querySelectorAll(selector);
-};
+function handleFocusTrap(event) {
+  // Check if the click was a tab and return if not.
+  const isTab = event.key === 'Tab' || event.keyCode === 9;
+  if (!isTab) return; // If the shift key is pressed.
 
-/**
- * Checks an element or NodeList whether they contain a class or classes.
- * Ref: https://davidwalsh.name/nodelist-array
- * @param {Node} el - Element(s) to check class(es) on.
- * @param {String || Array} c - Class(es) to check.
- * @returns {Boolean} - Returns true if class exists, otherwise false.
- */
-const hasClass = (el, ...cl) => {
-  el = el.forEach ? el : [el];
-  el = [].slice.call(el);
-  return cl.some(cl => {
-    return el.some(el => {
-      if (el.classList.contains(cl)) return true;
-    });
-  });
-};
+  if (event.shiftKey) {
+    // If the active element is either the root el or first focusable.
+    if (document.activeElement === this.focusableFirst || document.activeElement === this.el) {
+      // Prevent default and focus the last focusable element instead.
+      event.preventDefault();
+      this.focusableLast.focus();
+    }
+  } else {
+    // If the active element is either the root el or last focusable.
+    if (document.activeElement === this.focusableLast || document.activeElement === this.el) {
+      // Prevent default and focus the first focusable element instead.
+      event.preventDefault();
+      this.focusableFirst.focus();
+    }
+  }
+}
 
-/**
- * Takes a camel cased string and converts it to hyphen case.
- * @param {String } str - the string to convert to hyphen case.
- * @returns {Boolean} - returns a hyphen cased string.
- */
-const hyphenCase = str => {
-  return str.replace(/([a-z][A-Z])/g, function (g) {
-    return g[0] + '-' + g[1].toLowerCase();
-  });
-};
+function handleFocusLock(event) {
+  // Ignore the tab key by preventing default.
+  const isTab = event.key === 'Tab' || event.keyCode === 9;
+  if (isTab) event.preventDefault();
+}
 
-/**
- * Moves element(s) in the DOM based on a reference and move type.
- * @param {String} target - The element(s) to move.
- * @param {String} type - Move type can be 'after', 'before', 'append' or 'prepend'.
- * @param {String} reference - The reference element the move is relative to.
- */
+function getConfig$1(el, dataConfig) {
+  const string = el.getAttribute(`data-${dataConfig}`) || '';
+  const json = string.replace(/'/g, '"');
+  return json ? JSON.parse(json) : {};
+}
 
-function moveElement(target, type, reference = false) {
-  if (reference) {
-    const els = getElement(target);
-    if (!els.length) throw new Error(`Move target element "${target}" not found!`);
-    const ref = getElement(reference, 1);
-    if (!ref) throw new Error(`Move reference element "${reference}" not found!`);
-    els.forEach(el => {
-      switch (type) {
-        case 'after':
-          ref.after(el);
-          return {
-            ref,
-            el,
-            type
-          };
-
-        case 'before':
-          ref.before(el);
-          return {
-            ref,
-            el,
-            type
-          };
-
-        case 'append':
-          ref.append(el);
-          return {
-            ref,
-            el,
-            type
-          };
-
-        case 'prepend':
-          ref.prepend(el);
-          return {
-            ref,
-            el,
-            type
-          };
-
-        default:
-          throw new Error(`Move type "${type}" does not exist!`);
-      }
-    });
-  }
+function getPrefix() {
+  return getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix').trim();
 }
 
-/**
- * Remove a class or classes from an element or NodeList.
- * @param {Node || NodeList} el - Element(s) to remove class(es) from.
- * @param {String || Array} cl - Class(es) to remove.
- */
-const removeClass = (el, ...cl) => {
-  el = el.forEach ? el : [el];
-  el.forEach(el => {
-    el.classList.remove(...cl);
+function localStore(key, enable = true) {
+  function getStore() {
+    const value = localStorage.getItem(key);
+    return value ? JSON.parse(value) : {};
+  }
+
+  function setStore(obj) {
+    localStorage.setItem(key, JSON.stringify(obj));
+  }
+
+  return new Proxy(getStore(), {
+    set: (target, property, value) => {
+      target[property] = value;
+      if (enable) setStore(target);
+      return true;
+    },
+    deleteProperty: (target, property) => {
+      delete target[property];
+      if (enable) setStore(target);
+      return true;
+    }
   });
-};
+}
 
 /**
- * Toggle a class or classes on an element or NodeList.
- * @param {Node || NodeList} el - Element(s) to toggle class(es) on.
- * @param {String || Array} cl - Class(es) to toggle.
+ * Teleports an element in the DOM based on a reference and teleport method.
+ * Provide the comment node as the reference to teleport the element back to its
+ * previous location.
+ * @param {Node} what - What element to teleport.
+ * @param {String || Node} where - Where to teleport the element.
+ * @param {String} how - How (method) to teleport the element, e.g: 'after',
+ *   'before', 'append' or 'prepend'.
+ * @return {Node} Return the return reference if it was teleported else return
+ *   null if it was returned to a comment reference.
  */
-const toggleClass = (el, ...cl) => {
-  el = el.forEach ? el : [el];
-  el.forEach(el => {
-    cl.forEach(cl => {
-      el.classList.toggle(cl);
-    });
-  });
-};
+function teleport(what, where, how) {
+  // Check if ref is either a comment or element node.
+  const isComment = where.nodeType === Node.COMMENT_NODE;
+  const isElement = where.nodeType === Node.ELEMENT_NODE; // Get the reference element.
+
+  where = isComment || isElement ? where : document.querySelector(where); // If ref is a comment, set teleport type to 'after'.
+
+  if (isComment) how = 'after'; // Must be a valid reference element and method.
+
+  if (!where) throw new Error(`Not a valid teleport reference: '${where}'`);
+  if (typeof where[how] != 'function') throw new Error(`Not a valid teleport method: '${how}'`); // Initial return ref is null.
+
+  let returnRef = null; // If ref is not a comment, set a return reference comment.
+
+  if (!isComment) {
+    returnRef = document.createComment('teleported #' + what.id);
+    what.before(returnRef);
+  } // Teleport the target node.
+
+
+  where[how](what); // Delete the comment node if element was returned to a comment reference.
+
+  if (isComment) {
+    where.remove();
+  } // Return the return reference if it was teleported else return null if it was
+  // returned to a comment reference.
+
+
+  return returnRef;
+}
 
 const openTransition = (el, settings) => {
   return new Promise(resolve => {
@@ -321,44 +399,55 @@ const closeTransition = (el, settings) => {
   });
 };
 
-var index = {
-  __proto__: null,
-  setInert: setInert,
-  setOverflowHidden: setOverflowHidden,
-  setTabindex: setTabindex,
-  addClass: addClass,
-  camelCase: camelCase,
-  focusTarget: focusTarget,
-  focusTrigger: focusTrigger,
-  FocusTrap: FocusTrap,
-  getElement: getElement,
-  hasClass: hasClass,
-  hyphenCase: hyphenCase,
-  moveElement: moveElement,
-  removeClass: removeClass,
-  toggleClass: toggleClass,
-  openTransition: openTransition,
-  closeTransition: closeTransition
-};
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+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');
+      }
+    });
+  }
+}
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
+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');
       }
-    }
+    });
+  }
+}
 
-    return target;
-  };
+function updateGlobalState(param, config) {
+  // Set inert state based on if a modal is active.
+  setInert(!!param, config.selectorInert); // Set overflow state based on if a modal is active.
 
-  return _extends.apply(this, arguments);
+  setOverflowHidden(!!param, config.selectorOverflow);
 }
 
+var index = {
+  __proto__: null,
+  Breakpoint: Breakpoint,
+  Collection: Collection,
+  FocusTrap: FocusTrap,
+  getConfig: getConfig$1,
+  getPrefix: getPrefix,
+  localStore: localStore,
+  teleport: teleport,
+  openTransition: openTransition,
+  closeTransition: closeTransition,
+  updateGlobalState: updateGlobalState
+};
+
 var defaults$3 = {
   autoInit: false,
   stateAttr: 'aria-checked',
@@ -423,13 +512,17 @@ class Checkbox {
 var defaults$2 = {
   autoInit: false,
   // Data attributes
-  dataDrawer: 'drawer',
-  dataDialog: 'drawer-dialog',
-  dataToggle: 'drawer-toggle',
   dataOpen: 'drawer-open',
   dataClose: 'drawer-close',
+  dataToggle: 'drawer-toggle',
   dataBreakpoint: 'drawer-breakpoint',
-  dataFocus: 'drawer-focus',
+  dataConfig: 'drawer-config',
+  // Selectors
+  selectorDrawer: '.drawer',
+  selectorDialog: '.drawer__dialog',
+  selectorFocus: '[data-focus]',
+  selectorInert: null,
+  selectorOverflow: 'body',
   // State classes
   stateOpened: 'is-opened',
   stateOpening: 'is-opening',
@@ -437,447 +530,594 @@ var defaults$2 = {
   stateClosed: 'is-closed',
   // Classes
   classModal: 'drawer_modal',
-  // Selectors
-  selectorInert: null,
-  selectorOverflow: null,
   // Feature toggles
   breakpoints: null,
   customEventPrefix: 'drawer:',
   eventListeners: true,
-  stateSave: true,
-  stateKey: 'DrawerState',
+  store: true,
+  storeKey: 'VB:DrawerState',
   setTabindex: true,
   transition: true
 };
 
-class Breakpoint {
-  constructor(parent) {
-    this.mediaQueryLists = [];
-    this.parent = parent;
-    this.prefix = this.getVariablePrefix();
-    this.__check = this.check.bind(this);
-  }
-
-  init() {
-    const drawers = document.querySelectorAll(`[data-${this.parent.settings.dataBreakpoint}]`);
-    drawers.forEach(drawer => {
-      // Setup mediaQueryList object
-      const id = drawer.getAttribute(`data-${this.parent.settings.dataDrawer}`);
-      const key = drawer.getAttribute(`data-${this.parent.settings.dataBreakpoint}`);
-      const bp = this.getBreakpoint(key);
-      const mql = window.matchMedia('(min-width:' + bp + ')'); // Run match check
-
-      this.match(mql, drawer); // Conditionally use addListner() for IE11 support
-
-      if (typeof mql.addEventListener === 'function') {
-        mql.addEventListener('change', this.__check);
-      } else {
-        mql.addListener(this.__check);
-      } // Push to mediaQueryLists array along with drawer ID
+function handleClick$2(event) {
+  // If an open, close or toggle button was clicked, handle the click event.
+  const trigger = event.target.closest(`
+    [data-${this.settings.dataOpen}],
+    [data-${this.settings.dataToggle}],
+    [data-${this.settings.dataClose}]
+  `);
+
+  if (trigger) {
+    // Prevent the default behavior of the trigger.
+    event.preventDefault(); // If it's a toggle trigger...
+
+    if (trigger.matches(`[data-${this.settings.dataToggle}]`)) {
+      const selectors = trigger.getAttribute(`data-${this.settings.dataToggle}`).trim().split(' ');
+      selectors.forEach(selector => {
+        // Get the entry from collection using the attribute value.
+        const entry = this.get(selector); // Store the trigger on the entry.
 
+        entry.trigger = trigger; // Toggle the drawer
 
-      this.mediaQueryLists.push({
-        'mql': mql,
-        'drawer': id
+        entry.toggle();
       });
-    });
-  }
+    } // If it's a open trigger...
 
-  destroy() {
-    if (this.mediaQueryLists && this.mediaQueryLists.length) {
-      this.mediaQueryLists.forEach(item => {
-        item.mql.removeListener(this.__check);
+
+    if (trigger.matches(`[data-${this.settings.dataOpen}]`)) {
+      const selectors = trigger.getAttribute(`data-${this.settings.dataOpen}`).trim().split(' ');
+      selectors.forEach(selector => {
+        // Get the entry from collection using the attribute value.
+        const entry = this.get(selector); // Store the trigger on the entry.
+
+        entry.trigger = trigger; // Open the drawer.
+
+        entry.open();
       });
-    }
+    } // If it's a close trigger...
 
-    this.mediaQueryLists = null;
-  }
 
-  check(event = null) {
-    if (this.mediaQueryLists && this.mediaQueryLists.length) {
-      this.mediaQueryLists.forEach(item => {
-        // If an event is passed, filter out drawers that don't match the query
-        // If event is null, run all drawers through match
-        let filter = event ? event.media == item.mql.media : true;
-        if (!filter) return;
-        const drawer = document.querySelector(`[data-${this.parent.settings.dataDrawer}="${item.drawer}"]`);
-        if (drawer) this.match(item.mql, drawer);
+    if (trigger.matches(`[data-${this.settings.dataClose}]`)) {
+      const selectors = trigger.getAttribute(`data-${this.settings.dataClose}`).trim().split(' ');
+      selectors.forEach(selector => {
+        if (selector) {
+          // Get the entry from collection using the attribute value.
+          const entry = this.get(selector); // Store the trigger on the entry.
+
+          entry.trigger = trigger; // Close the drawer.
+
+          entry.close();
+        } else {
+          // If no value is set on close trigger, get the parent drawer.
+          const parent = event.target.closest(this.settings.selectorDrawer); // If a parent drawer was found, close it.
+
+          if (parent) this.close(parent);
+        }
       });
-      document.dispatchEvent(new CustomEvent(this.parent.settings.customEventPrefix + 'breakpoint', {
-        bubbles: true
-      }));
     }
-  }
 
-  match(mql, drawer) {
-    if (mql.matches) {
-      this.parent.switchToDefault(drawer);
-    } else {
-      this.parent.switchToModal(drawer);
-    }
+    return;
+  } // If the modal drawer screen was clicked...
+
+
+  if (event.target.matches(this.settings.selectorDrawer)) {
+    // Close the modal drawer.
+    this.close(event.target.id);
+  }
+}
+function handleKeydown$2(event) {
+  if (event.key === 'Escape') {
+    const modal = this.activeModal;
+    if (modal) this.close(modal);
   }
+}
 
-  getBreakpoint(key) {
-    let breakpoint = key;
+async function deregister$2(obj, close = true) {
+  // Return collection if nothing was passed.
+  if (!obj) return this.collection; // Check if entry has been registered in the collection.
 
-    if (this.parent.settings.breakpoints && this.parent.settings.breakpoints[key]) {
-      breakpoint = this.parent.settings.breakpoints[key];
-    } else if (getComputedStyle(document.body).getPropertyValue(this.prefix + key)) {
-      breakpoint = getComputedStyle(document.body).getPropertyValue(this.prefix + key);
-    }
+  const index = this.collection.findIndex(entry => {
+    return entry.id === obj.id;
+  });
 
-    return breakpoint;
-  }
+  if (index >= 0) {
+    // Get the collection entry.
+    const entry = this.collection[index]; // If entry is in the opened state.
 
-  getVariablePrefix() {
-    let prefix = '--';
-    prefix += getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
-    prefix += 'breakpoint-';
-    return prefix;
-  }
+    if (close && entry.state === 'opened') {
+      // Close the drawer.
+      await entry.close(false);
+    } // Remove entry from local store.
+
+
+    delete this.store[entry.id]; // Unmount the MatchMedia functionality.
+
+    entry.unmountBreakpoint(); // Delete properties from collection entry.
+
+    Object.getOwnPropertyNames(entry).forEach(prop => {
+      delete entry[prop];
+    }); // Remove entry from collection.
 
+    this.collection.splice(index, 1);
+  } // Return the modified collection.
+
+
+  return this.collection;
 }
 
-function getDrawer(drawerKey) {
-  if (typeof drawerKey !== 'string') return drawerKey;
-  return document.querySelector(`[data-${this.settings.dataDrawer}="${drawerKey}"]`);
+function L() {
+  return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
 }
-function drawerNotFound(key) {
-  return Promise.reject(new Error(`Did not find drawer with key: "${key}"`));
+
+function getBreakpoint(drawer) {
+  const prefix = L();
+  const bp = drawer.getAttribute(`data-${this.settings.dataBreakpoint}`);
+
+  if (this.settings.breakpoints && this.settings.breakpoints[bp]) {
+    return this.settings.breakpoints[bp];
+  } else if (getComputedStyle(document.body).getPropertyValue(`--${prefix}breakpoint-${bp}`).trim()) {
+    return getComputedStyle(document.body).getPropertyValue(`--${prefix}breakpoint-${bp}`).trim();
+  } else {
+    return bp;
+  }
 }
 
-async function close$2(drawerKey) {
-  const drawer = this.getDrawer(drawerKey);
-  if (!drawer) return drawerNotFound(drawerKey);
+function getDrawer(query) {
+  // Get the entry from collection.
+  const entry = typeof query === 'string' ? this.get(query) : this.get(query.id); // Return entry if it was resolved, otherwise throw error.
 
-  if (hasClass(drawer, this.settings.stateOpened)) {
-    this.working = true;
+  if (entry) {
+    return entry;
+  } else {
+    throw new Error(`Drawer not found in collection with id of "${query.id || query}".`);
+  }
+}
 
-    if (hasClass(drawer, this.settings.classModal)) {
-      setInert(false, this.settings.selectorInert);
-      setOverflowHidden(false, this.settings.selectorOverflow);
+function getDrawerID(obj) {
+  // If it's a string, return the string.
+  if (typeof obj === 'string') {
+    return obj;
+  } // If it's an HTML element.
+  else if (typeof obj.hasAttribute === 'function') {
+    // If it's a drawer open trigger, return data value.
+    if (obj.hasAttribute(`data-${this.settings.dataOpen}`)) {
+      return obj.getAttribute(`data-${this.settings.dataOpen}`);
+    } // If it's a drawer close trigger, return data value or false.
+    else if (obj.hasAttribute(`data-${this.settings.dataClose}`)) {
+      return obj.getAttribute(`data-${this.settings.dataClose}`) || false;
+    } // If it's a drawer toggle trigger, return data value.
+    else if (obj.hasAttribute(`data-${this.settings.dataToggle}`)) {
+      return obj.getAttribute(`data-${this.settings.dataToggle}`);
+    } // If it's a drawer element, return the id.
+    else if (obj.closest(this.settings.selectorDrawer)) {
+      obj = obj.closest(this.settings.selectorDrawer);
+      return obj.id || false;
+    } // Return false if no id was found.
+    else return false;
+  } // If it has an id property, return its value.
+  else if (obj.id) {
+    return obj.id;
+  } // Return false if no id was found.
+  else return false;
+}
+
+function getDrawerElements(query) {
+  const id = getDrawerID.call(this, query);
+
+  if (id) {
+    const drawer = document.querySelector(`#${id}`);
+    const dialog = drawer ? drawer.querySelector(this.settings.selectorDialog) : null;
+
+    if (!drawer && !dialog) {
+      return {
+        error: new Error(`No drawer elements found using the ID: "${id}".`)
+      };
+    } else if (!dialog) {
+      return {
+        error: new Error('Drawer is missing dialog element.')
+      };
+    } else {
+      return {
+        drawer,
+        dialog
+      };
+    }
+  } else {
+    return {
+      error: new Error('Could not resolve the drawer ID.')
+    };
+  }
+}
+
+async function initialState(entry) {
+  // Setup initial state using the following priority:
+  //  1. If a store state is available, restore from local store.
+  //  2. If opened state class is set, set state to opened.
+  //  3. Else, initialize default state.
+  if (this.store[entry.id]) {
+    // Restore drawers to saved inline state.
+    if (this.store[entry.id] === 'opened') {
+      await entry.open(false, false);
+    } else {
+      await entry.close(false, false);
     }
+  } else if (entry.el.classList.contains(this.settings.stateOpened)) {
+    // Update drawer state.
+    entry.state = 'opened';
+  } else {
+    // Remove transition state classes.
+    entry.el.classList.remove(this.settings.stateOpening);
+    entry.el.classList.remove(this.settings.stateClosing); // Add closed state class.
 
-    await closeTransition(drawer, this.settings);
-    this.stateSave(drawer);
-    focusTrigger(this);
-    this.focusTrap.destroy();
-    drawer.dispatchEvent(new CustomEvent(this.settings.customEventPrefix + 'closed', {
-      detail: this,
-      bubbles: true
-    }));
-    this.working = false;
-    return drawer;
+    entry.el.classList.add(this.settings.stateClosed);
+  }
+}
+
+function updateFocusState$1(entry) {
+  // Check if there's an active modal
+  if (entry.state === 'opened') {
+    // Mount the focus trap on the opened drawer.
+    if (entry.mode === 'modal') {
+      this.focusTrap.mount(entry.dialog, this.settings.selectorFocus);
+    } else {
+      this.focusTrap.focus(entry.dialog, this.settings.selectorFocus);
+    }
   } else {
-    return drawer;
+    // Set focus to root trigger and unmount the focus trap.
+    if (entry.trigger) {
+      entry.trigger.focus();
+      entry.trigger = null;
+    }
+
+    this.focusTrap.unmount();
   }
 }
 
-function handlerClick$2(event) {
-  // Working catch
-  if (this.working) return; // Toggle data trigger
+async function open$2(query, transition, focus = true) {
+  // Get the drawer from collection.
+  const drawer = getDrawer.call(this, query); // Get the modal configuration.
 
-  let trigger = event.target.closest(`[data-${this.settings.dataToggle}]`);
+  const config = _extends({}, this.settings, drawer.settings); // Add transition parameter to configuration.
 
-  if (trigger) {
-    const selector = trigger.getAttribute(`data-${this.settings.dataToggle}`);
-    this.memory.trigger = trigger;
-    this.toggle(selector);
-    event.preventDefault();
-    return;
-  } // Open data trigger
 
+  if (transition !== undefined) config.transition = transition; // If drawer is closed.
 
-  trigger = event.target.closest(`[data-${this.settings.dataOpen}]`);
+  if (drawer.state === 'closed') {
+    // Update drawer state.
+    drawer.state = 'opening'; // Run the open transition.
 
-  if (trigger) {
-    const selector = trigger.getAttribute(`data-${this.settings.dataOpen}`);
-    this.memory.trigger = trigger;
-    this.open(selector);
-    event.preventDefault();
-    return;
-  } // Close data trigger
+    await openTransition(drawer.el, config); // Update the global state if mode is modal.
 
+    if (drawer.mode === 'modal') updateGlobalState(true, config); // Update drawer state.
 
-  trigger = event.target.closest(`[data-${this.settings.dataClose}]`);
+    drawer.state = 'opened';
+  } // Set focus to the drawer element if the focus param is true.
 
-  if (trigger) {
-    const selector = trigger.getAttribute(`data-${this.settings.dataClose}`);
 
-    if (selector) {
-      this.memory.trigger = trigger;
-      this.close(selector);
-    } else {
-      const target = event.target.closest(`[data-${this.settings.dataDrawer}]`);
-      if (target) this.close(target);
-    }
+  if (focus) {
+    updateFocusState$1.call(this, drawer);
+  } // Dispatch custom opened event.
 
-    event.preventDefault();
-    return;
-  } // Screen modal trigger
 
+  drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
+    detail: this,
+    bubbles: true
+  })); // Return the drawer.
 
-  if (event.target.hasAttribute(`data-${this.settings.dataDrawer}`)) {
-    this.close(event.target);
-    return;
-  }
+  return drawer;
 }
-function handlerKeydown$2(event) {
-  // Working catch
-  if (this.working) return;
 
-  if (event.key === 'Escape') {
-    const target = document.querySelector(`.${this.settings.classModal}.${this.settings.stateOpened}`);
+async function close$2(query, transition, focus = true) {
+  // Get the drawer from collection.
+  const drawer = getDrawer.call(this, query); // Get the modal configuration.
 
-    if (target) {
-      this.close(target);
-    }
-  }
-}
+  const config = _extends({}, this.settings, drawer.settings); // Add transition parameter to configuration.
 
-async function open$2(drawerKey) {
-  const drawer = this.getDrawer(drawerKey);
-  if (!drawer) return drawerNotFound(drawerKey);
 
-  if (!hasClass(drawer, this.settings.stateOpened)) {
-    this.working = true;
-    const isModal = hasClass(drawer, this.settings.classModal);
+  if (transition !== undefined) config.transition = transition; // If drawer is opened.
 
-    if (isModal) {
-      setOverflowHidden(true, this.settings.selectorOverflow);
-    }
+  if (drawer.state === 'opened') {
+    // Update drawer state.
+    drawer.state = 'closing'; // Remove focus from active element.
 
-    await openTransition(drawer, this.settings);
-    this.stateSave(drawer);
+    document.activeElement.blur(); // Run the close transition.
 
-    if (isModal) {
-      this.focusTrap.init(drawer);
-      setInert(true, this.settings.selectorInert);
-    }
+    await closeTransition(drawer.el, config); // Update the global state if mode is modal.
+
+    if (drawer.mode === 'modal') updateGlobalState(false, config); // Set focus to the trigger element if the focus param is true.
+
+    if (focus) {
+      updateFocusState$1.call(this, drawer);
+    } // Update drawer state.
+
+
+    drawer.state = 'closed'; // Dispatch custom closed event.
 
-    focusTarget(drawer, this.settings);
-    drawer.dispatchEvent(new CustomEvent(this.settings.customEventPrefix + 'opened', {
+    drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
       detail: this,
       bubbles: true
     }));
-    this.working = false;
-    return drawer;
+  } // Return the drawer.
+
+
+  return drawer;
+}
+
+async function toggle(query, transition, focus) {
+  // Get the drawer from collection.
+  const drawer = getDrawer.call(this, query); // Open or close the drawer based on its current state.
+
+  if (drawer.state === 'closed') {
+    return open$2.call(this, drawer, transition, focus);
   } else {
-    focusTarget(drawer, this.settings);
-    return drawer;
+    return close$2.call(this, drawer, transition, focus);
   }
 }
 
-function stateSet(settings) {
-  // If save state is disabled
-  if (!settings.stateSave) return stateClear(settings); // If there isn't an existing state to set
+function switchMode(entry) {
+  switch (entry.mode) {
+    case 'inline':
+      return toInline.call(this, entry);
 
-  const storageCheck = localStorage.getItem(settings.stateKey);
+    case 'modal':
+      return toModal.call(this, entry);
 
-  if (!storageCheck || storageCheck && Object.keys(JSON.parse(storageCheck)).length === 0) {
-    return stateSave(null, settings);
-  } // Set the existing state
+    default:
+      throw new Error(`"${entry.mode}" is not a valid drawer mode.`);
+  }
+}
 
+async function toInline(entry) {
+  // Remove the modal class.
+  entry.el.classList.remove(entry.getSetting('classModal')); // Remove the aria-modal attribute.
 
-  const state = JSON.parse(localStorage.getItem(settings.stateKey));
-  Object.keys(state).forEach(key => {
-    const item = document.querySelector(`[data-${settings.dataDrawer}="${key}"]`);
-    if (!item) return;
-    state[key] == settings.stateOpened ? addClass(item, settings.stateOpened) : removeClass(item, settings.stateOpened);
-  });
-  return state;
-}
-function stateSave(target, settings) {
-  // If save state is disabled
-  if (!settings.stateSave) return stateClear(settings); // Get the currently saved object if it exists
+  entry.dialog.removeAttribute('aria-modal'); // Update the global state.
 
-  const state = localStorage.getItem(settings.stateKey) ? JSON.parse(localStorage.getItem(settings.stateKey)) : {}; // Are we saving a single target or the entire suite?
+  updateGlobalState(false, _extends({}, this.settings, entry.settings)); // Remove any focus traps.
 
-  const drawers = target ? [target] : document.querySelectorAll(`[data-${settings.dataDrawer}]`); // Loop through drawers and save their states
+  this.focusTrap.unmount(); // Setup initial state.
 
-  drawers.forEach(el => {
-    if (hasClass(el, settings.classModal)) return;
-    const drawerKey = el.getAttribute(`data-${settings.dataDrawer}`);
-    state[drawerKey] = hasClass(el, settings.stateOpened) ? settings.stateOpened : settings.stateClosed;
-  }); // Save to localStorage and return the state
+  await initialState.call(this, entry); // Dispatch custom switch event.
 
-  localStorage.setItem(settings.stateKey, JSON.stringify(state));
-  return state;
-}
-function stateClear(settings) {
-  if (localStorage.getItem(settings.stateKey)) {
-    localStorage.removeItem(settings.stateKey);
-  }
+  entry.el.dispatchEvent(new CustomEvent(entry.getSetting('customEventPrefix') + 'switchMode', {
+    detail: this,
+    bubbles: true
+  })); // Return the entry.
 
-  return {};
+  return entry;
 }
 
-async function switchToModal(drawerKey) {
-  // Initial guards
-  const drawer = this.getDrawer(drawerKey);
-  if (!drawer) return drawerNotFound(drawerKey);
-  if (hasClass(drawer, this.settings.classModal)) return; // Enable modal state
+async function toModal(entry) {
+  // Get the drawer configuration.
+  // Add the modal class.
+  entry.el.classList.add(entry.getSetting('classModal')); // Set aria-modal attribute to true.
+
+  entry.dialog.setAttribute('aria-modal', 'true'); // If there isn't a stored state but also has the opened state class...
+
+  if (!this.store[entry.id] && entry.el.classList.contains(entry.getSetting('stateOpened'))) {
+    // Save the opened state in local store.
+    this.store[entry.id] = 'opened';
+  } // Modal drawer defaults to closed state.
+
 
-  addClass(drawer, this.settings.classModal);
-  addClass(drawer, this.settings.stateClosed);
-  removeClass(drawer, this.settings.stateOpened); // Dispatch custom event
+  await close$2.call(this, entry, false, false); // Dispatch custom switch event.
 
-  drawer.dispatchEvent(new CustomEvent(this.settings.customEventPrefix + 'toModal', {
+  entry.el.dispatchEvent(new CustomEvent(entry.getSetting('customEventPrefix') + 'switchMode', {
+    detail: this,
     bubbles: true
-  }));
-  return drawer;
+  })); // Return the entry.
+
+  return entry;
 }
-async function switchToDefault(drawerKey) {
-  // Initial guards
-  const drawer = this.getDrawer(drawerKey);
-  if (!drawer) return drawerNotFound(drawerKey);
-  if (!hasClass(drawer, this.settings.classModal)) return; // Tear down modal state
 
-  setInert(false, this.settings.selectorInert);
-  setOverflowHidden(false, this.settings.selectorOverflow);
-  removeClass(drawer, this.settings.classModal);
-  this.focusTrap.destroy(); // Restore drawers saved state
+async function register$2(el, dialog) {
+  // Deregister entry incase it has already been registered.
+  await deregister$2.call(this, el, false); // Save root this for use inside methods API.
 
-  drawerKey = drawer.getAttribute(`data-${this.settings.dataDrawer}`);
-  const drawerState = this.state[drawerKey];
+  const root = this; // Create an instance of the Breakpoint class.
 
-  if (drawerState == this.settings.stateOpened) {
-    addClass(drawer, this.settings.stateOpened);
-    removeClass(drawer, this.settings.stateClosed);
-  } // Dispatch custom event
+  const breakpoint = new Breakpoint(); // Setup methods API.
 
+  const methods = {
+    open(transition, focus) {
+      return open$2.call(root, this, transition, focus);
+    },
 
-  drawer.dispatchEvent(new CustomEvent(this.settings.customEventPrefix + 'toDefault', {
-    bubbles: true
-  }));
-  return drawer;
-}
+    close(transition, focus) {
+      return close$2.call(root, this, transition, focus);
+    },
+
+    toggle(transition, focus) {
+      return toggle.call(root, this, transition, 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) {
+      this.mode = event.matches ? 'inline' : 'modal';
+      return this;
+    },
+
+    getSetting(key) {
+      return key in this.settings ? this.settings[key] : root.settings[key];
+    }
+
+  }; // Setup the drawer object.
+
+  const entry = _extends({
+    id: el.id,
+    el: el,
+    dialog: dialog,
+    trigger: null,
+    settings: getConfig$1(el, this.settings.dataConfig),
+
+    get breakpoint() {
+      return getBreakpoint.call(root, el);
+    },
+
+    get state() {
+      return __state;
+    },
+
+    set state(value) {
+      __state = value; // Save 'opened' and 'closed' states to store if mode is inline.
+
+      if (value === 'opened' || value === 'closed') {
+        if (this.mode === 'inline') root.store[this.id] = this.state;
+      }
+    },
+
+    get mode() {
+      return __mode;
+    },
+
+    set mode(value) {
+      __mode = value;
+      switchMode.call(root, this);
+    }
+
+  }, methods); // Create the state var with the initial state.
+
+
+  let __state = el.classList.contains(entry.getSetting('stateOpened')) ? 'opened' : 'closed'; // Create the mode var with the initial mode.
+
+
+  let __mode = el.classList.contains(entry.getSetting('classModal')) ? 'modal' : 'inline'; // Setup mode specific attributes.
 
-async function toggle(drawerKey) {
-  const drawer = this.getDrawer(drawerKey);
-  if (!drawer) return drawerNotFound(drawerKey);
-  const isClosed = !hasClass(drawer, this.settings.stateOpened);
 
-  if (isClosed) {
-    return this.open(drawer);
+  if (entry.mode === 'modal') {
+    // Set aria-modal attribute to true.
+    entry.dialog.setAttribute('aria-modal', 'true');
   } else {
-    return this.close(drawer);
-  }
+    // Remove the aria-modal attribute.
+    entry.dialog.removeAttribute('aria-modal');
+  } // Set tabindex="-1" so dialog is focusable via JS or click.
+
+
+  if (entry.getSetting('setTabindex')) {
+    entry.dialog.setAttribute('tabindex', '-1');
+  } // Add entry to collection.
+
+
+  this.collection.push(entry); // If the entry has a breakpoint...
+
+  if (entry.breakpoint) {
+    // Mount media query breakpoint functionality.
+    entry.mountBreakpoint();
+  } else {
+    // Else, Setup initial state.
+    await initialState.call(this, entry);
+  } // Return the registered entry.
+
+
+  return entry;
 }
 
-class Drawer {
+var _handleClick$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
+
+var _handleKeydown$2 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
+
+class Drawer extends Collection {
   constructor(options) {
+    super();
+    Object.defineProperty(this, _handleClick$1, {
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(this, _handleKeydown$2, {
+      writable: true,
+      value: void 0
+    });
     this.defaults = defaults$2;
     this.settings = _extends({}, this.defaults, options);
-    this.working = false;
-    this.memory = {};
-    this.state = {};
-    this.focusTrap = new FocusTrap();
-    this.breakpoint = new Breakpoint(this);
-    this.__handlerClick = handlerClick$2.bind(this);
-    this.__handlerKeydown = handlerKeydown$2.bind(this);
+    this.focusTrap = new FocusTrap(); // Setup local store for inline drawer state management.
+
+    this.store = localStore(this.settings.storeKey, this.settings.store);
+    _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1] = handleClick$2.bind(this);
+    _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2] = handleKeydown$2.bind(this);
     if (this.settings.autoInit) this.init();
   }
 
-  init(options = null) {
-    if (options) this.settings = _extends({}, this.settings, options);
-    this.stateSet();
+  get activeModal() {
+    return this.collection.find(entry => {
+      return entry.state === 'opened' && entry.mode === 'modal';
+    });
+  }
 
-    if (this.settings.setTabindex) {
-      this.setTabindex();
-    }
+  async init(options = null) {
+    // Update settings with passed options.
+    if (options) this.settings = _extends({}, this.settings, options); // Get all the modals.
+
+    const drawers = document.querySelectorAll(this.settings.selectorDrawer); // Register the collections array with modal instances.
 
-    this.breakpoint.init();
+    await this.registerCollection(drawers); // If eventListeners are enabled, init event listeners.
 
     if (this.settings.eventListeners) {
       this.initEventListeners();
     }
+
+    return this;
   }
 
-  destroy() {
-    this.breakpoint.destroy();
-    this.memory = {};
-    this.state = {};
-    localStorage.removeItem(this.settings.stateKey);
+  async destroy() {
+    // Remove all entries from the collection.
+    await this.deregisterCollection(); // If eventListeners are enabled, init event listeners.
 
     if (this.settings.eventListeners) {
       this.destroyEventListeners();
     }
-  }
-  /**
-   * Event listeners
-   */
 
+    return this;
+  }
 
   initEventListeners() {
-    document.addEventListener('click', this.__handlerClick, false);
-    document.addEventListener('touchend', this.__handlerClick, false);
-    document.addEventListener('keydown', this.__handlerKeydown, false);
+    document.addEventListener('click', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
+    document.addEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
+    document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
   }
 
   destroyEventListeners() {
-    document.removeEventListener('click', this.__handlerClick, false);
-    document.removeEventListener('touchend', this.__handlerClick, false);
-    document.removeEventListener('keydown', this.__handlerKeydown, false);
-  }
-  /**
-   * Helpers
-   */
-
-
-  getDrawer(drawerKey) {
-    return getDrawer.call(this, drawerKey);
-  }
-
-  setTabindex() {
-    return setTabindex(`
-      [data-${this.settings.dataDrawer}]
-      [data-${this.settings.dataDialog}]
-    `);
+    document.removeEventListener('click', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
+    document.removeEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
+    document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
   }
-  /**
-   * Save state functionality
-   */
 
-
-  stateSet() {
-    this.state = stateSet(this.settings);
-  }
-
-  stateSave(target = null) {
-    this.state = stateSave(target, this.settings);
-  }
-
-  stateClear() {
-    this.state = stateClear(this.settings);
-  }
-  /**
-   * SwitchTo functionality
-   */
-
-
-  switchToDefault(drawerKey) {
-    return switchToDefault.call(this, drawerKey);
+  register(query) {
+    const els = getDrawerElements.call(this, query);
+    if (els.error) return Promise.reject(els.error);
+    return register$2.call(this, els.drawer, els.dialog);
   }
 
-  switchToModal(drawerKey) {
-    return switchToModal.call(this, drawerKey);
+  deregister(query) {
+    const entry = this.get(getDrawerID.call(this, query));
+    return deregister$2.call(this, entry);
   }
-  /**
-   * Change state functionality
-   */
 
-
-  toggle(drawerKey) {
-    return toggle.call(this, drawerKey);
+  open(id, transition, focus) {
+    return open$2.call(this, id, transition, focus);
   }
 
-  open(drawerKey) {
-    return open$2.call(this, drawerKey);
+  close(id, transition, focus) {
+    return close$2.call(this, id, transition, focus);
   }
 
-  close(drawerKey) {
-    return close$2.call(this, drawerKey);
+  toggle(id, transition, focus) {
+    return toggle.call(this, id, transition, focus);
   }
 
 }
@@ -885,416 +1125,565 @@ class Drawer {
 var defaults$1 = {
   autoInit: false,
   // Data attributes
-  dataModal: 'modal',
-  dataDialog: 'modal-dialog',
   dataOpen: 'modal-open',
   dataClose: 'modal-close',
-  dataFocus: 'modal-focus',
-  dataRequired: 'modal-required',
+  dataReplace: 'modal-replace',
   dataConfig: 'modal-config',
+  // Selectors
+  selectorModal: '.modal',
+  selectorDialog: '.modal__dialog',
+  selectorRequired: '[role="alertdialog"]',
+  selectorFocus: '[data-focus]',
+  selectorInert: null,
+  selectorOverflow: 'body',
   // State classes
   stateOpened: 'is-opened',
   stateOpening: 'is-opening',
   stateClosing: 'is-closing',
   stateClosed: 'is-closed',
-  // Selector
-  selectorInert: null,
-  selectorOverflow: 'body',
-  // Feature toggles
+  // Feature settings
   customEventPrefix: 'modal:',
   eventListeners: true,
-  moveModals: {
-    ref: null,
-    type: null
-  },
+  teleport: null,
+  teleportMethod: 'append',
   setTabindex: true,
   transition: true
 };
 
-function getModalConfig(modal) {
-  const json = modal.getAttribute(`data-${this.settings.dataConfig}`);
+function getModal(query) {
+  // Get the entry from collection.
+  const entry = typeof query === 'string' ? this.get(query) : this.get(query.id); // Return entry if it was resolved, otherwise throw error.
 
-  if (json) {
-    const config = JSON.parse(json);
-    return _extends({}, this.settings, config);
+  if (entry) {
+    return entry;
   } else {
-    return this.settings;
+    throw new Error(`Modal not found in collection with id of "${query.id || query}".`);
   }
 }
-function getModal(modalKey) {
-  if (typeof modalKey !== 'string') return modalKey;
-  return document.querySelector(`[data-${this.settings.dataModal}="${modalKey}"]`);
-}
-function modalNotFound(key) {
-  return Promise.reject(new Error(`Did not find modal with key: "${key}"`));
-}
-function moveModals(type = this.settings.moveModals.type, ref = this.settings.moveModals.ref) {
-  const modals = document.querySelectorAll(`[data-${this.settings.dataModal}]`);
-  if (modals.length) moveElement(modals, type, ref);
+
+function getModalID(obj) {
+  // If it's a string, return the string.
+  if (typeof obj === 'string') {
+    return obj;
+  } // If it's an HTML element.
+  else if (typeof obj.hasAttribute === 'function') {
+    // If it's a modal open trigger, return data value.
+    if (obj.hasAttribute(`data-${this.settings.dataOpen}`)) {
+      return obj.getAttribute(`data-${this.settings.dataOpen}`);
+    } // If it's a modal close trigger, return data value or false.
+    else if (obj.hasAttribute(`data-${this.settings.dataClose}`)) {
+      return obj.getAttribute(`data-${this.settings.dataClose}`) || false;
+    } // If it's a modal replace trigger, return data value.
+    else if (obj.hasAttribute(`data-${this.settings.dataReplace}`)) {
+      return obj.getAttribute(`data-${this.settings.dataReplace}`);
+    } // If it's a modal element, return the id.
+    else if (obj.closest(this.settings.selectorModal)) {
+      obj = obj.closest(this.settings.selectorModal);
+      return obj.id || false;
+    } // Return false if no id was found.
+    else return false;
+  } // If it has an id property, return its value.
+  else if (obj.id) {
+    return obj.id;
+  } // Return false if no id was found.
+  else return false;
 }
 
-async function close$1(returnFocus = true) {
-  const modal = document.querySelector(`[data-${this.settings.dataModal}].${this.settings.stateOpened}`);
+function getModalElements(query) {
+  const id = getModalID.call(this, query);
 
-  if (modal) {
-    this.working = true;
-    const config = getModalConfig.call(this, modal);
-    setInert(false, config.selectorInert);
-    setOverflowHidden(false, config.selectorOverflow);
-    await closeTransition(modal, config);
-    if (returnFocus) focusTrigger(this);
-    this.focusTrap.destroy();
-    modal.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
-      detail: this,
-      bubbles: true
-    }));
-    this.working = false;
-    return modal;
+  if (id) {
+    const modal = document.querySelector(`#${id}`);
+    const dialog = modal ? modal.querySelector(this.settings.selectorDialog) : null;
+
+    if (!modal && !dialog) {
+      return {
+        error: new Error(`No modal elements found using the ID: "${id}".`)
+      };
+    } else if (!dialog) {
+      return {
+        error: new Error('Modal is missing dialog element.')
+      };
+    } else {
+      return {
+        modal,
+        dialog
+      };
+    }
   } else {
-    return modal;
+    return {
+      error: new Error('Could not resolve the modal ID.')
+    };
   }
 }
 
-async function handlerClick$1(event) {
-  // Working catch
-  if (this.working) return; // Trigger click
+function updateFocusState() {
+  // Check if there's an active modal
+  if (this.active) {
+    // Mount the focus trap on the active modal.
+    this.focusTrap.mount(this.active.dialog, this.settings.selectorFocus);
+  } else {
+    // Set focus to root trigger and unmount the focus trap.
+    if (this.trigger) {
+      this.trigger.focus();
+      this.trigger = null;
+    }
 
-  const trigger = event.target.closest(`[data-${this.settings.dataOpen}]`);
+    this.focusTrap.unmount();
+  }
+}
+
+function updateStackIndex(stack) {
+  stack.forEach((entry, index) => {
+    entry.el.style.zIndex = null;
+    const value = getComputedStyle(entry.el)['z-index'];
+    entry.el.style.zIndex = parseInt(value) + index + 1;
+  });
+}
+
+async function handleClick$1(event) {
+  // If an open or replace button was clicked, open or replace the modal.
+  let trigger = event.target.closest(`[data-${this.settings.dataOpen}], [data-${this.settings.dataReplace}]`);
 
   if (trigger) {
-    event.preventDefault();
-    const modalKey = trigger.getAttribute(`data-${this.settings.dataOpen}`);
-    const fromModal = event.target.closest(`[data-${this.settings.dataModal}]`);
-    if (!fromModal) this.memory.trigger = trigger;
-    await this.close(!fromModal);
-    this.open(modalKey);
-    return;
-  } // Close click
+    event.preventDefault(); // Save the trigger if it's not coming from inside a modal.
 
+    const fromModal = event.target.closest(this.settings.selectorModal);
+    if (!fromModal) this.trigger = trigger; // Get the modal.
 
-  if (event.target.closest(`[data-${this.settings.dataClose}]`)) {
-    event.preventDefault();
-    this.close();
-    return;
-  } // Root click
+    const modal = this.get(getModalID.call(this, trigger)); // Depending on the button type, either open or replace the modal.
 
+    return trigger.matches(`[data-${this.settings.dataOpen}]`) ? modal.open() : modal.replace();
+  } // If a close button was clicked, close the modal.
 
-  if (event.target.hasAttribute(`data-${this.settings.dataModal}`) && !event.target.hasAttribute(`data-${this.settings.dataRequired}`)) {
-    this.close();
-    return;
+
+  trigger = event.target.closest(`[data-${this.settings.dataClose}]`);
+
+  if (trigger) {
+    event.preventDefault(); // Get the value of the data attribute.
+
+    const value = trigger.getAttribute(`data-${this.settings.dataClose}`); // Close all if * wildcard is passed, otherwise close a single modal.
+
+    return value === '*' ? this.closeAll() : this.close(value);
+  } // If the modal screen was clicked, close the modal.
+
+
+  if (event.target.matches(this.settings.selectorModal) && !event.target.querySelector(this.settings.selectorRequired)) {
+    return this.close(getModalID.call(this, event.target));
   }
 }
-function handlerKeydown$1(event) {
-  // Working catch
-  if (this.working) return;
-
+function handleKeydown$1(event) {
+  // If escape key was pressed.
   if (event.key === 'Escape') {
-    const target = document.querySelector(`[data-${this.settings.dataModal}].${this.settings.stateOpened}`);
-
-    if (target && !target.hasAttribute(`data-${this.settings.dataRequired}`)) {
-      this.close();
+    // If a modal is opened and not required, close the modal.
+    if (this.active && !this.active.dialog.matches(this.settings.selectorRequired)) {
+      return this.close();
     }
   }
 }
 
-function setInitialState() {
-  const modals = document.querySelectorAll(`[data-${this.settings.dataModal}]`);
-  modals.forEach(el => {
-    // Remove opened state setup
-    if (el.classList.contains(this.settings.stateOpened)) {
-      setInert(false, this.settings.selectorInert);
-      setOverflowHidden(false, this.settings.selectorOverflow);
-      focusTrigger(this);
-      this.focusTrap.destroy();
-    } // Remove all state classes and add the default state (closed)
-
+async function deregister$1(obj, close = true) {
+  // Return collection if nothing was passed.
+  if (!obj) return this.collection; // Check if entry has been registered in the collection.
 
-    removeClass(el, this.settings.stateOpened, this.settings.stateOpening, this.settings.stateClosing);
-    addClass(el, this.settings.stateClosed);
+  const index = this.collection.findIndex(entry => {
+    return entry.id === obj.id;
   });
+
+  if (index >= 0) {
+    // Get the collection entry.
+    const entry = this.collection[index]; // If entry is in the opened state, close it.
+
+    if (close && entry.state === 'opened') {
+      await entry.close(false);
+    } else {
+      // Get index of modal in stack array.
+      const stackIndex = this.stack.findIndex(item => {
+        return item.id === entry.id;
+      }); // Remove modal from stack array.
+
+      if (stackIndex >= 0) {
+        this.stack.splice(stackIndex, 1);
+      }
+    } // Return teleported modal if a reference has been set.
+
+
+    if (entry.getSetting('teleport')) {
+      entry.teleportReturn();
+    } // Delete properties from collection entry.
+
+
+    Object.getOwnPropertyNames(entry).forEach(prop => {
+      delete entry[prop];
+    }); // Remove entry from collection.
+
+    this.collection.splice(index, 1);
+  } // Return the modified collection.
+
+
+  return this.collection;
+}
+
+async function open$1(query, transition, focus = true) {
+  // Get the modal from collection.
+  const modal = getModal.call(this, query); // Get the modal configuration.
+
+  const config = _extends({}, this.settings, modal.settings); // Add transition parameter to configuration.
+
+
+  if (transition !== undefined) config.transition = transition; // Check if modal is already in the stack.
+
+  const index = this.stack.findIndex(entry => {
+    return entry.id === modal.id;
+  }); // If modal is already open.
+
+  if (index >= 0) {
+    // Remove modal from stack array.
+    this.stack.splice(index, 1); // Move back to end of stack.
+
+    this.stack.push(modal);
+  } // If modal is closed.
+
+
+  if (modal.state === 'closed') {
+    // Update modal state.
+    modal.state = 'opening'; // Apply z-index styles based on stack length.
+
+    modal.el.style.zIndex = null;
+    const value = getComputedStyle(modal.el)['z-index'];
+    modal.el.style.zIndex = parseInt(value) + this.stack.length + 1; // Store modal in stack array.
+
+    this.stack.push(modal); // Run the open transition.
+
+    await openTransition(modal.el, config); // Update modal state.
+
+    modal.state = 'opened';
+  } // Update focus if the focus param is true.
+
+
+  if (focus) {
+    updateFocusState.call(this);
+  } // Dispatch custom opened event.
+
+
+  modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
+    detail: this,
+    bubbles: true
+  })); // Return the modal.
+
+  return modal;
 }
 
-async function open$1(modalKey) {
-  const modal = getModal.call(this, modalKey);
-  if (!modal) return modalNotFound(modalKey);
-  const config = getModalConfig.call(this, modal);
+async function close$1(query, transition, focus = true) {
+  // Get the modal from collection, or top modal in stack if no query is provided.
+  const modal = query ? getModal.call(this, query) : this.active; // If a modal exists and its state is opened.
+
+  if (modal && modal.state === 'opened') {
+    // Update modal state.
+    modal.state = 'closing'; // Get the modal configuration.
+
+    const config = _extends({}, this.settings, modal.settings); // Add transition parameter to configuration.
+
 
-  if (hasClass(modal, config.stateClosed)) {
-    this.working = true;
-    setOverflowHidden(true, config.selectorOverflow);
-    await openTransition(modal, config);
-    this.focusTrap.init(modal);
-    focusTarget(modal, config);
-    setInert(true, config.selectorInert);
-    modal.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
+    if (transition !== undefined) config.transition = transition; // Remove focus from active element.
+
+    document.activeElement.blur(); // Run the close transition.
+
+    await closeTransition(modal.el, config); // Remove z-index styles.
+
+    modal.el.style.zIndex = null; // Get index of modal in stack array.
+
+    const index = this.stack.findIndex(entry => {
+      return entry.id === modal.id;
+    }); // Remove modal from stack array.
+
+    this.stack.splice(index, 1); // Update focus if the focus param is true.
+
+    if (focus) {
+      updateFocusState.call(this);
+    } // Update modal state.
+
+
+    modal.state = 'closed'; // Dispatch custom closed event.
+
+    modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
       detail: this,
       bubbles: true
     }));
-    this.working = false;
-    return modal;
-  } else {
-    return modal;
-  }
-}
+  } // Return the modal.
 
-class Modal {
-  constructor(options) {
-    this.defaults = defaults$1;
-    this.settings = _extends({}, this.defaults, options);
-    this.working = false;
-    this.memory = {};
-    this.focusTrap = new FocusTrap();
-    this.__handlerClick = handlerClick$1.bind(this);
-    this.__handlerKeydown = handlerKeydown$1.bind(this);
-    if (this.settings.autoInit) this.init();
-  }
 
-  init(options = null) {
-    if (options) this.settings = _extends({}, this.settings, options);
-    this.moveModals();
-    this.setInitialState();
+  return modal;
+}
 
-    if (this.settings.setTabindex) {
-      this.setTabindex();
+async function closeAll$1(exclude, transition) {
+  const result = [];
+  await Promise.all(this.stack.map(async modal => {
+    if (exclude && exclude === modal.id) {
+      Promise.resolve();
+    } else {
+      result.push(await close$1.call(this, modal, transition, false));
     }
 
-    if (this.settings.eventListeners) {
-      this.initEventListeners();
-    }
-  }
+    modal.trigger = null;
+  }));
+  return result;
+}
 
-  destroy() {
-    this.memory = {};
+async function replace(query, transition, focus = true) {
+  // Get the modal from collection.
+  const modal = getModal.call(this, query); // Setup results for return.
 
-    if (this.settings.eventListeners) {
-      this.destroyEventListeners();
-    }
-  }
-  /**
-   * Event listeners
-   */
+  let resultOpened, resultClosed;
 
+  if (modal.state === 'opened') {
+    // If modal is open, close all modals except for replacement.
+    resultOpened = modal;
+    resultClosed = await closeAll$1.call(this, modal.id, transition);
+  } else {
+    // If modal is closed, close all and open replacement at the same time.
+    resultOpened = open$1.call(this, modal, transition, false);
+    resultClosed = closeAll$1.call(this, false, transition);
+    await Promise.all([resultOpened, resultClosed]);
+  } // Update focus if the focus param is true.
 
-  initEventListeners() {
-    document.addEventListener('click', this.__handlerClick, false);
-    document.addEventListener('touchend', this.__handlerClick, false);
-    document.addEventListener('keydown', this.__handlerKeydown, false);
-  }
 
-  destroyEventListeners() {
-    document.removeEventListener('click', this.__handlerClick, false);
-    document.removeEventListener('touchend', this.__handlerClick, false);
-    document.removeEventListener('keydown', this.__handlerKeydown, false);
-  }
-  /**
-   * Helpers
-   */
+  if (focus) {
+    updateFocusState.call(this);
+  } // Return the modals there were opened and closed.
 
 
-  getModal(modalKey) {
-    return getModal.call(this, modalKey);
-  }
+  return {
+    opened: resultOpened,
+    closed: resultClosed
+  };
+}
 
-  setTabindex() {
-    return setTabindex(`
-      [data-${this.settings.dataModal}]
-      [data-${this.settings.dataDialog}]
-    `);
-  }
+async function register$1(el, dialog) {
+  // Deregister entry incase it has already been registered.
+  await deregister$1.call(this, el, false); // Save root this for use inside methods API.
 
-  setInitialState() {
-    return setInitialState.call(this);
-  }
+  const root = this; // Setup methods API.
 
-  moveModals(type, ref) {
-    return moveModals.call(this, type, ref);
-  }
-  /**
-   * Change state functionality
-   */
+  const methods = {
+    open(transition, focus) {
+      return open$1.call(root, this, transition, focus);
+    },
 
+    close(transition, focus) {
+      return close$1.call(root, this, transition, focus);
+    },
 
-  open(modalKey) {
-    return open$1.call(this, modalKey);
-  }
+    replace(transition, focus) {
+      return replace.call(root, this, transition, focus);
+    },
 
-  close(returnFocus) {
-    return close$1.call(this, returnFocus);
-  }
+    deregister() {
+      return deregister$1.call(root, this);
+    },
 
-}
+    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;
+      }
+    },
 
-class Collection {
-  constructor() {
-    this.collection = [];
-  }
+    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;
+      }
+    },
 
-  register(item) {
-    this.deregister(item);
-    this.collection.push(item);
-    return this.collection;
-  }
+    getSetting(key) {
+      return key in this.settings ? this.settings[key] : root.settings[key];
+    }
 
-  deregister(ref) {
-    const index = this.collection.findIndex(entry => {
-      return entry === ref;
-    });
+  }; // Setup the modal object.
 
-    if (index >= 0) {
-      const entry = this.collection[index];
-      Object.getOwnPropertyNames(entry).forEach(prop => {
-        delete entry[prop];
-      });
-      this.collection.splice(index, 1);
-    }
+  const entry = _extends({
+    id: el.id,
+    state: 'closed',
+    el: el,
+    dialog: dialog,
+    returnRef: null,
+    settings: getConfig$1(el, this.settings.dataConfig)
+  }, methods); // Set aria-modal attribute to true.
 
-    return this.collection;
-  }
 
-  registerCollection(items) {
-    items.forEach(item => {
-      this.register(item);
-    });
-    return this.collection;
-  }
+  entry.dialog.setAttribute('aria-modal', 'true'); // If a role attribute is not set, set it to "dialog" as the default.
 
-  deregisterCollection() {
-    while (this.collection.length > 0) {
-      this.deregister(this.collection[0]);
-    }
+  if (!entry.dialog.hasAttribute('role')) {
+    entry.dialog.setAttribute('role', 'dialog');
+  } // Set tabindex="-1" so dialog is focusable via JS or click.
 
-    return this.collection;
-  }
 
-  get(query, key = 'id') {
-    const result = this.collection.find(item => {
-      return item[key] === query;
-    });
-    return result || null;
-  }
+  if (entry.getSetting('setTabindex')) {
+    entry.dialog.setAttribute('tabindex', '-1');
+  } // Teleport modal if a reference has been set.
+
+
+  if (entry.getSetting('teleport')) {
+    entry.teleport();
+  } // Add entry to collection.
 
+
+  this.collection.push(entry); // Setup initial state.
+
+  if (entry.el.classList.contains(this.settings.stateOpened)) {
+    // Open entry with transitions disabled.
+    await entry.open(false);
+  } else {
+    // Remove transition state classes.
+    entry.el.classList.remove(this.settings.stateOpening);
+    entry.el.classList.remove(this.settings.stateClosing); // Add closed state class.
+
+    entry.el.classList.add(this.settings.stateClosed);
+  } // Return the registered entry.
+
+
+  return entry;
 }
 
-var defaults = {
-  autoInit: false,
-  // Selectors
-  selectorPopover: '.popover',
-  selectorArrow: '.popover__arrow',
-  // State classes
-  stateActive: 'is-active',
-  // Feature toggles
-  eventListeners: true,
-  eventType: 'click',
-  placement: 'bottom'
-};
+var _handleClick = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
+
+var _handleKeydown$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
+
+class Modal extends Collection {
+  constructor(options) {
+    super();
+    Object.defineProperty(this, _handleClick, {
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(this, _handleKeydown$1, {
+      writable: true,
+      value: void 0
+    });
+    this.defaults = defaults$1;
+    this.settings = _extends({}, this.defaults, options);
+    this.trigger = null;
+    this.focusTrap = new FocusTrap(); // Setup a proxy for stack array.
 
-function close(popover) {
-  // Update state class
-  popover.target.classList.remove(this.settings.stateActive); // Update a11y attributes
+    this.stack = new Proxy([], {
+      set: (target, property, value) => {
+        target[property] = value; // Update global state if stack length changed.
 
-  if (popover.trigger.hasAttribute('aria-controls')) {
-    popover.trigger.setAttribute('aria-expanded', 'false');
-  } // Disable popper event listeners
+        if (property === 'length') {
+          updateGlobalState(this.active, this.settings);
+          updateStackIndex(this.stack);
+        }
 
+        return true;
+      }
+    });
+    _classPrivateFieldLooseBase(this, _handleClick)[_handleClick] = handleClick$1.bind(this);
+    _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1] = handleKeydown$1.bind(this);
+    if (this.settings.autoInit) this.init();
+  }
 
-  popover.popper.setOptions({
-    modifiers: [{
-      name: 'eventListeners',
-      enabled: false
-    }]
-  }); // Update popover state
+  get active() {
+    return this.stack[this.stack.length - 1];
+  }
 
-  popover.state = 'closed'; // Clear memory if popover trigger matches the one saved in memory
+  async init(options) {
+    // Update settings with passed options.
+    if (options) this.settings = _extends({}, this.settings, options); // Get all the modals.
 
-  if (popover.trigger === this.memory.trigger) {
-    this.memory.trigger = null;
-  } // Return the popover
+    const modals = document.querySelectorAll(this.settings.selectorModal); // Register the collections array with modal instances.
 
+    await this.registerCollection(modals); // If eventListeners are enabled, init event listeners.
 
-  return popover;
-}
-function closeAll() {
-  this.collection.forEach(popover => {
-    if (popover.state === 'opened') {
-      popover.close();
+    if (this.settings.eventListeners) {
+      this.initEventListeners();
     }
-  }); // Return the collection
 
-  return this.collection;
-}
-function closeCheck(popover) {
-  // Only run closeCheck if provided popover is currently open
-  if (popover.state != 'opened') return; // Needed to correctly check which element is currently being focused
+    return this;
+  }
 
-  setTimeout(() => {
-    // Check if trigger or target are being hovered
-    const isHovered = popover.target.closest(':hover') === popover.target || popover.trigger.closest(':hover') === popover.trigger; // Check if trigger or target are being focused
+  async destroy() {
+    // Clear stored trigger.
+    this.trigger = null; // Remove all entries from the collection.
 
-    const isFocused = document.activeElement.closest(`#${popover.id}, [aria-controls="${popover.id}"]`); // Close if the trigger and target are not currently hovered or focused
+    await this.deregisterCollection(); // If eventListeners are enabled, destroy event listeners.
 
-    if (!isHovered && !isFocused) {
-      popover.close();
-    } // Return the popover
+    if (this.settings.eventListeners) {
+      this.destroyEventListeners();
+    }
 
+    return this;
+  }
 
-    return popover;
-  }, 1);
-}
+  initEventListeners() {
+    document.addEventListener('click', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
+    document.addEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
+    document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
+  }
 
-function handlerClick(popover) {
-  if (popover.target.classList.contains(this.settings.stateActive)) {
-    popover.close();
-  } else {
-    this.memory.trigger = popover.trigger;
-    popover.open();
-    documentClick.call(this, popover);
+  destroyEventListeners() {
+    document.removeEventListener('click', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
+    document.removeEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
+    document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
   }
-}
-function handlerKeydown(event) {
-  switch (event.key) {
-    case 'Escape':
-      if (this.memory.trigger) {
-        this.memory.trigger.focus();
-      }
 
-      closeAll.call(this);
-      return;
+  register(query) {
+    const els = getModalElements.call(this, query);
+    if (els.error) return Promise.reject(els.error);
+    return register$1.call(this, els.modal, els.dialog);
+  }
 
-    case 'Tab':
-      this.collection.forEach(popover => {
-        closeCheck.call(this, popover);
-      });
-      return;
+  deregister(query) {
+    const modal = this.get(getModalID.call(this, query));
+    return deregister$1.call(this, modal);
+  }
 
-    default:
-      return;
+  open(id, transition, focus) {
+    return open$1.call(this, id, transition, focus);
   }
-}
-function documentClick(popover) {
-  const root = this;
-  document.addEventListener('click', function _f(event) {
-    // Check if a popover was clicked
-    const result = event.target.closest(`#${popover.id}, [aria-controls="${popover.id}"]`);
 
-    if (!result) {
-      // If it doesn't match and popover is open, close it and remove event listener
-      if (popover.target && popover.target.classList.contains(root.settings.stateActive)) {
-        popover.close();
-      }
+  close(id, transition, focus) {
+    return close$1.call(this, id, transition, focus);
+  }
 
-      this.removeEventListener('click', _f);
-    } else {
-      // If it does match and popover isn't currently active, remove event listener
-      if (popover.target && !popover.target.classList.contains(root.settings.stateActive)) {
-        this.removeEventListener('click', _f);
-      }
+  replace(id, transition, focus) {
+    return replace.call(this, id, transition, focus);
+  }
+
+  async closeAll(exclude = false, transition, focus = true) {
+    const result = await closeAll$1.call(this, exclude, transition); // Update focus if the focus param is true.
+
+    if (focus) {
+      updateFocusState.call(this);
     }
-  });
+
+    return result;
+  }
+
 }
 
+var defaults = {
+  autoInit: false,
+  // Selectors
+  selectorPopover: '.popover',
+  selectorArrow: '.popover__arrow',
+  // State classes
+  stateActive: 'is-active',
+  // Feature settings
+  eventListeners: true,
+  eventType: 'click',
+  placement: 'bottom'
+};
+
 function getConfig(el, settings) {
-  // Get the computed styles of the popover
-  const styles = getComputedStyle(el); // Setup the config obj with default values
+  // Get the computed styles of the element.
+  const styles = getComputedStyle(el); // Setup the config obj with default values.
 
   const config = {
     'placement': settings.placement,
@@ -1304,29 +1693,30 @@ function getConfig(el, settings) {
     'flip-padding': 0,
     'arrow-element': settings.selectorArrow,
     'arrow-padding': 0
-  }; // Loop through config obj
+  }; // Loop through config obj.
 
   for (const prop in config) {
-    // Get the CSS variable property values
-    const prefix = getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
-    const value = styles.getPropertyValue(`--${prefix}popover-${prop}`).trim(); // If a value was found, replace the default in config obj
+    // Get the CSS variable property values.
+    const prefix = L();
+    const value = styles.getPropertyValue(`--${prefix}popover-${prop}`).trim(); // If a value was found, replace the default in config obj.
 
     if (value) {
       config[prop] = value;
     }
-  } // Return the config obj
+  } // Return the config obj.
 
 
   return config;
 }
+
 function getPadding(value) {
-  let padding; // Split the value by spaces if it's a string
+  let padding; // Split the value by spaces if it's a string.
 
-  const array = typeof value === 'string' ? value.trim().split(' ') : [value]; // Convert individual values to integers
+  const array = typeof value === 'string' ? value.trim().split(' ') : [value]; // Convert individual values to integers.
 
   array.forEach(function (item, index) {
     array[index] = parseInt(item, 10);
-  }); // Build the padding object based on the number of values passed
+  }); // Build the padding object based on the number of values passed.
 
   switch (array.length) {
     case 1:
@@ -1363,11 +1753,12 @@ function getPadding(value) {
     default:
       padding = false;
       break;
-  } // Return the padding object
+  } // Return the padding object.
 
 
   return padding;
 }
+
 function getModifiers(options) {
   return [{
     name: 'offset',
@@ -1392,57 +1783,183 @@ function getModifiers(options) {
     }
   }];
 }
+
+function getPopover(query) {
+  // Get the entry from collection.
+  const entry = typeof query === 'string' ? this.get(query) : this.get(query.id); // Return entry if it was resolved, otherwise throw error.
+
+  if (entry) {
+    return entry;
+  } else {
+    throw new Error(`Popover not found in collection with id of "${query}".`);
+  }
+}
+
 function getPopoverID(obj) {
-  // If it's a string
+  // If it's a string, return the string.
   if (typeof obj === 'string') {
     return obj;
-  } // If it's an HTML element
+  } // If it's an HTML element.
   else if (typeof obj.hasAttribute === 'function') {
-    // If it's a popover trigger
-    if (obj.hasAttribute('aria-controls')) {
+    // If it's a popover element, return the id.
+    if (obj.closest(this.settings.selectorPopover)) {
+      obj = obj.closest(this.settings.selectorPopover);
+      return obj.id;
+    } // If it's a popover trigger, return value of aria-controls.
+    else if (obj.hasAttribute('aria-controls')) {
       return obj.getAttribute('aria-controls');
-    } // If it's a popover tooltip trigger
+    } // If it's a popover tooltip trigger, return the value of aria-describedby.
     else if (obj.hasAttribute('aria-describedby')) {
       return obj.getAttribute('aria-describedby');
-    } // If it's a popover target
-    else if (obj.closest(this.settings.selectorPopover)) {
-      return obj.id;
-    } // Return false if no id was found
+    } // Return false if no id was found.
     else return false;
-  } // If it has an ID property
+  } // If it has an id property, return its value.
   else if (obj.id) {
     return obj.id;
-  } // Return false if no id was found
+  } // Return false if no id was found.
   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}"]`);
-    const target = document.querySelector(`#${id}`);
 
-    if (!trigger && !target) {
-      console.error('No popover elements found using the provided ID:', id);
+    if (!trigger && !popover) {
+      return {
+        error: new Error(`No popover elements found using the ID: "${id}".`)
+      };
     } else if (!trigger) {
-      console.error('No popover trigger associated with the provided popover:', target);
-    } else if (!target) {
-      console.error('No popover associated with the provided popover trigger:', trigger);
-    }
-
-    if (!trigger || !target) {
-      return false;
+      return {
+        error: new Error('No popover trigger associated with the provided popover.')
+      };
+    } else if (!popover) {
+      return {
+        error: new Error('No popover associated with the provided popover trigger.')
+      };
     } else {
       return {
-        trigger,
-        target
+        popover,
+        trigger
       };
     }
   } else {
-    console.error('Could not resolve the popover ID:', query);
-    return false;
+    return {
+      error: new Error('Could not resolve the popover ID.')
+    };
+  }
+}
+
+async function close(query) {
+  // Get the popover from collection.
+  const popover = query ? getPopover.call(this, query) : await closeAll.call(this); // If a modal exists and its state is opened.
+
+  if (popover && popover.state === 'opened') {
+    // Update state class.
+    popover.el.classList.remove(this.settings.stateActive); // Update accessibility attribute(s).
+
+    if (popover.trigger.hasAttribute('aria-controls')) {
+      popover.trigger.setAttribute('aria-expanded', 'false');
+    } // Disable popper event listeners.
+
+
+    popover.popper.setOptions({
+      modifiers: [{
+        name: 'eventListeners',
+        enabled: false
+      }]
+    }); // Update popover state.
+
+    popover.state = 'closed'; // Clear root trigger if popover trigger matches.
+
+    if (popover.trigger === this.trigger) {
+      this.trigger = null;
+    }
+  } // Return the popover.
+
+
+  return popover;
+}
+async function closeAll() {
+  const result = [];
+  await Promise.all(this.collection.map(async popover => {
+    if (popover.state === 'opened') {
+      result.push(await close.call(this, popover));
+    }
+  }));
+  return result;
+}
+function closeCheck(popover) {
+  // Only run closeCheck if provided popover is currently open.
+  if (popover.state != 'opened') return; // Needed to correctly check which element is currently being focused.
+
+  setTimeout(() => {
+    // Check if trigger or element are being hovered.
+    const isHovered = popover.el.closest(':hover') === popover.el || popover.trigger.closest(':hover') === popover.trigger; // Check if trigger or element are being focused.
+
+    const isFocused = document.activeElement.closest(`#${popover.id}, [aria-controls="${popover.id}"]`); // Close if the trigger and element are not currently hovered or focused.
+
+    if (!isHovered && !isFocused) {
+      popover.close();
+    } // Return the popover.
+
+
+    return popover;
+  }, 1);
+}
+
+function handleClick(popover) {
+  if (popover.state === 'opened') {
+    popover.close();
+  } else {
+    this.trigger = popover.trigger;
+    popover.open();
+    handleDocumentClick.call(this, popover);
+  }
+}
+function handleKeydown(event) {
+  switch (event.key) {
+    case 'Escape':
+      if (this.trigger) {
+        this.trigger.focus();
+      }
+
+      closeAll.call(this);
+      return;
+
+    case 'Tab':
+      this.collection.forEach(popover => {
+        closeCheck.call(this, popover);
+      });
+      return;
+
+    default:
+      return;
   }
 }
+function handleDocumentClick(popover) {
+  const root = this;
+  document.addEventListener('click', function _f(event) {
+    // Check if a popover was clicked.
+    const result = event.target.closest(`#${popover.id}, [aria-controls="${popover.id}"]`);
+
+    if (!result) {
+      // If it doesn't match and popover is open, close it and remove event listener.
+      if (popover.el && popover.el.classList.contains(root.settings.stateActive)) {
+        popover.close();
+      }
+
+      this.removeEventListener('click', _f);
+    } else {
+      // If it does match and popover isn't currently active, remove event listener.
+      if (popover.el && !popover.el.classList.contains(root.settings.stateActive)) {
+        this.removeEventListener('click', _f);
+      }
+    }
+  });
+}
 
 var top = 'top';
 var bottom = 'bottom';
@@ -1744,6 +2261,10 @@ function getContainingBlock(element) {
 
   var currentNode = getParentNode(element);
 
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
   while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
     var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that
     // create a containing block.
@@ -1967,7 +2488,7 @@ function mapToStyles(_ref2) {
 
     if (placement === top || (placement === left || placement === right) && variation === end) {
       sideY = bottom;
-      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
       offsetParent[heightProp];
       y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
@@ -1975,7 +2496,7 @@ function mapToStyles(_ref2) {
 
     if (placement === left || (placement === top || placement === bottom) && variation === end) {
       sideX = right;
-      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
       offsetParent[widthProp];
       x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
@@ -3227,16 +3748,69 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-function open(popover) {
-  // Update state class
-  popover.target.classList.add(this.settings.stateActive); // Update a11y attribute
+async function deregister(obj) {
+  // Return collection if nothing was passed.
+  if (!obj) return this.collection; // Check if entry has been registered in the collection.
+
+  const index = this.collection.findIndex(entry => {
+    return entry.id === obj.id;
+  });
+
+  if (index >= 0) {
+    // Get the collection entry.
+    const entry = this.collection[index]; // If entry is in the opened state, close it.
+
+    if (entry.state === 'opened') {
+      entry.close();
+    } // Clean up the popper instance.
+
+
+    entry.popper.destroy(); // Remove event listeners.
+
+    deregisterEventListeners(entry); // Delete properties from collection entry.
+
+    Object.getOwnPropertyNames(entry).forEach(prop => {
+      delete entry[prop];
+    }); // Remove entry from collection.
+
+    this.collection.splice(index, 1);
+  } // Return the modified collection.
+
+
+  return this.collection;
+}
+function deregisterEventListeners(entry) {
+  // If event listeners have been setup.
+  if (entry.__eventListeners) {
+    // Loop through listeners and remove from the appropriate elements.
+    entry.__eventListeners.forEach(evObj => {
+      evObj.el.forEach(el => {
+        evObj.type.forEach(type => {
+          entry[el].removeEventListener(type, evObj.listener, false);
+        });
+      });
+    }); // Remove eventListeners object from collection.
+
+
+    delete entry.__eventListeners;
+  } // Return the entry object.
+
+
+  return entry;
+}
+
+async function open(query) {
+  // Get the popover from collection.
+  const popover = getPopover.call(this, query); // Update state class.
+
+  popover.el.classList.add(this.settings.stateActive); // Update accessibility attribute(s).
 
   if (popover.trigger.hasAttribute('aria-controls')) {
     popover.trigger.setAttribute('aria-expanded', 'true');
-  } // Update popover config
+  } // Update popover config.
 
 
-  popover.config = getConfig(popover.target, this.settings); // Enable popper event listeners and set placement/modifiers
+  popover.config = getConfig(popover.el, this.settings); // Enable popper event listeners and set placement/modifiers.
 
   popover.popper.setOptions({
     placement: popover.config['placement'],
@@ -3244,257 +3818,200 @@ function open(popover) {
       name: 'eventListeners',
       enabled: true
     }, ...getModifiers(popover.config)]
-  }); // Update popover position
+  }); // Update popover position.
 
-  popover.popper.update(); // Update popover state
+  popover.popper.update(); // Update popover state.
 
-  popover.state = 'opened'; // Return the popover
+  popover.state = 'opened'; // Return the popover.
 
   return popover;
 }
 
-function register(trigger, target) {
-  // Deregister popover if it already exists in the collection
-  this.deregister(target.id); // Create popper instance
+async function register(el, trigger) {
+  // Deregister entry incase it has already been registered.
+  deregister.call(this, el); // Save root this for use inside methods API.
 
-  const popperInstance = createPopper(trigger, target); // Save root this for use inside object & create methods API
+  const root = this; // Setup methods API.
 
-  const root = this;
   const methods = {
     open() {
-      open.call(root, this);
+      return open.call(root, this);
     },
 
     close() {
-      close.call(root, this);
+      return close.call(root, this);
     },
 
     deregister() {
-      deregister.call(root, this);
+      return deregister.call(root, this);
     }
 
-  }; // Build popover object and push to collection array
+  }; // Setup the popover object.
 
-  const popover = _extends({
-    id: target.id,
+  const entry = _extends({
+    id: el.id,
     state: 'closed',
+    el: el,
     trigger: trigger,
-    target: target,
-    popper: popperInstance,
-    config: getConfig(target, this.settings)
-  }, methods); // Setup event listeners
-
-
-  registerEventListeners.call(this, popover); // Set initial state of popover
-
-  if (popover.target.classList.contains(this.settings.stateActive)) {
-    popover.open();
-    documentClick.call(this, popover);
-  } else {
-    popover.close();
-  } // Add item to collection
-
-
-  this.collection.push(popover); // Return the popover object
-
-  return popover;
-}
-function deregister(popover) {
-  // Check if this item has been registered in the collection
-  const index = this.collection.findIndex(entry => {
-    return entry.id === popover.id;
-  }); // If the entry exists in the collection
-
-  if (index >= 0) {
-    // Get the collection entry
-    const entry = this.collection[index]; // Close the collection entry if it's open
+    popper: createPopper(trigger, el),
+    config: getConfig(el, this.settings)
+  }, methods); // Set aria-expanded to false if trigger has aria-controls attribute.
 
-    if (entry.state === 'opened') {
-      entry.close();
-    } // Clean up the popper instance
 
+  if (entry.trigger.hasAttribute('aria-controls')) {
+    entry.trigger.setAttribute('aria-expanded', 'false');
+  } // Setup event listeners.
 
-    entry.popper.destroy(); // Remove event listeners
 
-    deregisterEventListeners(entry); // Delete properties from collection entry
+  registerEventListeners.call(this, entry); // Add entry to collection.
 
-    Object.getOwnPropertyNames(entry).forEach(prop => {
-      delete entry[prop];
-    }); // Remove entry from collection
+  this.collection.push(entry); // Set initial state.
 
-    this.collection.splice(index, 1);
-  } // Return the new collection
+  if (entry.el.classList.contains(this.settings.stateActive)) {
+    await entry.open();
+    handleDocumentClick.call(this, entry);
+  } // Return the registered entry.
 
 
-  return this.collection;
+  return entry;
 }
-function registerEventListeners(popover) {
-  // If event listeners aren't already setup
-  if (!popover.__eventListeners) {
-    // Add event listeners based on event type
-    const eventType = popover.config['event'];
+function registerEventListeners(entry) {
+  // If event listeners aren't already setup.
+  if (!entry.__eventListeners) {
+    // Add event listeners based on event type.
+    const eventType = entry.config['event']; // If the event type is hover.
 
     if (eventType === 'hover') {
-      // Setup event listeners object for hover
-      popover.__eventListeners = [{
+      // Setup event listeners object for hover.
+      entry.__eventListeners = [{
         el: ['trigger'],
         type: ['mouseenter', 'focus'],
-        listener: open.bind(this, popover)
+        listener: open.bind(this, entry)
       }, {
-        el: ['trigger', 'target'],
+        el: ['el', 'trigger'],
         type: ['mouseleave', 'focusout'],
-        listener: closeCheck.bind(this, popover)
-      }]; // Loop through listeners and apply to appropriate elements
+        listener: closeCheck.bind(this, entry)
+      }]; // Loop through listeners and apply to the appropriate elements.
 
-      popover.__eventListeners.forEach(evObj => {
+      entry.__eventListeners.forEach(evObj => {
         evObj.el.forEach(el => {
           evObj.type.forEach(type => {
-            popover[el].addEventListener(type, evObj.listener, false);
+            entry[el].addEventListener(type, evObj.listener, false);
           });
         });
       });
-    } else {
-      // Setup event listeners object for click
-      popover.__eventListeners = [{
+    } // Else the event type is click.
+    else {
+      // Setup event listeners object for click.
+      entry.__eventListeners = [{
         el: ['trigger'],
         type: ['click'],
-        listener: handlerClick.bind(this, popover)
-      }]; // Loop through listeners and apply to appropriate elements
+        listener: handleClick.bind(this, entry)
+      }]; // Loop through listeners and apply to the appropriate elements.
 
-      popover.__eventListeners.forEach(evObj => {
+      entry.__eventListeners.forEach(evObj => {
         evObj.el.forEach(el => {
           evObj.type.forEach(type => {
-            popover[el].addEventListener(type, evObj.listener, false);
+            entry[el].addEventListener(type, evObj.listener, false);
           });
         });
       });
     }
-  } // Return the popover object
+  } // Return the entry object.
 
 
-  return popover;
+  return entry;
 }
-function deregisterEventListeners(popover) {
-  // If event listeners have been setup
-  if (popover.__eventListeners) {
-    // Loop through listeners and remove from appropriate elements
-    popover.__eventListeners.forEach(evObj => {
-      evObj.el.forEach(el => {
-        evObj.type.forEach(type => {
-          popover[el].removeEventListener(type, evObj.listener, false);
-        });
-      });
-    }); // Remove eventListeners object from collection
-
-
-    delete popover.__eventListeners;
-  } // Return the popover object
-
 
-  return popover;
-}
+var _handleKeydown = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
 
 class Popover extends Collection {
   constructor(options) {
     super();
+    Object.defineProperty(this, _handleKeydown, {
+      writable: true,
+      value: void 0
+    });
     this.defaults = defaults;
-    this.settings = _extends({}, this.defaults, options); // this.collection = [];
-
-    this.memory = {
-      trigger: null
-    };
-    this.__handlerKeydown = handlerKeydown.bind(this);
+    this.settings = _extends({}, this.defaults, options);
+    this.trigger = null;
+    _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown] = handleKeydown.bind(this);
     if (this.settings.autoInit) this.init();
   }
 
-  init(options = null) {
-    // Update settings with passed options
-    if (options) this.settings = _extends({}, this.settings, options); // Get all the popovers
+  async init(options) {
+    // Update settings with passed options.
+    if (options) this.settings = _extends({}, this.settings, options); // Get all the popovers.
 
-    const popovers = document.querySelectorAll(this.settings.selectorPopover); // Build the collections array with popover instances
+    const popovers = document.querySelectorAll(this.settings.selectorPopover); // Register the collections array with popover instances.
 
-    this.registerCollection(popovers); // If eventListeners is enabled
+    await this.registerCollection(popovers); // If eventListeners are enabled, init event listeners.
 
     if (this.settings.eventListeners) {
       // Pass false to initEventListeners() since registerCollection()
-      // already adds event listeners to popovers
+      // already adds event listeners to popovers.
       this.initEventListeners(false);
     }
+
+    return this;
   }
 
-  destroy() {
-    // Deregister all popovers from collection
-    this.deregisterCollection(); // If eventListeners is enabled
+  async destroy() {
+    // Clear stored trigger.
+    this.trigger = null; // Remove all entries from the collection.
+
+    await this.deregisterCollection(); // If eventListeners are enabled, destroy event listeners.
 
     if (this.settings.eventListeners) {
       // Pass false to destroyEventListeners() since deregisterCollection()
-      // already removes event listeners from popovers
+      // already removes event listeners from popovers.
       this.destroyEventListeners(false);
     }
-  }
-  /**
-   * Event listeners
-   */
 
+    return this;
+  }
 
   initEventListeners(processCollection = true) {
     if (processCollection) {
-      // Loop through collection and setup event listeners
+      // Loop through collection and setup event listeners.
       this.collection.forEach(popover => {
         registerEventListeners.call(this, popover);
       });
-    } // Add keydown global event listener
+    } // Add keydown global event listener.
 
 
-    document.addEventListener('keydown', this.__handlerKeydown, false);
+    document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
   }
 
   destroyEventListeners(processCollection = true) {
     if (processCollection) {
-      // Loop through collection and remove event listeners
+      // Loop through collection and remove event listeners.
       this.collection.forEach(popover => {
         deregisterEventListeners(popover);
       });
-    } // Remove keydown global event listener
+    } // Remove keydown global event listener.
 
 
-    document.removeEventListener('keydown', this.__handlerKeydown, false);
+    document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
   }
-  /**
-   * Register popover functionality
-   */
-
 
   register(query) {
     const els = getPopoverElements.call(this, query);
-    if (!els) return false;
-    return register.call(this, els.trigger, els.target);
+    if (els.error) return Promise.reject(els.error);
+    return register.call(this, els.popover, els.trigger);
   }
 
   deregister(query) {
-    const popover = this.get(getPopoverID(query));
-    if (!popover) return false;
+    const popover = this.get(getPopoverID.call(this, query));
     return deregister.call(this, popover);
   }
-  /**
-   * Change state functionality
-   */
-
 
   open(id) {
-    const popover = this.get(id);
-    if (!popover) return false;
-    return popover.open();
+    return open.call(this, id);
   }
 
   close(id) {
-    if (id) {
-      const popover = this.get(id);
-      if (!popover) return false;
-      return popover.close();
-    } else {
-      return closeAll.call(this);
-    }
+    return close.call(this, id);
   }
 
 }