vrembem 2.0.0 → 3.0.2

package/dev/scripts.esm.js

@@ -1,63 +1,153 @@
-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);
-      } else {
-        el.inert = null;
-        el.removeAttribute('aria-hidden');
-      }
-    });
+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);
   }
-};
-var setOverflowHidden = function setOverflowHidden(state, selector) {
-  if (selector) {
-    var els = document.querySelectorAll(selector);
-    els.forEach(function (el) {
-      if (state) {
-        el.style.overflow = 'hidden';
-      } else {
-        el.style.removeProperty('overflow');
+}
+
+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");
   }
-};
-var setTabindex = function setTabindex(selector) {
-  if (selector) {
-    var els = document.querySelectorAll(selector);
-    els.forEach(function (el) {
-      el.setAttribute('tabindex', '-1');
+
+  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;
   }
-};
 
-/**
- * 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;
+  var _proto = Breakpoint.prototype;
 
-    (_el$classList = el.classList).add.apply(_el$classList, [].slice.call(_arguments, 1));
-  });
-};
+  _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.
 
-/**
- * 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();
-  });
-};
+    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) {
@@ -341,160 +431,203 @@ var Collection = /*#__PURE__*/function () {
 
 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(settings.selectorFocus);
+var _focusable = /*#__PURE__*/_classPrivateFieldLooseKey("focusable");
+
+var _handleFocusTrap = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusTrap");
+
+var _handleFocusLock = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusLock");
 
-  if (innerFocus) {
-    innerFocus.focus();
-  } else {
-    var innerElement = target.querySelector('[tabindex="-1"]');
-    if (innerElement) innerElement.focus();
-  }
-};
-var focusTrigger = function focusTrigger(obj) {
-  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);
+  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.init = function init(target) {
-    this.destroy();
-    this.target = target;
-    this.inner = this.target.querySelector('[tabindex="-1"]');
-    this.focusable = this.getFocusable();
+  _proto.mount = function mount(el, selectorFocus) {
+    // Update passed params.
+    if (el) this.el = el;
+    if (selectorFocus) this.selectorFocus = selectorFocus; // Get the focusable elements.
 
-    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);
-    }
-  };
+    this.focusable = this.getFocusable(); // Set the focus on the element.
 
-  _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;
+    this.focus();
   };
 
-  _proto.refresh = function refresh() {
-    // Check if a target has been set
-    if (!this.target) return; // Remove existing  events
+  _proto.unmount = function unmount() {
+    // Set element to null.
+    this.el = null; // Apply empty array to focusable.
 
-    this.target.removeEventListener('keydown', this.__handlerFocusTrap);
-    this.target.removeEventListener('keydown', this.handlerFocusLock); // Get the focusable elements
+    this.focusable = []; // Remove event listeners
 
-    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);
-    }
+    document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
+    document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
   };
 
-  _proto.handlerFocusTrap = function handlerFocusTrap(event) {
-    var isTab = event.key === 'Tab' || event.keyCode === 9;
-    if (!isTab) return;
+  _proto.focus = function focus(el, selectorFocus) {
+    if (el === void 0) {
+      el = this.el;
+    }
 
-    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();
-      }
+    if (selectorFocus === void 0) {
+      selectorFocus = this.selectorFocus;
     }
-  };
 
-  _proto.handlerFocusLock = function handlerFocusLock(event) {
-    var isTab = event.key === 'Tab' || event.keyCode === 9;
-    if (isTab) event.preventDefault();
+    // 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() {
-    var focusable = [];
+  _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 = this.inner ? this.inner.scrollTop : 0;
-    this.target.querySelectorAll(focusableSelectors.join(',')).forEach(function (el) {
-      el.focus();
+    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 (el === document.activeElement) {
+      if (document.activeElement === el) {
+        // Add element to the focusable array.
         focusable.push(el);
       }
-    });
-    if (this.inner) this.inner.scrollTop = initScrollTop;
-    initFocus.focus();
+    }); // Restore the initial scroll position and focus.
+
+    el.scrollTop = initScrollTop;
+    initFocus.focus(); // Return the focusable array.
+
     return focusable;
   };
 
+  _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;
 }();
 
-/**
- * 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;
-    });
-  });
-};
+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();
+    }
+  }
+}
 
-/**
- * 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 handleFocusLock(event) {
+  // Ignore the tab key by preventing default.
+  var isTab = event.key === 'Tab' || event.keyCode === 9;
+  if (isTab) event.preventDefault();
+}
 
-/**
- * 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 getConfig$1(el, dataConfig) {
+  var string = el.getAttribute("data-" + dataConfig) || '';
+  var json = string.replace(/'/g, '"');
+  return json ? JSON.parse(json) : {};
+}
 
-    (_el$classList = el.classList).remove.apply(_el$classList, [].slice.call(_arguments, 1));
+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.
@@ -538,21 +671,6 @@ function teleport(what, where, how) {
   return returnRef;
 }
 
-/**
- * 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);
-    });
-  });
-};
-
 var openTransition = function openTransition(el, settings) {
   return new Promise(function (resolve) {
     if (settings.transition) {
@@ -590,86 +708,54 @@ var closeTransition = function closeTransition(el, settings) {
   });
 };
 
-var index = {
-  __proto__: null,
-  setInert: setInert,
-  setOverflowHidden: setOverflowHidden,
-  setTabindex: setTabindex,
-  addClass: addClass,
-  camelCase: camelCase,
-  Collection: Collection,
-  focusTarget: focusTarget,
-  focusTrigger: focusTrigger,
-  FocusTrap: FocusTrap,
-  hasClass: hasClass,
-  hyphenCase: hyphenCase,
-  removeClass: removeClass,
-  teleport: teleport,
-  toggleClass: toggleClass,
-  openTransition: openTransition,
-  closeTransition: closeTransition
-};
-
-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 setOverflowHidden(state, selector) {
+  if (selector) {
+    var els = document.querySelectorAll(selector);
+    els.forEach(function (el) {
+      if (state) {
+        el.style.overflow = 'hidden';
+      } else {
+        el.style.removeProperty('overflow');
+      }
+    });
   }
 }
 
-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];
-        }
+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);
+      } else {
+        el.inert = null;
+        el.removeAttribute('aria-hidden');
       }
-    }
-
-    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;
-  };
+function updateGlobalState(param, config) {
+  // Set inert state based on if a modal is active.
+  setInert(!!param, config.selectorInert); // Set overflow state based on if a modal is active.
 
-  return _setPrototypeOf(o, p);
+  setOverflowHidden(!!param, config.selectorOverflow);
 }
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
+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,
@@ -752,16 +838,17 @@ var Checkbox = /*#__PURE__*/function () {
 var defaults$2 = {
   autoInit: false,
   // Data attributes
-  dataDrawer: 'drawer',
-  dataDialog: 'drawer-dialog',
-  dataToggle: 'drawer-toggle',
   dataOpen: 'drawer-open',
   dataClose: 'drawer-close',
+  dataToggle: 'drawer-toggle',
   dataBreakpoint: 'drawer-breakpoint',
+  dataConfig: 'drawer-config',
   // Selectors
+  selectorDrawer: '.drawer',
+  selectorDialog: '.drawer__dialog',
   selectorFocus: '[data-focus]',
   selectorInert: null,
-  selectorOverflow: null,
+  selectorOverflow: 'body',
   // State classes
   stateOpened: 'is-opened',
   stateOpening: 'is-opening',
@@ -773,399 +860,624 @@ var defaults$2 = {
   breakpoints: null,
   customEventPrefix: 'drawer:',
   eventListeners: true,
-  stateSave: true,
-  stateKey: 'DrawerState',
+  store: true,
+  storeKey: 'VB:DrawerState',
   setTabindex: true,
   transition: true
 };
 
-var Breakpoint = /*#__PURE__*/function () {
-  function Breakpoint(parent) {
-    this.mediaQueryLists = [];
-    this.parent = parent;
-    this.prefix = this.getVariablePrefix();
-    this.__check = this.check.bind(this);
-  }
+function handleClick$2(event) {
+  var _this = this;
 
-  var _proto = Breakpoint.prototype;
+  // 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  ");
 
-  _proto.init = function init() {
-    var _this = this;
+  if (trigger) {
+    // Prevent the default behavior of the trigger.
+    event.preventDefault(); // If it's a toggle trigger...
 
-    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);
+    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.
 
-      var bp = _this.getBreakpoint(key);
 
-      var mql = window.matchMedia('(min-width:' + bp + ')'); // Run match check
+        entry.trigger = trigger; // Toggle the drawer
 
-      _this.match(mql, drawer); // Conditionally use addListner() for IE11 support
+        entry.toggle();
+      });
+    } // If it's a open trigger...
 
 
-      if (typeof mql.addEventListener === 'function') {
-        mql.addEventListener('change', _this.__check);
-      } else {
-        mql.addListener(_this.__check);
-      } // Push to mediaQueryLists array along with drawer ID
+    if (trigger.matches("[data-" + this.settings.dataOpen + "]")) {
+      var _selectors = trigger.getAttribute("data-" + this.settings.dataOpen).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.
 
-      _this.mediaQueryLists.push({
-        'mql': mql,
-        'drawer': id
-      });
-    });
-  };
 
