vrembem 3.0.10 → 4.0.0-alpha.1

package/dev/scripts.modern.mjs

@@ -2,35 +2,28 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
 }
-
 var id = 0;
-
 function _classPrivateFieldLooseKey(name) {
   return "__private_" + id++ + "_" + name;
 }
-
 function _classPrivateFieldLooseBase(receiver, privateKey) {
   if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
     throw new TypeError("attempted to use private field on non-instance");
   }
-
   return receiver;
 }
 
 var _handler = /*#__PURE__*/_classPrivateFieldLooseKey("handler");
-
 class Breakpoint {
   constructor(value, handler) {
     Object.defineProperty(this, _handler, {
@@ -41,12 +34,11 @@ class Breakpoint {
     _classPrivateFieldLooseBase(this, _handler)[_handler] = handler;
     this.mql = null;
   }
-
   get handler() {
     return _classPrivateFieldLooseBase(this, _handler)[_handler];
-  } // Unmount existing handler before setting a new one.
-
+  }
 
+  // Unmount existing handler before setting a new one.
   set handler(func) {
     if (this.mql) {
       // Conditionally use removeListener() for IE11 support.
@@ -56,66 +48,62 @@ class Breakpoint {
         this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
       }
     }
-
     _classPrivateFieldLooseBase(this, _handler)[_handler] = func;
   }
-
   mount(value, handler) {
     // Update passed params.
     if (value) this.value = value;
-    if (handler) _classPrivateFieldLooseBase(this, _handler)[_handler] = handler; // Guard if no breakpoint was set.
+    if (handler) _classPrivateFieldLooseBase(this, _handler)[_handler] = handler;
 
-    if (!this.value) return this; // Setup and store the MediaQueryList instance.
+    // Guard if no breakpoint was set.
+    if (!this.value) return this;
 
-    this.mql = window.matchMedia(`(min-width: ${this.value})`); // Conditionally use addListener() for IE11 support.
+    // 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.
-
+    }
 
+    // Run the handler.
     _classPrivateFieldLooseBase(this, _handler)[_handler](this.mql);
-
     return this;
   }
-
   unmount() {
     // Guard if no MediaQueryList instance exists.
-    if (!this.mql) return this; // Conditionally use removeListener() for IE11 support.
+    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.
-
+    }
 
+    // Set value, handler and MediaQueryList to null.
     this.value = null;
     _classPrivateFieldLooseBase(this, _handler)[_handler] = null;
     this.mql = null;
     return this;
   }
-
 }
 
 class Collection {
   constructor() {
     this.collection = [];
   }
-
   async register(item) {
     await this.deregister(item);
     this.collection.push(item);
     return this.collection;
   }
-
   async deregister(ref) {
     const index = this.collection.findIndex(entry => {
       return entry === ref;
     });
-
     if (index >= 0) {
       const entry = this.collection[index];
       Object.getOwnPropertyNames(entry).forEach(prop => {
@@ -123,54 +111,55 @@ class Collection {
       });
       this.collection.splice(index, 1);
     }
-
     return this.collection;
   }
-
   async registerCollection(items) {
     await Promise.all(Array.from(items, item => {
       this.register(item);
     }));
     return this.collection;
   }
-
   async deregisterCollection() {
     while (this.collection.length > 0) {
       await this.deregister(this.collection[0]);
     }
-
     return this.collection;
   }
-
   get(value, key = 'id') {
     return this.collection.find(item => {
       return item[key] === value;
     });
   }
-
 }
 
-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^="-"])',
+const not = {
+  inert: ':not([inert]):not([inert] *)',
+  negTabIndex: ':not([tabindex^="-"])',
+  disabled: ':not(:disabled)',
+};
+
+var e = [
+  `a[href]${not.inert}${not.negTabIndex}`,
+  `area[href]${not.inert}${not.negTabIndex}`,
+  `input:not([type="hidden"]):not([type="radio"])${not.inert}${not.negTabIndex}${not.disabled}`,
+  `input[type="radio"]${not.inert}${not.negTabIndex}${not.disabled}`,
+  `select${not.inert}${not.negTabIndex}${not.disabled}`,
+  `textarea${not.inert}${not.negTabIndex}${not.disabled}`,
+  `button${not.inert}${not.negTabIndex}${not.disabled}`,
+  `details${not.inert} > summary:first-of-type${not.negTabIndex}`,
+  // Discard until Firefox supports `:has()`
+  // See: https://github.com/KittyGiraudel/focusable-selectors/issues/12
+  // `details:not(:has(> summary))${not.inert}${not.negTabIndex}`,
+  `iframe${not.inert}${not.negTabIndex}`,
+  `audio[controls]${not.inert}${not.negTabIndex}`,
+  `video[controls]${not.inert}${not.negTabIndex}`,
+  `[contenteditable]${not.inert}${not.negTabIndex}`,
+  `[tabindex]${not.inert}${not.negTabIndex}`,
 ];
 
 var _focusable = /*#__PURE__*/_classPrivateFieldLooseKey("focusable");
-
 var _handleFocusTrap = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusTrap");
-
 var _handleFocusLock = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusLock");
-
 class FocusTrap {
   constructor(el = null, selectorFocus = '[data-focus]') {
     Object.defineProperty(this, _focusable, {
@@ -190,15 +179,14 @@ class FocusTrap {
     _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap] = handleFocusTrap.bind(this);
     _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock] = handleFocusLock.bind(this);
   }
-
   get focusable() {
     return _classPrivateFieldLooseBase(this, _focusable)[_focusable];
   }
-
   set focusable(value) {
     // Update the focusable value.
-    _classPrivateFieldLooseBase(this, _focusable)[_focusable] = value; // Apply event listeners based on new focusable array length.
+    _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]);
@@ -207,74 +195,76 @@ class FocusTrap {
       document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
     }
   }
-
   get focusableFirst() {
     return this.focusable[0];
   }
-
   get focusableLast() {
     return this.focusable[this.focusable.length - 1];
   }
-
   mount(el, selectorFocus) {
     // Update passed params.
     if (el) this.el = el;
-    if (selectorFocus) this.selectorFocus = selectorFocus; // Get the focusable elements.
+    if (selectorFocus) this.selectorFocus = selectorFocus;
 
-    this.focusable = this.getFocusable(); // Set the focus on the element.
+    // Get the focusable elements.
+    this.focusable = this.getFocusable();
 
+    // Set the focus on the element.
     this.focus();
   }
-
   unmount() {
     // Set element to null.
-    this.el = null; // Apply empty array to focusable.
+    this.el = null;
 
-    this.focusable = []; // Remove event listeners
+    // Apply empty array to focusable.
+    this.focusable = [];
 
+    // Remove event listeners
     document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
     document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
   }
-
   focus(el = this.el, selectorFocus = this.selectorFocus) {
     // Query for the focus selector, otherwise return this element.
-    const result = el.querySelector(selectorFocus) || el; // Give the returned element focus.
-
+    const result = el.querySelector(selectorFocus) || el;
+    // Give the returned element focus.
     result.focus();
   }
-
   getFocusable(el = this.el) {
     // Initialize the focusable array.
-    const focusable = []; // Store the initial focus and scroll position.
+    const focusable = [];
 
+    // Store the initial focus and scroll position.
     const initFocus = document.activeElement;
-    const initScrollTop = el.scrollTop; // Query for all the focusable elements.
+    const initScrollTop = el.scrollTop;
 
-    const els = el.querySelectorAll(focusableSelectors.join(',')); // Loop through all focusable elements.
+    // Query for all the focusable elements.
+    const els = el.querySelectorAll(e.join(','));
 
+    // Loop through all focusable elements.
     els.forEach(el => {
       // Set them to focus and check 
-      el.focus(); // Test that the element took focus.
-
+      el.focus();
+      // Test that the element took focus.
       if (document.activeElement === el) {
         // Add element to the focusable array.
         focusable.push(el);
       }
-    }); // Restore the initial scroll position and focus.
+    });
 
+    // Restore the initial scroll position and focus.
     el.scrollTop = initScrollTop;
-    initFocus.focus(); // Return the focusable array.
+    initFocus.focus();
 
+    // Return the focusable array.
     return focusable;
   }
-
 }
-
 function handleFocusTrap(event) {
   // Check if the click was a tab and return if not.
   const isTab = event.key === 'Tab' || event.keyCode === 9;
-  if (!isTab) return; // If the shift key is pressed.
+  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) {
@@ -291,7 +281,6 @@ function handleFocusTrap(event) {
     }
   }
 }
-
 function handleFocusLock(event) {
   // Ignore the tab key by preventing default.
   const isTab = event.key === 'Tab' || event.keyCode === 9;
@@ -315,18 +304,15 @@ function localStore(key, enable = true) {
     get(prop) {
       return prop ? store[prop] : store;
     },
-
     set(prop, value) {
       if (value) {
         store[prop] = value;
       } else {
         delete store[prop];
       }
-
       if (enable) localStorage.setItem(key, JSON.stringify(store));
       return store;
     }
-
   };
 }
 
