@sunderapps/n4v - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/js/n4v.js

@@ -14,9 +14,9 @@ /*
 
-/***/ "./src/ts/n4vBar.ts":
+/***/ "./src/ts/n4vbar.ts":
 /*!**************************!*\
-  !*** ./src/ts/n4vBar.ts ***!
+  !*** ./src/ts/n4vbar.ts ***!
   \**************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
-eval("\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar __importDefault = this && this.__importDefault || function (mod) {\n  return mod && mod.__esModule ? mod : {\n    \"default\": mod\n  };\n};\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\n__webpack_require__(/*! ../scss/n4v.scss */ \"./src/scss/n4v.scss\");\n\nvar selectors_1 = __importDefault(__webpack_require__(/*! ./selectors */ \"./src/ts/selectors.ts\"));\n\nvar settings_1 = __importDefault(__webpack_require__(/*! ./settings */ \"./src/ts/settings.ts\"));\n\nvar util_1 = __importDefault(__webpack_require__(/*! ./util */ \"./src/ts/util.ts\"));\n\nvar n4vBar = /*#__PURE__*/function () {\n  // Initializers\n  function n4vBar() {\n    _classCallCheck(this, n4vBar);\n\n    this.el = {};\n    this.attachElements();\n    this.attachEvents();\n    this.enableJavascript();\n    this.setMobileMenu();\n  }\n\n  _createClass(n4vBar, [{\n    key: \"attachElements\",\n    value: function attachElements() {\n      var _a;\n\n      this.el.header = document.getElementById(selectors_1.default.ids.header);\n      this.el.mobileButton = ((_a = this.el.header) === null || _a === void 0 ? void 0 : _a.querySelector(selectors_1.default.controls(selectors_1.default.ids.wrapper))) || null;\n      this.el.wrapper = document.getElementById(selectors_1.default.ids.wrapper);\n    }\n  }, {\n    key: \"attachEvents\",\n    value: function attachEvents() {\n      var _this = this;\n\n      var _a, _b, _c;\n\n      window.addEventListener('resize', util_1.default.throttle(this.eHandleResize.bind(this), settings_1.default.delay.default, {\n        trailing: false\n      }));\n      window.addEventListener('scroll', util_1.default.throttle(this.eHandleScroll.bind(this), settings_1.default.delay.default, {\n        trailing: false\n      }));\n      var focusables = (_a = this.el.header) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors_1.default.focusable),\n          lastFocusable = focusables === null || focusables === void 0 ? void 0 : focusables[(focusables === null || focusables === void 0 ? void 0 : focusables.length) - 1];\n      lastFocusable === null || lastFocusable === void 0 ? void 0 : lastFocusable.addEventListener('keydown', util_1.default.throttle(this.eWrapTab.bind(this)));\n      focusables === null || focusables === void 0 ? void 0 : focusables.forEach(function (focusable) {\n        focusable.addEventListener('keydown', util_1.default.throttle(_this.eHandleKeypress.bind(_this)));\n      });\n      var menuButtons = (_b = this.el.header) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selectors_1.default.controls() + selectors_1.default.not(selectors_1.default.controls(selectors_1.default.ids.wrapper)));\n      menuButtons === null || menuButtons === void 0 ? void 0 : menuButtons.forEach(function (menuButton) {\n        menuButton.addEventListener('mousedown', util_1.default.throttle(_this.eToggleMenu.bind(_this), settings_1.default.delay.slow, {\n          trailing: false\n        }));\n      });\n      (_c = this.el.mobileButton) === null || _c === void 0 ? void 0 : _c.addEventListener('mousedown', util_1.default.throttle(this.eToggleMobileMenu.bind(this), settings_1.default.delay.slow, {\n        trailing: false\n      }));\n    }\n  }, {\n    key: \"enableJavascript\",\n    value: function enableJavascript() {\n      var _a, _b;\n\n      (_a = this.el.header) === null || _a === void 0 ? void 0 : _a.classList.add(selectors_1.default.classes.js);\n      (_b = this.el.header) === null || _b === void 0 ? void 0 : _b.classList.add(selectors_1.default.classes.fixed);\n    } // Functionality\n\n  }, {\n    key: \"setMobileMenu\",\n    value: function setMobileMenu() {\n      var _this2 = this;\n\n      var open = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n\n      var _a, _b, _c;\n\n      var ariaExpanded = open ? 'true' : 'false',\n          ariaLabel = open ? 'close menu' : 'open menu';\n      (_a = this.el.mobileButton) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', ariaExpanded);\n      setTimeout(function () {\n        var _a;\n\n        (_a = _this2.el.mobileButton) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-label', ariaLabel);\n      }, settings_1.default.delay.fast);\n\n      if (open) {\n        (_b = this.el.wrapper) === null || _b === void 0 ? void 0 : _b.classList.add(selectors_1.default.classes.open);\n      } else {\n        (_c = this.el.wrapper) === null || _c === void 0 ? void 0 : _c.classList.remove(selectors_1.default.classes.open);\n        this.closeAllMenus();\n      }\n    }\n  }, {\n    key: \"toggleMobileMenu\",\n    value: function toggleMobileMenu() {\n      var _a, _b;\n\n      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');\n    }\n  }, {\n    key: \"setMenu\",\n    value: function setMenu(button) {\n      var open = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n      var ariaExpanded = open ? 'true' : 'false',\n          menu = button === null || button === void 0 ? void 0 : button.nextElementSibling;\n\n      if (button && menu) {\n        button.setAttribute('aria-expanded', ariaExpanded);\n\n        if (open) {\n          util_1.default.slideDown(menu);\n        } else {\n          util_1.default.slideUp(menu);\n          this.closeSubMenus(button);\n        }\n      }\n    }\n  }, {\n    key: \"toggleMenu\",\n    value: function toggleMenu(button) {\n      var _a;\n\n      this.setMenu(button, ((_a = button === null || button === void 0 ? void 0 : button.getAttribute('aria-expanded')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== 'true');\n    }\n  }, {\n    key: \"closeSubMenus\",\n    value: function closeSubMenus(button) {\n      var _this3 = this;\n\n      var menu = button === null || button === void 0 ? void 0 : button.nextElementSibling,\n          subMenus = menu === null || menu === void 0 ? void 0 : menu.querySelectorAll(selectors_1.default.subMenuButtons);\n      subMenus.forEach(function (child) {\n        var _a; // setMenu calls this function, so ignore subsub menus\n\n\n        if (((_a = child.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === menu) {\n          _this3.setMenu(child);\n        }\n      });\n    }\n  }, {\n    key: \"closeAllMenus\",\n    value: function closeAllMenus() {\n      var _this4 = this;\n\n      var _a;\n\n      var menuButtons = (_a = this.el.wrapper) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors_1.default.subMenuButtons);\n      menuButtons === null || menuButtons === void 0 ? void 0 : menuButtons.forEach(function (menuButton) {\n        _this4.setMenu(menuButton);\n      });\n    }\n  }, {\n    key: \"openClosestMenu\",\n    value: function openClosestMenu() {\n      var _a;\n\n      var activeButton = document.activeElement,\n          activeMenu = activeButton === null || activeButton === void 0 ? void 0 : activeButton.nextElementSibling,\n          showing = ((_a = activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-expanded')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'true';\n\n      if ((activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-controls')) === selectors_1.default.ids.wrapper) {\n        activeMenu = this.el.wrapper;\n      }\n\n      if ((activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-controls')) && activeMenu && !showing) {\n        activeButton.click();\n        var firstFocusable = activeMenu.querySelector(selectors_1.default.focusable);\n        firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();\n      }\n    }\n  }, {\n    key: \"closeClosestMenu\",\n    value: function closeClosestMenu() {\n      var _a, _b;\n\n      var activeElement = document.activeElement,\n          activeMenu = activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(selectors_1.default.subMenu),\n          activeButton = (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.previousElementSibling) ? activeMenu.previousElementSibling : this.el.mobileButton;\n\n      if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('aria-controls')) && ((_a = activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('aria-expanded')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'true') {\n        activeButton = activeElement;\n      }\n\n      if (((_b = activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-expanded')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'true') {\n        activeButton === null || activeButton === void 0 ? void 0 : activeButton.click();\n        activeButton === null || activeButton === void 0 ? void 0 : activeButton.focus();\n      }\n    }\n  }, {\n    key: \"toggleClosestMenu\",\n    value: function toggleClosestMenu() {\n      var _a, _b;\n\n      if (((_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-expanded')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'true') {\n        this.closeClosestMenu();\n      } else {\n        this.openClosestMenu();\n      }\n    } // Events\n\n  }, {\n    key: \"eHandleResize\",\n    value: function eHandleResize() {\n      this.setMobileMenu();\n    }\n  }, {\n    key: \"eHandleScroll\",\n    value: function eHandleScroll() {\n      this.closeAllMenus();\n    }\n  }, {\n    key: \"eWrapTab\",\n    value: function eWrapTab(e) {\n      var _a;\n\n      if (e.key.toLowerCase() === 'tab' && !e.shiftKey) {\n        (_a = this.el.mobileButton) === null || _a === void 0 ? void 0 : _a.focus();\n\n        if (document.activeElement === this.el.mobileButton) {\n          e.preventDefault();\n        }\n      }\n    }\n  }, {\n    key: \"eHandleButtonKeypress\",\n    value: function eHandleButtonKeypress(e) {\n      var _a;\n\n      var target = e.target,\n          subMenu = target.closest('li');\n\n      switch (e.key.toLowerCase()) {\n        case 'escape':\n          if (subMenu === null || subMenu === void 0 ? void 0 : subMenu.classList.contains(selectors_1.default.classes.open)) {\n            this.setMenu(subMenu);\n          } else {\n            this.setMobileMenu();\n            (_a = this.el.menuButton) === null || _a === void 0 ? void 0 : _a.focus();\n          }\n\n        case 'arrowleft':\n          this.closeClosestMenu();\n          break;\n\n        case 'arrowright':\n          break;\n\n        case 'enter':\n        case 'space':\n          break;\n      }\n    }\n  }, {\n    key: \"eHandleLinkKeypress\",\n    value: function eHandleLinkKeypress(e) {\n      switch (e.key.toLowerCase()) {\n        case 'escape':\n        case 'arrowleft':\n          this.closeClosestMenu();\n          break;\n\n        case 'arrowright':\n          this.openClosestMenu();\n          break;\n\n        case 'enter':\n        case 'space':\n          this.toggleClosestMenu();\n          break;\n      }\n    }\n  }, {\n    key: \"eHandleKeypress\",\n    value: function eHandleKeypress(e) {\n      if (e.key.toLowerCase() !== 'tab') {\n        e.preventDefault();\n      }\n\n      var target = e.target;\n\n      switch (target === null || target === void 0 ? void 0 : target.tagName.toLowerCase()) {\n        case 'a':\n          this.eHandleLinkKeypress(e);\n          break;\n\n        case 'button':\n          this.eHandleButtonKeypress(e);\n          break;\n      }\n    }\n  }, {\n    key: \"eToggleMobileMenu\",\n    value: function eToggleMobileMenu() {\n      this.toggleMobileMenu();\n    }\n  }, {\n    key: \"eToggleMenu\",\n    value: function eToggleMenu(e) {\n      this.toggleMenu(e.target);\n    }\n  }]);\n\n  return n4vBar;\n}();\n\nexports[\"default\"] = n4vBar;\n\n//# sourceURL=webpack://n4v/./src/ts/n4vBar.ts?");
+eval("\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar __importDefault = this && this.__importDefault || function (mod) {\n  return mod && mod.__esModule ? mod : {\n    \"default\": mod\n  };\n};\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n/**\r\n * Imports\r\n */\n\n__webpack_require__(/*! ../scss/n4v.scss */ \"./src/scss/n4v.scss\");\n\nvar selectors_1 = __importDefault(__webpack_require__(/*! ./selectors */ \"./src/ts/selectors.ts\"));\n\nvar settings_1 = __importDefault(__webpack_require__(/*! ./settings */ \"./src/ts/settings.ts\"));\n\nvar util_1 = __importDefault(__webpack_require__(/*! ./util */ \"./src/ts/util.ts\"));\n/**\r\n * Main n4vbar functionality\r\n * @public\r\n */\n\n\nvar n4vBar = /*#__PURE__*/function () {\n  /**\r\n   * Initializes and closes the menu\r\n   */\n  function n4vBar() {\n    _classCallCheck(this, n4vBar);\n\n    /**\r\n     * Frequently-referenced elements\r\n     */\n    this.el = {};\n    this.attachElements();\n    this.attachEvents();\n    this.enableJavascript();\n    this.setMobileMenu();\n  }\n  /**\r\n   * Adds elements to {@link el | `this.el`}\r\n   */\n\n\n  _createClass(n4vBar, [{\n    key: \"attachElements\",\n    value: function attachElements() {\n      var _a;\n\n      this.el.header = document.getElementById(selectors_1.default.ids.header);\n      this.el.mobileButton = ((_a = this.el.header) === null || _a === void 0 ? void 0 : _a.querySelector(selectors_1.default.controls(selectors_1.default.ids.wrapper))) || null;\n      this.el.wrapper = document.getElementById(selectors_1.default.ids.wrapper);\n    }\n    /**\r\n     * Adds events to the dom\r\n     */\n\n  }, {\n    key: \"attachEvents\",\n    value: function attachEvents() {\n      var _this = this;\n\n      var _a, _b, _c;\n\n      window.addEventListener('resize', util_1.default.throttle(this.eHandleResize.bind(this), settings_1.default.delay.default, {\n        trailing: false\n      }));\n      window.addEventListener('scroll', util_1.default.throttle(this.eHandleScroll.bind(this), settings_1.default.delay.default, {\n        trailing: false\n      }));\n      var focusables = (_a = this.el.header) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors_1.default.focusable),\n          lastFocusable = focusables === null || focusables === void 0 ? void 0 : focusables[(focusables === null || focusables === void 0 ? void 0 : focusables.length) - 1];\n      lastFocusable === null || lastFocusable === void 0 ? void 0 : lastFocusable.addEventListener('keydown', util_1.default.throttle(this.eWrapTab.bind(this)));\n      focusables === null || focusables === void 0 ? void 0 : focusables.forEach(function (focusable) {\n        focusable.addEventListener('keydown', util_1.default.throttle(_this.eHandleKeypress.bind(_this)));\n      });\n      var 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)));\n      menuButtons === null || menuButtons === void 0 ? void 0 : menuButtons.forEach(function (menuButton) {\n        menuButton.addEventListener('mousedown', util_1.default.throttle(_this.eToggleMenu.bind(_this), settings_1.default.delay.slow, {\n          trailing: false\n        }));\n      });\n      (_c = this.el.mobileButton) === null || _c === void 0 ? void 0 : _c.addEventListener('mousedown', util_1.default.throttle(this.eToggleMobileMenu.bind(this), settings_1.default.delay.slow, {\n        trailing: false\n      }));\n    }\n    /**\r\n     * Adds classes that inform the styles that javascript is enabled\r\n     */\n\n  }, {\n    key: \"enableJavascript\",\n    value: function enableJavascript() {\n      var _a, _b;\n\n      (_a = this.el.header) === null || _a === void 0 ? void 0 : _a.classList.add(selectors_1.default.classes.js);\n      (_b = this.el.header) === null || _b === void 0 ? void 0 : _b.classList.add(selectors_1.default.classes.fixed);\n    }\n    /**\r\n     * Sets the state of the mobile menu\r\n     * @param open - `true` to open the menu or `false` to close it\r\n     */\n\n  }, {\n    key: \"setMobileMenu\",\n    value: function setMobileMenu() {\n      var _this2 = this;\n\n      var open = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n\n      var _a, _b, _c;\n\n      var ariaExpanded = open ? 'true' : 'false',\n          ariaLabel = open ? 'close menu' : 'open menu';\n      (_a = this.el.mobileButton) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', ariaExpanded);\n      setTimeout(function () {\n        var _a;\n\n        (_a = _this2.el.mobileButton) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-label', ariaLabel);\n      }, settings_1.default.delay.fast);\n\n      if (open) {\n        (_b = this.el.wrapper) === null || _b === void 0 ? void 0 : _b.classList.add(selectors_1.default.classes.open);\n      } else {\n        (_c = this.el.wrapper) === null || _c === void 0 ? void 0 : _c.classList.remove(selectors_1.default.classes.open);\n        this.closeAllMenus();\n      }\n    }\n    /**\r\n     * Toggles the state of the mobile menu\r\n     */\n\n  }, {\n    key: \"toggleMobileMenu\",\n    value: function toggleMobileMenu() {\n      var _a, _b;\n\n      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');\n    }\n    /**\r\n     * Sets the state of the provided button's menu\r\n     * @param button - Button element to set\r\n     * @param open - `true` to open the menu or `false` to close it\r\n     */\n\n  }, {\n    key: \"setMenu\",\n    value: function setMenu(button) {\n      var open = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n      var ariaExpanded = open ? 'true' : 'false',\n          menu = button === null || button === void 0 ? void 0 : button.nextElementSibling;\n\n      if (button && menu) {\n        button.setAttribute('aria-expanded', ariaExpanded);\n\n        if (open) {\n          util_1.default.show(menu);\n        } else {\n          util_1.default.hide(menu);\n          this.closeSubMenus(button);\n        }\n      }\n    }\n    /**\r\n     * Toggles the state of the provided button's menu\r\n     * @param button - Button element to toggle\r\n     */\n\n  }, {\n    key: \"toggleMenu\",\n    value: function toggleMenu(button) {\n      var _a;\n\n      this.setMenu(button, ((_a = button === null || button === void 0 ? void 0 : button.getAttribute('aria-expanded')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== 'true');\n    }\n    /**\r\n     * Closes all submenus of the provided button's menu\r\n     * @param button - Button element of the parent menu\r\n     */\n\n  }, {\n    key: \"closeSubMenus\",\n    value: function closeSubMenus(button) {\n      var _this3 = this;\n\n      var menu = button === null || button === void 0 ? void 0 : button.nextElementSibling,\n          subMenus = menu === null || menu === void 0 ? void 0 : menu.querySelectorAll(selectors_1.default.subMenuButtons);\n      subMenus.forEach(function (child) {\n        var _a; // setMenu calls this function, so ignore subsub menus\n\n\n        if (((_a = child.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === menu) {\n          _this3.setMenu(child);\n        }\n      });\n    }\n    /**\r\n     * Closes all submenus of the n4vbar\r\n     */\n\n  }, {\n    key: \"closeAllMenus\",\n    value: function closeAllMenus() {\n      var _this4 = this;\n\n      var _a;\n\n      var menuButtons = (_a = this.el.wrapper) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors_1.default.subMenuButtons);\n      menuButtons === null || menuButtons === void 0 ? void 0 : menuButtons.forEach(function (menuButton) {\n        _this4.setMenu(menuButton);\n      });\n    }\n    /**\r\n     * Opens the menu closest to the document's focus\r\n     */\n\n  }, {\n    key: \"openClosestMenu\",\n    value: function openClosestMenu() {\n      var _a;\n\n      var activeButton = document.activeElement,\n          activeMenu = activeButton === null || activeButton === void 0 ? void 0 : activeButton.nextElementSibling,\n          showing = ((_a = activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-expanded')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'true';\n\n      if ((activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-controls')) === selectors_1.default.ids.wrapper) {\n        activeMenu = this.el.wrapper;\n      }\n\n      if ((activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-controls')) && activeMenu && !showing) {\n        activeButton.click();\n        var firstFocusable = activeMenu.querySelector(selectors_1.default.focusable);\n        firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();\n      }\n    }\n    /**\r\n     * Closes the menu closest to the document's focus\r\n     */\n\n  }, {\n    key: \"closeClosestMenu\",\n    value: function closeClosestMenu() {\n      var _a, _b;\n\n      var activeElement = document.activeElement,\n          activeMenu = activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest(selectors_1.default.subMenu),\n          activeButton = (activeMenu === null || activeMenu === void 0 ? void 0 : activeMenu.previousElementSibling) ? activeMenu.previousElementSibling : this.el.mobileButton;\n\n      if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('aria-controls')) && ((_a = activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('aria-expanded')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'true') {\n        activeButton = activeElement;\n      }\n\n      if (((_b = activeButton === null || activeButton === void 0 ? void 0 : activeButton.getAttribute('aria-expanded')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'true') {\n        activeButton === null || activeButton === void 0 ? void 0 : activeButton.click();\n        activeButton === null || activeButton === void 0 ? void 0 : activeButton.focus();\n      }\n    }\n    /**\r\n     * Toggles the menu closest to the document's focus\r\n     */\n\n  }, {\n    key: \"toggleClosestMenu\",\n    value: function toggleClosestMenu() {\n      var _a, _b;\n\n      if (((_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-expanded')) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'true') {\n        this.closeClosestMenu();\n      } else {\n        this.openClosestMenu();\n      }\n    }\n    /**\r\n     * Closes the mobile menu when the window resizes\r\n     */\n\n  }, {\n    key: \"eHandleResize\",\n    value: function eHandleResize() {\n      this.setMobileMenu();\n    }\n    /**\r\n     * Closes all submenus when the page is scrolled\r\n     */\n\n  }, {\n    key: \"eHandleScroll\",\n    value: function eHandleScroll() {\n      this.closeAllMenus();\n    }\n    /**\r\n     * Sends the focus to the menu button after tabbing past the last menu item\r\n     * @param e - Keyboard event\r\n     */\n\n  }, {\n    key: \"eWrapTab\",\n    value: function eWrapTab(e) {\n      var _a;\n\n      if (e.key.toLowerCase() === 'tab' && !e.shiftKey) {\n        (_a = this.el.mobileButton) === null || _a === void 0 ? void 0 : _a.focus();\n\n        if (document.activeElement === this.el.mobileButton) {\n          e.preventDefault();\n        }\n      }\n    }\n    /**\r\n     * Handles keypresses on n4vbar buttons\r\n     * @param e - Keyboard event\r\n     */\n\n  }, {\n    key: \"eHandleButtonKeypress\",\n    value: function eHandleButtonKeypress(e) {\n      var _a;\n\n      var target = e.target,\n          subMenu = target.closest('li');\n\n      switch (e.key.toLowerCase()) {\n        case 'escape':\n          if (subMenu === null || subMenu === void 0 ? void 0 : subMenu.classList.contains(selectors_1.default.classes.open)) {\n            this.setMenu(subMenu);\n          } else {\n            this.setMobileMenu();\n            (_a = this.el.menuButton) === null || _a === void 0 ? void 0 : _a.focus();\n          }\n\n        case 'arrowleft':\n          this.closeClosestMenu();\n          break;\n\n        case 'arrowright':\n          break;\n\n        case 'enter':\n        case 'space':\n          break;\n      }\n    }\n    /**\r\n     * Handles keypresses on n4vbar links\r\n     * @param e - Keyboard event\r\n     */\n\n  }, {\n    key: \"eHandleLinkKeypress\",\n    value: function eHandleLinkKeypress(e) {\n      switch (e.key.toLowerCase()) {\n        case 'escape':\n        case 'arrowleft':\n          this.closeClosestMenu();\n          break;\n\n        case 'arrowright':\n          this.openClosestMenu();\n          break;\n\n        case 'enter':\n        case 'space':\n          this.toggleClosestMenu();\n          break;\n      }\n    }\n    /**\r\n     * Handles keypresses on the n4vbar\r\n     * @param e - Keyboard event\r\n     */\n\n  }, {\n    key: \"eHandleKeypress\",\n    value: function eHandleKeypress(e) {\n      if (e.key.toLowerCase() !== 'tab') {\n        e.preventDefault();\n      }\n\n      var target = e.target;\n\n      switch (target === null || target === void 0 ? void 0 : target.tagName.toLowerCase()) {\n        case 'a':\n          this.eHandleLinkKeypress(e);\n          break;\n\n        case 'button':\n          this.eHandleButtonKeypress(e);\n          break;\n      }\n    }\n    /**\r\n     * Toggles the mobile menu\r\n     */\n\n  }, {\n    key: \"eToggleMobileMenu\",\n    value: function eToggleMobileMenu() {\n      this.toggleMobileMenu();\n    }\n    /**\r\n     * Toggles the clicked submenu\r\n     * @param e - Mouse event\r\n     */\n\n  }, {\n    key: \"eToggleMenu\",\n    value: function eToggleMenu(e) {\n      this.toggleMenu(e.target);\n    }\n  }]);\n\n  return n4vBar;\n}();\n\nexports[\"default\"] = n4vBar;\n\n//# sourceURL=webpack://n4v/./src/ts/n4vbar.ts?");
 