-  _proto.destroy = function destroy() {
-    var _this2 = this;
+        entry.trigger = trigger; // Open the drawer.
 
-    if (this.mediaQueryLists && this.mediaQueryLists.length) {
-      this.mediaQueryLists.forEach(function (item) {
-        item.mql.removeListener(_this2.__check);
+        entry.open();
       });
-    }
+    } // If it's a close trigger...
 
-    this.mediaQueryLists = null;
-  };
 
-  _proto.check = function check(event) {
-    var _this3 = this;
+    if (trigger.matches("[data-" + this.settings.dataClose + "]")) {
+      var _selectors2 = trigger.getAttribute("data-" + this.settings.dataClose).trim().split(' ');
 
-    if (event === void 0) {
-      event = null;
-    }
+      _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.
 
-    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);
+          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);
+        }
       });
-      document.dispatchEvent(new CustomEvent(this.parent.settings.customEventPrefix + 'breakpoint', {
-        bubbles: true
-      }));
     }
-  };
 
-  _proto.match = function match(mql, drawer) {
-    if (mql.matches) {
-      this.parent.switchToDefault(drawer);
+    return;
+  } // If the modal drawer screen was clicked...
+
+
+  if (event.target.matches(this.settings.selectorDrawer)) {
+    // Close the modal drawer.
+    this.close(event.target.id);
+  }
+}
+function handleKeydown$2(event) {
+  if (event.key === 'Escape') {
+    var modal = this.activeModal;
+    if (modal) this.close(modal);
+  }
+}
+
+var deregister$2 = function deregister(obj, close) {
+  if (close === void 0) {
+    close = true;
+  }
+
+  try {
+    var _temp5 = function _temp5() {
+      // Return the modified collection.
+      return _this2.collection;
+    };
+
+    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;
+    });
+
+    var _temp6 = function () {
+      if (index >= 0) {
+        var _temp7 = function _temp7() {
+          // Remove entry from local store.
+          delete _this2.store[_entry.id]; // Unmount the MatchMedia functionality.
+
+          _entry.unmountBreakpoint(); // Delete properties from collection entry.
+
+
+          Object.getOwnPropertyNames(_entry).forEach(function (prop) {
+            delete _entry[prop];
+          }); // Remove entry from collection.
+
+          _this2.collection.splice(index, 1);
+        };
+
+        // Get the collection entry.
+        var _entry = _this2.collection[index]; // If entry is in the opened state.
+
+        var _temp8 = function () {
+          if (close && _entry.state === 'opened') {
+            // Close the drawer.
+            return Promise.resolve(_entry.close(false)).then(function () {});
+          }
+        }();
+
+        return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8);
+      }
+    }();
+
+    return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp5) : _temp5(_temp6));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
+function L() {
+  return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
+}
+
+function getBreakpoint(drawer) {
+  var prefix = L();
+  var bp = drawer.getAttribute("data-" + this.settings.dataBreakpoint);
+
+  if (this.settings.breakpoints && this.settings.breakpoints[bp]) {
+    return this.settings.breakpoints[bp];
+  } else if (getComputedStyle(document.body).getPropertyValue("--" + prefix + "breakpoint-" + bp).trim()) {
+    return getComputedStyle(document.body).getPropertyValue("--" + prefix + "breakpoint-" + bp).trim();
+  } else {
+    return bp;
+  }
+}
+
+function getDrawer(query) {
+  // 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) + "\".");
+  }
+}
+
+function getDrawerID(obj) {
+  // If it's a string, return the string.
+  if (typeof obj === 'string') {
+    return obj;
+  } // If it's an HTML element.
+  else if (typeof obj.hasAttribute === 'function') {
+    // If it's a drawer open trigger, return data value.
+    if (obj.hasAttribute("data-" + this.settings.dataOpen)) {
+      return obj.getAttribute("data-" + this.settings.dataOpen);
+    } // If it's a drawer close trigger, return data value or false.
+    else if (obj.hasAttribute("data-" + this.settings.dataClose)) {
+      return obj.getAttribute("data-" + this.settings.dataClose) || false;
+    } // If it's a drawer toggle trigger, return data value.
+    else if (obj.hasAttribute("data-" + this.settings.dataToggle)) {
+      return obj.getAttribute("data-" + this.settings.dataToggle);
+    } // If it's a drawer element, return the id.
+    else if (obj.closest(this.settings.selectorDrawer)) {
+      obj = obj.closest(this.settings.selectorDrawer);
+      return obj.id || false;
+    } // Return false if no id was found.
+    else return false;
+  } // If it has an id property, return its value.
+  else if (obj.id) {
+    return obj.id;
+  } // Return false if no id was found.
+  else return false;
+}
+
+function getDrawerElements(query) {
+  var id = getDrawerID.call(this, query);
+
+  if (id) {
+    var drawer = document.querySelector("#" + id);
+    var dialog = drawer ? drawer.querySelector(this.settings.selectorDialog) : null;
+
+    if (!drawer && !dialog) {
+      return {
+        error: new Error("No drawer elements found using the ID: \"" + id + "\".")
+      };
+    } else if (!dialog) {
+      return {
+        error: new Error('Drawer is missing dialog element.')
+      };
     } else {
-      this.parent.switchToModal(drawer);
+      return {
+        drawer: drawer,
+        dialog: dialog
+      };
     }
-  };
+  } else {
+    return {
+      error: new Error('Could not resolve the drawer ID.')
+    };
+  }
+}
 