@@ -344,31 +330,37 @@ function localStore(key, enable = true) {
 function teleport(what, where, how) {
   // Check if ref is either a comment or element node.
   const isComment = where.nodeType === Node.COMMENT_NODE;
-  const isElement = where.nodeType === Node.ELEMENT_NODE; // Get the reference element.
+  const isElement = where.nodeType === Node.ELEMENT_NODE;
 
-  where = isComment || isElement ? where : document.querySelector(where); // If ref is a comment, set teleport type to 'after'.
+  // Get the reference element.
+  where = isComment || isElement ? where : document.querySelector(where);
 
-  if (isComment) how = 'after'; // Must be a valid reference element and method.
+  // 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.
+  if (typeof where[how] != 'function') throw new Error(`Not a valid teleport method: '${how}'`);
 
-  let returnRef = null; // If ref is not a comment, set a return reference comment.
+  // Initial return ref is null.
+  let returnRef = null;
 
+  // If ref is not a comment, set a return reference comment.
   if (!isComment) {
     returnRef = document.createComment('teleported #' + what.id);
     what.before(returnRef);
-  } // Teleport the target node.
-
+  }
 
-  where[how](what); // Delete the comment node if element was returned to a comment reference.
+  // 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 the return reference if it was teleported else return null if it was
+  // returned to a comment reference.
   return returnRef;
 }
 
@@ -421,7 +413,6 @@ function setOverflowHidden(state, selector) {
     });
   }
 }
-
 function setInert(state, selector) {
   if (selector) {
     const els = document.querySelectorAll(selector);
@@ -436,11 +427,11 @@ function setInert(state, selector) {
     });
   }
 }
-
 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.
+  setInert(!!param, config.selectorInert);
 
+  // Set overflow state based on if a modal is active.
   setOverflowHidden(!!param, config.selectorOverflow);
 }
 
@@ -471,7 +462,6 @@ class Checkbox {
     this.__handlerClick = this.handlerClick.bind(this);
     if (this.settings.autoInit) this.init();
   }
-
   init(options = null) {
     if (options) this.settings = _extends({}, this.settings, options);
     const selector = `[${this.settings.stateAttr}="${this.settings.stateValue}"]`;
@@ -479,11 +469,9 @@ class Checkbox {
     this.setIndeterminate(mixed);
     document.addEventListener('click', this.__handlerClick, false);
   }
-
   destroy() {
     document.removeEventListener('click', this.__handlerClick, false);
   }
-
   handlerClick(event) {
     const selector = `[${this.settings.stateAttr}="${this.settings.stateValue}"]`;
     const el = event.target.closest(selector);
@@ -491,21 +479,18 @@ class Checkbox {
     this.removeAriaState(el);
     this.setIndeterminate(el);
   }
-
   setAriaState(el, value = this.settings.stateValue) {
     el = el.forEach ? el : [el];
     el.forEach(el => {
       el.setAttribute(this.settings.stateAttr, value);
     });
   }
-
   removeAriaState(el) {
     el = el.forEach ? el : [el];
     el.forEach(el => {
       el.removeAttribute(this.settings.stateAttr);
     });
   }
-
   setIndeterminate(el) {
     el = el.forEach ? el : [el];
     el.forEach(el => {
@@ -516,7 +501,6 @@ class Checkbox {
       }
     });
   }
-
 }
 
 var defaults$2 = {
@@ -557,60 +541,59 @@ function handleClick$2(event) {
     [data-${this.settings.dataToggle}],
     [data-${this.settings.dataClose}]
   `);
-
   if (trigger) {
     // Prevent the default behavior of the trigger.
-    event.preventDefault(); // If it's a toggle trigger...
+    event.preventDefault();
 
+    // If it's a toggle trigger...
     if (trigger.matches(`[data-${this.settings.dataToggle}]`)) {
       const selectors = trigger.getAttribute(`data-${this.settings.dataToggle}`).trim().split(' ');
       selectors.forEach(selector => {
         // Get the entry from collection using the attribute value.
-        const entry = this.get(selector); // Store the trigger on the entry.
-
-        entry.trigger = trigger; // Toggle the drawer
-
+        const entry = this.get(selector);
+        // Store the trigger on the entry.
+        entry.trigger = trigger;
+        // Toggle the drawer
         entry.toggle();
       });
-    } // If it's a open trigger...
-
+    }
 
+    // If it's a open trigger...
     if (trigger.matches(`[data-${this.settings.dataOpen}]`)) {
       const selectors = trigger.getAttribute(`data-${this.settings.dataOpen}`).trim().split(' ');
       selectors.forEach(selector => {
         // Get the entry from collection using the attribute value.
-        const entry = this.get(selector); // Store the trigger on the entry.
-
-        entry.trigger = trigger; // Open the drawer.
-
+        const entry = this.get(selector);
+        // Store the trigger on the entry.
+        entry.trigger = trigger;
+        // Open the drawer.
         entry.open();
       });
-    } // If it's a close trigger...
-
+    }
 
+    // If it's a close trigger...
     if (trigger.matches(`[data-${this.settings.dataClose}]`)) {
       const selectors = trigger.getAttribute(`data-${this.settings.dataClose}`).trim().split(' ');
       selectors.forEach(selector => {
         if (selector) {
           // Get the entry from collection using the attribute value.
-          const entry = this.get(selector); // Store the trigger on the entry.
-
-          entry.trigger = trigger; // Close the drawer.
-
+          const entry = this.get(selector);
+          // Store the trigger on the entry.
+          entry.trigger = trigger;
+          // Close the drawer.
           entry.close();
         } else {
           // If no value is set on close trigger, get the parent drawer.
-          const parent = event.target.closest(this.settings.selectorDrawer); // If a parent drawer was found, close it.
-
+          const parent = event.target.closest(this.settings.selectorDrawer);
+          // If a parent drawer was found, close it.
           if (parent) this.close(parent);
         }
       });
     }
-
     return;
-  } // If the modal drawer screen was clicked...
-
+  }
 
+  // If the modal drawer screen was clicked...
   if (event.target.matches(this.settings.selectorDrawer)) {
     // Close the modal drawer.
     this.close(event.target.id);
@@ -625,34 +608,38 @@ function handleKeydown$2(event) {
 
 async function deregister$2(obj, close = true) {
   // Return collection if nothing was passed.
-  if (!obj) return this.collection; // Check if entry has been registered in the collection.
+  if (!obj) return this.collection;
 
+  // Check if entry has been registered in the collection.
   const index = this.collection.findIndex(entry => {
     return entry.id === obj.id;
   });
-
   if (index >= 0) {
     // Get the collection entry.
-    const entry = this.collection[index]; // If entry is in the opened state.
+    const entry = this.collection[index];
 
+    // If entry is in the opened state.
     if (close && entry.state === 'opened') {
       // Close the drawer.
       await entry.close(false);
-    } // Remove entry from local store.
-
+    }
 
-    this.store.set(entry.id); // Unmount the MatchMedia functionality.
+    // Remove entry from local store.
+    this.store.set(entry.id);
 
-    entry.unmountBreakpoint(); // Delete properties from collection entry.
+    // Unmount the MatchMedia functionality.
+    entry.unmountBreakpoint();
 
+    // Delete properties from collection entry.
     Object.getOwnPropertyNames(entry).forEach(prop => {
       delete entry[prop];
-    }); // Remove entry from collection.
+    });
 
+    // Remove entry from collection.
     this.collection.splice(index, 1);
-  } // Return the modified collection.
-
+  }
 
+  // Return the modified collection.
   return this.collection;
 }
 
@@ -663,7 +650,6 @@ function g() {
 function getBreakpoint(drawer) {
   const prefix = g();
   const bp = drawer.getAttribute(`data-${this.settings.dataBreakpoint}`);
-
   if (this.settings.breakpoints && this.settings.breakpoints[bp]) {
     return this.settings.breakpoints[bp];
   } else if (getComputedStyle(document.body).getPropertyValue(`--${prefix}breakpoint-${bp}`).trim()) {
@@ -675,8 +661,9 @@ function getBreakpoint(drawer) {
 
 function getDrawer(query) {
   // Get the entry from collection.
-  const entry = typeof query === 'string' ? this.get(query) : this.get(query.id); // Return entry if it was resolved, otherwise throw error.
+  const entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
 
+  // Return entry if it was resolved, otherwise throw error.
   if (entry) {
     return entry;
   } else {
@@ -688,37 +675,49 @@ function getDrawerID(obj) {
   // 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 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.
+    }
+
+    // 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.
+    }
+
+    // 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.
+    }
+
+    // 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.
+    }
+
+    // Return false if no id was found.
     else return false;
-  } // If it has an id property, return its value.
+  }
+
+  // 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 getDrawerElements(query) {
   const id = getDrawerID.call(this, query);
-
   if (id) {
     const drawer = document.querySelector(`#${id}`);
     const dialog = drawer ? drawer.querySelector(this.settings.selectorDialog) : null;
-
     if (!drawer && !dialog) {
       return {
         error: new Error(`No drawer elements found using the ID: "${id}".`)
@@ -758,8 +757,8 @@ async function initialState(entry) {
   } else {
     // Remove transition state classes.
     entry.el.classList.remove(this.settings.stateOpening);
-    entry.el.classList.remove(this.settings.stateClosing); // Add closed state class.
-
+    entry.el.classList.remove(this.settings.stateClosing);
+    // Add closed state class.
     entry.el.classList.add(this.settings.stateClosed);
   }
 }
@@ -779,85 +778,98 @@ function updateFocusState$1(entry) {
       entry.trigger.focus();
       entry.trigger = null;
     }
-
     this.focusTrap.unmount();
   }
 }
 
 async function open$2(query, transition, focus = true) {
   // Get the drawer from collection.
-  const drawer = getDrawer.call(this, query); // Get the modal configuration.
-
-  const config = _extends({}, this.settings, drawer.settings); // Add transition parameter to configuration.
+  const drawer = getDrawer.call(this, query);
 
+  // Get the modal configuration.
+  const config = _extends({}, this.settings, drawer.settings);
 
-  if (transition !== undefined) config.transition = transition; // If drawer is closed.
+  // Add transition parameter to configuration.
+  if (transition !== undefined) config.transition = transition;
 
+  // If drawer is closed.
   if (drawer.state === 'closed') {
     // Update drawer state.
-    drawer.state = 'opening'; // Run the open transition.
+    drawer.state = 'opening';
 
-    await openTransition(drawer.el, config); // Update the global state if mode is modal.
+    // Run the open transition.
+    await openTransition(drawer.el, config);
 
-    if (drawer.mode === 'modal') updateGlobalState(true, config); // Update drawer state.
+    // Update the global state if mode is modal.
+    if (drawer.mode === 'modal') updateGlobalState(true, config);
 
+    // Update drawer state.
     drawer.state = 'opened';
-  } // Set focus to the drawer element if the focus param is true.
-
+  }
 
+  // Set focus to the drawer element if the focus param is true.
   if (focus) {
     updateFocusState$1.call(this, drawer);
-  } // Dispatch custom opened event.
-
+  }
 
+  // Dispatch custom opened event.
   drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
     detail: this,
     bubbles: true
-  })); // Return the drawer.
+  }));
 
