@appartmint/mint 0.13.3 → 0.14.0

package/dist/js/index.js

@@ -29,57 +29,55 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintHeader = void 0;
-/**
- * Imports
+/**
+ * Imports
  */
 const enum_1 = __webpack_require__(/*! ../enum */ "./src/ts/imports/enum.ts");
 const util_1 = __importDefault(__webpack_require__(/*! ../../util */ "./src/ts/util.ts"));
 const selectors_1 = __importDefault(__webpack_require__(/*! ../util/selectors */ "./src/ts/imports/util/selectors.ts"));
 const settings_1 = __importDefault(__webpack_require__(/*! ../util/settings */ "./src/ts/imports/util/settings.ts"));
-/**
- * Main header functionality
- * @public
+/**
+ * Main header functionality
+ * @public
  */
 class mintHeader {
-  /**
-   * Initializes and closes the menu
+  /**
+   * Initializes and closes the menu
    */
   constructor(settings) {
-    /**
-     * Last-logged window width
+    /**
+     * Navbar settings
      */
-    this.lastWidth = util_1.default.windowWidth();
-    /**
-     * Frequently-referenced elements
-     */
-    this.el = {};
-    let defaultSettings = {
+    this.settings = {
       from: enum_1.mintSide.Top,
       fixed: true
     };
-    settings_1.default.set(Object.assign(Object.assign({}, defaultSettings), settings));
+    /**
+     * Frequently-referenced elements
+     */
+    this.el = {};
+    this.settings = Object.assign(Object.assign({}, this.settings), settings);
     this.attachElements();
     this.attachEvents();
     this.addClasses();
-    this.setMobileMenu();
   }
-  /**
-   * Adds elements to {@link el | `this.el`}
+  /**
+   * Adds elements to {@link el | `this.el`}
    */
   attachElements() {
     var _a;
     this.el.html = document.querySelector('html');
     this.el.body = document.querySelector('body');
-    this.el.header = document.getElementById(selectors_1.default.getId('header'));
-    this.el.mobileButton = ((_a = this.el.header) === null || _a === void 0 ? void 0 : _a.querySelector(selectors_1.default.controls(selectors_1.default.getId('wrapper')))) || null;
-    this.el.wrapper = document.getElementById(selectors_1.default.getId('wrapper'));
+    this.el.header = document.getElementById('mint-header');
+    this.el.mobileButton = ((_a = this.el.header) === null || _a === void 0 ? void 0 : _a.querySelector(selectors_1.default.controls('mint-wrapper'))) || null;
+    this.el.wrapper = document.getElementById('mint-wrapper');
   }
-  /**
-   * Adds events to the dom
+  /**
+   * Adds events to the dom
    */
   attachEvents() {
     var _a, _b, _c, _d;
-    //window.addEventListener('resize', mintUtil.throttleEvent(this.eHandleResize.bind(this), mintSettings.delay.default, { trailing: false }));
+    window.addEventListener('resize', util_1.default.throttleEvent(this.eHandleResize.bind(this), settings_1.default.delay.default));
     window.addEventListener('scroll', util_1.default.throttleEvent(this.eHandleScroll.bind(this), settings_1.default.delay.default, {
       trailing: false
     }));
@@ -89,7 +87,7 @@ class mintHeader {
     focusables === null || focusables === void 0 ? void 0 : focusables.forEach(focusable => {
       focusable.addEventListener('keydown', util_1.default.throttleEvent(this.eHandleKeypress.bind(this)));
     });
-    let menuButtons = (_b = this.el.header) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selectors_1.default.controls() + selectors_1.default.neg(selectors_1.default.controls(selectors_1.default.ids.wrapper)));
+    let menuButtons = (_b = this.el.wrapper) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selectors_1.default.controls());
     menuButtons === null || menuButtons === void 0 ? void 0 : menuButtons.forEach(menuButton => {
       menuButton.addEventListener('click', util_1.default.throttleEvent(this.eToggleMenu.bind(this), settings_1.default.delay.slow, {
         trailing: false
@@ -100,18 +98,23 @@ class mintHeader {
     }));
     (_d = this.el.wrapper) === null || _d === void 0 ? void 0 : _d.addEventListener('transitionend', this.eTransitionEnd.bind(this));
   }
-  /**
-   * Adds classes that inform the styles
+  /**
+   * Adds classes that inform the styles based on settings
    */
   addClasses() {
-    var _a;
-    if (settings_1.default.fixed) {
-      (_a = this.el.body) === null || _a === void 0 ? void 0 : _a.classList.add(selectors_1.default.getClass('fixed'));
+    var _a, _b, _c, _d, _e;
+    (_a = this.el.header) === null || _a === void 0 ? void 0 : _a.classList.remove('mint-top', 'mint-right', 'mint-bottom', 'mint-left');
+    (_b = this.el.header) === null || _b === void 0 ? void 0 : _b.classList.add(`mint-${enum_1.mintSide[(_c = this.settings.from) !== null && _c !== void 0 ? _c : 0].toLowerCase()}`);
+    if (this.settings.fixed) {
+      (_d = this.el.body) === null || _d === void 0 ? void 0 : _d.classList.add('mint-fixed');
+    }
+    if (this.settings.tray) {
+      (_e = this.el.header) === null || _e === void 0 ? void 0 : _e.classList.add('mint-tray');
     }
   }
-  /**
-   * Sets the state of the mobile menu
-   * @param open - `true` to open the menu or `false` to close it
+  /**
+   * Sets the state of the mobile menu
+   * @param open - `true` to open the menu or `false` to close it
    */
   setMobileMenu() {
     let open = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -124,7 +127,7 @@ class mintHeader {
       (_a = this.el.mobileButton) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-label', ariaLabel);
     }, settings_1.default.delay.fast);
     if (open) {
-      if (settings_1.default.fixed !== true) {
+      if (this.settings.fixed !== true) {
         window.scroll({
           top: 0,
           left: 0,
@@ -133,15 +136,24 @@ class mintHeader {
       }
       setTimeout(() => {
         if (this.el.html) {
-          this.el.html.style.overflow = 'hidden';
+          let isMobile = util_1.default.windowWidth() <= settings_1.default.break.sm,
+            overflow = 'auto';
+          if (this.settings.tray) {
+            if (isMobile) {
+              overflow = 'hidden';
+            }
+          } else {
+            overflow = 'hidden';
+          }
+          this.el.html.style.overflow = overflow;
         }
-      }, settings_1.default.from === enum_1.mintSide.Left ? settings_1.default.delay.default : settings_1.default.delay.instant);
+      }, this.settings.from === enum_1.mintSide.Left ? settings_1.default.delay.default : settings_1.default.delay.instant);
       if (this.el.wrapper) {
         this.el.wrapper.style.display = 'flex';
       }
       requestAnimationFrame(() => {
         var _a;
-        (_a = this.el.wrapper) === null || _a === void 0 ? void 0 : _a.classList.add(selectors_1.default.getClass('open'));
+        (_a = this.el.wrapper) === null || _a === void 0 ? void 0 : _a.classList.add('mint-open');
       });
     } else {
       if (this.el.html) {
@@ -149,22 +161,22 @@ class mintHeader {
       }
       requestAnimationFrame(() => {
         var _a;
-        (_a = this.el.wrapper) === null || _a === void 0 ? void 0 : _a.classList.remove(selectors_1.default.getClass('open'));
+        (_a = this.el.wrapper) === null || _a === void 0 ? void 0 : _a.classList.remove('mint-open');
       });
       this.closeAllMenus();
     }
   }
-  /**
-   * Toggles the state of the mobile menu
+  /**
+   * Toggles the state of the mobile menu
    */
   toggleMobileMenu() {
     var _a, _b;
     this.setMobileMenu(((_b = (_a = this.el.mobileButton) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-expanded')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'false');
   }
-  /**
-   * Sets the state of the provided button's menu
-   * @param button - Button element to set
-   * @param open - `true` to open the menu or `false` to close it
+  /**
+   * Sets the state of the provided button's menu
+   * @param button - Button element to set
+   * @param open - `true` to open the menu or `false` to close it
    */
   setMenu(button) {
     let open = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -180,17 +192,17 @@ class mintHeader {
       }
     }
   }
-  /**
-   * Toggles the state of the provided button's menu
-   * @param button - Button element to toggle
+  /**
+   * Toggles the state of the provided button's menu
+   * @param button - Button element to toggle
    */
   toggleMenu(button) {
     var _a;
     this.setMenu(button, ((_a = button === null || button === void 0 ? void 0 : button.getAttribute('aria-expanded')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== 'true');
   }
-  /**
-   * Closes all submenus of the provided button's menu
-   * @param button - Button element of the parent menu
+  /**
+   * Closes all submenus of the provided button's menu
+   * @param button - Button element of the parent menu
    */
   closeSubMenus(button) {
     let menu = button === null || button === void 0 ? void 0 : button.nextElementSibling,
@@ -203,9 +215,9 @@ class mintHeader {
       }
     });
   }
-  /**
-   * Closes all sibling menus of the provided button's menu
-   * @param button - Button element of the sibling menus
+  /**
+   * Closes all sibling menus of the provided button's menu
+   * @param button - Button element of the sibling menus
    */
   closeSiblingMenus(button) {
     var _a;
@@ -217,8 +229,8 @@ class mintHeader {
       }
     });
   }
-  /**
-   * Closes all submenus of the n4vbar
+  /**
+   * Closes all submenus of the n4vbar
    */
   closeAllMenus() {
     var _a;
@@ -227,15 +239,15 @@ class mintHeader {
       this.setMenu(menuButton);
     });
   }
-  /**
-   * Opens the menu closest to the document's focus
+  /**
+   * Opens the menu closest to the document's focus
    */
   openClosestMenu() {
     var _a;
     let activeButton = document.activeElement,
       activeMenu = activeButton === null || activeButton === void 0 ? void 0 : activeButton.nextElementSibling,
       showing = ((_a = activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-expanded')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'true';
-    if ((activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-controls')) === selectors_1.default.ids.wrapper) {
+    if ((activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-controls')) === 'mint-wrapper') {
       activeMenu = this.el.wrapper;
     }
     if ((activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-controls')) && activeMenu && !showing) {
@@ -244,8 +256,8 @@ class mintHeader {
       firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
     }
   }
-  /**
-   * Closes the menu closest to the document's focus
+  /**
+   * Closes the menu closest to the document's focus
    */
   closeClosestMenu() {
     var _a, _b;
@@ -260,8 +272,8 @@ class mintHeader {
       activeButton === null || activeButton === void 0 ? void 0 : activeButton.focus();
     }
   }
-  /**
-   * Toggles the menu closest to the document's focus
+  /**
+   * Toggles the menu closest to the document's focus
    */
   toggleClosestMenu() {
     var _a, _b;
@@ -271,25 +283,36 @@ class mintHeader {
       this.openClosestMenu();
     }
   }
-  /**
-   * Closes the mobile menu when the window resizes
+  /**
+   * Closes the mobile menu when the window resizes
    */
-  eHandleResize(e) {
-    // Also check if resized from mobile to desktop
-    if (util_1.default.windowWidth() !== this.lastWidth) {
-      this.setMobileMenu();
+  eHandleResize() {
+    var _a, _b;
+    let isOpen = ((_b = (_a = this.el.mobileButton) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-expanded')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'true',
+      isMobile = util_1.default.windowWidth() <= settings_1.default.break.sm,
+      overflow = 'auto';
+    if (isOpen) {
+      if (this.settings.tray) {
+        if (isMobile) {
+          overflow = 'hidden';
+        }
+      } else {
+        overflow = 'hidden';
+      }
+    }
+    if (this.el.html) {
+      this.el.html.style.overflow = overflow;
     }
-    this.lastWidth = util_1.default.windowWidth();
   }
-  /**
-   * Closes all submenus when the page is scrolled
+  /**
+   * Closes all submenus when the page is scrolled
    */
   eHandleScroll() {
     this.closeAllMenus();
   }
-  /**
-   * Sends the focus to the menu button after tabbing past the last menu item
-   * @param e - Keyboard event
+  /**
+   * Sends the focus to the menu button after tabbing past the last menu item
+   * @param e - Keyboard event
    */
   eWrapTab(e) {
     var _a;
@@ -300,9 +323,9 @@ class mintHeader {
       }
     }
   }
-  /**
-   * Handles keypresses on n4vbar buttons
-   * @param e - Keyboard event
+  /**
+   * Handles keypresses on n4vbar buttons
+   * @param e - Keyboard event
    */
   eHandleButtonKeypress(e) {
     var _a;
@@ -310,7 +333,7 @@ class mintHeader {
       subMenu = target === null || target === void 0 ? void 0 : target.closest('li');
     switch (e.key.toLowerCase()) {
       case 'escape':
-        if (subMenu === null || subMenu === void 0 ? void 0 : subMenu.classList.contains(selectors_1.default.classes.open)) {
+        if (subMenu === null || subMenu === void 0 ? void 0 : subMenu.classList.contains('mint-open')) {
           this.setMenu(subMenu);
         } else {
           this.setMobileMenu();
@@ -329,9 +352,9 @@ class mintHeader {
         break;
     }
   }
-  /**
-   * Handles keypresses on n4vbar links
-   * @param e - Keyboard event
+  /**
+   * Handles keypresses on n4vbar links
+   * @param e - Keyboard event
    */
   eHandleLinkKeypress(e) {
     let target = e.target;
@@ -349,9 +372,9 @@ class mintHeader {
         break;
     }
   }
-  /**
-   * Handles keypresses on the n4vbar
-   * @param e - Keyboard event
+  /**
+   * Handles keypresses on the n4vbar
+   * @param e - Keyboard event
    */
   eHandleKeypress(e) {
     if (e.key.toLowerCase() !== 'tab') {
@@ -367,27 +390,27 @@ class mintHeader {
         break;
     }
   }
-  /**
-   * Toggles the mobile menu
+  /**
+   * Toggles the mobile menu
    */
   eToggleMobileMenu() {
     this.toggleMobileMenu();
   }
-  /**
-   * Toggles the clicked submenu
-   * @param e - Mouse event
+  /**
+   * Toggles the clicked submenu
+   * @param e - Mouse event
    */
   eToggleMenu(e) {
     let target = e.target;
     this.closeSiblingMenus(target);
     this.toggleMenu(target);
   }
-  /**
-   * Runs after the mobile menu transitions
+  /**
+   * Runs after the mobile menu transitions
    */
   eTransitionEnd() {
     var _a;
-    if (((_a = this.el.wrapper) === null || _a === void 0 ? void 0 : _a.classList.contains(selectors_1.default.getClass('open'))) === false) {
+    if (((_a = this.el.wrapper) === null || _a === void 0 ? void 0 : _a.classList.contains('mint-open')) === false) {
       this.el.wrapper.style.display = 'none';
     }
   }
@@ -409,8 +432,8 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintSide = void 0;
-/**
- * Side Enum
+/**
+ * Side Enum
  */
 var mintSide;
 (function (mintSide) {
@@ -435,8 +458,8 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintColor = void 0;
-/**
- * Color
+/**
+ * Color
  */
 class mintColor {
   constructor(args) {
@@ -448,8 +471,8 @@ class mintColor {
       this.stringConstructor(args.color);
     }
   }
-  /**
-   * Constructor from a string argument
+  /**
+   * Constructor from a string argument
    */
   stringConstructor(str) {
     if (str.startsWith('#')) {
@@ -461,8 +484,8 @@ class mintColor {
       this.rgbConstructor(str);
     }
   }
-  /**
-   * Constructor from a hex argument
+  /**
+   * Constructor from a hex argument
    */
   hexConstructor(hex) {
     switch (hex.length) {
@@ -493,8 +516,8 @@ class mintColor {
     this.b = parseInt(hex.substring(5, 7), mintColor.hexBase);
     this.a = parseInt(hex.substring(7, 9), mintColor.hexBase) / mintColor.hexBase ** 2;
   }
-  /**
-   * Constructor from an rgba argument
+  /**
+   * Constructor from an rgba argument
    */
   rgbConstructor(rgb) {
     let match = rgb.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d*)?)\))?/);
@@ -505,8 +528,8 @@ class mintColor {
       this.a = parseFloat(match[4]);
     }
   }
-  /**
-   * Returns the perceived brightness of the color
+  /**
+   * Returns the perceived brightness of the color
    */
   getBrightness() {
     if (this.a === 0) {
@@ -537,15 +560,15 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintItem = void 0;
-/**
- * A generic item
- * @note - this class must be convertable with JSON
- *       - only add strings, numbers, booleans, arrays, and objects
+/**
+ * A generic item
+ * @note - this class must be convertable with JSON
+ *       - only add strings, numbers, booleans, arrays, and objects
  */
 class mintItem {
   constructor() {
-    /**
-     * Item settings
+    /**
+     * Item settings
      */
     this.version = 0;
     this.priority = 0;
@@ -558,15 +581,15 @@ class mintItem {
     this.centered = false;
     this.disabled = false;
     this.private = false;
-    /**
-     * Item data
+    /**
+     * Item data
      */
     this.attr = {};
     this.params = {};
     this.options = {};
     this.lists = {};
-    /**
-     * Item lists
+    /**
+     * Item lists
      */
     this.paragraphs = [];
     this.classes = [];
@@ -593,8 +616,8 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintDisplay = void 0;
-/**
- * Handles the display of elements
+/**
+ * Handles the display of elements
  */
 class mintDisplay {}
 exports.mintDisplay = mintDisplay;
@@ -615,8 +638,8 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintEvent = void 0;
-/**
- * Event helper functions
+/**
+ * Event helper functions
  */
 class mintEvent {}
 exports.mintEvent = mintEvent;
@@ -642,16 +665,16 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintIcon = void 0;
-/**
- * Imports
+/**
+ * Imports
  */
 const object_1 = __importDefault(__webpack_require__(/*! ./object */ "./src/ts/imports/util/object.ts"));
-/**
- * Icon helper functions
+/**
+ * Icon helper functions
  */
 class mintIcon {
-  /**
-   * Appends the given icon to the given selector if there is not already an icon appended
+  /**
+   * Appends the given icon to the given selector if there is not already an icon appended
    */
   static append(icon, selector) {
     let items = document.querySelectorAll(selector);
@@ -666,9 +689,9 @@ class mintIcon {
       }
     });
   }
-  /**
-   * Updates the icons
-   * @param icons - the icons to update
+  /**
+   * Updates the icons
+   * @param icons - the icons to update
    */
   static update(icons) {
     let activeIcons = object_1.default.removeValues(Object.assign(Object.assign({}, this.icons), icons), [false]);
@@ -676,9 +699,9 @@ class mintIcon {
       this.append(activeIcons[selector], selector);
     });
   }
-  /**
-   * Removes the given icon from the given selector
-   * @param icon - the icon to remove
+  /**
+   * Removes the given icon from the given selector
+   * @param icon - the icon to remove
    */
   static remove(icon, selector) {
     let items = document.querySelectorAll(selector);
@@ -691,8 +714,8 @@ class mintIcon {
   }
 }
 exports.mintIcon = mintIcon;
-/**
- * Default icons
+/**
+ * Default icons
  */
 mintIcon.icons = {
   'a[href^="mailto:"]': 'far fa-envelope',
@@ -718,14 +741,14 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintList = void 0;
-/**
- * List functions for the util library
+/**
+ * List functions for the util library
  */
 class mintList {
-  /**
-   * Returns a copy of the provided list with the items in random order
-   * @param list - the list to shuffle
-   * @returns - the shuffled list
+  /**
+   * Returns a copy of the provided list with the items in random order
+   * @param list - the list to shuffle
+   * @returns - the shuffled list
    */
   static shuffle(list) {
     let copy = [...list];
@@ -754,15 +777,15 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintMath = void 0;
-/**
- * Math functions for the util library
+/**
+ * Math functions for the util library
  */
 class mintMath {
-  /**
-   * Get a random integer between min and max
-   * @param max Maximum value to return
-   * @param min Minimum value to return (default is 0)
-   * @returns a random integer between min and max
+  /**
+   * Get a random integer between min and max
+   * @param max Maximum value to return
+   * @param min Minimum value to return (default is 0)
+   * @returns a random integer between min and max
    */
   static randomInt(max) {
     let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -789,12 +812,12 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintObject = void 0;
-/**
- * Object functions for the util library
+/**
+ * Object functions for the util library
  */
 class mintObject {
-  /**
-   * Returns true if the provided objects have the same entries
+  /**
+   * Returns true if the provided objects have the same entries
    */
   static isSimilar(obj1, obj2) {
     let keys = Object.keys(obj1);
@@ -809,13 +832,13 @@ class mintObject {
     });
     return isSimilar;
   }
-  /**
-   * Returns true if the first object has at least the same
-   * entries as the second object
-   * @param superset - the object to check
-   * @param subset - the object whose entries are required
-   * @returns - true if the first object is a superset of the second
-   * @recursive
+  /**
+   * Returns true if the first object has at least the same
+   * entries as the second object
+   * @param superset - the object to check
+   * @param subset - the object whose entries are required
+   * @returns - true if the first object is a superset of the second
+   * @recursive
    */
   static isSuperset(superset, subset) {
     let isSuperset = true;
@@ -843,19 +866,19 @@ class mintObject {
     });
     return isSuperset;
   }
-  /**
-   * Removes object entries by key
-   * @alias mintObject.removeKeys
-   * @param object - the object to remove entries from
-   * @param keys - the keys to remove
+  /**
+   * Removes object entries by key
+   * @alias mintObject.removeKeys
+   * @param object - the object to remove entries from
+   * @param keys - the keys to remove
    */
   static remove(object, keys) {
     return this.removeKeys(object, keys);
   }
-  /**
-   * Removes object entries by key
-   * @param object - the object to remove entries from
-   * @param keys - the keys to remove
+  /**
+   * Removes object entries by key
+   * @param object - the object to remove entries from
+   * @param keys - the keys to remove
    */
   static removeKeys(object, keys) {
     return Object.keys(object).reduce((obj, key) => {
@@ -865,8 +888,8 @@ class mintObject {
       return obj;
     }, {});
   }
-  /**
-   * Removes object entries by value
+  /**
+   * Removes object entries by value
    */
   static removeValues(object, values) {
     return Object.keys(object).reduce((obj, key) => {
@@ -876,8 +899,8 @@ class mintObject {
       return obj;
     }, {});
   }
-  /**
-   * Sorts an object's entries alphabetically by key
+  /**
+   * Sorts an object's entries alphabetically by key
    */
   static sort(object) {
     return Object.keys(object).sort().reduce((obj, key) => {
@@ -885,17 +908,17 @@ class mintObject {
       return obj;
     }, {});
   }
-  /**
-   * @alias mintObject.filterKeys
+  /**
+   * @alias mintObject.filterKeys
    */
   static filter(object, keys) {
     return this.filterKeys(object, keys);
   }
-  /**
-   * Filters an object by its keys
-   * @param object - the object to filter
-   * @param keys - the keys to keep
-   * @returns - the filtered object
+  /**
+   * Filters an object by its keys
+   * @param object - the object to filter
+   * @param keys - the keys to keep
+   * @returns - the filtered object
    */
   static filterKeys(object, keys) {
     return keys.reduce((obj, key) => {
@@ -903,11 +926,11 @@ class mintObject {
       return obj;
     }, {});
   }
-  /**
-   * Filters an object by its values
-   * @param object - the object to filter
-   * @param values - the values to keep
-   * @returns - the filtered object
+  /**
+   * Filters an object by its values
+   * @param object - the object to filter
+   * @param values - the values to keep
+   * @returns - the filtered object
    */
   static filterValues(object, values) {
     return Object.keys(object).reduce((obj, key) => {
@@ -937,98 +960,80 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintSelectors = void 0;
-/**
- * CSS-selector helpers
- * @public
+/**
+ * CSS-selector helpers
+ * @public
  */
 class mintSelectors {
-  /**
-   * Adds the library prefix to the beginning of the provided string
-   * @param base - the string to be prefixed
-   * @returns - the provided string prefixed with the library name
+  /**
+   * Adds the library prefix to the beginning of the provided string
+   * @param base - the string to be prefixed
+   * @returns - the provided string prefixed with the library name
    */
   static prefix(base) {
     base = base.toLowerCase();
     return base.startsWith(this.pre) ? base : `${this.pre}${base}`;
   }
-  /**
-   * Adds two dashes to the beginning of the provided string
-   * @param base - the string to be prefixed
-   * @returns - the provided string prefixed with two dashes
+  /**
+   * Adds two dashes to the beginning of the provided string
+   * @param base - the string to be prefixed
+   * @returns - the provided string prefixed with two dashes
    */
   static cssPrefix(base) {
     return `--${this.prefix(base.replace(/^-+/, ''))}`;
   }
-  /**
-   * Turns the provided string into a CSS variable call
-   * @param base - the name of the CSS variable to call
-   * @returns - the CSS variable call for the provided string
+  /**
+   * Turns the provided string into a CSS variable call
+   * @param base - the name of the CSS variable to call
+   * @returns - the CSS variable call for the provided string
    */
   static cssVar(base) {
     return `var(${this.cssPrefix(base)})`;
   }
-  /**
-   * Negates the provided CSS selector
-   * @param base - the CSS selector to negate
-   * @returns - the negated CSS selector
+  /**
+   * Negates the provided CSS selector
+   * @param base - the CSS selector to negate
+   * @returns - the negated CSS selector
    */
   static neg(base) {
     return `:not(${base})`;
   }
-  /**
-   * Generates a class CSS selector
-   * @param base - the name of the class to generate
-   * @returns - the generated CSS selector
+  /**
+   * Generates a class CSS selector
+   * @param base - the name of the class to generate
+   * @returns - the generated CSS selector
    */
   static class(base) {
     return `.${this.prefix(base)}`;
   }
-  /**
-   * Generates an id CSS selector
-   * @param base - the name of the id to generate
-   * @returns - the generated CSS selector
+  /**
+   * Generates an id CSS selector
+   * @param base - the name of the id to generate
+   * @returns - the generated CSS selector
    */
   static id(base) {
     return `#${this.prefix(base)}`;
   }
-  /**
-   * Generates an aria-controls CSS selector
-   * @param id - the id of the controlled element
-   * @returns - the generated CSS selector
+  /**
+   * Generates an aria-controls CSS selector
+   * @param id - the id of the controlled element
+   * @returns - the generated CSS selector
    */
   static controls(id) {
     return id ? `[aria-controls="${this.prefix(id)}"]` : this.hasControls;
   }
-  /**
-   * Generates an aria-expanded CSS selector
-   * @param bool - whether the element is expanded or not
-   * @returns - the generated CSS selector
+  /**
+   * Generates an aria-expanded CSS selector
+   * @param bool - whether the element is expanded or not
+   * @returns - the generated CSS selector
    */
   static expanded(bool) {
     return typeof bool === 'boolean' ? `[aria-expanded="${bool}"]` : this.hasExpanded;
   }
-  /**
-   * Returns the id of the requested element
-   */
-  static getId(id) {
-    var _b;
-    return (_b = this.ids[id !== null && id !== void 0 ? id : -1]) !== null && _b !== void 0 ? _b : '';
-  }
-  /**
-   * Returns the class of the requested element
-   */
-  static getClass(className, classGroup) {
-    var _b, _c;
-    if (classGroup) {
-      let group = this.classes[classGroup];
-      return (_b = group[className !== null && className !== void 0 ? className : -1]) !== null && _b !== void 0 ? _b : '';
-    }
-    return (_c = this.classes[className !== null && className !== void 0 ? className : -1]) !== null && _c !== void 0 ? _c : '';
-  }
-  /**
-   * Returns a NodeList of HTMLElements within the given element that are focusable
-   * @param el - the element whose focusable children will be returned
-   * @returns - the elements within the given element that are focusable
+  /**
+   * Returns a NodeList of HTMLElements within the given element that are focusable
+   * @param el - the element whose focusable children will be returned
+   * @returns - the elements within the given element that are focusable
    */
   static getFocusables(el) {
     let focusables;
@@ -1039,12 +1044,12 @@ class mintSelectors {
     }
     return focusables.filter(el => this.isFocusable(el));
   }
-  /**
-   * Returns true if an element is focusable and false if not,
-   * based on styles (i.e. a parent has display: none;)
-   * NOTE: Still need to determine what other styles may make an element un-focusable
-   * @param el - the element
-   * @returns - true if the element is focusable; false if not
+  /**
+   * Returns true if an element is focusable and false if not,
+   * based on styles (i.e. a parent has display: none;)
+   * NOTE: Still need to determine what other styles may make an element un-focusable
+   * @param el - the element
+   * @returns - true if the element is focusable; false if not
    */
   static isFocusable(el) {
     let current = el;
@@ -1059,48 +1064,48 @@ class mintSelectors {
 }
 exports.mintSelectors = mintSelectors;
 _a = mintSelectors;
-/**
- * The library name that will be added as a prefix
+/**
+ * The library name that will be added as a prefix
  */
 mintSelectors.lib = 'mint';
-/**
- * The prefix built from the library name
+/**
+ * The prefix built from the library name
  */
 mintSelectors.pre = `${_a.lib}-`;
-/**
- * CSS-selector for disabled elements
+/**
+ * CSS-selector for disabled elements
  */
 mintSelectors.disabled = '[disabled]';
-/**
- * CSS-selector for elements with an aria-controls attribute
+/**
+ * CSS-selector for elements with an aria-controls attribute
  */
 mintSelectors.hasControls = '[aria-controls]';
-/**
- * CSS-selector for elements with an aria-expanded attribute
+/**
+ * CSS-selector for elements with an aria-expanded attribute
  */
 mintSelectors.hasExpanded = '[aria-expanded]';
-/**
- * CSS-selector for elements with an href attribute
+/**
+ * CSS-selector for elements with an href attribute
  */
 mintSelectors.hasLink = '[href]';
-/**
- * CSS-selector for elements with a routerLink attribute
+/**
+ * CSS-selector for elements with a routerLink attribute
  */
 mintSelectors.hasRouterLink = '[routerLink]';
-/**
- * CSS-selector for elements with an id attribute
+/**
+ * CSS-selector for elements with an id attribute
  */
 mintSelectors.hasId = '[id]';
-/**
- * CSS-selector for elements that aren't tabbable (i.e. tabindex is negative)
+/**
+ * CSS-selector for elements that aren't tabbable (i.e. tabindex is negative)
  */
 mintSelectors.notTabbable = '[tabindex^="-"]';
-/**
- * CSS-selector for elements that are tabbable (i.e. tabindex isn't negative)
+/**
+ * CSS-selector for elements that are tabbable (i.e. tabindex isn't negative)
  */
 mintSelectors.tabbable = `[tabindex]${_a.neg(_a.notTabbable)}`;
-/**
- * CSS-selector for elements that can receive focus
+/**
+ * CSS-selector for elements that can receive focus
  */
 mintSelectors.focusable = `input${_a.neg(_a.disabled)}${_a.neg(_a.notTabbable)},
                                 select${_a.neg(_a.disabled)}${_a.neg(_a.notTabbable)},
@@ -1110,39 +1115,14 @@ mintSelectors.focusable = `input${_a.neg(_a.disabled)}${_a.neg(_a.notTabbable)},
                                 a${_a.hasLink}, a${_a.hasRouterLink},
                                 area${_a.hasLink},
                                 ${_a.tabbable}`.replace(/\s/g, '');
-/**
- * CSS-selector for submenu buttons
+/**
+ * CSS-selector for submenu buttons
  */
 mintSelectors.subMenuButtons = `button${_a.hasControls}`;
-/**
- * CSS-selector for submenus
+/**
+ * CSS-selector for submenus
  */
 mintSelectors.subMenu = `${_a.subMenuButtons} + ul${_a.hasId}`;
-/**
- * Frequently-used ids
- */
-mintSelectors.ids = {
-  header: _a.prefix('header'),
-  logo: _a.prefix('logo'),
-  wrapper: _a.prefix('wrapper'),
-  mainContent: _a.prefix('main-content')
-};
-/**
- * Classes
- */
-mintSelectors.classes = {
-  sides: {
-    top: _a.prefix('top'),
-    right: _a.prefix('right'),
-    bottom: _a.prefix('bottom'),
-    left: _a.prefix('left')
-  },
-  srOnly: _a.prefix('sr-only'),
-  js: _a.prefix('js'),
-  ready: _a.prefix('ready'),
-  fixed: _a.prefix('fixed'),
-  open: _a.prefix('open')
-};
 exports["default"] = mintSelectors;
 
 /***/ }),
@@ -1151,7 +1131,7 @@ exports["default"] = mintSelectors;
 /*!*****************************************!*\
   !*** ./src/ts/imports/util/settings.ts ***!
   \*****************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+/***/ ((__unused_webpack_module, exports) => {
 
 
 
@@ -1160,19 +1140,14 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintSettings = void 0;
-/**
- * Imports
- */
-const enum_1 = __webpack_require__(/*! ../enum */ "./src/ts/imports/enum.ts");
-const selectors_1 = __webpack_require__(/*! ./selectors */ "./src/ts/imports/util/selectors.ts");
-/**
- * Settings management
- * @public
+/**
+ * Settings management
+ * @public
  */
 class mintSettings {
-  /**
-   * Update the provided settings variables
-   * @param settings - Object of settings variables to update
+  /**
+   * Update the provided settings variables
+   * @param settings - Object of settings variables to update
    */
   static set(settings) {
     let newDelay = false;
@@ -1192,15 +1167,14 @@ class mintSettings {
         this.delay = Object.assign(Object.assign({}, this.delay), settings.delay);
       }
     }
-    if (typeof settings.from === 'number') {
-      this.setFrom(settings.from);
-    }
-    if (typeof settings.fixed === 'boolean') {
-      this.setFixed(settings.fixed);
+    if (settings.break && Object.keys(settings.break).length) {
+      if (Object.values(settings.break).reduce((prev, next) => prev && typeof next === 'number', true)) {
+        this.break = Object.assign(Object.assign({}, this.break), settings.break);
+      }
     }
   }
-  /**
-   * Updates the delay variables based on `this.delayBase` and `this.delayStep`
+  /**
+   * Updates the delay variables based on `this.delayBase` and `this.delayStep`
    */
   static setDelay() {
     this.delay = {
@@ -1212,45 +1186,19 @@ class mintSettings {
       slow: this.delayBase + this.delayStep * 5
     };
   }
-  /**
-   * Updates the direction the navbar enters from
-   */
-  static setFrom(from) {
-    if (this.from !== from) {
-      this.from = from;
-      let header = document.getElementById(selectors_1.mintSelectors.getId('header'));
-      header === null || header === void 0 ? void 0 : header.classList.remove(...Object.values(selectors_1.mintSelectors.classes.sides));
-      header === null || header === void 0 ? void 0 : header.classList.add(selectors_1.mintSelectors.getClass(enum_1.mintSide[this.from].toLowerCase(), 'sides'));
-    }
-  }
-  /**
-   * Updates whether or not the navbar is fixed
-   */
-  static setFixed(fixed) {
-    if (this.fixed !== fixed) {
-      this.fixed = fixed;
-      let header = document.getElementById(selectors_1.mintSelectors.getId('header')),
-        fixedClass = selectors_1.mintSelectors.getClass('fixed');
-      if (this.fixed) {
-        header === null || header === void 0 ? void 0 : header.classList.add(fixedClass);
-      } else {
-        header === null || header === void 0 ? void 0 : header.classList.remove(fixedClass);
-      }
-    }
-  }
 }
 exports.mintSettings = mintSettings;
 _a = mintSettings;
-/**
- * Value added to all delay variables
+/**
+ * Value added to all delay variables
  */
 mintSettings.delayBase = 0;
-/**
- * Value multiplied by delay variable index
+/**
+ * Value multiplied by delay variable index
  */
 mintSettings.delayStep = 100;
-/**
- * Delay variables
+/**
+ * Delay variables
  */
 mintSettings.delay = {
   instant: _a.delayBase + _a.delayStep * 0,
@@ -1260,6 +1208,17 @@ mintSettings.delay = {
   medSlow: _a.delayBase + _a.delayStep * 4,
   slow: _a.delayBase + _a.delayStep * 5
 };
+/**
+ * Breakpoint variables
+ */
+mintSettings.break = {
+  z: 0,
+  xs: 480,
+  sm: 768,
+  md: 1024,
+  lg: 1200,
+  xl: 1440
+};
 ;
 exports["default"] = mintSettings;
 
@@ -1277,31 +1236,31 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintText = void 0;
-/**
- * Functions for analyzing and manipulating text.
+/**
+ * Functions for analyzing and manipulating text.
  */
 class mintText {
-  /*static fitContainer () {
-      let $warning: JQuery<HTMLElement> = $(warningSelector);
-      $warning.css({
-          overflow: 'scroll',
-          fontSize: ''
-      });
-      while (($warning?.[0].scrollHeight ?? Number.MIN_SAFE_INTEGER) > ($warning?.innerHeight() ?? Number.MAX_SAFE_INTEGER)) {
-          let fontSize: number = parseInt($warning.css('font-size')) - 1;
-          $warning.css('font-size', fontSize + 'px');
-      }
+  /*static fitContainer () {
+      let $warning: JQuery<HTMLElement> = $(warningSelector);
+      $warning.css({
+          overflow: 'scroll',
+          fontSize: ''
+      });
+      while (($warning?.[0].scrollHeight ?? Number.MIN_SAFE_INTEGER) > ($warning?.innerHeight() ?? Number.MAX_SAFE_INTEGER)) {
+          let fontSize: number = parseInt($warning.css('font-size')) - 1;
+          $warning.css('font-size', fontSize + 'px');
+      }
   }*/
-  /**
-   * Generate a slug from a string
-   * @param str - The string to slugify
-   * @returns The slugified string
+  /**
+   * Generate a slug from a string
+   * @param str - The string to slugify
+   * @returns The slugified string
    */
   static slug(str) {
     return str.toLowerCase().replace(/\W+/g, '-').replace(/^-+|-+$/g, '');
   }
-  /**
-   * Pluralize the given word
+  /**
+   * Pluralize the given word
    */
   static pluralize(word) {
     if (word.endsWith('ies') || word.endsWith('es') || word.endsWith('s') && !word.endsWith('us') && !word.endsWith('is') && !word.endsWith('ss')) {
@@ -1334,8 +1293,8 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintWindow = void 0;
-/**
- * Functions related to the browser window.
+/**
+ * Functions related to the browser window.
  */
 class mintWindow {}
 exports.mintWindow = mintWindow;
@@ -1352,10 +1311,10 @@ exports["default"] = mintWindow;
 
 
 
-/**
- * A library for building responsive web applications.
- *
- * @packageDocumentation
+/**
+ * A library for building responsive web applications.
+ *
+ * @packageDocumentation
  */
 var __importDefault = this && this.__importDefault || function (mod) {
   return mod && mod.__esModule ? mod : {
@@ -1366,8 +1325,8 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports["default"] = exports.mintUtil = exports.mintSettings = exports.mintSelectors = exports.mintWindow = exports.mintText = exports.mintObject = exports.mintMath = exports.mintList = exports.mintIcon = exports.mintEvent = exports.mintDisplay = exports.mintItem = exports.mintColor = exports.mintHeader = exports.mintSide = void 0;
-/**
- * Exports
+/**
+ * Exports
  */
 // Enums
 var enum_1 = __webpack_require__(/*! ./imports/enum */ "./src/ts/imports/enum.ts");
@@ -1505,29 +1464,29 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintUtil = void 0;
-/**
- * Imports
+/**
+ * Imports
  */
 const enum_1 = __webpack_require__(/*! ./imports/enum */ "./src/ts/imports/enum.ts");
 const settings_1 = __importDefault(__webpack_require__(/*! ./imports/util/settings */ "./src/ts/imports/util/settings.ts"));
-/**
- * Utility functions
- * @public
+/**
+ * Utility functions
+ * @public
  */
 class mintUtil {
-  /**
-   * Returns the width of the window, including fractional pixels
-   * @returns the width of the window
+  /**
+   * Returns the width of the window, including fractional pixels
+   * @returns the width of the window
    */
   static windowWidth() {
     const decimal = document.body.getBoundingClientRect().width % 1;
     return window.innerWidth + decimal;
   }
-  /**
-   * Ensures that a function `func` is run only after not being called for `wait` milliseconds
-   * @param func - the function to debounce
-   * @param wait - the amount of time to wait before running the function
-   * @returns - the debounced function
+  /**
+   * Ensures that a function `func` is run only after not being called for `wait` milliseconds
+   * @param func - the function to debounce
+   * @param wait - the amount of time to wait before running the function
+   * @returns - the debounced function
    */
   static debounce(func) {
     let wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;
@@ -1539,22 +1498,22 @@ class mintUtil {
       timer = setTimeout(func, wait, e);
     };
   }
-  /**
-   * Ensures that a function `func` is run only after not being called for `wait` milliseconds
-   * @param func - the function to debounce
-   * @param wait - the amount of time to wait before running the function
-   * @returns - the debounced function as an EventListener
+  /**
+   * Ensures that a function `func` is run only after not being called for `wait` milliseconds
+   * @param func - the function to debounce
+   * @param wait - the amount of time to wait before running the function
+   * @returns - the debounced function as an EventListener
    */
   static debounceEvent(func) {
     let wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;
     return mintUtil.debounce(func, wait);
   }
-  /**
-   * Ensures that a function `func` is called at most every `wait` milliseconds with optional leading and trailing calls
-   * @param func - the function to throttle
-   * @param wait - the amount of time between function calls
-   * @param options - leading and trailing options: default = \{ leading: true, trailing, true \}
-   * @returns - the throttled function
+  /**
+   * Ensures that a function `func` is called at most every `wait` milliseconds with optional leading and trailing calls
+   * @param func - the function to throttle
+   * @param wait - the amount of time between function calls
+   * @param options - leading and trailing options: default = \{ leading: true, trailing, true \}
+   * @returns - the throttled function
    */
   static throttle(func) {
     let wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;
@@ -1597,23 +1556,23 @@ class mintUtil {
       };
     return throttled;
   }
-  /**
-   * Ensures that a function `func` is called at most every `wait` milliseconds with optional leading and trailing calls
-   * @param func - the function to throttle
-   * @param wait - the amount of time between function calls
-   * @param options - leading and trailing options: default = \{ leading: true, trailing, true \}
-   * @returns - the throttled function as an EventListener
+  /**
+   * Ensures that a function `func` is called at most every `wait` milliseconds with optional leading and trailing calls
+   * @param func - the function to throttle
+   * @param wait - the amount of time between function calls
+   * @param options - leading and trailing options: default = \{ leading: true, trailing, true \}
+   * @returns - the throttled function as an EventListener
    */
   static throttleEvent(func) {
     let wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;
     let options = arguments.length > 2 ? arguments[2] : undefined;
     return mintUtil.throttle(func, wait, options);
   }
-  /**
-   * Sets the element's height to its `innerHeight`, then to `auto` after a delay
-   * @param el - the element whose height will be set
-   * @param delay - the amount of time in milliseconds that the show animation will be active
-   * @param from - the side that the element is animating from
+  /**
+   * Sets the element's height to its `innerHeight`, then to `auto` after a delay
+   * @param el - the element whose height will be set
+   * @param delay - the amount of time in milliseconds that the show animation will be active
+   * @param from - the side that the element is animating from
    */
   static show(el) {
     let delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;
@@ -1636,11 +1595,11 @@ class mintUtil {
       });
     }
   }
-  /**
-   * Sets the element's height to 0
-   * @param el - the element whose height will be set
-   * @param delay - the amount of time in milliseconds that the show animation will be active
-   * @param from - the side that the element is animating from
+  /**
+   * Sets the element's height to 0
+   * @param el - the element whose height will be set
+   * @param delay - the amount of time in milliseconds that the show animation will be active
+   * @param from - the side that the element is animating from
    */
   static hide(el) {
     let delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;
@@ -1670,10 +1629,10 @@ class mintUtil {
       }, delay);
     }
   }
-  /**
-   * Copies the provided text to the clipboard
-   * @param text - the text to copy
-   * @returns - true if the text was successfully copied to the clipboard; else false
+  /**
+   * Copies the provided text to the clipboard
+   * @param text - the text to copy
+   * @returns - true if the text was successfully copied to the clipboard; else false
    */
   static copyText(text) {
     let textArea = document.createElement('textarea');
@@ -1696,11 +1655,11 @@ class mintUtil {
     document.body.removeChild(textArea);
     return true;
   }
-  /**
-   * Tests the validity of an email address
-   * @see {@link https://stackoverflow.com/questions/201323/how-can-i-validate-an-email-address-using-a-regular-expression}
-   * @param text - the string to test
-   * @returns - true if the given string is an email address; false if not
+  /**
+   * Tests the validity of an email address
+   * @see {@link https://stackoverflow.com/questions/201323/how-can-i-validate-an-email-address-using-a-regular-expression}
+   * @param text - the string to test
+   * @returns - true if the given string is an email address; false if not
    */
   static isEmail(text) {
     return null !== text.match(/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/);