@appartmint/mint 2.5.0 → 2.6.1

package/dist/js/index.js

@@ -15,7 +15,7 @@ __webpack_require__.r(__webpack_exports__);
  */
 /**
  * Attaches Events
- * @description Extended by classes that attach and detach events
+ * @remarks Extended by classes that attach and detach events
  */
 class MintAttachesEvents {
     /**
@@ -118,14 +118,14 @@ class MintGrid {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   MintHeader: () => (/* binding */ MintHeader),
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */   MintHeader: () => (/* binding */ MintHeader)
 /* harmony export */ });
-/* harmony import */ var _enums_side__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../enums/side */ "./src/ts/imports/enums/side.ts");
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../util */ "./src/ts/imports/util/index.ts");
+/* harmony import */ var _panel__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./panel */ "./src/ts/imports/components/panel.ts");
+/* harmony import */ var _menu__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./menu */ "./src/ts/imports/components/menu.ts");
 /**
  * Imports
  */
+// Mint
 
 
 /**
@@ -137,7 +137,9 @@ class MintHeader {
      * Navbar settings
      */
     settings = {
-        from: _enums_side__WEBPACK_IMPORTED_MODULE_0__.EMintSide.Top,
+        id: 'mint-menu',
+        wrapperId: 'mint-wrapper',
+        title: 'menu',
         fixed: true
     };
     /**
@@ -145,396 +147,42 @@ class MintHeader {
      */
     el = {};
     /**
-     * Event handlers
+     * Navigation functionality
      */
-    events = [];
+    panel;
+    menu;
     /**
      * Initializes and closes the menu
      */
     constructor(settings) {
         this.settings = { ...this.settings, ...settings };
+        this.panel = new _panel__WEBPACK_IMPORTED_MODULE_0__.MintPanel(this.settings);
+        this.menu = new _menu__WEBPACK_IMPORTED_MODULE_1__.MintMenu(this.settings);
         this.attachElements();
-        this.attachEvents();
         this.addClasses();
     }
     /**
-     * Destroys the header
+     * Detach events
      */