+  // Return the drawer.
   return drawer;
 }
 
 async function close$2(query, transition, focus = true) {
   // Get the drawer from collection.
-  const drawer = getDrawer.call(this, query); // Get the modal configuration.
+  const drawer = getDrawer.call(this, query);
 
-  const config = _extends({}, this.settings, drawer.settings); // Add transition parameter to configuration.
+  // Get the modal configuration.
+  const config = _extends({}, this.settings, drawer.settings);
 
+  // Add transition parameter to configuration.
+  if (transition !== undefined) config.transition = transition;
 
-  if (transition !== undefined) config.transition = transition; // If drawer is opened.
-
+  // If drawer is opened.
   if (drawer.state === 'opened') {
     // Update drawer state.
-    drawer.state = 'closing'; // Remove focus from active element.
+    drawer.state = 'closing';
 
-    document.activeElement.blur(); // Run the close transition.
+    // Remove focus from active element.
+    document.activeElement.blur();
 
-    await closeTransition(drawer.el, config); // Update the global state if mode is modal.
+    // Run the close transition.
+    await closeTransition(drawer.el, config);
 
-    if (drawer.mode === 'modal') updateGlobalState(false, config); // Set focus to the trigger element if the focus param is true.
+    // Update the global state if mode is modal.
+    if (drawer.mode === 'modal') updateGlobalState(false, config);
 
+    // Set focus to the trigger element if the focus param is true.
     if (focus) {
       updateFocusState$1.call(this, drawer);
-    } // Update drawer state.
-
+    }
 
-    drawer.state = 'closed'; // Dispatch custom closed event.
+    // Update drawer state.
+    drawer.state = 'closed';
 
+    // Dispatch custom closed event.
     drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
       detail: this,
       bubbles: true
     }));
-  } // Return the drawer.
-
+  }
 
+  // Return the drawer.
   return drawer;
 }
 
 async function toggle(query, transition, focus) {
   // Get the drawer from collection.
-  const drawer = getDrawer.call(this, query); // Open or close the drawer based on its current state.
+  const drawer = getDrawer.call(this, query);
 
+  // Open or close the drawer based on its current state.
   if (drawer.state === 'closed') {
     return open$2.call(this, drawer, transition, focus);
   } else {
@@ -869,179 +881,175 @@ function switchMode(entry) {
   switch (entry.mode) {
     case 'inline':
       return toInline.call(this, entry);
-
     case 'modal':
       return toModal.call(this, entry);
-
     default:
       throw new Error(`"${entry.mode}" is not a valid drawer mode.`);
   }
 }
-
 async function toInline(entry) {
   // Remove the modal class.
-  entry.el.classList.remove(entry.getSetting('classModal')); // Remove the aria-modal attribute.
+  entry.el.classList.remove(entry.getSetting('classModal'));
 
-  entry.dialog.removeAttribute('aria-modal'); // Update the global state.
+  // Remove the aria-modal attribute.
+  entry.dialog.removeAttribute('aria-modal');
 
-  updateGlobalState(false, _extends({}, this.settings, entry.settings)); // Remove any focus traps.
+  // Update the global state.
+  updateGlobalState(false, _extends({}, this.settings, entry.settings));
 
-  this.focusTrap.unmount(); // Setup initial state.
+  // Remove any focus traps.
+  this.focusTrap.unmount();
 
-  await initialState.call(this, entry); // Dispatch custom switch event.
+  // Setup initial state.
+  await initialState.call(this, entry);
 
+  // Dispatch custom switch event.
   entry.el.dispatchEvent(new CustomEvent(entry.getSetting('customEventPrefix') + 'switchMode', {
     detail: this,
     bubbles: true
-  })); // Return the entry.
+  }));
 
+  // Return the entry.
   return entry;
 }
-
 async function toModal(entry) {
   // Get the drawer configuration.
+
   // Add the modal class.
-  entry.el.classList.add(entry.getSetting('classModal')); // Set aria-modal attribute to true.
+  entry.el.classList.add(entry.getSetting('classModal'));
 
-  entry.dialog.setAttribute('aria-modal', 'true'); // If there isn't a stored state but also has the opened state class...
+  // Set aria-modal attribute to true.
+  entry.dialog.setAttribute('aria-modal', 'true');
 
+  // If there isn't a stored state but also has the opened state class...
   if (!this.store.get(entry.id) && entry.el.classList.contains(entry.getSetting('stateOpened'))) {
     // Save the opened state in local store.
     this.store.set(entry.id, 'opened');
-  } // Modal drawer defaults to closed state.
-
+  }
 
-  await close$2.call(this, entry, false, false); // Dispatch custom switch event.
+  // Modal drawer defaults to closed state.
+  await close$2.call(this, entry, false, false);
 
+  // Dispatch custom switch event.
   entry.el.dispatchEvent(new CustomEvent(entry.getSetting('customEventPrefix') + 'switchMode', {
     detail: this,
     bubbles: true
-  })); // Return the entry.
+  }));
 
+  // Return the entry.
   return entry;
 }
 
 async function register$2(el, dialog) {
   // Deregister entry incase it has already been registered.
-  await deregister$2.call(this, el, false); // Save root this for use inside methods API.
+  await deregister$2.call(this, el, false);
 
-  const root = this; // Create an instance of the Breakpoint class.
+  // Save root this for use inside methods API.
+  const root = this;
 
-  const breakpoint = new Breakpoint(); // Setup methods API.
+  // Create an instance of the Breakpoint class.
+  const breakpoint = new Breakpoint();
 
+  // Setup methods API.
   const methods = {
     open(transition, focus) {
       return open$2.call(root, this, transition, focus);
     },
-
     close(transition, focus) {
       return close$2.call(root, this, transition, focus);
     },
-
     toggle(transition, focus) {
       return toggle.call(root, this, transition, focus);
     },
-
     deregister() {
       return deregister$2.call(root, this);
     },
-
     mountBreakpoint() {
       const value = this.breakpoint;
       const handler = this.handleBreakpoint.bind(this);
       breakpoint.mount(value, handler);
       return this;
     },
-
     unmountBreakpoint() {
       breakpoint.unmount();
       return this;
     },
-
     handleBreakpoint(event) {
       this.mode = event.matches ? 'inline' : 'modal';
       return this;
     },
-
     getSetting(key) {
       return key in this.settings ? this.settings[key] : root.settings[key];
     }
+  };
 
-  }; // Setup the drawer object.
-
+  // Setup the drawer object.
   const entry = _extends({
     id: el.id,
     el: el,
     dialog: dialog,
     trigger: null,
     settings: getConfig$1(el, this.settings.dataConfig),
-
     get breakpoint() {
       return getBreakpoint.call(root, el);
     },
-
     get state() {
       return __state;
     },
-
     set state(value) {
-      __state = value; // Save 'opened' and 'closed' states to store if mode is inline.
-
+      __state = value;
+      // Save 'opened' and 'closed' states to store if mode is inline.
       if (value === 'opened' || value === 'closed') {
         if (this.mode === 'inline') root.store.set(this.id, this.state);
       }
     },
-
     get mode() {
       return __mode;
     },
-
     set mode(value) {
       __mode = value;
       switchMode.call(root, this);
     }
+  }, methods);
 