@@ -29,5 +29,5 @@ /***/ }),
   \*****************************/
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
-eval("\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar __classPrivateFieldGet = this && this.__classPrivateFieldGet || function (receiver, state, kind, f) {\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n  return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n};\n\nvar _a, _n4vSelectors_lib, _n4vSelectors_pre, _n4vSelectors_controls, _n4vSelectors_expanded;\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\nvar n4vSelectors = /*#__PURE__*/function () {\n  function n4vSelectors() {\n    _classCallCheck(this, n4vSelectors);\n  }\n\n  _createClass(n4vSelectors, null, [{\n    key: \"prefix\",\n    value: function prefix(base) {\n      base = base.toLowerCase();\n      return base.startsWith(__classPrivateFieldGet(this, _a, \"f\", _n4vSelectors_pre)) ? base : \"\".concat(__classPrivateFieldGet(this, _a, \"f\", _n4vSelectors_pre)).concat(base);\n    }\n  }, {\n    key: \"cssPrefix\",\n    value: function cssPrefix(base) {\n      return \"--\".concat(this.prefix(base.replace(/^-+/, '')));\n    }\n  }, {\n    key: \"cssVar\",\n    value: function cssVar(base) {\n      return \"var(\".concat(this.cssPrefix(base), \")\");\n    }\n  }, {\n    key: \"not\",\n    value: function not(base) {\n      return \":not(\".concat(base, \")\");\n    }\n  }, {\n    key: \"class\",\n    value: function _class(base) {\n      return \".\".concat(this.prefix(base));\n    }\n  }, {\n    key: \"id\",\n    value: function id(base) {\n      return \"#\".concat(this.prefix(base));\n    }\n  }, {\n    key: \"controls\",\n    value: function controls(id) {\n      return id ? \"[aria-controls=\\\"\".concat(this.prefix(id), \"\\\"]\") : __classPrivateFieldGet(this, _a, \"f\", _n4vSelectors_controls);\n    }\n  }, {\n    key: \"expanded\",\n    value: function expanded(bool) {\n      return typeof bool === 'boolean' ? \"[aria-expanded=\\\"\".concat(bool, \"\\\"]\") : __classPrivateFieldGet(this, _a, \"f\", _n4vSelectors_expanded);\n    }\n  }]);\n\n  return n4vSelectors;\n}();\n\n_a = n4vSelectors;\n_n4vSelectors_lib = {\n  value: 'n4v'\n};\n_n4vSelectors_pre = {\n  value: \"\".concat(__classPrivateFieldGet(_a, _a, \"f\", _n4vSelectors_lib), \"-\")\n};\n_n4vSelectors_controls = {\n  value: '[aria-controls]'\n};\n_n4vSelectors_expanded = {\n  value: '[aria-expanded]'\n};\nn4vSelectors.disabled = '[disabled]';\nn4vSelectors.tabbable = '[tabindex]';\nn4vSelectors.hasLink = '[href]';\nn4vSelectors.hasRouterLink = '[routerLink]';\nn4vSelectors.hasId = '[id]';\nn4vSelectors.noTab = '[tabindex^=\"-\"]';\nn4vSelectors.focusable = \"input\".concat(_a.not(_a.disabled)).concat(_a.not(_a.noTab), \",\\n                                select\").concat(_a.not(_a.disabled)).concat(_a.not(_a.noTab), \",\\n                                textarea\").concat(_a.not(_a.disabled)).concat(_a.not(_a.noTab), \",\\n                                button\").concat(_a.not(_a.disabled)).concat(_a.not(_a.noTab), \",\\n                                object\").concat(_a.not(_a.disabled)).concat(_a.not(_a.noTab), \",\\n                                a\").concat(_a.hasLink, \", a\").concat(_a.hasRouterLink, \",\\n                                area\").concat(_a.hasLink, \",\\n                                \").concat(_a.tabbable).concat(_a.not(_a.noTab)).replace(/\\s/g, '');\nn4vSelectors.subMenuButtons = \"button\".concat(__classPrivateFieldGet(_a, _a, \"f\", _n4vSelectors_controls));\nn4vSelectors.subMenu = \"\".concat(_a.subMenuButtons, \" + ul\").concat(_a.hasId);\nn4vSelectors.ids = {\n  header: _a.prefix('header'),\n  logo: _a.prefix('logo'),\n  wrapper: _a.prefix('wrapper'),\n  mainContent: _a.prefix('main-content')\n};\nn4vSelectors.classes = {\n  srOnly: _a.prefix('sr-only'),\n  js: _a.prefix('js'),\n  fixed: _a.prefix('fixed'),\n  gettingHeight: _a.prefix('getting-height'),\n  anime: _a.prefix('anime'),\n  instant: _a.prefix('instant'),\n  open: _a.prefix('open')\n};\nexports[\"default\"] = n4vSelectors;\n\n//# sourceURL=webpack://n4v/./src/ts/selectors.ts?");
+eval("\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar _a;\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n/**\r\n * CSS-selector helpers\r\n */\n\nvar n4vSelectors = /*#__PURE__*/function () {\n  function n4vSelectors() {\n    _classCallCheck(this, n4vSelectors);\n  }\n\n  _createClass(n4vSelectors, null, [{\n    key: \"prefix\",\n    value:\n    /**\r\n     * Adds the library prefix to the beginning of the provided string\r\n     * @param base - the string to be prefixed\r\n     * @returns - the provided string prefixed with the library name\r\n     */\n    function prefix(base) {\n      base = base.toLowerCase();\n      return base.startsWith(this.pre) ? base : \"\".concat(this.pre).concat(base);\n    }\n    /**\r\n     * Adds two dashes to the beginning of the provided string\r\n     * @param base - the string to be prefixed\r\n     * @returns - the provided string prefixed with two dashes\r\n     */\n\n  }, {\n    key: \"cssPrefix\",\n    value: function cssPrefix(base) {\n      return \"--\".concat(this.prefix(base.replace(/^-+/, '')));\n    }\n    /**\r\n     * Turns the provided string into a CSS variable call\r\n     * @param base - the name of the CSS variable to call\r\n     * @returns - the CSS variable call for the provided string\r\n     */\n\n  }, {\n    key: \"cssVar\",\n    value: function cssVar(base) {\n      return \"var(\".concat(this.cssPrefix(base), \")\");\n    }\n    /**\r\n     * Negates the provided CSS selector\r\n     * @param base - the CSS selector to negate\r\n     * @returns - the negated CSS selector\r\n     */\n\n  }, {\n    key: \"neg\",\n    value: function neg(base) {\n      return \":not(\".concat(base, \")\");\n    }\n    /**\r\n     * Generates a class CSS selector\r\n     * @param base - the name of the class to generate\r\n     * @returns - the generated CSS selector\r\n     */\n\n  }, {\n    key: \"class\",\n    value: function _class(base) {\n      return \".\".concat(this.prefix(base));\n    }\n    /**\r\n     * Generates an id CSS selector\r\n     * @param base - the name of the id to generate\r\n     * @returns - the generated CSS selector\r\n     */\n\n  }, {\n    key: \"id\",\n    value: function id(base) {\n      return \"#\".concat(this.prefix(base));\n    }\n    /**\r\n     * Generates an aria-controls CSS selector\r\n     * @param id - the id of the controlled element\r\n     * @returns - the generated CSS selector\r\n     */\n\n  }, {\n    key: \"controls\",\n    value: function controls(id) {\n      return id ? \"[aria-controls=\\\"\".concat(this.prefix(id), \"\\\"]\") : this.hasControls;\n    }\n    /**\r\n     * Generates an aria-expanded CSS selector\r\n     * @param bool - whether the element is expanded or not\r\n     * @returns - the generated CSS selector\r\n     */\n\n  }, {\n    key: \"expanded\",\n    value: function expanded(bool) {\n      return typeof bool === 'boolean' ? \"[aria-expanded=\\\"\".concat(bool, \"\\\"]\") : this.hasExpanded;\n    }\n  }]);\n\n  return n4vSelectors;\n}();\n\nexports[\"default\"] = n4vSelectors;\n_a = n4vSelectors;\n/**\r\n * The library name that will be added as a prefix\r\n */\n\nn4vSelectors.lib = 'n4v';\n/**\r\n * The prefix built from the library name\r\n */\n\nn4vSelectors.pre = \"\".concat(_a.lib, \"-\");\n/**\r\n * CSS-selector for disabled elements\r\n */\n\nn4vSelectors.disabled = '[disabled]';\n/**\r\n * CSS-selector for elements with an aria-controls attribute\r\n */\n\nn4vSelectors.hasControls = '[aria-controls]';\n/**\r\n * CSS-selector for elements with an aria-expanded attribute\r\n */\n\nn4vSelectors.hasExpanded = '[aria-expanded]';\n/**\r\n * CSS-selector for elements with an href attribute\r\n */\n\nn4vSelectors.hasLink = '[href]';\n/**\r\n * CSS-selector for elements with a routerLink attribute\r\n */\n\nn4vSelectors.hasRouterLink = '[routerLink]';\n/**\r\n * CSS-selector for elements with an id attribute\r\n */\n\nn4vSelectors.hasId = '[id]';\n/**\r\n * CSS-selector for elements that aren't tabbable (i.e. tabindex is negative)\r\n */\n\nn4vSelectors.notTabbable = '[tabindex^=\"-\"]';\n/**\r\n * CSS-selector for elements that are tabbable (i.e. tabindex isn't negative)\r\n */\n\nn4vSelectors.tabbable = \"[tabindex]\".concat(_a.neg(_a.notTabbable));\n/**\r\n * CSS-selector for elements that can receive focus\r\n */\n\nn4vSelectors.focusable = \"input\".concat(_a.neg(_a.disabled)).concat(_a.neg(_a.notTabbable), \",\\n                                select\").concat(_a.neg(_a.disabled)).concat(_a.neg(_a.notTabbable), \",\\n                                textarea\").concat(_a.neg(_a.disabled)).concat(_a.neg(_a.notTabbable), \",\\n                                button\").concat(_a.neg(_a.disabled)).concat(_a.neg(_a.notTabbable), \",\\n                                object\").concat(_a.neg(_a.disabled)).concat(_a.neg(_a.notTabbable), \",\\n                                a\").concat(_a.hasLink, \", a\").concat(_a.hasRouterLink, \",\\n                                area\").concat(_a.hasLink, \",\\n                                \").concat(_a.tabbable).replace(/\\s/g, '');\n/**\r\n * CSS-selector for submenu buttons\r\n */\n\nn4vSelectors.subMenuButtons = \"button\".concat(_a.hasControls);\n/**\r\n * CSS-selector for submenus\r\n */\n\nn4vSelectors.subMenu = \"\".concat(_a.subMenuButtons, \" + ul\").concat(_a.hasId);\n/**\r\n * Frequently-used ids\r\n */\n\nn4vSelectors.ids = {\n  header: _a.prefix('header'),\n  logo: _a.prefix('logo'),\n  wrapper: _a.prefix('wrapper'),\n  mainContent: _a.prefix('main-content')\n};\n/**\r\n * Frequently-used classes\r\n */\n\nn4vSelectors.classes = {\n  srOnly: _a.prefix('sr-only'),\n  js: _a.prefix('js'),\n  fixed: _a.prefix('fixed'),\n  gettingHeight: _a.prefix('getting-height'),\n  anime: _a.prefix('anime'),\n  instant: _a.prefix('instant'),\n  open: _a.prefix('open')\n};\n\n//# sourceURL=webpack://n4v/./src/ts/selectors.ts?");
 