-  _proto.getBreakpoint = function getBreakpoint(key) {
-    var breakpoint = key;
+var initialState = function initialState(entry) {
+  try {
+    var _this2 = this;
 
-    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);
-    }
+    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 () {});
+          }
+        }();
 
-    return breakpoint;
-  };
+        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.
 
-  _proto.getVariablePrefix = function getVariablePrefix() {
-    var prefix = '--';
-    prefix += getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
-    prefix += 'breakpoint-';
-    return prefix;
-  };
+        entry.el.classList.add(_this2.settings.stateClosed);
+      }
+    }();
 
-  return Breakpoint;
-}();
+    // 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);
+  }
+};
 
-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 + "\""));
+function updateFocusState$1(entry) {
+  // Check if there's an active modal
+  if (entry.state === 'opened') {
+    // Mount the focus trap on the opened drawer.
+    if (entry.mode === 'modal') {
+      this.focusTrap.mount(entry.dialog, this.settings.selectorFocus);
+    } else {
+      this.focusTrap.focus(entry.dialog, this.settings.selectorFocus);
+    }
+  } else {
+    // Set focus to root trigger and unmount the focus trap.
+    if (entry.trigger) {
+      entry.trigger.focus();
+      entry.trigger = null;
+    }
+
+    this.focusTrap.unmount();
+  }
 }
 
-var close$2 = function close(drawerKey) {
+var open$2 = function open(query, transition, focus) {
+  if (focus === void 0) {
+    focus = true;
+  }
+
   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.
+
+
+      drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
+        detail: _this2,
+        bubbles: true
+      })); // Return the drawer.
+
+      return drawer;
+    };
+
     var _this2 = this;
 
-    var drawer = _this2.getDrawer(drawerKey);
+    // Get the drawer from collection.
+    var drawer = getDrawer.call(_this2, query); // Get the modal configuration.
 
-    if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
+    var config = _extends({}, _this2.settings, drawer.settings); // Add transition parameter to configuration.
 
-    if (hasClass(drawer, _this2.settings.stateOpened)) {
-      _this2.working = true;
 
-      if (hasClass(drawer, _this2.settings.classModal)) {
-        setInert(false, _this2.settings.selectorInert);
-        setOverflowHidden(false, _this2.settings.selectorOverflow);
-      }
+    if (transition !== undefined) config.transition = transition; // If drawer is closed.
 
-      return Promise.resolve(closeTransition(drawer, _this2.settings)).then(function () {
-        _this2.stateSave(drawer);
+    var _temp4 = function () {
+      if (drawer.state === 'closed') {
+        // Update drawer state.
+        drawer.state = 'opening'; // Run the open transition.
 
-        focusTrigger(_this2);
+        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.
 
-        _this2.focusTrap.destroy();
+          drawer.state = 'opened';
+        });
+      }
+    }();
 
-        drawer.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'closed', {
-          detail: _this2,
-          bubbles: true
-        }));
-        _this2.working = false;
-        return drawer;
-      });
-    } else {
-      return Promise.resolve(drawer);
-    }
+    return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
   } catch (e) {
     return Promise.reject(e);
   }
 };
 
-function handlerClick$1(event) {
-  // Working catch
-  if (this.working) return; // Toggle data trigger
+var close$2 = function close(query, transition, focus) {
+  if (focus === void 0) {
+    focus = true;
+  }
 
-  var trigger = event.target.closest("[data-" + this.settings.dataToggle + "]");
+  try {
+    var _this2 = this;
 
-  if (trigger) {
-    var selector = trigger.getAttribute("data-" + this.settings.dataToggle);
-    this.memory.trigger = trigger;
-    this.toggle(selector);
-    event.preventDefault();
-    return;
-  } // Open data trigger
+    // Get the drawer from collection.
+    var drawer = getDrawer.call(_this2, query); // Get the modal configuration.
 
+    var config = _extends({}, _this2.settings, drawer.settings); // Add transition parameter to configuration.
 
-  trigger = event.target.closest("[data-" + this.settings.dataOpen + "]");
 
-  if (trigger) {
-    var _selector = trigger.getAttribute("data-" + this.settings.dataOpen);
+    if (transition !== undefined) config.transition = transition; // If drawer is opened.
 
-    this.memory.trigger = trigger;
-    this.open(_selector);
-    event.preventDefault();
-    return;
-  } // Close data trigger
+    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.
 
-  trigger = event.target.closest("[data-" + this.settings.dataClose + "]");
+        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 (trigger) {
-    var _selector2 = trigger.getAttribute("data-" + this.settings.dataClose);
+          if (focus) {
+            updateFocusState$1.call(_this2, drawer);
+          } // Update drawer state.
 
-    if (_selector2) {
-      this.memory.trigger = trigger;
-      this.close(_selector2);
-    } else {
-      var target = event.target.closest("[data-" + this.settings.dataDrawer + "]");
-      if (target) this.close(target);
-    }
 
-    event.preventDefault();
-    return;
-  } // Screen modal trigger
+          drawer.state = 'closed'; // Dispatch custom closed event.
 
+          drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
+            detail: _this2,
+            bubbles: true
+          }));
+        });
+      }
+    }();
 
-  if (event.target.hasAttribute("data-" + this.settings.dataDrawer)) {
-    this.close(event.target);
-    return;
+    return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {
+      // Return the drawer.
+      return drawer;
+    }) : drawer);
+  } catch (e) {
+    return Promise.reject(e);
   }
-}
-function handlerKeydown$1(event) {
-  // Working catch
-  if (this.working) return;
+};
 
-  if (event.key === 'Escape') {
-    var target = document.querySelector("." + this.settings.classModal + "." + this.settings.stateOpened);
+var toggle = function toggle(query, transition, focus) {
+  try {
+    var _this2 = this;
+
+    // Get the drawer from collection.
+    var drawer = getDrawer.call(_this2, query); // Open or close the drawer based on its current state.
 
-    if (target) {
-      this.close(target);
+    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);
   }
-}
+};
 