-  }, methods); // Create the state var with the initial state.
-
-
-  let __state = el.classList.contains(entry.getSetting('stateOpened')) ? 'opened' : 'closed'; // Create the mode var with the initial mode.
-
-
-  let __mode = el.classList.contains(entry.getSetting('classModal')) ? 'modal' : 'inline'; // Setup mode specific attributes.
+  // Create the state var with the initial state.
+  let __state = el.classList.contains(entry.getSetting('stateOpened')) ? 'opened' : 'closed';
 
+  // Create the mode var with the initial mode.
+  let __mode = el.classList.contains(entry.getSetting('classModal')) ? 'modal' : 'inline';
 
+  // Setup mode specific attributes.
   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.
-
+  }
 
+  // Set tabindex="-1" so dialog is focusable via JS or click.
   if (entry.getSetting('setTabindex')) {
     entry.dialog.setAttribute('tabindex', '-1');
-  } // Add entry to collection.
-
+  }
 
-  this.collection.push(entry); // If the entry has a breakpoint...
+  // Add entry to collection.
+  this.collection.push(entry);
 
+  // If the entry has a breakpoint...
   if (entry.breakpoint) {
     // Mount media query breakpoint functionality.
     entry.mountBreakpoint();
   } else {
     // Else, Setup initial state.
     await initialState.call(this, entry);
-  } // Return the registered entry.
-
+  }
 
+  // Return the registered entry.
   return entry;
 }
 
 var _handleClick$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
-
 var _handleKeydown$2 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
-
 class Drawer extends Collection {
   constructor(options) {
     super();
@@ -1055,81 +1063,71 @@ class Drawer extends Collection {
     });
     this.defaults = defaults$2;
     this.settings = _extends({}, this.defaults, options);
-    this.focusTrap = new FocusTrap(); // Setup local store for inline drawer state management.
+    this.focusTrap = new FocusTrap();
 
+    // Setup local store for inline drawer state management.
     this.store = localStore(this.settings.storeKey, this.settings.store);
     _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1] = handleClick$2.bind(this);
     _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2] = handleKeydown$2.bind(this);
     if (this.settings.autoInit) this.init();
   }
-
   get activeModal() {
     return this.collection.find(entry => {
       return entry.state === 'opened' && entry.mode === 'modal';
     });
   }
-
   async init(options = null) {
     // Update settings with passed options.
-    if (options) this.settings = _extends({}, this.settings, options); // Get all the modals.
+    if (options) this.settings = _extends({}, this.settings, options);
 
-    const drawers = document.querySelectorAll(this.settings.selectorDrawer); // Register the collections array with modal instances.
+    // Get all the modals.
+    const drawers = document.querySelectorAll(this.settings.selectorDrawer);
 
-    await this.registerCollection(drawers); // If eventListeners are enabled, init event listeners.
+    // Register the collections array with modal instances.
+    await this.registerCollection(drawers);
 
+    // If eventListeners are enabled, init event listeners.
     if (this.settings.eventListeners) {
       this.initEventListeners();
     }
-
     return this;
   }
-
   async destroy() {
     // Remove all entries from the collection.
-    await this.deregisterCollection(); // If eventListeners are enabled, init event listeners.
+    await this.deregisterCollection();
 
+    // If eventListeners are enabled, init event listeners.
     if (this.settings.eventListeners) {
       this.destroyEventListeners();
     }
-
     return this;
   }
-
   initEventListeners() {
     document.addEventListener('click', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
-    document.addEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
     document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
   }
-
   destroyEventListeners() {
     document.removeEventListener('click', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
-    document.removeEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
     document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
   }
-
   register(query) {
     const els = getDrawerElements.call(this, query);
     if (els.error) return Promise.reject(els.error);
     return register$2.call(this, els.drawer, els.dialog);
   }
-
   deregister(query) {
     const entry = this.get(getDrawerID.call(this, query));
     return deregister$2.call(this, entry);
   }
-
   open(id, transition, focus) {
     return open$2.call(this, id, transition, focus);
   }
-
   close(id, transition, focus) {
     return close$2.call(this, id, transition, focus);
   }
-
   toggle(id, transition, focus) {
     return toggle.call(this, id, transition, focus);
   }
-
 }
 
 var defaults$1 = {
@@ -1162,8 +1160,9 @@ var defaults$1 = {
 
 function getModal(query) {
   // Get the entry from collection.
-  const entry = typeof query === 'string' ? this.get(query) : this.get(query.id); // Return entry if it was resolved, otherwise throw error.
+  const entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
 
+  // Return entry if it was resolved, otherwise throw error.
   if (entry) {
     return entry;
   } else {
@@ -1175,37 +1174,49 @@ function getModalID(obj) {
   // 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 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.
+    }
+
+    // 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.
+    }
+
+    // If it's a modal replace trigger, return data value.
     else if (obj.hasAttribute(`data-${this.settings.dataReplace}`)) {
       return obj.getAttribute(`data-${this.settings.dataReplace}`);
-    } // If it's a modal element, return the id.
+    }
+
+    // If it's a modal element, return the id.
     else if (obj.closest(this.settings.selectorModal)) {
       obj = obj.closest(this.settings.selectorModal);
       return obj.id || false;
-    } // Return false if no id was found.
+    }
+
+    // Return false if no id was found.
     else return false;
-  } // If it has an id property, return its value.
+  }
+
+  // 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 getModalElements(query) {
   const id = getModalID.call(this, query);
-
   if (id) {
     const modal = document.querySelector(`#${id}`);
     const dialog = modal ? modal.querySelector(this.settings.selectorDialog) : null;
-
     if (!modal && !dialog) {
       return {
         error: new Error(`No modal elements found using the ID: "${id}".`)
@@ -1238,7 +1249,6 @@ function updateFocusState() {
       this.trigger.focus();
       this.trigger = null;
     }
-
     this.focusTrap.unmount();
   }
 }
@@ -1246,30 +1256,28 @@ function updateFocusState() {
 async function handleClick$1(event) {
   // If an open or replace button was clicked, open or replace the modal.
   let trigger = event.target.closest(`[data-${this.settings.dataOpen}], [data-${this.settings.dataReplace}]`);
-
   if (trigger) {
-    event.preventDefault(); // Save the trigger if it's not coming from inside a modal.
-
+    event.preventDefault();
+    // Save the trigger if it's not coming from inside a modal.
     const fromModal = event.target.closest(this.settings.selectorModal);
-    if (!fromModal) this.trigger = trigger; // Get the modal.
-
-    const modal = this.get(getModalID.call(this, trigger)); // Depending on the button type, either open or replace the modal.
-
+    if (!fromModal) this.trigger = trigger;
+    // Get the modal.
+    const modal = this.get(getModalID.call(this, trigger));
+    // Depending on the button type, either open or replace the modal.
     return trigger.matches(`[data-${this.settings.dataOpen}]`) ? modal.open() : modal.replace();
-  } // If a close button was clicked, close the modal.
-
+  }
 
+  // If a close button was clicked, close the modal.
   trigger = event.target.closest(`[data-${this.settings.dataClose}]`);
-
   if (trigger) {
-    event.preventDefault(); // Get the value of the data attribute.
-
-    const value = trigger.getAttribute(`data-${this.settings.dataClose}`); // Close all if * wildcard is passed, otherwise close a single modal.
-
+    event.preventDefault();
+    // Get the value of the data attribute.
+    const value = trigger.getAttribute(`data-${this.settings.dataClose}`);
+    // Close all if * wildcard is passed, otherwise close a single modal.
     return value === '*' ? this.closeAll() : this.close(value);
-  } // If the modal screen was clicked, close the modal.
-
+  }
 
+  // If the modal screen was clicked, close the modal.
   if (event.target.matches(this.settings.selectorModal) && !event.target.querySelector(this.settings.selectorRequired)) {
     return this.close(getModalID.call(this, event.target));
   }
@@ -1286,109 +1294,125 @@ function handleKeydown$1(event) {
 
 async function deregister$1(obj, close = true) {
   // Return collection if nothing was passed.
-  if (!obj) return this.collection; // Check if entry has been registered in the collection.
+  if (!obj) return this.collection;
 
+  // Check if entry has been registered in the collection.
   const index = this.collection.findIndex(entry => {
     return entry.id === obj.id;
   });
-
   if (index >= 0) {
     // Get the collection entry.
-    const entry = this.collection[index]; // If entry is in the opened state, close it.
+    const entry = this.collection[index];
 
+    // If entry is in the opened state, close it.
     if (close && entry.state === 'opened') {
       await entry.close(false);
     } else {
       // Remove modal from stack.
       this.stack.remove(entry);
-    } // Return teleported modal if a reference has been set.
-
+    }
 
+    // Return teleported modal if a reference has been set.
     if (entry.getSetting('teleport')) {
       entry.teleportReturn();
-    } // Delete properties from collection entry.
-
+    }
 
+    // Delete properties from collection entry.
     Object.getOwnPropertyNames(entry).forEach(prop => {
       delete entry[prop];
-    }); // Remove entry from collection.
+    });
 
+    // Remove entry from collection.
     this.collection.splice(index, 1);