-    destroy() {
-        console.log('npm destroy', this.events);
-        this.events.forEach(event => {
-            event.handlers.forEach((handler, index) => {
-                event.el?.removeEventListener(event.events[index], handler);
-            });
-        });
-        this.events = [];
+    detachEvents() {
+        this.panel?.detachEvents();
+        this.menu?.detachEvents();
     }
     /**
      * Adds elements to {@link el | `this.el`}
      */
     attachElements() {
-        this.el.html = document.querySelector('html');
         this.el.body = document.querySelector('body');
-        this.el.header = document.getElementById('mint-header');
-        this.el.mobileButton = this.el.header?.querySelector(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.controls('mint-wrapper')) || null;
-        this.el.wrapper = document.getElementById('mint-wrapper');
-        this.el.main = document.getElementsByTagName('main')[0];
-    }
-    /**
-     * Attach event to the given element
-     * @param element - Element to attach event to
-     * @param event - Event to attach
-     * @param handler - Handler to attach
-     */
-    attachEvent(element, event, handler) {
-        if (element) {
-            let oldElement = this.events.find(e => e.el === element);
-            if (oldElement) {
-                oldElement.handlers.push(handler);
-                oldElement.events.push(event);
-            }
-            else {
-                this.events.push({
-                    el: element,
-                    handlers: [handler],
-                    events: [event]
-                });
-            }
-            element.addEventListener(event, handler);
-        }
-    }
-    /**
-     * Adds events to the dom
-     */
-    attachEvents() {
-        this.attachEvent(window, 'resize', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleResize.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default));
-        this.attachEvent(window, 'scroll', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleScroll.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default, { trailing: false }));
-        this.attachEvent(this.el.main, 'click', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eCloseMobileMenu.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default, { trailing: false }));
-        let focusables = this.el.header?.querySelectorAll(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.focusable), lastFocusable = focusables?.[focusables?.length - 1];
-        this.attachEvent(lastFocusable, 'keydown', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eWrapTab.bind(this)));
-        focusables?.forEach((focusable) => {
-            this.attachEvent(focusable, 'keydown', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleKeypress.bind(this)));
-        });
-        let menuButtons = this.el.wrapper?.querySelectorAll(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.controls());
-        menuButtons?.forEach((menuButton) => {
-            this.attachEvent(menuButton, 'click', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eToggleMenu.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.slow, { trailing: false }));
-        });
-        this.attachEvent(this.el.mobileButton, 'click', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eToggleMobileMenu.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.slow, { trailing: false }));
-        this.attachEvent(this.el.wrapper, 'transitionend', this.eTransitionEnd.bind(this));
     }
     /**
      * Adds classes that inform the styles based on settings
      */
     addClasses() {
-        this.el.header?.classList.remove('mint-top', 'mint-right', 'mint-bottom', 'mint-left');
-        this.el.header?.classList.add(`mint-${_enums_side__WEBPACK_IMPORTED_MODULE_0__.EMintSide[this.settings.from ?? 0].toLowerCase()}`);
         if (this.settings.fixed) {
             this.el.body?.classList.add('mint-fixed');
         }
-        if (this.settings.tray) {
-            this.el.header?.classList.add('mint-tray');
-        }
-    }
-    /**
-     * Sets the state of the mobile menu
-     * @param open - `true` to open the menu or `false` to close it
-     */
-    setMobileMenu(open = false) {
-        let ariaExpanded = open ? 'true' : 'false', ariaLabel = open ? 'close menu' : 'open menu';
-        this.el.mobileButton?.setAttribute('aria-expanded', ariaExpanded);
-        setTimeout(() => {
-            this.el.mobileButton?.setAttribute('aria-label', ariaLabel);
-        }, _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.fast);
-        if (open) {
-            if (this.settings.fixed !== true) {
-                window.scroll({
-                    top: 0,
-                    left: 0,
-                    behavior: 'smooth'
-                });
-            }
-            setTimeout(() => {
-                if (this.el.html) {
-                    let isMobile = _util__WEBPACK_IMPORTED_MODULE_1__.MintWindow.width() <= _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.break.sm, overflow = 'auto';
-                    if (this.settings.tray) {
-                        if (isMobile) {
-                            overflow = 'hidden';
-                        }
-                    }
-                    else {
-                        overflow = 'hidden';
-                    }
-                    this.el.html.style.overflow = overflow;
-                }
-            }, this.settings.from === _enums_side__WEBPACK_IMPORTED_MODULE_0__.EMintSide.Left ? _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default : _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.instant);
-            if (this.el.wrapper) {
-                this.el.wrapper.style.display = 'flex';
-            }
-            requestAnimationFrame(() => {
-                this.el.wrapper?.classList.add('mint-open');
-            });
-        }
-        else {
-            if (this.el.html) {
-                this.el.html.style.overflow = 'auto';
-            }
-            requestAnimationFrame(() => {
-                this.el.wrapper?.classList.remove('mint-open');
-            });
-            this.closeAllMenus();
-        }
-    }
-    /**
-     * Toggles the state of the mobile menu
-     */
-    toggleMobileMenu() {
-        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, open = false) {
-        let ariaExpanded = open ? 'true' : 'false', menu = button?.nextElementSibling;
-        if (button && menu) {
-            button.setAttribute('aria-expanded', ariaExpanded);
-            if (open) {
-                _util__WEBPACK_IMPORTED_MODULE_1__.MintDisplay.show(menu);
-            }
-            else {
-                _util__WEBPACK_IMPORTED_MODULE_1__.MintDisplay.hide(menu);
-                this.closeSubMenus(button);
-            }
-        }
-    }
-    /**
-     * Toggles the state of the provided button's menu
-     * @param button - Button element to toggle
-     */
-    toggleMenu(button) {
-        this.setMenu(button, button?.getAttribute('aria-expanded')?.toLowerCase() !== 'true');
-    }
-    /**
-     * Closes all submenus of the provided button's menu
-     * @param button - Button element of the parent menu
-     */
-    closeSubMenus(button) {
-        let menu = button?.nextElementSibling, subMenus = menu?.querySelectorAll(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.subMenuButtons);
-        subMenus.forEach((child) => {
-            // setMenu calls this function, so ignore subsub menus
-            if (child.parentElement?.parentElement === menu) {
-                this.setMenu(child);
-            }
-        });
-    }
-    /**
-     * Closes all sibling menus of the provided button's menu
-     * @param button - Button element of the sibling menus
-     */
-    closeSiblingMenus(button) {
-        let menu = button?.parentElement, siblingMenus = menu?.parentElement?.querySelectorAll(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.subMenuButtons);
-        siblingMenus.forEach((child) => {
-            if (child !== button) {
-                this.setMenu(child);
-            }
-        });
-    }
-    /**
-     * Closes all submenus of the n4vbar
-     */
-    closeAllMenus() {
-        let menuButtons = this.el.wrapper?.querySelectorAll(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.subMenuButtons);
-        menuButtons?.forEach((menuButton) => {
-            this.setMenu(menuButton);
-        });
-    }
-    /**
-     * Opens the menu closest to the document's focus
-     */
-    openClosestMenu() {
-        let activeButton = document.activeElement, activeMenu = activeButton?.nextElementSibling, showing = activeButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true';
-        if (activeButton?.getAttribute('aria-controls') === 'mint-wrapper') {
-            activeMenu = this.el.wrapper;
-        }
-        if (activeButton?.getAttribute('aria-controls') && activeMenu && !showing) {
-            activeButton.click();
-            let firstFocusable = activeMenu.querySelector(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.focusable);
-            firstFocusable?.focus();
-        }
-    }
-    /**
-     * Closes the menu closest to the document's focus
-     */
-    closeClosestMenu() {
-        let activeElement = document.activeElement, activeMenu = activeElement?.closest(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.subMenu), activeButton = activeMenu?.previousElementSibling ? activeMenu.previousElementSibling : this.el.mobileButton;
-        if (activeElement?.getAttribute('aria-controls') && activeElement?.getAttribute('aria-expanded')?.toLowerCase() === 'true') {
-            activeButton = activeElement;
-        }
-        if (activeButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true') {
-            activeButton?.click();
-            activeButton?.focus();
-        }
-    }
-    /**
-     * Toggles the menu closest to the document's focus
-     */
-    toggleClosestMenu() {
-        if (document.activeElement?.getAttribute('aria-expanded')?.toLowerCase() === 'true') {
-            this.closeClosestMenu();
-        }
-        else {
-            this.openClosestMenu();
-        }
-    }
-    /**
-     * Closes the mobile menu when the window resizes
-     */
-    eHandleResize() {
-        const isMobile = _util__WEBPACK_IMPORTED_MODULE_1__.MintWindow.width() <= _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.break.sm;
-        let closeMenu = true;
-        if (this.el.header?.classList.contains('mint-tray')) {
-            closeMenu = false;
-        }
-        else if (!this.el.header?.classList.contains('mint-expand')) {
-            closeMenu = false;
-        }
-        if (!isMobile && closeMenu) {
-            this.setMobileMenu(false);
-        }
-        const isOpen = this.el.mobileButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true';
-        let overflow = 'auto';
-        if (isOpen) {
-            if (this.settings.tray) {
-                if (isMobile) {
-                    overflow = 'hidden';
-                }
-            }
-            else {
-                overflow = 'hidden';
-            }
-        }
-        if (this.el.html) {
-            this.el.html.style.overflow = overflow;
-        }
-    }
-    /**
-     * Closes all submenus when the page is scrolled
-     */
-    eHandleScroll() {
-        this.closeAllMenus();
-    }
-    /**
-     * Sends the focus to the menu button after tabbing past the last menu item
-     * @param e - Keyboard event
-     */
-    eWrapTab(e) {
-        if (e.key.toLowerCase() === 'tab' && !e.shiftKey) {
-            this.el.mobileButton?.focus();
-            if (document.activeElement === this.el.mobileButton) {
-                e.preventDefault();
-            }
-        }
-    }
-    /**
-     * Handles keypresses on n4vbar buttons
-     * @param e - Keyboard event
-     */
-    eHandleButtonKeypress(e) {
-        let target = e.target, subMenu = target?.closest('li');
-        switch (e.key.toLowerCase()) {
-            case 'escape':
-                if (subMenu?.classList.contains('mint-open')) {
-                    this.setMenu(subMenu);
-                }
-                else {
-                    this.setMobileMenu();
-                    this.el.menuButton?.focus();
-                }
-                break;
-            case 'arrowleft':
-                this.closeClosestMenu();
-                break;
-            case 'arrowright':
-                this.openClosestMenu();
-                break;
-            case 'enter':
-            case 'space':
-                target?.click();
-                break;
-        }
-    }
-    /**
-     * Handles keypresses on n4vbar links
-     * @param e - Keyboard event
-     */
-    eHandleLinkKeypress(e) {
-        let target = e.target;
-        switch (e.key.toLowerCase()) {
-            case 'escape':
-            case 'arrowleft':
-                this.closeClosestMenu();
-                break;
-            case 'arrowright':
-                this.openClosestMenu();
-                break;
-            case 'enter':
-            case 'space':
-                target?.click();
-                break;
-        }
     }