-var open$2 = function open(drawerKey) {
+var toModal = function toModal(entry) {
   try {
-    var _this2 = this;
-
-    var drawer = _this2.getDrawer(drawerKey);
-
-    if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
+    var _this4 = this;
 
-    if (!hasClass(drawer, _this2.settings.stateOpened)) {
-      _this2.working = true;
-      var isModal = hasClass(drawer, _this2.settings.classModal);
+    // Get the drawer configuration.
+    // Add the modal class.
+    entry.el.classList.add(entry.getSetting('classModal')); // Set aria-modal attribute to true.
 
-      if (isModal) {
-        setOverflowHidden(true, _this2.settings.selectorOverflow);
-      }
+    entry.dialog.setAttribute('aria-modal', 'true'); // If there isn't a stored state but also has the opened state class...
 
-      return Promise.resolve(openTransition(drawer, _this2.settings)).then(function () {
-        _this2.stateSave(drawer);
+    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.
 
-        if (isModal) {
-          _this2.focusTrap.init(drawer);
 
-          setInert(true, _this2.settings.selectorInert);
-        }
+    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.
 
-        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);
-    }
+      return entry;
+    });
   } 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
-
-  var storageCheck = localStorage.getItem(settings.stateKey);
+var toInline = function toInline(entry) {
+  try {
+    var _this2 = this;
 
-  if (!storageCheck || storageCheck && Object.keys(JSON.parse(storageCheck)).length === 0) {
-    return stateSave(null, settings);
-  } // Set the existing state
+    // Remove the modal class.
+    entry.el.classList.remove(entry.getSetting('classModal')); // Remove the aria-modal attribute.
 
+    entry.dialog.removeAttribute('aria-modal'); // Update the global state.
 
-  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
+    updateGlobalState(false, _extends({}, _this2.settings, entry.settings)); // Remove any focus traps.
 
-  var state = localStorage.getItem(settings.stateKey) ? JSON.parse(localStorage.getItem(settings.stateKey)) : {}; // Are we saving a single target or the entire suite?
+    _this2.focusTrap.unmount(); // Setup initial state.
 
-  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
+    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.
 
-  localStorage.setItem(settings.stateKey, JSON.stringify(state));
-  return state;
-}
-function stateClear(settings) {
-  if (localStorage.getItem(settings.stateKey)) {
-    localStorage.removeItem(settings.stateKey);
+      return entry;
+    });
+  } catch (e) {
+    return Promise.reject(e);
   }
+};
 
-  return {};
+function switchMode(entry) {
+  switch (entry.mode) {
+    case 'inline':
+      return toInline.call(this, entry);
+
+    case 'modal':
+      return toModal.call(this, entry);
+
+    default:
+      throw new Error("\"" + entry.mode + "\" is not a valid drawer mode.");
+  }
 }
 
-var switchToDefault = function switchToDefault(drawerKey) {
+var register$2 = function register(el, dialog) {
   try {
-    var _this4 = this;
+    var _this2 = this;
 
-    // Initial guards
-    var drawer = _this4.getDrawer(drawerKey);
+    // 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.
 
-    if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
-    if (!hasClass(drawer, _this4.settings.classModal)) return Promise.resolve(); // Tear down modal state
+      var breakpoint = new Breakpoint(); // Setup methods API.
 
-    setInert(false, _this4.settings.selectorInert);
-    setOverflowHidden(false, _this4.settings.selectorOverflow);
-    removeClass(drawer, _this4.settings.classModal);
+      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.
 
-    _this4.focusTrap.destroy(); // Restore drawers saved state
+      var entry = _extends({
+        id: el.id,
+        el: el,
+        dialog: dialog,
+        trigger: null,
+        settings: getConfig$1(el, _this2.settings.dataConfig),
 
+        get breakpoint() {
+          return getBreakpoint.call(root, el);
+        },
 
-    drawerKey = drawer.getAttribute("data-" + _this4.settings.dataDrawer);
-    var drawerState = _this4.state[drawerKey];
+        get state() {
+          return __state;
+        },
 
-    if (drawerState == _this4.settings.stateOpened) {
-      addClass(drawer, _this4.settings.stateOpened);
-      removeClass(drawer, _this4.settings.stateClosed);
-    } // Dispatch custom event
+        set state(value) {
+          __state = value; // Save 'opened' and 'closed' states to store if mode is inline.
 
+          if (value === 'opened' || value === 'closed') {
+            if (this.mode === 'inline') root.store[this.id] = this.state;
+          }
+        },
 
-    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;
+        get mode() {
+          return __mode;
+        },
 
-    // Initial guards
-    var drawer = _this2.getDrawer(drawerKey);
+        set mode(value) {
+          __mode = value;
+          switchMode.call(root, this);
+        }
 
-    if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
-    if (hasClass(drawer, _this2.settings.classModal)) return Promise.resolve(); // Enable modal state
+      }, methods); // Create the state var with the initial state.
 
-    addClass(drawer, _this2.settings.classModal);
-    addClass(drawer, _this2.settings.stateClosed);
-    removeClass(drawer, _this2.settings.stateOpened); // Dispatch custom event
 
-    drawer.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'toModal', {
-      bubbles: true
-    }));
-    return Promise.resolve(drawer);
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
+      var __state = el.classList.contains(entry.getSetting('stateOpened')) ? 'opened' : 'closed'; // Create the mode var with the initial mode.
 
-var toggle = function toggle(drawerKey) {
-  try {
-    var _this2 = this;
 
-    var drawer = _this2.getDrawer(drawerKey);
+      var __mode = el.classList.contains(entry.getSetting('classModal')) ? 'modal' : 'inline'; // Setup mode specific attributes.
 
-    if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
-    var isClosed = !hasClass(drawer, _this2.settings.stateOpened);
 
-    if (isClosed) {
-      return Promise.resolve(_this2.open(drawer));
-    } else {
-      return Promise.resolve(_this2.close(drawer));
-    }
+      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 (entry.getSetting('setTabindex')) {
+        entry.dialog.setAttribute('tabindex', '-1');
+      } // Add entry to collection.
+
+
+      _this2.collection.push(entry); // If the entry has a breakpoint...
+
+
+      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 () {});
+        }
+      }();
+
+      return _temp && _temp.then ? _temp.then(function () {
+        // Return the registered entry.
+        return entry;
+      }) : entry;
+    });
   } catch (e) {
     return Promise.reject(e);
   }
 };
 
-var Drawer = /*#__PURE__*/function () {
+var _handleClick$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
+
+var _handleKeydown$2 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
+
+var Drawer = /*#__PURE__*/function (_Collection) {
+  _inheritsLoose(Drawer, _Collection);
+
   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$1.bind(this);
-    this.__handlerKeydown = handlerKeydown$1.bind(this);
-    if (this.settings.autoInit) this.init();
+    var _this;
+
+    _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.
+
+    _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;
   }
 
   var _proto = Drawer.prototype;
@@ -1175,109 +1487,91 @@ var Drawer = /*#__PURE__*/function () {
       options = null;
     }
 
-    if (options) this.settings = _extends({}, this.settings, options);
-    this.stateSet();
+    try {
+      var _this3 = this;
 
-    if (this.settings.setTabindex) {
-      this.setTabindex();
-    }
+      // Update settings with passed options.
+      if (options) _this3.settings = _extends({}, _this3.settings, options); // Get all the modals.
+
+      var drawers = document.querySelectorAll(_this3.settings.selectorDrawer); // Register the collections array with modal instances.
 
-    this.breakpoint.init();
+      return Promise.resolve(_this3.registerCollection(drawers)).then(function () {
+        // If eventListeners are enabled, init event listeners.
+        if (_this3.settings.eventListeners) {
+          _this3.initEventListeners();
+        }
 
-    if (this.settings.eventListeners) {
-      this.initEventListeners();
+        return _this3;
+      });
+    } catch (e) {
+      return Promise.reject(e);
     }
   };
 
   _proto.destroy = function destroy() {
-    this.breakpoint.destroy();
-    this.memory = {};
-    this.state = {};
-    localStorage.removeItem(this.settings.stateKey);
+    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();
+        }
 
-    if (this.settings.eventListeners) {
-      this.destroyEventListeners();
+        return _this5;
+      });
+    } catch (e) {
+      return Promise.reject(e);
     }
