vrembem 1.38.0 → 1.40.2

package/dev/scripts.esm.js

@@ -351,14 +351,6 @@ var closeTransition = function closeTransition(el, settings) {
   });
 };
 
-var breakpoints = {
-  xs: '480px',
-  sm: '620px',
-  md: '760px',
-  lg: '990px',
-  xl: '1380px'
-};
-
 var index = {
   __proto__: null,
   setInert: setInert,
@@ -376,8 +368,7 @@ var index = {
   removeClass: removeClass,
   toggleClass: toggleClass,
   openTransition: openTransition,
-  closeTransition: closeTransition,
-  breakpoints: breakpoints
+  closeTransition: closeTransition
 };
 
 function _extends() {
@@ -495,7 +486,7 @@ var defaults$2 = {
   selectorInert: null,
   selectorOverflow: null,
   // Feature toggles
-  breakpoints: breakpoints,
+  breakpoints: null,
   customEventPrefix: 'drawer:',
   eventListeners: true,
   stateSave: true,
@@ -504,59 +495,11 @@ var defaults$2 = {
   transition: true
 };
 
-var switchToDefault = function switchToDefault(drawerKey, obj) {
-  try {
-    // Initial guards
-    var drawer = obj.getDrawer(drawerKey);
-    if (!drawer) return Promise.resolve(obj.drawerNotFound(drawerKey));
-    if (!hasClass(drawer, obj.settings.classModal)) return Promise.resolve(); // Tear down modal state
-
-    setInert(false, obj.settings.selectorInert);
-    setOverflowHidden(false, obj.settings.selectorOverflow);
-    removeClass(drawer, obj.settings.classModal);
-    obj.focusTrap.destroy(); // Restore drawers saved state
-
-    drawerKey = drawer.getAttribute("data-" + obj.settings.dataDrawer);
-    var drawerState = obj.state[drawerKey];
-
-    if (drawerState == obj.settings.stateOpened) {
-      addClass(drawer, obj.settings.stateOpened);
-      removeClass(drawer, obj.settings.stateClosed);
-    } // Dispatch custom event
-
-
-    drawer.dispatchEvent(new CustomEvent(obj.settings.customEventPrefix + 'toDefault', {
-      bubbles: true
-    }));
-    return Promise.resolve(drawer);
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
-var switchToModal = function switchToModal(drawerKey, obj) {
-  try {
-    // Initial guards
-    var drawer = obj.getDrawer(drawerKey);
-    if (!drawer) return Promise.resolve(obj.drawerNotFound(drawerKey));
-    if (hasClass(drawer, obj.settings.classModal)) return Promise.resolve(); // Enable modal state
-
-    addClass(drawer, obj.settings.classModal);
-    addClass(drawer, obj.settings.stateClosed);
-    removeClass(drawer, obj.settings.stateOpened); // Dispatch custom event
-
-    drawer.dispatchEvent(new CustomEvent(obj.settings.customEventPrefix + 'toModal', {
-      bubbles: true
-    }));
-    return Promise.resolve(drawer);
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
-
 var Breakpoint = /*#__PURE__*/function () {
   function Breakpoint(parent) {
     this.mediaQueryLists = [];
     this.parent = parent;
+    this.prefix = this.getVariablePrefix();
     this.__check = this.check.bind(this);
   }
 
@@ -569,7 +512,9 @@ var Breakpoint = /*#__PURE__*/function () {
     drawers.forEach(function (drawer) {
       var id = drawer.getAttribute("data-" + _this.parent.settings.dataDrawer);
       var key = drawer.getAttribute("data-" + _this.parent.settings.dataBreakpoint);
-      var bp = _this.parent.settings.breakpoints[key] ? _this.parent.settings.breakpoints[key] : key;
+
+      var bp = _this.getBreakpoint(key);
+
       var mql = window.matchMedia('(min-width:' + bp + ')');
 
       _this.match(mql, drawer);
@@ -619,15 +564,80 @@ var Breakpoint = /*#__PURE__*/function () {
 
   _proto.match = function match(mql, drawer) {
     if (mql.matches) {
-      switchToDefault(drawer, this.parent);
+      this.parent.switchToDefault(drawer);
     } else {
-      switchToModal(drawer, this.parent);
+      this.parent.switchToModal(drawer);
     }
   };
 
+  _proto.getBreakpoint = function getBreakpoint(key) {
+    var breakpoint = key;
+
+    if (this.parent.settings.breakpoints && this.parent.settings.breakpoints[key]) {
+      breakpoint = this.parent.settings.breakpoints[key];
+    } else if (getComputedStyle(document.body).getPropertyValue(this.prefix + key)) {
+      breakpoint = getComputedStyle(document.body).getPropertyValue(this.prefix + key);
+    }
+
+    return breakpoint;
+  };
+
+  _proto.getVariablePrefix = function getVariablePrefix() {
+    var prefix = '--';
+    prefix += getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
+    prefix += 'breakpoint-';
+    return prefix;
+  };
+
   return Breakpoint;
 }();
 
+function getDrawer(drawerKey) {
+  if (typeof drawerKey !== 'string') return drawerKey;
+  return document.querySelector("[data-" + this.settings.dataDrawer + "=\"" + drawerKey + "\"]");
+}
+function drawerNotFound(key) {
+  return Promise.reject(new Error("Did not find drawer with key: \"" + key + "\""));
+}
+
+var close$2 = function close(drawerKey) {
+  try {
+    var _this2 = this;
+
+    var drawer = _this2.getDrawer(drawerKey);
+
+    if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
+
+    if (hasClass(drawer, _this2.settings.stateOpened)) {
+      _this2.working = true;
+
+      if (hasClass(drawer, _this2.settings.classModal)) {
+        setInert(false, _this2.settings.selectorInert);
+        setOverflowHidden(false, _this2.settings.selectorOverflow);
+      }
+
+      return Promise.resolve(closeTransition(drawer, _this2.settings)).then(function () {
+        _this2.stateSave(drawer);
+
+        focusTrigger(_this2);
+
+        _this2.focusTrap.destroy();
+
+        drawer.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'closed', {
+          detail: _this2,
+          bubbles: true
+        }));
+        _this2.working = false;
+        return drawer;
+      });
+    } else {
+      return Promise.resolve(drawer);
+    }
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
 function handlerClick$2(event) {
   // Working catch
   if (this.working) return; // Toggle data trigger
@@ -691,6 +701,48 @@ function handlerKeydown$2(event) {
   }
 }
 
+var open$2 = function open(drawerKey) {
+  try {
+    var _this2 = this;
+
+    var drawer = _this2.getDrawer(drawerKey);
+
+    if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
+
+    if (!hasClass(drawer, _this2.settings.stateOpened)) {
+      _this2.working = true;
+      var isModal = hasClass(drawer, _this2.settings.classModal);
+
+      if (isModal) {
+        setOverflowHidden(true, _this2.settings.selectorOverflow);
+      }
+
+      return Promise.resolve(openTransition(drawer, _this2.settings)).then(function () {
+        _this2.stateSave(drawer);
+
+        if (isModal) {
+          _this2.focusTrap.init(drawer);
+
+          setInert(true, _this2.settings.selectorInert);
+        }
+
+        focusTarget(drawer, _this2.settings);
+        drawer.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'opened', {
+          detail: _this2,
+          bubbles: true
+        }));
+        _this2.working = false;
+        return drawer;
+      });
+    } else {
+      focusTarget(drawer, _this2.settings);
+      return Promise.resolve(drawer);
+    }
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
 function stateSet(settings) {
   // If save state is disabled
   if (!settings.stateSave) return stateClear(settings); // If there isn't an existing state to set
@@ -735,6 +787,82 @@ function stateClear(settings) {
   return {};
 }
 
+var switchToDefault = function switchToDefault(drawerKey) {
+  try {
+    var _this4 = this;
+
+    // Initial guards
+    var drawer = _this4.getDrawer(drawerKey);
+
+    if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
+    if (!hasClass(drawer, _this4.settings.classModal)) return Promise.resolve(); // Tear down modal state
+
+    setInert(false, _this4.settings.selectorInert);
+    setOverflowHidden(false, _this4.settings.selectorOverflow);
+    removeClass(drawer, _this4.settings.classModal);
+
+    _this4.focusTrap.destroy(); // Restore drawers saved state
+
+
+    drawerKey = drawer.getAttribute("data-" + _this4.settings.dataDrawer);
+    var drawerState = _this4.state[drawerKey];
+
+    if (drawerState == _this4.settings.stateOpened) {
+      addClass(drawer, _this4.settings.stateOpened);
+      removeClass(drawer, _this4.settings.stateClosed);
+    } // Dispatch custom event
+
+
+    drawer.dispatchEvent(new CustomEvent(_this4.settings.customEventPrefix + 'toDefault', {
+      bubbles: true
+    }));
+    return Promise.resolve(drawer);
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var switchToModal = function switchToModal(drawerKey) {
+  try {
+    var _this2 = this;
+
+    // Initial guards
+    var drawer = _this2.getDrawer(drawerKey);
+
+    if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
+    if (hasClass(drawer, _this2.settings.classModal)) return Promise.resolve(); // Enable modal state
+
+    addClass(drawer, _this2.settings.classModal);
+    addClass(drawer, _this2.settings.stateClosed);
+    removeClass(drawer, _this2.settings.stateOpened); // Dispatch custom event
+
+    drawer.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'toModal', {
+      bubbles: true
+    }));
+    return Promise.resolve(drawer);
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
+var toggle = function toggle(drawerKey) {
+  try {
+    var _this2 = this;
+
+    var drawer = _this2.getDrawer(drawerKey);
+
+    if (!drawer) return Promise.resolve(drawerNotFound(drawerKey));
+    var isClosed = !hasClass(drawer, _this2.settings.stateOpened);
+
+    if (isClosed) {
+      return Promise.resolve(_this2.open(drawer));
+    } else {
+      return Promise.resolve(_this2.close(drawer));
+    }
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
 var Drawer = /*#__PURE__*/function () {
   function Drawer(options) {
     this.defaults = defaults$2;
@@ -801,19 +929,12 @@ var Drawer = /*#__PURE__*/function () {
    */
   ;
 
-  _proto.getDrawer = function getDrawer(drawerKey) {
-    if (typeof drawerKey !== 'string') return drawerKey;
-    return document.querySelector("[data-" + this.settings.dataDrawer + "=\"" + drawerKey + "\"]");
-  };
-
-  _proto.drawerNotFound = function drawerNotFound(key) {
-    return Promise.reject(new Error("Did not find drawer with key: \"" + key + "\""));
+  _proto.getDrawer = function getDrawer$1(drawerKey) {
+    return getDrawer.call(this, drawerKey);
   };
 
   _proto.setTabindex = function setTabindex$1() {
-    var selectorTabindex = "\n      [data-" + this.settings.dataDrawer + "]\n      [data-" + this.settings.dataDialog + "]\n    ";
-
-    setTabindex(selectorTabindex);
+    return setTabindex("\n      [data-" + this.settings.dataDrawer + "]\n      [data-" + this.settings.dataDialog + "]\n    ");
   }
   /**
    * Save state functionality
@@ -841,114 +962,27 @@ var Drawer = /*#__PURE__*/function () {
   ;
 
   _proto.switchToDefault = function switchToDefault$1(drawerKey) {
-    return switchToDefault(drawerKey, this);
+    return switchToDefault.call(this, drawerKey);
   };
 
   _proto.switchToModal = function switchToModal$1(drawerKey) {
-    return switchToModal(drawerKey, this);
+    return switchToModal.call(this, drawerKey);
   }
   /**
    * Change state functionality
    */
   ;
 
-  _proto.toggle = function toggle(drawerKey) {
-    try {
-      var _this2 = this;
-
-      var drawer = _this2.getDrawer(drawerKey);
-
-      if (!drawer) return Promise.resolve(_this2.drawerNotFound(drawerKey));
-      var isClosed = !hasClass(drawer, _this2.settings.stateOpened);
-
-      if (isClosed) {
-        return Promise.resolve(_this2.open(drawer));
-      } else {
-        return Promise.resolve(_this2.close(drawer));
-      }
-    } catch (e) {
-      return Promise.reject(e);
-    }
+  _proto.toggle = function toggle$1(drawerKey) {
+    return toggle.call(this, drawerKey);
   };
 
   _proto.open = function open(drawerKey) {
-    try {
-      var _this4 = this;
-
-      var drawer = _this4.getDrawer(drawerKey);
-
-      if (!drawer) return Promise.resolve(_this4.drawerNotFound(drawerKey));
-
-      if (!hasClass(drawer, _this4.settings.stateOpened)) {
-        _this4.working = true;
-        var isModal = hasClass(drawer, _this4.settings.classModal);
-
-        if (isModal) {
-          setOverflowHidden(true, _this4.settings.selectorOverflow);
-        }
-
-        return Promise.resolve(openTransition(drawer, _this4.settings)).then(function () {
-          _this4.stateSave(drawer);
-
-          if (isModal) {
-            _this4.focusTrap.init(drawer);
-
-            setInert(true, _this4.settings.selectorInert);
-          }
-
-          focusTarget(drawer, _this4.settings);
-          drawer.dispatchEvent(new CustomEvent(_this4.settings.customEventPrefix + 'opened', {
-            detail: _this4,
-            bubbles: true
-          }));
-          _this4.working = false;
-          return drawer;
-        });
-      } else {
-        focusTarget(drawer, _this4.settings);
-        return Promise.resolve(drawer);
-      }
-    } catch (e) {
-      return Promise.reject(e);
-    }
+    return open$2.call(this, drawerKey);
   };
 
   _proto.close = function close(drawerKey) {
-    try {
-      var _this6 = this;
-
-      var drawer = _this6.getDrawer(drawerKey);
-
-      if (!drawer) return Promise.resolve(_this6.drawerNotFound(drawerKey));
-
-      if (hasClass(drawer, _this6.settings.stateOpened)) {
-        _this6.working = true;
-
-        if (hasClass(drawer, _this6.settings.classModal)) {
-          setInert(false, _this6.settings.selectorInert);
-          setOverflowHidden(false, _this6.settings.selectorOverflow);
-        }
-
-        return Promise.resolve(closeTransition(drawer, _this6.settings)).then(function () {
-          _this6.stateSave(drawer);
-
-          focusTrigger(_this6);
-
-          _this6.focusTrap.destroy();
-
-          drawer.dispatchEvent(new CustomEvent(_this6.settings.customEventPrefix + 'closed', {
-            detail: _this6,
-            bubbles: true
-          }));
-          _this6.working = false;
-          return drawer;
-        });
-      } else {
-        return Promise.resolve(drawer);
-      }
-    } catch (e) {
-      return Promise.reject(e);
-    }
+    return close$2.call(this, drawerKey);
   };
 
   return Drawer;
@@ -982,6 +1016,40 @@ var defaults$1 = {
   transition: true
 };
 
+var close$1 = function close(returnFocus) {
+  if (returnFocus === void 0) {
+    returnFocus = true;
+  }
+
+  try {
+    var _this2 = this;
+
+    var modal = document.querySelector("[data-" + _this2.settings.dataModal + "]." + _this2.settings.stateOpened);
+
+    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);
+
+        _this2.focusTrap.destroy();
+
+        modal.dispatchEvent(new CustomEvent(_this2.settings.customEventPrefix + 'closed', {
+          detail: _this2,
+          bubbles: true
+        }));
+        _this2.working = false;
+        return modal;
+      });
+    } else {
+      return Promise.resolve(modal);
+    }
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
 var handlerClick$1 = function handlerClick(event) {
   try {
     var _temp3 = function _temp3(_result) {
@@ -1043,21 +1111,76 @@ function handlerKeydown$1(event) {
   }
 }
 
-function setInitialState(obj) {
-  var modals = document.querySelectorAll("[data-" + obj.settings.dataModal + "]");
+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;
+  }
+
+  if (ref === void 0) {
+    ref = this.settings.moveModals.ref;
+  }
+
+  var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
+  if (modals.length) moveElement(modals, type, ref);
+}
+
+function setInitialState() {
+  var _this = this;
+
+  var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
   modals.forEach(function (el) {
-    if (el.classList.contains(obj.settings.stateOpened)) {
-      setInert(false, obj.settings.selectorInert);
-      setOverflowHidden(false, obj.settings.selectorOverflow);
-      focusTrigger(obj);
-      obj.focusTrap.destroy();
-    }
+    // Remove opened state setup
+    if (el.classList.contains(_this.settings.stateOpened)) {
+      setInert(false, _this.settings.selectorInert);
+      setOverflowHidden(false, _this.settings.selectorOverflow);
+      focusTrigger(_this);
+
+      _this.focusTrap.destroy();
+    } // Remove all state classes and add the default state (closed)
 
-    removeClass(el, obj.settings.stateOpened, obj.settings.stateOpening, obj.settings.stateClosing);
-    addClass(el, obj.settings.stateClosed);
+
+    removeClass(el, _this.settings.stateOpened, _this.settings.stateOpening, _this.settings.stateClosing);
+    addClass(el, _this.settings.stateClosed);
   });
 }
 
+var open$1 = function open(modalKey) {
+  try {
+    var _this2 = this;
+
+    var modal = getModal.call(_this2, modalKey);
+    if (!modal) return Promise.resolve(modalNotFound(modalKey));
+
+    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);
+
+        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);
+    }
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
 var Modal = /*#__PURE__*/function () {
   function Modal(options) {
     this.defaults = defaults$1;
@@ -1079,13 +1202,12 @@ var Modal = /*#__PURE__*/function () {
 
     if (options) this.settings = _extends({}, this.settings, options);
     this.moveModals();
+    this.setInitialState();
 
     if (this.settings.setTabindex) {
       this.setTabindex();
     }
 
-    this.setInitialState();
-
     if (this.settings.eventListeners) {
       this.initEventListeners();
     }
@@ -1119,36 +1241,20 @@ var Modal = /*#__PURE__*/function () {
    */
   ;
 
-  _proto.getModal = function getModal(modalKey) {
-    if (typeof modalKey !== 'string') return modalKey;
-    return document.querySelector("[data-" + this.settings.dataModal + "=\"" + modalKey + "\"]");
-  };
-
-  _proto.modalNotFound = function modalNotFound(key) {
-    return Promise.reject(new Error("Did not find modal with key: \"" + key + "\""));
+  _proto.getModal = function getModal$1(modalKey) {
+    return getModal.call(this, modalKey);
   };
 
   _proto.setTabindex = function setTabindex$1() {
-    var selectorTabindex = "\n      [data-" + this.settings.dataModal + "]\n      [data-" + this.settings.dataDialog + "]\n    ";
-
-    setTabindex(selectorTabindex);
+    return setTabindex("\n      [data-" + this.settings.dataModal + "]\n      [data-" + this.settings.dataDialog + "]\n    ");
   };
 
   _proto.setInitialState = function setInitialState$1() {
-    setInitialState(this);
+    return setInitialState.call(this);
   };
 
-  _proto.moveModals = function moveModals(type, ref) {
-    if (type === void 0) {
-      type = this.settings.moveModals.type;
-    }
-
-    if (ref === void 0) {
-      ref = this.settings.moveModals.ref;
-    }
-
-    var modals = document.querySelectorAll("[data-" + this.settings.dataModal + "]");
-    if (modals.length) moveElement(modals, type, ref);
+  _proto.moveModals = function moveModals$1(type, ref) {
+    return moveModals.call(this, type, ref);
   }
   /**
    * Change state functionality
@@ -1156,68 +1262,11 @@ var Modal = /*#__PURE__*/function () {
   ;
 
   _proto.open = function open(modalKey) {
-    try {
-      var _this2 = this;
-
-      var modal = _this2.getModal(modalKey);
-
-      if (!modal) return Promise.resolve(_this2.modalNotFound(modalKey));
-
-      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);
-
-          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);
-      }
-    } catch (e) {
-      return Promise.reject(e);
-    }
+    return open$1.call(this, modalKey);
   };
 
   _proto.close = function close(returnFocus) {
-    if (returnFocus === void 0) {
-      returnFocus = true;
-    }
-
-    try {
-      var _this4 = this;
-
-      var modal = document.querySelector("[data-" + _this4.settings.dataModal + "]." + _this4.settings.stateOpened);
-
-      if (modal) {
-        _this4.working = true;
-        setInert(false, _this4.settings.selectorInert);
-        setOverflowHidden(false, _this4.settings.selectorOverflow);
-        return Promise.resolve(closeTransition(modal, _this4.settings)).then(function () {
-          if (returnFocus) focusTrigger(_this4);
-
-          _this4.focusTrap.destroy();
-
-          modal.dispatchEvent(new CustomEvent(_this4.settings.customEventPrefix + 'closed', {
-            detail: _this4,
-            bubbles: true
-          }));
-          _this4.working = false;
-          return modal;
-        });
-      } else {
-        return Promise.resolve(modal);
-      }
-    } catch (e) {
-      return Promise.reject(e);
-    }
+    return close$1.call(this, returnFocus);
   };
 
   return Modal;
@@ -1239,9 +1288,9 @@ var defaults = {
   placement: 'bottom-start'
 };
 
-function hide$2(popover, obj) {
+function close(popover) {
   // Update state class
-  popover.target.classList.remove(obj.settings.stateActive); // Update a11y attributes
+  popover.target.classList.remove(this.settings.stateActive); // Update a11y attributes
 
   popover.trigger.setAttribute('aria-expanded', 'false'); // Disable popper event listeners
 
@@ -1252,32 +1301,43 @@ function hide$2(popover, obj) {
     }]
   }); // Update collection status with new state
 
-  var index = obj.collection.findIndex(function (item) {
+  var index = this.collection.findIndex(function (item) {
     return item.target === popover.target;
   });
-  obj.collection[index].state = 'hide'; // Return the popover
+  this.collection[index].state = 'closed'; // Clear the memory if popover trigger matches the ones saved in memory
+
+  if (popover.trigger === this.memory.trigger) {
+    this.memory.trigger = null;
+  } // Return the popover
+
 
   return popover;
 }
-function hideAll(obj) {
-  obj.collection.forEach(function (popover) {
-    if (popover.state === 'show') {
-      hide$2(popover, obj);
+function closeAll() {
+  var _this = this;
+
+  this.collection.forEach(function (popover) {
+    if (popover.state === 'opened') {
+      _this.close(popover);
     }
   }); // Return the collection
 
-  return obj.collection;
+  return this.collection;
 }
-function hideCheck(popover, obj) {
-  // Needed to correctly check which element is currently being focused
+function closeCheck(popover) {
+  var _this2 = this;
+
+  // 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("[data-" + obj.settings.dataPopover + "]") === popover.target || document.activeElement.closest("[data-" + obj.settings.dataTrigger + "]") === popover.trigger; // Hide if the trigger and target are not currently hovered or focused
+    var isFocused = document.activeElement.closest("[data-" + _this2.settings.dataPopover + "]") === popover.target || document.activeElement.closest("[data-" + _this2.settings.dataTrigger + "]") === popover.trigger; // Close if the trigger and target are not currently hovered or focused
 
     if (!isHovered && !isFocused) {
-      hide$2(popover, obj);
+      _this2.close(popover);
     } // Return the popover
 
 
@@ -1285,6 +1345,57 @@ function hideCheck(popover, obj) {
   }, 1);
 }
 
+function handlerClick(popover) {
+  if (popover.target.classList.contains(this.settings.stateActive)) {
+    this.close(popover);
+  } else {
+    this.memory.trigger = popover.trigger;
+    this.open(popover);
+    documentClick.call(this, popover);
+  }
+}
+function handlerKeydown(event) {
+  var _this = this;
+
+  switch (event.key) {
+    case 'Escape':
+      if (this.memory.trigger) {
+        this.memory.trigger.focus();
+      }
+
+      this.closeAll();
+      return;
+
+    case 'Tab':
+      this.collection.forEach(function (popover) {
+        closeCheck.call(_this, popover);
+      });
+      return;
+
+    default:
+      return;
+  }
+}
+function documentClick(popover) {
+  var obj = this;
+  document.addEventListener('click', function _f(event) {
+    var result = event.target.closest("[data-" + obj.settings.dataPopover + "], [data-" + obj.settings.dataTrigger + "]");
+    var match = result === popover.target || result === popover.trigger;
+
+    if (!match) {
+      if (popover.target.classList.contains(obj.settings.stateActive)) {
+        obj.close(popover);
+      }
+
+      this.removeEventListener('click', _f);
+    } else {
+      if (!popover.target.classList.contains(obj.settings.stateActive)) {
+        this.removeEventListener('click', _f);
+      }
+    }
+  });
+}
+
 function getConfig(el, settings) {
   // Get the computed styles of the popover
   var styles = getComputedStyle(el); // Setup the config obj with default values
@@ -1301,7 +1412,8 @@ function getConfig(el, settings) {
 
   for (var prop in config) {
     // Get the CSS variable property values
-    var val = styles.getPropertyValue("--popover-" + prop).trim(); // If a value was found, replace the default in config obj
+    var prefix = getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix');
+    var val = styles.getPropertyValue("--" + prefix + "popover-" + prop).trim(); // If a value was found, replace the default in config obj
 
     if (val) {
       config[prop] = val;
@@ -1408,16 +1520,16 @@ function getPopover(trigger, settings) {
   }
 }
 
-function show(popover, obj) {
+function open(popover) {
   // Update state class
-  popover.target.classList.add(obj.settings.stateActive); // Update a11y attributes
+  popover.target.classList.add(this.settings.stateActive); // Update a11y attributes
 
   popover.trigger.setAttribute('aria-expanded', 'true'); // Update popover config
 
-  popover.config = getConfig(popover.target, obj.settings); // Enable popper event listeners and set placement/modifiers
+  popover.config = getConfig(popover.target, this.settings); // Enable popper event listeners and set placement/modifiers
 
   popover.popper.setOptions({
-    placement: getData(popover.target, obj.settings.dataPlacement, popover.config['placement']),
+    placement: getData(popover.target, this.settings.dataPlacement, popover.config['placement']),
     modifiers: [{
       name: 'eventListeners',
       enabled: true
@@ -1426,46 +1538,14 @@ function show(popover, obj) {
 
   popover.popper.update(); // Update collection status with new state
 
-  var index = obj.collection.findIndex(function (item) {
+  var index = this.collection.findIndex(function (item) {
     return item.target === popover.target;
   });
-  obj.collection[index].state = 'show'; // Return the popover
+  this.collection[index].state = 'opened'; // Return the popover
 
   return popover;
 }
 
-function handlerClick(popover) {
-  if (popover.target.classList.contains(this.settings.stateActive)) {
-    hide$2(popover, this);
-  } else {
-    show(popover, this);
-    documentClick(popover, this);
-  }
-}
-function handlerKeydown(event) {
-  if (event.key === 'Escape') {
-    hideAll(this);
-  }
-}
-function documentClick(popover, obj) {
-  document.addEventListener('click', function _f(event) {
-    var result = event.target.closest("[data-" + obj.settings.dataPopover + "], [data-" + obj.settings.dataTrigger + "]");
-    var match = result === popover.target || result === popover.trigger;
-
-    if (!match) {
-      if (popover.target.classList.contains(obj.settings.stateActive)) {
-        hide$2(popover, obj);
-      }
-
-      this.removeEventListener('click', _f);
-    } else {
-      if (!popover.target.classList.contains(obj.settings.stateActive)) {
-        this.removeEventListener('click', _f);
-      }
-    }
-  });
-}
-
 var top = 'top';
 var bottom = 'bottom';
 var right = 'right';
@@ -3249,11 +3329,11 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-function register(trigger, target, obj) {
+function register(trigger, target) {
   // If no target is passed
   if (!target) {
     // Try and get the target
-    target = getPopover(trigger, obj.settings); // If still no target is returned, log an error and return false
+    target = getPopover(trigger, this.settings); // If still no target is returned, log an error and return false
 
     if (!target) {
       console.error('No popover associated with the provided trigger:', trigger);
@@ -3262,7 +3342,7 @@ function register(trigger, target, obj) {
   } // Check if this item has already been registered in the collection
 
 
-  var index = obj.collection.findIndex(function (item) {
+  var index = this.collection.findIndex(function (item) {
     return item.trigger === trigger && item.target === target;
   }); // Initiate popover variable
 
@@ -3270,45 +3350,45 @@ function register(trigger, target, obj) {
 
   if (index >= 0) {
     // Set popover as item from collection
-    popover = obj.collection[index];
+    popover = this.collection[index];
   } else {
     // Create popper instance
     var popperInstance = createPopper(trigger, target); // Build popover object and push to collection array
 
     popover = {
-      state: 'hide',
+      state: 'closed',
       trigger: trigger,
       target: target,
       popper: popperInstance,
-      config: getConfig(target, obj.settings)
+      config: getConfig(target, this.settings)
     }; // Add item to collection
 
-    obj.collection.push(popover);
+    this.collection.push(popover);
   } // Setup event listeners
 
 
-  registerEventListeners(popover, obj); // Set initial state of popover
+  registerEventListeners.call(this, popover); // Set initial state of popover
 
-  if (popover.target.classList.contains(obj.settings.stateActive)) {
-    show(popover, obj);
-    documentClick(popover, obj);
+  if (popover.target.classList.contains(this.settings.stateActive)) {
+    this.open(popover);
+    documentClick.call(this, popover);
   } else {
-    hide$2(popover, obj);
+    this.close(popover);
   } // Return the popover object
 
 
   return popover;
 }
-function deregister(popover, obj) {
+function deregister(popover) {
   // Check if this item has been registered in the collection
-  var index = obj.collection.findIndex(function (item) {
+  var index = this.collection.findIndex(function (item) {
     return item.trigger === popover.trigger && item.target === popover.target;
   }); // If the item exists in the collection
 
   if (index >= 0) {
-    // Hide the popover
-    if (popover.state === 'show') {
-      hide$2(popover, obj);
+    // Close the popover
+    if (popover.state === 'opened') {
+      this.close(popover);
     } // Clean up the popper instance
 
 
@@ -3316,28 +3396,28 @@ function deregister(popover, obj) {
 
     deregisterEventListeners(popover); // Remove item from collection
 
-    obj.collection.splice(index, 1);
+    this.collection.splice(index, 1);
   } // Return the new collection
 
 
-  return obj.collection;
+  return this.collection;
 }
-function registerEventListeners(popover, obj) {
+function registerEventListeners(popover) {
   // If event listeners aren't already setup
   if (!popover.__eventListeners) {
     // Add event listeners based on event type
-    var eventType = getData(popover.target, obj.settings.dataEventType, popover.config['event']);
+    var eventType = getData(popover.target, this.settings.dataEventType, popover.config['event']);
 
     if (eventType === 'hover') {
       // Setup event listeners object for hover
       popover.__eventListeners = [{
         el: ['trigger'],
         type: ['mouseenter', 'focus'],
-        listener: show.bind(null, popover, obj)
+        listener: open.bind(this, popover)
       }, {
         el: ['trigger', 'target'],
         type: ['mouseleave', 'focusout'],
-        listener: hideCheck.bind(null, popover, obj)
+        listener: closeCheck.bind(this, popover)
       }]; // Loop through listeners and apply to appropriate elements
 
       popover.__eventListeners.forEach(function (evObj) {
@@ -3352,7 +3432,7 @@ function registerEventListeners(popover, obj) {
       popover.__eventListeners = [{
         el: ['trigger'],
         type: ['click'],
-        listener: handlerClick.bind(obj, popover)
+        listener: handlerClick.bind(this, popover)
       }]; // Loop through listeners and apply to appropriate elements
 
       popover.__eventListeners.forEach(function (evObj) {
@@ -3387,24 +3467,26 @@ function deregisterEventListeners(popover) {
 
   return popover;
 }
-function registerCollection(obj) {
+function registerCollection() {
+  var _this = this;
+
   // Get all the triggers
-  var triggers = document.querySelectorAll("[data-" + obj.settings.dataTrigger + "]");
+  var triggers = document.querySelectorAll("[data-" + this.settings.dataTrigger + "]");
   triggers.forEach(function (trigger) {
     // Register the popover and save to collection array
-    register(trigger, false, obj);
+    _this.register(trigger, false);
   }); // Return the popover collection
 
-  return obj.collection;
+  return this.collection;
 }
-function deregisterCollection(obj) {
+function deregisterCollection() {
   // Loop through all items within the collection and pass them to deregister()
-  while (obj.collection.length > 0) {
-    deregister(obj.collection[0], obj);
+  while (this.collection.length > 0) {
+    this.deregister(this.collection[0]);
   } // Return the popover collection
 
 
-  return obj.collection;
+  return this.collection;
 }
 
 var Popover = /*#__PURE__*/function () {
@@ -3412,6 +3494,9 @@ var Popover = /*#__PURE__*/function () {
     this.defaults = defaults;
     this.settings = _extends({}, this.defaults, options);
     this.collection = [];
+    this.memory = {
+      trigger: null
+    };
     this.__handlerKeydown = handlerKeydown.bind(this);
     if (this.settings.autoInit) this.init();
   }
@@ -3426,8 +3511,7 @@ var Popover = /*#__PURE__*/function () {
     // Update settings with passed options
     if (options) this.settings = _extends({}, this.settings, options); // Build the collections array with popover instances
 
-    registerCollection(this); // If eventListeners is enabled
-
+    this.registerCollection(); // If eventListeners is enabled
 
     if (this.settings.eventListeners) {
       // Pass false to initEventListeners() since registerCollection()
@@ -3438,8 +3522,7 @@ var Popover = /*#__PURE__*/function () {
 
   _proto.destroy = function destroy() {
     // Deregister all popovers from collection
-    deregisterCollection(this); // If eventListeners is enabled
-
+    this.deregisterCollection(); // If eventListeners is enabled
 
     if (this.settings.eventListeners) {
       // Pass false to destroyEventListeners() since deregisterCollection()
@@ -3462,7 +3545,7 @@ var Popover = /*#__PURE__*/function () {
     if (processCollection) {
       // Loop through collection and setup event listeners
       this.collection.forEach(function (popover) {
-        registerEventListeners(popover, _this);
+        registerEventListeners.call(_this, popover);
       });
     } // Add keydown global event listener
 
@@ -3495,35 +3578,35 @@ var Popover = /*#__PURE__*/function () {
       target = false;
     }
 
-    return register(trigger, target, this);
+    return register.call(this, trigger, target);
   };
 
   _proto.deregister = function deregister$1(popover) {
-    return deregister(popover, this);
+    return deregister.call(this, popover);
   };
 
   _proto.registerCollection = function registerCollection$1() {
-    return registerCollection(this);
+    return registerCollection.call(this);
   };
 
   _proto.deregisterCollection = function deregisterCollection$1() {
-    return deregisterCollection(this);
+    return deregisterCollection.call(this);
   }
   /**
    * Change state functionality
    */
   ;
 
-  _proto.show = function show$1(popover) {
-    return show(popover, this);
+  _proto.open = function open$1(popover) {
+    return open.call(this, popover);
   };
 
-  _proto.hide = function hide(popover) {
-    return hide$2(popover, this);
+  _proto.close = function close$1(popover) {
+    return close.call(this, popover);
   };
 
-  _proto.hideAll = function hideAll$1() {
-    return hideAll(this);
+  _proto.closeAll = function closeAll$1() {
+    return closeAll.call(this);
   };
 
   return Popover;