@@ -40,5 +40,5 @@ /***/ }),
   \****************************/
-/***/ (function(__unused_webpack_module, exports) {
+/***/ ((__unused_webpack_module, exports) => {
 
-eval("\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar __classPrivateFieldGet = this && this.__classPrivateFieldGet || function (receiver, state, kind, f) {\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n  return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n};\n\nvar _a, _n4vSettings_setDelay;\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\nvar n4vSettings = /*#__PURE__*/function () {\n  function n4vSettings() {\n    _classCallCheck(this, n4vSettings);\n  }\n\n  _createClass(n4vSettings, null, [{\n    key: \"set\",\n    value: function set(settings) {\n      var newDelay = false;\n\n      if (typeof settings.delayBase === 'number') {\n        this.delayBase = settings.delayBase;\n        newDelay = true;\n      }\n\n      if (typeof settings.delayStep === 'number') {\n        this.delayStep = settings.delayStep;\n        newDelay = true;\n      }\n\n      if (newDelay) {\n        __classPrivateFieldGet(this, _a, \"m\", _n4vSettings_setDelay).call(this);\n      }\n\n      if (settings.delay && Object.keys(settings.delay).length) {\n        if (Object.values(settings.delay).reduce(function (prev, next) {\n          return prev && typeof next === 'number';\n        }, true)) {\n          this.delay = Object.assign(Object.assign({}, this.delay), settings.delay);\n        }\n      }\n    }\n  }]);\n\n  return n4vSettings;\n}();\n\n_a = n4vSettings, _n4vSettings_setDelay = function _n4vSettings_setDelay() {\n  this.delay = {\n    instant: this.delayBase + this.delayStep * 0,\n    fast: this.delayBase + this.delayStep * 1,\n    medFast: this.delayBase + this.delayStep * 2,\n    default: this.delayBase + this.delayStep * 3,\n    medSlow: this.delayBase + this.delayStep * 4,\n    slow: this.delayBase + this.delayStep * 5\n  };\n};\nn4vSettings.delayBase = 0;\nn4vSettings.delayStep = 100;\nn4vSettings.delay = {\n  instant: _a.delayBase + _a.delayStep * 0,\n  fast: _a.delayBase + _a.delayStep * 1,\n  medFast: _a.delayBase + _a.delayStep * 2,\n  default: _a.delayBase + _a.delayStep * 3,\n  medSlow: _a.delayBase + _a.delayStep * 4,\n  slow: _a.delayBase + _a.delayStep * 5\n};\nexports[\"default\"] = n4vSettings;\n\n//# sourceURL=webpack://n4v/./src/ts/settings.ts?");
+eval("\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar _a;\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n/**\r\n * Settings management\r\n * @public\r\n */\n\nvar n4vSettings = /*#__PURE__*/function () {\n  function n4vSettings() {\n    _classCallCheck(this, n4vSettings);\n  }\n\n  _createClass(n4vSettings, null, [{\n    key: \"set\",\n    value:\n    /**\r\n     * Update the provided settings variables\r\n     * @param settings - Object of settings variables to update\r\n     */\n    function set(settings) {\n      var newDelay = false;\n\n      if (typeof settings.delayBase === 'number') {\n        this.delayBase = settings.delayBase;\n        newDelay = true;\n      }\n\n      if (typeof settings.delayStep === 'number') {\n        this.delayStep = settings.delayStep;\n        newDelay = true;\n      }\n\n      if (newDelay) {\n        this.setDelay();\n      }\n\n      if (settings.delay && Object.keys(settings.delay).length) {\n        if (Object.values(settings.delay).reduce(function (prev, next) {\n          return prev && typeof next === 'number';\n        }, true)) {\n          this.delay = Object.assign(Object.assign({}, this.delay), settings.delay);\n        }\n      }\n    }\n    /**\r\n     * Updates the delay variables based on `this.delayBase` and `this.delayStep`\r\n     */\n\n  }, {\n    key: \"setDelay\",\n    value: function setDelay() {\n      this.delay = {\n        instant: this.delayBase + this.delayStep * 0,\n        fast: this.delayBase + this.delayStep * 1,\n        medFast: this.delayBase + this.delayStep * 2,\n        default: this.delayBase + this.delayStep * 3,\n        medSlow: this.delayBase + this.delayStep * 4,\n        slow: this.delayBase + this.delayStep * 5\n      };\n    }\n  }]);\n\n  return n4vSettings;\n}();\n\nexports[\"default\"] = n4vSettings;\n_a = n4vSettings;\n/**\r\n * Value added to all delay variables\r\n */\n\nn4vSettings.delayBase = 0;\n/**\r\n * Value multiplied by delay variable index\r\n */\n\nn4vSettings.delayStep = 100;\n/**\r\n * Delay variables\r\n */\n\nn4vSettings.delay = {\n  instant: _a.delayBase + _a.delayStep * 0,\n  fast: _a.delayBase + _a.delayStep * 1,\n  medFast: _a.delayBase + _a.delayStep * 2,\n  default: _a.delayBase + _a.delayStep * 3,\n  medSlow: _a.delayBase + _a.delayStep * 4,\n  slow: _a.delayBase + _a.delayStep * 5\n};\n\n//# sourceURL=webpack://n4v/./src/ts/settings.ts?");
 
@@ -53,3 +53,3 @@ /***/ }),
 
-eval("\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar __importDefault = this && this.__importDefault || function (mod) {\n  return mod && mod.__esModule ? mod : {\n    \"default\": mod\n  };\n};\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n\nvar selectors_1 = __importDefault(__webpack_require__(/*! ./selectors */ \"./src/ts/selectors.ts\"));\n\nvar settings_1 = __importDefault(__webpack_require__(/*! ./settings */ \"./src/ts/settings.ts\"));\n\nvar n4vUtil = /*#__PURE__*/function () {\n  function n4vUtil() {\n    _classCallCheck(this, n4vUtil);\n  }\n\n  _createClass(n4vUtil, null, [{\n    key: \"throttle\",\n    value: function throttle(func) {\n      var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;\n      var options = arguments.length > 2 ? arguments[2] : undefined;\n\n      var context,\n          args,\n          result,\n          timeout,\n          previous = 0,\n          later = function later() {\n        previous = (options === null || options === void 0 ? void 0 : options.leading) === false ? 0 : new Date().getTime();\n        timeout = 0;\n        result = func.apply(context, args);\n\n        if (!timeout) {\n          context = args = null;\n        }\n      },\n          throttled = function throttled() {\n        var now = new Date().getTime();\n\n        if (!previous && (options === null || options === void 0 ? void 0 : options.leading) === false) {\n          previous = now;\n        }\n\n        var remaining = wait - now + previous;\n        context = this;\n        args = arguments;\n\n        if (remaining <= 0 || remaining > wait) {\n          if (timeout) {\n            clearTimeout(timeout);\n            timeout = 0;\n          }\n\n          previous = now;\n          result = func.apply(context, args);\n\n          if (!timeout) {\n            context = args = null;\n          }\n        } else if (!timeout && (options === null || options === void 0 ? void 0 : options.trailing) !== false) {\n          timeout = window.setTimeout(later, remaining);\n        }\n\n        return result;\n      };\n\n      return throttled;\n    }\n  }, {\n    key: \"getHeight\",\n    value: function getHeight(el) {\n      el === null || el === void 0 ? void 0 : el.classList.add(selectors_1.default.classes.gettingHeight);\n      var height = (el === null || el === void 0 ? void 0 : el.scrollHeight) || 0;\n      el === null || el === void 0 ? void 0 : el.classList.remove(selectors_1.default.classes.gettingHeight);\n      return height;\n    }\n  }, {\n    key: \"slideDown\",\n    value: function slideDown(el) {\n      if (el) {\n        el.classList.add(selectors_1.default.classes.anime);\n        el.style.height = \"\".concat(this.getHeight(el), \"px\");\n        setTimeout(function () {\n          el.style.height = 'auto';\n          el.classList.remove(selectors_1.default.classes.anime);\n        }, settings_1.default.delay.default);\n      }\n    }\n  }, {\n    key: \"slideUp\",\n    value: function slideUp(el) {\n      if (el) {\n        el.classList.add(selectors_1.default.classes.anime);\n        var height = this.getHeight(el),\n            transition = el.style.transition;\n        el.style.transition = '';\n        requestAnimationFrame(function () {\n          el.style.height = \"\".concat(height, \"px\");\n          el.style.transition = transition;\n          requestAnimationFrame(function () {\n            el.style.height = '0px';\n          });\n        });\n        setTimeout(function () {\n          el.classList.remove(selectors_1.default.classes.anime);\n        }, settings_1.default.delay.default);\n      }\n    }\n  }]);\n\n  return n4vUtil;\n}();\n\nexports[\"default\"] = n4vUtil;\n\n//# sourceURL=webpack://n4v/./src/ts/util.ts?");
+eval("\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\n\nvar __importDefault = this && this.__importDefault || function (mod) {\n  return mod && mod.__esModule ? mod : {\n    \"default\": mod\n  };\n};\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\n/**\r\n * Imports\r\n */\n\nvar selectors_1 = __importDefault(__webpack_require__(/*! ./selectors */ \"./src/ts/selectors.ts\"));\n\nvar settings_1 = __importDefault(__webpack_require__(/*! ./settings */ \"./src/ts/settings.ts\"));\n/**\r\n * Utility function\r\n * @public\r\n */\n\n\nvar n4vUtil = /*#__PURE__*/function () {\n  function n4vUtil() {\n    _classCallCheck(this, n4vUtil);\n  }\n\n  _createClass(n4vUtil, null, [{\n    key: \"throttle\",\n    value:\n    /**\r\n     * Ensures that a function `func` is called at most every `wait` milliseconds with optional leading and trailing calls\r\n     * @param func - the function to throttle\r\n     * @param wait - the amount of time between function calls\r\n     * @param options - leading and trailing options: default = { leading: true, trailing, true }\r\n     * @returns - the throttled function\r\n     */\n    function throttle(func) {\n      var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : settings_1.default.delay.default;\n      var options = arguments.length > 2 ? arguments[2] : undefined;\n\n      var context,\n          args,\n          result,\n          timeout,\n          previous = 0,\n          later = function later() {\n        previous = (options === null || options === void 0 ? void 0 : options.leading) === false ? 0 : new Date().getTime();\n        timeout = 0;\n        result = func.apply(context, args);\n\n        if (!timeout) {\n          context = args = null;\n        }\n      },\n          throttled = function throttled() {\n        var now = new Date().getTime();\n\n        if (!previous && (options === null || options === void 0 ? void 0 : options.leading) === false) {\n          previous = now;\n        }\n\n        var remaining = wait - now + previous;\n        context = this;\n        args = arguments;\n\n        if (remaining <= 0 || remaining > wait) {\n          if (timeout) {\n            clearTimeout(timeout);\n            timeout = 0;\n          }\n\n          previous = now;\n          result = func.apply(context, args);\n\n          if (!timeout) {\n            context = args = null;\n          }\n        } else if (!timeout && (options === null || options === void 0 ? void 0 : options.trailing) !== false) {\n          timeout = window.setTimeout(later, remaining);\n        }\n\n        return result;\n      };\n\n      return throttled;\n    }\n    /**\r\n     * Gets the height in pixels of the provided element\r\n     * @param el - the element whose height will be measured\r\n     * @returns - the height of the provided element in pixels\r\n     */\n\n  }, {\n    key: \"getHeight\",\n    value: function getHeight(el) {\n      el === null || el === void 0 ? void 0 : el.classList.add(selectors_1.default.classes.gettingHeight);\n      var height = (el === null || el === void 0 ? void 0 : el.scrollHeight) || 0;\n      el === null || el === void 0 ? void 0 : el.classList.remove(selectors_1.default.classes.gettingHeight);\n      return height;\n    }\n    /**\r\n     * Sets the element's height to its `innerHeight`, then to `auto` after a delay\r\n     * @param el - the element whose height will be set\r\n     */\n\n  }, {\n    key: \"show\",\n    value: function show(el) {\n      if (el) {\n        el.classList.add(selectors_1.default.classes.anime);\n        el.style.height = \"\".concat(this.getHeight(el), \"px\");\n        setTimeout(function () {\n          el.style.height = 'auto';\n          el.classList.remove(selectors_1.default.classes.anime);\n        }, settings_1.default.delay.default);\n      }\n    }\n    /**\r\n     * Sets the element's height to 0\r\n     * @param el - the element whose height will be set\r\n     */\n\n  }, {\n    key: \"hide\",\n    value: function hide(el) {\n      if (el) {\n        el.classList.add(selectors_1.default.classes.anime);\n        var height = this.getHeight(el),\n            transition = el.style.transition;\n        el.style.transition = '';\n        requestAnimationFrame(function () {\n          el.style.height = \"\".concat(height, \"px\");\n          el.style.transition = transition;\n          requestAnimationFrame(function () {\n            el.style.height = '0px';\n          });\n        });\n        setTimeout(function () {\n          el.classList.remove(selectors_1.default.classes.anime);\n        }, settings_1.default.delay.default);\n      }\n    }\n  }]);\n\n  return n4vUtil;\n}();\n\nexports[\"default\"] = n4vUtil;\n\n//# sourceURL=webpack://n4v/./src/ts/util.ts?");
 
@@ -111,3 +111,3 @@ /***/ }),
 /******/ 	// This entry module is referenced by other modules so it can't be inlined
