@appartmint/mint 0.14.2 → 0.14.5

package/dist/js/index.js

@@ -29,31 +29,31 @@ 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) {
-    /**
-     * Navbar settings
+    /**
+     * Navbar settings
      */
     this.settings = {
       from: enum_1.mintSide.Top,
       fixed: true
     };
-    /**
-     * Frequently-referenced elements
+    /**
+     * Frequently-referenced elements
      */
     this.el = {};
     this.settings = Object.assign(Object.assign({}, this.settings), settings);
@@ -61,8 +61,8 @@ class mintHeader {
     this.attachEvents();
     this.addClasses();
   }
-  /**
-   * Adds elements to {@link el | `this.el`}
+  /**
+   * Adds elements to {@link el | `this.el`}
    */
   attachElements() {
     var _a;
@@ -72,8 +72,8 @@ class mintHeader {
     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;
@@ -98,8 +98,8 @@ 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 based on settings
+  /**
+   * Adds classes that inform the styles based on settings
    */
   addClasses() {
     var _a, _b, _c, _d, _e;
@@ -112,9 +112,9 @@ class mintHeader {
       (_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;
@@ -166,17 +166,17 @@ class mintHeader {
       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;
@@ -192,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,
@@ -215,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;
@@ -229,8 +229,8 @@ class mintHeader {
       }
     });
   }
-  /**
-   * Closes all submenus of the n4vbar
+  /**
+   * Closes all submenus of the n4vbar
    */
   closeAllMenus() {
     var _a;
@@ -239,8 +239,8 @@ 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;
@@ -256,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;
@@ -272,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;
@@ -283,8 +283,8 @@ class mintHeader {
       this.openClosestMenu();
     }
   }
-  /**
-   * Closes the mobile menu when the window resizes
+  /**
+   * Closes the mobile menu when the window resizes
    */
   eHandleResize() {
     var _a, _b;
@@ -304,15 +304,15 @@ class mintHeader {
       this.el.html.style.overflow = overflow;
     }
   }
-  /**
-   * 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;
@@ -323,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;
@@ -352,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;
@@ -372,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') {
@@ -390,23 +390,23 @@ 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;
@@ -432,8 +432,8 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintSide = void 0;
-/**
- * Side Enum
+/**
+ * Side Enum
  */
 var mintSide;
 (function (mintSide) {
@@ -458,8 +458,8 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintColor = void 0;
-/**
- * Color
+/**
+ * Color
  */
 class mintColor {
   constructor(args) {
@@ -471,8 +471,8 @@ class mintColor {
       this.stringConstructor(args.color);
     }
   }
-  /**
-   * Constructor from a string argument
+  /**
+   * Constructor from a string argument
    */
   stringConstructor(str) {
     if (str.startsWith('#')) {
@@ -484,8 +484,8 @@ class mintColor {
       this.rgbConstructor(str);
     }
   }
-  /**
-   * Constructor from a hex argument
+  /**
+   * Constructor from a hex argument
    */
   hexConstructor(hex) {
     switch (hex.length) {
@@ -516,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*)?)\))?/);
@@ -528,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) {
@@ -560,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;
@@ -581,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 = [];
@@ -616,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;
@@ -638,8 +638,8 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintEvent = void 0;
-/**
- * Event helper functions
+/**
+ * Event helper functions
  */
 class mintEvent {}
 exports.mintEvent = mintEvent;
@@ -665,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);
@@ -689,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]);
@@ -699,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);
@@ -714,8 +714,8 @@ class mintIcon {
   }
 }
 exports.mintIcon = mintIcon;
-/**
- * Default icons
+/**
+ * Default icons
  */
 mintIcon.icons = {
   'a[href^="mailto:"]': 'far fa-envelope',
@@ -741,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];
@@ -777,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;
@@ -812,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);
@@ -832,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;
@@ -866,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) => {
@@ -888,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) => {
@@ -899,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) => {
@@ -908,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) => {
@@ -926,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) => {
@@ -940,11 +940,11 @@ class mintObject {
       return obj;
     }, {});
   }
-  /**
-   * Update two sets of objects
-   * @param original - the original object
-   * @param update - the object to update the original with
-   * @returns - the original objects with updated data from the update
+  /**
+   * Update two sets of objects
+   * @param original - the original object
+   * @param update - the object to update the original with
+   * @returns - the original objects with updated data from the update
    */
   static updateArray(original, update) {
     let key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'id';
@@ -990,6 +990,60 @@ exports["default"] = mintObject;
 
 /***/ }),
 