-  }
-  /**
-   * Event listeners
-   */
-  ;
+  };
 
   _proto.initEventListeners = function initEventListeners() {
-    document.addEventListener('click', this.__handlerClick, false);
-    document.addEventListener('touchend', this.__handlerClick, false);
-    document.addEventListener('keydown', this.__handlerKeydown, false);
+    document.addEventListener('click', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
+    document.addEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
+    document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
   };
 
   _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);
+    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.setTabindex = function setTabindex$1() {
-    return setTabindex("\n      [data-" + this.settings.dataDrawer + "]\n      [data-" + this.settings.dataDialog + "]\n    ");
-  }
-  /**
-   * Save state functionality
-   */
-  ;
-
-  _proto.stateSet = function stateSet$1() {
-    this.state = stateSet(this.settings);
+  _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.stateSave = function stateSave$1(target) {
-    if (target === void 0) {
-      target = null;
-    }
-
-    this.state = stateSave(target, this.settings);
+  _proto.deregister = function deregister(query) {
+    var entry = this.get(getDrawerID.call(this, query));
+    return deregister$2.call(this, entry);
   };
 
-  _proto.stateClear = function stateClear$1() {
-    this.state = stateClear(this.settings);
-  }
-  /**
-   * SwitchTo functionality
-   */
-  ;
-
-  _proto.switchToDefault = function switchToDefault$1(drawerKey) {
-    return switchToDefault.call(this, drawerKey);
+  _proto.open = function open(id, transition, focus) {
+    return open$2.call(this, id, transition, focus);
   };
 
-  _proto.switchToModal = function switchToModal$1(drawerKey) {
-    return switchToModal.call(this, drawerKey);
-  }
-  /**
-   * Change state functionality
-   */
-  ;
-
-  _proto.toggle = function toggle$1(drawerKey) {
-    return toggle.call(this, drawerKey);
+  _proto.close = function close(id, transition, focus) {
+    return close$2.call(this, id, transition, focus);
   };
 
-  _proto.open = function open(drawerKey) {
-    return open$2.call(this, drawerKey);
+  _proto.toggle = function toggle$1(id, transition, focus) {
+    return toggle.call(this, id, transition, focus);
   };
 
-  _proto.close = function close(drawerKey) {
-    return close$2.call(this, drawerKey);
-  };
+  _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,
@@ -1307,38 +1601,6 @@ var defaults$1 = {
   transition: true
 };
 
-function updateGlobalState() {
-  // Set inert state based on if a modal is active.
-  setInert(!!this.active, this.settings.selectorInert); // Set overflow state based on if a modal is active.
-
-  setOverflowHidden(!!this.active, this.settings.selectorOverflow); // Update the z-index of the stack.
-
-  updateStackIndex(this.stack);
-}
-function updateFocusState() {
-  // Check if there's an active modal
-  if (this.active) {
-    // Set focus and init focus trap on active modal.
-    focusTarget(this.active.target, this.settings);
-    this.focusTrap.init(this.active.target);
-  } else {
-    // Set focus to root trigger and destroy focus trap.
-    focusTrigger(this);
-    this.focusTrap.destroy();
-  }
-}
-function updateStackIndex(stack) {
-  stack.forEach(function (entry, index) {
-    entry.target.style.zIndex = null;
-    var value = getComputedStyle(entry.target)['z-index'];
-    entry.target.style.zIndex = parseInt(value) + index + 1;
-  });
-}
-function getConfig$1(el) {
-  var string = el.getAttribute("data-" + this.settings.dataConfig) || '';
-  var json = string.replace(/'/g, '"');
-  return json ? JSON.parse(json) : {};
-}
 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.
@@ -1346,9 +1608,10 @@ function getModal(query) {
   if (entry) {
     return entry;
   } else {
-    throw new Error("Modal not found in collection with id of \"" + query + "\".");
+    throw new Error("Modal not found in collection with id of \"" + (query.id || query) + "\".");
   }
 }
+
 function getModalID(obj) {
   // If it's a string, return the string.
   if (typeof obj === 'string') {
@@ -1364,7 +1627,7 @@ function getModalID(obj) {
     } // 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 target, return the id.
+    } // 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;
@@ -1376,14 +1639,15 @@ function getModalID(obj) {
   } // Return false if no id was found.
   else return false;
 }
+
 function getModalElements(query) {
   var id = getModalID.call(this, query);
 
   if (id) {
-    var target = document.querySelector("#" + id);
-    var dialog = target ? target.querySelector(this.settings.selectorDialog) : null;
+    var modal = document.querySelector("#" + id);
+    var dialog = modal ? modal.querySelector(this.settings.selectorDialog) : null;
 
-    if (!target && !dialog) {
+    if (!modal && !dialog) {
       return {
         error: new Error("No modal elements found using the ID: \"" + id + "\".")
       };
@@ -1393,7 +1657,7 @@ function getModalElements(query) {
       };
     } else {
       return {
-        target: target,
+        modal: modal,
         dialog: dialog
       };
     }
@@ -1404,7 +1668,31 @@ function getModalElements(query) {
   }
 }
 
-var handleClick = function handleClick(event) {
+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;
+    }
+
+    this.focusTrap.unmount();
+  }
+}
+
+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;
+  });
+}
+
+var handleClick$1 = function handleClick(event) {
   try {
     var _this2 = this;
 
@@ -1415,7 +1703,7 @@ var handleClick = function handleClick(event) {
       event.preventDefault(); // Save the trigger if it's not coming from inside a modal.
 
       var fromModal = event.target.closest(_this2.settings.selectorModal);
-      if (!fromModal) _this2.memory.trigger = trigger; // Get the modal.
+      if (!fromModal) _this2.trigger = trigger; // Get the modal.
 
       var modal = _this2.get(getModalID.call(_this2, trigger)); // Depending on the button type, either open or replace the modal.
 
@@ -1444,7 +1732,7 @@ var handleClick = function handleClick(event) {
     return Promise.reject(e);
   }
 };
-function handleKeydown(event) {
+function handleKeydown$1(event) {
   // If escape key was pressed.
   if (event.key === 'Escape') {
     // If a modal is opened and not required, close the modal.
@@ -1519,20 +1807,20 @@ var deregister$1 = function deregister(obj, close) {
   }
 };
 
-var open$1 = function open(query, transition, bulk) {
-  if (bulk === void 0) {
-    bulk = false;
+var open$1 = function open(query, transition, focus) {
+  if (focus === void 0) {
+    focus = true;
   }
 
   try {
     var _temp3 = function _temp3() {
-      // Update the focus state if this is not a bulk action.
-      if (!bulk) {
+      // Update focus if the focus param is true.
+      if (focus) {
         updateFocusState.call(_this2);
       } // Dispatch custom opened event.
 
 
-      modal.target.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
+      modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
         detail: _this2,
         bubbles: true
       })); // Return the modal.
@@ -1569,14 +1857,14 @@ var open$1 = function open(query, transition, bulk) {
         // Update modal state.
         modal.state = 'opening'; // Apply z-index styles based on stack length.
 
-        modal.target.style.zIndex = null;
-        var value = getComputedStyle(modal.target)['z-index'];
-        modal.target.style.zIndex = parseInt(value) + _this2.stack.length + 1; // Store modal in stack array.
+        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.
 
         _this2.stack.push(modal); // Run the open transition.
 
 
-        return Promise.resolve(openTransition(modal.target, config)).then(function () {
+        return Promise.resolve(openTransition(modal.el, config)).then(function () {
           // Update modal state.
           modal.state = 'opened';
         });
@@ -1589,9 +1877,9 @@ var open$1 = function open(query, transition, bulk) {
   }
 };
 
-var close$1 = function close(query, transition, bulk) {
-  if (bulk === void 0) {
-    bulk = false;
+var close$1 = function close(query, transition, focus) {
+  if (focus === void 0) {
+    focus = true;
   }
 
   try {
@@ -1612,26 +1900,26 @@ var close$1 = function close(query, transition, bulk) {
 
         document.activeElement.blur(); // Run the close transition.
 
-        return Promise.resolve(closeTransition(modal.target, config)).then(function () {
+        return Promise.resolve(closeTransition(modal.el, config)).then(function () {
           // Remove z-index styles.
-          modal.target.style.zIndex = null; // Get index of modal in stack array.
+          modal.el.style.zIndex = null; // Get index of modal in stack array.
 
           var index = _this2.stack.findIndex(function (entry) {
             return entry.id === modal.id;
           }); // Remove modal from stack array.
 
 
-          _this2.stack.splice(index, 1); // Update the focus state if this is not a bulk action.
+          _this2.stack.splice(index, 1); // Update focus if the focus param is true.
 
 
-          if (!bulk) {
+          if (focus) {
             updateFocusState.call(_this2);
           } // Update modal state.
 
 
           modal.state = 'closed'; // Dispatch custom closed event.
 
-          modal.target.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
+          modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
             detail: _this2,
             bubbles: true
           }));
@@ -1664,7 +1952,7 @@ var closeAll$1 = function closeAll(exclude, transition) {
             Promise.resolve();
           } else {
             var _push2 = result.push;
-            return Promise.resolve(close$1.call(_this2, modal, transition, true)).then(function (_close$call) {
+            return Promise.resolve(close$1.call(_this2, modal, transition, false)).then(function (_close$call) {
               _push2.call(result, _close$call);
             });
           }
@@ -1682,11 +1970,18 @@ var closeAll$1 = function closeAll(exclude, transition) {
   }
 };
 
-var replace = function replace(query, transition) {
+var replace = function replace(query, transition, focus) {
+  if (focus === void 0) {
+    focus = true;
+  }
+
   try {
     var _temp3 = function _temp3() {
-      // Update the focus state.
-      updateFocusState.call(_this2); // Return the modals there were opened and closed.
+      // Update focus if the focus param is true.
+      if (focus) {
+        updateFocusState.call(_this2);
+      } // Return the modals there were opened and closed.
+
 
       return {
         opened: resultOpened,
@@ -1710,7 +2005,7 @@ var replace = function replace(query, transition) {
         });
       } else {
         // If modal is closed, close all and open replacement at the same time.
-        resultOpened = open$1.call(_this2, modal, transition, true);
+        resultOpened = open$1.call(_this2, modal, transition, false);
         resultClosed = closeAll$1.call(_this2, false, transition);
         return Promise.resolve(Promise.all([resultOpened, resultClosed])).then(function () {});
       }
@@ -1722,24 +2017,24 @@ var replace = function replace(query, transition) {
   }
 };
 
-var register$1 = function register(target, dialog) {
+var register$1 = function register(el, dialog) {
   try {
     var _this2 = this;
 
     // Deregister entry incase it has already been registered.
-    return Promise.resolve(deregister$1.call(_this2, target, false)).then(function () {
+    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) {
-          return open$1.call(root, this, transition);
+        open: function open(transition, focus) {
+          return open$1.call(root, this, transition, focus);
         },
-        close: function close(transition) {
-          return close$1.call(root, this, transition);
+        close: function close(transition, focus) {
+          return close$1.call(root, this, transition, focus);
         },
-        replace: function replace$1(transition) {
-          return replace.call(root, this, transition);
+        replace: function replace$1(transition, focus) {
+          return replace.call(root, this, transition, focus);
         },
         deregister: function deregister() {
           return deregister$1.call(root, this);
@@ -1754,19 +2049,19 @@ var register$1 = function register(target, dialog) {
           }
 
           if (!this.returnRef) {
-            this.returnRef = teleport(this.target, ref, method);
-            return this.target;
+            this.returnRef = teleport(this.el, ref, method);
+            return this.el;
           } else {
-            console.error('Element has already been teleported:', this.target);
+            console.error('Element has already been teleported:', this.el);
             return false;
           }
         },
         teleportReturn: function teleportReturn() {
           if (this.returnRef) {
-            this.returnRef = teleport(this.target, this.returnRef);
-            return this.target;
+            this.returnRef = teleport(this.el, this.returnRef);
+            return this.el;
           } else {
-            console.error('No return reference found:', this.target);
+            console.error('No return reference found:', this.el);
             return false;
           }
         },
@@ -1776,12 +2071,12 @@ var register$1 = function register(target, dialog) {
       }; // Setup the modal object.
 
       var entry = _extends({
-        id: target.id,
+        id: el.id,
         state: 'closed',
-        settings: getConfig$1.call(_this2, target),
-        target: target,
+        el: el,
         dialog: dialog,
-        returnRef: null
+        returnRef: null,
+        settings: getConfig$1(el, _this2.settings.dataConfig)
       }, methods); // Set aria-modal attribute to true.
 
 
@@ -1805,25 +2100,33 @@ var register$1 = function register(target, dialog) {
       _this2.collection.push(entry); // Setup initial state.
 
 
-      if (entry.target.classList.contains(_this2.settings.stateOpened)) {
-        // Open modal with transitions disabled.
-        entry.open(false);
-      } else {
-        // Remove transition state classes.
-        entry.target.classList.remove(_this2.settings.stateOpening);
-        entry.target.classList.remove(_this2.settings.stateClosing); // Add closed state class.
-
-        entry.target.classList.add(_this2.settings.stateClosed);
-      } // Return the registered entry.
+      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.
 
+          entry.el.classList.add(_this2.settings.stateClosed);
+        }
+      }();
 
-      return entry;
+      return _temp && _temp.then ? _temp.then(function () {
+        // Return the registered entry.
+        return entry;
+      }) : entry;
     });
   } catch (e) {
     return Promise.reject(e);
   }
 };
 
+var _handleClick = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
+
+var _handleKeydown$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
+
 var Modal = /*#__PURE__*/function (_Collection) {
   _inheritsLoose(Modal, _Collection);
 
@@ -1831,24 +2134,33 @@ var Modal = /*#__PURE__*/function (_Collection) {
     var _this;
 
     _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.memory = {};
+    _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 whenever the length property of stack changes.
+        target[property] = value; // Update global state if stack length changed.
 
         if (property === 'length') {
-          updateGlobalState.call(_assertThisInitialized(_this));
+          updateGlobalState(_this.active, _this.settings);
+          updateStackIndex(_this.stack);
         }
 
         return true;
       }
     });
-    _this.__handleClick = handleClick.bind(_assertThisInitialized(_this));
-    _this.__handleKeydown = handleKeydown.bind(_assertThisInitialized(_this));
+    _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;
   }
@@ -1865,10 +2177,13 @@ var Modal = /*#__PURE__*/function (_Collection) {
       var modals = document.querySelectorAll(_this3.settings.selectorModal); // Register the collections array with modal instances.
 
       return Promise.resolve(_this3.registerCollection(modals)).then(function () {
+        // If eventListeners are enabled, init event listeners.
         if (_this3.settings.eventListeners) {
           _this3.initEventListeners();
         }
-      }); // If eventListeners are enabled, init event listeners.
+
+        return _this3;
+      });
     } catch (e) {
       return Promise.reject(e);
     }
@@ -1878,35 +2193,38 @@ var Modal = /*#__PURE__*/function (_Collection) {
     try {
       var _this5 = this;
 
-      // Clear any stored memory.
-      _this5.memory = {}; // Remove all entries from the collection.
+      // 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) {
           _this5.destroyEventListeners();
         }
-      }); // If eventListeners are enabled, destroy event listeners.
+
+        return _this5;
+      });
     } catch (e) {
       return Promise.reject(e);
     }
   };
 
   _proto.initEventListeners = function initEventListeners() {
-    document.addEventListener('click', this.__handleClick, false);
-    document.addEventListener('touchend', this.__handleClick, false);
-    document.addEventListener('keydown', this.__handleKeydown, false);
+    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);
   };
 
   _proto.destroyEventListeners = function destroyEventListeners() {
-    document.removeEventListener('click', this.__handleClick, false);
-    document.removeEventListener('touchend', this.__handleClick, false);
-    document.removeEventListener('keydown', this.__handleKeydown, false);
+    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);
   };
 
   _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.target, els.dialog);
+    return register$1.call(this, els.modal, els.dialog);
   };
 
   _proto.deregister = function deregister(query) {
@@ -1914,28 +2232,36 @@ var Modal = /*#__PURE__*/function (_Collection) {
     return deregister$1.call(this, modal);
   };
 
-  _proto.open = function open(id, transition) {
-    return open$1.call(this, id, transition);
+  _proto.open = function open(id, transition, focus) {
+    return open$1.call(this, id, transition, focus);
   };
 
-  _proto.close = function close(id, transition) {
-    return close$1.call(this, id, transition);
+  _proto.close = function close(id, transition, focus) {
+    return close$1.call(this, id, transition, focus);
   };
 
-  _proto.replace = function replace$1(id, transition) {
-    return replace.call(this, id, transition);
+  _proto.replace = function replace$1(id, transition, focus) {
+    return replace.call(this, id, transition, focus);
   };
 
-  _proto.closeAll = function closeAll(exclude, transition) {
+  _proto.closeAll = function closeAll(exclude, transition, focus) {
     if (exclude === void 0) {
       exclude = false;
     }
 
+    if (focus === void 0) {
+      focus = true;
+    }
+
     try {
       var _this7 = this;
 
       return Promise.resolve(closeAll$1.call(_this7, exclude, transition)).then(function (result) {
-        updateFocusState.call(_this7);
+        // Update focus if the focus param is true.
+        if (focus) {
+          updateFocusState.call(_this7);
+        }
+
         return result;
       });
     } catch (e) {
@@ -1982,7 +2308,7 @@ function getConfig(el, settings) {
 
   for (var prop in config) {
     // Get the CSS variable property values.
-    var prefix = getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
+    var prefix = L();
     var value = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim(); // If a value was found, replace the default in config obj.
 
     if (value) {
@@ -1993,6 +2319,7 @@ function getConfig(el, settings) {
 
   return config;
 }
+
 function getPadding(value) {
   var padding; // Split the value by spaces if it's a string.
 
@@ -2042,6 +2369,7 @@ function getPadding(value) {
 
   return padding;
 }
+
 function getModifiers(options) {
   return [{
     name: 'offset',
@@ -2066,6 +2394,7 @@ function getModifiers(options) {
     }
   }];
 }
+
 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.
@@ -2076,13 +2405,14 @@ function getPopover(query) {
     throw new Error("Popover not found in collection with id of \"" + query + "\".");
   }
 }
+
 function getPopoverID(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 popover target, return the id.
+    // If it's a popover element, return the id.
     if (obj.closest(this.settings.selectorPopover)) {
       obj = obj.closest(this.settings.selectorPopover);
       return obj.id;
@@ -2100,14 +2430,15 @@ function getPopoverID(obj) {
   } // 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) {
+    if (!trigger && !popover) {
       return {
         error: new Error("No popover elements found using the ID: \"" + id + "\".")
       };
@@ -2115,14 +2446,14 @@ function getPopoverElements(query) {
       return {
         error: new Error('No popover trigger associated with the provided popover.')
       };
-    } else if (!target) {
+    } 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 {
@@ -2165,7 +2496,7 @@ var close = function close(query) {
       // If a modal exists and its state is opened.
       if (popover && popover.state === 'opened') {
         // Update state class.
-        popover.target.classList.remove(_this2.settings.stateActive); // Update accessibility attribute(s).
+        popover.el.classList.remove(_this2.settings.stateActive); // Update accessibility attribute(s).
 
         if (popover.trigger.hasAttribute('aria-controls')) {
           popover.trigger.setAttribute('aria-expanded', 'false');
@@ -2179,10 +2510,10 @@ var close = function close(query) {
           }]
         }); // Update popover state.
 
-        popover.state = 'closed'; // Clear memory if popover trigger matches the one saved in memory.
+        popover.state = 'closed'; // Clear root trigger if popover trigger matches.
 
-        if (popover.trigger === _this2.memory.trigger) {
-          _this2.memory.trigger = null;
+        if (popover.trigger === _this2.trigger) {
+          _this2.trigger = null;
         }
       } // Return the popover.
 
@@ -2203,10 +2534,10 @@ function closeCheck(popover) {
   if (popover.state != 'opened') return; // Needed to correctly check which element is currently being focused.
 
   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.
+    // 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 target are not currently hovered or 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();
@@ -2217,22 +2548,22 @@ function closeCheck(popover) {
   }, 1);
 }
 
-function handlerClick(popover) {
+function handleClick(popover) {
   if (popover.state === 'opened') {
     popover.close();
   } else {
-    this.memory.trigger = popover.trigger;
+    this.trigger = popover.trigger;
     popover.open();
-    documentClick.call(this, popover);
+    handleDocumentClick.call(this, popover);
   }
 }
-function handlerKeydown(event) {
+function handleKeydown(event) {
   var _this = this;
 
   switch (event.key) {
     case 'Escape':
-      if (this.memory.trigger) {
-        this.memory.trigger.focus();
+      if (this.trigger) {
+        this.trigger.focus();
       }
 
       closeAll.call(this);
@@ -2248,7 +2579,7 @@ function handlerKeydown(event) {
       return;
   }
 }
-function documentClick(popover) {
+function handleDocumentClick(popover) {
   var root = this;
   document.addEventListener('click', function _f(event) {
     // Check if a popover was clicked.
@@ -2256,14 +2587,14 @@ function documentClick(popover) {
 
     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)) {
+      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.target && !popover.target.classList.contains(root.settings.stateActive)) {
+      if (popover.el && !popover.el.classList.contains(root.settings.stateActive)) {
         this.removeEventListener('click', _f);
       }
     }
@@ -4121,14 +4452,14 @@ var open = function open(query) {
     // Get the popover from collection.
     var popover = getPopover.call(_this2, query); // Update state class.
 
-    popover.target.classList.add(_this2.settings.stateActive); // Update accessibility attribute(s).
+    popover.el.classList.add(_this2.settings.stateActive); // Update accessibility attribute(s).
 
     if (popover.trigger.hasAttribute('aria-controls')) {
       popover.trigger.setAttribute('aria-expanded', 'true');
     } // Update popover config.
 
 
-    popover.config = getConfig(popover.target, _this2.settings); // Enable popper event listeners and set placement/modifiers.
+    popover.config = getConfig(popover.el, _this2.settings); // Enable popper event listeners and set placement/modifiers.
 
     popover.popper.setOptions({
       placement: popover.config['placement'],
@@ -4148,12 +4479,12 @@ var open = function open(query) {
   }
 };
 
-var register = function register(trigger, target) {
+var register = function register(el, trigger) {
   try {
     var _this2 = this;
 
     // Deregister entry incase it has already been registered.
-    deregister.call(_this2, target); // Save root this for use inside methods API.
+    deregister.call(_this2, el); // Save root this for use inside methods API.
 
 
     var root = _this2; // Setup methods API.
@@ -4171,12 +4502,12 @@ var register = function register(trigger, target) {
     }; // Setup the popover object.
 
     var entry = _extends({
-      id: target.id,
+      id: el.id,
       state: 'closed',
+      el: el,
       trigger: trigger,
-      target: target,
-      popper: createPopper(trigger, target),
-      config: getConfig(target, _this2.settings)
+      popper: createPopper(trigger, el),
+      config: getConfig(el, _this2.settings)
     }, methods); // Set aria-expanded to false if trigger has aria-controls attribute.
 
 
@@ -4191,9 +4522,9 @@ var register = function register(trigger, target) {
 
 
     var _temp2 = function () {
-      if (entry.target.classList.contains(_this2.settings.stateActive)) {
+      if (entry.el.classList.contains(_this2.settings.stateActive)) {
         return Promise.resolve(entry.open()).then(function () {
-          documentClick.call(_this2, entry);
+          handleDocumentClick.call(_this2, entry);
         });
       }
     }();
@@ -4219,7 +4550,7 @@ function registerEventListeners(entry) {
         type: ['mouseenter', 'focus'],
         listener: open.bind(this, entry)
       }, {
-        el: ['trigger', 'target'],
+        el: ['el', 'trigger'],
         type: ['mouseleave', 'focusout'],
         listener: closeCheck.bind(this, entry)
       }]; // Loop through listeners and apply to the appropriate elements.
@@ -4237,7 +4568,7 @@ function registerEventListeners(entry) {
       entry.__eventListeners = [{
         el: ['trigger'],
         type: ['click'],
-        listener: handlerClick.bind(this, entry)
+        listener: handleClick.bind(this, entry)
       }]; // Loop through listeners and apply to the appropriate elements.
 
       entry.__eventListeners.forEach(function (evObj) {
@@ -4254,6 +4585,8 @@ function registerEventListeners(entry) {
   return entry;
 }
 
+var _handleKeydown = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
+
 var Popover = /*#__PURE__*/function (_Collection) {
   _inheritsLoose(Popover, _Collection);
 
@@ -4261,10 +4594,14 @@ var Popover = /*#__PURE__*/function (_Collection) {
     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.memory = {};
-    _this.__handlerKeydown = handlerKeydown.bind(_assertThisInitialized(_this));
+    _this.trigger = null;
+    _classPrivateFieldLooseBase(_assertThisInitialized(_this), _handleKeydown)[_handleKeydown] = handleKeydown.bind(_assertThisInitialized(_this));
     if (_this.settings.autoInit) _this.init();
     return _this;
   }
@@ -4281,12 +4618,15 @@ var Popover = /*#__PURE__*/function (_Collection) {
       var popovers = document.querySelectorAll(_this3.settings.selectorPopover); // Register the collections array with popover instances.
 
       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 eventListeners are enabled, init event listeners.
+
+        return _this3;
+      });
     } catch (e) {
       return Promise.reject(e);
     }
@@ -4296,16 +4636,19 @@ var Popover = /*#__PURE__*/function (_Collection) {
     try {
       var _this5 = this;
 
-      // Clear any stored memory.
-      _this5.memory = {}; // Remove all entries from the collection.
+      // 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 eventListeners are enabled, destroy event listeners.
+
+        return _this5;
+      });
     } catch (e) {
       return Promise.reject(e);
     }
@@ -4326,7 +4669,7 @@ var Popover = /*#__PURE__*/function (_Collection) {
     } // Add keydown global event listener.
 
 
-    document.addEventListener('keydown', this.__handlerKeydown, false);
+    document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
   };
 
   _proto.destroyEventListeners = function destroyEventListeners(processCollection) {
@@ -4342,13 +4685,13 @@ var Popover = /*#__PURE__*/function (_Collection) {
     } // Remove keydown global event listener.
 
 
-    document.removeEventListener('keydown', this.__handlerKeydown, false);
+    document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
   };
 
   _proto.register = function register$1(query) {
     var els = getPopoverElements.call(this, query);
     if (els.error) return Promise.reject(els.error);
-    return register.call(this, els.trigger, els.target);
+    return register.call(this, els.popover, els.trigger);
   };
 
   _proto.deregister = function deregister$1(query) {