-  } // Return the modified collection.
-
+  }
 
+  // Return the modified collection.
   return this.collection;
 }
 
 async function open$1(query, transition, focus = true) {
   // Get the modal from collection.
-  const modal = getModal.call(this, query); // Get the modal configuration.
-
-  const config = _extends({}, this.settings, modal.settings); // Add transition parameter to configuration.
+  const modal = getModal.call(this, query);
 
+  // Get the modal configuration.
+  const config = _extends({}, this.settings, modal.settings);
 
-  if (transition !== undefined) config.transition = transition; // Maybe add modal to top of stack.
+  // Add transition parameter to configuration.
+  if (transition !== undefined) config.transition = transition;
 
-  this.stack.moveToTop(modal); // If modal is closed.
+  // Maybe add modal to top of stack.
+  this.stack.moveToTop(modal);
 
+  // If modal is closed.
   if (modal.state === 'closed') {
     // Update modal state.
-    modal.state = 'opening'; // Add modal to stack.
+    modal.state = 'opening';
 
-    this.stack.add(modal); // Run the open transition.
+    // Add modal to stack.
+    this.stack.add(modal);
 
-    await openTransition(modal.el, config); // Update modal state.
+    // Run the open transition.
+    await openTransition(modal.el, config);
 
+    // Update modal state.
     modal.state = 'opened';
-  } // Update focus if the focus param is true.
-
+  }
 
+  // Update focus if the focus param is true.
   if (focus) {
     updateFocusState.call(this);
-  } // Dispatch custom opened event.
-
+  }
 
+  // Dispatch custom opened event.
   modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
     detail: this,
     bubbles: true
-  })); // Return the modal.
+  }));
 
+  // Return the modal.
   return modal;
 }
 
 async function close$1(query, transition, focus = true) {
   // Get the modal from collection, or top modal in stack if no query is provided.
-  const modal = query ? getModal.call(this, query) : this.active; // If a modal exists and its state is opened.
+  const modal = query ? getModal.call(this, query) : this.active;
 
+  // If a modal exists and its state is opened.
   if (modal && modal.state === 'opened') {
     // Update modal state.
-    modal.state = 'closing'; // Get the modal configuration.
+    modal.state = 'closing';
 
-    const config = _extends({}, this.settings, modal.settings); // Add transition parameter to configuration.
+    // Get the modal configuration.
+    const config = _extends({}, this.settings, modal.settings);
 
+    // Add transition parameter to configuration.
+    if (transition !== undefined) config.transition = transition;
 
-    if (transition !== undefined) config.transition = transition; // Remove focus from active element.
+    // Remove focus from active element.
+    document.activeElement.blur();
 
-    document.activeElement.blur(); // Run the close transition.
+    // Run the close transition.
+    await closeTransition(modal.el, config);
 
-    await closeTransition(modal.el, config); // Remove modal from stack.
-
-    this.stack.remove(modal); // Update focus if the focus param is true.
+    // Remove modal from stack.
+    this.stack.remove(modal);
 
+    // Update focus if the focus param is true.
     if (focus) {
       updateFocusState.call(this);
-    } // Update modal state.
-
+    }
 
-    modal.state = 'closed'; // Dispatch custom closed event.
+    // Update modal state.
+    modal.state = 'closed';
 
+    // Dispatch custom closed event.
     modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
       detail: this,
       bubbles: true
     }));
-  } // Return the modal.
-
+  }
 
+  // Return the modal.
   return modal;
 }
 
@@ -1400,7 +1424,6 @@ async function closeAll$1(exclude, transition) {
     } else {
       result.push(await close$1.call(this, modal, transition, false));
     }
-
     modal.trigger = null;
   }));
   return result;
@@ -1408,10 +1431,10 @@ async function closeAll$1(exclude, transition) {
 
 async function replace(query, transition, focus = true) {
   // Get the modal from collection.
-  const modal = getModal.call(this, query); // Setup results for return.
+  const modal = getModal.call(this, query);
 
+  // Setup results for return.
   let resultOpened, resultClosed;
-
   if (modal.state === 'opened') {
     // If modal is open, close all modals except for replacement.
     resultOpened = modal;
@@ -1421,14 +1444,14 @@ async function replace(query, transition, focus = true) {
     resultOpened = open$1.call(this, modal, transition, false);
     resultClosed = closeAll$1.call(this, false, transition);
     await Promise.all([resultOpened, resultClosed]);
-  } // Update focus if the focus param is true.
-
+  }
 
+  // Update focus if the focus param is true.
   if (focus) {
     updateFocusState.call(this);
-  } // Return the modals there were opened and closed.
-
+  }
 
+  // Return the modals there were opened and closed.
   return {
     opened: resultOpened,
     closed: resultClosed
@@ -1437,27 +1460,25 @@ async function replace(query, transition, focus = true) {
 
 async function register$1(el, dialog) {
   // Deregister entry incase it has already been registered.
-  await deregister$1.call(this, el, false); // Save root this for use inside methods API.
+  await deregister$1.call(this, el, false);
 
-  const root = this; // Setup methods API.
+  // Save root this for use inside methods API.
+  const root = this;
 
+  // Setup methods API.
   const methods = {
     open(transition, focus) {
       return open$1.call(root, this, transition, focus);
     },
-
     close(transition, focus) {
       return close$1.call(root, this, transition, focus);
     },
-
     replace(transition, focus) {
       return replace.call(root, this, transition, focus);
     },
-
     deregister() {
       return deregister$1.call(root, this);
     },
-
     teleport(ref = this.getSetting('teleport'), method = this.getSetting('teleportMethod')) {
       if (!this.returnRef) {
         this.returnRef = teleport(this.el, ref, method);
@@ -1467,7 +1488,6 @@ async function register$1(el, dialog) {
         return false;
       }
     },
-
     teleportReturn() {
       if (this.returnRef) {
         this.returnRef = teleport(this.el, this.returnRef);
@@ -1477,13 +1497,12 @@ async function register$1(el, dialog) {
         return false;
       }
     },
-
     getSetting(key) {
       return key in this.settings ? this.settings[key] : root.settings[key];
     }
+  };
 
-  }; // Setup the modal object.
-
+  // Setup the modal object.
   const entry = _extends({
     id: el.id,
     state: 'closed',
@@ -1491,40 +1510,42 @@ async function register$1(el, dialog) {
     dialog: dialog,
     returnRef: null,
     settings: getConfig$1(el, this.settings.dataConfig)
-  }, methods); // Set aria-modal attribute to true.
+  }, methods);
 
+  // Set aria-modal attribute to true.
+  entry.dialog.setAttribute('aria-modal', 'true');
 
-  entry.dialog.setAttribute('aria-modal', 'true'); // If a role attribute is not set, set it to "dialog" as the default.
-
+  // If a role attribute is not set, set it to "dialog" as the default.
   if (!entry.dialog.hasAttribute('role')) {
     entry.dialog.setAttribute('role', 'dialog');
-  } // Set tabindex="-1" so dialog is focusable via JS or click.
-
+  }
 
+  // Set tabindex="-1" so dialog is focusable via JS or click.
   if (entry.getSetting('setTabindex')) {
     entry.dialog.setAttribute('tabindex', '-1');
-  } // Teleport modal if a reference has been set.
-
+  }
 
+  // Teleport modal if a reference has been set.
   if (entry.getSetting('teleport')) {
     entry.teleport();
-  } // Add entry to collection.
-
+  }
 
-  this.collection.push(entry); // Setup initial state.
+  // Add entry to collection.
+  this.collection.push(entry);
 
+  // Setup initial state.
   if (entry.el.classList.contains(this.settings.stateOpened)) {
     // Open entry with transitions disabled.
     await entry.open(false);
   } else {
     // Remove transition state classes.
     entry.el.classList.remove(this.settings.stateOpening);
-    entry.el.classList.remove(this.settings.stateClosing); // Add closed state class.
-
+    entry.el.classList.remove(this.settings.stateClosing);
+    // Add closed state class.
     entry.el.classList.add(this.settings.stateClosed);
-  } // Return the registered entry.
-
+  }
 
+  // Return the registered entry.
   return entry;
 }
 
@@ -1534,11 +1555,9 @@ function stack(settings) {
     get value() {
       return [...stackArray];
     },
-
     get top() {
       return stackArray[stackArray.length - 1];
     },
-
     updateIndex() {
       stackArray.forEach((entry, index) => {
         entry.el.style.zIndex = null;
@@ -1546,60 +1565,60 @@ function stack(settings) {
         entry.el.style.zIndex = parseInt(value) + index + 1;
       });
     },
-
     updateGlobalState() {
       updateGlobalState(this.top, settings);
       this.updateIndex();
     },
-
     add(entry) {
       // Apply z-index styles based on stack length.
       entry.el.style.zIndex = null;
       const value = getComputedStyle(entry.el)['z-index'];
-      entry.el.style.zIndex = parseInt(value) + stackArray.length + 1; // Move back to end of stack.
+      entry.el.style.zIndex = parseInt(value) + stackArray.length + 1;
 
-      stackArray.push(entry); // Update the global state.
+      // Move back to end of stack.
+      stackArray.push(entry);
 
+      // Update the global state.
       this.updateGlobalState();
     },
-
     remove(entry) {
       // Get the index of the entry.
       const index = stackArray.findIndex(item => {
         return item.id === entry.id;
-      }); // If entry is in stack...
+      });
 
+      // If entry is in stack...
       if (index >= 0) {
         // Remove z-index styles.
-        entry.el.style.zIndex = null; // Remove entry from stack array.
+        entry.el.style.zIndex = null;
 
-        stackArray.splice(index, 1); // Update the global state.
+        // Remove entry from stack array.
+        stackArray.splice(index, 1);
 
+        // Update the global state.
         this.updateGlobalState();
       }
     },