-    /**
-     * Handles keypresses on the n4vbar
-     * @param e - Keyboard event
-     */
-    eHandleKeypress(e) {
-        if (e.key.toLowerCase() !== 'tab') {
-            e.preventDefault();
-        }
-        const target = e.target;
-        switch (target?.tagName.toLowerCase()) {
-            case 'a':
-                this.eHandleLinkKeypress(e);
-                break;
-            case 'button':
-                this.eHandleButtonKeypress(e);
-                break;
-        }
-    }
-    /**
-     * Toggles the mobile menu
-     */
-    eToggleMobileMenu() {
-        this.toggleMobileMenu();
-    }
-    /**
-     * Closes the mobile menu
-     */
-    eCloseMobileMenu() {
-        this.setMobileMenu(false);
-    }
-    /**
-     * Toggles the clicked submenu
-     * @param e - Mouse event
-     */
-    eToggleMenu(e) {
-        let target = e.target;
-        this.closeSiblingMenus(target);
-        this.toggleMenu(target);
-    }
-    /**
-     * Runs after the mobile menu transitions
-     */
-    eTransitionEnd() {
-        if (this.el.wrapper?.classList.contains('mint-open') === false) {
-            this.el.wrapper.style.display = 'none';
-        }
-    }
-    ;
 }