-/******/ 	var __webpack_exports__ = __webpack_require__("./src/ts/n4vBar.ts");
+/******/ 	var __webpack_exports__ = __webpack_require__("./src/ts/n4vbar.ts");
 /******/ 	n4v = __webpack_exports__["default"];
@@ -114,0 +114,0 @@ /******/

dist/js/n4v.min.js

@@ -1,1 +0,1 @@
-var n4v;(()=>{"use strict";var e={283:function(e,t,n){function a(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var l=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),n(968);var i=l(n(565)),o=l(n(750)),s=l(n(427)),r=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.el={},this.attachElements(),this.attachEvents(),this.enableJavascript(),this.setMobileMenu()}var t,n;return t=e,n=[{key:"attachElements",value:function(){var e;this.el.header=document.getElementById(i.default.ids.header),this.el.mobileButton=(null===(e=this.el.header)||void 0===e?void 0:e.querySelector(i.default.controls(i.default.ids.wrapper)))||null,this.el.wrapper=document.getElementById(i.default.ids.wrapper)}},{key:"attachEvents",value:function(){var e,t,n,a=this;window.addEventListener("resize",s.default.throttle(this.eHandleResize.bind(this),o.default.delay.default,{trailing:!1})),window.addEventListener("scroll",s.default.throttle(this.eHandleScroll.bind(this),o.default.delay.default,{trailing:!1}));var l=null===(e=this.el.header)||void 0===e?void 0:e.querySelectorAll(i.default.focusable),r=null==l?void 0:l[(null==l?void 0:l.length)-1];null==r||r.addEventListener("keydown",s.default.throttle(this.eWrapTab.bind(this))),null==l||l.forEach((function(e){e.addEventListener("keydown",s.default.throttle(a.eHandleKeypress.bind(a)))}));var u=null===(t=this.el.header)||void 0===t?void 0:t.querySelectorAll(i.default.controls()+i.default.not(i.default.controls(i.default.ids.wrapper)));null==u||u.forEach((function(e){e.addEventListener("mousedown",s.default.throttle(a.eToggleMenu.bind(a),o.default.delay.slow,{trailing:!1}))})),null===(n=this.el.mobileButton)||void 0===n||n.addEventListener("mousedown",s.default.throttle(this.eToggleMobileMenu.bind(this),o.default.delay.slow,{trailing:!1}))}},{key:"enableJavascript",value:function(){var e,t;null===(e=this.el.header)||void 0===e||e.classList.add(i.default.classes.js),null===(t=this.el.header)||void 0===t||t.classList.add(i.default.classes.fixed)}},{key:"setMobileMenu",value:function(){var e,t,n,a=this,l=arguments.length>0&&void 0!==arguments[0]&&arguments[0],s=l?"true":"false",r=l?"close menu":"open menu";null===(e=this.el.mobileButton)||void 0===e||e.setAttribute("aria-expanded",s),setTimeout((function(){var e;null===(e=a.el.mobileButton)||void 0===e||e.setAttribute("aria-label",r)}),o.default.delay.fast),l?null===(t=this.el.wrapper)||void 0===t||t.classList.add(i.default.classes.open):(null===(n=this.el.wrapper)||void 0===n||n.classList.remove(i.default.classes.open),this.closeAllMenus())}},{key:"toggleMobileMenu",value:function(){var e,t;this.setMobileMenu("false"===(null===(t=null===(e=this.el.mobileButton)||void 0===e?void 0:e.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase()))}},{key:"setMenu",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=t?"true":"false",a=null==e?void 0:e.nextElementSibling;e&&a&&(e.setAttribute("aria-expanded",n),t?s.default.slideDown(a):(s.default.slideUp(a),this.closeSubMenus(e)))}},{key:"toggleMenu",value:function(e){var t;this.setMenu(e,"true"!==(null===(t=null==e?void 0:e.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase()))}},{key:"closeSubMenus",value:function(e){var t=this,n=null==e?void 0:e.nextElementSibling;(null==n?void 0:n.querySelectorAll(i.default.subMenuButtons)).forEach((function(e){var a;(null===(a=e.parentElement)||void 0===a?void 0:a.parentElement)===n&&t.setMenu(e)}))}},{key:"closeAllMenus",value:function(){var e,t=this,n=null===(e=this.el.wrapper)||void 0===e?void 0:e.querySelectorAll(i.default.subMenuButtons);null==n||n.forEach((function(e){t.setMenu(e)}))}},{key:"openClosestMenu",value:function(){var e,t=document.activeElement,n=null==t?void 0:t.nextElementSibling,a="true"===(null===(e=null==t?void 0:t.getAttribute("aria-expanded"))||void 0===e?void 0:e.toLowerCase());if((null==t?void 0:t.getAttribute("aria-controls"))===i.default.ids.wrapper&&(n=this.el.wrapper),(null==t?void 0:t.getAttribute("aria-controls"))&&n&&!a){t.click();var l=n.querySelector(i.default.focusable);null==l||l.focus()}}},{key:"closeClosestMenu",value:function(){var e,t,n=document.activeElement,a=null==n?void 0:n.closest(i.default.subMenu),l=(null==a?void 0:a.previousElementSibling)?a.previousElementSibling:this.el.mobileButton;(null==n?void 0:n.getAttribute("aria-controls"))&&"true"===(null===(e=null==n?void 0:n.getAttribute("aria-expanded"))||void 0===e?void 0:e.toLowerCase())&&(l=n),"true"===(null===(t=null==l?void 0:l.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase())&&(null==l||l.click(),null==l||l.focus())}},{key:"toggleClosestMenu",value:function(){var e,t;"true"===(null===(t=null===(e=document.activeElement)||void 0===e?void 0:e.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase())?this.closeClosestMenu():this.openClosestMenu()}},{key:"eHandleResize",value:function(){this.setMobileMenu()}},{key:"eHandleScroll",value:function(){this.closeAllMenus()}},{key:"eWrapTab",value:function(e){var t;"tab"!==e.key.toLowerCase()||e.shiftKey||(null===(t=this.el.mobileButton)||void 0===t||t.focus(),document.activeElement===this.el.mobileButton&&e.preventDefault())}},{key:"eHandleButtonKeypress",value:function(e){var t,n=e.target.closest("li");switch(e.key.toLowerCase()){case"escape":(null==n?void 0:n.classList.contains(i.default.classes.open))?this.setMenu(n):(this.setMobileMenu(),null===(t=this.el.menuButton)||void 0===t||t.focus());case"arrowleft":this.closeClosestMenu()}}},{key:"eHandleLinkKeypress",value:function(e){switch(e.key.toLowerCase()){case"escape":case"arrowleft":this.closeClosestMenu();break;case"arrowright":this.openClosestMenu();break;case"enter":case"space":this.toggleClosestMenu()}}},{key:"eHandleKeypress",value:function(e){"tab"!==e.key.toLowerCase()&&e.preventDefault();var t=e.target;switch(null==t?void 0:t.tagName.toLowerCase()){case"a":this.eHandleLinkKeypress(e);break;case"button":this.eHandleButtonKeypress(e)}}},{key:"eToggleMobileMenu",value:function(){this.toggleMobileMenu()}},{key:"eToggleMenu",value:function(e){this.toggleMenu(e.target)}}],n&&a(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();t.default=r},565:function(e,t){function n(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var a,l,i,o,s=this&&this.__classPrivateFieldGet||function(e,t,n,a){if("a"===n&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?a:"a"===n?a.call(e):a?a.value:t.get(e)};Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var t,r;return t=e,r=[{key:"prefix",value:function(e){return(e=e.toLowerCase()).startsWith(s(this,a,"f",l))?e:"".concat(s(this,a,"f",l)).concat(e)}},{key:"cssPrefix",value:function(e){return"--".concat(this.prefix(e.replace(/^-+/,"")))}},{key:"cssVar",value:function(e){return"var(".concat(this.cssPrefix(e),")")}},{key:"not",value:function(e){return":not(".concat(e,")")}},{key:"class",value:function(e){return".".concat(this.prefix(e))}},{key:"id",value:function(e){return"#".concat(this.prefix(e))}},{key:"controls",value:function(e){return e?'[aria-controls="'.concat(this.prefix(e),'"]'):s(this,a,"f",i)}},{key:"expanded",value:function(e){return"boolean"==typeof e?'[aria-expanded="'.concat(e,'"]'):s(this,a,"f",o)}}],null&&n(t.prototype,null),r&&n(t,r),Object.defineProperty(t,"prototype",{writable:!1}),e}();l={value:"".concat(s(a=r,a,"f",{value:"n4v"}),"-")},i={value:"[aria-controls]"},o={value:"[aria-expanded]"},r.disabled="[disabled]",r.tabbable="[tabindex]",r.hasLink="[href]",r.hasRouterLink="[routerLink]",r.hasId="[id]",r.noTab='[tabindex^="-"]',r.focusable="input".concat(a.not(a.disabled)).concat(a.not(a.noTab),",\n                                select").concat(a.not(a.disabled)).concat(a.not(a.noTab),",\n                                textarea").concat(a.not(a.disabled)).concat(a.not(a.noTab),",\n                                button").concat(a.not(a.disabled)).concat(a.not(a.noTab),",\n                                object").concat(a.not(a.disabled)).concat(a.not(a.noTab),",\n                                a").concat(a.hasLink,", a").concat(a.hasRouterLink,",\n                                area").concat(a.hasLink,",\n                                ").concat(a.tabbable).concat(a.not(a.noTab)).replace(/\s/g,""),r.subMenuButtons="button".concat(s(a,a,"f",i)),r.subMenu="".concat(a.subMenuButtons," + ul").concat(a.hasId),r.ids={header:a.prefix("header"),logo:a.prefix("logo"),wrapper:a.prefix("wrapper"),mainContent:a.prefix("main-content")},r.classes={srOnly:a.prefix("sr-only"),js:a.prefix("js"),fixed:a.prefix("fixed"),gettingHeight:a.prefix("getting-height"),anime:a.prefix("anime"),instant:a.prefix("instant"),open:a.prefix("open")},t.default=r},750:function(e,t){function n(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var a,l,i=this&&this.__classPrivateFieldGet||function(e,t,n,a){if("a"===n&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?a:"a"===n?a.call(e):a?a.value:t.get(e)};Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var t,o;return t=e,o=[{key:"set",value:function(e){var t=!1;"number"==typeof e.delayBase&&(this.delayBase=e.delayBase,t=!0),"number"==typeof e.delayStep&&(this.delayStep=e.delayStep,t=!0),t&&i(this,a,"m",l).call(this),e.delay&&Object.keys(e.delay).length&&Object.values(e.delay).reduce((function(e,t){return e&&"number"==typeof t}),!0)&&(this.delay=Object.assign(Object.assign({},this.delay),e.delay))}}],null&&n(t.prototype,null),o&&n(t,o),Object.defineProperty(t,"prototype",{writable:!1}),e}();a=o,l=function(){this.delay={instant:this.delayBase+0*this.delayStep,fast:this.delayBase+1*this.delayStep,medFast:this.delayBase+2*this.delayStep,default:this.delayBase+3*this.delayStep,medSlow:this.delayBase+4*this.delayStep,slow:this.delayBase+5*this.delayStep}},o.delayBase=0,o.delayStep=100,o.delay={instant:a.delayBase+0*a.delayStep,fast:a.delayBase+1*a.delayStep,medFast:a.delayBase+2*a.delayStep,default:a.delayBase+3*a.delayStep,medSlow:a.delayBase+4*a.delayStep,slow:a.delayBase+5*a.delayStep},t.default=o},427:function(e,t,n){function a(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var l=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var i=l(n(565)),o=l(n(750)),s=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var t,n;return t=e,n=[{key:"throttle",value:function(e){var t,n,a,l,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:o.default.delay.default,s=arguments.length>2?arguments[2]:void 0,r=0,u=function(){r=!1===(null==s?void 0:s.leading)?0:(new Date).getTime(),l=0,a=e.apply(t,n),l||(t=n=null)},d=function(){var o=(new Date).getTime();r||!1!==(null==s?void 0:s.leading)||(r=o);var d=i-o+r;return t=this,n=arguments,d<=0||d>i?(l&&(clearTimeout(l),l=0),r=o,a=e.apply(t,n),l||(t=n=null)):l||!1===(null==s?void 0:s.trailing)||(l=window.setTimeout(u,d)),a};return d}},{key:"getHeight",value:function(e){null==e||e.classList.add(i.default.classes.gettingHeight);var t=(null==e?void 0:e.scrollHeight)||0;return null==e||e.classList.remove(i.default.classes.gettingHeight),t}},{key:"slideDown",value:function(e){e&&(e.classList.add(i.default.classes.anime),e.style.height="".concat(this.getHeight(e),"px"),setTimeout((function(){e.style.height="auto",e.classList.remove(i.default.classes.anime)}),o.default.delay.default))}},{key:"slideUp",value:function(e){if(e){e.classList.add(i.default.classes.anime);var t=this.getHeight(e),n=e.style.transition;e.style.transition="",requestAnimationFrame((function(){e.style.height="".concat(t,"px"),e.style.transition=n,requestAnimationFrame((function(){e.style.height="0px"}))})),setTimeout((function(){e.classList.remove(i.default.classes.anime)}),o.default.delay.default)}}}],null&&a(t.prototype,null),n&&a(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();t.default=s},968:(e,t,n)=>{n.r(t)}},t={};function n(a){var l=t[a];if(void 0!==l)return l.exports;var i=t[a]={exports:{}};return e[a].call(i.exports,i,i.exports,n),i.exports}n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a=n(283);n4v=a.default})();
+var n4v;(()=>{"use strict";var e={762:function(e,t,n){function a(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var l=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),n(532);var i=l(n(565)),o=l(n(750)),s=l(n(427)),u=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.el={},this.attachElements(),this.attachEvents(),this.enableJavascript(),this.setMobileMenu()}var t,n;return t=e,n=[{key:"attachElements",value:function(){var e;this.el.header=document.getElementById(i.default.ids.header),this.el.mobileButton=(null===(e=this.el.header)||void 0===e?void 0:e.querySelector(i.default.controls(i.default.ids.wrapper)))||null,this.el.wrapper=document.getElementById(i.default.ids.wrapper)}},{key:"attachEvents",value:function(){var e,t,n,a=this;window.addEventListener("resize",s.default.throttle(this.eHandleResize.bind(this),o.default.delay.default,{trailing:!1})),window.addEventListener("scroll",s.default.throttle(this.eHandleScroll.bind(this),o.default.delay.default,{trailing:!1}));var l=null===(e=this.el.header)||void 0===e?void 0:e.querySelectorAll(i.default.focusable),u=null==l?void 0:l[(null==l?void 0:l.length)-1];null==u||u.addEventListener("keydown",s.default.throttle(this.eWrapTab.bind(this))),null==l||l.forEach((function(e){e.addEventListener("keydown",s.default.throttle(a.eHandleKeypress.bind(a)))}));var r=null===(t=this.el.header)||void 0===t?void 0:t.querySelectorAll(i.default.controls()+i.default.neg(i.default.controls(i.default.ids.wrapper)));null==r||r.forEach((function(e){e.addEventListener("mousedown",s.default.throttle(a.eToggleMenu.bind(a),o.default.delay.slow,{trailing:!1}))})),null===(n=this.el.mobileButton)||void 0===n||n.addEventListener("mousedown",s.default.throttle(this.eToggleMobileMenu.bind(this),o.default.delay.slow,{trailing:!1}))}},{key:"enableJavascript",value:function(){var e,t;null===(e=this.el.header)||void 0===e||e.classList.add(i.default.classes.js),null===(t=this.el.header)||void 0===t||t.classList.add(i.default.classes.fixed)}},{key:"setMobileMenu",value:function(){var e,t,n,a=this,l=arguments.length>0&&void 0!==arguments[0]&&arguments[0],s=l?"true":"false",u=l?"close menu":"open menu";null===(e=this.el.mobileButton)||void 0===e||e.setAttribute("aria-expanded",s),setTimeout((function(){var e;null===(e=a.el.mobileButton)||void 0===e||e.setAttribute("aria-label",u)}),o.default.delay.fast),l?null===(t=this.el.wrapper)||void 0===t||t.classList.add(i.default.classes.open):(null===(n=this.el.wrapper)||void 0===n||n.classList.remove(i.default.classes.open),this.closeAllMenus())}},{key:"toggleMobileMenu",value:function(){var e,t;this.setMobileMenu("false"===(null===(t=null===(e=this.el.mobileButton)||void 0===e?void 0:e.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase()))}},{key:"setMenu",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=t?"true":"false",a=null==e?void 0:e.nextElementSibling;e&&a&&(e.setAttribute("aria-expanded",n),t?s.default.show(a):(s.default.hide(a),this.closeSubMenus(e)))}},{key:"toggleMenu",value:function(e){var t;this.setMenu(e,"true"!==(null===(t=null==e?void 0:e.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase()))}},{key:"closeSubMenus",value:function(e){var t=this,n=null==e?void 0:e.nextElementSibling;(null==n?void 0:n.querySelectorAll(i.default.subMenuButtons)).forEach((function(e){var a;(null===(a=e.parentElement)||void 0===a?void 0:a.parentElement)===n&&t.setMenu(e)}))}},{key:"closeAllMenus",value:function(){var e,t=this,n=null===(e=this.el.wrapper)||void 0===e?void 0:e.querySelectorAll(i.default.subMenuButtons);null==n||n.forEach((function(e){t.setMenu(e)}))}},{key:"openClosestMenu",value:function(){var e,t=document.activeElement,n=null==t?void 0:t.nextElementSibling,a="true"===(null===(e=null==t?void 0:t.getAttribute("aria-expanded"))||void 0===e?void 0:e.toLowerCase());if((null==t?void 0:t.getAttribute("aria-controls"))===i.default.ids.wrapper&&(n=this.el.wrapper),(null==t?void 0:t.getAttribute("aria-controls"))&&n&&!a){t.click();var l=n.querySelector(i.default.focusable);null==l||l.focus()}}},{key:"closeClosestMenu",value:function(){var e,t,n=document.activeElement,a=null==n?void 0:n.closest(i.default.subMenu),l=(null==a?void 0:a.previousElementSibling)?a.previousElementSibling:this.el.mobileButton;(null==n?void 0:n.getAttribute("aria-controls"))&&"true"===(null===(e=null==n?void 0:n.getAttribute("aria-expanded"))||void 0===e?void 0:e.toLowerCase())&&(l=n),"true"===(null===(t=null==l?void 0:l.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase())&&(null==l||l.click(),null==l||l.focus())}},{key:"toggleClosestMenu",value:function(){var e,t;"true"===(null===(t=null===(e=document.activeElement)||void 0===e?void 0:e.getAttribute("aria-expanded"))||void 0===t?void 0:t.toLowerCase())?this.closeClosestMenu():this.openClosestMenu()}},{key:"eHandleResize",value:function(){this.setMobileMenu()}},{key:"eHandleScroll",value:function(){this.closeAllMenus()}},{key:"eWrapTab",value:function(e){var t;"tab"!==e.key.toLowerCase()||e.shiftKey||(null===(t=this.el.mobileButton)||void 0===t||t.focus(),document.activeElement===this.el.mobileButton&&e.preventDefault())}},{key:"eHandleButtonKeypress",value:function(e){var t,n=e.target.closest("li");switch(e.key.toLowerCase()){case"escape":(null==n?void 0:n.classList.contains(i.default.classes.open))?this.setMenu(n):(this.setMobileMenu(),null===(t=this.el.menuButton)||void 0===t||t.focus());case"arrowleft":this.closeClosestMenu()}}},{key:"eHandleLinkKeypress",value:function(e){switch(e.key.toLowerCase()){case"escape":case"arrowleft":this.closeClosestMenu();break;case"arrowright":this.openClosestMenu();break;case"enter":case"space":this.toggleClosestMenu()}}},{key:"eHandleKeypress",value:function(e){"tab"!==e.key.toLowerCase()&&e.preventDefault();var t=e.target;switch(null==t?void 0:t.tagName.toLowerCase()){case"a":this.eHandleLinkKeypress(e);break;case"button":this.eHandleButtonKeypress(e)}}},{key:"eToggleMobileMenu",value:function(){this.toggleMobileMenu()}},{key:"eToggleMenu",value:function(e){this.toggleMenu(e.target)}}],n&&a(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();t.default=u},565:(e,t)=>{function n(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var a;Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var t,a;return t=e,a=[{key:"prefix",value:function(e){return(e=e.toLowerCase()).startsWith(this.pre)?e:"".concat(this.pre).concat(e)}},{key:"cssPrefix",value:function(e){return"--".concat(this.prefix(e.replace(/^-+/,"")))}},{key:"cssVar",value:function(e){return"var(".concat(this.cssPrefix(e),")")}},{key:"neg",value:function(e){return":not(".concat(e,")")}},{key:"class",value:function(e){return".".concat(this.prefix(e))}},{key:"id",value:function(e){return"#".concat(this.prefix(e))}},{key:"controls",value:function(e){return e?'[aria-controls="'.concat(this.prefix(e),'"]'):this.hasControls}},{key:"expanded",value:function(e){return"boolean"==typeof e?'[aria-expanded="'.concat(e,'"]'):this.hasExpanded}}],null&&n(t.prototype,null),a&&n(t,a),Object.defineProperty(t,"prototype",{writable:!1}),e}();t.default=l,a=l,l.lib="n4v",l.pre="".concat(a.lib,"-"),l.disabled="[disabled]",l.hasControls="[aria-controls]",l.hasExpanded="[aria-expanded]",l.hasLink="[href]",l.hasRouterLink="[routerLink]",l.hasId="[id]",l.notTabbable='[tabindex^="-"]',l.tabbable="[tabindex]".concat(a.neg(a.notTabbable)),l.focusable="input".concat(a.neg(a.disabled)).concat(a.neg(a.notTabbable),",\n                                select").concat(a.neg(a.disabled)).concat(a.neg(a.notTabbable),",\n                                textarea").concat(a.neg(a.disabled)).concat(a.neg(a.notTabbable),",\n                                button").concat(a.neg(a.disabled)).concat(a.neg(a.notTabbable),",\n                                object").concat(a.neg(a.disabled)).concat(a.neg(a.notTabbable),",\n                                a").concat(a.hasLink,", a").concat(a.hasRouterLink,",\n                                area").concat(a.hasLink,",\n                                ").concat(a.tabbable).replace(/\s/g,""),l.subMenuButtons="button".concat(a.hasControls),l.subMenu="".concat(a.subMenuButtons," + ul").concat(a.hasId),l.ids={header:a.prefix("header"),logo:a.prefix("logo"),wrapper:a.prefix("wrapper"),mainContent:a.prefix("main-content")},l.classes={srOnly:a.prefix("sr-only"),js:a.prefix("js"),fixed:a.prefix("fixed"),gettingHeight:a.prefix("getting-height"),anime:a.prefix("anime"),instant:a.prefix("instant"),open:a.prefix("open")}},750:(e,t)=>{function n(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var a;Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var t,a;return t=e,a=[{key:"set",value:function(e){var t=!1;"number"==typeof e.delayBase&&(this.delayBase=e.delayBase,t=!0),"number"==typeof e.delayStep&&(this.delayStep=e.delayStep,t=!0),t&&this.setDelay(),e.delay&&Object.keys(e.delay).length&&Object.values(e.delay).reduce((function(e,t){return e&&"number"==typeof t}),!0)&&(this.delay=Object.assign(Object.assign({},this.delay),e.delay))}},{key:"setDelay",value:function(){this.delay={instant:this.delayBase+0*this.delayStep,fast:this.delayBase+1*this.delayStep,medFast:this.delayBase+2*this.delayStep,default:this.delayBase+3*this.delayStep,medSlow:this.delayBase+4*this.delayStep,slow:this.delayBase+5*this.delayStep}}}],null&&n(t.prototype,null),a&&n(t,a),Object.defineProperty(t,"prototype",{writable:!1}),e}();t.default=l,a=l,l.delayBase=0,l.delayStep=100,l.delay={instant:a.delayBase+0*a.delayStep,fast:a.delayBase+1*a.delayStep,medFast:a.delayBase+2*a.delayStep,default:a.delayBase+3*a.delayStep,medSlow:a.delayBase+4*a.delayStep,slow:a.delayBase+5*a.delayStep}},427:function(e,t,n){function a(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var l=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var i=l(n(565)),o=l(n(750)),s=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var t,n;return t=e,n=[{key:"throttle",value:function(e){var t,n,a,l,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:o.default.delay.default,s=arguments.length>2?arguments[2]:void 0,u=0,r=function(){u=!1===(null==s?void 0:s.leading)?0:(new Date).getTime(),l=0,a=e.apply(t,n),l||(t=n=null)},d=function(){var o=(new Date).getTime();u||!1!==(null==s?void 0:s.leading)||(u=o);var d=i-o+u;return t=this,n=arguments,d<=0||d>i?(l&&(clearTimeout(l),l=0),u=o,a=e.apply(t,n),l||(t=n=null)):l||!1===(null==s?void 0:s.trailing)||(l=window.setTimeout(r,d)),a};return d}},{key:"getHeight",value:function(e){null==e||e.classList.add(i.default.classes.gettingHeight);var t=(null==e?void 0:e.scrollHeight)||0;return null==e||e.classList.remove(i.default.classes.gettingHeight),t}},{key:"show",value:function(e){e&&(e.classList.add(i.default.classes.anime),e.style.height="".concat(this.getHeight(e),"px"),setTimeout((function(){e.style.height="auto",e.classList.remove(i.default.classes.anime)}),o.default.delay.default))}},{key:"hide",value:function(e){if(e){e.classList.add(i.default.classes.anime);var t=this.getHeight(e),n=e.style.transition;e.style.transition="",requestAnimationFrame((function(){e.style.height="".concat(t,"px"),e.style.transition=n,requestAnimationFrame((function(){e.style.height="0px"}))})),setTimeout((function(){e.classList.remove(i.default.classes.anime)}),o.default.delay.default)}}}],null&&a(t.prototype,null),n&&a(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();t.default=s},532:(e,t,n)=>{n.r(t)}},t={};function n(a){var l=t[a];if(void 0!==l)return l.exports;var i=t[a]={exports:{}};return e[a].call(i.exports,i,i.exports,n),i.exports}n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a=n(762);n4v=a.default})();

package.json

 {
   "name": "@sunderapps/n4v",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Navigation 4 Virtuosos - Accessible, Responsive Navbars",
@@ -10,5 +10,11 @@ "main": "./src/main.ts",
   "scripts": {
-    "build": "webpack",
-    "watch": "webpack --watch",
-    "serve": "webpack serve",
+    "build": "npm run build:dev && npm run build:prod && npm run build:docs",
+    "build:dev": "webpack --config webpack.dev.ts",
+    "build:prod": "webpack --config webpack.prod.ts",
+    "build:docs": "typedoc",
+    "watch": "npm run watch:dev",
+    "watch:dev": "webpack --watch --config webpack.dev.ts",
+    "watch:prod": "webpack --watch --config webpack.prod.ts",
+    "watch:docs": "typedoc --watch",
+    "serve": "webpack serve --config webpack.dev.ts",
     "test": "karma start test/karma.conf.js"
@@ -55,6 +61,8 @@ },
     "ts-node": "^10.8.1",
+    "typedoc": "^0.23.2",
     "typescript": "^4.7.3",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.9.2"
+    "webpack-dev-server": "^4.9.2",
+    "webpack-merge": "^5.8.0"
   },
@@ -61,0 +69,0 @@ "publishConfig": {

README.md

@@ -9,4 +9,6 @@ # n4v - An accessible, responsive navbar library
 
-## Getting Started - Development
+## Development
 
+### Getting Started
+
 1. Install <sup>7</sup>[NodeJS](https://nodejs.org/en/docs/) and <sup>8</sup>[NPM](https://docs.npmjs.com/) [here](https://nodejs.org/en/download/).
@@ -40,7 +42,99 @@ 2. Install <sup>15</sup>[git](https://git-scm.com/doc) [here](https://git-scm.com/downloads) or <sup>18</sup>[GitHub Desktop here](https://desktop.github.com/).
 
-## Getting Started - Usage
+### Operations
 
+#### Branching
+
+ - Branch from `origin/prod`.
+ - Name your branch either:
+    - `feature/descriptive-feature-name`
+    - `bugfix/descriptive-bugfix-name`
+  - Create pull requests with `origin/dev` when it's ready for testing.
+  - Create pull requests with `origin/prod` when it's stable.
+
+#### Publishing
+
+ - Publish from `origin/prod`.
+ - Ensure the version number has been updated in `package.json`.
+ - Set `isDev` to `false` in `webpack.config.ts` and save.
+ - Build prod:
+
+```powershell
+PS C:\proj\n4v> npm run build
+```
+
+ - Set `isDev` to `true` in `webpack.config.ts` and save.
+ - Build dev:
+
+```powershell
+PS C:\proj\n4v> npm run build
+```
+
+ - Publish to <sup>8</sup>[NPM](https://docs.npmjs.com/).
+
+```powershell
+PS C:\proj\n4v> npm publish
+```
+
+ - Commit the new `dist` files and `package.json`.
+
+```powershell
+PS C:\proj\n4v> git add -A
+PS C:\proj\n4v> git commit -m "Descriptive commit message"
+PS C:\proj\n4v> git push
+```
+
+### Guidelines
+
+#### General
+
+ - File names should be lowercase (besides README, LICENSE, etc.)
+
+#### SCSS
+
+ - CSS variables go in `/src/scss/css-var.scss` and should be included with `@use`.
+ - Global styles go in `/src/scss/global.scss` and should be included with `@use`.
+ - Base styles go in `/src/scss/n4v.scss` and should be included with `@use`.
+ - Theme styles go in `/src/scss/theme.scss` and should be included with `@use`.
+ - SCSS variables go in `/src/scss/var.scss` and should be included with `@import`.
+ - Use the variables, functions, and mixins in `/src/scss/var.scss` to generate selectors and css variable references with a prefix.
+   - To use these SCSS helpers, import the file: `@import 'var';`
+   - Mixins:
+     - `@include css-var(height, 50px)` &rarr; `--n4v-height: 50px;`
+     - `@include css-var-ref(width, height)` &rarr; `--n4v-width: var(--n4v-height);`
+   - Functions:
+	   - `css-var(height)` &rarr; `var(--n4v-height)` // NOTE: No string interpolation
+	   - `#{neg(something)}` &rarr; `not(something)` // NOTE: Doesn't add the prefix
+	   - `#{class(open)}` &rarr; `.n4v-open`
+	   - `#{id(logo)}` &rarr; `#n4v-logo`
+	   - `#{controls(wrapper)}` &rarr; `[controls=n4v-wrapper]`
+	   - `#{expanded(true)}` &rarr; `[aria-expanded=true]`
+	   - `ms(100)` &rarr; `100ms`
+	   - `px(100)` &rarr; `100px`
+	   - `strip-unit(100px)` &rarr; `100`
+
+#### TypeScript
+
+ - Main functionality goes in `/src/ts/n4vbar.ts`.
+ - CSS selector tools go in `/src/ts/selectors.ts`.  Should be similar to `/src/scss/var.scss`.
+ - Variable setting tools go in `/src/ts/settings.ts`.
+ - Utility functions go in `/src/ts/util.ts`.
+ - New classes should be:
+   - Prefixed with 'n4v' and PascalCase after that.  `E.g. n4vClassName`.
+   - Exported as default in the file that defines them.  `I.e. export default n4vClassName;`.
+   - Imported and exported in `/src/main.ts`.
+ - Event functions should be:
+   - Prefixed with a lowercase 'e'.  `E.g. eHandleEvent()`.
+   - Attached using `Function.bind(this)`.
+   - Attached using the `n4vUtil.throttle()` function.
+     - The default timeout is `n4vSettings.delay.default`.
+     - The default options are `{ leading: true, trailing: true }`.
+   - Casted `as EventListenerOrEventListenerObject`.
+
+## Usage
+
+### Getting Started
+
 ### Vanilla HTML / CSS / JavaScript
 
-### HTML / SCSS / JavaScript
+### HTML / SCSS / JavaScript with WebPack
 
@@ -69,3 +163,3 @@ ### HTML / SCSS / TypeScript
  - <sup>8</sup>[NPM](https://docs.npmjs.com/)
- - <sup>9</sup>[Webpack](https://webpack.js.org/guides/)
+ - <sup>9</sup>[WebPack](https://webpack.js.org/guides/)
  - <sup>10</sup>[Babel](https://babeljs.io/docs/en/)
@@ -72,0 +166,0 @@

src/main.ts

@@ -0,1 +1,14 @@
+/**
+ * A library for responsive, accessible navbars.
+ * 
+ * @remarks
+ * The n4v library is a responsive, mobile-first, WCAG compliant, 
+ * disclosure design pattern navbar Typescript library for web apps.
+ * 
+ * @packageDocumentation
+ */
+
+/**
+ * Imports
+ */
 import n4vBar from "./ts/n4vbar";
@@ -5,3 +18,6 @@ import n4vSelectors from './ts/selectors';
 
+/**
+ * Exports
+ */
 export { n4vBar, n4vSelectors, n4vSettings };
 export default n4vBar;

src/ts/n4vbar.ts

@@ -0,1 +1,4 @@
+/**
+ * Imports
+ */
 import '../scss/n4v.scss';
@@ -7,6 +10,15 @@
 
-class n4vBar {
+/**
+ * Main n4vbar functionality
+ * @public
+ */
+export default class n4vBar {
+    /**
+     * Frequently-referenced elements
+     */
     el: {[key: string]: HTMLElement | null} = {};
 
-    // Initializers
+    /**
+     * Initializes and closes the menu
+     */
     constructor () {
@@ -20,2 +32,5 @@ this.attachElements();
 
+    /**
+     * Adds elements to {@link el | `this.el`}
+     */
     attachElements () : void {
@@ -27,2 +42,5 @@ this.el.header = document.getElementById(n4vSelectors.ids.header);
 
+    /**
+     * Adds events to the dom
+     */
     attachEvents () : void {
@@ -39,3 +57,3 @@ window.addEventListener('resize', n4vUtil.throttle(this.eHandleResize.bind(this), n4vSettings.delay.default, { trailing: false }) as EventListenerOrEventListenerObject);
 
-        let menuButtons: NodeListOf<HTMLElement> | undefined = this.el.header?.querySelectorAll(n4vSelectors.controls() + n4vSelectors.not(n4vSelectors.controls(n4vSelectors.ids.wrapper)));
+        let menuButtons: NodeListOf<HTMLElement> | undefined = this.el.header?.querySelectorAll(n4vSelectors.controls() + n4vSelectors.neg(n4vSelectors.controls(n4vSelectors.ids.wrapper)));
         menuButtons?.forEach((menuButton: HTMLElement) => {
@@ -48,2 +66,5 @@ menuButton.addEventListener('mousedown', n4vUtil.throttle(this.eToggleMenu.bind(this), n4vSettings.delay.slow, { trailing: false }) as EventListenerOrEventListenerObject);
 
+    /**
+     * Adds classes that inform the styles that javascript is enabled
+     */
     enableJavascript () : void {
@@ -54,3 +75,6 @@ this.el.header?.classList.add(n4vSelectors.classes.js);
 
-    // Functionality
+    /**
+     * Sets the state of the mobile menu
+     * @param open - `true` to open the menu or `false` to close it
+     */
     setMobileMenu (open: boolean = false) : void {
@@ -73,2 +97,5 @@ let ariaExpanded: string = open ? 'true' : 'false',
 
+    /**
+     * Toggles the state of the mobile menu
+     */
     toggleMobileMenu () : void {
@@ -78,2 +105,7 @@ this.setMobileMenu(this.el.mobileButton?.getAttribute('aria-expanded')?.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
+     */
     setMenu (button?: HTMLElement | null,
@@ -86,5 +118,5 @@ open: boolean = false) : void {
             if (open) {
-                n4vUtil.slideDown(menu);
+                n4vUtil.show(menu);
             } else {
-                n4vUtil.slideUp(menu);
+                n4vUtil.hide(menu);
                 this.closeSubMenus(button);
@@ -95,7 +127,15 @@ }
 
-    toggleMenu (button?: HTMLElement | null) {
+    /**
+     * Toggles the state of the provided button's menu
+     * @param button - Button element to toggle
+     */
+    toggleMenu (button?: HTMLElement | null) : void {
         this.setMenu(button, button?.getAttribute('aria-expanded')?.toLowerCase() !== 'true');
     }
 
-    closeSubMenus (button?: HTMLElement | null) {
+    /**
+     * Closes all submenus of the provided button's menu
+     * @param button - Button element of the parent menu
+     */
+    closeSubMenus (button?: HTMLElement | null) : void {
         let menu: HTMLElement | null | undefined = button?.nextElementSibling as HTMLElement,
@@ -111,2 +151,5 @@ subMenus: NodeListOf<HTMLElement> = menu?.querySelectorAll(n4vSelectors.subMenuButtons) as NodeListOf<HTMLElement>;
 
+    /**
+     * Closes all submenus of the n4vbar
+     */
     closeAllMenus () : void {
@@ -119,2 +162,5 @@ let menuButtons: NodeListOf<HTMLElement> | undefined = this.el.wrapper?.querySelectorAll(n4vSelectors.subMenuButtons);
 
+    /**
+     * Opens the menu closest to the document's focus
+     */
     openClosestMenu () : void {
@@ -135,2 +181,5 @@ let activeButton: HTMLElement | null = document.activeElement as HTMLElement | null,
 
+    /**
+     * Closes the menu closest to the document's focus
+     */
     closeClosestMenu () : void {
@@ -150,2 +199,5 @@ let activeElement: HTMLElement | null = document.activeElement as HTMLElement | null,
 
+    /**
+     * Toggles the menu closest to the document's focus
+     */
     toggleClosestMenu () : void {
@@ -159,3 +211,5 @@ if (document.activeElement?.getAttribute('aria-expanded')?.toLowerCase() === 'true') {
 
-    // Events
+    /**
+     * Closes the mobile menu when the window resizes
+     */
     eHandleResize () : void {
@@ -165,2 +219,5 @@ this.setMobileMenu();
 
+    /**
+     * Closes all submenus when the page is scrolled
+     */
     eHandleScroll () : void {
@@ -170,2 +227,6 @@ this.closeAllMenus();
 
+    /**
+     * Sends the focus to the menu button after tabbing past the last menu item
+     * @param e - Keyboard event
+     */
     eWrapTab (e: KeyboardEvent) : void {
@@ -180,2 +241,6 @@ if (e.key.toLowerCase() === 'tab' && !e.shiftKey) {
 
+    /**
+     * Handles keypresses on n4vbar buttons
+     * @param e - Keyboard event
+     */
     eHandleButtonKeypress (e: KeyboardEvent) : void {
@@ -203,2 +268,6 @@ let target = e.target as HTMLElement,
 
+    /**
+     * Handles keypresses on n4vbar links
+     * @param e - Keyboard event
+     */
     eHandleLinkKeypress (e: KeyboardEvent) : void {
@@ -220,2 +289,6 @@ switch (e.key.toLowerCase()) {
 
+    /**
+     * Handles keypresses on the n4vbar
+     * @param e - Keyboard event
+     */
     eHandleKeypress (e: KeyboardEvent) : void {
@@ -236,2 +309,5 @@ if (e.key.toLowerCase() !== 'tab') {
 
+    /**
+     * Toggles the mobile menu
+     */
     eToggleMobileMenu () : void {
@@ -241,7 +317,9 @@ this.toggleMobileMenu();
 
+    /**
+     * Toggles the clicked submenu
+     * @param e - Mouse event
+     */
     eToggleMenu (e: MouseEvent) : void {
         this.toggleMenu(e.target as HTMLElement | null);
     }
-}
-
-export default n4vBar;
+}

src/ts/selectors.ts

@@ -1,22 +0,80 @@
-class n4vSelectors {
-    static #lib: string = 'n4v';
-    static #pre: string = `${this.#lib}-`;
-    static #controls: string = '[aria-controls]';
-    static #expanded: string = '[aria-expanded]';
+/**
+ * CSS-selector helpers
+ */
+export default abstract class n4vSelectors {
+    /**
+     * The library name that will be added as a prefix
+     */
+    static lib: string = 'n4v';
+
+    /**
+     * The prefix built from the library name
+     */
+    static pre: string = `${this.lib}-`;
+
+    /**
+     * CSS-selector for disabled elements
+     */
     static disabled: string = '[disabled]';
-    static tabbable: string = '[tabindex]';
+
+    /**
+     * CSS-selector for elements with an aria-controls attribute
+     */
+    static hasControls: string = '[aria-controls]';
+
+    /**
+     * CSS-selector for elements with an aria-expanded attribute
+     */
+    static hasExpanded: string = '[aria-expanded]';
+
+    /**
+     * CSS-selector for elements with an href attribute
+     */
     static hasLink: string = '[href]';
+
+    /**
+     * CSS-selector for elements with a routerLink attribute
+     */
     static hasRouterLink: string = '[routerLink]';
+
+    /**
+     * CSS-selector for elements with an id attribute
+     */
     static hasId: string = '[id]';
-    static noTab: string = '[tabindex^="-"]';
-    static focusable: string = `input${this.not(this.disabled)}${this.not(this.noTab)},
-                                select${this.not(this.disabled)}${this.not(this.noTab)},
-                                textarea${this.not(this.disabled)}${this.not(this.noTab)},
-                                button${this.not(this.disabled)}${this.not(this.noTab)},
-                                object${this.not(this.disabled)}${this.not(this.noTab)},
+
+    /**
+     * CSS-selector for elements that aren't tabbable (i.e. tabindex is negative)
+     */
+    static notTabbable: string = '[tabindex^="-"]';
+
+    /**
+     * CSS-selector for elements that are tabbable (i.e. tabindex isn't negative)
+     */
+    static tabbable: string = `[tabindex]${this.neg(this.notTabbable)}`;
+
+    /**
+     * CSS-selector for elements that can receive focus
+     */
+    static focusable: string = `input${this.neg(this.disabled)}${this.neg(this.notTabbable)},
+                                select${this.neg(this.disabled)}${this.neg(this.notTabbable)},
+                                textarea${this.neg(this.disabled)}${this.neg(this.notTabbable)},
+                                button${this.neg(this.disabled)}${this.neg(this.notTabbable)},
+                                object${this.neg(this.disabled)}${this.neg(this.notTabbable)},
                                 a${this.hasLink}, a${this.hasRouterLink},
                                 area${this.hasLink},
-                                ${this.tabbable}${this.not(this.noTab)}`.replace(/\s/g, '');
-    static subMenuButtons: string = `button${this.#controls}`;
+                                ${this.tabbable}`.replace(/\s/g, '');
+
+    /**
+     * CSS-selector for submenu buttons
+     */
+    static subMenuButtons: string = `button${this.hasControls}`;
+
+    /**
+     * CSS-selector for submenus
+     */
     static subMenu: string = `${this.subMenuButtons} + ul${this.hasId}`;
+
+    /**
+     * Frequently-used ids
+     */
     static ids: {[key: string]: string} = {
@@ -28,2 +86,6 @@ header: this.prefix('header'),
     };
+
+    /**
+     * Frequently-used classes
+     */
     static classes: {[key: string]: string} = {
@@ -39,7 +101,17 @@ srOnly: this.prefix('sr-only'),
 
+    /**
+     * 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: string) : string {
         base = base.toLowerCase();
-        return base.startsWith(this.#pre) ? base : `${this.#pre}${base}`;
+        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
+     */
     static cssPrefix (base: string) : string {
@@ -49,2 +121,7 @@ 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
+     */
     static cssVar (base: string) : string {
@@ -54,6 +131,16 @@ return `var(${this.cssPrefix(base)})`;
 
-    static not (base: string) : string {
+    /**
+     * Negates the provided CSS selector
+     * @param base - the CSS selector to negate
+     * @returns - the negated CSS selector
+     */
+    static neg (base: string) : string {
         return `:not(${base})`;
     }
 
+    /**
+     * Generates a class CSS selector
+     * @param base - the name of the class to generate
+     * @returns - the generated CSS selector
+     */
     static class (base: string) : string {
@@ -63,2 +150,7 @@ return `.${this.prefix(base)}`;
 
+    /**
+     * Generates an id CSS selector
+     * @param base - the name of the id to generate
+     * @returns - the generated CSS selector
+     */
     static id (base: string) : string {
@@ -68,11 +160,19 @@ return `#${this.prefix(base)}`;
 
+    /**
+     * Generates an aria-controls CSS selector
+     * @param id - the id of the controlled element
+     * @returns - the generated CSS selector
+     */
     static controls (id?: string | null) : string {
-        return id ? `[aria-controls="${this.prefix(id)}"]` : this.#controls;
+        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
+     */
     static expanded (bool?: boolean | null) : string {
-        return typeof bool === 'boolean' ? `[aria-expanded="${bool}"]` : this.#expanded;
+        return typeof bool === 'boolean' ? `[aria-expanded="${bool}"]` : this.hasExpanded;
     }
-}
-
-export default n4vSelectors;
+}

src/ts/settings.ts

@@ -1,4 +0,19 @@
-class n4vSettings {
+/**
+ * Settings management
+ * @public
+ */
+export default abstract class n4vSettings {
+    /**
+     * Value added to all delay variables
+     */
     static delayBase: number = 0;
+
+    /**
+     * Value multiplied by delay variable index
+     */
     static delayStep: number = 100;
+
+    /**
+     * Delay variables
+     */
     static delay: {[key: string]: number} = {
@@ -13,2 +28,6 @@ instant: this.delayBase + this.delayStep * 0,
 
+    /**
+     * Update the provided settings variables
+     * @param settings - Object of settings variables to update
+     */
     static set (settings: {[key: string]: any}) : void {
@@ -25,3 +44,3 @@ let newDelay: boolean = false;
         if (newDelay) {
-            this.#setDelay();
+            this.setDelay();
         }
@@ -36,3 +55,6 @@
 
-    static #setDelay () : void {
+    /**
+     * Updates the delay variables based on `this.delayBase` and `this.delayStep`
+     */
+    private static setDelay () : void {
         this.delay = {
@@ -47,4 +69,2 @@ instant: this.delayBase + this.delayStep * 0,
     }
-}
-
-export default n4vSettings;
+}

src/ts/util.ts

@@ -0,5 +1,19 @@
+/**
+ * Imports
+ */
 import n4vSelectors from "./selectors";
 import n4vSettings from "./settings";
 
-class n4vUtil {
+/**
+ * Utility function
+ * @public
+ */
+export default abstract class n4vUtil {
+    /**
+     * 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: Function,
@@ -45,2 +59,7 @@ wait: number = n4vSettings.delay.default,
 
+    /**
+     * Gets the height in pixels of the provided element
+     * @param el - the element whose height will be measured
+     * @returns - the height of the provided element in pixels
+     */
     static getHeight (el?: HTMLElement | null) : number {
@@ -53,3 +72,7 @@ el?.classList.add(n4vSelectors.classes.gettingHeight);
 
-    static slideDown (el?: HTMLElement | null) : void {
+    /**
+     * Sets the element's height to its `innerHeight`, then to `auto` after a delay
+     * @param el - the element whose height will be set
+     */
+    static show (el?: HTMLElement | null) : void {
         if (el) {
@@ -65,3 +88,7 @@ el.classList.add(n4vSelectors.classes.anime);
 
-    static slideUp (el?: HTMLElement | null) : void {
+    /**
+     * Sets the element's height to 0
+     * @param el - the element whose height will be set
+     */
+    static hide (el?: HTMLElement | null) : void {
         if (el) {
@@ -84,4 +111,2 @@ el.classList.add(n4vSelectors.classes.anime);
     }
-}
-
-export default n4vUtil;
+}

tsconfig.json

@@ -102,3 +102,11 @@ {
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+  },
+  "typedocOptions": {
+    "entryPoints": [
+      "./src/main.ts"
+    ],
+    "includeVersion": true,
+    "json": "docs/typedoc.json",
+    "pretty": false
   }
 }

webpack.config.ts

 import path from 'path';
 import webpack from 'webpack';
-import devServer from 'webpack-dev-server';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 
-const isDev: boolean = true;
-const min: string = isDev ? '' : '.min';
-
 const babelConfig = {
@@ -21,14 +17,5 @@ presets: [
 
-const serverConfig: devServer.Configuration = {
-    static: {
-        directory: path.join(__dirname, 'dist'),
-    },
-    compress: true,
-    port: 42069
-};
-
 const config: webpack.Configuration = {
-    mode: isDev ? 'development' : 'production',
     entry: {
-        n4v: './src/ts/n4vBar.ts',
+        n4v: './src/ts/n4vbar.ts',
         theme: './src/scss/theme.scss'
@@ -38,4 +25,2 @@ },
         path: path.resolve(__dirname, './dist'),
-        filename: `js/[name]${min}.js`,
-        chunkFilename: `js/[name].[chunkhash].chunk.${min}.js`,
         library: {
@@ -78,12 +63,6 @@ name: 'n4v',
                     {
-                        loader: 'css-loader',
-                        options: {
-                            sourceMap: isDev
-                        }
+                        loader: 'css-loader'
                     },
                     {
-                        loader: "sass-loader",
-                        options: {
-                            sourceMap: isDev
-                        }
+                        loader: "sass-loader"
                     }
@@ -95,6 +74,2 @@ ]
     plugins: [
-        new MiniCssExtractPlugin({
-            filename: `css/[name]${min}.css`,
-            chunkFilename: `css/[name].[chunkhash].chunk.${min}.css`
-        }),
         new CopyWebpackPlugin({
@@ -108,6 +83,5 @@ patterns: [
         extensions: ['.ts', 'tsx', '.js'],
-    },
-    devServer: serverConfig
+    }
 }
 
 export default config;

No alert changes

Improved metrics

Total package byte prevSize

163265

increased by46.61%

Lines of code

1290

increased by32.31%

Number of lines in readme file

184

increased by104.44%

Worsened metrics

Dev dependency count

26

increased by8.33%

No dependency changes