-
     moveToTop(entry) {
       // Get the index of the entry.
       const index = stackArray.findIndex(item => {
         return item.id === entry.id;
-      }); // If entry is in stack...
+      });
 
+      // If entry is in stack...
       if (index >= 0) {
         // Remove entry from stack array.
-        stackArray.splice(index, 1); // Add entry back to top of stack.
+        stackArray.splice(index, 1);
 
+        // Add entry back to top of stack.
         this.add(entry);
       }
     }
-
   };
 }
 
 var _handleClick = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
-
 var _handleKeydown$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
-
 class Modal extends Collection {
   constructor(options) {
     super();
@@ -1614,91 +1633,80 @@ class Modal extends Collection {
     this.defaults = defaults$1;
     this.settings = _extends({}, this.defaults, options);
     this.trigger = null;
-    this.focusTrap = new FocusTrap(); // Setup stack module.
+    this.focusTrap = new FocusTrap();
 
+    // Setup stack module.
     this.stack = stack(this.settings);
     _classPrivateFieldLooseBase(this, _handleClick)[_handleClick] = handleClick$1.bind(this);
     _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1] = handleKeydown$1.bind(this);
     if (this.settings.autoInit) this.init();
   }
-
   get active() {
     return this.stack.top;
   }
-
   async init(options) {
     // Update settings with passed options.
-    if (options) this.settings = _extends({}, this.settings, options); // Get all the modals.
+    if (options) this.settings = _extends({}, this.settings, options);
 
-    const modals = document.querySelectorAll(this.settings.selectorModal); // Register the collections array with modal instances.
+    // Get all the modals.
+    const modals = document.querySelectorAll(this.settings.selectorModal);
 
-    await this.registerCollection(modals); // If eventListeners are enabled, init event listeners.
+    // Register the collections array with modal instances.
+    await this.registerCollection(modals);
 
+    // If eventListeners are enabled, init event listeners.
     if (this.settings.eventListeners) {
       this.initEventListeners();
     }
-
     return this;
   }
-
   async destroy() {
     // Clear stored trigger.
-    this.trigger = null; // Remove all entries from the collection.
+    this.trigger = null;
 
-    await this.deregisterCollection(); // If eventListeners are enabled, destroy event listeners.
+    // Remove all entries from the collection.
+    await this.deregisterCollection();
 
+    // If eventListeners are enabled, destroy event listeners.
     if (this.settings.eventListeners) {
       this.destroyEventListeners();
     }
-
     return this;
   }
-
   initEventListeners() {
     document.addEventListener('click', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
-    document.addEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
     document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
   }
-
   destroyEventListeners() {
     document.removeEventListener('click', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
-    document.removeEventListener('touchend', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
     document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
   }
-
   register(query) {
     const els = getModalElements.call(this, query);
     if (els.error) return Promise.reject(els.error);
     return register$1.call(this, els.modal, els.dialog);
   }
-
   deregister(query) {
     const modal = this.get(getModalID.call(this, query));
     return deregister$1.call(this, modal);
   }
-
   open(id, transition, focus) {
     return open$1.call(this, id, transition, focus);
   }
-
   close(id, transition, focus) {
     return close$1.call(this, id, transition, focus);
   }
-
   replace(id, transition, focus) {
     return replace.call(this, id, transition, focus);
   }
-
   async closeAll(exclude = false, transition, focus = true) {
-    const result = await closeAll$1.call(this, exclude, transition); // Update focus if the focus param is true.
-
+    const result = await closeAll$1.call(this, exclude, transition);
+    // Update focus if the focus param is true.
     if (focus) {
       updateFocusState.call(this);
     }
-
     return result;
   }
-
 }
 
 var defaults = {
@@ -1716,8 +1724,9 @@ var defaults = {
 
 function getConfig(el, settings) {
   // Get the computed styles of the element.
-  const styles = getComputedStyle(el); // Setup the config obj with default values.
+  const styles = getComputedStyle(el);
 
+  // Setup the config obj with default values.
   const config = {
     'placement': settings.placement,
     'event': settings.eventType,
@@ -1726,36 +1735,40 @@ function getConfig(el, settings) {
     'flip-padding': 0,
     'arrow-element': settings.selectorArrow,
     'arrow-padding': 0
-  }; // Loop through config obj.
+  };
 
+  // Loop through config obj.
   for (const prop in config) {
     // Get the CSS variable property values.
     const prefix = g();
-    const value = styles.getPropertyValue(`--${prefix}popover-${prop}`).trim(); // If a value was found, replace the default in config obj.
+    const value = styles.getPropertyValue(`--${prefix}popover-${prop}`).trim();
 
+    // If a value was found, replace the default in config obj.
     if (value) {
       config[prop] = value;
     }
-  } // Return the config obj.
-
+  }
 
+  // Return the config obj.
   return config;
 }
 
 function getPadding(value) {
-  let padding; // Split the value by spaces if it's a string.
+  let padding;
 
-  const array = typeof value === 'string' ? value.trim().split(' ') : [value]; // Convert individual values to integers.
+  // Split the value by spaces if it's a string.
+  const array = typeof value === 'string' ? value.trim().split(' ') : [value];
 
+  // Convert individual values to integers.
   array.forEach(function (item, index) {
     array[index] = parseInt(item, 10);
-  }); // Build the padding object based on the number of values passed.
+  });
 
+  // Build the padding object based on the number of values passed.
   switch (array.length) {
     case 1:
       padding = array[0];
       break;
-
     case 2:
       padding = {
         top: array[0],
@@ -1764,7 +1777,6 @@ function getPadding(value) {
         left: array[1]
       };
       break;
-
     case 3:
       padding = {
         top: array[0],
@@ -1773,7 +1785,6 @@ function getPadding(value) {
         left: array[1]
       };
       break;
-
     case 4:
       padding = {
         top: array[0],
@@ -1782,13 +1793,12 @@ function getPadding(value) {
         left: array[3]
       };
       break;
-
     default:
       padding = false;
       break;
-  } // Return the padding object.
-
+  }
 
+  // Return the padding object.
   return padding;
 }
 
@@ -1819,8 +1829,9 @@ function getModifiers(options) {
 
 function getPopover(query) {
   // Get the entry from collection.
-  const entry = typeof query === 'string' ? this.get(query) : this.get(query.id); // Return entry if it was resolved, otherwise throw error.
+  const entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
 
+  // Return entry if it was resolved, otherwise throw error.
   if (entry) {
     return entry;
   } else {
@@ -1832,34 +1843,44 @@ function getPopoverID(obj) {
   // 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 element, return the id.
     if (obj.closest(this.settings.selectorPopover)) {
       obj = obj.closest(this.settings.selectorPopover);
       return obj.id;
-    } // If it's a popover trigger, return value of aria-controls.
+    }
+
+    // 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.
+    }
+
+    // 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.
+    }
+
+    // Return false if no id was found.
     else return false;
-  } // If it has an id property, return its value.
+  }
+
+  // If it has an id property, return its value.
   else if (obj.id) {
     return obj.id;
-  } // Return false if no id was found.
+  }
+
+  // Return false if no id was found.
   else return false;
 }
 
 function getPopoverElements(query) {
   const id = getPopoverID.call(this, query);
-
   if (id) {
     const popover = document.querySelector(`#${id}`);
     const trigger = document.querySelector(`[aria-controls="${id}"]`) || document.querySelector(`[aria-describedby="${id}"]`);
-
     if (!trigger && !popover) {
       return {
         error: new Error(`No popover elements found using the ID: "${id}".`)
@@ -1887,32 +1908,36 @@ function getPopoverElements(query) {
 
 async function close(query) {
   // Get the popover from collection.
-  const popover = query ? getPopover.call(this, query) : await closeAll.call(this); // If a modal exists and its state is opened.
+  const popover = query ? getPopover.call(this, query) : await closeAll.call(this);
 
+  // If a modal exists and its state is opened.
   if (popover && popover.state === 'opened') {
     // Update state class.
-    popover.el.classList.remove(this.settings.stateActive); // Update accessibility attribute(s).
+    popover.el.classList.remove(this.settings.stateActive);
 
+    // Update accessibility attribute(s).
     if (popover.trigger.hasAttribute('aria-controls')) {
       popover.trigger.setAttribute('aria-expanded', 'false');
-    } // Disable popper event listeners.
-
+    }
 
+    // Disable popper event listeners.
     popover.popper.setOptions({
       modifiers: [{
         name: 'eventListeners',
         enabled: false
       }]
-    }); // Update popover state.
+    });
 
-    popover.state = 'closed'; // Clear root trigger if popover trigger matches.
+    // Update popover state.
+    popover.state = 'closed';
 
+    // Clear root trigger if popover trigger matches.
     if (popover.trigger === this.trigger) {
       this.trigger = null;
     }
-  } // Return the popover.
-
+  }
 
+  // Return the popover.
   return popover;
 }
 async function closeAll() {
@@ -1926,19 +1951,22 @@ async function closeAll() {
 }
 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.
+  if (popover.state != 'opened') return;
 
+  // Needed to correctly check which element is currently being focused.
   setTimeout(() => {
     // Check if trigger or element are being hovered.
-    const isHovered = popover.el.closest(':hover') === popover.el || popover.trigger.closest(':hover') === popover.trigger; // Check if trigger or element are being focused.
+    const isHovered = popover.el.closest(':hover') === popover.el || popover.trigger.closest(':hover') === popover.trigger;
 
-    const isFocused = document.activeElement.closest(`#${popover.id}, [aria-controls="${popover.id}"], [aria-describedby="${popover.id}"]`); // Close if the trigger and element are not currently hovered or focused.
+    // Check if trigger or element are being focused.
+    const isFocused = document.activeElement.closest(`#${popover.id}, [aria-controls="${popover.id}"], [aria-describedby="${popover.id}"]`);
 
+    // Close if the trigger and element are not currently hovered or focused.
     if (!isHovered && !isFocused) {
       popover.close();
-    } // Return the popover.
-
+    }
 
+    // Return the popover.
     return popover;
   }, 1);
 }
@@ -1958,16 +1986,13 @@ function handleKeydown(event) {
       if (this.trigger) {
         this.trigger.focus();
       }
-
       closeAll.call(this);
       return;
-
     case 'Tab':
       this.collection.forEach(popover => {
         closeCheck.call(this, popover);
       });
       return;
-
     default:
       return;
   }
@@ -1976,8 +2001,9 @@ function handleDocumentClick(popover) {
   const root = this;
   document.addEventListener('click', function _f(event) {
     // Check if a popover or its trigger was clicked.
-    const wasClicked = event.target.closest(`#${popover.id}, [aria-controls="${popover.id}"], [aria-describedby="${popover.id}"]`); // If popover or popover trigger was clicked...
+    const wasClicked = event.target.closest(`#${popover.id}, [aria-controls="${popover.id}"], [aria-describedby="${popover.id}"]`);
 
+    // If popover or popover trigger was clicked...
     if (wasClicked) {
       // If popover element exists and is not active...
       if (popover.el && !popover.el.classList.contains(root.settings.stateActive)) {
@@ -1988,7 +2014,6 @@ function handleDocumentClick(popover) {
       if (popover.el && popover.el.classList.contains(root.settings.stateActive)) {
         popover.close();
       }
-
       this.removeEventListener('click', _f);
     }
   });
@@ -2154,38 +2179,57 @@ var max = Math.max;
 var min = Math.min;
 var round = Math.round;
 
-function getBoundingClientRect(element, includeScale) {
+function getUAString() {
+  var uaData = navigator.userAgentData;
+
+  if (uaData != null && uaData.brands) {
+    return uaData.brands.map(function (item) {
+      return item.brand + "/" + item.version;
+    }).join(' ');
+  }
+
+  return navigator.userAgent;
+}
+
+function isLayoutViewport() {
+  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
   if (includeScale === void 0) {
     includeScale = false;
   }
 
-  var rect = element.getBoundingClientRect();
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+
+  var clientRect = element.getBoundingClientRect();
   var scaleX = 1;
   var scaleY = 1;
 
-  if (isHTMLElement(element) && includeScale) {
-    var offsetHeight = element.offsetHeight;
-    var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
-    // Fallback to 1 in case both values are `0`
-
-    if (offsetWidth > 0) {
-      scaleX = round(rect.width) / offsetWidth || 1;
-    }
-
-    if (offsetHeight > 0) {
-      scaleY = round(rect.height) / offsetHeight || 1;
-    }
+  if (includeScale && isHTMLElement(element)) {
+    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
   }
 
+  var _ref = isElement(element) ? getWindow(element) : window,
+      visualViewport = _ref.visualViewport;
+
+  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+  var width = clientRect.width / scaleX;
+  var height = clientRect.height / scaleY;
   return {
-    width: rect.width / scaleX,
-    height: rect.height / scaleY,
-    top: rect.top / scaleY,
-    right: rect.right / scaleX,
-    bottom: rect.bottom / scaleY,
-    left: rect.left / scaleX,
-    x: rect.left / scaleX,
-    y: rect.top / scaleY
+    width: width,
+    height: height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x: x,
+    y: y
   };
 }
 
@@ -2280,8 +2324,8 @@ function getTrueOffsetParent(element) {
 
 
 function getContainingBlock(element) {
-  var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
-  var isIE = navigator.userAgent.indexOf('Trident') !== -1;
+  var isFirefox = /firefox/i.test(getUAString());
+  var isIE = /Trident/i.test(getUAString());
 
   if (isIE && isHTMLElement(element)) {
     // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
@@ -2702,31 +2746,21 @@ function getWindowScrollBarX(element) {
   return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
 }
 
-function getViewportRect(element) {
+function getViewportRect(element, strategy) {
   var win = getWindow(element);
   var html = getDocumentElement(element);
   var visualViewport = win.visualViewport;
   var width = html.clientWidth;
   var height = html.clientHeight;
   var x = 0;
-  var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper
-  // can be obscured underneath it.
-  // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
-  // if it isn't open, so if this isn't available, the popper will be detected
-  // to overflow the bottom of the screen too early.
+  var y = 0;
 
   if (visualViewport) {
     width = visualViewport.width;
-    height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently)
-    // In Chrome, it returns a value very close to 0 (+/-) but contains rounding
-    // errors due to floating point numbers, so we need to check precision.
-    // Safari returns a number <= 0, usually < -1 when pinch-zoomed
-    // Feature detection fails in mobile emulation mode in Chrome.
-    // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
-    // 0.001
-    // Fallback here: "Not Safari" userAgent
-
-    if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+    height = visualViewport.height;
+    var layoutViewport = isLayoutViewport();
+
+    if (layoutViewport || !layoutViewport && strategy === 'fixed') {
       x = visualViewport.offsetLeft;
       y = visualViewport.offsetTop;
     }
@@ -2820,8 +2854,8 @@ function rectToClientRect(rect) {
   });
 }
 
-function getInnerBoundingClientRect(element) {
-  var rect = getBoundingClientRect(element);
+function getInnerBoundingClientRect(element, strategy) {
+  var rect = getBoundingClientRect(element, false, strategy === 'fixed');
   rect.top = rect.top + element.clientTop;
   rect.left = rect.left + element.clientLeft;
   rect.bottom = rect.top + element.clientHeight;
@@ -2833,8 +2867,8 @@ function getInnerBoundingClientRect(element) {
   return rect;
 }
 
-function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+function getClientRectFromMixedType(element, clippingParent, strategy) {
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 } // A "clipping parent" is an overflowable container with the characteristic of
 // clipping (or hiding) overflowing elements with a position different from
 // `initial`
@@ -2857,18 +2891,18 @@ function getClippingParents(element) {
 // clipping parents
 
 
-function getClippingRect(element, boundary, rootBoundary) {
+function getClippingRect(element, boundary, rootBoundary, strategy) {
   var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
   var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
   var firstClippingParent = clippingParents[0];
   var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
-    var rect = getClientRectFromMixedType(element, clippingParent);
+    var rect = getClientRectFromMixedType(element, clippingParent, strategy);
     accRect.top = max(rect.top, accRect.top);
     accRect.right = min(rect.right, accRect.right);
     accRect.bottom = min(rect.bottom, accRect.bottom);
     accRect.left = max(rect.left, accRect.left);
     return accRect;
-  }, getClientRectFromMixedType(element, firstClippingParent));
+  }, getClientRectFromMixedType(element, firstClippingParent, strategy));
   clippingRect.width = clippingRect.right - clippingRect.left;
   clippingRect.height = clippingRect.bottom - clippingRect.top;
   clippingRect.x = clippingRect.left;
@@ -2949,6 +2983,8 @@ function detectOverflow(state, options) {
   var _options = options,
       _options$placement = _options.placement,
       placement = _options$placement === void 0 ? state.placement : _options$placement,
+      _options$strategy = _options.strategy,
+      strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
       _options$boundary = _options.boundary,
       boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
       _options$rootBoundary = _options.rootBoundary,
@@ -2963,7 +2999,7 @@ function detectOverflow(state, options) {
   var altContext = elementContext === popper ? reference : popper;
   var popperRect = state.rects.popper;
   var element = state.elements[altBoundary ? altContext : elementContext];
-  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
+  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
   var referenceClientRect = getBoundingClientRect(state.elements.reference);
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
@@ -3477,7 +3513,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
   var isOffsetParentAnElement = isHTMLElement(offsetParent);
   var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
   var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -3783,33 +3819,37 @@ var createPopper = /*#__PURE__*/popperGenerator({
 
 async function deregister(obj) {
   // Return collection if nothing was passed.
-  if (!obj) return this.collection; // Check if entry has been registered in the collection.
+  if (!obj) return this.collection;
 
+  // Check if entry has been registered in the collection.
   const index = this.collection.findIndex(entry => {
     return entry.id === obj.id;
   });
-
   if (index >= 0) {
     // Get the collection entry.
-    const entry = this.collection[index]; // If entry is in the opened state, close it.
+    const entry = this.collection[index];
 
+    // If entry is in the opened state, close it.
     if (entry.state === 'opened') {
       entry.close();
-    } // Clean up the popper instance.
-
+    }
 
-    entry.popper.destroy(); // Remove event listeners.
+    // Clean up the popper instance.
+    entry.popper.destroy();
 
-    deregisterEventListeners(entry); // Delete properties from collection entry.
+    // Remove event listeners.
+    deregisterEventListeners(entry);
 
+    // Delete properties from collection entry.
     Object.getOwnPropertyNames(entry).forEach(prop => {
       delete entry[prop];
-    }); // Remove entry from collection.
+    });
 
+    // Remove entry from collection.
     this.collection.splice(index, 1);
-  } // Return the modified collection.
-
+  }
 
+  // Return the modified collection.
   return this.collection;
 }
 function deregisterEventListeners(entry) {
@@ -3822,65 +3862,71 @@ function deregisterEventListeners(entry) {
           entry[el].removeEventListener(type, evObj.listener, false);
         });
       });
-    }); // Remove eventListeners object from collection.
-
+    });
 
+    // Remove eventListeners object from collection.
     delete entry.__eventListeners;
-  } // Return the entry object.
-
+  }
 
+  // Return the entry object.
   return entry;
 }
 
 async function open(query) {
   // Get the popover from collection.
-  const popover = getPopover.call(this, query); // Update state class.
+  const popover = getPopover.call(this, query);
 
-  popover.el.classList.add(this.settings.stateActive); // Update accessibility attribute(s).
+  // Update state class.
+  popover.el.classList.add(this.settings.stateActive);
 
+  // Update accessibility attribute(s).
   if (popover.trigger.hasAttribute('aria-controls')) {
     popover.trigger.setAttribute('aria-expanded', 'true');
-  } // Update popover config.
-
+  }
 
-  popover.config = getConfig(popover.el, this.settings); // Enable popper event listeners and set placement/modifiers.
+  // Update popover config.
+  popover.config = getConfig(popover.el, this.settings);
 
+  // Enable popper event listeners and set placement/modifiers.
   popover.popper.setOptions({
     placement: popover.config['placement'],
     modifiers: [{
       name: 'eventListeners',
       enabled: true
     }, ...getModifiers(popover.config)]
-  }); // Update popover position.
+  });
 
