vrembem 1.42.1 → 3.0.1

package/dev/scripts.umd.js

@@ -3,21 +3,717 @@
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
   (global = global || self, factory(global.vrembem = {}));
 }(this, (function (exports) {
-  var setInert = function setInert(state, selector) {
-    if (selector) {
-      var els = document.querySelectorAll(selector);
-      els.forEach(function (el) {
-        if (state) {
-          el.inert = true;
-          el.setAttribute('aria-hidden', true);
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
+    return Constructor;
+  }
+
+  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);
+  }
+
+  function _inheritsLoose(subClass, superClass) {
+    subClass.prototype = Object.create(superClass.prototype);
+    subClass.prototype.constructor = subClass;
+
+    _setPrototypeOf(subClass, superClass);
+  }
+
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return self;
+  }
+
+  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");
+
+  var Breakpoint = /*#__PURE__*/function () {
+    function Breakpoint(value, handler) {
+      Object.defineProperty(this, _handler, {
+        writable: true,
+        value: void 0
+      });
+      this.value = value;
+      _classPrivateFieldLooseBase(this, _handler)[_handler] = handler;
+      this.mql = null;
+    }
+
+    var _proto = Breakpoint.prototype;
+
+    _proto.mount = function mount(value, handler) {
+      // Update passed params.
+      if (value) this.value = value;
+      if (handler) _classPrivateFieldLooseBase(this, _handler)[_handler] = handler; // Guard if no breakpoint was set.
+
+      if (!this.value) return this; // Setup and store the MediaQueryList instance.
+
+      this.mql = window.matchMedia("(min-width: " + this.value + ")"); // Conditionally use addListener() for IE11 support.
+
+      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.
+
+
+      _classPrivateFieldLooseBase(this, _handler)[_handler](this.mql);
+
+      return this;
+    };
+
+    _proto.unmount = function 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;
+    };
+
+    _createClass(Breakpoint, [{
+      key: "handler",
+      get: function get() {
+        return _classPrivateFieldLooseBase(this, _handler)[_handler];
+      } // Unmount existing handler before setting a new one.
+      ,
+      set: function set(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 {
+            this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
+          }
+        }
+
+        _classPrivateFieldLooseBase(this, _handler)[_handler] = func;
+      }
+    }]);
+
+    return Breakpoint;
+  }();
+
+  function _settle(pact, state, value) {
+    if (!pact.s) {
+      if (value instanceof _Pact) {
+        if (value.s) {
+          if (state & 1) {
+            state = value.s;
+          }
+
+          value = value.v;
         } else {
-          el.inert = null;
-          el.removeAttribute('aria-hidden');
+          value.o = _settle.bind(null, pact, state);
+          return;
         }
+      }
+
+      if (value && value.then) {
+        value.then(_settle.bind(null, pact, state), _settle.bind(null, pact, 2));
+        return;
+      }
+
+      pact.s = state;
+      pact.v = value;
+      var observer = pact.o;
+
+      if (observer) {
+        observer(pact);
+      }
+    }
+  }
+
+  var _Pact = /*#__PURE__*/function () {
+    function _Pact() {}
+
+    _Pact.prototype.then = function (onFulfilled, onRejected) {
+      var result = new _Pact();
+      var state = this.s;
+
+      if (state) {
+        var callback = state & 1 ? onFulfilled : onRejected;
+
+        if (callback) {
+          try {
+            _settle(result, 1, callback(this.v));
+          } catch (e) {
+            _settle(result, 2, e);
+          }
+
+          return result;
+        } else {
+          return this;
+        }
+      }
+
+      this.o = function (_this) {
+        try {
+          var value = _this.v;
+
+          if (_this.s & 1) {
+            _settle(result, 1, onFulfilled ? onFulfilled(value) : value);
+          } else if (onRejected) {
+            _settle(result, 1, onRejected(value));
+          } else {
+            _settle(result, 2, value);
+          }
+        } catch (e) {
+          _settle(result, 2, e);
+        }
+      };
+
+      return result;
+    };
+
+    return _Pact;
+  }();
+
+  function _isSettledPact(thenable) {
+    return thenable instanceof _Pact && thenable.s & 1;
+  }
+
+  function _for(test, update, body) {
+    var stage;
+
+    for (;;) {
+      var shouldContinue = test();
+
+      if (_isSettledPact(shouldContinue)) {
+        shouldContinue = shouldContinue.v;
+      }
+
+      if (!shouldContinue) {
+        return result;
+      }
+
+      if (shouldContinue.then) {
+        stage = 0;
+        break;
+      }
+
+      var result = body();
+
+      if (result && result.then) {
+        if (_isSettledPact(result)) {
+          result = result.s;
+        } else {
+          stage = 1;
+          break;
+        }
+      }
+
+      if (update) {
+        var updateValue = update();
+
+        if (updateValue && updateValue.then && !_isSettledPact(updateValue)) {
+          stage = 2;
+          break;
+        }
+      }
+    }
+
+    var pact = new _Pact();
+
+    var reject = _settle.bind(null, pact, 2);
+
+    (stage === 0 ? shouldContinue.then(_resumeAfterTest) : stage === 1 ? result.then(_resumeAfterBody) : updateValue.then(_resumeAfterUpdate)).then(void 0, reject);
+    return pact;
+
+    function _resumeAfterBody(value) {
+      result = value;
+
+      do {
+        if (update) {
+          updateValue = update();
+
+          if (updateValue && updateValue.then && !_isSettledPact(updateValue)) {
+            updateValue.then(_resumeAfterUpdate).then(void 0, reject);
+            return;
+          }
+        }
+
+        shouldContinue = test();
+
+        if (!shouldContinue || _isSettledPact(shouldContinue) && !shouldContinue.v) {
+          _settle(pact, 1, result);
+
+          return;
+        }
+
+        if (shouldContinue.then) {
+          shouldContinue.then(_resumeAfterTest).then(void 0, reject);
+          return;
+        }
+
+        result = body();
+
+        if (_isSettledPact(result)) {
+          result = result.v;
+        }
+      } while (!result || !result.then);
+
+      result.then(_resumeAfterBody).then(void 0, reject);
+    }
+
+    function _resumeAfterTest(shouldContinue) {
+      if (shouldContinue) {
+        result = body();
+
+        if (result && result.then) {
+          result.then(_resumeAfterBody).then(void 0, reject);
+        } else {
+          _resumeAfterBody(result);
+        }
+      } else {
+        _settle(pact, 1, result);
+      }
+    }
+
+    function _resumeAfterUpdate() {
+      if (shouldContinue = test()) {
+        if (shouldContinue.then) {
+          shouldContinue.then(_resumeAfterTest).then(void 0, reject);
+        } else {
+          _resumeAfterTest(shouldContinue);
+        }
+      } else {
+        _settle(pact, 1, result);
+      }
+    }
+  }
+
+  var Collection = /*#__PURE__*/function () {
+    function Collection() {
+      this.collection = [];
+    }
+
+    var _proto = Collection.prototype;
+
+    _proto.register = function register(item) {
+      try {
+        var _this2 = this;
+
+        return Promise.resolve(_this2.deregister(item)).then(function () {
+          _this2.collection.push(item);
+
+          return _this2.collection;
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    _proto.deregister = function deregister(ref) {
+      try {
+        var _this4 = this;
+
+        var index = _this4.collection.findIndex(function (entry) {
+          return entry === ref;
+        });
+
+        if (index >= 0) {
+          var entry = _this4.collection[index];
+          Object.getOwnPropertyNames(entry).forEach(function (prop) {
+            delete entry[prop];
+          });
+
+          _this4.collection.splice(index, 1);
+        }
+
+        return Promise.resolve(_this4.collection);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    _proto.registerCollection = function registerCollection(items) {
+      try {
+        var _this6 = this;
+
+        return Promise.resolve(Promise.all(Array.from(items, function (item) {
+          _this6.register(item);
+        }))).then(function () {
+          return _this6.collection;
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    _proto.deregisterCollection = function deregisterCollection() {
+      try {
+        var _temp3 = function _temp3() {
+          return _this8.collection;
+        };
+
+        var _this8 = this;
+
+        var _temp4 = _for(function () {
+          return _this8.collection.length > 0;
+        }, void 0, function () {
+          return Promise.resolve(_this8.deregister(_this8.collection[0])).then(function () {});
+        });
+
+        return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+
+    _proto.get = function get(value, key) {
+      if (key === void 0) {
+        key = 'id';
+      }
+
+      return this.collection.find(function (item) {
+        return item[key] === value;
       });
+    };
+
+    return Collection;
+  }();
+
+  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");
+
+  var FocusTrap = /*#__PURE__*/function () {
+    function FocusTrap(el, selectorFocus) {
+      if (el === void 0) {
+        el = null;
+      }
+
+      if (selectorFocus === void 0) {
+        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);
     }
+
+    var _proto = FocusTrap.prototype;
+
+    _proto.mount = function 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();
+    };
+
+    _proto.unmount = function 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]);
+    };
+
+    _proto.focus = function focus(el, selectorFocus) {
+      if (el === void 0) {
+        el = this.el;
+      }
+
+      if (selectorFocus === void 0) {
+        selectorFocus = this.selectorFocus;
+      }
+
+      // Query for the focus selector, otherwise return this element.
+      var result = el.querySelector(selectorFocus) || el; // Give the returned element focus.
+
+      result.focus();
+    };
+
+    _proto.getFocusable = function getFocusable(el) {
+      if (el === void 0) {
+        el = this.el;
+      }
+
+      // Initialize the focusable array.
+      var focusable = []; // Store the initial focus and scroll position.
+
+      var initFocus = document.activeElement;
+      var initScrollTop = el.scrollTop; // Query for all the focusable elements.
+
+      var els = el.querySelectorAll(focusableSelectors.join(',')); // Loop through all focusable elements.
+
+      els.forEach(function (el) {
+        // Set them to focus and check 
+        el.focus(); // Test that the element took focus.
+
+        if (document.activeElement === el) {
+          // Add element to the focusable array.
+          focusable.push(el);
+        }
+      }); // Restore the initial scroll position and focus.
+
+      el.scrollTop = initScrollTop;
+      initFocus.focus(); // Return the focusable array.
+
+      return focusable;
+    };
+
+    _createClass(FocusTrap, [{
+      key: "focusable",
+      get: function get() {
+        return _classPrivateFieldLooseBase(this, _focusable)[_focusable];
+      },
+      set: function set(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 {
+          document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
+          document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
+        }
+      }
+    }, {
+      key: "focusableFirst",
+      get: function get() {
+        return this.focusable[0];
+      }
+    }, {
+      key: "focusableLast",
+      get: function get() {
+        return this.focusable[this.focusable.length - 1];
+      }
+    }]);
+
+    return FocusTrap;
+  }();
+
+  function handleFocusTrap(event) {
+    // Check if the click was a tab and return if not.
+    var isTab = event.key === 'Tab' || event.keyCode === 9;
+    if (!isTab) return; // If the shift key is pressed.
+
+    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();
+      }
+    }
+  }
+
+  function handleFocusLock(event) {
+    // Ignore the tab key by preventing default.
+    var isTab = event.key === 'Tab' || event.keyCode === 9;
+    if (isTab) event.preventDefault();
+  }
+
+  function getConfig$1(el, dataConfig) {
+    var string = el.getAttribute("data-" + dataConfig) || '';
+    var json = string.replace(/'/g, '"');
+    return json ? JSON.parse(json) : {};
+  }
+
+  function getPrefix() {
+    return getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix').trim();
+  }
+
+  function localStore(key, enable) {
+    if (enable === void 0) {
+      enable = true;
+    }
+
+    function getStore() {
+      var value = localStorage.getItem(key);
+      return value ? JSON.parse(value) : {};
+    }
+
+    function setStore(obj) {
+      localStorage.setItem(key, JSON.stringify(obj));
+    }
+
+    return new Proxy(getStore(), {
+      set: function set(target, property, value) {
+        target[property] = value;
+        if (enable) setStore(target);
+        return true;
+      },
+      deleteProperty: function deleteProperty(target, property) {
+        delete target[property];
+        if (enable) setStore(target);
+        return true;
+      }
+    });
+  }
+
+  /**
+   * 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.
+   */
+  function teleport(what, where, how) {
+    // Check if ref is either a comment or element node.
+    var isComment = where.nodeType === Node.COMMENT_NODE;
+    var 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.
+
+    var 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;
+  }
+
+  var openTransition = function openTransition(el, settings) {
+    return new Promise(function (resolve) {
+      if (settings.transition) {
+        el.classList.remove(settings.stateClosed);
+        el.classList.add(settings.stateOpening);
+        el.addEventListener('transitionend', function _f() {
+          el.classList.add(settings.stateOpened);
+          el.classList.remove(settings.stateOpening);
+          resolve(el);
+          this.removeEventListener('transitionend', _f);
+        });
+      } else {
+        el.classList.add(settings.stateOpened);
+        el.classList.remove(settings.stateClosed);
+        resolve(el);
+      }
+    });
   };
-  var setOverflowHidden = function setOverflowHidden(state, selector) {
+  var closeTransition = function closeTransition(el, settings) {
+    return new Promise(function (resolve) {
+      if (settings.transition) {
+        el.classList.add(settings.stateClosing);
+        el.classList.remove(settings.stateOpened);
+        el.addEventListener('transitionend', function _f() {
+          el.classList.remove(settings.stateClosing);
+          el.classList.add(settings.stateClosed);
+          resolve(el);
+          this.removeEventListener('transitionend', _f);
+        });
+      } else {
+        el.classList.add(settings.stateClosed);
+        el.classList.remove(settings.stateOpened);
+        resolve(el);
+      }
+    });
+  };
+
+  function setOverflowHidden(state, selector) {
     if (selector) {
       var els = document.querySelectorAll(selector);
       els.forEach(function (el) {
@@ -28,1130 +724,1295 @@
         }
       });
     }
-  };
-  var setTabindex = function setTabindex(selector) {
+  }
+
+  function setInert(state, selector) {
     if (selector) {
       var els = document.querySelectorAll(selector);
       els.forEach(function (el) {
-        el.setAttribute('tabindex', '-1');
+        if (state) {
+          el.inert = true;
+          el.setAttribute('aria-hidden', true);
+        } else {
+          el.inert = null;
+          el.removeAttribute('aria-hidden');
+        }
       });
     }
+  }
+
+  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.
+
+    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',
+    stateValue: 'mixed'
+  };
+
+  var Checkbox = /*#__PURE__*/function () {
+    function Checkbox(options) {
+      this.defaults = defaults$3;
+      this.settings = _extends({}, this.defaults, options);
+      this.__handlerClick = this.handlerClick.bind(this);
+      if (this.settings.autoInit) this.init();
+    }
+
+    var _proto = Checkbox.prototype;
+
+    _proto.init = function init(options) {
+      if (options === void 0) {
+        options = null;
+      }
+
+      if (options) this.settings = _extends({}, this.settings, options);
+      var selector = "[" + this.settings.stateAttr + "=\"" + this.settings.stateValue + "\"]";
+      var mixed = document.querySelectorAll(selector);
+      this.setIndeterminate(mixed);
+      document.addEventListener('click', this.__handlerClick, false);
+    };
+
+    _proto.destroy = function destroy() {
+      document.removeEventListener('click', this.__handlerClick, false);
+    };
+
+    _proto.handlerClick = function handlerClick(event) {
+      var selector = "[" + this.settings.stateAttr + "=\"" + this.settings.stateValue + "\"]";
+      var el = event.target.closest(selector);
+      if (!el) return;
+      this.removeAriaState(el);
+      this.setIndeterminate(el);
+    };
+
+    _proto.setAriaState = function setAriaState(el, value) {
+      var _this = this;
+
+      if (value === void 0) {
+        value = this.settings.stateValue;
+      }
+
+      el = el.forEach ? el : [el];
+      el.forEach(function (el) {
+        el.setAttribute(_this.settings.stateAttr, value);
+      });
+    };
+
+    _proto.removeAriaState = function removeAriaState(el) {
+      var _this2 = this;
+
+      el = el.forEach ? el : [el];
+      el.forEach(function (el) {
+        el.removeAttribute(_this2.settings.stateAttr);
+      });
+    };
+
+    _proto.setIndeterminate = function setIndeterminate(el) {
+      var _this3 = this;
+
+      el = el.forEach ? el : [el];
+      el.forEach(function (el) {
+        if (el.hasAttribute(_this3.settings.stateAttr)) {
+          el.indeterminate = true;
+        } else {
+          el.indeterminate = false;
+        }
+      });
+    };
+
+    return Checkbox;
+  }();
+
+  var defaults$2 = {
+    autoInit: false,
+    // Data attributes
+    dataOpen: 'drawer-open',
+    dataClose: 'drawer-close',
+    dataToggle: 'drawer-toggle',
+    dataBreakpoint: 'drawer-breakpoint',
+    dataConfig: 'drawer-config',
+    // Selectors
+    selectorDrawer: '.drawer',
+    selectorDialog: '.drawer__dialog',
+    selectorFocus: '[data-focus]',
+    selectorInert: null,
+    selectorOverflow: 'body',
+    // State classes
+    stateOpened: 'is-opened',
+    stateOpening: 'is-opening',
+    stateClosing: 'is-closing',
+    stateClosed: 'is-closed',
+    // Classes
+    classModal: 'drawer_modal',
+    // Feature toggles
+    breakpoints: null,
+    customEventPrefix: 'drawer:',
+    eventListeners: true,
+    store: true,
+    storeKey: 'VB:DrawerState',
+    setTabindex: true,
+    transition: true
   };
 
-  /**
-   * 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.
-   */
-  var addClass = function addClass(el) {
-    var _arguments = arguments;
-    el = el.forEach ? el : [el];
-    el.forEach(function (el) {
-      var _el$classList;
+  function handleClick$2(event) {
+    var _this = this;
+
+    // If an open, close or toggle button was clicked, handle the click event.
+    var trigger = event.target.closest("\n    [data-" + this.settings.dataOpen + "],\n    [data-" + this.settings.dataToggle + "],\n    [data-" + this.settings.dataClose + "]\n  ");
+
+    if (trigger) {
+      // Prevent the default behavior of the trigger.
+      event.preventDefault(); // If it's a toggle trigger...
+
+      if (trigger.matches("[data-" + this.settings.dataToggle + "]")) {
+        var selectors = trigger.getAttribute("data-" + this.settings.dataToggle).trim().split(' ');
+        selectors.forEach(function (selector) {
+          // Get the entry from collection using the attribute value.
+          var entry = _this.get(selector); // Store the trigger on the entry.
+
+
+          entry.trigger = trigger; // Toggle the drawer
+
+          entry.toggle();
+        });
+      } // If it's a open trigger...
+
 
-      (_el$classList = el.classList).add.apply(_el$classList, [].slice.call(_arguments, 1));
-    });
-  };
+      if (trigger.matches("[data-" + this.settings.dataOpen + "]")) {
+        var _selectors = trigger.getAttribute("data-" + this.settings.dataOpen).trim().split(' ');
 
-  /**
-   * 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.
-   */
-  var camelCase = function camelCase(str) {
-    return str.replace(/-([a-z])/g, function (g) {
-      return g[1].toUpperCase();
-    });
-  };
+        _selectors.forEach(function (selector) {
+          // Get the entry from collection using the attribute value.
+          var entry = _this.get(selector); // Store the trigger on the entry.
 
-  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 focusTarget = function focusTarget(target, settings) {
-    var innerFocus = target.querySelector("[data-" + settings.dataFocus + "]");
+          entry.trigger = trigger; // Open the drawer.
 
-    if (innerFocus) {
-      innerFocus.focus();
-    } else {
-      var innerElement = target.querySelector('[tabindex="-1"]');
-      if (innerElement) innerElement.focus();
+          entry.open();
+        });
+      } // If it's a close trigger...
+
+
+      if (trigger.matches("[data-" + this.settings.dataClose + "]")) {
+        var _selectors2 = trigger.getAttribute("data-" + this.settings.dataClose).trim().split(' ');
+
+        _selectors2.forEach(function (selector) {
+          if (selector) {
+            // Get the entry from collection using the attribute value.
+            var 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.
+            var parent = event.target.closest(_this.settings.selectorDrawer); // If a parent drawer was found, close it.
+
+            if (parent) _this.close(parent);
+          }
+        });
+      }
+
+      return;
+    } // If the modal drawer screen was clicked...
+
+
+    if (event.target.matches(this.settings.selectorDrawer)) {
+      // Close the modal drawer.
+      this.close(event.target.id);
     }
-  };
-  var focusTrigger = function focusTrigger(obj) {
-    if (obj === void 0) {
-      obj = null;
+  }
+  function handleKeydown$2(event) {
+    if (event.key === 'Escape') {
+      var modal = this.activeModal;
+      if (modal) this.close(modal);
     }
+  }
 
-    if (!obj || !obj.memory || !obj.memory.trigger) return;
-    obj.memory.trigger.focus();
-    obj.memory.trigger = null;
-  };
-  var FocusTrap = /*#__PURE__*/function () {
-    function FocusTrap() {
-      this.target = null;
-      this.__handlerFocusTrap = this.handlerFocusTrap.bind(this);
+  var deregister$2 = function deregister(obj, close) {
+    if (close === void 0) {
+      close = true;
     }
 
-    var _proto = FocusTrap.prototype;
+    try {
+      var _temp5 = function _temp5() {
+        // Return the modified collection.
+        return _this2.collection;
+      };
 
-    _proto.init = function init(target) {
-      this.target = target;
-      this.inner = this.target.querySelector('[tabindex="-1"]');
-      this.focusable = this.getFocusable();
+      var _this2 = this;
 
-      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);
-      }
-    };
+      // Return collection if nothing was passed.
+      if (!obj) return Promise.resolve(_this2.collection); // Check if entry has been registered in the collection.
 
-    _proto.destroy = function 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;
-    };
-
-    _proto.refresh = function 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);
-      }
-    };
+      var index = _this2.collection.findIndex(function (entry) {
+        return entry.id === obj.id;
+      });
 
-    _proto.handlerFocusTrap = function handlerFocusTrap(event) {
-      var isTab = event.key === 'Tab' || event.keyCode === 9;
-      if (!isTab) return;
+      var _temp6 = function () {
+        if (index >= 0) {
+          var _temp7 = function _temp7() {
+            // Remove entry from local store.
+            delete _this2.store[_entry.id]; // Unmount the MatchMedia functionality.
 
-      if (event.shiftKey) {
-        if (document.activeElement === this.focusableFirst || document.activeElement === this.inner) {
-          this.focusableLast.focus();
-          event.preventDefault();
-        }
-      } else {
-        if (document.activeElement === this.focusableLast || document.activeElement === this.inner) {
-          this.focusableFirst.focus();
-          event.preventDefault();
-        }
-      }
-    };
+            _entry.unmountBreakpoint(); // Delete properties from collection entry.
 
-    _proto.handlerFocusLock = function handlerFocusLock(event) {
-      var isTab = event.key === 'Tab' || event.keyCode === 9;
-      if (isTab) event.preventDefault();
-    };
 
-    _proto.getFocusable = function getFocusable() {
-      var focusable = [];
-      var initFocus = document.activeElement;
-      var initScrollTop = this.inner ? this.inner.scrollTop : 0;
-      this.target.querySelectorAll(focusableSelectors.join(',')).forEach(function (el) {
-        el.focus();
+            Object.getOwnPropertyNames(_entry).forEach(function (prop) {
+              delete _entry[prop];
+            }); // Remove entry from collection.
 
-        if (el === document.activeElement) {
-          focusable.push(el);
-        }
-      });
-      if (this.inner) this.inner.scrollTop = initScrollTop;
-      initFocus.focus();
-      return focusable;
-    };
+            _this2.collection.splice(index, 1);
+          };
 
-    return FocusTrap;
-  }();
+          // Get the collection entry.
+          var _entry = _this2.collection[index]; // If entry is in the opened state.
 
-  /**
-   * 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.
-   */
-  var getElement = function getElement(selector, single) {
-    if (single === void 0) {
-      single = 0;
-    }
+          var _temp8 = function () {
+            if (close && _entry.state === 'opened') {
+              // Close the drawer.
+              return Promise.resolve(_entry.close(false)).then(function () {});
+            }
+          }();
 
-    if (typeof selector !== 'string') return selector;
-    return single ? document.querySelector(selector) : document.querySelectorAll(selector);
-  };
+          return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8);
+        }
+      }();
 
-  /**
-   * 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.
-   */
-  var hasClass = function hasClass(el) {
-    el = el.forEach ? el : [el];
-    el = [].slice.call(el);
-    return [].slice.call(arguments, 1).some(function (cl) {
-      return el.some(function (el) {
-        if (el.classList.contains(cl)) return true;
-      });
-    });
+      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp5) : _temp5(_temp6));
+    } catch (e) {
+      return Promise.reject(e);
+    }
   };
 
-  /**
-   * 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.
-   */
-  var hyphenCase = function hyphenCase(str) {
-    return str.replace(/([a-z][A-Z])/g, function (g) {
-      return g[0] + '-' + g[1].toLowerCase();
-    });
-  };
+  function L() {
+    return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
+  }
 
-  /**
-   * 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 getBreakpoint(drawer) {
+    var prefix = L();
+    var bp = drawer.getAttribute("data-" + this.settings.dataBreakpoint);
 
-  function moveElement(target, type, reference) {
-    if (reference === void 0) {
-      reference = false;
+    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;
     }
+  }
 
-    if (reference) {
-      var els = getElement(target);
-      if (!els.length) throw new Error("Move target element \"" + target + "\" not found!");
-      var ref = getElement(reference, 1);
-      if (!ref) throw new Error("Move reference element \"" + reference + "\" not found!");
-      els.forEach(function (el) {
-        switch (type) {
-          case 'after':
-            ref.after(el);
-            return {
-              ref: ref,
-              el: el,
-              type: type
-            };
-
-          case 'before':
-            ref.before(el);
-            return {
-              ref: ref,
-              el: el,
-              type: type
-            };
-
-          case 'append':
-            ref.append(el);
-            return {
-              ref: ref,
-              el: el,
-              type: type
-            };
-
-          case 'prepend':
-            ref.prepend(el);
-            return {
-              ref: ref,
-              el: el,
-              type: type
-            };
-
-          default:
-            throw new Error("Move type \"" + type + "\" does not exist!");
-        }
-      });
+  function getDrawer(query) {
+    // Get the entry from collection.
+    var 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("Drawer not found in collection with id of \"" + (query.id || query) + "\".");
     }
   }
 
-  /**
-   * 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.
-   */
-  var removeClass = function removeClass(el) {
-    var _arguments = arguments;
-    el = el.forEach ? el : [el];
-    el.forEach(function (el) {
-      var _el$classList;
+  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;
+  }
 
-      (_el$classList = el.classList).remove.apply(_el$classList, [].slice.call(_arguments, 1));
-    });
-  };
+  function getDrawerElements(query) {
+    var id = getDrawerID.call(this, query);
 
-  /**
-   * 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.
-   */
-  var toggleClass = function toggleClass(el) {
-    var _arguments = arguments;
-    el = el.forEach ? el : [el];
-    el.forEach(function (el) {
-      [].slice.call(_arguments, 1).forEach(function (cl) {
-        el.classList.toggle(cl);
-      });
-    });
-  };
+    if (id) {
+      var drawer = document.querySelector("#" + id);
+      var dialog = drawer ? drawer.querySelector(this.settings.selectorDialog) : null;
 
-  var openTransition = function openTransition(el, settings) {
-    return new Promise(function (resolve) {
-      if (settings.transition) {
-        el.classList.remove(settings.stateClosed);
-        el.classList.add(settings.stateOpening);
-        el.addEventListener('transitionend', function _f() {
-          el.classList.add(settings.stateOpened);
-          el.classList.remove(settings.stateOpening);
-          resolve(el);
-          this.removeEventListener('transitionend', _f);
-        });
+      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 {
-        el.classList.add(settings.stateOpened);
-        el.classList.remove(settings.stateClosed);
-        resolve(el);
+        return {
+          drawer: drawer,
+          dialog: dialog
+        };
       }
-    });
+    } else {
+      return {
+        error: new Error('Could not resolve the drawer ID.')
+      };
+    }
+  }
+
+  var initialState = function initialState(entry) {
+    try {
+      var _this2 = this;
+
+      var _temp3 = function () {
+        if (_this2.store[entry.id]) {
+          var _temp4 = function () {
+            if (_this2.store[entry.id] === 'opened') {
+              return Promise.resolve(entry.open(false, false)).then(function () {});
+            } else {
+              return Promise.resolve(entry.close(false, false)).then(function () {});
+            }
+          }();
+
+          if (_temp4 && _temp4.then) return _temp4.then(function () {});
+        } else if (entry.el.classList.contains(_this2.settings.stateOpened)) {
+          // Update drawer state.
+          entry.state = 'opened';
+        } else {
+          // Remove transition state classes.
+          entry.el.classList.remove(_this2.settings.stateOpening);
+          entry.el.classList.remove(_this2.settings.stateClosing); // Add closed state class.
+
+          entry.el.classList.add(_this2.settings.stateClosed);
+        }
+      }();
+
+      // 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.
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
   };
-  var closeTransition = function closeTransition(el, settings) {
-    return new Promise(function (resolve) {
-      if (settings.transition) {
-        el.classList.add(settings.stateClosing);
-        el.classList.remove(settings.stateOpened);
-        el.addEventListener('transitionend', function _f() {
-          el.classList.remove(settings.stateClosing);
-          el.classList.add(settings.stateClosed);
-          resolve(el);
-          this.removeEventListener('transitionend', _f);
-        });
+
+  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 {
-        el.classList.add(settings.stateClosed);
-        el.classList.remove(settings.stateOpened);
-        resolve(el);
+        this.focusTrap.focus(entry.dialog, this.settings.selectorFocus);
+      }
+    } else {
+      // Set focus to root trigger and unmount the focus trap.
+      if (entry.trigger) {
+        entry.trigger.focus();
+        entry.trigger = null;
       }
-    });
-  };
 
-  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
-  };
+      this.focusTrap.unmount();
+    }
+  }
 
-  function _extends() {
-    _extends = Object.assign || function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
+  var open$2 = function open(query, transition, focus) {
+    if (focus === void 0) {
+      focus = true;
+    }
 
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
+    try {
+      var _temp3 = function _temp3() {
+        // Set focus to the drawer element if the focus param is true.
+        if (focus) {
+          updateFocusState$1.call(_this2, drawer);
+        } // Dispatch custom opened event.
 
-      return target;
-    };
 
-    return _extends.apply(this, arguments);
-  }
+        drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
+          detail: _this2,
+          bubbles: true
+        })); // Return the drawer.
 
-  function _inheritsLoose(subClass, superClass) {
-    subClass.prototype = Object.create(superClass.prototype);
-    subClass.prototype.constructor = subClass;
+        return drawer;
+      };
 
-    _setPrototypeOf(subClass, superClass);
-  }
+      var _this2 = this;
 
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
+      // Get the drawer from collection.
+      var drawer = getDrawer.call(_this2, query); // Get the modal configuration.
 
-    return _setPrototypeOf(o, p);
-  }
+      var config = _extends({}, _this2.settings, drawer.settings); // Add transition parameter to configuration.
 
