vrembem 1.41.0 → 2.0.0

package/dev/scripts.esm.js

@@ -59,10 +59,290 @@ var camelCase = function camelCase(str) {
   });
 };
 
+function _settle(pact, state, value) {
+  if (!pact.s) {
+    if (value instanceof _Pact) {
+      if (value.s) {
+        if (state & 1) {
+          state = value.s;
+        }
+
+        value = value.v;
+      } else {
+        value.o = _settle.bind(null, pact, state);
+        return;
+      }
+    }
+
+    if (value && value.then) {
+      value.then(_settle.bind(null, pact, state), _settle.bind(null, pact, 2));
+      return;
+    }
+
+    pact.s = state;
+    pact.v = value;
+    var observer = pact.o;
+
+    if (observer) {
+      observer(pact);
+    }
+  }
+}
+
+var _Pact = /*#__PURE__*/function () {
+  function _Pact() {}
+
+  _Pact.prototype.then = function (onFulfilled, onRejected) {
+    var result = new _Pact();
+    var state = this.s;
+
+    if (state) {
+      var callback = state & 1 ? onFulfilled : onRejected;
+
+      if (callback) {
+        try {
+          _settle(result, 1, callback(this.v));
+        } catch (e) {
+          _settle(result, 2, e);
+        }
+
+        return result;
+      } else {
+        return this;
+      }
+    }
+
+    this.o = function (_this) {
+      try {
+        var value = _this.v;
+
+        if (_this.s & 1) {
+          _settle(result, 1, onFulfilled ? onFulfilled(value) : value);
+        } else if (onRejected) {
+          _settle(result, 1, onRejected(value));
+        } else {
+          _settle(result, 2, value);
+        }
+      } catch (e) {
+        _settle(result, 2, e);
+      }
+    };
+
+    return result;
+  };
+
+  return _Pact;
+}();
+
+function _isSettledPact(thenable) {
+  return thenable instanceof _Pact && thenable.s & 1;
+}
+
+function _for(test, update, body) {
+  var stage;
+
+  for (;;) {
+    var shouldContinue = test();
+
+    if (_isSettledPact(shouldContinue)) {
+      shouldContinue = shouldContinue.v;
+    }
+
+    if (!shouldContinue) {
+      return result;
+    }
+
+    if (shouldContinue.then) {
+      stage = 0;
+      break;
+    }
+
+    var result = body();
+
+    if (result && result.then) {
+      if (_isSettledPact(result)) {
+        result = result.s;
+      } else {
+        stage = 1;
+        break;
+      }
+    }
+
+    if (update) {
+      var updateValue = update();
+
+      if (updateValue && updateValue.then && !_isSettledPact(updateValue)) {
+        stage = 2;
+        break;
+      }
+    }
+  }
+
+  var pact = new _Pact();
+
+  var reject = _settle.bind(null, pact, 2);
+
+  (stage === 0 ? shouldContinue.then(_resumeAfterTest) : stage === 1 ? result.then(_resumeAfterBody) : updateValue.then(_resumeAfterUpdate)).then(void 0, reject);
+  return pact;
+
+  function _resumeAfterBody(value) {
+    result = value;
+
+    do {
+      if (update) {
+        updateValue = update();
+
+        if (updateValue && updateValue.then && !_isSettledPact(updateValue)) {
+          updateValue.then(_resumeAfterUpdate).then(void 0, reject);
+          return;
+        }
+      }
+
+      shouldContinue = test();
+
+      if (!shouldContinue || _isSettledPact(shouldContinue) && !shouldContinue.v) {
+        _settle(pact, 1, result);
+
+        return;
+      }
+
+      if (shouldContinue.then) {
+        shouldContinue.then(_resumeAfterTest).then(void 0, reject);
+        return;
+      }
+
+      result = body();
+
+      if (_isSettledPact(result)) {
+        result = result.v;
+      }
+    } while (!result || !result.then);
+
+    result.then(_resumeAfterBody).then(void 0, reject);
+  }
+
+  function _resumeAfterTest(shouldContinue) {
+    if (shouldContinue) {
+      result = body();
+
+      if (result && result.then) {
+        result.then(_resumeAfterBody).then(void 0, reject);
+      } else {
+        _resumeAfterBody(result);
+      }
+    } else {
+      _settle(pact, 1, result);
+    }
+  }
+
+  function _resumeAfterUpdate() {
+    if (shouldContinue = test()) {
+      if (shouldContinue.then) {
+        shouldContinue.then(_resumeAfterTest).then(void 0, reject);
+      } else {
+        _resumeAfterTest(shouldContinue);
+      }
+    } else {
+      _settle(pact, 1, result);
+    }
+  }
+}
+
+var Collection = /*#__PURE__*/function () {
+  function Collection() {
+    this.collection = [];
+  }
+
+  var _proto = Collection.prototype;
+
+  _proto.register = function register(item) {
+    try {
+      var _this2 = this;
+
+      return Promise.resolve(_this2.deregister(item)).then(function () {
+        _this2.collection.push(item);
+
+        return _this2.collection;
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  _proto.deregister = function deregister(ref) {
+    try {
+      var _this4 = this;
+
+      var index = _this4.collection.findIndex(function (entry) {
+        return entry === ref;
+      });
+
+      if (index >= 0) {
+        var entry = _this4.collection[index];
+        Object.getOwnPropertyNames(entry).forEach(function (prop) {
+          delete entry[prop];
+        });
+
+        _this4.collection.splice(index, 1);
+      }
+
+      return Promise.resolve(_this4.collection);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  _proto.registerCollection = function registerCollection(items) {
+    try {
+      var _this6 = this;
+
+      return Promise.resolve(Promise.all(Array.from(items, function (item) {
+        _this6.register(item);
+      }))).then(function () {
+        return _this6.collection;
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  _proto.deregisterCollection = function deregisterCollection() {
+    try {
+      var _temp3 = function _temp3() {
+        return _this8.collection;
+      };
+
+      var _this8 = this;
+
+      var _temp4 = _for(function () {
+        return _this8.collection.length > 0;
+      }, void 0, function () {
+        return Promise.resolve(_this8.deregister(_this8.collection[0])).then(function () {});
+      });
+
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+
+  _proto.get = function get(value, key) {
+    if (key === void 0) {
+      key = 'id';
+    }
+
+    return this.collection.find(function (item) {
+      return item[key] === value;
+    });
+  };
+
+  return Collection;
+}();
+
 var focusableSelectors = ['a[href]:not([tabindex^="-"])', 'area[href]:not([tabindex^="-"])', 'input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])', 'input[type="radio"]:not([disabled]):not([tabindex^="-"])', 'select:not([disabled]):not([tabindex^="-"])', 'textarea:not([disabled]):not([tabindex^="-"])', 'button:not([disabled]):not([tabindex^="-"])', 'iframe:not([tabindex^="-"])', 'audio[controls]:not([tabindex^="-"])', 'video[controls]:not([tabindex^="-"])', '[contenteditable]:not([tabindex^="-"])', '[tabindex]:not([tabindex^="-"])'];
 
 var focusTarget = function focusTarget(target, settings) {
-  var innerFocus = target.querySelector("[data-" + settings.dataFocus + "]");
+  var innerFocus = target.querySelector(settings.selectorFocus);
 
   if (innerFocus) {
     innerFocus.focus();
@@ -72,10 +352,6 @@ var focusTarget = function focusTarget(target, settings) {
   }
 };
 var focusTrigger = function focusTrigger(obj) {
-  if (obj === void 0) {
-    obj = null;
-  }
-
   if (!obj || !obj.memory || !obj.memory.trigger) return;
   obj.memory.trigger.focus();
   obj.memory.trigger = null;
@@ -89,6 +365,7 @@ var FocusTrap = /*#__PURE__*/function () {
   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();
@@ -176,20 +453,6 @@ var FocusTrap = /*#__PURE__*/function () {
   return FocusTrap;
 }();
 
-/**
- * Get an element(s) from a selector or return value if not a string.
- * @param {String} selector - Selector to query.
- * @param {Boolean} single - Whether to return a single or all matches.
- */
-var getElement = function getElement(selector, single) {
-  if (single === void 0) {
-    single = 0;
-  }
-
-  if (typeof selector !== 'string') return selector;
-  return single ? document.querySelector(selector) : document.querySelectorAll(selector);
-};
-
 /**
  * Checks an element or NodeList whether they contain a class or classes.
  * Ref: https://davidwalsh.name/nodelist-array
@@ -218,64 +481,6 @@ var hyphenCase = function hyphenCase(str) {
   });
 };
 
-/**
- * Moves element(s) in the DOM based on a reference and move type.
- * @param {String} target - The element(s) to move.
- * @param {String} type - Move type can be 'after', 'before', 'append' or 'prepend'.
- * @param {String} reference - The reference element the move is relative to.
- */
-
-function moveElement(target, type, reference) {
-  if (reference === void 0) {
-    reference = false;
-  }
-
-  if (reference) {
-    var els = getElement(target);
-    if (!els.length) throw new Error("Move target element \"" + target + "\" not found!");
-    var ref = getElement(reference, 1);
-    if (!ref) throw new Error("Move reference element \"" + reference + "\" not found!");
-    els.forEach(function (el) {
-      switch (type) {
-        case 'after':
-          ref.after(el);
-          return {
-            ref: ref,
-            el: el,
-            type: type
-          };
-
-        case 'before':
-          ref.before(el);
-          return {
-            ref: ref,
-            el: el,
-            type: type
-          };
-
-        case 'append':
-          ref.append(el);
-          return {
-            ref: ref,
-            el: el,
-            type: type
-          };
-
-        case 'prepend':
-          ref.prepend(el);
-          return {
-            ref: ref,
-            el: el,
-            type: type
-          };
-
-        default:
-          throw new Error("Move type \"" + type + "\" does not exist!");
-      }
-    });
-  }
-}
-
 /**
  * Remove a class or classes from an element or NodeList.
  * @param {Node || NodeList} el - Element(s) to remove class(es) from.
@@ -291,6 +496,48 @@ var removeClass = function removeClass(el) {
   });
 };
 
+/**
+ * Teleports an element in the DOM based on a reference and teleport method.
+ * Provide the comment node as the reference to teleport the element back to its
+ * previous location.
+ * @param {Node} what - What element to teleport.
+ * @param {String || Node} where - Where to teleport the element.
+ * @param {String} how - How (method) to teleport the element, e.g: 'after',
+ *   'before', 'append' or 'prepend'.
+ * @return {Node} Return the return reference if it was teleported else return
+ *   null if it was returned to a comment reference.
+ */
+function teleport(what, where, how) {
+  // Check if ref is either a comment or element node.
+  var isComment = where.nodeType === Node.COMMENT_NODE;
+  var isElement = where.nodeType === Node.ELEMENT_NODE; // Get the reference element.
+
+  where = isComment || isElement ? where : document.querySelector(where); // If ref is a comment, set teleport type to 'after'.
+
+  if (isComment) how = 'after'; // Must be a valid reference element and method.
+
+  if (!where) throw new Error("Not a valid teleport reference: '" + where + "'");
+  if (typeof where[how] != 'function') throw new Error("Not a valid teleport method: '" + how + "'"); // Initial return ref is null.
+
+  var returnRef = null; // If ref is not a comment, set a return reference comment.
+
+  if (!isComment) {
+    returnRef = document.createComment('teleported #' + what.id);
+    what.before(returnRef);
+  } // Teleport the target node.
+
+
+  where[how](what); // Delete the comment node if element was returned to a comment reference.
+
+  if (isComment) {
+    where.remove();
+  } // Return the return reference if it was teleported else return null if it was
+  // returned to a comment reference.
+
+
+  return returnRef;
+}
+
 /**
  * Toggle a class or classes on an element or NodeList.
  * @param {Node || NodeList} el - Element(s) to toggle class(es) on.
@@ -350,19 +597,38 @@ var index = {
   setTabindex: setTabindex,
   addClass: addClass,
   camelCase: camelCase,
+  Collection: Collection,
   focusTarget: focusTarget,
   focusTrigger: focusTrigger,
   FocusTrap: FocusTrap,
-  getElement: getElement,
   hasClass: hasClass,
   hyphenCase: hyphenCase,
-  moveElement: moveElement,
   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 _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++) {
@@ -492,7 +758,10 @@ var defaults$2 = {
   dataOpen: 'drawer-open',
   dataClose: 'drawer-close',
   dataBreakpoint: 'drawer-breakpoint',
-  dataFocus: 'drawer-focus',
+  // Selectors
+  selectorFocus: '[data-focus]',
+  selectorInert: null,
+  selectorOverflow: null,
   // State classes
   stateOpened: 'is-opened',
   stateOpening: 'is-opening',
@@ -500,9 +769,6 @@ var defaults$2 = {
   stateClosed: 'is-closed',
   // Classes
   classModal: 'drawer_modal',
-  // Selectors
-  selectorInert: null,
-  selectorOverflow: null,
   // Feature toggles
   breakpoints: null,
   customEventPrefix: 'drawer:',
@@ -663,7 +929,7 @@ var close$2 = function close(drawerKey) {
   }
 };
 
-function handlerClick$2(event) {
+function handlerClick$1(event) {
   // Working catch
   if (this.working) return; // Toggle data trigger
 
@@ -713,7 +979,7 @@ function handlerClick$2(event) {
     return;
   }
 }
-function handlerKeydown$2(event) {
+function handlerKeydown$1(event) {
   // Working catch
   if (this.working) return;
 
@@ -897,8 +1163,8 @@ var Drawer = /*#__PURE__*/function () {
     this.state = {};
     this.focusTrap = new FocusTrap();
     this.breakpoint = new Breakpoint(this);
-    this.__handlerClick = handlerClick$2.bind(this);
-    this.__handlerKeydown = handlerKeydown$2.bind(this);
+    this.__handlerClick = handlerClick$1.bind(this);
+    this.__handlerKeydown = handlerKeydown$1.bind(this);
     if (this.settings.autoInit) this.init();
   }
 
@@ -1016,466 +1282,693 @@ var Drawer = /*#__PURE__*/function () {
 var defaults$1 = {
   autoInit: false,
   // Data attributes
-  dataModal: 'modal',
-  dataDialog: 'modal-dialog',
   dataOpen: 'modal-open',
   dataClose: 'modal-close',
-  dataFocus: 'modal-focus',
-  dataRequired: 'modal-required',
+  dataReplace: 'modal-replace',
+  dataConfig: 'modal-config',
+  // Selectors
+  selectorModal: '.modal',
+  selectorDialog: '.modal__dialog',
+  selectorRequired: '[role="alertdialog"]',
+  selectorFocus: '[data-focus]',
+  selectorInert: null,
+  selectorOverflow: 'body',
   // State classes
   stateOpened: 'is-opened',
   stateOpening: 'is-opening',
   stateClosing: 'is-closing',
   stateClosed: 'is-closed',
-  // Selector
-  selectorInert: null,
-  selectorOverflow: 'body',
-  // Feature toggles
+  // Feature settings
   customEventPrefix: 'modal:',
   eventListeners: true,
-  moveModals: {
-    ref: null,
-    type: null
-  },
+  teleport: null,
+  teleportMethod: 'append',
   setTabindex: true,
   transition: true
 };
 
-var close$1 = function close(returnFocus) {
-  if (returnFocus === void 0) {
-    returnFocus = 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.
 
-  try {
-    var _this2 = this;
+  setOverflowHidden(!!this.active, this.settings.selectorOverflow); // Update the z-index of the stack.
 
-    var modal = document.querySelector("[data-" + _this2.settings.dataModal + "]." + _this2.settings.stateOpened);
+  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.
 
-    if (modal) {
-      _this2.working = true;
-      setInert(false, _this2.settings.selectorInert);
-      setOverflowHidden(false, _this2.settings.selectorOverflow);
-      return Promise.resolve(closeTransition(modal, _this2.settings)).then(function () {
-        if (returnFocus) focusTrigger(_this2);
+  if (entry) {
+    return entry;
+  } else {
+    throw new Error("Modal not found in collection with id of \"" + query + "\".");
+  }
+}
+function getModalID(obj) {
+  // If it's a string, return the string.
+  if (typeof obj === 'string') {
+    return obj;
+  } // If it's an HTML element.
+  else if (typeof obj.hasAttribute === 'function') {
+    // If it's a modal open trigger, return data value.
+    if (obj.hasAttribute("data-" + this.settings.dataOpen)) {
+      return obj.getAttribute("data-" + this.settings.dataOpen);
+    } // If it's a modal close trigger, return data value or false.
+    else if (obj.hasAttribute("data-" + this.settings.dataClose)) {
+      return obj.getAttribute("data-" + this.settings.dataClose) || false;
+    } // If it's a modal replace trigger, return data value.
+    else if (obj.hasAttribute("data-" + this.settings.dataReplace)) {
+      return obj.getAttribute("data-" + this.settings.dataReplace);
+    } // If it's a modal target, return the id.
+    else if (obj.closest(this.settings.selectorModal)) {
+      obj = obj.closest(this.settings.selectorModal);
+      return obj.id || false;
+    } // Return false if no id was found.
+    else return false;
+  } // If it has an id property, return its value.
+  else if (obj.id) {
+    return obj.id;
+  } // Return false if no id was found.
+  else return false;
+}
+function getModalElements(query) {
+  var id = getModalID.call(this, query);
 
-        _this2.focusTrap.destroy();
+  if (id) {
+    var target = document.querySelector("#" + id);
+    var dialog = target ? target.querySelector(this.settings.selectorDialog) : null;
 
-        modal.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'closed', {
-          detail: _this2,
-          bubbles: true
-        }));
-        _this2.working = false;
-        return modal;
-      });
+    if (!target && !dialog) {
+      return {
+        error: new Error("No modal elements found using the ID: \"" + id + "\".")
+      };
+    } else if (!dialog) {
+      return {
+        error: new Error('Modal is missing dialog element.')
+      };
     } else {
-      return Promise.resolve(modal);
+      return {
+        target: target,
+        dialog: dialog
+      };
     }
-  } catch (e) {
-    return Promise.reject(e);
+  } else {
+    return {
+      error: new Error('Could not resolve the modal ID.')
+    };
   }
-};
+}
 
-var handlerClick$1 = function handlerClick(event) {
+var handleClick = function handleClick(event) {
   try {
-    var _temp3 = function _temp3(_result) {
-      if (_exit2) return _result;
+    var _this2 = this;
 
-      // Close click
-      if (event.target.closest("[data-" + _this2.settings.dataClose + "]")) {
-        event.preventDefault();
+    // If an open or replace button was clicked, open or replace the modal.
+    var trigger = event.target.closest("[data-" + _this2.settings.dataOpen + "], [data-" + _this2.settings.dataReplace + "]");
 
-        _this2.close();
+    if (trigger) {
+      event.preventDefault(); // Save the trigger if it's not coming from inside a modal.
 
-        return;
-      } // Root click
+      var fromModal = event.target.closest(_this2.settings.selectorModal);
+      if (!fromModal) _this2.memory.trigger = trigger; // Get the modal.
 
+      var modal = _this2.get(getModalID.call(_this2, trigger)); // Depending on the button type, either open or replace the modal.
 
-      if (event.target.hasAttribute("data-" + _this2.settings.dataModal) && !event.target.hasAttribute("data-" + _this2.settings.dataRequired)) {
-        _this2.close();
-      }
-    };
 
-    var _exit2;
+      return Promise.resolve(trigger.matches("[data-" + _this2.settings.dataOpen + "]") ? modal.open() : modal.replace());
+    } // If a close button was clicked, close the modal.
 
-    var _this2 = this;
 
-    // Working catch
-    if (_this2.working) return Promise.resolve(); // Trigger click
+    trigger = event.target.closest("[data-" + _this2.settings.dataClose + "]");
 
-    var trigger = event.target.closest("[data-" + _this2.settings.dataOpen + "]");
+    if (trigger) {
+      event.preventDefault(); // Get the value of the data attribute.
 
-    var _temp4 = function () {
-      if (trigger) {
-        event.preventDefault();
-        var modalKey = trigger.getAttribute("data-" + _this2.settings.dataOpen);
-        var fromModal = event.target.closest("[data-" + _this2.settings.dataModal + "]");
-        if (!fromModal) _this2.memory.trigger = trigger;
-        return Promise.resolve(_this2.close(!fromModal)).then(function () {
-          _this2.open(modalKey);
+      var value = trigger.getAttribute("data-" + _this2.settings.dataClose); // Close all if * wildcard is passed, otherwise close a single modal.
 
-          _exit2 = 1;
-        });
-      }
-    }();
+      return Promise.resolve(value === '*' ? _this2.closeAll() : _this2.close(value));
+    } // If the modal screen was clicked, close the modal.
 
-    return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+
+    if (event.target.matches(_this2.settings.selectorModal) && !event.target.querySelector(_this2.settings.selectorRequired)) {
+      return Promise.resolve(_this2.close(getModalID.call(_this2, event.target)));
+    }
+
+    return Promise.resolve();
   } catch (e) {
     return Promise.reject(e);
   }
 };
-function handlerKeydown$1(event) {
-  // Working catch
-  if (this.working) return;
-
+function handleKeydown(event) {
+  // If escape key was pressed.
   if (event.key === 'Escape') {
-    var target = document.querySelector("[data-" + this.settings.dataModal + "]." + this.settings.stateOpened);
-
-    if (target && !target.hasAttribute("data-" + this.settings.dataRequired)) {
-      this.close();
+    // If a modal is opened and not required, close the modal.
+    if (this.active && !this.active.dialog.matches(this.settings.selectorRequired)) {
+      return this.close();
     }
   }
 }
 
-function getModal(modalKey) {
-  if (typeof modalKey !== 'string') return modalKey;
-  return document.querySelector("[data-" + this.settings.dataModal + "=\"" + modalKey + "\"]");
-}
-function modalNotFound(key) {
-  return Promise.reject(new Error("Did not find modal with key: \"" + key + "\""));
-}
-function moveModals(type, ref) {
-  if (type === void 0) {
-    type = this.settings.moveModals.type;
+var deregister$1 = function deregister(obj, close) {
+  if (close === void 0) {
+    close = true;
   }
 
-  if (ref === void 0) {
-    ref = this.settings.moveModals.ref;
-  }
+  try {
+    var _temp5 = function _temp5() {
+      // Return the modified collection.
+      return _this2.collection;
+    };
 
-  var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
-  if (modals.length) moveElement(modals, type, ref);
-}
+    var _this2 = this;
 
-function setInitialState() {
-  var _this = this;
+    // Return collection if nothing was passed.
+    if (!obj) return Promise.resolve(_this2.collection); // Check if entry has been registered in the collection.
 
-  var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
-  modals.forEach(function (el) {
-    // Remove opened state setup
-    if (el.classList.contains(_this.settings.stateOpened)) {
-      setInert(false, _this.settings.selectorInert);
-      setOverflowHidden(false, _this.settings.selectorOverflow);
-      focusTrigger(_this);
+    var index = _this2.collection.findIndex(function (entry) {
+      return entry.id === obj.id;
+    });
 
-      _this.focusTrap.destroy();
-    } // Remove all state classes and add the default state (closed)
+    var _temp6 = function () {
+      if (index >= 0) {
+        var _temp7 = function _temp7() {
+          // Return teleported modal if a reference has been set.
+          if (_entry.getSetting('teleport')) {
+            _entry.teleportReturn();
+          } // Delete properties from collection entry.
 
 
-    removeClass(el, _this.settings.stateOpened, _this.settings.stateOpening, _this.settings.stateClosing);
-    addClass(el, _this.settings.stateClosed);
-  });
-}
+          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, close it.
+
+        var _temp8 = function () {
+          if (close && _entry.state === 'opened') {
+            return Promise.resolve(_entry.close(false)).then(function () {});
+          } else {
+            // Get index of modal in stack array.
+            var stackIndex = _this2.stack.findIndex(function (item) {
+              return item.id === _entry.id;
+            }); // Remove modal from stack array.
+
+
+            if (stackIndex >= 0) {
+              _this2.stack.splice(stackIndex, 1);
+            }
+          }
+        }();
+
+        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);
+  }
+};
+
+var open$1 = function open(query, transition, bulk) {
+  if (bulk === void 0) {
+    bulk = false;
+  }
 
-var open$1 = function open(modalKey) {
   try {
+    var _temp3 = function _temp3() {
+      // Update the focus state if this is not a bulk action.
+      if (!bulk) {
+        updateFocusState.call(_this2);
+      } // Dispatch custom opened event.
+
+
+      modal.target.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
+        detail: _this2,
+        bubbles: true
+      })); // Return the modal.
+
+      return modal;
+    };
+
     var _this2 = this;
 
-    var modal = getModal.call(_this2, modalKey);
-    if (!modal) return Promise.resolve(modalNotFound(modalKey));
+    // Get the modal from collection.
+    var modal = getModal.call(_this2, query); // Get the modal configuration.
 
-    if (hasClass(modal, _this2.settings.stateClosed)) {
-      _this2.working = true;
-      setOverflowHidden(true, _this2.settings.selectorOverflow);
-      return Promise.resolve(openTransition(modal, _this2.settings)).then(function () {
-        _this2.focusTrap.init(modal);
+    var config = _extends({}, _this2.settings, modal.settings); // Add transition parameter to configuration.
 
-        focusTarget(modal, _this2.settings);
-        setInert(true, _this2.settings.selectorInert);
-        modal.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'opened', {
-          detail: _this2,
-          bubbles: true
-        }));
-        _this2.working = false;
-        return modal;
-      });
-    } else {
-      return Promise.resolve(modal);
-    }
+
+    if (transition !== undefined) config.transition = transition; // Check if modal is already in the stack.
+
+    var index = _this2.stack.findIndex(function (entry) {
+      return entry.id === modal.id;
+    }); // If modal is already open.
+
+
+    if (index >= 0) {
+      // Remove modal from stack array.
+      _this2.stack.splice(index, 1); // Move back to end of stack.
+
+
+      _this2.stack.push(modal);
+    } // If modal is closed.
+
+
+    var _temp4 = function () {
+      if (modal.state === 'closed') {
+        // 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.
+
+        _this2.stack.push(modal); // Run the open transition.
+
+
+        return Promise.resolve(openTransition(modal.target, config)).then(function () {
+          // Update modal state.
+          modal.state = 'opened';
+        });
+      }
+    }();
+
+    return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
   } catch (e) {
     return Promise.reject(e);
   }
 };
 
-var Modal = /*#__PURE__*/function () {
-  function Modal(options) {
-    this.defaults = defaults$1;
-    this.settings = _extends({}, this.defaults, options);
-    this.working = false;
-    this.memory = {};
-    this.focusTrap = new FocusTrap();
-    this.__handlerClick = handlerClick$1.bind(this);
-    this.__handlerKeydown = handlerKeydown$1.bind(this);
-    if (this.settings.autoInit) this.init();
+var close$1 = function close(query, transition, bulk) {
+  if (bulk === void 0) {
+    bulk = false;
   }
 
-  var _proto = Modal.prototype;
+  try {
+    var _this2 = this;
 
-  _proto.init = function init(options) {
-    if (options === void 0) {
-      options = null;
-    }
+    // Get the modal from collection, or top modal in stack if no query is provided.
+    var modal = query ? getModal.call(_this2, query) : _this2.active; // If a modal exists and its state is opened.
 
-    if (options) this.settings = _extends({}, this.settings, options);
-    this.moveModals();
-    this.setInitialState();
+    var _temp2 = function () {
+      if (modal && modal.state === 'opened') {
+        // Update modal state.
+        modal.state = 'closing'; // Get the modal configuration.
 
-    if (this.settings.setTabindex) {
-      this.setTabindex();
-    }
+        var config = _extends({}, _this2.settings, modal.settings); // Add transition parameter to configuration.
 
-    if (this.settings.eventListeners) {
-      this.initEventListeners();
-    }
-  };
 
-  _proto.destroy = function destroy() {
-    this.memory = {};
+        if (transition !== undefined) config.transition = transition; // Remove focus from active element.
 
-    if (this.settings.eventListeners) {
-      this.destroyEventListeners();
-    }
+        document.activeElement.blur(); // Run the close transition.
+
+        return Promise.resolve(closeTransition(modal.target, config)).then(function () {
+          // Remove z-index styles.
+          modal.target.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.
+
+
+          if (!bulk) {
+            updateFocusState.call(_this2);
+          } // Update modal state.
+
+
+          modal.state = 'closed'; // Dispatch custom closed event.
+
+          modal.target.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
+            detail: _this2,
+            bubbles: true
+          }));
+        });
+      }
+    }();
+
+    return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {
+      // Return the modal.
+      return modal;
+    }) : modal);
+  } catch (e) {
+    return Promise.reject(e);
   }
-  /**
-   * Event listeners
-   */
-  ;
+};
 
-  _proto.initEventListeners = function initEventListeners() {
-    document.addEventListener('click', this.__handlerClick, false);
-    document.addEventListener('touchend', this.__handlerClick, false);
-    document.addEventListener('keydown', this.__handlerKeydown, false);
-  };
+var closeAll$1 = function closeAll(exclude, transition) {
+  try {
+    var _this2 = this;
 
-  _proto.destroyEventListeners = function destroyEventListeners() {
-    document.removeEventListener('click', this.__handlerClick, false);
-    document.removeEventListener('touchend', this.__handlerClick, false);
-    document.removeEventListener('keydown', this.__handlerKeydown, false);
+    var result = [];
+    return Promise.resolve(Promise.all(_this2.stack.map(function (modal) {
+      try {
+        var _temp3 = function _temp3() {
+          modal.trigger = null;
+        };
+
+        var _temp4 = function () {
+          if (exclude && exclude === modal.id) {
+            Promise.resolve();
+          } else {
+            var _push2 = result.push;
+            return Promise.resolve(close$1.call(_this2, modal, transition, true)).then(function (_close$call) {
+              _push2.call(result, _close$call);
+            });
+          }
+        }();
+
+        return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }))).then(function () {
+      return result;
+    });
+  } catch (e) {
+    return Promise.reject(e);
   }
-  /**
-   * Helpers
-   */
-  ;
+};
 
-  _proto.getModal = function getModal$1(modalKey) {
-    return getModal.call(this, modalKey);
-  };
+var replace = function replace(query, transition) {
+  try {
+    var _temp3 = function _temp3() {
+      // Update the focus state.
+      updateFocusState.call(_this2); // Return the modals there were opened and closed.
 
-  _proto.setTabindex = function setTabindex$1() {
-    return setTabindex("\n      [data-" + this.settings.dataModal + "]\n      [data-" + this.settings.dataDialog + "]\n    ");
-  };
+      return {
+        opened: resultOpened,
+        closed: resultClosed
+      };
+    };
 
-  _proto.setInitialState = function setInitialState$1() {
-    return setInitialState.call(this);
-  };
+    var _this2 = this;
+
+    // Get the modal from collection.
+    var modal = getModal.call(_this2, query); // Setup results for return.
 
-  _proto.moveModals = function moveModals$1(type, ref) {
-    return moveModals.call(this, type, ref);
+    var resultOpened, resultClosed;
+
+    var _temp4 = function () {
+      if (modal.state === 'opened') {
+        // If modal is open, close all modals except for replacement.
+        resultOpened = modal;
+        return Promise.resolve(closeAll$1.call(_this2, modal.id, transition)).then(function (_closeAll$call) {
+          resultClosed = _closeAll$call;
+        });
+      } else {
+        // If modal is closed, close all and open replacement at the same time.
+        resultOpened = open$1.call(_this2, modal, transition, true);
+        resultClosed = closeAll$1.call(_this2, false, transition);
+        return Promise.resolve(Promise.all([resultOpened, resultClosed])).then(function () {});
+      }
+    }();
+
+    return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp3) : _temp3(_temp4));
+  } catch (e) {
+    return Promise.reject(e);
   }
-  /**
-   * Change state functionality
-   */
-  ;
+};
 
-  _proto.open = function open(modalKey) {
-    return open$1.call(this, modalKey);
-  };
+var register$1 = function register(target, dialog) {
+  try {
+    var _this2 = this;
 
-  _proto.close = function close(returnFocus) {
-    return close$1.call(this, returnFocus);
-  };
+    // Deregister entry incase it has already been registered.
+    return Promise.resolve(deregister$1.call(_this2, target, 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);
+        },
+        close: function close(transition) {
+          return close$1.call(root, this, transition);
+        },
+        replace: function replace$1(transition) {
+          return replace.call(root, this, transition);
+        },
+        deregister: function deregister() {
+          return deregister$1.call(root, this);
+        },
+        teleport: function teleport$1(ref, method) {
+          if (ref === void 0) {
+            ref = this.getSetting('teleport');
+          }
 
-  return Modal;
-}();
+          if (method === void 0) {
+            method = this.getSetting('teleportMethod');
+          }
 
-var Collection = /*#__PURE__*/function () {
-  function Collection() {
-    this.collection = [];
-  }
+          if (!this.returnRef) {
+            this.returnRef = teleport(this.target, ref, method);
+            return this.target;
+          } else {
+            console.error('Element has already been teleported:', this.target);
+            return false;
+          }
+        },
+        teleportReturn: function teleportReturn() {
+          if (this.returnRef) {
+            this.returnRef = teleport(this.target, this.returnRef);
+            return this.target;
+          } else {
+            console.error('No return reference found:', this.target);
+            return false;
+          }
+        },
+        getSetting: function getSetting(key) {
+          return key in this.settings ? this.settings[key] : root.settings[key];
+        }
+      }; // Setup the modal object.
 
-  var _proto = Collection.prototype;
+      var entry = _extends({
+        id: target.id,
+        state: 'closed',
+        settings: getConfig$1.call(_this2, target),
+        target: target,
+        dialog: dialog,
+        returnRef: null
+      }, methods); // Set aria-modal attribute to true.
 
-  _proto.register = function register(item) {
-    this.deregister(item);
-    this.collection.push(item);
-    return this.collection;
-  };
 
-  _proto.deregister = function deregister(ref) {
-    var index = this.collection.findIndex(function (entry) {
-      return entry === ref;
-    });
+      entry.dialog.setAttribute('aria-modal', 'true'); // If a role attribute is not set, set it to "dialog" as the default.
 
-    if (index >= 0) {
-      var entry = this.collection[index];
-      Object.getOwnPropertyNames(entry).forEach(function (prop) {
-        delete entry[prop];
-      });
-      this.collection.splice(index, 1);
-    }
+      if (!entry.dialog.hasAttribute('role')) {
+        entry.dialog.setAttribute('role', 'dialog');
+      } // Set tabindex="-1" so dialog is focusable via JS or click.
 
-    return this.collection;
-  };
 
-  _proto.registerCollection = function registerCollection(items) {
-    var _this = this;
+      if (entry.getSetting('setTabindex')) {
+        entry.dialog.setAttribute('tabindex', '-1');
+      } // Teleport modal if a reference has been set.
 
-    items.forEach(function (item) {
-      _this.register(item);
-    });
-    return this.collection;
-  };
 
-  _proto.deregisterCollection = function deregisterCollection() {
-    while (this.collection.length > 0) {
-      this.deregister(this.collection[0]);
-    }
+      if (entry.getSetting('teleport')) {
+        entry.teleport();
+      } // Add entry to collection.
 
-    return this.collection;
-  };
 
-  _proto.get = function get(query, key) {
-    if (key === void 0) {
-      key = 'id';
-    }
+      _this2.collection.push(entry); // Setup initial state.
 
-    var result = this.collection.find(function (item) {
-      return item[key] === query;
-    });
-    return result || null;
-  };
 
-  return Collection;
-}();
+      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.
 
-var defaults = {
-  autoInit: false,
-  // Selectors
-  selectorPopover: '.popover',
-  selectorArrow: '.popover__arrow',
-  // State classes
-  stateActive: 'is-active',
-  // Feature toggles
-  eventListeners: true,
-  eventType: 'click',
-  placement: 'bottom'
+        entry.target.classList.add(_this2.settings.stateClosed);
+      } // Return the registered entry.
+
+
+      return entry;
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
 };
 
-function close(popover) {
-  // Update state class
-  popover.target.classList.remove(this.settings.stateActive); // Update a11y attributes
+var Modal = /*#__PURE__*/function (_Collection) {
+  _inheritsLoose(Modal, _Collection);
+
+  function Modal(options) {
+    var _this;
+
+    _this = _Collection.call(this) || this;
+    _this.defaults = defaults$1;
+    _this.settings = _extends({}, _this.defaults, options);
+    _this.memory = {};
+    _this.focusTrap = new FocusTrap(); // Setup a proxy for stack array.
 
-  popover.trigger.setAttribute('aria-expanded', 'false'); // Disable popper event listeners
+    _this.stack = new Proxy([], {
+      set: function set(target, property, value) {
+        target[property] = value; // Update global state whenever the length property of stack changes.
 
-  popover.popper.setOptions({
-    modifiers: [{
-      name: 'eventListeners',
-      enabled: false
-    }]
-  }); // Update popover state
+        if (property === 'length') {
+          updateGlobalState.call(_assertThisInitialized(_this));
+        }
 
-  popover.state = 'closed'; // Clear memory if popover trigger matches the one saved in memory
+        return true;
+      }
+    });
+    _this.__handleClick = handleClick.bind(_assertThisInitialized(_this));
+    _this.__handleKeydown = handleKeydown.bind(_assertThisInitialized(_this));
+    if (_this.settings.autoInit) _this.init();
+    return _this;
+  }
 
-  if (popover.trigger === this.memory.trigger) {
-    this.memory.trigger = null;
-  } // Return the popover
+  var _proto = Modal.prototype;
 
+  _proto.init = function init(options) {
+    try {
+      var _this3 = this;
 
-  return popover;
-}
-function closeAll() {
-  this.collection.forEach(function (popover) {
-    if (popover.state === 'opened') {
-      popover.close();
+      // Update settings with passed options.
+      if (options) _this3.settings = _extends({}, _this3.settings, options); // Get all the modals.
+
+      var modals = document.querySelectorAll(_this3.settings.selectorModal); // Register the collections array with modal instances.
+
+      return Promise.resolve(_this3.registerCollection(modals)).then(function () {
+        if (_this3.settings.eventListeners) {
+          _this3.initEventListeners();
+        }
+      }); // If eventListeners are enabled, init event listeners.
+    } catch (e) {
+      return Promise.reject(e);
     }
-  }); // Return the collection
+  };
 
-  return this.collection;
-}
-function closeCheck(popover) {
-  // Only run closeCheck if provided popover is currently open
-  if (popover.state != 'opened') return; // Needed to correctly check which element is currently being focused
+  _proto.destroy = function destroy() {
+    try {
+      var _this5 = this;
 
-  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
+      // Clear any stored memory.
+      _this5.memory = {}; // Remove all entries from the collection.
 
-    var isFocused = document.activeElement.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"]"); // Close if the trigger and target are not currently hovered or focused
+      return Promise.resolve(_this5.deregisterCollection()).then(function () {
+        if (_this5.settings.eventListeners) {
+          _this5.destroyEventListeners();
+        }
+      }); // If eventListeners are enabled, destroy event listeners.
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-    if (!isHovered && !isFocused) {
-      popover.close();
-    } // Return the popover
+  _proto.initEventListeners = function initEventListeners() {
+    document.addEventListener('click', this.__handleClick, false);
+    document.addEventListener('touchend', this.__handleClick, false);
+    document.addEventListener('keydown', this.__handleKeydown, false);
+  };
 
+  _proto.destroyEventListeners = function destroyEventListeners() {
+    document.removeEventListener('click', this.__handleClick, false);
+    document.removeEventListener('touchend', this.__handleClick, false);
+    document.removeEventListener('keydown', this.__handleKeydown, false);
+  };
 
-    return popover;
-  }, 1);
-}
+  _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);
+  };
 
-function handlerClick(popover) {
-  if (popover.target.classList.contains(this.settings.stateActive)) {
-    popover.close();
-  } else {
-    this.memory.trigger = popover.trigger;
-    popover.open();
-    documentClick.call(this, popover);
-  }
-}
-function handlerKeydown(event) {
-  var _this = this;
+  _proto.deregister = function deregister(query) {
+    var modal = this.get(getModalID.call(this, query));
+    return deregister$1.call(this, modal);
+  };
+
+  _proto.open = function open(id, transition) {
+    return open$1.call(this, id, transition);
+  };
+
+  _proto.close = function close(id, transition) {
+    return close$1.call(this, id, transition);
+  };
 
-  switch (event.key) {
-    case 'Escape':
-      if (this.memory.trigger) {
-        this.memory.trigger.focus();
-      }
+  _proto.replace = function replace$1(id, transition) {
+    return replace.call(this, id, transition);
+  };
 
-      closeAll.call(this);
-      return;
+  _proto.closeAll = function closeAll(exclude, transition) {
+    if (exclude === void 0) {
+      exclude = false;
+    }
 
-    case 'Tab':
-      this.collection.forEach(function (popover) {
-        closeCheck.call(_this, popover);
+    try {
+      var _this7 = this;
+
+      return Promise.resolve(closeAll$1.call(_this7, exclude, transition)).then(function (result) {
+        updateFocusState.call(_this7);
+        return result;
       });
-      return;
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
 
-    default:
-      return;
-  }
-}
-function documentClick(popover) {
-  var root = this;
-  document.addEventListener('click', function _f(event) {
-    // Check if a popover was clicked
-    var result = event.target.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"]");
+  _createClass(Modal, [{
+    key: "active",
+    get: function get() {
+      return this.stack[this.stack.length - 1];
+    }
+  }]);
 
-    if (!result) {
-      // If it doesn't match and popover is open, close it and remove event listener
-      if (popover.target && popover.target.classList.contains(root.settings.stateActive)) {
-        popover.close();
-      }
+  return Modal;
+}(Collection);
 
-      this.removeEventListener('click', _f);
-    } else {
-      // If it does match and popover isn't currently active, remove event listener
-      if (popover.target && !popover.target.classList.contains(root.settings.stateActive)) {
-        this.removeEventListener('click', _f);
-      }
-    }
-  });
-}
+var defaults = {
+  autoInit: false,
+  // Selectors
+  selectorPopover: '.popover',
+  selectorArrow: '.popover__arrow',
+  // State classes
+  stateActive: 'is-active',
+  // Feature settings
+  eventListeners: true,
+  eventType: 'click',
+  placement: 'bottom'
+};
 
 function getConfig(el, settings) {
-  // Get the computed styles of the popover
-  var styles = getComputedStyle(el); // Setup the config obj with default values
+  // Get the computed styles of the element.
+  var styles = getComputedStyle(el); // Setup the config obj with default values.
 
   var config = {
     'placement': settings.placement,
@@ -1485,29 +1978,29 @@ function getConfig(el, settings) {
     'flip-padding': 0,
     'arrow-element': settings.selectorArrow,
     'arrow-padding': 0
-  }; // Loop through config obj
+  }; // Loop through config obj.
 
   for (var prop in config) {
-    // Get the CSS variable property values
+    // Get the CSS variable property values.
     var prefix = getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
-    var value = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim(); // If a value was found, replace the default in config obj
+    var value = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim(); // If a value was found, replace the default in config obj.
 
     if (value) {
       config[prop] = value;
     }
-  } // Return the config obj
+  } // Return the config obj.
 
 
   return config;
 }
 function getPadding(value) {
-  var padding; // Split the value by spaces if it's a string
+  var padding; // Split the value by spaces if it's a string.
 
-  var array = typeof value === 'string' ? value.trim().split(' ') : [value]; // Convert individual values to integers
+  var array = typeof value === 'string' ? value.trim().split(' ') : [value]; // Convert individual values to integers.
 
   array.forEach(function (item, index) {
     array[index] = parseInt(item, 10);
-  }); // Build the padding object based on the number of values passed
+  }); // Build the padding object based on the number of values passed.
 
   switch (array.length) {
     case 1:
@@ -1544,7 +2037,7 @@ function getPadding(value) {
     default:
       padding = false;
       break;
-  } // Return the padding object
+  } // Return the padding object.
 
 
   return padding;
@@ -1573,43 +2066,59 @@ 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.
+
+  if (entry) {
+    return entry;
+  } else {
+    throw new Error("Popover not found in collection with id of \"" + query + "\".");
+  }
+}
 function getPopoverID(obj) {
-  // If it's a string
+  // If it's a string, return the string.
   if (typeof obj === 'string') {
     return obj;
-  } // If it's an HTML element
+  } // If it's an HTML element.
   else if (typeof obj.hasAttribute === 'function') {
-    // If it's a popover trigger
-    if (obj.hasAttribute('aria-controls')) {
-      return obj.getAttribute('aria-controls');
-    } // If it's a popover target
-    else if (obj.closest(this.settings.selectorPopover)) {
+    // If it's a popover target, return the id.
+    if (obj.closest(this.settings.selectorPopover)) {
+      obj = obj.closest(this.settings.selectorPopover);
       return obj.id;
-    } // Return false if no id was found
+    } // If it's a popover trigger, return value of aria-controls.
+    else if (obj.hasAttribute('aria-controls')) {
+      return obj.getAttribute('aria-controls');
+    } // If it's a popover tooltip trigger, return the value of aria-describedby.
+    else if (obj.hasAttribute('aria-describedby')) {
+      return obj.getAttribute('aria-describedby');
+    } // Return false if no id was found.
     else return false;
-  } // If it has an ID property
+  } // If it has an id property, return its value.
   else if (obj.id) {
     return obj.id;
-  } // Return false if no id was found
+  } // Return false if no id was found.
   else return false;
 }
 function getPopoverElements(query) {
   var id = getPopoverID.call(this, query);
 
   if (id) {
-    var trigger = document.querySelector("[aria-controls=\"" + id + "\"]");
+    var trigger = document.querySelector("[aria-controls=\"" + id + "\"]") || document.querySelector("[aria-describedby=\"" + id + "\"]");
     var target = document.querySelector("#" + id);
 
     if (!trigger && !target) {
-      console.error('No popover elements found using the provided ID:', id);
+      return {
+        error: new Error("No popover elements found using the ID: \"" + id + "\".")
+      };
     } else if (!trigger) {
-      console.error('No popover trigger associated with the provided popover:', target);
+      return {
+        error: new Error('No popover trigger associated with the provided popover.')
+      };
     } else if (!target) {
-      console.error('No popover associated with the provided popover trigger:', trigger);
-    }
-
-    if (!trigger || !target) {
-      return false;
+      return {
+        error: new Error('No popover associated with the provided popover trigger.')
+      };
     } else {
       return {
         trigger: trigger,
@@ -1617,10 +2126,149 @@ function getPopoverElements(query) {
       };
     }
   } else {
-    console.error('Could not resolve the popover ID:', query);
-    return false;
+    return {
+      error: new Error('Could not resolve the popover ID.')
+    };
+  }
+}
+
+var closeAll = function closeAll() {
+  try {
+    var _this4 = this;
+
+    var result = [];
+    return Promise.resolve(Promise.all(_this4.collection.map(function (popover) {
+      try {
+        var _temp4 = function () {
+          if (popover.state === 'opened') {
+            var _push2 = result.push;
+            return Promise.resolve(close.call(_this4, popover)).then(function (_close$call) {
+              _push2.call(result, _close$call);
+            });
+          }
+        }();
+
+        return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }))).then(function () {
+      return result;
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var close = function close(query) {
+  try {
+    var _temp2 = function _temp2(popover) {
+      // If a modal exists and its state is opened.
+      if (popover && popover.state === 'opened') {
+        // Update state class.
+        popover.target.classList.remove(_this2.settings.stateActive); // Update accessibility attribute(s).
+
+        if (popover.trigger.hasAttribute('aria-controls')) {
+          popover.trigger.setAttribute('aria-expanded', 'false');
+        } // Disable popper event listeners.
+
+
+        popover.popper.setOptions({
+          modifiers: [{
+            name: 'eventListeners',
+            enabled: false
+          }]
+        }); // Update popover state.
+
+        popover.state = 'closed'; // Clear memory if popover trigger matches the one saved in memory.
+
+        if (popover.trigger === _this2.memory.trigger) {
+          _this2.memory.trigger = null;
+        }
+      } // Return the popover.
+
+
+      return popover;
+    };
+
+    var _this2 = this;
+
+    // Get the popover from collection.
+    return Promise.resolve(query ? _temp2(getPopover.call(_this2, query)) : Promise.resolve(closeAll.call(_this2)).then(_temp2));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+function closeCheck(popover) {
+  // Only run closeCheck if provided popover is currently open.
+  if (popover.state != 'opened') return; // Needed to correctly check which element is currently being focused.
+
+  setTimeout(function () {
+    // Check if trigger or 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.
+
+    var isFocused = document.activeElement.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"]"); // Close if the trigger and target are not currently hovered or focused.
+
+    if (!isHovered && !isFocused) {
+      popover.close();
+    } // Return the popover.
+
+
+    return popover;
+  }, 1);
+}
+
+function handlerClick(popover) {
+  if (popover.state === 'opened') {
+    popover.close();
+  } else {
+    this.memory.trigger = popover.trigger;
+    popover.open();
+    documentClick.call(this, popover);
+  }
+}
+function handlerKeydown(event) {
+  var _this = this;
+
+  switch (event.key) {
+    case 'Escape':
+      if (this.memory.trigger) {
+        this.memory.trigger.focus();
+      }
+
+      closeAll.call(this);
+      return;
+
+    case 'Tab':
+      this.collection.forEach(function (popover) {
+        closeCheck.call(_this, popover);
+      });
+      return;
+
+    default:
+      return;
   }
 }
+function documentClick(popover) {
+  var root = this;
+  document.addEventListener('click', function _f(event) {
+    // Check if a popover was clicked.
+    var result = event.target.closest("#" + popover.id + ", [aria-controls=\"" + popover.id + "\"]");
+
+    if (!result) {
+      // If it doesn't match and popover is open, close it and remove event listener.
+      if (popover.target && popover.target.classList.contains(root.settings.stateActive)) {
+        popover.close();
+      }
+
+      this.removeEventListener('click', _f);
+    } else {
+      // If it does match and popover isn't currently active, remove event listener.
+      if (popover.target && !popover.target.classList.contains(root.settings.stateActive)) {
+        this.removeEventListener('click', _f);
+      }
+    }
+  });
+}
 
 var top = 'top';
 var bottom = 'bottom';
@@ -1922,6 +2570,10 @@ function getContainingBlock(element) {
 
   var currentNode = getParentNode(element);
 
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
   while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
     var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that
     // create a containing block.
@@ -2145,7 +2797,7 @@ function mapToStyles(_ref2) {
 
     if (placement === top || (placement === left || placement === right) && variation === end) {
       sideY = bottom;
-      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
       offsetParent[heightProp];
       y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
@@ -2153,7 +2805,7 @@ function mapToStyles(_ref2) {
 
     if (placement === left || (placement === top || placement === bottom) && variation === end) {
       sideX = right;
-      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
       offsetParent[widthProp];
       x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
@@ -3405,166 +4057,201 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-function open(popover) {
-  // Update state class
-  popover.target.classList.add(this.settings.stateActive); // Update a11y attribute
+var deregister = function deregister(obj) {
+  try {
+    var _this2 = this;
+
+    // Return collection if nothing was passed.
+    if (!obj) return Promise.resolve(_this2.collection); // Check if entry has been registered in the collection.
+
+    var index = _this2.collection.findIndex(function (entry) {
+      return entry.id === obj.id;
+    });
+
+    if (index >= 0) {
+      // Get the collection entry.
+      var entry = _this2.collection[index]; // If entry is in the opened state, close it.
+
+      if (entry.state === 'opened') {
+        entry.close();
+      } // Clean up the popper instance.
+
 
-  popover.trigger.setAttribute('aria-expanded', 'true'); // Update popover config
+      entry.popper.destroy(); // Remove event listeners.
 
-  popover.config = getConfig(popover.target, this.settings); // Enable popper event listeners and set placement/modifiers
+      deregisterEventListeners(entry); // Delete properties from collection entry.
+
+      Object.getOwnPropertyNames(entry).forEach(function (prop) {
+        delete entry[prop];
+      }); // Remove entry from collection.
+
+      _this2.collection.splice(index, 1);
+    } // Return the modified collection.
+
+
+    return Promise.resolve(_this2.collection);
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+function deregisterEventListeners(entry) {
+  // If event listeners have been setup.
+  if (entry.__eventListeners) {
+    // Loop through listeners and remove from the appropriate elements.
+    entry.__eventListeners.forEach(function (evObj) {
+      evObj.el.forEach(function (el) {
+        evObj.type.forEach(function (type) {
+          entry[el].removeEventListener(type, evObj.listener, false);
+        });
+      });
+    }); // Remove eventListeners object from collection.
 
-  popover.popper.setOptions({
-    placement: popover.config['placement'],
-    modifiers: [{
-      name: 'eventListeners',
-      enabled: true
-    }].concat(getModifiers(popover.config))
-  }); // Update popover position
 
-  popover.popper.update(); // Update popover state
+    delete entry.__eventListeners;
+  } // Return the entry object.
 
-  popover.state = 'opened'; // Return the popover
 
-  return popover;
+  return entry;
 }
 
-function register(trigger, target) {
-  // Deregister popover if it already exists in the collection
-  this.deregister(target.id); // Create popper instance
+var open = function open(query) {
+  try {
+    var _this2 = this;
 
-  var popperInstance = createPopper(trigger, target); // Save root this for use inside object & create methods API
+    // Get the popover from collection.
+    var popover = getPopover.call(_this2, query); // Update state class.
 
-  var root = this;
-  var methods = {
-    open: function open$1() {
-      open.call(root, this);
-    },
-    close: function close$1() {
-      close.call(root, this);
-    },
-    deregister: function deregister() {
-      _deregister.call(root, this);
-    }
-  }; // Build popover object and push to collection array
+    popover.target.classList.add(_this2.settings.stateActive); // Update accessibility attribute(s).
 
-  var popover = _extends({
-    id: target.id,
-    state: 'closed',
-    trigger: trigger,
-    target: target,
-    popper: popperInstance,
-    config: getConfig(target, this.settings)
-  }, methods); // Setup event listeners
+    if (popover.trigger.hasAttribute('aria-controls')) {
+      popover.trigger.setAttribute('aria-expanded', 'true');
+    } // Update popover config.
 
 
-  registerEventListeners.call(this, popover); // Set initial state of popover
+    popover.config = getConfig(popover.target, _this2.settings); // Enable popper event listeners and set placement/modifiers.
 
-  if (popover.target.classList.contains(this.settings.stateActive)) {
-    popover.open();
-    documentClick.call(this, popover);
-  } else {
-    popover.close();
-  } // Add item to collection
+    popover.popper.setOptions({
+      placement: popover.config['placement'],
+      modifiers: [{
+        name: 'eventListeners',
+        enabled: true
+      }].concat(getModifiers(popover.config))
+    }); // Update popover position.
 
+    popover.popper.update(); // Update popover state.
 
-  this.collection.push(popover); // Return the popover object
+    popover.state = 'opened'; // Return the popover.
 
-  return popover;
-}
+    return Promise.resolve(popover);
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
+var register = function register(trigger, target) {
+  try {
+    var _this2 = this;
 
-function _deregister(popover) {
-  // Check if this item has been registered in the collection
-  var index = this.collection.findIndex(function (entry) {
-    return entry.id === popover.id;
-  }); // If the entry exists in the collection
+    // Deregister entry incase it has already been registered.
+    deregister.call(_this2, target); // Save root this for use inside methods API.
 
-  if (index >= 0) {
-    // Get the collection entry
-    var entry = this.collection[index]; // Close the collection entry if it's open
 
-    if (entry.state === 'opened') {
-      entry.close();
-    } // Clean up the popper instance
+    var root = _this2; // Setup methods API.
 
+    var methods = {
+      open: function open$1() {
+        return open.call(root, this);
+      },
+      close: function close$1() {
+        return close.call(root, this);
+      },
+      deregister: function deregister$1() {
+        return deregister.call(root, this);
+      }
+    }; // Setup the popover object.
 
-    entry.popper.destroy(); // Remove event listeners
+    var entry = _extends({
+      id: target.id,
+      state: 'closed',
+      trigger: trigger,
+      target: target,
+      popper: createPopper(trigger, target),
+      config: getConfig(target, _this2.settings)
+    }, methods); // Set aria-expanded to false if trigger has aria-controls attribute.
 
-    deregisterEventListeners(entry); // Delete properties from collection entry
 
-    Object.getOwnPropertyNames(entry).forEach(function (prop) {
-      delete entry[prop];
-    }); // Remove entry from collection
+    if (entry.trigger.hasAttribute('aria-controls')) {
+      entry.trigger.setAttribute('aria-expanded', 'false');
+    } // Setup event listeners.
 
-    this.collection.splice(index, 1);
-  } // Return the new collection
 
+    registerEventListeners.call(_this2, entry); // Add entry to collection.
 
-  return this.collection;
-}
-function registerEventListeners(popover) {
-  // If event listeners aren't already setup
-  if (!popover.__eventListeners) {
-    // Add event listeners based on event type
-    var eventType = popover.config['event'];
+    _this2.collection.push(entry); // Set initial state.
+
+
+    var _temp2 = function () {
+      if (entry.target.classList.contains(_this2.settings.stateActive)) {
+        return Promise.resolve(entry.open()).then(function () {
+          documentClick.call(_this2, entry);
+        });
+      }
+    }();
+
+    return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {
+      // Return the registered entry.
+      return entry;
+    }) : entry);
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+function registerEventListeners(entry) {
+  // If event listeners aren't already setup.
+  if (!entry.__eventListeners) {
+    // Add event listeners based on event type.
+    var eventType = entry.config['event']; // If the event type is hover.
 
     if (eventType === 'hover') {
-      // Setup event listeners object for hover
-      popover.__eventListeners = [{
+      // Setup event listeners object for hover.
+      entry.__eventListeners = [{
         el: ['trigger'],
         type: ['mouseenter', 'focus'],
-        listener: open.bind(this, popover)
+        listener: open.bind(this, entry)
       }, {
         el: ['trigger', 'target'],
         type: ['mouseleave', 'focusout'],
-        listener: closeCheck.bind(this, popover)
-      }]; // Loop through listeners and apply to appropriate elements
+        listener: closeCheck.bind(this, entry)
+      }]; // Loop through listeners and apply to the appropriate elements.
 
-      popover.__eventListeners.forEach(function (evObj) {
+      entry.__eventListeners.forEach(function (evObj) {
         evObj.el.forEach(function (el) {
           evObj.type.forEach(function (type) {
-            popover[el].addEventListener(type, evObj.listener, false);
+            entry[el].addEventListener(type, evObj.listener, false);
           });
         });
       });
-    } else {
-      // Setup event listeners object for click
-      popover.__eventListeners = [{
+    } // Else the event type is click.
+    else {
+      // Setup event listeners object for click.
+      entry.__eventListeners = [{
         el: ['trigger'],
         type: ['click'],
-        listener: handlerClick.bind(this, popover)
-      }]; // Loop through listeners and apply to appropriate elements
+        listener: handlerClick.bind(this, entry)
+      }]; // Loop through listeners and apply to the appropriate elements.
 
-      popover.__eventListeners.forEach(function (evObj) {
+      entry.__eventListeners.forEach(function (evObj) {
         evObj.el.forEach(function (el) {
           evObj.type.forEach(function (type) {
-            popover[el].addEventListener(type, evObj.listener, false);
+            entry[el].addEventListener(type, evObj.listener, false);
           });
         });
       });
     }
-  } // Return the popover object
-
-
-  return popover;
-}
-function deregisterEventListeners(popover) {
-  // If event listeners have been setup
-  if (popover.__eventListeners) {
-    // Loop through listeners and remove from appropriate elements
-    popover.__eventListeners.forEach(function (evObj) {
-      evObj.el.forEach(function (el) {
-        evObj.type.forEach(function (type) {
-          popover[el].removeEventListener(type, evObj.listener, false);
-        });
-      });
-    }); // Remove eventListeners object from collection
-
-
-    delete popover.__eventListeners;
-  } // Return the popover object
+  } // Return the entry object.
 
 
-  return popover;
+  return entry;
 }
 
 var Popover = /*#__PURE__*/function (_Collection) {
@@ -3575,11 +4262,8 @@ var Popover = /*#__PURE__*/function (_Collection) {
 
     _this = _Collection.call(this) || this;
     _this.defaults = defaults;
-    _this.settings = _extends({}, _this.defaults, options); // this.collection = [];
-
-    _this.memory = {
-      trigger: null
-    };
+    _this.settings = _extends({}, _this.defaults, options);
+    _this.memory = {};
     _this.__handlerKeydown = handlerKeydown.bind(_assertThisInitialized(_this));
     if (_this.settings.autoInit) _this.init();
     return _this;
@@ -3588,52 +4272,58 @@ var Popover = /*#__PURE__*/function (_Collection) {
   var _proto = Popover.prototype;
 
   _proto.init = function init(options) {
-    if (options === void 0) {
-      options = null;
-    }
-
-    // Update settings with passed options
-    if (options) this.settings = _extends({}, this.settings, options); // Get all the popovers
+    try {
+      var _this3 = this;
 
-    var popovers = document.querySelectorAll(this.settings.selectorPopover); // Build the collections array with popover instances
+      // Update settings with passed options.
+      if (options) _this3.settings = _extends({}, _this3.settings, options); // Get all the popovers.
 
-    this.registerCollection(popovers); // If eventListeners is enabled
+      var popovers = document.querySelectorAll(_this3.settings.selectorPopover); // Register the collections array with popover instances.
 
-    if (this.settings.eventListeners) {
-      // Pass false to initEventListeners() since registerCollection()
-      // already adds event listeners to popovers
-      this.initEventListeners(false);
+      return Promise.resolve(_this3.registerCollection(popovers)).then(function () {
+        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.
+    } catch (e) {
+      return Promise.reject(e);
     }
   };
 
   _proto.destroy = function destroy() {
-    // Deregister all popovers from collection
-    this.deregisterCollection(); // If eventListeners is enabled
+    try {
+      var _this5 = this;
 
-    if (this.settings.eventListeners) {
-      // Pass false to destroyEventListeners() since deregisterCollection()
-      // already removes event listeners from popovers
-      this.destroyEventListeners(false);
+      // Clear any stored memory.
+      _this5.memory = {}; // Remove all entries from the collection.
+
+      return Promise.resolve(_this5.deregisterCollection()).then(function () {
+        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.
+    } catch (e) {
+      return Promise.reject(e);
     }
-  }
-  /**
-   * Event listeners
-   */
-  ;
+  };
 
   _proto.initEventListeners = function initEventListeners(processCollection) {
-    var _this2 = this;
+    var _this6 = this;
 
     if (processCollection === void 0) {
       processCollection = true;
     }
 
     if (processCollection) {
-      // Loop through collection and setup event listeners
+      // Loop through collection and setup event listeners.
       this.collection.forEach(function (popover) {
-        registerEventListeners.call(_this2, popover);
+        registerEventListeners.call(_this6, popover);
       });
-    } // Add keydown global event listener
+    } // Add keydown global event listener.
 
 
     document.addEventListener('keydown', this.__handlerKeydown, false);
@@ -3645,50 +4335,33 @@ var Popover = /*#__PURE__*/function (_Collection) {
     }
 
     if (processCollection) {
-      // Loop through collection and remove event listeners
+      // Loop through collection and remove event listeners.
       this.collection.forEach(function (popover) {
         deregisterEventListeners(popover);
       });
-    } // Remove keydown global event listener
+    } // Remove keydown global event listener.
 
 
     document.removeEventListener('keydown', this.__handlerKeydown, false);
-  }
-  /**
-   * Register popover functionality
-   */
-  ;
+  };
 
   _proto.register = function register$1(query) {
     var els = getPopoverElements.call(this, query);
-    if (!els) return false;
+    if (els.error) return Promise.reject(els.error);
     return register.call(this, els.trigger, els.target);
   };
 
-  _proto.deregister = function deregister(query) {
-    var popover = this.get(getPopoverID(query));
-    if (!popover) return false;
-    return _deregister.call(this, popover);
-  }
-  /**
-   * Change state functionality
-   */
-  ;
+  _proto.deregister = function deregister$1(query) {
+    var popover = this.get(getPopoverID.call(this, query));
+    return deregister.call(this, popover);
+  };
 
-  _proto.open = function open(id) {
-    var popover = this.get(id);
-    if (!popover) return false;
-    return popover.open();
+  _proto.open = function open$1(id) {
+    return open.call(this, id);
   };
 
-  _proto.close = function close(id) {
-    if (id) {
-      var popover = this.get(id);
-      if (!popover) return false;
-      return popover.close();
-    } else {
-      return closeAll.call(this);
-    }
+  _proto.close = function close$1(id) {
+    return close.call(this, id);
   };
 
   return Popover;