-  popover.popper.update(); // Update popover state.
+  // Update popover position.
+  popover.popper.update();
 
-  popover.state = 'opened'; // Return the popover.
+  // Update popover state.
+  popover.state = 'opened';
 
+  // Return the popover.
   return popover;
 }
 
 async function register(el, trigger) {
   // Deregister entry incase it has already been registered.
-  deregister.call(this, el); // Save root this for use inside methods API.
+  deregister.call(this, el);
 
-  const root = this; // Setup methods API.
+  // Save root this for use inside methods API.
+  const root = this;
 
+  // Setup methods API.
   const methods = {
     open() {
       return open.call(root, this);
     },
-
     close() {
       return close.call(root, this);
     },
-
     deregister() {
       return deregister.call(root, this);
     }
+  };
 
-  }; // Setup the popover object.
-
+  // Setup the popover object.
   const entry = _extends({
     id: el.id,
     state: 'closed',
@@ -3888,32 +3934,35 @@ async function register(el, trigger) {
     trigger: trigger,
     popper: createPopper(trigger, el),
     config: getConfig(el, this.settings)
-  }, methods); // Set aria-expanded to false if trigger has aria-controls attribute.
-
+  }, methods);
 
+  // Set aria-expanded to false if trigger has aria-controls attribute.
   if (entry.trigger.hasAttribute('aria-controls')) {
     entry.trigger.setAttribute('aria-expanded', 'false');
-  } // Setup event listeners.
-
+  }
 