-;
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MintHeader);
 
 
 /***/ }),
@@ -550,12 +198,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   MintGrid: () => (/* reexport safe */ _grid__WEBPACK_IMPORTED_MODULE_0__.MintGrid),
 /* harmony export */   MintHeader: () => (/* reexport safe */ _header__WEBPACK_IMPORTED_MODULE_1__.MintHeader),
 /* harmony export */   MintMenu: () => (/* reexport safe */ _menu__WEBPACK_IMPORTED_MODULE_2__.MintMenu),
-/* harmony export */   MintTray: () => (/* reexport safe */ _tray__WEBPACK_IMPORTED_MODULE_3__.MintTray)
+/* harmony export */   MintPanel: () => (/* reexport safe */ _panel__WEBPACK_IMPORTED_MODULE_3__.MintPanel)
 /* harmony export */ });
 /* harmony import */ var _grid__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./grid */ "./src/ts/imports/components/grid.ts");
 /* harmony import */ var _header__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./header */ "./src/ts/imports/components/header.ts");
 /* harmony import */ var _menu__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./menu */ "./src/ts/imports/components/menu.ts");
-/* harmony import */ var _tray__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./tray */ "./src/ts/imports/components/tray.ts");
+/* harmony import */ var _panel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./panel */ "./src/ts/imports/components/panel.ts");
 /**
  * Forward all exports from the components directory
  */