-  function _assertThisInitialized(self) {
-    if (self === void 0) {
-      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
 
-    return self;
-  }
+      if (transition !== undefined) config.transition = transition; // If drawer is closed.
 
-  var defaults$3 = {
-    autoInit: false,
-    stateAttr: 'aria-checked',
-    stateValue: 'mixed'
+      var _temp4 = function () {
+        if (drawer.state === 'closed') {
+          // Update drawer state.
+          drawer.state = 'opening'; // Run the open transition.
+
+          return Promise.resolve(openTransition(drawer.el, config)).then(function () {
+            // Update the global state if mode is modal.
+            if (drawer.mode === 'modal') updateGlobalState(true, config); // Update drawer state.
+
+            drawer.state = 'opened';
+          });
+        }
+      }();
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
   };
 
-  var Checkbox = /*#__PURE__*/function () {
-    function Checkbox(options) {
-      this.defaults = defaults$3;
-      this.settings = _extends({}, this.defaults, options);
-      this.__handlerClick = this.handlerClick.bind(this);
-      if (this.settings.autoInit) this.init();
+  var close$2 = function close(query, transition, focus) {
+    if (focus === void 0) {
+      focus = true;
     }
 
-    var _proto = Checkbox.prototype;
+    try {
+      var _this2 = this;
 
-    _proto.init = function init(options) {
-      if (options === void 0) {
-        options = null;
-      }
+      // Get the drawer from collection.
+      var drawer = getDrawer.call(_this2, query); // Get the modal configuration.
 
-      if (options) this.settings = _extends({}, this.settings, options);
-      var selector = "[" + this.settings.stateAttr + "=\"" + this.settings.stateValue + "\"]";
-      var mixed = document.querySelectorAll(selector);
-      this.setIndeterminate(mixed);
-      document.addEventListener('click', this.__handlerClick, false);
-    };
+      var config = _extends({}, _this2.settings, drawer.settings); // Add transition parameter to configuration.
 
-    _proto.destroy = function destroy() {
-      document.removeEventListener('click', this.__handlerClick, false);
-    };
 
-    _proto.handlerClick = function handlerClick(event) {
-      var selector = "[" + this.settings.stateAttr + "=\"" + this.settings.stateValue + "\"]";
-      var el = event.target.closest(selector);
-      if (!el) return;
-      this.removeAriaState(el);
-      this.setIndeterminate(el);
-    };
+      if (transition !== undefined) config.transition = transition; // If drawer is opened.
+
+      var _temp2 = function () {
+        if (drawer.state === 'opened') {
+          // Update drawer state.
+          drawer.state = 'closing'; // Remove focus from active element.
+
+          document.activeElement.blur(); // Run the close transition.
+
+          return Promise.resolve(closeTransition(drawer.el, config)).then(function () {
+            // 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(_this2, drawer);
+            } // Update drawer state.
+
+
+            drawer.state = 'closed'; // Dispatch custom closed event.
+
+            drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
+              detail: _this2,
+              bubbles: true
+            }));
+          });
+        }
+      }();
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {
+        // Return the drawer.
+        return drawer;
+      }) : drawer);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var toggle = function toggle(query, transition, focus) {
+    try {
+      var _this2 = this;
 
-    _proto.setAriaState = function setAriaState(el, value) {
-      var _this = this;
+      // Get the drawer from collection.
+      var drawer = getDrawer.call(_this2, query); // Open or close the drawer based on its current state.
 
-      if (value === void 0) {
-        value = this.settings.stateValue;
+      if (drawer.state === 'closed') {
+        return Promise.resolve(open$2.call(_this2, drawer, transition, focus));
+      } else {
+        return Promise.resolve(close$2.call(_this2, drawer, transition, focus));
       }
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-      el = el.forEach ? el : [el];
-      el.forEach(function (el) {
-        el.setAttribute(_this.settings.stateAttr, value);
-      });
-    };
+  var toModal = function toModal(entry) {
+    try {
+      var _this4 = this;
 
-    _proto.removeAriaState = function removeAriaState(el) {
-      var _this2 = this;
+      // Get the drawer configuration.
+      // Add the modal class.
+      entry.el.classList.add(entry.getSetting('classModal')); // Set aria-modal attribute to true.
 
-      el = el.forEach ? el : [el];
-      el.forEach(function (el) {
-        el.removeAttribute(_this2.settings.stateAttr);
-      });
-    };
+      entry.dialog.setAttribute('aria-modal', 'true'); // If there isn't a stored state but also has the opened state class...
 
-    _proto.setIndeterminate = function setIndeterminate(el) {
-      var _this3 = this;
+      if (!_this4.store[entry.id] && entry.el.classList.contains(entry.getSetting('stateOpened'))) {
+        // Save the opened state in local store.
+        _this4.store[entry.id] = 'opened';
+      } // Modal drawer defaults to closed state.
 
-      el = el.forEach ? el : [el];
-      el.forEach(function (el) {
-        if (el.hasAttribute(_this3.settings.stateAttr)) {
-          el.indeterminate = true;
-        } else {
-          el.indeterminate = false;
-        }
-      });
-    };
 
-    return Checkbox;
-  }();
+      return Promise.resolve(close$2.call(_this4, entry, false, false)).then(function () {
+        // Dispatch custom switch event.
+        entry.el.dispatchEvent(new CustomEvent(entry.getSetting('customEventPrefix') + 'switchMode', {
+          detail: _this4,
+          bubbles: true
+        })); // Return the entry.
 
-  var defaults$2 = {
-    autoInit: false,
-    // Data attributes
-    dataDrawer: 'drawer',
-    dataDialog: 'drawer-dialog',
-    dataToggle: 'drawer-toggle',
-    dataOpen: 'drawer-open',
-    dataClose: 'drawer-close',
-    dataBreakpoint: 'drawer-breakpoint',
-    dataFocus: 'drawer-focus',
-    // State classes
-    stateOpened: 'is-opened',
-    stateOpening: 'is-opening',
-    stateClosing: 'is-closing',
-    stateClosed: 'is-closed',
-    // Classes
-    classModal: 'drawer_modal',
-    // Selectors
-    selectorInert: null,
-    selectorOverflow: null,
-    // Feature toggles
-    breakpoints: null,
-    customEventPrefix: 'drawer:',
-    eventListeners: true,
-    stateSave: true,
-    stateKey: 'DrawerState',
-    setTabindex: true,
-    transition: true
+        return entry;
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
   };
 
-  var Breakpoint = /*#__PURE__*/function () {
-    function Breakpoint(parent) {
-      this.mediaQueryLists = [];
-      this.parent = parent;
-      this.prefix = this.getVariablePrefix();
-      this.__check = this.check.bind(this);
-    }
+  var toInline = function toInline(entry) {
+    try {
+      var _this2 = this;
 
-    var _proto = Breakpoint.prototype;
+      // Remove the modal class.
+      entry.el.classList.remove(entry.getSetting('classModal')); // Remove the aria-modal attribute.
 
-    _proto.init = function init() {
-      var _this = this;
+      entry.dialog.removeAttribute('aria-modal'); // Update the global state.
 
-      var drawers = document.querySelectorAll("[data-" + this.parent.settings.dataBreakpoint + "]");
-      drawers.forEach(function (drawer) {
-        // Setup mediaQueryList object
-        var id = drawer.getAttribute("data-" + _this.parent.settings.dataDrawer);
-        var key = drawer.getAttribute("data-" + _this.parent.settings.dataBreakpoint);
+      updateGlobalState(false, _extends({}, _this2.settings, entry.settings)); // Remove any focus traps.
 
-        var bp = _this.getBreakpoint(key);
+      _this2.focusTrap.unmount(); // Setup initial state.
 
-        var mql = window.matchMedia('(min-width:' + bp + ')'); // Run match check
 
-        _this.match(mql, drawer); // Conditionally use addListner() for IE11 support
+      return Promise.resolve(initialState.call(_this2, entry)).then(function () {
+        // Dispatch custom switch event.
+        entry.el.dispatchEvent(new CustomEvent(entry.getSetting('customEventPrefix') + 'switchMode', {
+          detail: _this2,
+          bubbles: true
+        })); // Return the entry.
 
+        return entry;
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-        if (typeof mql.addEventListener === 'function') {
-          mql.addEventListener('change', _this.__check);
-        } else {
-          mql.addListener(_this.__check);
-        } // Push to mediaQueryLists array along with drawer ID
+  function switchMode(entry) {
+    switch (entry.mode) {
+      case 'inline':
+        return toInline.call(this, entry);
 
+      case 'modal':
+        return toModal.call(this, entry);
 
-        _this.mediaQueryLists.push({
-          'mql': mql,
-          'drawer': id
-        });
-      });
-    };
+      default:
+        throw new Error("\"" + entry.mode + "\" is not a valid drawer mode.");
+    }
+  }
 
-    _proto.destroy = function destroy() {
+  var register$2 = function register(el, dialog) {
+    try {
       var _this2 = this;
 
-      if (this.mediaQueryLists && this.mediaQueryLists.length) {
-        this.mediaQueryLists.forEach(function (item) {
-          item.mql.removeListener(_this2.__check);
-        });
-      }
+      // Deregister entry incase it has already been registered.
+      return Promise.resolve(deregister$2.call(_this2, el, false)).then(function () {
+        // Save root this for use inside methods API.
+        var root = _this2; // Create an instance of the Breakpoint class.
+
+        var breakpoint = new Breakpoint(); // Setup methods API.
+
+        var methods = {
+          open: function open(transition, focus) {
+            return open$2.call(root, this, transition, focus);
+          },
+          close: function close(transition, focus) {
+            return close$2.call(root, this, transition, focus);
+          },
+          toggle: function toggle$1(transition, focus) {
+            return toggle.call(root, this, transition, focus);
+          },
+          deregister: function deregister() {
+            return deregister$2.call(root, this);
+          },
+          mountBreakpoint: function mountBreakpoint() {
+            var value = this.breakpoint;
+            var handler = this.handleBreakpoint.bind(this);
+            breakpoint.mount(value, handler);
+            return this;
+          },
+          unmountBreakpoint: function unmountBreakpoint() {
+            breakpoint.unmount();
+            return this;
+          },
+          handleBreakpoint: function handleBreakpoint(event) {
+            this.mode = event.matches ? 'inline' : 'modal';
+            return this;
+          },
+          getSetting: function getSetting(key) {
+            return key in this.settings ? this.settings[key] : root.settings[key];
+          }
+        }; // Setup the drawer object.
 
-      this.mediaQueryLists = null;
-    };
+        var entry = _extends({
+          id: el.id,
+          el: el,
+          dialog: dialog,
+          trigger: null,
+          settings: getConfig$1(el, _this2.settings.dataConfig),
 
-    _proto.check = function check(event) {
-      var _this3 = this;
+          get breakpoint() {
+            return getBreakpoint.call(root, el);
+          },
 
-      if (event === void 0) {
-        event = null;
-      }
+          get state() {
+            return __state;
+          },
 
-      if (this.mediaQueryLists && this.mediaQueryLists.length) {
-        this.mediaQueryLists.forEach(function (item) {
-          // If an event is passed, filter out drawers that don't match the query
-          // If event is null, run all drawers through match
-          var filter = event ? event.media == item.mql.media : true;
-          if (!filter) return;
-          var drawer = document.querySelector("[data-" + _this3.parent.settings.dataDrawer + "=\"" + item.drawer + "\"]");
-          if (drawer) _this3.match(item.mql, drawer);
-        });
-        document.dispatchEvent(new CustomEvent(this.parent.settings.customEventPrefix + 'breakpoint', {
-          bubbles: true
-        }));
-      }
-    };
+          set state(value) {
+            __state = value; // Save 'opened' and 'closed' states to store if mode is inline.
 
-    _proto.match = function match(mql, drawer) {
-      if (mql.matches) {
-        this.parent.switchToDefault(drawer);
-      } else {
-        this.parent.switchToModal(drawer);
-      }
-    };
+            if (value === 'opened' || value === 'closed') {
+              if (this.mode === 'inline') root.store[this.id] = this.state;
+            }
+          },
 
-    _proto.getBreakpoint = function getBreakpoint(key) {
-      var breakpoint = key;
+          get mode() {
+            return __mode;
+          },
 
-      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);
-      }
+          set mode(value) {
+            __mode = value;
+            switchMode.call(root, this);
+          }
 
-      return breakpoint;
-    };
+        }, methods); // Create the state var with the initial state.
 
-    _proto.getVariablePrefix = function getVariablePrefix() {
-      var prefix = '--';
-      prefix += getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
-      prefix += 'breakpoint-';
-      return prefix;
-    };
 
-    return Breakpoint;
-  }();
+        var __state = el.classList.contains(entry.getSetting('stateOpened')) ? 'opened' : 'closed'; // Create the mode var with the initial mode.
 
-  function getDrawer(drawerKey) {
-    if (typeof drawerKey !== 'string') return drawerKey;
-    return document.querySelector("[data-" + this.settings.dataDrawer + "=\"" + drawerKey + "\"]");
-  }
-  function drawerNotFound(key) {
-    return Promise.reject(new Error("Did not find drawer with key: \"" + key + "\""));
-  }
 
-  var close$2 = function close(drawerKey) {
-    try {
-      var _this2 = this;
+        var __mode = el.classList.contains(entry.getSetting('classModal')) ? 'modal' : 'inline'; // Setup mode specific attributes.
+
 
-      var drawer = _this2.getDrawer(drawerKey);
+        if (entry.mode === 'modal') {
+          // Set aria-modal attribute to true.
+          entry.dialog.setAttribute('aria-modal', 'true');
+        } else {
+          // Remove the aria-modal attribute.
+          entry.dialog.removeAttribute('aria-modal');
+        } // Set tabindex="-1" so dialog is focusable via JS or click.
 
-      if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
 
-      if (hasClass(drawer, _this2.settings.stateOpened)) {
-        _this2.working = true;
+        if (entry.getSetting('setTabindex')) {
+          entry.dialog.setAttribute('tabindex', '-1');
+        } // Add entry to collection.
 
-        if (hasClass(drawer, _this2.settings.classModal)) {
-          setInert(false, _this2.settings.selectorInert);
-          setOverflowHidden(false, _this2.settings.selectorOverflow);
-        }
 
-        return Promise.resolve(closeTransition(drawer, _this2.settings)).then(function () {
-          _this2.stateSave(drawer);
+        _this2.collection.push(entry); // If the entry has a breakpoint...
 
-          focusTrigger(_this2);
 
-          _this2.focusTrap.destroy();
+        var _temp = function () {
+          if (entry.breakpoint) {
+            // Mount media query breakpoint functionality.
+            entry.mountBreakpoint();
+          } else {
+            // Else, Setup initial state.
+            return Promise.resolve(initialState.call(_this2, entry)).then(function () {});
+          }
+        }();
 
-          drawer.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'closed', {
-            detail: _this2,
-            bubbles: true
-          }));
-          _this2.working = false;
-          return drawer;
-        });
-      } else {
-        return Promise.resolve(drawer);
-      }
+        return _temp && _temp.then ? _temp.then(function () {
+          // Return the registered entry.
+          return entry;
+        }) : entry;
+      });
     } catch (e) {
       return Promise.reject(e);
     }
   };
 
-  function handlerClick$2(event) {
-    // Working catch
-    if (this.working) return; // Toggle data trigger
+  var _handleClick$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
 
-    var trigger = event.target.closest("[data-" + this.settings.dataToggle + "]");
+  var _handleKeydown$2 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
 
-    if (trigger) {
-      var selector = trigger.getAttribute("data-" + this.settings.dataToggle);
-      this.memory.trigger = trigger;
-      this.toggle(selector);
-      event.preventDefault();
-      return;
-    } // Open data trigger
+  var Drawer = /*#__PURE__*/function (_Collection) {
+    _inheritsLoose(Drawer, _Collection);
 
+    function Drawer(options) {
+      var _this;
 
-    trigger = event.target.closest("[data-" + this.settings.dataOpen + "]");
+      _this = _Collection.call(this) || this;
+      Object.defineProperty(_assertThisInitialized(_this), _handleClick$1, {
+        writable: true,
+        value: void 0
+      });
+      Object.defineProperty(_assertThisInitialized(_this), _handleKeydown$2, {
+        writable: true,
+        value: void 0
+      });
+      _this.defaults = defaults$2;
+      _this.settings = _extends({}, _this.defaults, options);
+      _this.focusTrap = new FocusTrap(); // Setup local store for inline drawer state management.
 
-    if (trigger) {
-      var _selector = trigger.getAttribute("data-" + this.settings.dataOpen);
+      _this.store = localStore(_this.settings.storeKey, _this.settings.store);
+      _classPrivateFieldLooseBase(_assertThisInitialized(_this), _handleClick$1)[_handleClick$1] = handleClick$2.bind(_assertThisInitialized(_this));
+      _classPrivateFieldLooseBase(_assertThisInitialized(_this), _handleKeydown$2)[_handleKeydown$2] = handleKeydown$2.bind(_assertThisInitialized(_this));
+      if (_this.settings.autoInit) _this.init();
+      return _this;
+    }
 
-      this.memory.trigger = trigger;
-      this.open(_selector);
-      event.preventDefault();
-      return;
-    } // Close data trigger
+    var _proto = Drawer.prototype;
+
+    _proto.init = function init(options) {
+      if (options === void 0) {
+        options = null;
+      }
 
+      try {
+        var _this3 = this;
 
-    trigger = event.target.closest("[data-" + this.settings.dataClose + "]");
+        // Update settings with passed options.
+        if (options) _this3.settings = _extends({}, _this3.settings, options); // Get all the modals.
 
-    if (trigger) {
-      var _selector2 = trigger.getAttribute("data-" + this.settings.dataClose);
+        var drawers = document.querySelectorAll(_this3.settings.selectorDrawer); // Register the collections array with modal instances.
 
-      if (_selector2) {
-        this.memory.trigger = trigger;
-        this.close(_selector2);
-      } else {
-        var target = event.target.closest("[data-" + this.settings.dataDrawer + "]");
-        if (target) this.close(target);
+        return Promise.resolve(_this3.registerCollection(drawers)).then(function () {
+          // If eventListeners are enabled, init event listeners.
+          if (_this3.settings.eventListeners) {
+            _this3.initEventListeners();
+          }
+
+          return _this3;
+        });
+      } catch (e) {
+        return Promise.reject(e);
       }
+    };
 
-      event.preventDefault();
-      return;
-    } // Screen modal trigger
+    _proto.destroy = function destroy() {
+      try {
+        var _this5 = this;
+
+        // Remove all entries from the collection.
+        return Promise.resolve(_this5.deregisterCollection()).then(function () {
+          // If eventListeners are enabled, init event listeners.
+          if (_this5.settings.eventListeners) {
+            _this5.destroyEventListeners();
+          }
 
+          return _this5;
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
 
-    if (event.target.hasAttribute("data-" + this.settings.dataDrawer)) {
-      this.close(event.target);
-      return;
+    _proto.initEventListeners = function initEventListeners() {
+      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);
+    };
+
+    _proto.destroyEventListeners = function destroyEventListeners() {
+      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);
+    };
+
+    _proto.register = function register(query) {
+      var els = getDrawerElements.call(this, query);
+      if (els.error) return Promise.reject(els.error);
+      return register$2.call(this, els.drawer, els.dialog);
+    };
+
+    _proto.deregister = function deregister(query) {
+      var entry = this.get(getDrawerID.call(this, query));
+      return deregister$2.call(this, entry);
+    };
+
+    _proto.open = function open(id, transition, focus) {
+      return open$2.call(this, id, transition, focus);
+    };
+
+    _proto.close = function close(id, transition, focus) {
+      return close$2.call(this, id, transition, focus);
+    };
+
+    _proto.toggle = function toggle$1(id, transition, focus) {
+      return toggle.call(this, id, transition, focus);
+    };
+
+    _createClass(Drawer, [{
+      key: "activeModal",
+      get: function get() {
+        return this.collection.find(function (entry) {
+          return entry.state === 'opened' && entry.mode === 'modal';
+        });
+      }
+    }]);
+
+    return Drawer;
+  }(Collection);
+
+  var defaults$1 = {
+    autoInit: false,
+    // Data attributes
+    dataOpen: 'modal-open',
+    dataClose: 'modal-close',
+    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',
+    // Feature settings
+    customEventPrefix: 'modal:',
+    eventListeners: true,
+    teleport: null,
+    teleportMethod: 'append',
+    setTabindex: true,
+    transition: true
+  };
+
+  function getModal(query) {
+    // Get the entry from collection.
+    var 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("Modal not found in collection with id of \"" + (query.id || query) + "\".");
     }
   }
-  function handlerKeydown$2(event) {
-    // Working catch
-    if (this.working) return;
 
-    if (event.key === 'Escape') {
-      var target = document.querySelector("." + this.settings.classModal + "." + this.settings.stateOpened);
+  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;
+  }
 
-      if (target) {
-        this.close(target);
+  function getModalElements(query) {
+    var id = getModalID.call(this, query);
+
+    if (id) {
+      var modal = document.querySelector("#" + id);
+      var 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: modal,
+          dialog: dialog
+        };
       }
+    } else {
+      return {
+        error: new Error('Could not resolve the modal ID.')
+      };
     }
   }
 
-  var open$2 = function open(drawerKey) {
-    try {
-      var _this2 = this;
+  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;
+      }
 
-      var drawer = _this2.getDrawer(drawerKey);
+      this.focusTrap.unmount();
+    }
+  }
 
-      if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
+  function updateStackIndex(stack) {
+    stack.forEach(function (entry, index) {
+      entry.el.style.zIndex = null;
+      var value = getComputedStyle(entry.el)['z-index'];
+      entry.el.style.zIndex = parseInt(value) + index + 1;
+    });
+  }
 
-      if (!hasClass(drawer, _this2.settings.stateOpened)) {
-        _this2.working = true;
-        var isModal = hasClass(drawer, _this2.settings.classModal);
+  var handleClick$1 = function handleClick(event) {
+    try {
+      var _this2 = this;
 
-        if (isModal) {
-          setOverflowHidden(true, _this2.settings.selectorOverflow);
-        }
+      // If an open or replace button was clicked, open or replace the modal.
+      var trigger = event.target.closest("[data-" + _this2.settings.dataOpen + "], [data-" + _this2.settings.dataReplace + "]");
 
-        return Promise.resolve(openTransition(drawer, _this2.settings)).then(function () {
-          _this2.stateSave(drawer);
+      if (trigger) {
+        event.preventDefault(); // Save the trigger if it's not coming from inside a modal.
 
-          if (isModal) {
-            _this2.focusTrap.init(drawer);
+        var fromModal = event.target.closest(_this2.settings.selectorModal);
+        if (!fromModal) _this2.trigger = trigger; // Get the modal.
 
-            setInert(true, _this2.settings.selectorInert);
-          }
+        var modal = _this2.get(getModalID.call(_this2, trigger)); // Depending on the button type, either open or replace the modal.
 
-          focusTarget(drawer, _this2.settings);
-          drawer.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'opened', {
-            detail: _this2,
-            bubbles: true
-          }));
-          _this2.working = false;
-          return drawer;
-        });
-      } else {
-        focusTarget(drawer, _this2.settings);
-        return Promise.resolve(drawer);
-      }
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
 
-  function stateSet(settings) {
-    // If save state is disabled
-    if (!settings.stateSave) return stateClear(settings); // If there isn't an existing state to set
+        return Promise.resolve(trigger.matches("[data-" + _this2.settings.dataOpen + "]") ? modal.open() : modal.replace());
+      } // If a close button was clicked, close the modal.
 
-    var storageCheck = localStorage.getItem(settings.stateKey);
 
-    if (!storageCheck || storageCheck && Object.keys(JSON.parse(storageCheck)).length === 0) {
-      return stateSave(null, settings);
-    } // Set the existing state
+      trigger = event.target.closest("[data-" + _this2.settings.dataClose + "]");
 
+      if (trigger) {
+        event.preventDefault(); // Get the value of the data attribute.
 
-    var state = JSON.parse(localStorage.getItem(settings.stateKey));
-    Object.keys(state).forEach(function (key) {
-      var 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
+        var value = trigger.getAttribute("data-" + _this2.settings.dataClose); // Close all if * wildcard is passed, otherwise close a single modal.
 
-    var state = localStorage.getItem(settings.stateKey) ? JSON.parse(localStorage.getItem(settings.stateKey)) : {}; // Are we saving a single target or the entire suite?
+        return Promise.resolve(value === '*' ? _this2.closeAll() : _this2.close(value));
+      } // If the modal screen was clicked, close the modal.
 
-    var drawers = target ? [target] : document.querySelectorAll("[data-" + settings.dataDrawer + "]"); // Loop through drawers and save their states
 
-    drawers.forEach(function (el) {
-      if (hasClass(el, settings.classModal)) return;
-      var drawerKey = el.getAttribute("data-" + settings.dataDrawer);
-      state[drawerKey] = hasClass(el, settings.stateOpened) ? settings.stateOpened : settings.stateClosed;
-    }); // Save to localStorage and return the state
+      if (event.target.matches(_this2.settings.selectorModal) && !event.target.querySelector(_this2.settings.selectorRequired)) {
+        return Promise.resolve(_this2.close(getModalID.call(_this2, event.target)));
+      }
 
-    localStorage.setItem(settings.stateKey, JSON.stringify(state));
-    return state;
-  }
-  function stateClear(settings) {
-    if (localStorage.getItem(settings.stateKey)) {
-      localStorage.removeItem(settings.stateKey);
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  function handleKeydown$1(event) {
+    // If escape key was pressed.
+    if (event.key === 'Escape') {
+      // If a modal is opened and not required, close the modal.
+      if (this.active && !this.active.dialog.matches(this.settings.selectorRequired)) {
+        return this.close();
+      }
     }
-
-    return {};
   }
 
-  var switchToDefault = function switchToDefault(drawerKey) {
+  var deregister$1 = function deregister(obj, close) {
+    if (close === void 0) {
+      close = true;
+    }
+
     try {
-      var _this4 = this;
+      var _temp5 = function _temp5() {
+        // Return the modified collection.
+        return _this2.collection;
+      };
 
-      // Initial guards
-      var drawer = _this4.getDrawer(drawerKey);
+      var _this2 = this;
 
-      if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
-      if (!hasClass(drawer, _this4.settings.classModal)) return Promise.resolve(); // Tear down modal state
+      // Return collection if nothing was passed.
+      if (!obj) return Promise.resolve(_this2.collection); // Check if entry has been registered in the collection.
 
-      setInert(false, _this4.settings.selectorInert);
-      setOverflowHidden(false, _this4.settings.selectorOverflow);
-      removeClass(drawer, _this4.settings.classModal);
+      var index = _this2.collection.findIndex(function (entry) {
+        return entry.id === obj.id;
+      });
 
-      _this4.focusTrap.destroy(); // Restore drawers saved state
+      var _temp6 = function () {
+        if (index >= 0) {
+          var _temp7 = function _temp7() {
+            // Return teleported modal if a reference has been set.
+            if (_entry.getSetting('teleport')) {
+              _entry.teleportReturn();
+            } // Delete properties from collection entry.
 
 
-      drawerKey = drawer.getAttribute("data-" + _this4.settings.dataDrawer);
-      var drawerState = _this4.state[drawerKey];
+            Object.getOwnPropertyNames(_entry).forEach(function (prop) {
+              delete _entry[prop];
+            }); // Remove entry from collection.
 
-      if (drawerState == _this4.settings.stateOpened) {
-        addClass(drawer, _this4.settings.stateOpened);
-        removeClass(drawer, _this4.settings.stateClosed);
-      } // Dispatch custom event
+            _this2.collection.splice(index, 1);
+          };
 
+          // Get the collection entry.
+          var _entry = _this2.collection[index]; // If entry is in the opened state, close it.
 
-      drawer.dispatchEvent(new CustomEvent(_this4.settings.customEventPrefix + 'toDefault', {
-        bubbles: true
-      }));
-      return Promise.resolve(drawer);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  var switchToModal = function switchToModal(drawerKey) {
-    try {
-      var _this2 = this;
+          var _temp8 = function () {
+            if (close && _entry.state === 'opened') {
+              return Promise.resolve(_entry.close(false)).then(function () {});
+            } else {
+              // Get index of modal in stack array.
+              var stackIndex = _this2.stack.findIndex(function (item) {
+                return item.id === _entry.id;
+              }); // Remove modal from stack array.
 
-      // Initial guards
-      var drawer = _this2.getDrawer(drawerKey);
 
-      if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
-      if (hasClass(drawer, _this2.settings.classModal)) return Promise.resolve(); // Enable modal state
+              if (stackIndex >= 0) {
+                _this2.stack.splice(stackIndex, 1);
+              }
+            }
+          }();
 
-      addClass(drawer, _this2.settings.classModal);
-      addClass(drawer, _this2.settings.stateClosed);
-      removeClass(drawer, _this2.settings.stateOpened); // Dispatch custom event
+          return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8);
+        }
+      }();
 
-      drawer.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'toModal', {
-        bubbles: true
-      }));
-      return Promise.resolve(drawer);
+      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp5) : _temp5(_temp6));
     } catch (e) {
       return Promise.reject(e);
     }
   };
 
-  var toggle = function toggle(drawerKey) {
+  var open$1 = function open(query, transition, focus) {
+    if (focus === void 0) {
+      focus = true;
+    }
+
     try {
-      var _this2 = this;
+      var _temp3 = function _temp3() {
+        // Update focus if the focus param is true.
+        if (focus) {
+          updateFocusState.call(_this2);
+        } // Dispatch custom opened event.
 
-      var drawer = _this2.getDrawer(drawerKey);
 
-      if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
-      var isClosed = !hasClass(drawer, _this2.settings.stateOpened);
+        modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
+          detail: _this2,
+          bubbles: true
+        })); // Return the modal.
 
-      if (isClosed) {
-        return Promise.resolve(_this2.open(drawer));
-      } else {
-        return Promise.resolve(_this2.close(drawer));
-      }
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
+        return modal;
+      };
 
-  var Drawer = /*#__PURE__*/function () {
-    function Drawer(options) {
-      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);
-      if (this.settings.autoInit) this.init();
-    }
+      var _this2 = this;
 
-    var _proto = Drawer.prototype;
+      // Get the modal from collection.
+      var modal = getModal.call(_this2, query); // Get the modal configuration.
 
-    _proto.init = function init(options) {
-      if (options === void 0) {
-        options = null;
-      }
+      var config = _extends({}, _this2.settings, modal.settings); // Add transition parameter to configuration.
 
-      if (options) this.settings = _extends({}, this.settings, options);
-      this.stateSet();
 
-      if (this.settings.setTabindex) {
-        this.setTabindex();
-      }
+      if (transition !== undefined) config.transition = transition; // Check if modal is already in the stack.
 
-      this.breakpoint.init();
+      var index = _this2.stack.findIndex(function (entry) {
+        return entry.id === modal.id;
+      }); // If modal is already open.
 
-      if (this.settings.eventListeners) {
-        this.initEventListeners();
-      }
-    };
 
-    _proto.destroy = function destroy() {
-      this.breakpoint.destroy();
-      this.memory = {};
-      this.state = {};
-      localStorage.removeItem(this.settings.stateKey);
+      if (index >= 0) {
+        // Remove modal from stack array.
+        _this2.stack.splice(index, 1); // Move back to end of stack.
 
-      if (this.settings.eventListeners) {
-        this.destroyEventListeners();
-      }
-    }
-    /**
-     * Event listeners
-     */
-    ;
 
-    _proto.initEventListeners = function initEventListeners() {
-      document.addEventListener('click', this.__handlerClick, false);
-      document.addEventListener('touchend', this.__handlerClick, false);
-      document.addEventListener('keydown', this.__handlerKeydown, false);
-    };
+        _this2.stack.push(modal);
+      } // If modal is closed.
 
-    _proto.destroyEventListeners = function destroyEventListeners() {
-      document.removeEventListener('click', this.__handlerClick, false);
-      document.removeEventListener('touchend', this.__handlerClick, false);
-      document.removeEventListener('keydown', this.__handlerKeydown, false);
-    }
-    /**
-     * Helpers
-     */
-    ;
 
-    _proto.getDrawer = function getDrawer$1(drawerKey) {
-      return getDrawer.call(this, drawerKey);
-    };
+      var _temp4 = function () {
+        if (modal.state === 'closed') {
+          // Update modal state.
+          modal.state = 'opening'; // Apply z-index styles based on stack length.
 
-    _proto.setTabindex = function setTabindex$1() {
-      return setTabindex("\n      [data-" + this.settings.dataDrawer + "]\n      [data-" + this.settings.dataDialog + "]\n    ");
-    }
-    /**
-     * Save state functionality
-     */
-    ;
+          modal.el.style.zIndex = null;
+          var value = getComputedStyle(modal.el)['z-index'];
+          modal.el.style.zIndex = parseInt(value) + _this2.stack.length + 1; // Store modal in stack array.
 
-    _proto.stateSet = function stateSet$1() {
-      this.state = stateSet(this.settings);
-    };
+          _this2.stack.push(modal); // Run the open transition.
 
-    _proto.stateSave = function stateSave$1(target) {
-      if (target === void 0) {
-        target = null;
-      }
 
-      this.state = stateSave(target, this.settings);
-    };
+          return Promise.resolve(openTransition(modal.el, config)).then(function () {
+            // Update modal state.
+            modal.state = 'opened';
+          });
+        }
+      }();
 
-    _proto.stateClear = function stateClear$1() {
-      this.state = stateClear(this.settings);
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
     }
-    /**
-     * SwitchTo functionality
-     */
-    ;
-
-    _proto.switchToDefault = function switchToDefault$1(drawerKey) {
-      return switchToDefault.call(this, drawerKey);
-    };
+  };
 
-    _proto.switchToModal = function switchToModal$1(drawerKey) {
-      return switchToModal.call(this, drawerKey);
+  var close$1 = function close(query, transition, focus) {
+    if (focus === void 0) {
+      focus = true;
     }
-    /**
-     * Change state functionality
-     */
-    ;
 
-    _proto.toggle = function toggle$1(drawerKey) {
-      return toggle.call(this, drawerKey);
-    };
+    try {
+      var _this2 = this;
 
-    _proto.open = function open(drawerKey) {
-      return open$2.call(this, drawerKey);
-    };
+      // Get the modal from collection, or top modal in stack if no query is provided.
+      var modal = query ? getModal.call(_this2, query) : _this2.active; // If a modal exists and its state is opened.
 
-    _proto.close = function close(drawerKey) {
-      return close$2.call(this, drawerKey);
-    };
+      var _temp2 = function () {
+        if (modal && modal.state === 'opened') {
+          // Update modal state.
+          modal.state = 'closing'; // Get the modal configuration.
 
-    return Drawer;
-  }();
+          var config = _extends({}, _this2.settings, modal.settings); // Add transition parameter to configuration.
 
-  var defaults$1 = {
-    autoInit: false,
-    // Data attributes
-    dataModal: 'modal',
-    dataDialog: 'modal-dialog',
-    dataOpen: 'modal-open',
-    dataClose: 'modal-close',
-    dataFocus: 'modal-focus',
-    dataRequired: 'modal-required',
-    dataConfig: 'modal-config',
-    // State classes
-    stateOpened: 'is-opened',
-    stateOpening: 'is-opening',
-    stateClosing: 'is-closing',
-    stateClosed: 'is-closed',
-    // Selector
-    selectorInert: null,
-    selectorOverflow: 'body',
-    // Feature toggles
-    customEventPrefix: 'modal:',
-    eventListeners: true,
-    moveModals: {
-      ref: null,
-      type: null
-    },
-    setTabindex: true,
-    transition: true
-  };
 
-  function getModalConfig(modal) {
-    var json = modal.getAttribute("data-" + this.settings.dataConfig);
+          if (transition !== undefined) config.transition = transition; // Remove focus from active element.
 
-    if (json) {
-      var config = JSON.parse(json);
-      return _extends({}, this.settings, config);
-    } else {
-      return this.settings;
-    }
-  }
-  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, ref) {
-    if (type === void 0) {
-      type = this.settings.moveModals.type;
-    }
+          document.activeElement.blur(); // Run the close transition.
 
-    if (ref === void 0) {
-      ref = this.settings.moveModals.ref;
-    }
+          return Promise.resolve(closeTransition(modal.el, config)).then(function () {
+            // Remove z-index styles.
+            modal.el.style.zIndex = null; // Get index of modal in stack array.
 
-    var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
-    if (modals.length) moveElement(modals, type, ref);
-  }
+            var index = _this2.stack.findIndex(function (entry) {
+              return entry.id === modal.id;
+            }); // Remove modal from stack array.
 
-  var close$1 = function close(returnFocus) {
-    if (returnFocus === void 0) {
-      returnFocus = true;
-    }
 
-    try {
-      var _this2 = this;
+            _this2.stack.splice(index, 1); // Update focus if the focus param is true.
 
-      var modal = document.querySelector("[data-" + _this2.settings.dataModal + "]." + _this2.settings.stateOpened);
 
-      if (modal) {
-        _this2.working = true;
-        var config = getModalConfig.call(_this2, modal);
-        setInert(false, config.selectorInert);
-        setOverflowHidden(false, config.selectorOverflow);
-        return Promise.resolve(closeTransition(modal, config)).then(function () {
-          if (returnFocus) focusTrigger(_this2);
+            if (focus) {
+              updateFocusState.call(_this2);
+            } // Update modal state.
 
-          _this2.focusTrap.destroy();
 
-          modal.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
-            detail: _this2,
-            bubbles: true
-          }));
-          _this2.working = false;
-          return modal;
-        });
-      } else {
-        return Promise.resolve(modal);
-      }
+            modal.state = 'closed'; // Dispatch custom closed event.
+
+            modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
+              detail: _this2,
+              bubbles: true
+            }));
+          });
+        }
+      }();
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {
+        // Return the modal.
+        return modal;
+      }) : modal);
     } catch (e) {
       return Promise.reject(e);
     }
   };
 
-  var handlerClick$1 = function handlerClick(event) {
+  var closeAll$1 = function closeAll(exclude, transition) {
     try {
-      var _temp3 = function _temp3(_result) {
-        if (_exit2) return _result;
+      var _this2 = this;
+
+      var result = [];
+      return Promise.resolve(Promise.all(_this2.stack.map(function (modal) {
+        try {
+          var _temp3 = function _temp3() {
+            modal.trigger = null;
+          };
+
+          var _temp4 = function () {
+            if (exclude && exclude === modal.id) {
+              Promise.resolve();
+            } else {
+              var _push2 = result.push;
+              return Promise.resolve(close$1.call(_this2, modal, transition, false)).then(function (_close$call) {
+                _push2.call(result, _close$call);
+              });
+            }
+          }();
 
-        // Close click
-        if (event.target.closest("[data-" + _this2.settings.dataClose + "]")) {
-          event.preventDefault();
+          return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      }))).then(function () {
+        return result;
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-          _this2.close();
+  var replace = function replace(query, transition, focus) {
+    if (focus === void 0) {
+      focus = true;
+    }
 
-          return;
-        } // Root click
+    try {
+      var _temp3 = function _temp3() {
+        // Update focus if the focus param is true.
+        if (focus) {
+          updateFocusState.call(_this2);
+        } // Return the modals there were opened and closed.
 
 
-        if (event.target.hasAttribute("data-" + _this2.settings.dataModal) && !event.target.hasAttribute("data-" + _this2.settings.dataRequired)) {
-          _this2.close();
-        }
+        return {
+          opened: resultOpened,
+          closed: resultClosed
+        };
       };
 
-      var _exit2;
-
       var _this2 = this;
 
-      // Working catch
-      if (_this2.working) return Promise.resolve(); // Trigger click
+      // Get the modal from collection.
+      var modal = getModal.call(_this2, query); // Setup results for return.
 
-      var trigger = event.target.closest("[data-" + _this2.settings.dataOpen + "]");
+      var resultOpened, resultClosed;
 
       var _temp4 = function () {
-        if (trigger) {
-          event.preventDefault();
-          var modalKey = trigger.getAttribute("data-" + _this2.settings.dataOpen);
-          var fromModal = event.target.closest("[data-" + _this2.settings.dataModal + "]");
-          if (!fromModal) _this2.memory.trigger = trigger;
-          return Promise.resolve(_this2.close(!fromModal)).then(function () {
-            _this2.open(modalKey);
-
-            _exit2 = 1;
+        if (modal.state === 'opened') {
+          // If modal is open, close all modals except for replacement.
+          resultOpened = modal;
+          return Promise.resolve(closeAll$1.call(_this2, modal.id, transition)).then(function (_closeAll$call) {
+            resultClosed = _closeAll$call;
           });
+        } else {
+          // If modal is closed, close all and open replacement at the same time.
+          resultOpened = open$1.call(_this2, modal, transition, false);
+          resultClosed = closeAll$1.call(_this2, false, transition);
+          return Promise.resolve(Promise.all([resultOpened, resultClosed])).then(function () {});
         }
       }();
 
@@ -1160,343 +2021,285 @@
       return Promise.reject(e);
     }
   };
-  function handlerKeydown$1(event) {
-    // Working catch
-    if (this.working) return;
-
-    if (event.key === 'Escape') {
-      var target = document.querySelector("[data-" + this.settings.dataModal + "]." + this.settings.stateOpened);
 
-      if (target && !target.hasAttribute("data-" + this.settings.dataRequired)) {
-        this.close();
-      }
-    }
-  }
+  var register$1 = function register(el, dialog) {
+    try {
+      var _this2 = this;
 
-  function setInitialState() {
-    var _this = this;
+      // Deregister entry incase it has already been registered.
+      return Promise.resolve(deregister$1.call(_this2, el, false)).then(function () {
+        // Save root this for use inside methods API.
+        var root = _this2; // Setup methods API.
+
+        var methods = {
+          open: function open(transition, focus) {
+            return open$1.call(root, this, transition, focus);
+          },
+          close: function close(transition, focus) {
+            return close$1.call(root, this, transition, focus);
+          },
+          replace: function replace$1(transition, focus) {
+            return replace.call(root, this, transition, focus);
+          },
+          deregister: function deregister() {
+            return deregister$1.call(root, this);
+          },
+          teleport: function teleport$1(ref, method) {
+            if (ref === void 0) {
+              ref = this.getSetting('teleport');
+            }
 
-    var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
-    modals.forEach(function (el) {
-      // Remove opened state setup
-      if (el.classList.contains(_this.settings.stateOpened)) {
-        setInert(false, _this.settings.selectorInert);
-        setOverflowHidden(false, _this.settings.selectorOverflow);
-        focusTrigger(_this);
+            if (method === void 0) {
+              method = this.getSetting('teleportMethod');
+            }
 
-        _this.focusTrap.destroy();
-      } // Remove all state classes and add the default state (closed)
+            if (!this.returnRef) {
+              this.returnRef = teleport(this.el, ref, method);
+              return this.el;
+            } else {
+              console.error('Element has already been teleported:', this.el);
+              return false;
+            }
+          },
+          teleportReturn: function 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;
+            }
+          },
+          getSetting: function getSetting(key) {
+            return key in this.settings ? this.settings[key] : root.settings[key];
+          }
+        }; // Setup the modal object.
 
+        var entry = _extends({
+          id: el.id,
+          state: 'closed',
+          el: el,
+          dialog: dialog,
+          returnRef: null,
+          settings: getConfig$1(el, _this2.settings.dataConfig)
+        }, methods); // Set aria-modal attribute to true.
 
-      removeClass(el, _this.settings.stateOpened, _this.settings.stateOpening, _this.settings.stateClosing);
-      addClass(el, _this.settings.stateClosed);
-    });
-  }
 
-  var open$1 = function open(modalKey) {
-    try {
-      var _this2 = this;
+        entry.dialog.setAttribute('aria-modal', 'true'); // If a role attribute is not set, set it to "dialog" as the default.
 
-      var modal = getModal.call(_this2, modalKey);
-      if (!modal) return Promise.resolve(modalNotFound(modalKey));
-      var config = getModalConfig.call(_this2, modal);
-
-      if (hasClass(modal, config.stateClosed)) {
-        _this2.working = true;
-        setOverflowHidden(true, config.selectorOverflow);
-        return Promise.resolve(openTransition(modal, config)).then(function () {
-          _this2.focusTrap.init(modal);
-
-          focusTarget(modal, config);
-          setInert(true, config.selectorInert);
-          modal.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
-            detail: _this2,
-            bubbles: true
-          }));
-          _this2.working = false;
-          return modal;
-        });
-      } else {
-        return Promise.resolve(modal);
-      }
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
+        if (!entry.dialog.hasAttribute('role')) {
+          entry.dialog.setAttribute('role', 'dialog');
+        } // Set tabindex="-1" so dialog is focusable via JS or click.
 
-  var Modal = /*#__PURE__*/function () {
-    function Modal(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();
-    }
 
-    var _proto = Modal.prototype;
+        if (entry.getSetting('setTabindex')) {
+          entry.dialog.setAttribute('tabindex', '-1');
+        } // Teleport modal if a reference has been set.
 
-    _proto.init = function init(options) {
-      if (options === void 0) {
-        options = null;
-      }
 
-      if (options) this.settings = _extends({}, this.settings, options);
-      this.moveModals();
-      this.setInitialState();
+        if (entry.getSetting('teleport')) {
+          entry.teleport();
+        } // Add entry to collection.
 
-      if (this.settings.setTabindex) {
-        this.setTabindex();
-      }
 
-      if (this.settings.eventListeners) {
-        this.initEventListeners();
-      }
-    };
+        _this2.collection.push(entry); // Setup initial state.
 
-    _proto.destroy = function destroy() {
-      this.memory = {};
 
-      if (this.settings.eventListeners) {
-        this.destroyEventListeners();
-      }
-    }
-    /**
-     * Event listeners
-     */
-    ;
+        var _temp = function () {
+          if (entry.el.classList.contains(_this2.settings.stateOpened)) {
+            // Open entry with transitions disabled.
+            return Promise.resolve(entry.open(false)).then(function () {});
+          } else {
+            // Remove transition state classes.
+            entry.el.classList.remove(_this2.settings.stateOpening);
+            entry.el.classList.remove(_this2.settings.stateClosing); // Add closed state class.
 
-    _proto.initEventListeners = function initEventListeners() {
-      document.addEventListener('click', this.__handlerClick, false);
-      document.addEventListener('touchend', this.__handlerClick, false);
-      document.addEventListener('keydown', this.__handlerKeydown, false);
-    };
+            entry.el.classList.add(_this2.settings.stateClosed);
+          }
+        }();
 
-    _proto.destroyEventListeners = function destroyEventListeners() {
-      document.removeEventListener('click', this.__handlerClick, false);
-      document.removeEventListener('touchend', this.__handlerClick, false);
-      document.removeEventListener('keydown', this.__handlerKeydown, false);
+        return _temp && _temp.then ? _temp.then(function () {
+          // Return the registered entry.
+          return entry;
+        }) : entry;
+      });
+    } catch (e) {
+      return Promise.reject(e);
     }
-    /**
-     * Helpers
-     */
-    ;
+  };
 
-    _proto.getModal = function getModal$1(modalKey) {
-      return getModal.call(this, modalKey);
-    };
+  var _handleClick = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
 
-    _proto.setTabindex = function setTabindex$1() {
-      return setTabindex("\n      [data-" + this.settings.dataModal + "]\n      [data-" + this.settings.dataDialog + "]\n    ");
-    };
+  var _handleKeydown$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
 
-    _proto.setInitialState = function setInitialState$1() {
-      return setInitialState.call(this);
-    };
+  var Modal = /*#__PURE__*/function (_Collection) {
+    _inheritsLoose(Modal, _Collection);
 
-    _proto.moveModals = function moveModals$1(type, ref) {
-      return moveModals.call(this, type, ref);
-    }
-    /**
-     * Change state functionality
-     */
-    ;
+    function Modal(options) {
+      var _this;
 
-    _proto.open = function open(modalKey) {
-      return open$1.call(this, modalKey);
-    };
+      _this = _Collection.call(this) || this;
+      Object.defineProperty(_assertThisInitialized(_this), _handleClick, {
+        writable: true,
+        value: void 0
+      });
+      Object.defineProperty(_assertThisInitialized(_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.
+
+      _this.stack = new Proxy([], {
+        set: function set(target, property, value) {
+          target[property] = value; // Update global state if stack length changed.
+
+          if (property === 'length') {
+            updateGlobalState(_this.active, _this.settings);
+            updateStackIndex(_this.stack);
+          }
 
-    _proto.close = function close(returnFocus) {
-      return close$1.call(this, returnFocus);
-    };
+          return true;
+        }
+      });
+      _classPrivateFieldLooseBase(_assertThisInitialized(_this), _handleClick)[_handleClick] = handleClick$1.bind(_assertThisInitialized(_this));
+      _classPrivateFieldLooseBase(_assertThisInitialized(_this), _handleKeydown$1)[_handleKeydown$1] = handleKeydown$1.bind(_assertThisInitialized(_this));
+      if (_this.settings.autoInit) _this.init();
+      return _this;
+    }
 
-    return Modal;
-  }();
+    var _proto = Modal.prototype;
 
-  var Collection = /*#__PURE__*/function () {
-    function Collection() {
-      this.collection = [];
-    }
+    _proto.init = function init(options) {
+      try {
+        var _this3 = this;
 
-    var _proto = Collection.prototype;
+        // Update settings with passed options.
+        if (options) _this3.settings = _extends({}, _this3.settings, options); // Get all the modals.
 
-    _proto.register = function register(item) {
-      this.deregister(item);
-      this.collection.push(item);
-      return this.collection;
-    };
+        var modals = document.querySelectorAll(_this3.settings.selectorModal); // Register the collections array with modal instances.
 
-    _proto.deregister = function deregister(ref) {
-      var index = this.collection.findIndex(function (entry) {
-        return entry === ref;
-      });
+        return Promise.resolve(_this3.registerCollection(modals)).then(function () {
+          // If eventListeners are enabled, init event listeners.
+          if (_this3.settings.eventListeners) {
+            _this3.initEventListeners();
+          }
 
-      if (index >= 0) {
-        var entry = this.collection[index];
-        Object.getOwnPropertyNames(entry).forEach(function (prop) {
-          delete entry[prop];
+          return _this3;
         });
-        this.collection.splice(index, 1);
+      } catch (e) {
+        return Promise.reject(e);
       }
-
-      return this.collection;
     };
 
-    _proto.registerCollection = function registerCollection(items) {
-      var _this = this;
-
-      items.forEach(function (item) {
-        _this.register(item);
-      });
-      return this.collection;
-    };
+    _proto.destroy = function destroy() {
+      try {
+        var _this5 = this;
 
-    _proto.deregisterCollection = function deregisterCollection() {
-      while (this.collection.length > 0) {
-        this.deregister(this.collection[0]);
-      }
+        // Clear stored trigger.
+        _this5.trigger = null; // Remove all entries from the collection.
 
-      return this.collection;
-    };
+        return Promise.resolve(_this5.deregisterCollection()).then(function () {
+          // If eventListeners are enabled, destroy event listeners.
+          if (_this5.settings.eventListeners) {
+            _this5.destroyEventListeners();
+          }
 
-    _proto.get = function get(query, key) {
-      if (key === void 0) {
-        key = 'id';
+          return _this5;
+        });
+      } catch (e) {
+        return Promise.reject(e);
       }
-
-      var result = this.collection.find(function (item) {
-        return item[key] === query;
-      });
-      return result || null;
     };
 
-    return Collection;
-  }();
-
-  var defaults = {
-    autoInit: false,
-    // Selectors
-    selectorPopover: '.popover',
-    selectorArrow: '.popover__arrow',
-    // State classes
-    stateActive: 'is-active',
-    // Feature toggles
-    eventListeners: true,
-    eventType: 'click',
-    placement: 'bottom'
-  };
-
-  function close(popover) {
-    // Update state class
-    popover.target.classList.remove(this.settings.stateActive); // Update a11y attributes
-
-    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 memory if popover trigger matches the one saved in memory
-
-    if (popover.trigger === this.memory.trigger) {
-      this.memory.trigger = null;
-    } // Return the popover
-
-
-    return popover;
-  }
-  function closeAll() {
-    this.collection.forEach(function (popover) {
-      if (popover.state === 'opened') {
-        popover.close();
-      }
-    }); // Return the collection
+    _proto.initEventListeners = function 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);
+    };
 
-    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
+    _proto.destroyEventListeners = function 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);
+    };
 
-    setTimeout(function () {
-      // Check if trigger or target are being hovered
-      var isHovered = popover.target.closest(':hover') === popover.target || popover.trigger.closest(':hover') === popover.trigger; // Check if trigger or target are being focused
+    _proto.register = function register(query) {
+      var els = getModalElements.call(this, query);
+      if (els.error) return Promise.reject(els.error);
+      return register$1.call(this, els.modal, els.dialog);
+    };
 
-      var isFocused = document.activeElement.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"]"); // Close if the trigger and target are not currently hovered or focused
+    _proto.deregister = function deregister(query) {
+      var modal = this.get(getModalID.call(this, query));
+      return deregister$1.call(this, modal);
+    };
 
-      if (!isHovered && !isFocused) {
-        popover.close();
-      } // Return the popover
+    _proto.open = function open(id, transition, focus) {
+      return open$1.call(this, id, transition, focus);
+    };
 
+    _proto.close = function close(id, transition, focus) {
+      return close$1.call(this, id, transition, focus);
+    };
 
-      return popover;
-    }, 1);
-  }
+    _proto.replace = function replace$1(id, transition, focus) {
+      return replace.call(this, id, transition, focus);
+    };
 
-  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);
-    }
-  }
-  function handlerKeydown(event) {
-    var _this = this;
+    _proto.closeAll = function closeAll(exclude, transition, focus) {
+      if (exclude === void 0) {
+        exclude = false;
+      }
 
-    switch (event.key) {
-      case 'Escape':
-        if (this.memory.trigger) {
-          this.memory.trigger.focus();
-        }
+      if (focus === void 0) {
+        focus = true;
+      }
 
-        closeAll.call(this);
-        return;
+      try {
+        var _this7 = this;
 
-      case 'Tab':
-        this.collection.forEach(function (popover) {
-          closeCheck.call(_this, popover);
+        return Promise.resolve(closeAll$1.call(_this7, exclude, transition)).then(function (result) {
+          // Update focus if the focus param is true.
+          if (focus) {
+            updateFocusState.call(_this7);
+          }
+
+          return result;
         });
-        return;
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
 
-      default:
-        return;
-    }
-  }
-  function documentClick(popover) {
-    var root = this;
-    document.addEventListener('click', function _f(event) {
-      // Check if a popover was clicked
-      var result = event.target.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"]");
+    _createClass(Modal, [{
+      key: "active",
+      get: function get() {
+        return this.stack[this.stack.length - 1];
+      }
+    }]);
 
-      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();
-        }
+    return Modal;
+  }(Collection);
 
-        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);
-        }
-      }
-    });
-  }
+  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
-    var styles = getComputedStyle(el); // Setup the config obj with default values
+    // Get the computed styles of the element.
+    var styles = getComputedStyle(el); // Setup the config obj with default values.
 
     var config = {
       'placement': settings.placement,
@@ -1506,29 +2309,30 @@
       'flip-padding': 0,
       'arrow-element': settings.selectorArrow,
       'arrow-padding': 0
-    }; // Loop through config obj
+    }; // Loop through config obj.
 
     for (var prop in config) {
-      // Get the CSS variable property values
-      var prefix = getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
-      var value = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim(); // If a value was found, replace the default in config obj
+      // Get the CSS variable property values.
+      var prefix = L();
+      var 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) {
-    var padding; // Split the value by spaces if it's a string
+    var padding; // Split the value by spaces if it's a string.
 
-    var array = typeof value === 'string' ? value.trim().split(' ') : [value]; // Convert individual values to integers
+    var 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:
@@ -1565,11 +2369,12 @@
       default:
         padding = false;
         break;
-    } // Return the padding object
+    } // Return the padding object.
 
 
     return padding;
   }
+
   function getModifiers(options) {
     return [{
       name: 'offset',
@@ -1594,57 +2399,212 @@
       }
     }];
   }
+
+  function getPopover(query) {
+    // Get the entry from collection.
+    var 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) {
     var id = getPopoverID.call(this, query);
 
     if (id) {
+      var popover = document.querySelector("#" + id);
       var trigger = document.querySelector("[aria-controls=\"" + id + "\"]") || document.querySelector("[aria-describedby=\"" + id + "\"]");
-      var 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: trigger,
-          target: target
+          popover: popover,
+          trigger: trigger
         };
       }
     } else {
-      console.error('Could not resolve the popover ID:', query);
-      return false;
+      return {
+        error: new Error('Could not resolve the popover ID.')
+      };
+    }
+  }
+
+  var closeAll = function closeAll() {
+    try {
+      var _this4 = this;
+
+      var result = [];
+      return Promise.resolve(Promise.all(_this4.collection.map(function (popover) {
+        try {
+          var _temp4 = function () {
+            if (popover.state === 'opened') {
+              var _push2 = result.push;
+              return Promise.resolve(close.call(_this4, popover)).then(function (_close$call) {
+                _push2.call(result, _close$call);
+              });
+            }
+          }();
+
+          return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
+        } catch (e) {
+          return Promise.reject(e);
+        }
+      }))).then(function () {
+        return result;
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var close = function close(query) {
+    try {
+      var _temp2 = function _temp2(popover) {
+        // If a modal exists and its state is opened.
+        if (popover && popover.state === 'opened') {
+          // Update state class.
+          popover.el.classList.remove(_this2.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 === _this2.trigger) {
+            _this2.trigger = null;
+          }
+        } // Return the popover.
+
+
+        return popover;
+      };
+
+      var _this2 = this;
+
+      // Get the popover from collection.
+      return Promise.resolve(query ? _temp2(getPopover.call(_this2, query)) : Promise.resolve(closeAll.call(_this2)).then(_temp2));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  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(function () {
+      // Check if trigger or element are being hovered.
+      var isHovered = popover.el.closest(':hover') === popover.el || popover.trigger.closest(':hover') === popover.trigger; // Check if trigger or element are being focused.
+
+      var 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) {
+    var _this = this;
+
+    switch (event.key) {
+      case 'Escape':
+        if (this.trigger) {
+          this.trigger.focus();
+        }
+
+        closeAll.call(this);
+        return;
+
+      case 'Tab':
+        this.collection.forEach(function (popover) {
+          closeCheck.call(_this, popover);
+        });
+        return;
+
+      default:
+        return;
     }
   }
+  function handleDocumentClick(popover) {
+    var root = this;
+    document.addEventListener('click', function _f(event) {
+      // Check if a popover was clicked.
+      var 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';
@@ -1946,6 +2906,10 @@
 
     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.
@@ -2169,7 +3133,7 @@
 
       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;
@@ -2177,7 +3141,7 @@
 
       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;
@@ -3429,170 +4393,204 @@
     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
+  var deregister = function deregister(obj) {
+    try {
+      var _this2 = this;
+
+      // Return collection if nothing was passed.
+      if (!obj) return Promise.resolve(_this2.collection); // Check if entry has been registered in the collection.
+
+      var index = _this2.collection.findIndex(function (entry) {
+        return entry.id === obj.id;
+      });
+
+      if (index >= 0) {
+        // Get the collection entry.
+        var entry = _this2.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(function (prop) {
+          delete entry[prop];
+        }); // Remove entry from collection.
 
-    if (popover.trigger.hasAttribute('aria-controls')) {
-      popover.trigger.setAttribute('aria-expanded', 'true');
-    } // Update popover config
+        _this2.collection.splice(index, 1);
+      } // Return the modified collection.
 
 
-    popover.config = getConfig(popover.target, this.settings); // Enable popper event listeners and set placement/modifiers
+      return Promise.resolve(_this2.collection);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  function deregisterEventListeners(entry) {
+    // If event listeners have been setup.
+    if (entry.__eventListeners) {
+      // Loop through listeners and remove from the appropriate elements.
+      entry.__eventListeners.forEach(function (evObj) {
+        evObj.el.forEach(function (el) {
+          evObj.type.forEach(function (type) {
+            entry[el].removeEventListener(type, evObj.listener, false);
+          });
+        });
+      }); // Remove eventListeners object from collection.
 
-    popover.popper.setOptions({
-      placement: popover.config['placement'],
-      modifiers: [{
-        name: 'eventListeners',
-        enabled: true
-      }].concat(getModifiers(popover.config))
-    }); // Update popover position
 
-    popover.popper.update(); // Update popover state
+      delete entry.__eventListeners;
+    } // Return the entry object.
 
-    popover.state = 'opened'; // Return the popover
 
-    return popover;
+    return entry;
   }
 
-  function register(trigger, target) {
-    // Deregister popover if it already exists in the collection
-    this.deregister(target.id); // Create popper instance
+  var open = function open(query) {
+    try {
+      var _this2 = this;
 
-    var popperInstance = createPopper(trigger, target); // Save root this for use inside object & create methods API
+      // Get the popover from collection.
+      var popover = getPopover.call(_this2, query); // Update state class.
 
-    var root = this;
-    var methods = {
-      open: function open$1() {
-        open.call(root, this);
-      },
-      close: function close$1() {
-        close.call(root, this);
-      },
-      deregister: function deregister() {
-        _deregister.call(root, this);
-      }
-    }; // Build popover object and push to collection array
+      popover.el.classList.add(_this2.settings.stateActive); // Update accessibility attribute(s).
 
-    var popover = _extends({
-      id: target.id,
-      state: 'closed',
-      trigger: trigger,
-      target: target,
-      popper: popperInstance,
-      config: getConfig(target, this.settings)
-    }, methods); // Setup event listeners
+      if (popover.trigger.hasAttribute('aria-controls')) {
+        popover.trigger.setAttribute('aria-expanded', 'true');
+      } // Update popover config.
 
 
-    registerEventListeners.call(this, popover); // Set initial state of popover
+      popover.config = getConfig(popover.el, _this2.settings); // Enable popper event listeners and set placement/modifiers.
 
-    if (popover.target.classList.contains(this.settings.stateActive)) {
-      popover.open();
-      documentClick.call(this, popover);
-    } else {
-      popover.close();
-    } // Add item to collection
+      popover.popper.setOptions({
+        placement: popover.config['placement'],
+        modifiers: [{
+          name: 'eventListeners',
+          enabled: true
+        }].concat(getModifiers(popover.config))
+      }); // Update popover position.
 
+      popover.popper.update(); // Update popover state.
 
-    this.collection.push(popover); // Return the popover object
+      popover.state = 'opened'; // Return the popover.
 
-    return popover;
-  }
+      return Promise.resolve(popover);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  var register = function register(el, trigger) {
+    try {
+      var _this2 = this;
+
+      // Deregister entry incase it has already been registered.
+      deregister.call(_this2, el); // Save root this for use inside methods API.
 
-  function _deregister(popover) {
-    // Check if this item has been registered in the collection
-    var index = this.collection.findIndex(function (entry) {
-      return entry.id === popover.id;
-    }); // If the entry exists in the collection
 
-    if (index >= 0) {
-      // Get the collection entry
-      var entry = this.collection[index]; // Close the collection entry if it's open
+      var root = _this2; // Setup methods API.
 
-      if (entry.state === 'opened') {
-        entry.close();
-      } // Clean up the popper instance
+      var methods = {
+        open: function open$1() {
+          return open.call(root, this);
+        },
+        close: function close$1() {
+          return close.call(root, this);
+        },
+        deregister: function deregister$1() {
+          return deregister.call(root, this);
+        }
+      }; // Setup the popover object.
 
+      var entry = _extends({
+        id: el.id,
+        state: 'closed',
+        el: el,
+        trigger: trigger,
+        popper: createPopper(trigger, el),
+        config: getConfig(el, _this2.settings)
+      }, methods); // Set aria-expanded to false if trigger has aria-controls attribute.
 
-      entry.popper.destroy(); // Remove event listeners
 
-      deregisterEventListeners(entry); // Delete properties from collection entry
+      if (entry.trigger.hasAttribute('aria-controls')) {
+        entry.trigger.setAttribute('aria-expanded', 'false');
+      } // Setup event listeners.
 
-      Object.getOwnPropertyNames(entry).forEach(function (prop) {
-        delete entry[prop];
-      }); // Remove entry from collection
 
-      this.collection.splice(index, 1);
-    } // Return the new collection
+      registerEventListeners.call(_this2, entry); // Add entry to collection.
 
+      _this2.collection.push(entry); // Set initial state.
 
-    return this.collection;
-  }
-  function registerEventListeners(popover) {
-    // If event listeners aren't already setup
-    if (!popover.__eventListeners) {
-      // Add event listeners based on event type
-      var eventType = popover.config['event'];
+
+      var _temp2 = function () {
+        if (entry.el.classList.contains(_this2.settings.stateActive)) {
+          return Promise.resolve(entry.open()).then(function () {
+            handleDocumentClick.call(_this2, entry);
+          });
+        }
+      }();
+
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {
+        // Return the registered entry.
+        return entry;
+      }) : entry);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  function registerEventListeners(entry) {
+    // If event listeners aren't already setup.
+    if (!entry.__eventListeners) {
+      // Add event listeners based on event type.
+      var 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(function (evObj) {
+        entry.__eventListeners.forEach(function (evObj) {
           evObj.el.forEach(function (el) {
             evObj.type.forEach(function (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(function (evObj) {
+        entry.__eventListeners.forEach(function (evObj) {
           evObj.el.forEach(function (el) {
             evObj.type.forEach(function (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(function (evObj) {
-        evObj.el.forEach(function (el) {
-          evObj.type.forEach(function (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");
 
   var Popover = /*#__PURE__*/function (_Collection) {
     _inheritsLoose(Popover, _Collection);
@@ -3601,13 +4599,14 @@
       var _this;
 
       _this = _Collection.call(this) || this;
+      Object.defineProperty(_assertThisInitialized(_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(_assertThisInitialized(_this));
+      _this.settings = _extends({}, _this.defaults, options);
+      _this.trigger = null;
+      _classPrivateFieldLooseBase(_assertThisInitialized(_this), _handleKeydown)[_handleKeydown] = handleKeydown.bind(_assertThisInitialized(_this));
       if (_this.settings.autoInit) _this.init();
       return _this;
     }
@@ -3615,55 +4614,67 @@
     var _proto = Popover.prototype;
 
     _proto.init = function init(options) {
-      if (options === void 0) {
-        options = null;
-      }
+      try {
+        var _this3 = this;
 
-      // Update settings with passed options
-      if (options) this.settings = _extends({}, this.settings, options); // Get all the popovers
+        // Update settings with passed options.
+        if (options) _this3.settings = _extends({}, _this3.settings, options); // Get all the popovers.
 
-      var popovers = document.querySelectorAll(this.settings.selectorPopover); // Build the collections array with popover instances
+        var popovers = document.querySelectorAll(_this3.settings.selectorPopover); // Register the collections array with popover instances.
 
-      this.registerCollection(popovers); // If eventListeners is enabled
+        return Promise.resolve(_this3.registerCollection(popovers)).then(function () {
+          // If eventListeners are enabled, init event listeners.
+          if (_this3.settings.eventListeners) {
+            // Pass false to initEventListeners() since registerCollection()
+            // already adds event listeners to popovers.
+            _this3.initEventListeners(false);
+          }
 
-      if (this.settings.eventListeners) {
-        // Pass false to initEventListeners() since registerCollection()
-        // already adds event listeners to popovers
-        this.initEventListeners(false);
+          return _this3;
+        });
+      } catch (e) {
+        return Promise.reject(e);
       }
     };
 
     _proto.destroy = function destroy() {
-      // Deregister all popovers from collection
-      this.deregisterCollection(); // If eventListeners is enabled
+      try {
+        var _this5 = this;
+
+        // Clear stored trigger.
+        _this5.trigger = null; // Remove all entries from the collection.
+
+        return Promise.resolve(_this5.deregisterCollection()).then(function () {
+          // If eventListeners are enabled, destroy event listeners.
+          if (_this5.settings.eventListeners) {
+            // Pass false to destroyEventListeners() since deregisterCollection()
+            // already removes event listeners from popovers.
+            _this5.destroyEventListeners(false);
+          }
 
-      if (this.settings.eventListeners) {
-        // Pass false to destroyEventListeners() since deregisterCollection()
-        // already removes event listeners from popovers
-        this.destroyEventListeners(false);
+          return _this5;
+        });
+      } catch (e) {
+        return Promise.reject(e);
       }
-    }
-    /**
-     * Event listeners
-     */
-    ;
+    };
 
     _proto.initEventListeners = function initEventListeners(processCollection) {
-      var _this2 = this;
+      var _this6 = this;
 
       if (processCollection === void 0) {
         processCollection = true;
       }
 
       if (processCollection) {
-        // Loop through collection and setup event listeners
+        // Loop through collection and setup event listeners.
         this.collection.forEach(function (popover) {
-          registerEventListeners.call(_this2, popover);
+          registerEventListeners.call(_this6, 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);
     };
 
     _proto.destroyEventListeners = function destroyEventListeners(processCollection) {
@@ -3672,50 +4683,33 @@
       }
 
       if (processCollection) {
-        // Loop through collection and remove event listeners
+        // Loop through collection and remove event listeners.
         this.collection.forEach(function (popover) {
           deregisterEventListeners(popover);
         });
-      } // Remove keydown global event listener
+      } // Remove keydown global event listener.
 
 
-      document.removeEventListener('keydown', this.__handlerKeydown, false);
-    }
-    /**
-     * Register popover functionality
-     */
-    ;
+      document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
+    };
 
     _proto.register = function register$1(query) {
       var 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);
     };
 
-    _proto.deregister = function deregister(query) {
-      var popover = this.get(getPopoverID(query));
-      if (!popover) return false;
-      return _deregister.call(this, popover);
-    }
-    /**
-     * Change state functionality
-     */
-    ;
-
-    _proto.open = function open(id) {
-      var popover = this.get(id);
-      if (!popover) return false;
-      return popover.open();
-    };
-
-    _proto.close = function close(id) {
-      if (id) {
-        var popover = this.get(id);
-        if (!popover) return false;
-        return popover.close();
-      } else {
-        return closeAll.call(this);
-      }
+    _proto.deregister = function deregister$1(query) {
+      var popover = this.get(getPopoverID.call(this, query));
+      return deregister.call(this, popover);
+    };
+
+    _proto.open = function open$1(id) {
+      return open.call(this, id);
+    };
+
+    _proto.close = function close$1(id) {
+      return close.call(this, id);
     };
 
     return Popover;