+/***/ "./src/ts/imports/util/scroll.ts":
+/*!***************************************!*\
+  !*** ./src/ts/imports/util/scroll.ts ***!
+  \***************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.mintScroll = void 0;
+/**
+ * Scroll functions
+ */
+class mintScroll {
+  /**
+   * Scroll to the top of the page
+   */
+  static toTop() {
+    window.scrollTo(0, 0);
+  }
+  /**
+   * Scroll to the bottom of the page
+   */
+  static toBottom() {
+    window.scrollTo(0, document.body.scrollHeight);
+  }
+  /**
+   * Show visible elements
+   */
+  static showElements() {
+    let elements = document.querySelectorAll('.mint-fall-in:not(.mint-show)'),
+      elementsToShow = [];
+    for (let i = 0; i < elements.length; i++) {
+      if (elements[i].getBoundingClientRect().top < 0) {
+        elements[i].classList.add('mint-show');
+      } else if (elements[i].getBoundingClientRect().top < window.innerHeight * 3 / 4) {
+        elementsToShow.push(elements[i]);
+      }
+    }
+    for (let i = 0; i < elementsToShow.length; i++) {
+      setTimeout(() => {
+        elementsToShow[i].classList.add('mint-show');
+      }, i * 200 + i * i * 20);
+    }
+  }
+}
+exports.mintScroll = mintScroll;
+;
+exports["default"] = mintScroll;
+
+/***/ }),
+
 /***/ "./src/ts/imports/util/selectors.ts":
 /*!******************************************!*\
   !*** ./src/ts/imports/util/selectors.ts ***!
@@ -1003,80 +1057,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 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;
@@ -1087,12 +1141,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;
@@ -1107,48 +1161,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)},
@@ -1158,12 +1212,12 @@ 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}`;
 exports["default"] = mintSelectors;
@@ -1183,14 +1237,14 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports.mintSettings = void 0;
-/**
- * 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;
@@ -1216,8 +1270,8 @@ class mintSettings {
       }
     }
   }
-  /**
-   * 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 = {
@@ -1232,16 +1286,16 @@ class mintSettings {
 }
 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,
@@ -1251,8 +1305,8 @@ mintSettings.delay = {
   medSlow: _a.delayBase + _a.delayStep * 4,
   slow: _a.delayBase + _a.delayStep * 5
 };
-/**
- * Breakpoint variables
+/**
+ * Breakpoint variables
  */
 mintSettings.break = {
   z: 0,
@@ -1279,31 +1333,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')) {
@@ -1336,8 +1390,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;
@@ -1354,10 +1408,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 : {
@@ -1367,9 +1421,9 @@ var __importDefault = this && this.__importDefault || function (mod) {
 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["default"] = exports.mintUtil = exports.mintSettings = exports.mintSelectors = exports.mintWindow = exports.mintText = exports.mintScroll = exports.mintObject = exports.mintMath = exports.mintList = exports.mintIcon = exports.mintEvent = exports.mintDisplay = exports.mintItem = exports.mintColor = exports.mintHeader = exports.mintSide = void 0;
+/**
+ * Exports
  */
 // Enums
 var enum_1 = __webpack_require__(/*! ./imports/enum */ "./src/ts/imports/enum.ts");
@@ -1445,6 +1499,13 @@ Object.defineProperty(exports, "mintObject", ({
     return object_1.mintObject;
   }
 }));
+var scroll_1 = __webpack_require__(/*! ./imports/util/scroll */ "./src/ts/imports/util/scroll.ts");
+Object.defineProperty(exports, "mintScroll", ({
+  enumerable: true,
+  get: function () {
+    return scroll_1.mintScroll;
+  }
+}));
 var text_1 = __webpack_require__(/*! ./imports/util/text */ "./src/ts/imports/util/text.ts");
 Object.defineProperty(exports, "mintText", ({
   enumerable: true,
@@ -1507,29 +1568,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;
@@ -1541,22 +1602,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;
@@ -1599,23 +1660,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;
@@ -1638,11 +1699,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;
@@ -1672,10 +1733,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');
@@ -1698,11 +1759,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])+)\])/);