@@ -813,15 +461,15 @@ class MintMenu extends _abstract__WEBPACK_IMPORTED_MODULE_0__.MintAttachesEvents
 
 /***/ }),
 
-/***/ "./src/ts/imports/components/tray.ts":
-/*!*******************************************!*\
-  !*** ./src/ts/imports/components/tray.ts ***!
-  \*******************************************/
+/***/ "./src/ts/imports/components/panel.ts":
+/*!********************************************!*\
+  !*** ./src/ts/imports/components/panel.ts ***!
+  \********************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   MintTray: () => (/* binding */ MintTray)
+/* harmony export */   MintPanel: () => (/* binding */ MintPanel)
 /* harmony export */ });
 /* harmony import */ var _enums_side__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../enums/side */ "./src/ts/imports/enums/side.ts");
 /* harmony import */ var _abstract__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../abstract */ "./src/ts/imports/abstract/index.ts");
@@ -833,15 +481,15 @@ __webpack_require__.r(__webpack_exports__);
 
 
 /**
- * Tray (sidebar) functionality
+ * Panel (sidebar) functionality
  * @public
  */
-class MintTray extends _abstract__WEBPACK_IMPORTED_MODULE_1__.MintAttachesEvents {
+class MintPanel extends _abstract__WEBPACK_IMPORTED_MODULE_1__.MintAttachesEvents {
     /**
-     * Tray settings
+     * Panel settings
      */
     settings = {
-        title: 'tray',
+        title: 'panel',
         from: _enums_side__WEBPACK_IMPORTED_MODULE_0__.EMintSide.Top,
         fixed: true
     };
@@ -850,19 +498,19 @@ class MintTray extends _abstract__WEBPACK_IMPORTED_MODULE_1__.MintAttachesEvents
      */
     el = {};
     /**
-     * Initializes and closes the tray
+     * Initializes and closes the panel
      */
     constructor(settings) {
         super();
         this.settings = { ...this.settings, ...settings };
         if (!this.settings.id || !this.settings.wrapperId) {
-            throw new Error('Tray ID and wrapper ID are required');
+            throw new Error('Panel ID and wrapper ID are required');
         }
         this.attachElements();
         this.attachEvents();
         this.addClasses();
         requestAnimationFrame(() => {
-            this.setTray();
+            this.setPanel();
         });
     }
     /**
@@ -871,9 +519,9 @@ class MintTray extends _abstract__WEBPACK_IMPORTED_MODULE_1__.MintAttachesEvents
     attachElements() {
         this.el.html = document.querySelector('html');
         this.el.main = document.querySelector('main');
-        this.el.tray = document.getElementById(this.settings.id);
+        this.el.panel = document.getElementById(this.settings.id);
         this.el.wrapper = document.getElementById(this.settings.wrapperId);
-        this.el.toggleButton = this.el.tray?.querySelector(_util__WEBPACK_IMPORTED_MODULE_2__.MintSelectors.controls(this.settings.wrapperId)) || null;
+        this.el.toggleButton = this.el.panel?.querySelector(_util__WEBPACK_IMPORTED_MODULE_2__.MintSelectors.controls(this.settings.wrapperId)) || null;
     }
     /**
      * Adds events to the dom
@@ -881,45 +529,43 @@ class MintTray extends _abstract__WEBPACK_IMPORTED_MODULE_1__.MintAttachesEvents
     attachEvents() {
         this.attachEvent(window, 'resize', _util__WEBPACK_IMPORTED_MODULE_2__.MintEvent.throttleEvent(this.eHandleResize.bind(this), _util__WEBPACK_IMPORTED_MODULE_2__.MintSettings.delay.default));
         this.attachEvent(this.el.main, 'click', _util__WEBPACK_IMPORTED_MODULE_2__.MintEvent.throttleEvent(this.eClose.bind(this), _util__WEBPACK_IMPORTED_MODULE_2__.MintSettings.delay.default, { trailing: false }));
-        const focusables = _util__WEBPACK_IMPORTED_MODULE_2__.MintSelectors.getFocusables(this.el.tray);
+        this.attachEvent(this.el.wrapper, 'transitionend', this.eTransitionEnd.bind(this));
+        const focusables = _util__WEBPACK_IMPORTED_MODULE_2__.MintSelectors.getFocusables(this.el.panel);
         focusables?.forEach(focusable => {
             this.attachEvent(focusable, 'keydown', _util__WEBPACK_IMPORTED_MODULE_2__.MintEvent.throttleEvent(this.eWrapTab.bind(this)));
         });
-        this.attachEvent(this.el.toggleButton, 'click', _util__WEBPACK_IMPORTED_MODULE_2__.MintEvent.throttleEvent(this.eToggle.bind(this), _util__WEBPACK_IMPORTED_MODULE_2__.MintSettings.delay.slow, { trailing: false }));
-        this.attachEvent(this.el.wrapper, 'transitionend', this.eTransitionEnd.bind(this));
+        const toggleButtons = this.el.panel?.querySelectorAll(_util__WEBPACK_IMPORTED_MODULE_2__.MintSelectors.controls(this.settings.wrapperId));
+        toggleButtons?.forEach(toggleButton => {
+            this.attachEvent(toggleButton, 'click', _util__WEBPACK_IMPORTED_MODULE_2__.MintEvent.throttleEvent(this.eToggle.bind(this), _util__WEBPACK_IMPORTED_MODULE_2__.MintSettings.delay.slow, { trailing: false }));
+        });
     }
     /**
      * Adds classes that inform the styles based on settings
      */
     addClasses() {
+        this.el.panel?.classList.add('mint-panel');
+        this.el.wrapper?.classList.add('mint-panel-wrapper');
+        this.el.toggleButton?.classList.add('mint-panel-toggle');
         if (this.settings.from) {
-            this.el.tray?.classList.remove('mint-top', 'mint-right', 'mint-bottom', 'mint-left');
-            this.el.tray?.classList.add(`mint-${_enums_side__WEBPACK_IMPORTED_MODULE_0__.EMintSide[this.settings.from].toLowerCase()}`);
-        }
-        else {
-            if (!this.el.tray?.classList.contains('mint-top')
-                && !this.el.tray?.classList.contains('mint-bottom')
-                && !this.el.tray?.classList.contains('mint-left')
-                && !this.el.tray?.classList.contains('mint-right')) {
-                this.el.tray?.classList.add('mint-top');
-            }
+            this.el.panel?.classList.remove('mint-top', 'mint-right', 'mint-bottom', 'mint-left');
+            this.el.panel?.classList.add(`mint-${_enums_side__WEBPACK_IMPORTED_MODULE_0__.EMintSide[this.settings.from].toLowerCase()}`);
         }
         if (this.settings.tray) {
-            this.el.tray?.classList.add('mint-tray');
+            this.el.panel?.classList.add('mint-tray');
         }
     }
     /**
-     * Sets the state of the tray
-     * @param open - `true` to open the tray or `false` to close it
+     * Sets the state of the panel
+     * @param open - `true` to open the panel or `false` to close it
      */
-    setTray(open = false) {
+    setPanel(open = false) {
         let ariaExpanded = open ? 'true' : 'false', ariaLabel = open ? `close ${this.settings.title}` : `open ${this.settings.title}`;
         this.el.toggleButton?.setAttribute('aria-expanded', ariaExpanded);
         setTimeout(() => {
             this.el.toggleButton?.setAttribute('aria-label', ariaLabel);
         }, _util__WEBPACK_IMPORTED_MODULE_2__.MintSettings.delay.fast);
         if (open) {
-            // Close other trays
+            this.closeOtherPanels();
             if (this.settings.fixed !== true) {
                 window.scroll({
                     top: 0,
@@ -958,25 +604,33 @@ class MintTray extends _abstract__WEBPACK_IMPORTED_MODULE_1__.MintAttachesEvents
         }
     }
     /**
-     * Toggles the state of the tray
+     * Toggles the state of the panel
+     */
+    togglePanel() {
+        this.setPanel(this.el.toggleButton?.getAttribute('aria-expanded')?.toLowerCase() === 'false');
+    }
+    /**
+     * Closes other panels
      */
-    toggleTray() {
-        this.setTray(this.el.toggleButton?.getAttribute('aria-expanded')?.toLowerCase() === 'false');
+    closeOtherPanels() {
+        const openPanelSelector = `.mint-panel-toggle[aria-expanded="true"]:not([aria-controls="${this.settings.wrapperId}"])`;
+        const toggleBtn = document.querySelector(openPanelSelector);
+        toggleBtn?.click();
     }
     /**
-     * Closes the tray when the window resizes
+     * Closes the panel when the window resizes
      */
     eHandleResize() {
         const isMobile = _util__WEBPACK_IMPORTED_MODULE_2__.MintWindow.width() <= _util__WEBPACK_IMPORTED_MODULE_2__.MintSettings.break.sm;
         let closeMenu = true;
-        if (this.el.tray?.classList.contains('mint-tray')) {
+        if (this.el.panel?.classList.contains('mint-tray')) {
             closeMenu = false;
         }
-        else if (!this.el.tray?.classList.contains('mint-expand')) {
+        else if (!this.el.panel?.classList.contains('mint-expand')) {
             closeMenu = false;
         }
         if (!isMobile && closeMenu) {
-            this.setTray(false);
+            this.setPanel(false);
         }
         const isOpen = this.el.toggleButton?.getAttribute('aria-expanded')?.toLowerCase() === 'true';
         let overflow = 'auto';
@@ -999,7 +653,7 @@ class MintTray extends _abstract__WEBPACK_IMPORTED_MODULE_1__.MintAttachesEvents
      * @param e - Keyboard event
      */
     eWrapTab(e) {
-        const focusables = _util__WEBPACK_IMPORTED_MODULE_2__.MintSelectors.getFocusables(this.el.tray), lastFocusable = focusables?.[focusables?.length - 1], wrapTab = focusables?.length > 1 && document.activeElement === lastFocusable, isTab = e.key.toLowerCase() === 'tab' && !e.shiftKey;
+        const focusables = _util__WEBPACK_IMPORTED_MODULE_2__.MintSelectors.getFocusables(this.el.panel), lastFocusable = focusables?.[focusables?.length - 1], wrapTab = focusables?.length > 1 && document.activeElement === lastFocusable, isTab = e.key.toLowerCase() === 'tab' && !e.shiftKey;
         if (isTab && wrapTab) {
             this.el.toggleButton?.focus();
             if (document.activeElement === this.el.toggleButton) {
@@ -1008,19 +662,19 @@ class MintTray extends _abstract__WEBPACK_IMPORTED_MODULE_1__.MintAttachesEvents
         }
     }
     /**
-     * Toggles the tray
+     * Toggles the panel
      */
     eToggle() {
-        this.toggleTray();
+        this.togglePanel();
     }
     /**
-     * Closes the tray
+     * Closes the panel
      */
     eClose() {
-        this.setTray(false);
+        this.setPanel(false);
     }
     /**
-     * Runs after the tray transitions
+     * Runs after the panel transitions
      */
     eTransitionEnd() {
         if (this.el.wrapper?.classList.contains('mint-open') === false) {
@@ -1097,11 +751,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   MintMath: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintMath),
 /* harmony export */   MintMenu: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_1__.MintMenu),
 /* harmony export */   MintObject: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintObject),
+/* harmony export */   MintPanel: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_1__.MintPanel),
 /* harmony export */   MintScroll: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintScroll),
 /* harmony export */   MintSelectors: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintSelectors),
 /* harmony export */   MintSettings: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintSettings),
 /* harmony export */   MintText: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintText),
-/* harmony export */   MintTray: () => (/* reexport safe */ _components__WEBPACK_IMPORTED_MODULE_1__.MintTray),
 /* harmony export */   MintWindow: () => (/* reexport safe */ _util__WEBPACK_IMPORTED_MODULE_4__.MintWindow),
 /* harmony export */   mintColor: () => (/* reexport safe */ _models__WEBPACK_IMPORTED_MODULE_3__.mintColor)
 /* harmony export */ });
@@ -2693,11 +2347,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   MintMath: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintMath),
 /* harmony export */   MintMenu: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintMenu),
 /* harmony export */   MintObject: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintObject),