-  registerEventListeners.call(this, entry); // Add entry to collection.
+  // Setup event listeners.
+  registerEventListeners.call(this, entry);
 
-  this.collection.push(entry); // Set initial state.
+  // Add entry to collection.
+  this.collection.push(entry);
 
+  // Set initial state.
   if (entry.el.classList.contains(this.settings.stateActive)) {
     await entry.open();
     handleDocumentClick.call(this, entry);
-  } // Return the registered entry.
-
+  }
 
+  // Return the registered entry.
   return entry;
 }
 function registerEventListeners(entry) {
   // If event listeners aren't already setup.
   if (!entry.__eventListeners) {
     // Add event listeners based on event type.
-    const eventType = entry.config['event']; // If the event type is hover.
+    const eventType = entry.config['event'];
 
+    // If the event type is hover.
     if (eventType === 'hover') {
       // Setup event listeners object for hover.
       entry.__eventListeners = [{
@@ -3924,8 +3973,9 @@ function registerEventListeners(entry) {
         el: ['el', 'trigger'],
         type: ['mouseleave', 'focusout'],
         listener: closeCheck.bind(this, entry)
-      }]; // Loop through listeners and apply to the appropriate elements.
+      }];
 
+      // Loop through listeners and apply to the appropriate elements.
       entry.__eventListeners.forEach(evObj => {
         evObj.el.forEach(el => {
           evObj.type.forEach(type => {
@@ -3933,15 +3983,18 @@ function registerEventListeners(entry) {
           });
         });
       });
-    } // Else the event type is click.
+    }
+
+    // Else the event type is click.
     else {
       // Setup event listeners object for click.
       entry.__eventListeners = [{
         el: ['trigger'],
         type: ['click'],
         listener: handleClick.bind(this, entry)
-      }]; // Loop through listeners and apply to the appropriate elements.
+      }];
 
+      // Loop through listeners and apply to the appropriate elements.
       entry.__eventListeners.forEach(evObj => {
         evObj.el.forEach(el => {
           evObj.type.forEach(type => {
@@ -3950,14 +4003,13 @@ function registerEventListeners(entry) {
         });
       });
     }
-  } // Return the entry object.
-
+  }
 
+  // Return the entry object.
   return entry;
 }
 
 var _handleKeydown = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
-
 class Popover extends Collection {
   constructor(options) {
     super();
@@ -3971,82 +4023,76 @@ class Popover extends Collection {
     _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown] = handleKeydown.bind(this);
     if (this.settings.autoInit) this.init();
   }
-
   async init(options) {
     // Update settings with passed options.
-    if (options) this.settings = _extends({}, this.settings, options); // Get all the popovers.
+    if (options) this.settings = _extends({}, this.settings, options);
 
-    const popovers = document.querySelectorAll(this.settings.selectorPopover); // Register the collections array with popover instances.
+    // Get all the popovers.
+    const popovers = document.querySelectorAll(this.settings.selectorPopover);
 
-    await this.registerCollection(popovers); // If eventListeners are enabled, init event listeners.
+    // Register the collections array with popover instances.
+    await this.registerCollection(popovers);
 
+    // If eventListeners are enabled, init event listeners.
     if (this.settings.eventListeners) {
       // Pass false to initEventListeners() since registerCollection()
       // already adds event listeners to popovers.
       this.initEventListeners(false);
     }
-
     return this;
   }
-
   async destroy() {
     // Clear stored trigger.
-    this.trigger = null; // Remove all entries from the collection.
+    this.trigger = null;
 
-    await this.deregisterCollection(); // If eventListeners are enabled, destroy event listeners.
+    // Remove all entries from the collection.
+    await this.deregisterCollection();
 
+    // If eventListeners are enabled, destroy event listeners.
     if (this.settings.eventListeners) {
       // Pass false to destroyEventListeners() since deregisterCollection()
       // already removes event listeners from popovers.
       this.destroyEventListeners(false);
     }
-
     return this;
   }
-
   initEventListeners(processCollection = true) {
     if (processCollection) {
       // Loop through collection and setup event listeners.
       this.collection.forEach(popover => {
         registerEventListeners.call(this, popover);
       });
-    } // Add keydown global event listener.
-
+    }
 
+    // Add keydown global event listener.
     document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
   }
-
   destroyEventListeners(processCollection = true) {
     if (processCollection) {
       // Loop through collection and remove event listeners.
       this.collection.forEach(popover => {
         deregisterEventListeners(popover);
       });
-    } // Remove keydown global event listener.
-
+    }
 
+    // Remove keydown global event listener.
     document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
   }
-
   register(query) {
     const els = getPopoverElements.call(this, query);
     if (els.error) return Promise.reject(els.error);
     return register.call(this, els.popover, els.trigger);
   }
-
   deregister(query) {
     const popover = this.get(getPopoverID.call(this, query));
     return deregister.call(this, popover);
   }
-
   open(id) {
     return open.call(this, id);
   }
-
   close(id) {
     return close.call(this, id);
   }
-
 }
 
 export { Checkbox, Drawer, Modal, Popover, index as core };