+/* harmony export */   MintPanel: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintPanel),
 /* harmony export */   MintScroll: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintScroll),
 /* harmony export */   MintSelectors: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintSelectors),
 /* harmony export */   MintSettings: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintSettings),
 /* harmony export */   MintText: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintText),
-/* harmony export */   MintTray: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintTray),
 /* harmony export */   MintWindow: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.MintWindow),
 /* harmony export */   mintColor: () => (/* reexport safe */ _imports__WEBPACK_IMPORTED_MODULE_0__.mintColor)
 /* harmony export */ });
@@ -2727,13 +2381,13 @@ var __webpack_exports__MintList = __webpack_exports__.MintList;
 var __webpack_exports__MintMath = __webpack_exports__.MintMath;
 var __webpack_exports__MintMenu = __webpack_exports__.MintMenu;
 var __webpack_exports__MintObject = __webpack_exports__.MintObject;
+var __webpack_exports__MintPanel = __webpack_exports__.MintPanel;
 var __webpack_exports__MintScroll = __webpack_exports__.MintScroll;
 var __webpack_exports__MintSelectors = __webpack_exports__.MintSelectors;
 var __webpack_exports__MintSettings = __webpack_exports__.MintSettings;
 var __webpack_exports__MintText = __webpack_exports__.MintText;
-var __webpack_exports__MintTray = __webpack_exports__.MintTray;
 var __webpack_exports__MintWindow = __webpack_exports__.MintWindow;
 var __webpack_exports__mintColor = __webpack_exports__.mintColor;
-export { __webpack_exports__EMintSide as EMintSide, __webpack_exports__MintAsync as MintAsync, __webpack_exports__MintAttachesEvents as MintAttachesEvents, __webpack_exports__MintDisplay as MintDisplay, __webpack_exports__MintEvent as MintEvent, __webpack_exports__MintGrid as MintGrid, __webpack_exports__MintHeader as MintHeader, __webpack_exports__MintIcon as MintIcon, __webpack_exports__MintItem as MintItem, __webpack_exports__MintList as MintList, __webpack_exports__MintMath as MintMath, __webpack_exports__MintMenu as MintMenu, __webpack_exports__MintObject as MintObject, __webpack_exports__MintScroll as MintScroll, __webpack_exports__MintSelectors as MintSelectors, __webpack_exports__MintSettings as MintSettings, __webpack_exports__MintText as MintText, __webpack_exports__MintTray as MintTray, __webpack_exports__MintWindow as MintWindow, __webpack_exports__mintColor as mintColor };
+export { __webpack_exports__EMintSide as EMintSide, __webpack_exports__MintAsync as MintAsync, __webpack_exports__MintAttachesEvents as MintAttachesEvents, __webpack_exports__MintDisplay as MintDisplay, __webpack_exports__MintEvent as MintEvent, __webpack_exports__MintGrid as MintGrid, __webpack_exports__MintHeader as MintHeader, __webpack_exports__MintIcon as MintIcon, __webpack_exports__MintItem as MintItem, __webpack_exports__MintList as MintList, __webpack_exports__MintMath as MintMath, __webpack_exports__MintMenu as MintMenu, __webpack_exports__MintObject as MintObject, __webpack_exports__MintPanel as MintPanel, __webpack_exports__MintScroll as MintScroll, __webpack_exports__MintSelectors as MintSelectors, __webpack_exports__MintSettings as MintSettings, __webpack_exports__MintText as MintText, __webpack_exports__MintWindow as MintWindow, __webpack_exports__mintColor as mintColor };
 
 //# sourceMappingURL=index.js.map