@materializecss/materialize 2.1.1 → 2.2.1

package/dist/js/materialize.mjs

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.1.1 (https://materializeweb.com)
+* Materialize v2.2.1 (https://materializeweb.com)
 * Copyright 2014-2024 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -23,7 +23,7 @@ class Utils {
         ARROW_DOWN: ['ArrowDown', 'Down'],
         ARROW_LEFT: ['ArrowLeft', 'Left'],
         ARROW_RIGHT: ['ArrowRight', 'Right'],
-        DELETE: ['Delete', 'Del'],
+        DELETE: ['Delete', 'Del']
     };
     /**
      * Detects when a key is pressed.
@@ -49,6 +49,8 @@ class Utils {
      * Detects when document is focused.
      * @param e Event instance.
      */
+    /* eslint-disabled as of required event type condition check */
+    /* eslint-disable-next-line */
     static docHandleFocus(e) {
         if (Utils.keyDown) {
             document.body.classList.add('keyboard-focused');
@@ -58,6 +60,8 @@ class Utils {
      * Detects when document is not focused.
      * @param e Event instance.
      */
+    /* eslint-disabled as of required event type condition check */
+    /* eslint-disable-next-line */
     static docHandleBlur(e) {
         document.body.classList.remove('keyboard-focused');
     }
@@ -79,21 +83,21 @@ class Utils {
      * @param offset Element offset.
      */
     static checkWithinContainer(container, bounding, offset) {
-        let edges = {
+        const edges = {
             top: false,
             right: false,
             bottom: false,
             left: false
         };
-        let containerRect = container.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
         // If body element is smaller than viewport, use viewport height instead.
-        let containerBottom = container === document.body
+        const containerBottom = container === document.body
             ? Math.max(containerRect.bottom, window.innerHeight)
             : containerRect.bottom;
-        let scrollLeft = container.scrollLeft;
-        let scrollTop = container.scrollTop;
-        let scrolledX = bounding.left - scrollLeft;
-        let scrolledY = bounding.top - scrollTop;
+        const scrollLeft = container.scrollLeft;
+        const scrollTop = container.scrollTop;
+        const scrolledX = bounding.left - scrollLeft;
+        const scrolledY = bounding.top - scrollTop;
         // Check for container and viewport for each edge
         if (scrolledX < containerRect.left + offset || scrolledX < offset) {
             edges.left = true;
@@ -119,7 +123,7 @@ class Utils {
      * @param offset Element offset.
      */
     static checkPossibleAlignments(el, container, bounding, offset) {
-        let canAlign = {
+        const canAlign = {
             top: true,
             right: true,
             bottom: true,
@@ -129,16 +133,16 @@ class Utils {
             spaceOnBottom: null,
             spaceOnLeft: null
         };
-        let containerAllowsOverflow = getComputedStyle(container).overflow === 'visible';
-        let containerRect = container.getBoundingClientRect();
-        let containerHeight = Math.min(containerRect.height, window.innerHeight);
-        let containerWidth = Math.min(containerRect.width, window.innerWidth);
-        let elOffsetRect = el.getBoundingClientRect();
-        let scrollLeft = container.scrollLeft;
-        let scrollTop = container.scrollTop;
-        let scrolledX = bounding.left - scrollLeft;
-        let scrolledYTopEdge = bounding.top - scrollTop;
-        let scrolledYBottomEdge = bounding.top + elOffsetRect.height - scrollTop;
+        const containerAllowsOverflow = getComputedStyle(container).overflow === 'visible';
+        const containerRect = container.getBoundingClientRect();
+        const containerHeight = Math.min(containerRect.height, window.innerHeight);
+        const containerWidth = Math.min(containerRect.width, window.innerWidth);
+        const elOffsetRect = el.getBoundingClientRect();
+        const scrollLeft = container.scrollLeft;
+        const scrollTop = container.scrollTop;
+        const scrolledX = bounding.left - scrollLeft;
+        const scrolledYTopEdge = bounding.top - scrollTop;
+        const scrolledYBottomEdge = bounding.top + elOffsetRect.height - scrollTop;
         // Check for container and viewport for left
         canAlign.spaceOnRight = !containerAllowsOverflow
             ? containerWidth - (scrolledX + bounding.width)
@@ -187,7 +191,6 @@ class Utils {
     static getDocumentScrollTop() {
         return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
     }
-    ;
     /**
      * Retrieves document scroll postion from left.
      */
@@ -200,24 +203,20 @@ class Utils {
      * @param wait Wait time.
      * @param options Additional options.
      */
-    static throttle(func, wait, options = null) {
-        let context, args, result;
-        let timeout = null;
-        let previous = 0;
-        options || (options = {});
-        let later = function () {
+    static throttle(func, wait, options = {}) {
+        let context, args, result, timeout = null, previous = 0;
+        const later = () => {
             previous = options.leading === false ? 0 : new Date().getTime();
             timeout = null;
             result = func.apply(context, args);
             context = args = null;
         };
-        return function () {
-            let now = new Date().getTime();
+        return (...args) => {
+            const now = new Date().getTime();
             if (!previous && options.leading === false)
                 previous = now;
-            let remaining = wait - (now - previous);
+            const remaining = wait - (now - previous);
             context = this;
-            args = arguments;
             if (remaining <= 0) {
                 clearTimeout(timeout);
                 timeout = null;
@@ -254,7 +253,7 @@ class Component {
             console.error(Error(el + ' is not an HTML Element'));
         }
         // If exists, destroy and reinitialize in child
-        let ins = classDef.getInstance(el);
+        const ins = classDef.getInstance(el);
         if (!!ins) {
             ins.destroy();
         }
@@ -282,21 +281,26 @@ class Component {
     /**
      * @returns default options for component instance.
      */
-    static get defaults() { return {}; }
+    static get defaults() {
+        return {};
+    }
     /**
      * Retrieves component instance for the given element.
      * @param el Associated HTML Element.
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     static getInstance(el) {
-        throw new Error("This method must be implemented.");
+        throw new Error('This method must be implemented.');
     }
     /**
      * Destroy plugin instance and teardown.
      */
-    destroy() { throw new Error("This method must be implemented."); }
+    destroy() {
+        throw new Error('This method must be implemented.');
+    }
 }
 
-const _defaults$l = {
+const _defaults$m = {
     alignment: 'left',
     autoFocus: true,
     constrainWidth: true,
@@ -329,7 +333,7 @@ class Dropdown extends Component {
     filterTimeout;
     constructor(el, options) {
         super(el, options, Dropdown);
-        this.el.M_Dropdown = this;
+        this.el['M_Dropdown'] = this;
         Dropdown._dropdowns.push(this);
         this.id = Utils.getIdFromTrigger(el);
         this.dropdownEl = document.getElementById(this.id);
@@ -342,13 +346,14 @@ class Dropdown extends Component {
         this.isTouchMoving = false;
         this.focusedIndex = -1;
         this.filterQuery = [];
+        this.el.ariaExpanded = 'false';
         // Move dropdown-content after dropdown-trigger
         this._moveDropdown();
         this._makeDropdownFocusable();
         this._setupEventHandlers();
     }
     static get defaults() {
-        return _defaults$l;
+        return _defaults$m;
     }
     /**
      * Initializes instances of Dropdown.
@@ -359,13 +364,13 @@ class Dropdown extends Component {
         return super.init(els, options, Dropdown);
     }
     static getInstance(el) {
-        return el.M_Dropdown;
+        return el['M_Dropdown'];
     }
     destroy() {
         this._resetDropdownStyles();
         this._removeEventHandlers();
         Dropdown._dropdowns.splice(Dropdown._dropdowns.indexOf(this), 1);
-        this.el.M_Dropdown = undefined;
+        this.el['M_Dropdown'] = undefined;
     }
     _setupEventHandlers() {
         // Trigger keydown handler
@@ -409,6 +414,7 @@ class Dropdown extends Component {
     }
     _handleClick = (e) => {
         e.preventDefault();
+        this._moveDropdown(e.target.closest('li'));
         if (this.isOpen) {
             this.close();
         }
@@ -416,7 +422,8 @@ class Dropdown extends Component {
             this.open();
         }
     };
-    _handleMouseEnter = () => {
+    _handleMouseEnter = (e) => {
+        this._moveDropdown(e.target.closest('li'));
         this.open();
     };
     _handleMouseLeave = (e) => {
@@ -424,9 +431,7 @@ class Dropdown extends Component {
         const leaveToDropdownContent = !!toEl.closest('.dropdown-content');
         let leaveToActiveDropdownTrigger = false;
         const closestTrigger = toEl.closest('.dropdown-trigger');
-        if (closestTrigger &&
-            !!closestTrigger.M_Dropdown &&
-            closestTrigger.M_Dropdown.isOpen) {
+        if (closestTrigger && !!closestTrigger['M_Dropdown'] && closestTrigger['M_Dropdown'].isOpen) {
             leaveToActiveDropdownTrigger = true;
         }
         // Close hover dropdown if mouse did not leave to either active dropdown-trigger or dropdown-content
@@ -436,9 +441,7 @@ class Dropdown extends Component {
     };
     _handleDocumentClick = (e) => {
         const target = e.target;
-        if (this.options.closeOnClick &&
-            target.closest('.dropdown-content') &&
-            !this.isTouchMoving) {
+        if (this.options.closeOnClick && target.closest('.dropdown-content') && !this.isTouchMoving) {
             // isTouchMoving to check if scrolling on mobile.
             this.close();
         }
@@ -525,12 +528,17 @@ class Dropdown extends Component {
         // CASE WHEN USER TYPE LTTERS
         const keyText = e.key.toLowerCase();
         const isLetter = /[a-zA-Z0-9-_]/.test(keyText);
-        const specialKeys = [...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP, ...Utils.keys.ENTER, ...Utils.keys.ESC, ...Utils.keys.TAB];
+        const specialKeys = [
+            ...Utils.keys.ARROW_DOWN,
+            ...Utils.keys.ARROW_UP,
+            ...Utils.keys.ENTER,
+            ...Utils.keys.ESC,
+            ...Utils.keys.TAB
+        ];
         if (isLetter && !specialKeys.includes(e.key)) {
             this.filterQuery.push(keyText);
             const string = this.filterQuery.join('');
-            const newOptionEl = Array.from(this.dropdownEl.querySelectorAll('li'))
-                .find((el) => el.innerText.toLowerCase().indexOf(string) === 0);
+            const newOptionEl = Array.from(this.dropdownEl.querySelectorAll('li')).find((el) => el.innerText.toLowerCase().indexOf(string) === 0);
             if (newOptionEl) {
                 this.focusedIndex = [...newOptionEl.parentNode.children].indexOf(newOptionEl);
                 this._focusFocusedItem();
@@ -538,7 +546,7 @@ class Dropdown extends Component {
         }
         this.filterTimeout = setTimeout(this._resetFilterQuery, 1000);
     };
-    _handleWindowResize = (e) => {
+    _handleWindowResize = () => {
         // Only re-place the dropdown if it's still visible
         // Accounts for elements hiding via media queries
         if (this.el.offsetParent) {
@@ -550,13 +558,16 @@ class Dropdown extends Component {
     };
     _resetDropdownStyles() {
         this.dropdownEl.style.display = '';
+        this._resetDropdownPositioningStyles();
+        this.dropdownEl.style.transform = '';
+        this.dropdownEl.style.opacity = '';
+    }
+    _resetDropdownPositioningStyles() {
         this.dropdownEl.style.width = '';
         this.dropdownEl.style.height = '';
         this.dropdownEl.style.left = '';
         this.dropdownEl.style.top = '';
         this.dropdownEl.style.transformOrigin = '';
-        this.dropdownEl.style.transform = '';
-        this.dropdownEl.style.opacity = '';
     }
     // Move dropdown after container or trigger
     _moveDropdown(containerEl = null) {
@@ -575,7 +586,7 @@ class Dropdown extends Component {
     _makeDropdownFocusable() {
         if (!this.dropdownEl)
             return;
-        this.dropdownEl.popover = "";
+        this.dropdownEl.popover = '';
         // Needed for arrow key navigation
         this.dropdownEl.tabIndex = 0;
         // Only set tabindex if it hasn't been set by user
@@ -599,7 +610,7 @@ class Dropdown extends Component {
         }
     }
     _getDropdownPosition(closestOverflowParent) {
-        this.el.offsetParent.getBoundingClientRect();
+        // const offsetParentBRect = this.el.offsetParent.getBoundingClientRect();
         const triggerBRect = this.el.getBoundingClientRect();
         const dropdownBRect = this.dropdownEl.getBoundingClientRect();
         let idealHeight = dropdownBRect.height;
@@ -683,7 +694,7 @@ class Dropdown extends Component {
         this.dropdownEl.style.opacity = '0';
         this.dropdownEl.style.transform = 'scale(0.3, 0.3)';
         setTimeout(() => {
-            // easeOutQuad (opacity) & easeOutQuint    
+            // easeOutQuad (opacity) & easeOutQuint
             this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
             // to
             this.dropdownEl.style.opacity = '1';
@@ -698,7 +709,7 @@ class Dropdown extends Component {
     }
     _animateOut() {
         const duration = this.options.outDuration;
-        // easeOutQuad (opacity) & easeOutQuint    
+        // easeOutQuad (opacity) & easeOutQuint
         this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
         // to
         this.dropdownEl.style.opacity = '0';
@@ -719,17 +730,15 @@ class Dropdown extends Component {
         }
         return null;
     }
-    ;
     _placeDropdown() {
         // Container here will be closest ancestor with overflow: hidden
         let closestOverflowParent = this._getClosestAncestor(this.dropdownEl, (ancestor) => {
-            return !['HTML', 'BODY'].includes(ancestor.tagName) && getComputedStyle(ancestor).overflow !== 'visible';
+            return (!['HTML', 'BODY'].includes(ancestor.tagName) &&
+                getComputedStyle(ancestor).overflow !== 'visible');
         });
         // Fallback
         if (!closestOverflowParent) {
-            closestOverflowParent = (!!this.dropdownEl.offsetParent
-                ? this.dropdownEl.offsetParent
-                : this.dropdownEl.parentNode);
+            closestOverflowParent = ((!!this.dropdownEl.offsetParent ? this.dropdownEl.offsetParent : this.dropdownEl.parentNode));
         }
         if (getComputedStyle(closestOverflowParent).position === 'static')
             closestOverflowParent.style.position = 'relative';
@@ -765,6 +774,7 @@ class Dropdown extends Component {
         // Do this one frame later so that we don't bind an event handler that's immediately
         // called when the event bubbles up to the document and closes the dropdown
         setTimeout(() => this._setupTemporaryEventHandlers(), 0);
+        this.el.ariaExpanded = 'true';
     };
     /**
      * Close dropdown.
@@ -783,23 +793,20 @@ class Dropdown extends Component {
         if (this.options.autoFocus) {
             this.el.focus();
         }
+        this.el.ariaExpanded = 'false';
     };
     /**
      * While dropdown is open, you can recalculate its dimensions if its contents have changed.
      */
     recalculateDimensions = () => {
         if (this.isOpen) {
-            this.dropdownEl.style.width = '';
-            this.dropdownEl.style.height = '';
-            this.dropdownEl.style.left = '';
-            this.dropdownEl.style.top = '';
-            this.dropdownEl.style.transformOrigin = '';
+            this._resetDropdownPositioningStyles();
             this._placeDropdown();
         }
     };
 }
 
-let _defaults$k = {
+const _defaults$l = {
     data: [], // Autocomplete data set
     onAutocomplete: null, // Callback for when autocompleted
     dropdownOptions: {
@@ -812,8 +819,8 @@ let _defaults$k = {
     isMultiSelect: false,
     onSearch: (text, autocomplete) => {
         const normSearch = text.toLocaleLowerCase();
-        autocomplete.setMenuItems(autocomplete.options.data.filter((option) => option.id.toString().toLocaleLowerCase().includes(normSearch)
-            || option.text?.toLocaleLowerCase().includes(normSearch)));
+        autocomplete.setMenuItems(autocomplete.options.data.filter((option) => option.id.toString().toLocaleLowerCase().includes(normSearch) ||
+            option.text?.toLocaleLowerCase().includes(normSearch)));
     },
     maxDropDownHeight: '300px',
     allowUnsafeHTML: false
@@ -836,7 +843,7 @@ class Autocomplete extends Component {
     menuItems;
     constructor(el, options) {
         super(el, options, Autocomplete);
-        this.el.M_Autocomplete = this;
+        this.el['M_Autocomplete'] = this;
         this.options = {
             ...Autocomplete.defaults,
             ...options
@@ -844,7 +851,7 @@ class Autocomplete extends Component {
         this.isOpen = false;
         this.count = 0;
         this.activeIndex = -1;
-        this.oldVal = "";
+        this.oldVal = '';
         this.selectedValues = [];
         this.menuItems = this.options.data || [];
         this.$active = null;
@@ -853,7 +860,7 @@ class Autocomplete extends Component {
         this._setupEventHandlers();
     }
     static get defaults() {
-        return _defaults$k;
+        return _defaults$l;
     }
     /**
      * Initializes instances of Autocomplete.
@@ -864,17 +871,17 @@ class Autocomplete extends Component {
         return super.init(els, options, Autocomplete);
     }
     static getInstance(el) {
-        return el.M_Autocomplete;
+        return el['M_Autocomplete'];
     }
     destroy() {
         this._removeEventHandlers();
         this._removeDropdown();
-        this.el.M_Autocomplete = undefined;
+        this.el['M_Autocomplete'] = undefined;
     }
     _setupEventHandlers() {
         this.el.addEventListener('blur', this._handleInputBlur);
-        this.el.addEventListener('keyup', this._handleInputKeyupAndFocus);
-        this.el.addEventListener('focus', this._handleInputKeyupAndFocus);
+        this.el.addEventListener('keyup', this._handleInputKeyup);
+        this.el.addEventListener('focus', this._handleInputFocus);
         this.el.addEventListener('keydown', this._handleInputKeydown);
         this.el.addEventListener('click', this._handleInputClick);
         this.container.addEventListener('mousedown', this._handleContainerMousedownAndTouchstart);
@@ -886,8 +893,8 @@ class Autocomplete extends Component {
     }
     _removeEventHandlers() {
         this.el.removeEventListener('blur', this._handleInputBlur);
-        this.el.removeEventListener('keyup', this._handleInputKeyupAndFocus);
-        this.el.removeEventListener('focus', this._handleInputKeyupAndFocus);
+        this.el.removeEventListener('keyup', this._handleInputKeyup);
+        this.el.removeEventListener('focus', this._handleInputFocus);
         this.el.removeEventListener('keydown', this._handleInputKeydown);
         this.el.removeEventListener('click', this._handleInputClick);
         this.container.removeEventListener('mousedown', this._handleContainerMousedownAndTouchstart);
@@ -903,18 +910,19 @@ class Autocomplete extends Component {
         this.container.id = `autocomplete-options-${Utils.guid()}`;
         this.container.classList.add('autocomplete-content', 'dropdown-content');
         this.el.setAttribute('data-target', this.container.id);
-        this.menuItems.forEach(menuItem => {
+        this.menuItems.forEach((menuItem) => {
             const itemElement = this._createDropdownItem(menuItem);
             this.container.append(itemElement);
         });
         // ! Issue in Component Dropdown: _placeDropdown moves dom-position
         this.el.parentElement.appendChild(this.container);
         // Initialize dropdown
-        let dropdownOptions = {
+        const dropdownOptions = {
             ...Autocomplete.defaults.dropdownOptions,
             ...this.options.dropdownOptions
         };
-        let userOnItemClick = dropdownOptions.onItemClick;
+        // @todo shouldn't we conditionally check if dropdownOptions.onItemClick is set in first place?
+        const userOnItemClick = dropdownOptions.onItemClick;
         // Ensuring the select Option call when user passes custom onItemClick function to dropdown
         dropdownOptions.onItemClick = (li) => {
             if (!li)
@@ -952,21 +960,31 @@ class Autocomplete extends Component {
             this._resetAutocomplete();
         }
     };
-    _handleInputKeyupAndFocus = (e) => {
+    _handleInputKeyup = (e) => {
         if (e.type === 'keyup')
             Autocomplete._keydown = false;
         this.count = 0;
         const actualValue = this.el.value.toLocaleLowerCase();
         // Don't capture enter or arrow key usage.
-        if (Utils.keys.ENTER.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key) || Utils.keys.ARROW_DOWN.includes(e.key))
+        if (Utils.keys.ENTER.includes(e.key) ||
+            Utils.keys.ARROW_UP.includes(e.key) ||
+            Utils.keys.ARROW_DOWN.includes(e.key))
             return;
         // Check if the input isn't empty
         // Check if focus triggered by tab
-        if (this.oldVal !== actualValue && (Utils.tabPressed || e.type !== 'focus')) {
+        if (this.oldVal !== actualValue && Utils.tabPressed) {
             this.open();
         }
+        this._inputChangeDetection(actualValue);
+    };
+    _handleInputFocus = () => {
+        this.count = 0;
+        const actualValue = this.el.value.toLocaleLowerCase();
+        this._inputChangeDetection(actualValue);
+    };
+    _inputChangeDetection = (value) => {
         // Value has changed!
-        if (this.oldVal !== actualValue) {
+        if (this.oldVal !== value) {
             this._setStatusLoading();
             this.options.onSearch(this.el.value, this);
         }
@@ -975,7 +993,7 @@ class Autocomplete extends Component {
             this.selectedValues = [];
             this._triggerChanged();
         }
-        this.oldVal = actualValue;
+        this.oldVal = value;
     };
     _handleInputKeydown = (e) => {
         Autocomplete._keydown = true;
@@ -1081,7 +1099,8 @@ class Autocomplete extends Component {
         item.appendChild(itemText);
         item.querySelector('.item-text').appendChild(div);
         // Description
-        if (typeof entry.description === 'string' || (typeof entry.description === 'number' && !isNaN(entry.description))) {
+        if (typeof entry.description === 'string' ||
+            (typeof entry.description === 'number' && !isNaN(entry.description))) {
             const description = document.createElement('small');
             description.setAttribute('style', 'line-height:1.3;color:grey;white-space:nowrap;text-overflow:ellipsis;display:block;width:90%;overflow:hidden;');
             description.innerText = entry.description;
@@ -1113,7 +1132,8 @@ class Autocomplete extends Component {
         }
     }
     _setStatusLoading() {
-        this.el.parentElement.querySelector('.status-info').innerHTML = `<div style="height:100%;width:50px;"><svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+        this.el.parentElement.querySelector('.status-info').innerHTML =
+            `<div style="height:100%;width:50px;"><svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
     <circle fill="#888c" stroke="none" cx="6" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1"/></circle>
     <circle fill="#888c" stroke="none" cx="26" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2"/></circle>
     <circle fill="#888c" stroke="none" cx="46" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite"  begin="0.3"/></circle>
@@ -1219,7 +1239,7 @@ class Autocomplete extends Component {
     }
 }
 
-let _defaults$j = {
+const _defaults$k = {
     direction: 'top',
     hoverEnabled: true,
     toolbarEnabled: false
@@ -1240,7 +1260,7 @@ class FloatingActionButton extends Component {
     btnWidth;
     constructor(el, options) {
         super(el, options, FloatingActionButton);
-        this.el.M_FloatingActionButton = this;
+        this.el['M_FloatingActionButton'] = this;
         this.options = {
             ...FloatingActionButton.defaults,
             ...options
@@ -1264,7 +1284,7 @@ class FloatingActionButton extends Component {
         this._setupEventHandlers();
     }
     static get defaults() {
-        return _defaults$j;
+        return _defaults$k;
     }
     /**
      * Initializes instances of FloatingActionButton.
@@ -1275,11 +1295,11 @@ class FloatingActionButton extends Component {
         return super.init(els, options, FloatingActionButton);
     }
     static getInstance(el) {
-        return el.M_FloatingActionButton;
+        return el['M_FloatingActionButton'];
     }
     destroy() {
         this._removeEventHandlers();
-        this.el.M_FloatingActionButton = undefined;
+        this.el['M_FloatingActionButton'] = undefined;
     }
     _setupEventHandlers() {
         if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
@@ -1310,7 +1330,7 @@ class FloatingActionButton extends Component {
     _handleDocumentClick = (e) => {
         const elem = e.target;
         if (elem !== this._menu)
-            this.close;
+            this.close();
     };
     /**
      * Open FAB.
@@ -1372,17 +1392,15 @@ class FloatingActionButton extends Component {
         });
     }
     _animateInToolbar() {
-        let scaleFactor;
-        let windowWidth = window.innerWidth;
-        let windowHeight = window.innerHeight;
-        let btnRect = this.el.getBoundingClientRect();
-        const backdrop = document.createElement('div');
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const btnRect = this.el.getBoundingClientRect();
+        const backdrop = document.createElement('div'), scaleFactor = windowWidth / backdrop[0].clientWidth, fabColor = getComputedStyle(this._anchor).backgroundColor; // css('background-color');
         backdrop.classList.add('fab-backdrop'); //  $('<div class="fab-backdrop"></div>');
-        const fabColor = getComputedStyle(this._anchor).backgroundColor; // css('background-color');
+        backdrop.style.backgroundColor = fabColor;
         this._anchor.append(backdrop);
         this.offsetX = btnRect.left - windowWidth / 2 + btnRect.width / 2;
         this.offsetY = windowHeight - btnRect.bottom;
-        scaleFactor = windowWidth / backdrop[0].clientWidth;
         this.btnBottom = btnRect.bottom;
         this.btnLeft = btnRect.left;
         this.btnWidth = btnRect.width;
@@ -1396,10 +1414,10 @@ class FloatingActionButton extends Component {
         this.el.style.transition = 'none';
         this._anchor.style.transform = `translateY(${this.offsetY}px`;
         this._anchor.style.transition = 'none';
-        backdrop.style.backgroundColor = fabColor;
         setTimeout(() => {
             this.el.style.transform = '';
-            this.el.style.transition = 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s';
+            this.el.style.transition =
+                'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s';
             this._anchor.style.overflow = 'visible';
             this._anchor.style.transform = '';
             this._anchor.style.transition = 'transform .2s';
@@ -1408,7 +1426,9 @@ class FloatingActionButton extends Component {
                 this.el.style.backgroundColor = fabColor;
                 backdrop.style.transform = 'scale(' + scaleFactor + ')';
                 backdrop.style.transition = 'transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)';
-                this._menu.querySelectorAll('li > a').forEach((a) => a.style.opacity = '1');
+                this._menu
+                    .querySelectorAll('li > a')
+                    .forEach((a) => (a.style.opacity = '1'));
                 // Scroll to close.
                 window.addEventListener('scroll', this.close, true);
                 document.body.addEventListener('click', this._handleDocumentClick, true);
@@ -1417,49 +1437,143 @@ class FloatingActionButton extends Component {
     }
 }
 
-class Cards {
-    static Init() {
-        if (typeof document !== 'undefined')
-            document.addEventListener("DOMContentLoaded", () => {
-                document.body.addEventListener('click', e => {
-                    const trigger = e.target;
-                    const card = trigger.closest('.card');
-                    if (!card)
-                        return;
-                    const cardReveal = Array.from(card.children).find(elem => elem.classList.contains('card-reveal'));
-                    if (!cardReveal)
-                        return;
-                    const initialOverflow = getComputedStyle(card).overflow;
-                    // Close Card
-                    const closeArea = cardReveal.querySelector('.card-reveal .card-title');
-                    if (trigger === closeArea || closeArea.contains(trigger)) {
-                        const duration = 225;
-                        cardReveal.style.transition = `transform ${duration}ms ease`; //easeInOutQuad
-                        cardReveal.style.transform = 'translateY(0)';
-                        setTimeout(() => {
-                            cardReveal.style.display = 'none';
-                            card.style.overflow = initialOverflow;
-                        }, duration);
-                    }
-                    // Reveal Card
-                    const activators = card.querySelectorAll('.activator');
-                    activators.forEach(activator => {
-                        if (trigger === activator || activator.contains(trigger)) {
-                            card.style.overflow = 'hidden';
-                            cardReveal.style.display = 'block';
-                            setTimeout(() => {
-                                const duration = 300;
-                                cardReveal.style.transition = `transform ${duration}ms ease`; //easeInOutQuad
-                                cardReveal.style.transform = 'translateY(-100%)';
-                            }, 1);
-                        }
-                    });
-                });
+const _defaults$j = {
+    onOpen: null,
+    onClose: null,
+    inDuration: 225,
+    outDuration: 300
+};
+class Cards extends Component {
+    isOpen = false;
+    cardReveal;
+    initialOverflow;
+    _activators;
+    cardRevealClose;
+    constructor(el, options) {
+        super(el, options, Cards);
+        this.el['M_Cards'] = this;
+        this.options = {
+            ...Cards.defaults,
+            ...options
+        };
+        this.cardReveal = this.el.querySelector('.card-reveal');
+        if (this.cardReveal) {
+            this.initialOverflow = getComputedStyle(this.el).overflow;
+            this._activators = Array.from(this.el.querySelectorAll('.activator'));
+            this._activators.forEach((el) => {
+                if (el)
+                    el.tabIndex = 0;
             });
+            this.cardRevealClose = this.cardReveal?.querySelector('.card-title');
+            if (this.cardRevealClose)
+                this.cardRevealClose.tabIndex = -1;
+            this.cardReveal.ariaExpanded = 'false';
+            this._setupEventHandlers();
+        }
+    }
+    static get defaults() {
+        return _defaults$j;
+    }
+    /**
+     * Initializes instances of Cards.
+     * @param els HTML elements.
+     * @param options Component options.
+     */
+    static init(els, options) {
+        return super.init(els, options, Cards);
+    }
+    static getInstance(el) {
+        return el['M_Cards'];
     }
+    /**
+     * {@inheritDoc}
+     */
+    destroy() {
+        this._removeEventHandlers();
+        this._activators = [];
+    }
+    _setupEventHandlers = () => {
+        this._activators.forEach((el) => {
+            el.addEventListener('click', this._handleClickInteraction);
+            el.addEventListener('keypress', this._handleKeypressEvent);
+        });
+    };
+    _removeEventHandlers = () => {
+        this._activators.forEach((el) => {
+            el.removeEventListener('click', this._handleClickInteraction);
+            el.removeEventListener('keypress', this._handleKeypressEvent);
+        });
+    };
+    _handleClickInteraction = () => {
+        this._handleRevealEvent();
+    };
+    _handleKeypressEvent = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleRevealEvent();
+        }
+    };
+    _handleRevealEvent = () => {
+        // Reveal Card
+        this._activators.forEach((el) => (el.tabIndex = -1));
+        this.open();
+    };
+    _setupRevealCloseEventHandlers = () => {
+        this.cardRevealClose.addEventListener('click', this.close);
+        this.cardRevealClose.addEventListener('keypress', this._handleKeypressCloseEvent);
+    };
+    _removeRevealCloseEventHandlers = () => {
+        this.cardRevealClose.addEventListener('click', this.close);
+        this.cardRevealClose.addEventListener('keypress', this._handleKeypressCloseEvent);
+    };
+    _handleKeypressCloseEvent = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this.close();
+        }
+    };
+    /**
+     * Show card reveal.
+     */
+    open = () => {
+        if (this.isOpen)
+            return;
+        this.isOpen = true;
+        this.el.style.overflow = 'hidden';
+        this.cardReveal.style.display = 'block';
+        this.cardReveal.ariaExpanded = 'true';
+        this.cardRevealClose.tabIndex = 0;
+        setTimeout(() => {
+            this.cardReveal.style.transition = `transform ${this.options.outDuration}ms ease`; //easeInOutQuad
+            this.cardReveal.style.transform = 'translateY(-100%)';
+        }, 1);
+        if (typeof this.options.onOpen === 'function') {
+            this.options.onOpen.call(this);
+        }
+        this._setupRevealCloseEventHandlers();
+    };
+    /**
+     * Hide card reveal.
+     */
+    close = () => {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.cardReveal.style.transition = `transform ${this.options.inDuration}ms ease`; //easeInOutQuad
+        this.cardReveal.style.transform = 'translateY(0)';
+        setTimeout(() => {
+            this.cardReveal.style.display = 'none';
+            this.cardReveal.ariaExpanded = 'false';
+            this._activators.forEach((el) => (el.tabIndex = 0));
+            this.cardRevealClose.tabIndex = -1;
+            this.el.style.overflow = this.initialOverflow;
+        }, this.options.inDuration);
+        if (typeof this.options.onClose === 'function') {
+            this.options.onClose.call(this);
+        }
+        this._removeRevealCloseEventHandlers();
+    };
 }
 
-let _defaults$i = {
+const _defaults$i = {
     duration: 200, // ms
     dist: -100, // zoom scale TODO: make this more intuitive as an option
     shift: 0, // spacing for center image
@@ -1502,7 +1616,7 @@ class Carousel extends Component {
     oneTimeCallback;
     constructor(el, options) {
         super(el, options, Carousel);
-        this.el.M_Carousel = this;
+        this.el['M_Carousel'] = this;
         this.options = {
             ...Carousel.defaults,
             ...options
@@ -1535,6 +1649,7 @@ class Carousel extends Component {
             if (this.showIndicators) {
                 const indicator = document.createElement('li');
                 indicator.classList.add('indicator-item');
+                indicator.tabIndex = 0;
                 if (i === 0) {
                     indicator.classList.add('active');
                 }
@@ -1549,7 +1664,7 @@ class Carousel extends Component {
         // Setup cross browser string
         this.xform = 'transform';
         ['webkit', 'Moz', 'O', 'ms'].every((prefix) => {
-            var e = prefix + 'Transform';
+            const e = prefix + 'Transform';
             if (typeof document.body.style[e] !== 'undefined') {
                 this.xform = e;
                 return false;
@@ -1571,11 +1686,11 @@ class Carousel extends Component {
         return super.init(els, options, Carousel);
     }
     static getInstance(el) {
-        return el.M_Carousel;
+        return el['M_Carousel'];
     }
     destroy() {
         this._removeEventHandlers();
-        this.el.M_Carousel = undefined;
+        this.el['M_Carousel'] = undefined;
     }
     _setupEventHandlers() {
         if (typeof window.ontouchstart !== 'undefined') {
@@ -1591,6 +1706,7 @@ class Carousel extends Component {
         if (this.showIndicators && this._indicators) {
             this._indicators.querySelectorAll('.indicator-item').forEach((el) => {
                 el.addEventListener('click', this._handleIndicatorClick);
+                el.addEventListener('keypress', this._handleIndicatorKeyPress);
             });
         }
         // Resize
@@ -1614,7 +1730,9 @@ class Carousel extends Component {
         }
         window.removeEventListener('resize', this._handleThrottledResize);
     }
-    _handleThrottledResize = Utils.throttle(function () { this._handleResize(); }, 200, null).bind(this);
+    _handleThrottledResize = Utils.throttle(function () {
+        this._handleResize();
+    }, 200, null).bind(this);
     _handleCarouselTap = (e) => {
         // Fixes firefox draggable image bug
         if (e.type === 'mousedown' && e.target.tagName === 'IMG') {
@@ -1717,7 +1835,8 @@ class Carousel extends Component {
             // fixes https://github.com/materializecss/materialize/issues/180
             if (clickedIndex < 0) {
                 // relative X position > center of carousel = clicked at the right part of the carousel
-                if (e.clientX - e.target.getBoundingClientRect().left > this.el.clientWidth / 2) {
+                if (e.clientX - e.target.getBoundingClientRect().left >
+                    this.el.clientWidth / 2) {
                     this.next();
                 }
                 else {
@@ -1731,6 +1850,15 @@ class Carousel extends Component {
     };
     _handleIndicatorClick = (e) => {
         e.stopPropagation();
+        this._handleIndicatorInteraction(e);
+    };
+    _handleIndicatorKeyPress = (e) => {
+        e.stopPropagation();
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleIndicatorInteraction(e);
+        }
+    };
+    _handleIndicatorInteraction = (e) => {
         const indicator = e.target.closest('.indicator-item');
         if (indicator) {
             const index = [...indicator.parentNode.children].indexOf(indicator);
@@ -1784,7 +1912,7 @@ class Carousel extends Component {
     }
     _xpos(e) {
         // touch event
-        if (e.type.startsWith("touch") && e.targetTouches.length >= 1) {
+        if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
             return e.targetTouches[0].clientX;
         }
         // mouse event
@@ -1792,27 +1920,23 @@ class Carousel extends Component {
     }
     _ypos(e) {
         // touch event
-        if (e.type.startsWith("touch") && e.targetTouches.length >= 1) {
+        if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
             return e.targetTouches[0].clientY;
         }
         // mouse event
         return e.clientY;
     }
     _wrap(x) {
-        return x >= this.count
-            ? x % this.count
-            : x < 0
-                ? this._wrap(this.count + (x % this.count))
-                : x;
+        return x >= this.count ? x % this.count : x < 0 ? this._wrap(this.count + (x % this.count)) : x;
     }
     _track = () => {
-        let now, elapsed, delta, v;
-        now = Date.now();
-        elapsed = now - this.timestamp;
+        const now = Date.now(), elapsed = now - this.timestamp, delta = this.offset - this.frame, v = (1000 * delta) / (1 + elapsed);
+        // now = Date.now();
+        // elapsed = now - this.timestamp;
         this.timestamp = now;
-        delta = this.offset - this.frame;
+        // delta = this.offset - this.frame;
         this.frame = this.offset;
-        v = (1000 * delta) / (1 + elapsed);
+        // v = (1000 * delta) / (1 + elapsed);
         this.velocity = 0.8 * v + 0.2 * this.velocity;
     };
     _autoScroll = () => {
@@ -1835,21 +1959,22 @@ class Carousel extends Component {
             this.el.classList.add('scrolling');
         }
         if (this.scrollingTimeout != null) {
-            window.clearTimeout(this.scrollingTimeout);
+            clearTimeout(this.scrollingTimeout);
         }
-        this.scrollingTimeout = window.setTimeout(() => {
+        this.scrollingTimeout = setTimeout(() => {
             this.el.classList.remove('scrolling');
         }, this.options.duration);
         // Start actual scroll
-        let i, half, delta, dir, tween, el, alignment, zTranslation, tweenedOpacity, centerTweenedOpacity;
-        let lastCenter = this.center;
-        let numVisibleOffset = 1 / this.options.numVisible;
         this.offset = typeof x === 'number' ? x : this.offset;
         this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
-        delta = this.offset - this.center * this.dim;
-        dir = delta < 0 ? 1 : -1;
-        tween = (-dir * delta * 2) / this.dim;
-        half = this.count >> 1;
+        const half = this.count >> 1, delta = this.offset - this.center * this.dim, dir = delta < 0 ? 1 : -1, tween = (-dir * delta * 2) / this.dim;
+        let i, el, alignment, zTranslation, tweenedOpacity, centerTweenedOpacity;
+        const lastCenter = this.center;
+        const numVisibleOffset = 1 / this.options.numVisible;
+        // delta = this.offset - this.center * this.dim;
+        // dir = delta < 0 ? 1 : -1;
+        // tween = (-dir * delta * 2) / this.dim;
+        // half = this.count >> 1;
         if (this.options.fullWidth) {
             alignment = 'translateX(0)';
             centerTweenedOpacity = 1;
@@ -1879,10 +2004,7 @@ class Carousel extends Component {
                 this.el.querySelector('.carousel-item').classList.remove('active');
                 el.classList.add('active');
             }
-            let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
-                this.options.shift *
-                tween *
-                i}px) translateZ(${this.options.dist * tween}px)`;
+            const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * this.options.shift * tween * i}px) translateZ(${this.options.dist * tween}px)`;
             this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
         }
         for (i = 1; i <= half; ++i) {
@@ -1898,8 +2020,7 @@ class Carousel extends Component {
             // Don't show wrapped items.
             if (!this.noWrap || this.center + i < this.count) {
                 el = this.images[this._wrap(this.center + i)];
-                let transformString = `${alignment} translateX(${this.options.shift +
-                    (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                const transformString = `${alignment} translateX(${this.options.shift + (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
                 this._updateItemStyle(el, tweenedOpacity, -i, transformString);
             }
             // left side
@@ -1914,8 +2035,7 @@ class Carousel extends Component {
             // Don't show wrapped items.
             if (!this.noWrap || this.center - i >= 0) {
                 el = this.images[this._wrap(this.center - i)];
-                let transformString = `${alignment} translateX(${-this.options.shift +
-                    (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
+                const transformString = `${alignment} translateX(${-this.options.shift + (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
                 this._updateItemStyle(el, tweenedOpacity, -i, transformString);
             }
         }
@@ -1923,9 +2043,7 @@ class Carousel extends Component {
         // Don't show wrapped items.
         if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
             el = this.images[this._wrap(this.center)];
-            let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
-                this.options.shift *
-                tween}px) translateZ(${this.options.dist * tween}px)`;
+            const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * this.options.shift * tween}px) translateZ(${this.options.dist * tween}px)`;
             this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
         }
         // onCycleTo callback
@@ -2029,7 +2147,7 @@ class Carousel extends Component {
     }
 }
 
-let _defaults$h = {
+const _defaults$h = {
     data: [],
     placeholder: '',
     secondaryPlaceholder: '',
@@ -2037,6 +2155,7 @@ let _defaults$h = {
     autocompleteOptions: {},
     autocompleteOnly: false,
     limit: Infinity,
+    allowUserInput: false,
     onChipAdd: null,
     onChipSelect: null,
     onChipDelete: null
@@ -2058,30 +2177,28 @@ class Chips extends Component {
     _selectedChip;
     constructor(el, options) {
         super(el, options, Chips);
-        this.el.M_Chips = this;
+        this.el['M_Chips'] = this;
         this.options = {
             ...Chips.defaults,
             ...options
         };
-        this.el.classList.add('chips', 'input-field');
+        this.el.classList.add('chips');
         this.chipsData = [];
         this._chips = [];
-        this._setupInput();
-        this.hasAutocomplete = Object.keys(this.options.autocompleteOptions).length > 0;
-        // Set input id
-        if (!this._input.getAttribute('id'))
-            this._input.setAttribute('id', Utils.guid());
         // Render initial chips
         if (this.options.data.length) {
             this.chipsData = this.options.data;
             this._renderChips();
         }
-        // Setup autocomplete if needed
-        if (this.hasAutocomplete)
-            this._setupAutocomplete();
-        this._setPlaceholder();
         this._setupLabel();
-        this._setupEventHandlers();
+        // Render input element, setup event handlers
+        if (this.options.allowUserInput) {
+            this.el.classList.add('input-field');
+            this._setupInput();
+            this._setupEventHandlers();
+            // move input to end
+            this.el.append(this._input);
+        }
     }
     static get defaults() {
         return _defaults$h;
@@ -2095,19 +2212,22 @@ class Chips extends Component {
         return super.init(els, options, Chips);
     }
     static getInstance(el) {
-        return el.M_Chips;
+        return el['M_Chips'];
     }
     getData() {
         return this.chipsData;
     }
     destroy() {
-        this._removeEventHandlers();
-        this._chips.forEach(c => c.remove());
+        if (this.options.allowUserInput) {
+            this._removeEventHandlers();
+        }
+        this._chips.forEach((c) => c.remove());
         this._chips = [];
-        this.el.M_Chips = undefined;
+        this.el['M_Chips'] = undefined;
     }
     _setupEventHandlers() {
         this.el.addEventListener('click', this._handleChipClick);
+        // @todo why do we need this as document event listener, shouldn't we apply it to the element wrapper itself?
         document.addEventListener('keydown', Chips._handleChipsKeydown);
         document.addEventListener('keyup', Chips._handleChipsKeyup);
         this.el.addEventListener('blur', Chips._handleChipsBlur, true);
@@ -2150,7 +2270,7 @@ class Chips extends Component {
         const tag = e.target.tagName;
         if (tag === 'INPUT' || tag === 'TEXTAREA' || !chipsKeydown)
             return;
-        const currChips = chips.M_Chips;
+        const currChips = chips['M_Chips'];
         if (Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.DELETE.includes(e.key)) {
             e.preventDefault();
             let selectIndex = currChips.chipsData.length;
@@ -2184,13 +2304,13 @@ class Chips extends Component {
             }
         }
     }
-    static _handleChipsKeyup(e) {
+    static _handleChipsKeyup() {
         Chips._keydown = false;
     }
     static _handleChipsBlur(e) {
         if (!Chips._keydown && document.hidden) {
             const chips = e.target.closest('.chips');
-            const currChips = chips.M_Chips;
+            const currChips = chips['M_Chips'];
             currChips._selectedChip = null;
         }
     }
@@ -2226,17 +2346,19 @@ class Chips extends Component {
         const renderedChip = document.createElement('div');
         renderedChip.classList.add('chip');
         renderedChip.innerText = chip.text || chip.id;
-        renderedChip.setAttribute('tabindex', "0");
-        const closeIcon = document.createElement('i');
-        closeIcon.classList.add(this.options.closeIconClass, 'close');
-        closeIcon.innerText = 'close';
         // attach image if needed
         if (chip.image) {
             const img = document.createElement('img');
             img.setAttribute('src', chip.image);
             renderedChip.insertBefore(img, renderedChip.firstChild);
         }
-        renderedChip.appendChild(closeIcon);
+        if (this.options.allowUserInput) {
+            renderedChip.setAttribute('tabindex', '0');
+            const closeIcon = document.createElement('i');
+            closeIcon.classList.add(this.options.closeIconClass, 'close');
+            closeIcon.innerText = 'close';
+            renderedChip.appendChild(closeIcon);
+        }
         return renderedChip;
     }
     _renderChips() {
@@ -2246,8 +2368,6 @@ class Chips extends Component {
             this.el.appendChild(chipElem);
             this._chips.push(chipElem);
         }
-        // move input to end
-        this.el.append(this._input);
     }
     _setupAutocomplete() {
         this.options.autocompleteOptions.onAutocomplete = (items) => {
@@ -2269,6 +2389,14 @@ class Chips extends Component {
             this.el.append(this._input);
         }
         this._input.classList.add('input');
+        this.hasAutocomplete = Object.keys(this.options.autocompleteOptions).length > 0;
+        // Setup autocomplete if needed
+        if (this.hasAutocomplete)
+            this._setupAutocomplete();
+        this._setPlaceholder();
+        // Set input id
+        if (!this._input.getAttribute('id'))
+            this._input.setAttribute('id', Utils.guid());
     }
     _setupLabel() {
         this._label = this.el.querySelector('label');
@@ -2286,7 +2414,7 @@ class Chips extends Component {
     }
     _isValidAndNotExist(chip) {
         const isValid = !!chip.id;
-        const doesNotExist = !this.chipsData.some(item => item.id == chip.id);
+        const doesNotExist = !this.chipsData.some((item) => item.id == chip.id);
         return isValid && doesNotExist;
     }
     /**
@@ -2337,15 +2465,18 @@ class Chips extends Component {
     }
     static Init() {
         if (typeof document !== 'undefined')
-            document.addEventListener("DOMContentLoaded", () => {
-                // Handle removal of static chips.
-                document.body.addEventListener('click', e => {
-                    if (e.target.closest('.chip .close')) {
-                        const chips = e.target.closest('.chips');
-                        if (chips && chips.M_Chips == undefined)
-                            return;
-                        e.target.closest('.chip').remove();
-                    }
+            // Handle removal of static chips.
+            document.addEventListener('DOMContentLoaded', () => {
+                const chips = document.querySelectorAll('.chips');
+                chips.forEach((el) => {
+                    // if (el && (el['M_Chips == undefined) return;
+                    el.addEventListener('click', (e) => {
+                        if (e.target.classList.contains('close')) {
+                            const chip = e.target.closest('.chip');
+                            if (chip)
+                                chip.remove();
+                        }
+                    });
                 });
             });
     }
@@ -2367,14 +2498,14 @@ class Collapsible extends Component {
     _headers;
     constructor(el, options) {
         super(el, options, Collapsible);
-        this.el.M_Collapsible = this;
+        this.el['M_Collapsible'] = this;
         this.options = {
             ...Collapsible.defaults,
             ...options
         };
         // Setup tab indices
         this._headers = Array.from(this.el.querySelectorAll('li > .collapsible-header'));
-        this._headers.forEach(el => el.tabIndex = 0);
+        this._headers.forEach((el) => (el.tabIndex = 0));
         this._setupEventHandlers();
         // Open active
         const activeBodies = Array.from(this.el.querySelectorAll('li.active > .collapsible-body'));
@@ -2386,7 +2517,7 @@ class Collapsible extends Component {
         }
         else {
             // Expandables => all active
-            activeBodies.forEach(el => this._setExpanded(el));
+            activeBodies.forEach((el) => this._setExpanded(el));
         }
     }
     static get defaults() {
@@ -2401,19 +2532,19 @@ class Collapsible extends Component {
         return super.init(els, options, Collapsible);
     }
     static getInstance(el) {
-        return el.M_Collapsible;
+        return el['M_Collapsible'];
     }
     destroy() {
         this._removeEventHandlers();
-        this.el.M_Collapsible = undefined;
+        this.el['M_Collapsible'] = undefined;
     }
     _setupEventHandlers() {
         this.el.addEventListener('click', this._handleCollapsibleClick);
-        this._headers.forEach(header => header.addEventListener('keydown', this._handleCollapsibleKeydown));
+        this._headers.forEach((header) => header.addEventListener('keydown', this._handleCollapsibleKeydown));
     }
     _removeEventHandlers() {
         this.el.removeEventListener('click', this._handleCollapsibleClick);
-        this._headers.forEach(header => header.removeEventListener('keydown', this._handleCollapsibleKeydown));
+        this._headers.forEach((header) => header.removeEventListener('keydown', this._handleCollapsibleKeydown));
     }
     _handleCollapsibleClick = (e) => {
         const header = e.target.closest('.collapsible-header');
@@ -2436,7 +2567,7 @@ class Collapsible extends Component {
         }
     };
     _setExpanded(li) {
-        li.style.maxHeight = li.scrollHeight + "px";
+        li.style.maxHeight = li.scrollHeight + 'px';
     }
     _animateIn(index) {
         const li = this.el.children[index];
@@ -2459,7 +2590,7 @@ class Collapsible extends Component {
         const body = li.querySelector('.collapsible-body');
         const duration = this.options.outDuration; // easeInOutCubic
         body.style.transition = `max-height ${duration}ms ease-out`;
-        body.style.maxHeight = "0";
+        body.style.maxHeight = '0';
         setTimeout(() => {
             if (typeof this.options.onCloseEnd === 'function') {
                 this.options.onCloseEnd.call(this, li);
@@ -2471,7 +2602,7 @@ class Collapsible extends Component {
      * @param n Nth section to open.
      */
     open = (index) => {
-        const listItems = Array.from(this.el.children).filter(c => c.tagName === 'LI');
+        const listItems = Array.from(this.el.children).filter((c) => c.tagName === 'LI');
         const li = listItems[index];
         if (li && !li.classList.contains('active')) {
             // onOpenStart callback
@@ -2480,8 +2611,8 @@ class Collapsible extends Component {
             }
             // Handle accordion behavior
             if (this.options.accordion) {
-                const activeLis = listItems.filter(li => li.classList.contains('active'));
-                activeLis.forEach(activeLi => {
+                const activeLis = listItems.filter((li) => li.classList.contains('active'));
+                activeLis.forEach((activeLi) => {
                     const index = listItems.indexOf(activeLi);
                     this.close(index);
                 });
@@ -2496,7 +2627,7 @@ class Collapsible extends Component {
      * @param n Nth section to close.
      */
     close = (index) => {
-        const li = Array.from(this.el.children).filter(c => c.tagName === 'LI')[index];
+        const li = Array.from(this.el.children).filter((c) => c.tagName === 'LI')[index];
         if (li && li.classList.contains('active')) {
             // onCloseStart callback
             if (typeof this.options.onCloseStart === 'function') {
@@ -2510,271 +2641,6 @@ class Collapsible extends Component {
 }
 
 const _defaults$f = {
-    opacity: 0.5,
-    inDuration: 250,
-    outDuration: 250,
-    onOpenStart: null,
-    onOpenEnd: null,
-    onCloseStart: null,
-    onCloseEnd: null,
-    preventScrolling: true,
-    dismissible: true,
-    startingTop: '4%',
-    endingTop: '10%'
-};
-class Modal extends Component {
-    static _modalsOpen;
-    static _count;
-    /**
-     * ID of the modal element.
-     */
-    id;
-    /**
-     * If the modal is open.
-     */
-    isOpen;
-    _openingTrigger;
-    _overlay;
-    _nthModalOpened;
-    constructor(el, options) {
-        super(el, options, Modal);
-        this.el.M_Modal = this;
-        this.options = {
-            ...Modal.defaults,
-            ...options
-        };
-        this.isOpen = false;
-        this.id = this.el.id;
-        this._openingTrigger = undefined;
-        this._overlay = document.createElement('div');
-        this._overlay.classList.add('modal-overlay');
-        this.el.tabIndex = 0;
-        this._nthModalOpened = 0;
-        Modal._count++;
-        this._setupEventHandlers();
-    }
-    static get defaults() {
-        return _defaults$f;
-    }
-    /**
-     * Initializes instances of Modal.
-     * @param els HTML elements.
-     * @param options Component options.
-     * @returns {Modal | Modal[]}
-     */
-    static init(els, options = {}) {
-        return super.init(els, options, Modal);
-    }
-    static getInstance(el) {
-        return el.M_Modal;
-    }
-    destroy() {
-        Modal._count--;
-        this._removeEventHandlers();
-        this.el.removeAttribute('style');
-        this._overlay.remove();
-        this.el.M_Modal = undefined;
-    }
-    _setupEventHandlers() {
-        if (Modal._count === 1) {
-            document.body.addEventListener('click', this._handleTriggerClick);
-        }
-        this._overlay.addEventListener('click', this._handleOverlayClick);
-        this.el.addEventListener('click', this._handleModalCloseClick);
-    }
-    _removeEventHandlers() {
-        if (Modal._count === 0) {
-            document.body.removeEventListener('click', this._handleTriggerClick);
-        }
-        this._overlay.removeEventListener('click', this._handleOverlayClick);
-        this.el.removeEventListener('click', this._handleModalCloseClick);
-    }
-    _handleTriggerClick = (e) => {
-        const trigger = e.target.closest('.modal-trigger');
-        if (!trigger)
-            return;
-        const modalId = Utils.getIdFromTrigger(trigger);
-        const modalInstance = document.getElementById(modalId).M_Modal;
-        if (modalInstance)
-            modalInstance.open(trigger);
-        e.preventDefault();
-    };
-    _handleOverlayClick = () => {
-        if (this.options.dismissible)
-            this.close();
-    };
-    _handleModalCloseClick = (e) => {
-        const closeTrigger = e.target.closest('.modal-close');
-        if (closeTrigger)
-            this.close();
-    };
-    _handleKeydown = (e) => {
-        if (Utils.keys.ESC.includes(e.key) && this.options.dismissible)
-            this.close();
-    };
-    _handleFocus = (e) => {
-        // Only trap focus if this modal is the last model opened (prevents loops in nested modals).
-        if (!this.el.contains(e.target) && this._nthModalOpened === Modal._modalsOpen) {
-            this.el.focus();
-        }
-    };
-    _animateIn() {
-        // Set initial styles
-        this._overlay.style.display = 'block';
-        this._overlay.style.opacity = '0';
-        this.el.style.display = 'block';
-        this.el.style.opacity = '0';
-        const duration = this.options.inDuration;
-        const isBottomSheet = this.el.classList.contains('bottom-sheet');
-        if (!isBottomSheet) {
-            this.el.style.top = this.options.startingTop;
-            this.el.style.transform = 'scaleX(0.9) scaleY(0.9)';
-        }
-        // Overlay
-        this._overlay.style.transition = `opacity ${duration}ms ease-out`; // v1: easeOutQuad
-        // Modal
-        this.el.style.transition = `
-      top ${duration}ms ease-out,
-      bottom ${duration}ms ease-out,
-      opacity ${duration}ms ease-out,
-      transform ${duration}ms ease-out
-    `;
-        setTimeout(() => {
-            this._overlay.style.opacity = this.options.opacity.toString();
-            this.el.style.opacity = '1';
-            if (isBottomSheet) {
-                this.el.style.bottom = '0';
-            }
-            else {
-                this.el.style.top = this.options.endingTop;
-                this.el.style.transform = 'scaleX(1) scaleY(1)';
-            }
-            setTimeout(() => {
-                if (typeof this.options.onOpenEnd === 'function') {
-                    this.options.onOpenEnd.call(this, this.el, this._openingTrigger);
-                }
-            }, duration);
-        }, 1);
-    }
-    _animateOut() {
-        const duration = this.options.outDuration;
-        const isBottomSheet = this.el.classList.contains('bottom-sheet');
-        if (!isBottomSheet) {
-            this.el.style.top = this.options.endingTop;
-        }
-        // Overlay
-        this._overlay.style.transition = `opacity ${duration}ms ease-out`; // v1: easeOutQuart
-        // Modal // easeOutCubic
-        this.el.style.transition = `
-      top ${duration}ms ease-out,
-      bottom ${duration}ms ease-out,
-      opacity ${duration}ms ease-out,
-      transform ${duration}ms ease-out
-    `;
-        setTimeout(() => {
-            this._overlay.style.opacity = '0';
-            this.el.style.opacity = '0';
-            if (isBottomSheet) {
-                this.el.style.bottom = '-100%';
-            }
-            else {
-                this.el.style.top = this.options.startingTop;
-                this.el.style.transform = 'scaleX(0.9) scaleY(0.9)';
-            }
-            setTimeout(() => {
-                this.el.style.display = 'none';
-                this._overlay.remove();
-                if (typeof this.options.onCloseEnd === 'function') {
-                    this.options.onCloseEnd.call(this, this.el);
-                }
-            }, duration);
-        }, 1);
-    }
-    /**
-     * Open modal.
-     */
-    open = (trigger) => {
-        if (this.isOpen)
-            return;
-        this.isOpen = true;
-        Modal._modalsOpen++;
-        this._nthModalOpened = Modal._modalsOpen;
-        // Set Z-Index based on number of currently open modals
-        this._overlay.style.zIndex = (1000 + Modal._modalsOpen * 2).toString();
-        this.el.style.zIndex = (1000 + Modal._modalsOpen * 2 + 1).toString();
-        // Set opening trigger, undefined indicates modal was opened by javascript
-        this._openingTrigger = !!trigger ? trigger : undefined;
-        // onOpenStart callback
-        if (typeof this.options.onOpenStart === 'function') {
-            this.options.onOpenStart.call(this, this.el, this._openingTrigger);
-        }
-        if (this.options.preventScrolling) {
-            const hasVerticalScrollBar = document.documentElement.scrollHeight > document.documentElement.clientHeight;
-            if (hasVerticalScrollBar) {
-                const scrollTop = document.documentElement.scrollTop;
-                document.documentElement.style.top = '-' + scrollTop + "px";
-                document.documentElement.classList.add('noscroll');
-            }
-        }
-        this.el.classList.add('open');
-        this.el.insertAdjacentElement('afterend', this._overlay);
-        if (this.options.dismissible) {
-            document.addEventListener('keydown', this._handleKeydown);
-            document.addEventListener('focus', this._handleFocus, true);
-        }
-        this._animateIn();
-        // Focus modal
-        this.el.focus();
-        return this;
-    };
-    /**
-     * Close modal.
-     */
-    close = () => {
-        if (!this.isOpen)
-            return;
-        this.isOpen = false;
-        Modal._modalsOpen--;
-        this._nthModalOpened = 0;
-        // Call onCloseStart callback
-        if (typeof this.options.onCloseStart === 'function') {
-            this.options.onCloseStart.call(this, this.el);
-        }
-        this.el.classList.remove('open');
-        // Enable body scrolling only if there are no more modals open.
-        if (Modal._modalsOpen === 0) {
-            const scrollTop = -parseInt(document.documentElement.style.top);
-            document.documentElement.style.removeProperty("top");
-            document.documentElement.classList.remove('noscroll');
-            document.documentElement.scrollTop = scrollTop;
-        }
-        if (this.options.dismissible) {
-            document.removeEventListener('keydown', this._handleKeydown);
-            document.removeEventListener('focus', this._handleFocus, true);
-        }
-        this._animateOut();
-        return this;
-    };
-    // Experimental!
-    // also note: https://stackoverflow.com/a/35385518/8830502
-    static create(children = '') {
-        return `<dialog id="modal1" class="modal">
-      <div class="modal-content">
-        <h4>${children}</h4>
-        <p>A bunch of text</p>
-      </div>
-      <div class="modal-footer">
-        <a href="#!" class="modal-close waves-effect btn-flat">Agree</a>
-      </div>
-    </dialog>`;
-    }
-    static {
-        Modal._modalsOpen = 0;
-        Modal._count = 0;
-    }
-}
-
-let _defaults$e = {
     classes: '',
     dropdownOptions: {}
 };
@@ -2800,7 +2666,7 @@ class FormSelect extends Component {
         super(el, options, FormSelect);
         if (this.el.classList.contains('browser-default'))
             return;
-        this.el.M_FormSelect = this;
+        this.el['M_FormSelect'] = this;
         this.options = {
             ...FormSelect.defaults,
             ...options
@@ -2812,7 +2678,7 @@ class FormSelect extends Component {
         this._setupEventHandlers();
     }
     static get defaults() {
-        return _defaults$e;
+        return _defaults$f;
     }
     /**
      * Initializes instances of FormSelect.
@@ -2823,18 +2689,18 @@ class FormSelect extends Component {
         return super.init(els, options, FormSelect);
     }
     static getInstance(el) {
-        return el.M_FormSelect;
+        return el['M_FormSelect'];
     }
     destroy() {
         this._removeEventHandlers();
         this._removeDropdown();
-        this.el.M_FormSelect = undefined;
+        this.el['M_FormSelect'] = undefined;
     }
     _setupEventHandlers() {
         this.dropdownOptions.querySelectorAll('li:not(.optgroup)').forEach((el) => {
             el.addEventListener('click', this._handleOptionClick);
             el.addEventListener('keydown', (e) => {
-                if (e.key === " " || e.key === "Enter")
+                if (e.key === ' ' || e.key === 'Enter')
                     this._handleOptionClick(e);
             });
         });
@@ -2870,7 +2736,8 @@ class FormSelect extends Component {
         return true;
     }
     _selectOptionElement(virtualOption) {
-        if (!virtualOption.classList.contains('disabled') && !virtualOption.classList.contains('optgroup')) {
+        if (!virtualOption.classList.contains('disabled') &&
+            !virtualOption.classList.contains('optgroup')) {
             const value = this._values.find((value) => value.optionEl === virtualOption);
             const previousSelectedValues = this.getSelectedValues();
             if (this.isMultiple) {
@@ -2916,7 +2783,7 @@ class FormSelect extends Component {
         hiddenDiv.appendChild(this.el);
         if (this.el.disabled)
             this.wrapper.classList.add('disabled');
-        this.selectOptions = Array.from(this.el.children).filter(el => ['OPTION', 'OPTGROUP'].includes(el.tagName));
+        this.selectOptions = (Array.from(this.el.children).filter((el) => ['OPTION', 'OPTGROUP'].includes(el.tagName)));
         // Create dropdown
         this.dropdownOptions = document.createElement('ul');
         this.dropdownOptions.id = `select-options-${Utils.guid()}`;
@@ -2935,7 +2802,7 @@ class FormSelect extends Component {
                 }
                 else if (realOption.tagName === 'OPTGROUP') {
                     // Optgroup
-                    const groupId = "opt-group-" + Utils.guid();
+                    const groupId = 'opt-group-' + Utils.guid();
                     const groupParent = document.createElement('li');
                     groupParent.classList.add('optgroup');
                     groupParent.tabIndex = -1;
@@ -2944,42 +2811,42 @@ class FormSelect extends Component {
                     groupParent.innerHTML = `<span id="${groupId}" role="presentation">${realOption.getAttribute('label')}</span>`;
                     this.dropdownOptions.append(groupParent);
                     const groupChildren = [];
-                    const selectOptions = Array.from(realOption.children).filter(el => el.tagName === 'OPTION');
-                    selectOptions.forEach(realOption => {
+                    const selectOptions = (Array.from(realOption.children).filter((el) => el.tagName === 'OPTION'));
+                    selectOptions.forEach((realOption) => {
                         const virtualOption = this._createAndAppendOptionWithIcon(realOption, 'optgroup-option');
-                        const childId = "opt-child-" + Utils.guid();
+                        const childId = 'opt-child-' + Utils.guid();
                         virtualOption.id = childId;
                         groupChildren.push(childId);
                         this._addOptionToValues(realOption, virtualOption);
                     });
-                    groupParent.setAttribute("aria-owns", groupChildren.join(" "));
+                    groupParent.setAttribute('aria-owns', groupChildren.join(' '));
                 }
             });
         }
         this.wrapper.append(this.dropdownOptions);
         // Add input dropdown
         this.input = document.createElement('input');
-        this.input.id = "m_select-input-" + Utils.guid();
+        this.input.id = 'm_select-input-' + Utils.guid();
         this.input.classList.add('select-dropdown', 'dropdown-trigger');
         this.input.type = 'text';
         this.input.readOnly = true;
         this.input.setAttribute('data-target', this.dropdownOptions.id);
         this.input.ariaReadOnly = 'true';
-        this.input.ariaRequired = this.el.hasAttribute("required").toString(); //setAttribute("aria-required", this.el.hasAttribute("required"));
+        this.input.ariaRequired = this.el.hasAttribute('required').toString(); //setAttribute("aria-required", this.el.hasAttribute("required"));
         if (this.el.disabled)
             this.input.disabled = true; // 'true');
         const attrs = this.el.attributes;
         for (let i = 0; i < attrs.length; ++i) {
             const attr = attrs[i];
-            if (attr.name.startsWith("aria-"))
+            if (attr.name.startsWith('aria-'))
                 this.input.setAttribute(attr.name, attr.value);
         }
         // Adds aria-attributes to input element
         this.input.setAttribute('role', 'combobox');
         this.input.ariaExpanded = 'false';
-        this.input.setAttribute("aria-owns", this.dropdownOptions.id);
-        this.input.setAttribute("aria-controls", this.dropdownOptions.id);
-        this.input.placeholder = " ";
+        this.input.setAttribute('aria-owns', this.dropdownOptions.id);
+        this.input.setAttribute('aria-controls', this.dropdownOptions.id);
+        this.input.placeholder = ' ';
         this.wrapper.prepend(this.input);
         this._setValueToInput();
         // Add caret
@@ -2998,7 +2865,7 @@ class FormSelect extends Component {
             const userOnOpenEnd = dropdownOptions.onOpenEnd;
             const userOnCloseEnd = dropdownOptions.onCloseEnd;
             // Add callback for centering selected option when dropdown content is scrollable
-            dropdownOptions.onOpenEnd = (el) => {
+            dropdownOptions.onOpenEnd = () => {
                 const selectedOption = this.dropdownOptions.querySelector('.selected');
                 if (selectedOption) {
                     // Focus selected option in dropdown
@@ -3020,7 +2887,7 @@ class FormSelect extends Component {
                     userOnOpenEnd.call(this.dropdown, this.el);
             };
             // Add callback for reseting "expanded" state
-            dropdownOptions.onCloseEnd = (el) => {
+            dropdownOptions.onCloseEnd = () => {
                 this.input.ariaExpanded = 'false';
                 // Handle user declared onOpenEnd if needed
                 if (userOnCloseEnd && typeof userOnCloseEnd === 'function')
@@ -3098,7 +2965,7 @@ class FormSelect extends Component {
             checkbox.checked = false;
     }
     _deselectAll() {
-        this._values.forEach(value => this._deselectValue(value));
+        this._values.forEach((value) => this._deselectValue(value));
     }
     _isValueSelected(value) {
         const realValues = this.getSelectedValues();
@@ -3118,7 +2985,7 @@ class FormSelect extends Component {
         const selectedRealOptions = this._getSelectedOptions();
         const selectedOptionPairs = this._values.filter((value) => selectedRealOptions.indexOf(value.el) >= 0);
         // Filter not disabled
-        const notDisabledOptionPairs = selectedOptionPairs.filter(op => !op.el.disabled);
+        const notDisabledOptionPairs = selectedOptionPairs.filter((op) => !op.el.disabled);
         const texts = notDisabledOptionPairs.map((value) => value.optionEl.querySelector('span').innerText.trim());
         // Set input-text to first Option with empty value which indicates a description like "choose your option"
         if (texts.length === 0) {
@@ -3149,7 +3016,7 @@ class FormSelect extends Component {
         if (!li)
             return;
         if (!this.isMultiple)
-            ul.querySelectorAll('li.selected').forEach(li => li.classList.remove('selected'));
+            ul.querySelectorAll('li.selected').forEach((li) => li.classList.remove('selected'));
         li.classList.add('selected');
         li.ariaSelected = 'true';
     }
@@ -3158,17 +3025,23 @@ class FormSelect extends Component {
     }
 }
 
-let _defaults$d = {
-    // Close when date is selected
-    autoClose: false,
+const _defaults$e = {
     // the default output format for the input field value
     format: 'mmm dd, yyyy',
     // Used to create date object from current input string
     parse: null,
+    // The initial condition if the datepicker is based on date range
+    isDateRange: false,
+    // The initial condition if the datepicker is based on multiple date selection
+    isMultipleSelection: false,
     // The initial date to view when first opened
     defaultDate: null,
+    // The initial end date to view when first opened
+    defaultEndDate: null,
     // Make the `defaultDate` the initial selected value
     setDefaultDate: false,
+    // Make the `defaultEndDate` the initial selected value
+    setDefaultEndDate: false,
     disableWeekends: false,
     disableDayFn: null,
     // First day of week (0: Sunday, 1: Monday etc)
@@ -3239,15 +3112,11 @@ let _defaults$d = {
     events: [],
     // callback function
     onSelect: null,
-    onOpen: null,
-    onClose: null,
     onDraw: null
 };
 class Datepicker extends Component {
     id;
-    /** If the picker is open. */
-    isOpen;
-    modal;
+    multiple = false;
     calendarEl;
     /** CLEAR button instance. */
     clearBtn;
@@ -3257,8 +3126,12 @@ class Datepicker extends Component {
     modalEl;
     yearTextEl;
     dateTextEl;
+    endDateEl;
+    dateEls;
     /** The selected Date. */
     date;
+    endDate;
+    dates;
     formats;
     calendars;
     _y;
@@ -3266,7 +3139,7 @@ class Datepicker extends Component {
     static _template;
     constructor(el, options) {
         super(el, options, Datepicker);
-        this.el.M_Datepicker = this;
+        this.el['M_Datepicker'] = this;
         this.options = {
             ...Datepicker.defaults,
             ...options
@@ -3283,16 +3156,15 @@ class Datepicker extends Component {
         this.id = Utils.guid();
         this._setupVariables();
         this._insertHTMLIntoDOM();
-        this._setupModal();
         this._setupEventHandlers();
         if (!this.options.defaultDate) {
             this.options.defaultDate = new Date(Date.parse(this.el.value));
         }
-        let defDate = this.options.defaultDate;
+        const defDate = this.options.defaultDate;
         if (Datepicker._isDate(defDate)) {
             if (this.options.setDefaultDate) {
                 this.setDate(defDate, true);
-                this.setInputValue();
+                this.setInputValue(this.el, defDate);
             }
             else {
                 this.gotoDate(defDate);
@@ -3301,10 +3173,25 @@ class Datepicker extends Component {
         else {
             this.gotoDate(new Date());
         }
-        this.isOpen = false;
+        if (this.options.isDateRange) {
+            this.multiple = true;
+            const defEndDate = this.options.defaultEndDate;
+            if (Datepicker._isDate(defEndDate)) {
+                if (this.options.setDefaultEndDate) {
+                    this.setDate(defEndDate, true, true);
+                    this.setInputValue(this.endDateEl, defEndDate);
+                }
+            }
+        }
+        if (this.options.isMultipleSelection) {
+            this.multiple = true;
+            this.dates = [];
+            this.dateEls = [];
+            this.dateEls.push(el);
+        }
     }
     static get defaults() {
-        return _defaults$d;
+        return _defaults$e;
     }
     /**
      * Initializes instances of Datepicker.
@@ -3318,9 +3205,12 @@ class Datepicker extends Component {
         return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
     }
     static _isWeekend(date) {
-        let day = date.getDay();
+        const day = date.getDay();
         return day === 0 || day === 6;
     }
+    /**
+     * @deprecated as this function has no effect without any return statement or global parameter setter.
+     */
     static _setToStartOfDay(date) {
         if (Datepicker._isDate(date))
             date.setHours(0, 0, 0, 0);
@@ -3336,27 +3226,40 @@ class Datepicker extends Component {
         // weak date comparison (use setToStartOfDay(date) to ensure correct result)
         return a.getTime() === b.getTime();
     }
+    static _compareWithinRange(day, date, dateEnd) {
+        return day.getTime() > date.getTime() && day.getTime() < dateEnd.getTime();
+    }
+    static _comparePastDate(a, b) {
+        return a.getTime() < b.getTime();
+    }
     static getInstance(el) {
-        return el.M_Datepicker;
+        return el['M_Datepicker'];
     }
     destroy() {
         this._removeEventHandlers();
-        this.modal.destroy();
         this.modalEl.remove();
         this.destroySelects();
-        this.el.M_Datepicker = undefined;
+        this.el['M_Datepicker'] = undefined;
     }
     destroySelects() {
-        let oldYearSelect = this.calendarEl.querySelector('.orig-select-year');
+        const oldYearSelect = this.calendarEl.querySelector('.orig-select-year');
         if (oldYearSelect) {
             FormSelect.getInstance(oldYearSelect).destroy();
         }
-        let oldMonthSelect = this.calendarEl.querySelector('.orig-select-month');
+        const oldMonthSelect = this.calendarEl.querySelector('.orig-select-month');
         if (oldMonthSelect) {
             FormSelect.getInstance(oldMonthSelect).destroy();
         }
     }
     _insertHTMLIntoDOM() {
+        // HTML5 input date field support
+        if (this.el.type == 'date') {
+            this.el.classList.add('datepicker-date-input');
+        }
+        if (this.options.isDateRange) {
+            this.endDateEl = this.createDateInput();
+            this.endDateEl.classList.add('datepicker-end-date');
+        }
         if (this.options.showClearBtn) {
             this.clearBtn.style.visibility = '';
             this.clearBtn.innerText = this.options.i18n.clear;
@@ -3374,39 +3277,59 @@ class Datepicker extends Component {
             this.el.parentElement.appendChild(this.modalEl);
         }
     }
-    _setupModal() {
-        this.modalEl.id = 'modal-' + this.id;
-        this.modal = Modal.init(this.modalEl, {
-            onCloseEnd: () => {
-                this.isOpen = false;
-            }
-        });
-    }
     /**
-     * Gets a string representation of the selected date.
+     * Gets a string representation of the given date.
      */
-    toString(format = null) {
+    toString(date = this.date, format = null) {
         format = format || this.options.format;
         if (typeof format === 'function')
-            return format(this.date);
-        if (!Datepicker._isDate(this.date))
+            return format(date);
+        if (!Datepicker._isDate(date))
             return '';
         // String Format
+        return this.formatDate(date, format);
+    }
+    /**
+     * Returns the formatted date.
+     */
+    formatDate(date, format) {
         const formatArray = format.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g);
-        const formattedDate = formatArray
-            .map(label => this.formats[label] ? this.formats[label]() : label)
+        return formatArray
+            .map((label) => (this.formats[label] ? this.formats[label](date) : label))
             .join('');
-        return formattedDate;
+    }
+    /**
+     * Sets date from input field.
+     */
+    setDateFromInput(el) {
+        const date = new Date(Date.parse(el.value));
+        this.setDate(date, false, el == this.endDateEl, true);
     }
     /**
      * Set a date on the datepicker.
      * @param date Date to set on the datepicker.
      * @param preventOnSelect Undocumented as of 5 March 2018.
+     * @param isEndDate
+     * @param fromUserInput
      */
-    setDate(date = null, preventOnSelect = false) {
+    setDate(date = null, preventOnSelect = false, isEndDate = false, fromUserInput = false) {
+        const selectedDate = this.validateDate(date);
+        if (!selectedDate) {
+            return;
+        }
+        if (!this.options.isMultipleSelection)
+            this.setSingleDate(selectedDate, isEndDate);
+        else if (!fromUserInput)
+            this.setMultiDate(selectedDate);
+        Datepicker._setToStartOfDay(selectedDate);
+        this.gotoDate(selectedDate);
+        if (!preventOnSelect && typeof this.options.onSelect === 'function') {
+            this.options.onSelect.call(this, selectedDate);
+        }
+    }
+    validateDate(date) {
         if (!date) {
-            this.date = null;
-            this._renderDateDisplay();
+            this._renderDateDisplay(date);
             return this.draw();
         }
         if (typeof date === 'string') {
@@ -3415,36 +3338,114 @@ class Datepicker extends Component {
         if (!Datepicker._isDate(date)) {
             return;
         }
-        let min = this.options.minDate, max = this.options.maxDate;
+        const min = this.options.minDate, max = this.options.maxDate;
         if (Datepicker._isDate(min) && date < min) {
             date = min;
         }
         else if (Datepicker._isDate(max) && date > max) {
             date = max;
         }
-        this.date = new Date(date.getTime());
-        this._renderDateDisplay();
-        Datepicker._setToStartOfDay(this.date);
-        this.gotoDate(this.date);
-        if (!preventOnSelect && typeof this.options.onSelect === 'function') {
-            this.options.onSelect.call(this, this.date);
+        return new Date(date.getTime());
+    }
+    /**
+     * Set a single date on the datepicker.
+     * @param date Date to set on the datepicker.
+     * @param isEndDate
+     */
+    setSingleDate(date, isEndDate) {
+        if (!isEndDate) {
+            this.date = date;
+        }
+        else if (isEndDate) {
+            this.endDate = date;
+        }
+    }
+    /**
+     * Set a multi date on the datepicker.
+     * @param date Date to set on the datepicker.
+     */
+    setMultiDate(date) {
+        const selectedDate = this.dates?.find((item) => {
+            return item.getTime() === date.getTime() ? item : false;
+        });
+        if (!selectedDate) {
+            this.dates.push(date);
+        }
+        else {
+            this.dates.splice(this.dates.indexOf(selectedDate), 1);
+        }
+        this.dates.sort((a, b) => (a.getTime() < b.getTime() ? -1 : 0));
+    }
+    /**
+     * Sets the data-date attribute on the date input field
+     */
+    setDataDate(el, date) {
+        el.setAttribute('data-date', this.toString(date));
+    }
+    /**
+     * Sets dates on the input values.
+     */
+    setInputValues() {
+        if (!this.options?.isMultipleSelection) {
+            this.setInputValue(this.el, this.date);
+            if (this.options?.isDateRange) {
+                this.setInputValue(this.endDateEl, this.endDate);
+            }
+            return;
         }
+        this.setMultipleSelectionInputValues();
+    }
+    setMultipleSelectionInputValues() {
+        const dateElsArr = Array.from(this.dateEls).filter((el, index) => {
+            if (index > this.dates.length - 1)
+                return el;
+        });
+        dateElsArr.forEach((el) => {
+            el.remove();
+        });
+        this.dates.forEach((date, index) => {
+            if (Array.from(this.dateEls)[index]) {
+                this.setInputValue(this.dateEls[index], date);
+                return;
+            }
+            const dateEl = this.createDateInput();
+            this.setInputValue(dateEl, date);
+            this.dateEls.push(dateEl);
+        });
     }
     /**
-     * Sets current date as the input value.
+     * Sets given date as the input value on the given element.
      */
-    setInputValue() {
-        this.el.value = this.toString();
-        this.el.dispatchEvent(new CustomEvent('change', { bubbles: true, cancelable: true, composed: true, detail: { firedBy: this } }));
-    }
-    _renderDateDisplay() {
-        let displayDate = Datepicker._isDate(this.date) ? this.date : new Date();
-        let i18n = this.options.i18n;
-        let day = i18n.weekdaysShort[displayDate.getDay()];
-        let month = i18n.monthsShort[displayDate.getMonth()];
-        let date = displayDate.getDate();
-        this.yearTextEl.innerHTML = displayDate.getFullYear().toString();
-        this.dateTextEl.innerHTML = `${day}, ${month} ${date}`;
+    setInputValue(el, date) {
+        console.log('setinputvalue');
+        if (el.type == 'date') {
+            this.setDataDate(el, date);
+            el.value = this.formatDate(date, 'yyyy-mm-dd');
+        }
+        else {
+            el.value = this.toString(date);
+        }
+        this.el.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail: { firedBy: this }
+        }));
+    }
+    /**
+     * Renders the date in the modal head section.
+     */
+    _renderDateDisplay(date, endDate = null) {
+        const displayDate = Datepicker._isDate(date) ? date : new Date();
+        // this.yearTextEl.innerHTML = displayDate.getFullYear().toString();
+        // @todo should we include an option for date formatting by component options?
+        if (!this.options.isDateRange) {
+            this.dateTextEl.innerHTML = this.formatDate(displayDate, 'ddd, mmm d');
+        }
+        else {
+            const displayEndDate = Datepicker._isDate(endDate) ? endDate : new Date();
+            this.dateTextEl.innerHTML = `${this.formatDate(displayDate, 'mmm d')} - ${this.formatDate(displayEndDate, 'mmm d')}`;
+        }
     }
     /**
      * Change date view to a specific date on the datepicker.
@@ -3456,7 +3457,7 @@ class Datepicker extends Component {
             return;
         }
         if (this.calendars) {
-            let firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1), lastVisibleDate = new Date(this.calendars[this.calendars.length - 1].year, this.calendars[this.calendars.length - 1].month, 1), visibleDate = date.getTime();
+            const firstVisibleDate = new Date(this.calendars[0].year, this.calendars[0].month, 1), lastVisibleDate = new Date(this.calendars[this.calendars.length - 1].year, this.calendars[this.calendars.length - 1].month, 1), visibleDate = date.getTime();
             // get the end of the month
             lastVisibleDate.setMonth(lastVisibleDate.getMonth() + 1);
             lastVisibleDate.setDate(lastVisibleDate.getDate() - 1);
@@ -3497,15 +3498,16 @@ class Datepicker extends Component {
         this.adjustCalendars();
     }
     render(year, month, randId) {
-        let opts = this.options, now = new Date(), days = Datepicker._getDaysInMonth(year, month), before = new Date(year, month, 1).getDay(), data = [], row = [];
+        const now = new Date(), days = Datepicker._getDaysInMonth(year, month), data = [];
+        let before = new Date(year, month, 1).getDay(), row = [];
         Datepicker._setToStartOfDay(now);
-        if (opts.firstDay > 0) {
-            before -= opts.firstDay;
+        if (this.options.firstDay > 0) {
+            before -= this.options.firstDay;
             if (before < 0) {
                 before += 7;
             }
         }
-        let previousMonth = month === 0 ? 11 : month - 1, nextMonth = month === 11 ? 0 : month + 1, yearOfPreviousMonth = month === 0 ? year - 1 : year, yearOfNextMonth = month === 11 ? year + 1 : year, daysInPreviousMonth = Datepicker._getDaysInMonth(yearOfPreviousMonth, previousMonth);
+        const previousMonth = month === 0 ? 11 : month - 1, nextMonth = month === 11 ? 0 : month + 1, yearOfPreviousMonth = month === 0 ? year - 1 : year, yearOfNextMonth = month === 11 ? year + 1 : year, daysInPreviousMonth = Datepicker._getDaysInMonth(yearOfPreviousMonth, previousMonth);
         let cells = days + before, after = cells;
         while (after > 7) {
             after -= 7;
@@ -3513,12 +3515,27 @@ class Datepicker extends Component {
         cells += 7 - after;
         let isWeekSelected = false;
         for (let i = 0, r = 0; i < cells; i++) {
-            let day = new Date(year, month, 1 + (i - before)), isSelected = Datepicker._isDate(this.date)
-                ? Datepicker._compareDates(day, this.date)
-                : false, isToday = Datepicker._compareDates(day, now), hasEvent = opts.events.indexOf(day.toDateString()) !== -1 ? true : false, isEmpty = i < before || i >= days + before, dayNumber = 1 + (i - before), monthNumber = month, yearNumber = year, isStartRange = opts.startRange && Datepicker._compareDates(opts.startRange, day), isEndRange = opts.endRange && Datepicker._compareDates(opts.endRange, day), isInRange = opts.startRange && opts.endRange && opts.startRange < day && day < opts.endRange, isDisabled = (opts.minDate && day < opts.minDate) ||
-                (opts.maxDate && day > opts.maxDate) ||
-                (opts.disableWeekends && Datepicker._isWeekend(day)) ||
-                (opts.disableDayFn && opts.disableDayFn(day));
+            const day = new Date(year, month, 1 + (i - before)), isToday = Datepicker._compareDates(day, now), hasEvent = this.options.events.indexOf(day.toDateString()) !== -1, isEmpty = i < before || i >= days + before, isStartRange = this.options.startRange && Datepicker._compareDates(this.options.startRange, day), isEndRange = this.options.endRange && Datepicker._compareDates(this.options.endRange, day), isInRange = this.options.startRange &&
+                this.options.endRange &&
+                this.options.startRange < day &&
+                day < this.options.endRange, isDisabled = (this.options.minDate && day < this.options.minDate) ||
+                (this.options.maxDate && day > this.options.maxDate) ||
+                (this.options.disableWeekends && Datepicker._isWeekend(day)) ||
+                (this.options.disableDayFn && this.options.disableDayFn(day)), isDateRange = this.options.isDateRange &&
+                Datepicker._isDate(this.endDate) &&
+                Datepicker._compareWithinRange(day, this.date, this.endDate);
+            let dayNumber = 1 + (i - before), monthNumber = month, yearNumber = year;
+            let isSelected = false;
+            if (Datepicker._isDate(this.date)) {
+                isSelected = Datepicker._compareDates(day, this.date);
+            }
+            if (!isSelected && Datepicker._isDate(this.endDate)) {
+                isSelected = Datepicker._compareDates(day, this.endDate);
+            }
+            if (this.options.isMultipleSelection &&
+                this.dates?.some((item) => item.getTime() === day.getTime())) {
+                isSelected = true;
+            }
             if (isEmpty) {
                 if (i < before) {
                     dayNumber = daysInPreviousMonth + dayNumber;
@@ -3531,7 +3548,7 @@ class Datepicker extends Component {
                     yearNumber = yearOfNextMonth;
                 }
             }
-            let dayConfig = {
+            const dayConfig = {
                 day: dayNumber,
                 month: monthNumber,
                 year: yearNumber,
@@ -3543,20 +3560,21 @@ class Datepicker extends Component {
                 isStartRange: isStartRange,
                 isEndRange: isEndRange,
                 isInRange: isInRange,
-                showDaysInNextAndPreviousMonths: opts.showDaysInNextAndPreviousMonths
+                showDaysInNextAndPreviousMonths: this.options.showDaysInNextAndPreviousMonths,
+                isDateRange: isDateRange
             };
             row.push(this.renderDay(dayConfig));
             if (++r === 7) {
-                data.push(this.renderRow(row, opts.isRTL, isWeekSelected));
+                data.push(this.renderRow(row, this.options.isRTL, isWeekSelected));
                 row = [];
                 r = 0;
                 isWeekSelected = false;
             }
         }
-        return this.renderTable(opts, data, randId);
+        return this.renderTable(this.options, data, randId);
     }
     renderDay(opts) {
-        let arr = [];
+        const arr = [];
         let ariaSelected = 'false';
         if (opts.isEmpty) {
             if (opts.showDaysInNextAndPreviousMonths) {
@@ -3567,6 +3585,7 @@ class Datepicker extends Component {
                 return '<td class="is-empty"></td>';
             }
         }
+        // @todo wouldn't it be better defining opts class mapping and looping trough opts?
         if (opts.isDisabled) {
             arr.push('is-disabled');
         }
@@ -3577,18 +3596,26 @@ class Datepicker extends Component {
             arr.push('is-selected');
             ariaSelected = 'true';
         }
+        // @todo should we create this additional css class?
         if (opts.hasEvent) {
             arr.push('has-event');
         }
+        // @todo should we create this additional css class?
         if (opts.isInRange) {
             arr.push('is-inrange');
         }
+        // @todo should we create this additional css class?
         if (opts.isStartRange) {
             arr.push('is-startrange');
         }
+        // @todo should we create this additional css class?
         if (opts.isEndRange) {
             arr.push('is-endrange');
         }
+        // @todo create additional css class
+        if (opts.isDateRange) {
+            arr.push('is-daterange');
+        }
         return (`<td data-day="${opts.day}" class="${arr.join(' ')}" aria-selected="${ariaSelected}">` +
             `<button class="datepicker-day-button" type="button" data-year="${opts.year}" data-month="${opts.month}" data-day="${opts.day}">${opts.day}</button>` +
             '</td>');
@@ -3609,7 +3636,8 @@ class Datepicker extends Component {
             '</table></div>');
     }
     renderHead(opts) {
-        let i, arr = [];
+        const arr = [];
+        let i;
         for (i = 0; i < 7; i++) {
             arr.push(`<th scope="col"><abbr title="${this.renderDayName(opts, i)}">${this.renderDayName(opts, i, true)}</abbr></th>`);
         }
@@ -3619,10 +3647,11 @@ class Datepicker extends Component {
         return '<tbody>' + rows.join('') + '</tbody>';
     }
     renderTitle(instance, c, year, month, refYear, randId) {
-        let i, j, arr, opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear, html = '<div id="' +
+        const opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear;
+        let i, j, arr = [], html = '<div id="' +
             randId +
-            '" class="datepicker-controls" role="heading" aria-live="assertive">', monthHtml, yearHtml, prev = true, next = true;
-        for (arr = [], i = 0; i < 12; i++) {
+            '" class="datepicker-controls" role="heading" aria-live="assertive">', prev = true, next = true;
+        for (i = 0; i < 12; i++) {
             arr.push('<option value="' +
                 (year === refYear ? i - c : 12 + i - c) +
                 '"' +
@@ -3634,7 +3663,9 @@ class Datepicker extends Component {
                 opts.i18n.months[i] +
                 '</option>');
         }
-        monthHtml = '<select class="datepicker-select orig-select-month" tabindex="-1">' + arr.join('') + '</select>';
+        const monthHtml = '<select class="datepicker-select orig-select-month" tabindex="-1">' +
+            arr.join('') +
+            '</select>';
         if (Array.isArray(opts.yearRange)) {
             i = opts.yearRange[0];
             j = opts.yearRange[1] + 1;
@@ -3650,8 +3681,8 @@ class Datepicker extends Component {
         }
         if (opts.yearRangeReverse)
             arr.reverse();
-        yearHtml = `<select class="datepicker-select orig-select-year" tabindex="-1">${arr.join('')}</select>`;
-        let leftArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
+        const yearHtml = `<select class="datepicker-select orig-select-year" tabindex="-1">${arr.join('')}</select>`;
+        const leftArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
         html += `<button class="month-prev${prev ? '' : ' is-disabled'} btn-flat" type="button">${leftArrow}</button>`;
         html += '<div class="selects-container">';
         if (opts.showMonthAfterYear) {
@@ -3667,15 +3698,14 @@ class Datepicker extends Component {
         if (isMaxYear && (month === 11 || opts.maxMonth <= month)) {
             next = false;
         }
-        let rightArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>';
+        const rightArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>';
         html += `<button class="month-next${next ? '' : ' is-disabled'} btn-flat" type="button">${rightArrow}</button>`;
         return (html += '</div>');
     }
     // refresh HTML
-    draw(force = false) {
-        if (!this.isOpen && !force)
-            return;
-        let opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth, html = '', randId;
+    draw() {
+        const opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth;
+        let html = '';
         if (this._y <= minYear) {
             this._y = minYear;
             if (!isNaN(minMonth) && this._m < minMonth) {
@@ -3688,22 +3718,26 @@ class Datepicker extends Component {
                 this._m = maxMonth;
             }
         }
-        randId =
-            'datepicker-title-' +
-                Math.random()
-                    .toString(36)
-                    .replace(/[^a-z]+/g, '')
-                    .substr(0, 2);
+        const randId = 'datepicker-title-' +
+            Math.random()
+                .toString(36)
+                .replace(/[^a-z]+/g, '')
+                .substr(0, 2);
         for (let c = 0; c < 1; c++) {
-            this._renderDateDisplay();
+            if (!this.options.isDateRange) {
+                this._renderDateDisplay(this.date);
+            }
+            else {
+                this._renderDateDisplay(this.date, this.endDate);
+            }
             html +=
                 this.renderTitle(this, c, this.calendars[c].year, this.calendars[c].month, this.calendars[0].year, randId) + this.render(this.calendars[c].year, this.calendars[c].month, randId);
         }
         this.destroySelects();
         this.calendarEl.innerHTML = html;
         // Init Materialize Select
-        let yearSelect = this.calendarEl.querySelector('.orig-select-year');
-        let monthSelect = this.calendarEl.querySelector('.orig-select-month');
+        const yearSelect = this.calendarEl.querySelector('.orig-select-year');
+        const monthSelect = this.calendarEl.querySelector('.orig-select-month');
         FormSelect.init(yearSelect, {
             classes: 'select-year',
             dropdownOptions: { container: document.body, constrainWidth: false }
@@ -3724,7 +3758,7 @@ class Datepicker extends Component {
         this.el.addEventListener('keydown', this._handleInputKeydown);
         this.el.addEventListener('change', this._handleInputChange);
         this.calendarEl.addEventListener('click', this._handleCalendarClick);
-        this.doneBtn.addEventListener('click', this._finishSelection);
+        this.doneBtn.addEventListener('click', () => this.setInputValues());
         this.cancelBtn.addEventListener('click', this.close);
         if (this.options.showClearBtn) {
             this.clearBtn.addEventListener('click', this._handleClearClick);
@@ -3740,40 +3774,41 @@ class Datepicker extends Component {
         if (this.options.showClearBtn) {
             this.clearBtn = this.modalEl.querySelector('.datepicker-clear');
         }
+        // TODO: This should not be part of the datepicker
         this.doneBtn = this.modalEl.querySelector('.datepicker-done');
         this.cancelBtn = this.modalEl.querySelector('.datepicker-cancel');
         this.formats = {
-            d: () => {
-                return this.date.getDate();
+            d: (date) => {
+                return date.getDate();
             },
-            dd: () => {
-                let d = this.date.getDate();
+            dd: (date) => {
+                const d = date.getDate();
                 return (d < 10 ? '0' : '') + d;
             },
-            ddd: () => {
-                return this.options.i18n.weekdaysShort[this.date.getDay()];
+            ddd: (date) => {
+                return this.options.i18n.weekdaysShort[date.getDay()];
             },
-            dddd: () => {
-                return this.options.i18n.weekdays[this.date.getDay()];
+            dddd: (date) => {
+                return this.options.i18n.weekdays[date.getDay()];
             },
-            m: () => {
-                return this.date.getMonth() + 1;
+            m: (date) => {
+                return date.getMonth() + 1;
             },
-            mm: () => {
-                let m = this.date.getMonth() + 1;
+            mm: (date) => {
+                const m = date.getMonth() + 1;
                 return (m < 10 ? '0' : '') + m;
             },
-            mmm: () => {
-                return this.options.i18n.monthsShort[this.date.getMonth()];
+            mmm: (date) => {
+                return this.options.i18n.monthsShort[date.getMonth()];
             },
-            mmmm: () => {
-                return this.options.i18n.months[this.date.getMonth()];
+            mmmm: (date) => {
+                return this.options.i18n.months[date.getMonth()];
             },
-            yy: () => {
-                return ('' + this.date.getFullYear()).slice(2);
+            yy: (date) => {
+                return ('' + date.getFullYear()).slice(2);
             },
-            yyyy: () => {
-                return this.date.getFullYear();
+            yyyy: (date) => {
+                return date.getFullYear();
             }
         };
     }
@@ -3782,28 +3817,42 @@ class Datepicker extends Component {
         this.el.removeEventListener('keydown', this._handleInputKeydown);
         this.el.removeEventListener('change', this._handleInputChange);
         this.calendarEl.removeEventListener('click', this._handleCalendarClick);
+        if (this.options.isDateRange) {
+            this.endDateEl.removeEventListener('click', this._handleInputClick);
+            this.endDateEl.removeEventListener('keypress', this._handleInputKeydown);
+            this.endDateEl.removeEventListener('change', this._handleInputChange);
+        }
     }
-    _handleInputClick = () => {
-        this.open();
+    _handleInputClick = (e) => {
+        // Prevents default browser datepicker modal rendering
+        if (e.type == 'date') {
+            e.preventDefault();
+        }
+        this.setDateFromInput(e.target);
+        this.draw();
+        this.gotoDate(e.target === this.el ? this.date : this.endDate);
     };
     _handleInputKeydown = (e) => {
         if (Utils.keys.ENTER.includes(e.key)) {
             e.preventDefault();
-            this.open();
+            this.setDateFromInput(e.target);
+            this.draw();
         }
     };
     _handleCalendarClick = (e) => {
-        if (!this.isOpen)
-            return;
-        const target = (e.target);
+        const target = e.target;
         if (!target.classList.contains('is-disabled')) {
             if (target.classList.contains('datepicker-day-button') &&
                 !target.classList.contains('is-empty') &&
                 !target.parentElement.classList.contains('is-disabled')) {
-                this.setDate(new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day')));
-                if (this.options.autoClose) {
-                    this._finishSelection();
+                const selectedDate = new Date(e.target.getAttribute('data-year'), e.target.getAttribute('data-month'), e.target.getAttribute('data-day'));
+                if (!this.multiple || (this.multiple && this.options.isMultipleSelection)) {
+                    this.setDate(selectedDate);
                 }
+                if (this.options.isDateRange) {
+                    this._handleDateRangeCalendarClick(selectedDate);
+                }
+                this._finishSelection();
             }
             else if (target.closest('.month-prev')) {
                 this.prevMonth();
@@ -3813,10 +3862,24 @@ class Datepicker extends Component {
             }
         }
     };
+    _handleDateRangeCalendarClick = (date) => {
+        if (this.endDate == null || !Datepicker._compareDates(date, this.endDate)) {
+            if (Datepicker._isDate(this.date) && Datepicker._comparePastDate(date, this.date)) {
+                return;
+            }
+            this.setDate(date, false, Datepicker._isDate(this.date));
+            return;
+        }
+        this._clearDates();
+        this.draw();
+    };
     _handleClearClick = () => {
+        this._clearDates();
+        this.setInputValues();
+    };
+    _clearDates = () => {
         this.date = null;
-        this.setInputValue();
-        this.close();
+        this.endDate = null;
     };
     _handleMonthChange = (e) => {
         this.gotoMonth(e.target.value);
@@ -3840,19 +3903,28 @@ class Datepicker extends Component {
     }
     _handleInputChange = (e) => {
         let date;
+        const el = e.target;
         // Prevent change event from being fired when triggered by the plugin
         if (e['detail']?.firedBy === this)
             return;
+        // Prevent change event from being fired if an end date is set without a start date
+        if (el == this.endDateEl && !this.date)
+            return;
         if (this.options.parse) {
-            date = this.options.parse(this.el.value, typeof this.options.format === "function"
+            date = this.options.parse(e.target.value, typeof this.options.format === 'function'
                 ? this.options.format(new Date(this.el.value))
                 : this.options.format);
         }
         else {
-            date = new Date(Date.parse(this.el.value));
+            date = new Date(Date.parse(e.target.value));
+        }
+        if (Datepicker._isDate(date)) {
+            this.setDate(date, false, el == this.endDateEl, true);
+            if (e.type == 'date') {
+                this.setDataDate(e, date);
+                this.setInputValues();
+            }
         }
-        if (Datepicker._isDate(date))
-            this.setDate(date);
     };
     renderDayName(opts, day, abbr = false) {
         day += opts.firstDay;
@@ -3861,41 +3933,31 @@ class Datepicker extends Component {
         }
         return abbr ? opts.i18n.weekdaysAbbrev[day] : opts.i18n.weekdays[day];
     }
+    createDateInput() {
+        const dateInput = this.el.cloneNode(true);
+        dateInput.addEventListener('click', this._handleInputClick);
+        dateInput.addEventListener('keypress', this._handleInputKeydown);
+        dateInput.addEventListener('change', this._handleInputChange);
+        this.el.parentElement.appendChild(dateInput);
+        return dateInput;
+    }
     // Set input value to the selected date and close Datepicker
     _finishSelection = () => {
-        this.setInputValue();
+        this.setInputValues();
         this.close();
     };
-    /**
-     * Open datepicker.
-     */
-    open = () => {
-        if (this.isOpen)
-            return;
-        this.isOpen = true;
-        if (typeof this.options.onOpen === 'function') {
-            this.options.onOpen.call(this);
-        }
-        this.draw();
-        this.modal.open(undefined);
+    // deprecated
+    open() {
+        console.warn('Datepicker.open() is deprecated. Remove this method and wrap in modal yourself.');
         return this;
-    };
-    /**
-     * Close datepicker.
-     */
-    close = () => {
-        if (!this.isOpen)
-            return;
-        this.isOpen = false;
-        if (typeof this.options.onClose === 'function') {
-            this.options.onClose.call(this);
-        }
-        this.modal.close();
+    }
+    close() {
+        console.warn('Datepicker.close() is deprecated. Remove this method and wrap in modal yourself.');
         return this;
-    };
+    }
     static {
         Datepicker._template = `
-      <div class="modal datepicker-modal">
+      <div class="datepicker-modal">
         <div class="modal-content datepicker-container">
           <div class="datepicker-date-display">
             <span class="year-text"></span>
@@ -3918,15 +3980,46 @@ class Datepicker extends Component {
 
 class Forms {
     /**
-     * Resizes the given TextArea after updating the
-     *  value content dynamically.
-     * @param textarea TextArea to be resized
+     * Checks if the label has validation and apply
+     * the correct class and styles
+     * @param textfield
      */
-    static textareaAutoResize(textarea) {
-        if (!textarea) {
-            console.error('No textarea element found');
+    static validateField(textfield) {
+        if (!textfield) {
+            console.error('No text field element found');
             return;
         }
+        const hasLength = textfield.getAttribute('data-length') !== null;
+        const lenAttr = parseInt(textfield.getAttribute('data-length'));
+        const len = textfield.value.length;
+        if (len === 0 &&
+            textfield.validity.badInput === false &&
+            !textfield.required &&
+            textfield.classList.contains('validate')) {
+            textfield.classList.remove('invalid');
+        }
+        else if (textfield.classList.contains('validate')) {
+            // Check for character counter attributes
+            if ((textfield.validity.valid && hasLength && len <= lenAttr) ||
+                (textfield.validity.valid && !hasLength)) {
+                textfield.classList.remove('invalid');
+            }
+            else {
+                textfield.classList.add('invalid');
+            }
+        }
+    }
+    /**
+     * Resizes the given TextArea after updating the
+     *  value content dynamically.
+     * @param e EventTarget
+     */
+    static textareaAutoResize(e) {
+        const textarea = e;
+        // if (!textarea) {
+        //   console.error('No textarea element found');
+        //   return;
+        // }
         // Textarea Auto Resize
         let hiddenDiv = document.querySelector('.hiddendiv');
         if (!hiddenDiv) {
@@ -3966,15 +4059,14 @@ class Forms {
             hiddenDiv.style.whiteSpace = 'pre'; //.css('white-space', 'pre');
         }
         hiddenDiv.innerText = textarea.value + '\n';
-        const content = hiddenDiv.innerHTML.replace(/\n/g, '<br>');
-        hiddenDiv.innerHTML = content;
+        hiddenDiv.innerHTML = hiddenDiv.innerHTML.replace(/\n/g, '<br>');
         // When textarea is hidden, width goes crazy.
         // Approximate with half of window size
         if (textarea.offsetWidth > 0 && textarea.offsetHeight > 0) {
             hiddenDiv.style.width = textarea.getBoundingClientRect().width + 'px'; // ('width', textarea.width() + 'px');
         }
         else {
-            hiddenDiv.style.width = (window.innerWidth / 2) + 'px'; //css('width', window.innerWidth / 2 + 'px');
+            hiddenDiv.style.width = window.innerWidth / 2 + 'px'; //css('width', window.innerWidth / 2 + 'px');
         }
         // Resize if the new height is greater than the
         // original height of the textarea
@@ -3993,10 +4085,22 @@ class Forms {
         }
         textarea.setAttribute('previous-length', textarea.value.length.toString());
     }
-    ;
     static Init() {
         if (typeof document !== 'undefined')
-            document?.addEventListener("DOMContentLoaded", () => {
+            document?.addEventListener('DOMContentLoaded', () => {
+                document.addEventListener('change', (e) => {
+                    const target = e.target;
+                    if (target instanceof HTMLInputElement) {
+                        if (target.value.length !== 0 || target.getAttribute('placeholder') !== null) {
+                            for (const child of target.parentNode.children) {
+                                if (child.tagName == 'label') {
+                                    child.classList.add('active');
+                                }
+                            }
+                        }
+                        Forms.validateField(target);
+                    }
+                });
                 document.addEventListener('keyup', (e) => {
                     const target = e.target;
                     // Radio and Checkbox focus class
@@ -4004,15 +4108,21 @@ class Forms {
                         // TAB, check if tabbing to radio or checkbox.
                         if (Utils.keys.TAB.includes(e.key)) {
                             target.classList.add('tabbed');
-                            target.addEventListener('blur', e => target.classList.remove('tabbed'), { once: true });
+                            target.addEventListener('blur', () => target.classList.remove('tabbed'), {
+                                once: true
+                            });
                         }
                     }
                 });
-                document.querySelectorAll('.materialize-textarea').forEach((textArea) => {
+                document
+                    .querySelectorAll('.materialize-textarea')
+                    .forEach((textArea) => {
                     Forms.InitTextarea(textArea);
                 });
                 // File Input Path
-                document.querySelectorAll('.file-field input[type="file"]').forEach((fileInput) => {
+                document
+                    .querySelectorAll('.file-field input[type="file"]')
+                    .forEach((fileInput) => {
                     Forms.InitFileInputPath(fileInput);
                 });
             });
@@ -4022,11 +4132,11 @@ class Forms {
         textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
         textarea.setAttribute('previous-length', textarea.value.length.toString());
         Forms.textareaAutoResize(textarea);
-        textarea.addEventListener('keyup', e => Forms.textareaAutoResize(textarea));
-        textarea.addEventListener('keydown', e => Forms.textareaAutoResize(textarea));
+        textarea.addEventListener('keyup', (e) => Forms.textareaAutoResize(e.target));
+        textarea.addEventListener('keydown', (e) => Forms.textareaAutoResize(e.target));
     }
     static InitFileInputPath(fileInput) {
-        fileInput.addEventListener('change', e => {
+        fileInput.addEventListener('change', () => {
             const fileField = fileInput.closest('.file-field');
             const pathInput = fileField.querySelector('input.file-path');
             const files = fileInput.files;
@@ -4040,7 +4150,7 @@ class Forms {
     }
 }
 
-const _defaults$c = {
+const _defaults$d = {
     inDuration: 275,
     outDuration: 200,
     onOpenStart: null,
@@ -4072,7 +4182,7 @@ class Materialbox extends Component {
     _photoCaption;
     constructor(el, options) {
         super(el, options, Materialbox);
-        this.el.M_Materialbox = this;
+        this.el['M_Materialbox'] = this;
         this.options = {
             ...Materialbox.defaults,
             ...options
@@ -4085,13 +4195,14 @@ class Materialbox extends Component {
         this.originalHeight = 0;
         this.originInlineStyles = this.el.getAttribute('style');
         this.caption = this.el.getAttribute('data-caption') || '';
+        this.el.tabIndex = 0;
         // Wrap
         this.el.before(this.placeholder);
         this.placeholder.append(this.el);
         this._setupEventHandlers();
     }
     static get defaults() {
-        return _defaults$c;
+        return _defaults$d;
     }
     /**
      * Initializes instances of MaterialBox.
@@ -4102,11 +4213,11 @@ class Materialbox extends Component {
         return super.init(els, options, Materialbox);
     }
     static getInstance(el) {
-        return el.M_Materialbox;
+        return el['M_Materialbox'];
     }
     destroy() {
         this._removeEventHandlers();
-        this.el.M_Materialbox = undefined;
+        this.el['M_Materialbox'] = undefined;
         // Unwrap image
         //this.placeholder.after(this.el).remove();
         this.placeholder.remove();
@@ -4114,11 +4225,21 @@ class Materialbox extends Component {
     }
     _setupEventHandlers() {
         this.el.addEventListener('click', this._handleMaterialboxClick);
+        this.el.addEventListener('keypress', this._handleMaterialboxKeypress);
     }
     _removeEventHandlers() {
         this.el.removeEventListener('click', this._handleMaterialboxClick);
+        this.el.removeEventListener('keypress', this._handleMaterialboxKeypress);
     }
     _handleMaterialboxClick = () => {
+        this._handleMaterialboxToggle();
+    };
+    _handleMaterialboxKeypress = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleMaterialboxToggle();
+        }
+    };
+    _handleMaterialboxToggle = () => {
         // If already modal, return to original
         if (this.doneAnimating === false || (this.overlayActive && this.doneAnimating))
             this.close();
@@ -4153,8 +4274,8 @@ class Materialbox extends Component {
         const box = el.getBoundingClientRect();
         const docElem = document.documentElement;
         return {
-            top: box.top + window.pageYOffset - docElem.clientTop,
-            left: box.left + window.pageXOffset - docElem.clientLeft
+            top: box.top + window.scrollY - docElem.clientTop,
+            left: box.left + window.scrollX - docElem.clientLeft
         };
     }
     _updateVars() {
@@ -4181,14 +4302,18 @@ class Materialbox extends Component {
             // to
             this.el.style.height = this.newHeight + 'px';
             this.el.style.width = this.newWidth + 'px';
-            this.el.style.left = (Utils.getDocumentScrollLeft() +
-                this.windowWidth / 2 -
-                this._offset(this.placeholder).left -
-                this.newWidth / 2) + 'px';
-            this.el.style.top = (Utils.getDocumentScrollTop() +
-                this.windowHeight / 2 -
-                this._offset(this.placeholder).top -
-                this.newHeight / 2) + 'px';
+            this.el.style.left =
+                Utils.getDocumentScrollLeft() +
+                    this.windowWidth / 2 -
+                    this._offset(this.placeholder).left -
+                    this.newWidth / 2 +
+                    'px';
+            this.el.style.top =
+                Utils.getDocumentScrollTop() +
+                    this.windowHeight / 2 -
+                    this._offset(this.placeholder).top -
+                    this.newHeight / 2 +
+                    'px';
         }, 1);
         setTimeout(() => {
             this.doneAnimating = true;
@@ -4245,12 +4370,13 @@ class Materialbox extends Component {
             if (this.attrHeight)
                 this.el.setAttribute('height', this.attrHeight.toString());
             this.el.removeAttribute('style');
-            this.originInlineStyles && this.el.setAttribute('style', this.originInlineStyles);
+            if (this.originInlineStyles)
+                this.el.setAttribute('style', this.originInlineStyles);
             // Remove class
             this.el.classList.remove('active');
             this.doneAnimating = true;
             // Remove overflow overrides on ancestors
-            this._changedAncestorList.forEach(anchestor => anchestor.style.overflow = '');
+            this._changedAncestorList.forEach((anchestor) => (anchestor.style.overflow = ''));
             // onCloseEnd callback
             if (typeof this.options.onCloseEnd === 'function')
                 this.options.onCloseEnd.call(this, this.el);
@@ -4284,7 +4410,7 @@ class Materialbox extends Component {
     _addOverlay() {
         this._overlay = document.createElement('div');
         this._overlay.id = 'materialbox-overlay';
-        this._overlay.addEventListener('click', e => {
+        this._overlay.addEventListener('click', () => {
             if (this.doneAnimating)
                 this.close();
         }, { once: true });
@@ -4400,7 +4526,75 @@ class Materialbox extends Component {
     };
 }
 
-let _defaults$b = {
+const _defaults$c = {
+    opacity: 0.5,
+    inDuration: 250,
+    outDuration: 250,
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null,
+    preventScrolling: true,
+    dismissible: true,
+    startingTop: '4%',
+    endingTop: '10%'
+};
+class Modal extends Component {
+    constructor(el, options) {
+        super(el, options, Modal);
+        this.el['M_Modal'] = this;
+        this.options = {
+            ...Modal.defaults,
+            ...options
+        };
+        this.el.tabIndex = 0;
+        this._setupEventHandlers();
+    }
+    static get defaults() {
+        return _defaults$c;
+    }
+    static init(els, options = {}) {
+        return super.init(els, options, Modal);
+    }
+    static getInstance(el) {
+        return el['M_Modal'];
+    }
+    destroy() { }
+    _setupEventHandlers() { }
+    _removeEventHandlers() { }
+    _handleTriggerClick() { }
+    _handleOverlayClick() { }
+    _handleModalCloseClick() { }
+    _handleKeydown() { }
+    _handleFocus() { }
+    open() {
+        return this;
+    }
+    close() {
+        return this;
+    }
+    // Experimental!
+    static #createHtml(config) {
+        return `<dialog id="modal1" class="modal">
+      ${config.header ? '<div class="modal-header">' + config.header + '</div>' : ''}
+      <div class="modal-content">
+        ${config.content}
+      </div>
+      ${config.header ? '<div class="modal-footer">' + config.footer + '</div>' : ''}
+    </dialog>`;
+    }
+    static #createHtmlElement(config) {
+        const dialog = document.createElement('dialog');
+        dialog.id = config.id;
+        return dialog;
+    }
+    static create(config) {
+        return this.#createHtmlElement(config);
+    }
+    static { }
+}
+
+const _defaults$b = {
     responsiveThreshold: 0 // breakpoint for swipeable
 };
 class Parallax extends Component {
@@ -4411,7 +4605,7 @@ class Parallax extends Component {
     static _handleWindowResizeThrottled;
     constructor(el, options) {
         super(el, options, Parallax);
-        this.el.M_Parallax = this;
+        this.el['M_Parallax'] = this;
         this.options = {
             ...Parallax.defaults,
             ...options
@@ -4435,25 +4629,24 @@ class Parallax extends Component {
         return super.init(els, options, Parallax);
     }
     static getInstance(el) {
-        return el.M_Parallax;
+        return el['M_Parallax'];
     }
     destroy() {
         Parallax._parallaxes.splice(Parallax._parallaxes.indexOf(this), 1);
         this._img.style.transform = '';
         this._removeEventHandlers();
-        this.el.M_Parallax = undefined;
+        this.el['M_Parallax'] = undefined;
     }
     static _handleScroll() {
         for (let i = 0; i < Parallax._parallaxes.length; i++) {
-            let parallaxInstance = Parallax._parallaxes[i];
+            const parallaxInstance = Parallax._parallaxes[i];
             parallaxInstance._updateParallax.call(parallaxInstance);
         }
     }
     static _handleWindowResize() {
         for (let i = 0; i < Parallax._parallaxes.length; i++) {
-            let parallaxInstance = Parallax._parallaxes[i];
-            parallaxInstance._enabled =
-                window.innerWidth > parallaxInstance.options.responsiveThreshold;
+            const parallaxInstance = Parallax._parallaxes[i];
+            parallaxInstance._enabled = window.innerWidth > parallaxInstance.options.responsiveThreshold;
         }
     }
     _setupEventHandlers() {
@@ -4486,12 +4679,12 @@ class Parallax extends Component {
         const box = el.getBoundingClientRect();
         const docElem = document.documentElement;
         return {
-            top: box.top + window.pageYOffset - docElem.clientTop,
-            left: box.left + window.pageXOffset - docElem.clientLeft
+            top: box.top + window.scrollY - docElem.clientTop,
+            left: box.left + window.scrollX - docElem.clientLeft
         };
     }
     _updateParallax() {
-        const containerHeight = this.el.getBoundingClientRect().height > 0 ? this.el.parentNode.offsetHeight : 500;
+        const containerHeight = this.el.getBoundingClientRect().height > 0 ? this.el.parentElement.offsetHeight : 500;
         const imgHeight = this._img.offsetHeight;
         const parallaxDist = imgHeight - containerHeight;
         const bottom = this._offset(this.el).top + containerHeight;
@@ -4510,7 +4703,7 @@ class Parallax extends Component {
     }
 }
 
-let _defaults$a = {
+const _defaults$a = {
     top: 0,
     bottom: Infinity,
     offset: 0,
@@ -4521,7 +4714,7 @@ class Pushpin extends Component {
     originalOffset;
     constructor(el, options) {
         super(el, options, Pushpin);
-        this.el.M_Pushpin = this;
+        this.el['M_Pushpin'] = this;
         this.options = {
             ...Pushpin.defaults,
             ...options
@@ -4543,22 +4736,22 @@ class Pushpin extends Component {
         return super.init(els, options, Pushpin);
     }
     static getInstance(el) {
-        return el.M_Pushpin;
+        return el['M_Pushpin'];
     }
     destroy() {
         this.el.style.top = null;
         this._removePinClasses();
         // Remove pushpin Inst
-        let index = Pushpin._pushpins.indexOf(this);
+        const index = Pushpin._pushpins.indexOf(this);
         Pushpin._pushpins.splice(index, 1);
         if (Pushpin._pushpins.length === 0) {
             this._removeEventHandlers();
         }
-        this.el.M_Pushpin = undefined;
+        this.el['M_Pushpin'] = undefined;
     }
     static _updateElements() {
-        for (let elIndex in Pushpin._pushpins) {
-            let pInstance = Pushpin._pushpins[elIndex];
+        for (const elIndex in Pushpin._pushpins) {
+            const pInstance = Pushpin._pushpins[elIndex];
             pInstance._updatePosition();
         }
     }
@@ -4569,7 +4762,7 @@ class Pushpin extends Component {
         document.removeEventListener('scroll', Pushpin._updateElements);
     }
     _updatePosition() {
-        let scrolled = Utils.getDocumentScrollTop() + this.options.offset;
+        const scrolled = Utils.getDocumentScrollTop() + this.options.offset;
         if (this.options.top <= scrolled &&
             this.options.bottom >= scrolled &&
             !this.el.classList.contains('pinned')) {
@@ -4613,24 +4806,29 @@ class Pushpin extends Component {
     }
 }
 
-let _defaults$9 = {
+const _defaults$9 = {
     throttle: 100,
     scrollOffset: 200, // offset - 200 allows elements near bottom of page to scroll
     activeClass: 'active',
-    getActiveElement: (id) => { return 'a[href="#' + id + '"]'; }
+    getActiveElement: (id) => {
+        return 'a[href="#' + id + '"]';
+    },
+    keepTopElementActive: false,
+    animationDuration: null
 };
 class ScrollSpy extends Component {
     static _elements;
     static _count;
     static _increment;
-    tickId;
-    id;
     static _elementsInView;
     static _visibleElements;
     static _ticks;
+    static _keptTopActiveElement = null;
+    tickId;
+    id;
     constructor(el, options) {
         super(el, options, ScrollSpy);
-        this.el.M_ScrollSpy = this;
+        this.el['M_ScrollSpy'] = this;
         this.options = {
             ...ScrollSpy.defaults,
             ...options
@@ -4639,7 +4837,7 @@ class ScrollSpy extends Component {
         ScrollSpy._count++;
         ScrollSpy._increment++;
         this.tickId = -1;
-        this.id = ScrollSpy._increment;
+        this.id = ScrollSpy._increment.toString();
         this._setupEventHandlers();
         this._handleWindowScroll();
     }
@@ -4655,7 +4853,7 @@ class ScrollSpy extends Component {
         return super.init(els, options, ScrollSpy);
     }
     static getInstance(el) {
-        return el.M_ScrollSpy;
+        return el['M_ScrollSpy'];
     }
     destroy() {
         ScrollSpy._elements.splice(ScrollSpy._elements.indexOf(this), 1);
@@ -4665,7 +4863,7 @@ class ScrollSpy extends Component {
         this._removeEventHandlers();
         const actElem = document.querySelector(this.options.getActiveElement(this.el.id));
         actElem.classList.remove(this.options.activeClass);
-        this.el.M_ScrollSpy = undefined;
+        this.el['M_ScrollSpy'] = undefined;
     }
     _setupEventHandlers() {
         if (ScrollSpy._count === 1) {
@@ -4681,7 +4879,9 @@ class ScrollSpy extends Component {
             document.body.removeEventListener('click', this._handleTriggerClick);
         }
     }
-    _handleThrottledResize = Utils.throttle(function () { this._handleWindowScroll(); }, 200).bind(this);
+    _handleThrottledResize = Utils.throttle(function () {
+        this._handleWindowScroll();
+    }, 200).bind(this);
     _handleTriggerClick = (e) => {
         const trigger = e.target;
         for (let i = ScrollSpy._elements.length - 1; i >= 0; i--) {
@@ -4689,7 +4889,12 @@ class ScrollSpy extends Component {
             const x = document.querySelector('a[href="#' + scrollspy.el.id + '"]');
             if (trigger === x) {
                 e.preventDefault();
-                scrollspy.el.scrollIntoView({ behavior: 'smooth' });
+                if (scrollspy.el['M_ScrollSpy'].options.animationDuration) {
+                    ScrollSpy._smoothScrollIntoView(scrollspy.el, scrollspy.el['M_ScrollSpy'].options.animationDuration);
+                }
+                else {
+                    scrollspy.el.scrollIntoView({ behavior: 'smooth' });
+                }
                 break;
             }
         }
@@ -4698,12 +4903,12 @@ class ScrollSpy extends Component {
         // unique tick id
         ScrollSpy._ticks++;
         // viewport rectangle
-        let top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight;
+        const top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight;
         // determine which elements are in view
-        let intersections = ScrollSpy._findElements(top, right, bottom, left);
+        const intersections = ScrollSpy._findElements(top, right, bottom, left);
         for (let i = 0; i < intersections.length; i++) {
-            let scrollspy = intersections[i];
-            let lastTick = scrollspy.tickId;
+            const scrollspy = intersections[i];
+            const lastTick = scrollspy.tickId;
             if (lastTick < 0) {
                 // entered into view
                 scrollspy._enter();
@@ -4712,8 +4917,8 @@ class ScrollSpy extends Component {
             scrollspy.tickId = ScrollSpy._ticks;
         }
         for (let i = 0; i < ScrollSpy._elementsInView.length; i++) {
-            let scrollspy = ScrollSpy._elementsInView[i];
-            let lastTick = scrollspy.tickId;
+            const scrollspy = ScrollSpy._elementsInView[i];
+            const lastTick = scrollspy.tickId;
             if (lastTick >= 0 && lastTick !== ScrollSpy._ticks) {
                 // exited from view
                 scrollspy._exit();
@@ -4722,6 +4927,29 @@ class ScrollSpy extends Component {
         }
         // remember elements in view for next tick
         ScrollSpy._elementsInView = intersections;
+        if (ScrollSpy._elements.length) {
+            const options = ScrollSpy._elements[0].el['M_ScrollSpy'].options;
+            if (options.keepTopElementActive && ScrollSpy._visibleElements.length === 0) {
+                this._resetKeptTopActiveElementIfNeeded();
+                const topElements = ScrollSpy._elements
+                    .filter((value) => ScrollSpy._getDistanceToViewport(value.el) <= 0)
+                    .sort((a, b) => {
+                    const distanceA = ScrollSpy._getDistanceToViewport(a.el);
+                    const distanceB = ScrollSpy._getDistanceToViewport(b.el);
+                    if (distanceA < distanceB)
+                        return -1;
+                    if (distanceA > distanceB)
+                        return 1;
+                    return 0;
+                });
+                const nearestTopElement = topElements.length
+                    ? topElements[topElements.length - 1]
+                    : ScrollSpy._elements[0];
+                const actElem = document.querySelector(options.getActiveElement(nearestTopElement.el.id));
+                actElem?.classList.add(options.activeClass);
+                ScrollSpy._keptTopActiveElement = actElem;
+            }
+        }
     };
     static _offset(el) {
         const box = el.getBoundingClientRect();
@@ -4732,13 +4960,13 @@ class ScrollSpy extends Component {
         };
     }
     static _findElements(top, right, bottom, left) {
-        let hits = [];
+        const hits = [];
         for (let i = 0; i < ScrollSpy._elements.length; i++) {
-            let scrollspy = ScrollSpy._elements[i];
-            let currTop = top + scrollspy.options.scrollOffset || 200;
+            const scrollspy = ScrollSpy._elements[i];
+            const currTop = top + scrollspy.options.scrollOffset || 200;
             if (scrollspy.el.getBoundingClientRect().height > 0) {
-                let elTop = ScrollSpy._offset(scrollspy.el).top, elLeft = ScrollSpy._offset(scrollspy.el).left, elRight = elLeft + scrollspy.el.getBoundingClientRect().width, elBottom = elTop + scrollspy.el.getBoundingClientRect().height;
-                let isIntersect = !(elLeft > right ||
+                const elTop = ScrollSpy._offset(scrollspy.el).top, elLeft = ScrollSpy._offset(scrollspy.el).left, elRight = elLeft + scrollspy.el.getBoundingClientRect().width, elBottom = elTop + scrollspy.el.getBoundingClientRect().height;
+                const isIntersect = !(elLeft > right ||
                     elRight < left ||
                     elTop > bottom ||
                     elBottom < currTop);
@@ -4750,11 +4978,12 @@ class ScrollSpy extends Component {
         return hits;
     }
     _enter() {
-        ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0);
+        ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((value) => value.getBoundingClientRect().height !== 0);
         if (ScrollSpy._visibleElements[0]) {
             const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id));
             actElem?.classList.remove(this.options.activeClass);
-            if (ScrollSpy._visibleElements[0].M_ScrollSpy && this.id < ScrollSpy._visibleElements[0].M_ScrollSpy.id) {
+            if (ScrollSpy._visibleElements[0]['M_ScrollSpy'] &&
+                this.id < ScrollSpy._visibleElements[0]['M_ScrollSpy'].id) {
                 ScrollSpy._visibleElements.unshift(this.el);
             }
             else {
@@ -4764,11 +4993,12 @@ class ScrollSpy extends Component {
         else {
             ScrollSpy._visibleElements.push(this.el);
         }
+        this._resetKeptTopActiveElementIfNeeded();
         const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
         document.querySelector(selector)?.classList.add(this.options.activeClass);
     }
     _exit() {
-        ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0);
+        ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((value) => value.getBoundingClientRect().height !== 0);
         if (ScrollSpy._visibleElements[0]) {
             const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id));
             actElem?.classList.remove(this.options.activeClass);
@@ -4777,8 +5007,39 @@ class ScrollSpy extends Component {
                 // Check if empty
                 const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
                 document.querySelector(selector)?.classList.add(this.options.activeClass);
+                this._resetKeptTopActiveElementIfNeeded();
+            }
+        }
+    }
+    _resetKeptTopActiveElementIfNeeded() {
+        if (ScrollSpy._keptTopActiveElement) {
+            ScrollSpy._keptTopActiveElement.classList.remove(this.options.activeClass);
+            ScrollSpy._keptTopActiveElement = null;
+        }
+    }
+    static _getDistanceToViewport(element) {
+        const rect = element.getBoundingClientRect();
+        const distance = rect.top;
+        return distance;
+    }
+    static _smoothScrollIntoView(element, duration = 300) {
+        const targetPosition = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
+        const startPosition = window.scrollY || window.pageYOffset;
+        const distance = targetPosition - startPosition;
+        const startTime = performance.now();
+        function scrollStep(currentTime) {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            const scrollY = startPosition + distance * progress;
+            if (progress < 1) {
+                window.scrollTo(0, scrollY);
+                requestAnimationFrame(scrollStep);
+            }
+            else {
+                window.scrollTo(0, targetPosition);
             }
         }
+        requestAnimationFrame(scrollStep);
     }
     static {
         ScrollSpy._elements = [];
@@ -4826,7 +5087,7 @@ class Sidenav extends Component {
     percentOpen;
     constructor(el, options) {
         super(el, options, Sidenav);
-        this.el.M_Sidenav = this;
+        this.el['M_Sidenav'] = this;
         this.options = {
             ...Sidenav.defaults,
             ...options
@@ -4857,14 +5118,14 @@ class Sidenav extends Component {
         return super.init(els, options, Sidenav);
     }
     static getInstance(el) {
-        return el.M_Sidenav;
+        return el['M_Sidenav'];
     }
     destroy() {
         this._removeEventHandlers();
         this._enableBodyScrolling();
         this._overlay.parentNode.removeChild(this._overlay);
         this.dragTarget.parentNode.removeChild(this.dragTarget);
-        this.el.M_Sidenav = undefined;
+        this.el['M_Sidenav'] = undefined;
         this.el.style.transform = '';
         const index = Sidenav._sidenavs.indexOf(this);
         if (index >= 0) {
@@ -4881,18 +5142,21 @@ class Sidenav extends Component {
         if (Sidenav._sidenavs.length === 0) {
             document.body.addEventListener('click', this._handleTriggerClick);
         }
-        var passiveIfSupported = null;
+        const passiveIfSupported = null;
         this.dragTarget.addEventListener('touchmove', this._handleDragTargetDrag, passiveIfSupported);
         this.dragTarget.addEventListener('touchend', this._handleDragTargetRelease);
         this._overlay.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported);
         this._overlay.addEventListener('touchend', this._handleCloseRelease);
-        this.el.addEventListener('touchmove', this._handleCloseDrag, passiveIfSupported);
+        this.el.addEventListener('touchmove', this._handleCloseDrag); // , passiveIfSupported);
         this.el.addEventListener('touchend', this._handleCloseRelease);
         this.el.addEventListener('click', this._handleCloseTriggerClick);
         // Add resize for side nav fixed
         if (this.isFixed) {
             window.addEventListener('resize', this._handleWindowResize);
         }
+        /* Set aria-hidden state */
+        this._setAriaHidden();
+        this._setTabIndex();
     }
     _removeEventHandlers() {
         if (Sidenav._sidenavs.length === 1) {
@@ -4914,9 +5178,9 @@ class Sidenav extends Component {
         const trigger = e.target.closest('.sidenav-trigger');
         if (e.target && trigger) {
             const sidenavId = Utils.getIdFromTrigger(trigger);
-            const sidenavInstance = document.getElementById(sidenavId).M_Sidenav;
+            const sidenavInstance = document.getElementById(sidenavId)['M_Sidenav'];
             if (sidenavInstance) {
-                sidenavInstance.open(trigger);
+                sidenavInstance.open();
             }
             e.preventDefault();
         }
@@ -4947,18 +5211,9 @@ class Sidenav extends Component {
     }
     _handleDragTargetDrag = (e) => {
         // Check if draggable
-        if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) {
+        if (!this._isDraggable())
             return;
-        }
-        // If not being dragged, set initial drag start variables
-        if (!this.isDragged) {
-            this._startDrag(e);
-        }
-        // Run touchmove updates
-        this._dragMoveUpdate(e);
-        // Calculate raw deltaX
-        let totalDeltaX = this._xPos - this._startingXpos;
-        // dragDirection is the attempted user drag direction
+        let totalDeltaX = this._calculateDelta(e);
         const dragDirection = totalDeltaX > 0 ? 'right' : 'left';
         // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction
         totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
@@ -4995,36 +5250,35 @@ class Sidenav extends Component {
         }
     };
     _handleCloseDrag = (e) => {
-        if (this.isOpen) {
-            // Check if draggable
-            if (!this.options.draggable || this._isCurrentlyFixed() || this._verticallyScrolling) {
-                return;
-            }
-            // If not being dragged, set initial drag start variables
-            if (!this.isDragged) {
-                this._startDrag(e);
-            }
-            // Run touchmove updates
-            this._dragMoveUpdate(e);
-            // Calculate raw deltaX
-            let totalDeltaX = this._xPos - this._startingXpos;
-            // dragDirection is the attempted user drag direction
-            let dragDirection = totalDeltaX > 0 ? 'right' : 'left';
-            // Don't allow totalDeltaX to exceed Sidenav width or be dragged in the opposite direction
-            totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
-            if (this.options.edge !== dragDirection) {
-                totalDeltaX = 0;
-            }
-            let transformX = -totalDeltaX;
-            if (this.options.edge === 'right') {
-                transformX = -transformX;
-            }
-            // Calculate open/close percentage of sidenav, with open = 1 and close = 0
-            this.percentOpen = Math.min(1, 1 - totalDeltaX / this._width);
-            // Set transform and opacity styles
-            this.el.style.transform = `translateX(${transformX}px)`;
-            this._overlay.style.opacity = this.percentOpen.toString();
+        // Check if open and draggable
+        if (!this.isOpen || !this._isDraggable())
+            return;
+        let totalDeltaX = this._calculateDelta(e);
+        // dragDirection is the attempted user drag direction
+        const dragDirection = totalDeltaX > 0 ? 'right' : 'left';
+        totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
+        if (this.options.edge !== dragDirection) {
+            totalDeltaX = 0;
+        }
+        let transformX = -totalDeltaX;
+        if (this.options.edge === 'right') {
+            transformX = -transformX;
+        }
+        // Calculate open/close percentage of sidenav, with open = 1 and close = 0
+        this.percentOpen = Math.min(1, 1 - totalDeltaX / this._width);
+        // Set transform and opacity styles
+        this.el.style.transform = `translateX(${transformX}px)`;
+        this._overlay.style.opacity = this.percentOpen.toString();
+    };
+    _calculateDelta = (e) => {
+        // If not being dragged, set initial drag start variables
+        if (!this.isDragged) {
+            this._startDrag(e);
         }
+        // Run touchmove updates
+        this._dragMoveUpdate(e);
+        // Calculate raw deltaX
+        return this._xPos - this._startingXpos;
     };
     _handleCloseRelease = () => {
         if (this.isOpen && this.isDragged) {
@@ -5072,6 +5326,9 @@ class Sidenav extends Component {
         if (this._isCurrentlyFixed())
             this.open();
     }
+    _isDraggable() {
+        return this.options.draggable && !this._isCurrentlyFixed() && !this._verticallyScrolling;
+    }
     _isCurrentlyFixed() {
         return this.isFixed && window.innerWidth > 992;
     }
@@ -5112,6 +5369,9 @@ class Sidenav extends Component {
                 this._preventBodyScrolling();
             if (!this.isDragged || this.percentOpen != 1)
                 this._animateIn();
+            /* Set aria-hidden state */
+            this._setAriaHidden();
+            this._setTabIndex();
         }
     };
     /**
@@ -5139,6 +5399,9 @@ class Sidenav extends Component {
             else {
                 this._overlay.style.display = 'none';
             }
+            /* Set aria-hidden state */
+            this._setAriaHidden();
+            this._setTabIndex();
         }
     };
     _animateIn() {
@@ -5160,7 +5423,7 @@ class Sidenav extends Component {
         const duration = this.options.inDuration;
         // from
         this.el.style.transition = 'none';
-        this.el.style.transform = 'translateX(' + (slideOutPercent * 100) + '%)';
+        this.el.style.transform = 'translateX(' + slideOutPercent * 100 + '%)';
         setTimeout(() => {
             this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad
             // to
@@ -5173,15 +5436,18 @@ class Sidenav extends Component {
     }
     _animateSidenavOut() {
         const endPercent = this.options.edge === 'left' ? -1 : 1;
-        if (this.isDragged) {
-            this.options.edge === 'left'
-                    ? endPercent + this.percentOpen
-                    : endPercent - this.percentOpen;
-        }
+        // let slideOutPercent = 0;
+        // if (this.isDragged) {
+        //   // @todo unused variable
+        //   slideOutPercent =
+        //     this.options.edge === 'left'
+        //       ? endPercent + this.percentOpen
+        //       : endPercent - this.percentOpen;
+        // }
         const duration = this.options.outDuration;
         this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad
         // to
-        this.el.style.transform = 'translateX(' + (endPercent * 100) + '%)';
+        this.el.style.transform = 'translateX(' + endPercent * 100 + '%)';
         setTimeout(() => {
             if (typeof this.options.onCloseEnd === 'function')
                 this.options.onCloseEnd.call(this, this.el);
@@ -5215,12 +5481,30 @@ class Sidenav extends Component {
             this._overlay.style.display = 'none';
         }, duration);
     }
+    _setAriaHidden = () => {
+        this.el.ariaHidden = this.isOpen ? 'false' : 'true';
+        const navWrapper = document.querySelector('.nav-wrapper ul');
+        if (navWrapper)
+            navWrapper.ariaHidden = this.isOpen.toString();
+    };
+    _setTabIndex = () => {
+        const navLinks = document.querySelectorAll('.nav-wrapper ul li a');
+        const sideNavLinks = document.querySelectorAll('.sidenav li a');
+        if (navLinks)
+            navLinks.forEach((navLink) => {
+                navLink.tabIndex = this.isOpen ? -1 : 0;
+            });
+        if (sideNavLinks)
+            sideNavLinks.forEach((sideNavLink) => {
+                sideNavLink.tabIndex = this.isOpen ? 0 : -1;
+            });
+    };
     static {
         Sidenav._sidenavs = [];
     }
 }
 
-let _defaults$7 = {
+const _defaults$7 = {
     duration: 300,
     onShow: null,
     swipeable: false,
@@ -5237,7 +5521,7 @@ class Tabs extends Component {
     _content;
     constructor(el, options) {
         super(el, options, Tabs);
-        this.el.M_Tabs = this;
+        this.el['M_Tabs'] = this;
         this.options = {
             ...Tabs.defaults,
             ...options
@@ -5268,7 +5552,7 @@ class Tabs extends Component {
         return super.init(els, options, Tabs);
     }
     static getInstance(el) {
-        return el.M_Tabs;
+        return el['M_Tabs'];
     }
     destroy() {
         this._removeEventHandlers();
@@ -5279,12 +5563,14 @@ class Tabs extends Component {
         else {
             this._teardownNormalTabs();
         }
-        this.el.M_Tabs = undefined;
+        this.el['M_Tabs'] = undefined;
     }
     /**
      * The index of tab that is currently shown.
      */
-    get index() { return this._index; }
+    get index() {
+        return this._index;
+    }
     _setupEventHandlers() {
         window.addEventListener('resize', this._handleWindowResize);
         this.el.addEventListener('click', this._handleTabClick);
@@ -5301,8 +5587,14 @@ class Tabs extends Component {
         }
     };
     _handleTabClick = (e) => {
-        const tabLink = e.target;
-        const tab = tabLink.parentElement;
+        let tabLink = e.target;
+        if (!tabLink)
+            return;
+        let tab = tabLink.parentElement;
+        while (tab && !tab.classList.contains('tab')) {
+            tabLink = tabLink.parentElement;
+            tab = tab.parentElement;
+        }
         // Handle click on tab link only
         if (!tabLink || !tab.classList.contains('tab'))
             return;
@@ -5365,10 +5657,11 @@ class Tabs extends Component {
         this._activeTabLink = Array.from(this._tabLinks).find((a) => a.getAttribute('href') === location.hash);
         // If no match is found, use the first link or any with class 'active' as the initial active tab.
         if (!this._activeTabLink) {
-            this._activeTabLink = this.el.querySelector('li.tab a.active');
-        }
-        if (this._activeTabLink.length === 0) {
-            this._activeTabLink = this.el.querySelector('li.tab a');
+            let activeTabLink = this.el.querySelector('li.tab a.active');
+            if (!activeTabLink) {
+                activeTabLink = this.el.querySelector('li.tab a');
+            }
+            this._activeTabLink = activeTabLink;
         }
         Array.from(this._tabLinks).forEach((a) => a.classList.remove('active'));
         this._activeTabLink.classList.add('active');
@@ -5384,7 +5677,7 @@ class Tabs extends Component {
         if (window.innerWidth > this.options.responsiveThreshold)
             this.options.swipeable = false;
         const tabsContent = [];
-        this._tabLinks.forEach(a => {
+        this._tabLinks.forEach((a) => {
             if (a.hash) {
                 const currContent = document.querySelector(a.hash);
                 currContent.classList.add('carousel-item');
@@ -5396,7 +5689,7 @@ class Tabs extends Component {
         tabsWrapper.classList.add('tabs-content', 'carousel', 'carousel-slider');
         // Wrap around
         tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]);
-        tabsContent.forEach(tabContent => {
+        tabsContent.forEach((tabContent) => {
             tabsWrapper.appendChild(tabContent);
             tabContent.style.display = '';
         });
@@ -5424,7 +5717,7 @@ class Tabs extends Component {
         const tabsWrapper = this._tabsCarousel.el;
         this._tabsCarousel.destroy();
         // Unwrap
-        tabsWrapper.after(tabsWrapper.children);
+        tabsWrapper.append(tabsWrapper.parentElement);
         tabsWrapper.remove();
     }
     _setupNormalTabs() {
@@ -5469,7 +5762,7 @@ class Tabs extends Component {
     }
     _animateIndicator(prevIndex) {
         let leftDelay = 0, rightDelay = 0;
-        const isMovingLeftOrStaying = (this._index - prevIndex >= 0);
+        const isMovingLeftOrStaying = this._index - prevIndex >= 0;
         if (isMovingLeftOrStaying)
             leftDelay = 90;
         else
@@ -5492,7 +5785,7 @@ class Tabs extends Component {
     }
 }
 
-let _defaults$6 = {
+const _defaults$6 = {
     onOpen: null,
     onClose: null
 };
@@ -5501,24 +5794,27 @@ class TapTarget extends Component {
      * If the tap target is open.
      */
     isOpen;
+    static _taptargets;
     wrapper;
-    _origin;
+    // private _origin: HTMLElement;
     originEl;
     waveEl;
     contentEl;
     constructor(el, options) {
         super(el, options, TapTarget);
-        this.el.M_TapTarget = this;
+        this.el['M_TapTarget'] = this;
         this.options = {
             ...TapTarget.defaults,
             ...options
         };
         this.isOpen = false;
         // setup
-        this._origin = document.querySelector(`#${el.dataset.target}`);
+        this.originEl = document.querySelector(`#${el.dataset.target}`);
+        this.originEl.tabIndex = 0;
         this._setup();
         this._calculatePositioning();
         this._setupEventHandlers();
+        TapTarget._taptargets.push(this);
     }
     static get defaults() {
         return _defaults$6;
@@ -5532,45 +5828,64 @@ class TapTarget extends Component {
         return super.init(els, options, TapTarget);
     }
     static getInstance(el) {
-        return el.M_TapTarget;
+        return el['M_TapTarget'];
     }
     destroy() {
         this._removeEventHandlers();
-        this.el.TapTarget = undefined;
+        this.el['M_TapTarget'] = undefined;
+        const index = TapTarget._taptargets.indexOf(this);
+        if (index >= 0) {
+            TapTarget._taptargets.splice(index, 1);
+        }
     }
     _setupEventHandlers() {
-        this.el.addEventListener('click', this._handleTargetClick);
-        this.originEl.addEventListener('click', this._handleOriginClick);
+        this.originEl.addEventListener('click', this._handleTargetToggle);
+        this.originEl.addEventListener('keypress', this._handleKeyboardInteraction, true);
+        // this.originEl.addEventListener('click', this._handleOriginClick);
         // Resize
         window.addEventListener('resize', this._handleThrottledResize);
     }
     _removeEventHandlers() {
-        this.el.removeEventListener('click', this._handleTargetClick);
-        this.originEl.removeEventListener('click', this._handleOriginClick);
+        this.originEl.removeEventListener('click', this._handleTargetToggle);
+        this.originEl.removeEventListener('keypress', this._handleKeyboardInteraction, true);
+        // this.originEl.removeEventListener('click', this._handleOriginClick);
         window.removeEventListener('resize', this._handleThrottledResize);
     }
-    _handleThrottledResize = Utils.throttle(function () { this._handleResize(); }, 200).bind(this);
-    _handleTargetClick = () => {
-        this.open();
+    _handleThrottledResize = Utils.throttle(function () {
+        this._handleResize();
+    }, 200).bind(this);
+    _handleKeyboardInteraction = (e) => {
+        if (Utils.keys.ENTER.includes(e.key)) {
+            this._handleTargetToggle();
+        }
     };
-    _handleOriginClick = () => {
-        this.close();
+    _handleTargetToggle = () => {
+        if (!this.isOpen)
+            this.open();
+        else
+            this.close();
     };
+    /*_handleOriginClick = () => {
+      this.close();
+    }*/
     _handleResize = () => {
         this._calculatePositioning();
     };
     _handleDocumentClick = (e) => {
-        if (!e.target.closest('.tap-target-wrapper')) {
+        if (e.target.closest(`#${this.el.dataset.target}`) !== this.originEl &&
+            !e.target.closest('.tap-target-wrapper')) {
             this.close();
-            e.preventDefault();
-            e.stopPropagation();
+            // e.preventDefault();
+            // e.stopPropagation();
         }
     };
     _setup() {
         // Creating tap target
         this.wrapper = this.el.parentElement;
         this.waveEl = this.wrapper.querySelector('.tap-target-wave');
-        this.originEl = this.wrapper.querySelector('.tap-target-origin');
+        this.el.parentElement.ariaExpanded = 'false';
+        this.originEl.style.zIndex = '1002';
+        // this.originEl = this.wrapper.querySelector('.tap-target-origin');
         this.contentEl = this.el.querySelector('.tap-target-content');
         // Creating wrapper
         if (!this.wrapper.classList.contains('.tap-target-wrapper')) {
@@ -5590,13 +5905,13 @@ class TapTarget extends Component {
             this.waveEl = document.createElement('div');
             this.waveEl.classList.add('tap-target-wave');
             // Creating origin
-            if (!this.originEl) {
-                this.originEl = this._origin.cloneNode(true); // .clone(true, true);
-                this.originEl.classList.add('tap-target-origin');
-                this.originEl.removeAttribute('id');
-                this.originEl.removeAttribute('style');
-                this.waveEl.append(this.originEl);
-            }
+            /*if (!this.originEl) {
+              this.originEl = <HTMLElement>this._origin.cloneNode(true); // .clone(true, true);
+              this.originEl.classList.add('tap-target-origin');
+              this.originEl.removeAttribute('id');
+              this.originEl.removeAttribute('style');
+              this.waveEl.append(this.originEl);
+            }*/
             this.wrapper.append(this.waveEl);
         }
     }
@@ -5610,9 +5925,10 @@ class TapTarget extends Component {
     }
     _calculatePositioning() {
         // Element or parent is fixed position?
-        let isFixed = getComputedStyle(this._origin).position === 'fixed';
+        let isFixed = getComputedStyle(this.originEl).position === 'fixed';
         if (!isFixed) {
-            let currentElem = this._origin;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let currentElem = this.originEl;
             const parents = [];
             while ((currentElem = currentElem.parentNode) && currentElem !== document)
                 parents.push(currentElem);
@@ -5623,10 +5939,14 @@ class TapTarget extends Component {
             }
         }
         // Calculating origin
-        const originWidth = this._origin.offsetWidth;
-        const originHeight = this._origin.offsetHeight;
-        const originTop = isFixed ? this._offset(this._origin).top - Utils.getDocumentScrollTop() : this._offset(this._origin).top;
-        const originLeft = isFixed ? this._offset(this._origin).left - Utils.getDocumentScrollLeft() : this._offset(this._origin).left;
+        const originWidth = this.originEl.offsetWidth;
+        const originHeight = this.originEl.offsetHeight;
+        const originTop = isFixed
+            ? this._offset(this.originEl).top - Utils.getDocumentScrollTop()
+            : this._offset(this.originEl).top;
+        const originLeft = isFixed
+            ? this._offset(this.originEl).left - Utils.getDocumentScrollLeft()
+            : this._offset(this.originEl).left;
         // Calculating screen
         const windowWidth = window.innerWidth;
         const windowHeight = window.innerHeight;
@@ -5660,8 +5980,12 @@ class TapTarget extends Component {
         const tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2;
         // Setting tap target
         this.wrapper.style.top = isTop ? tapTargetTop + 'px' : '';
-        this.wrapper.style.right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + 'px' : '';
-        this.wrapper.style.bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight + 'px' : '';
+        this.wrapper.style.right = isRight
+            ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + 'px'
+            : '';
+        this.wrapper.style.bottom = isBottom
+            ? windowHeight - tapTargetTop - tapTargetHeight + 'px'
+            : '';
         this.wrapper.style.left = isLeft ? tapTargetLeft + 'px' : '';
         this.wrapper.style.position = tapTargetPosition;
         // Setting content
@@ -5687,11 +6011,13 @@ class TapTarget extends Component {
             return;
         // onOpen callback
         if (typeof this.options.onOpen === 'function') {
-            this.options.onOpen.call(this, this._origin);
+            this.options.onOpen.call(this, this.originEl);
         }
         this.isOpen = true;
         this.wrapper.classList.add('open');
+        this.wrapper.ariaExpanded = 'true';
         document.body.addEventListener('click', this._handleDocumentClick, true);
+        document.body.addEventListener('keypress', this._handleDocumentClick, true);
         document.body.addEventListener('touchend', this._handleDocumentClick);
     };
     /**
@@ -5702,16 +6028,21 @@ class TapTarget extends Component {
             return;
         // onClose callback
         if (typeof this.options.onClose === 'function') {
-            this.options.onClose.call(this, this._origin);
+            this.options.onClose.call(this, this.originEl);
         }
         this.isOpen = false;
         this.wrapper.classList.remove('open');
+        this.wrapper.ariaExpanded = 'false';
         document.body.removeEventListener('click', this._handleDocumentClick, true);
+        document.body.removeEventListener('keypress', this._handleDocumentClick, true);
         document.body.removeEventListener('touchend', this._handleDocumentClick);
     };
+    static {
+        TapTarget._taptargets = [];
+    }
 }
 
-let _defaults$5 = {
+const _defaults$5 = {
     dialRadius: 135,
     outerRadius: 105,
     innerRadius: 70,
@@ -5727,19 +6058,13 @@ let _defaults$5 = {
         clear: 'Clear',
         done: 'Ok'
     },
-    autoClose: false, // auto close when minute is selected
     twelveHour: true, // change to 12 hour AM/PM clock from 24 hour
     vibrate: true, // vibrate the device when dragging clock hand
     // Callbacks
-    onOpenStart: null,
-    onOpenEnd: null,
-    onCloseStart: null,
-    onCloseEnd: null,
     onSelect: null
 };
 class Timepicker extends Component {
     id;
-    modal;
     modalEl;
     plate;
     digitalClock;
@@ -5767,8 +6092,6 @@ class Timepicker extends Component {
      */
     amOrPm;
     static _template;
-    /** If the picker is open. */
-    isOpen;
     /** Vibrate device when dragging clock hand. */
     vibrate;
     _canvas;
@@ -5781,18 +6104,16 @@ class Timepicker extends Component {
     bearing;
     g;
     toggleViewTimer;
-    canvas;
     vibrateTimer;
     constructor(el, options) {
         super(el, options, Timepicker);
-        this.el.M_Timepicker = this;
+        this.el['M_Timepicker'] = this;
         this.options = {
             ...Timepicker.defaults,
             ...options
         };
         this.id = Utils.guid();
         this._insertHTMLIntoDOM();
-        this._setupModal();
         this._setupVariables();
         this._setupEventHandlers();
         this._clockSetup();
@@ -5813,24 +6134,26 @@ class Timepicker extends Component {
         return (num < 10 ? '0' : '') + num;
     }
     static _createSVGEl(name) {
-        let svgNS = 'http://www.w3.org/2000/svg';
+        const svgNS = 'http://www.w3.org/2000/svg';
         return document.createElementNS(svgNS, name);
     }
     static _Pos(e) {
-        if (e.type.startsWith("touch") && e.targetTouches.length >= 1) {
-            return { x: e.targetTouches[0].clientX, y: e.targetTouches[0].clientY };
+        if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
+            return {
+                x: e.targetTouches[0].clientX,
+                y: e.targetTouches[0].clientY
+            };
         }
         // mouse event
         return { x: e.clientX, y: e.clientY };
     }
     static getInstance(el) {
-        return el.M_Timepicker;
+        return el['M_Timepicker'];
     }
     destroy() {
         this._removeEventHandlers();
-        this.modal.destroy();
         this.modalEl.remove();
-        this.el.M_Timepicker = undefined;
+        this.el['M_Timepicker'] = undefined;
     }
     _setupEventHandlers() {
         this.el.addEventListener('click', this._handleInputClick);
@@ -5838,8 +6161,10 @@ class Timepicker extends Component {
         this.plate.addEventListener('mousedown', this._handleClockClickStart);
         this.plate.addEventListener('touchstart', this._handleClockClickStart);
         this.digitalClock.addEventListener('keyup', this._inputFromTextField);
-        this.inputHours.addEventListener('click', () => this.showView('hours'));
-        this.inputMinutes.addEventListener('click', () => this.showView('minutes'));
+        this.inputHours.addEventListener('focus', () => this.showView('hours'));
+        this.inputHours.addEventListener('focusout', () => this.formatHours());
+        this.inputMinutes.addEventListener('focus', () => this.showView('minutes'));
+        this.inputMinutes.addEventListener('focusout', () => this.formatMinutes());
     }
     _removeEventHandlers() {
         this.el.removeEventListener('click', this._handleInputClick);
@@ -5862,12 +6187,12 @@ class Timepicker extends Component {
     };
     _handleClockClickStart = (e) => {
         e.preventDefault();
-        let clockPlateBR = this.plate.getBoundingClientRect();
-        let offset = { x: clockPlateBR.left, y: clockPlateBR.top };
+        const clockPlateBR = this.plate.getBoundingClientRect();
+        const offset = { x: clockPlateBR.left, y: clockPlateBR.top };
         this.x0 = offset.x + this.options.dialRadius;
         this.y0 = offset.y + this.options.dialRadius;
         this.moved = false;
-        let clickPos = Timepicker._Pos(e);
+        const clickPos = Timepicker._Pos(e);
         this.dx = clickPos.x - this.x0;
         this.dy = clickPos.y - this.y0;
         // Set clock hands
@@ -5881,9 +6206,9 @@ class Timepicker extends Component {
     };
     _handleDocumentClickMove = (e) => {
         e.preventDefault();
-        let clickPos = Timepicker._Pos(e);
-        let x = clickPos.x - this.x0;
-        let y = clickPos.y - this.y0;
+        const clickPos = Timepicker._Pos(e);
+        const x = clickPos.x - this.x0;
+        const y = clickPos.y - this.y0;
         this.moved = true;
         this.setHand(x, y, false);
     };
@@ -5891,16 +6216,16 @@ class Timepicker extends Component {
         e.preventDefault();
         document.removeEventListener('mouseup', this._handleDocumentClickEnd);
         document.removeEventListener('touchend', this._handleDocumentClickEnd);
-        let clickPos = Timepicker._Pos(e);
-        let x = clickPos.x - this.x0;
-        let y = clickPos.y - this.y0;
+        const clickPos = Timepicker._Pos(e);
+        const x = clickPos.x - this.x0;
+        const y = clickPos.y - this.y0;
         if (this.moved && x === this.dx && y === this.dy) {
             this.setHand(x, y);
         }
         if (this.currentView === 'hours') {
             this.showView('minutes', this.options.duration / 2);
         }
-        else if (this.options.autoClose) {
+        else {
             this.minutesView.classList.add('timepicker-dial-out');
             setTimeout(() => {
                 this.done();
@@ -5928,24 +6253,11 @@ class Timepicker extends Component {
             this.el.parentElement.appendChild(this.modalEl);
         }
     }
-    _setupModal() {
-        this.modal = Modal.init(this.modalEl, {
-            onOpenStart: this.options.onOpenStart,
-            onOpenEnd: this.options.onOpenEnd,
-            onCloseStart: this.options.onCloseStart,
-            onCloseEnd: () => {
-                if (typeof this.options.onCloseEnd === 'function') {
-                    this.options.onCloseEnd.call(this);
-                }
-                this.isOpen = false;
-            }
-        });
-    }
     _setupVariables() {
         this.currentView = 'hours';
         this.vibrate = navigator.vibrate
             ? 'vibrate'
-            : navigator.webkitVibrate
+            : navigator['webkitVibrate']
                 ? 'webkitVibrate'
                 : null;
         this._canvas = this.modalEl.querySelector('.timepicker-canvas');
@@ -5961,10 +6273,10 @@ class Timepicker extends Component {
     }
     _createButton(text, visibility) {
         const button = document.createElement('button');
-        button.classList.add('btn-flat', 'waves-effect');
+        button.classList.add('btn', 'btn-flat', 'waves-effect', 'text');
         button.style.visibility = visibility;
         button.type = 'button';
-        button.tabIndex = this.options.twelveHour ? 3 : 1;
+        button.tabIndex = -1;
         button.innerText = text;
         return button;
     }
@@ -5982,20 +6294,20 @@ class Timepicker extends Component {
         confirmationBtnsContainer.appendChild(cancelButton);
         const doneButton = this._createButton(this.options.i18n.done, '');
         doneButton.classList.add('timepicker-close');
-        doneButton.addEventListener('click', this.done);
+        //doneButton.addEventListener('click', this._finishSelection);
         confirmationBtnsContainer.appendChild(doneButton);
     }
     _clockSetup() {
         if (this.options.twelveHour) {
             // AM Button
             this._amBtn = document.createElement('div');
-            this._amBtn.classList.add('am-btn');
+            this._amBtn.classList.add('am-btn', 'btn');
             this._amBtn.innerText = 'AM';
             this._amBtn.addEventListener('click', this._handleAmPmClick);
             this.spanAmPm.appendChild(this._amBtn);
             // PM Button
             this._pmBtn = document.createElement('div');
-            this._pmBtn.classList.add('pm-btn');
+            this._pmBtn.classList.add('pm-btn', 'btn');
             this._pmBtn.innerText = 'PM';
             this._pmBtn.addEventListener('click', this._handleAmPmClick);
             this.spanAmPm.appendChild(this._pmBtn);
@@ -6006,24 +6318,24 @@ class Timepicker extends Component {
     }
     _buildSVGClock() {
         // Draw clock hands and others
-        let dialRadius = this.options.dialRadius;
-        let tickRadius = this.options.tickRadius;
-        let diameter = dialRadius * 2;
-        let svg = Timepicker._createSVGEl('svg');
+        const dialRadius = this.options.dialRadius;
+        const tickRadius = this.options.tickRadius;
+        const diameter = dialRadius * 2;
+        const svg = Timepicker._createSVGEl('svg');
         svg.setAttribute('class', 'timepicker-svg');
         svg.setAttribute('width', diameter.toString());
         svg.setAttribute('height', diameter.toString());
-        let g = Timepicker._createSVGEl('g');
+        const g = Timepicker._createSVGEl('g');
         g.setAttribute('transform', 'translate(' + dialRadius + ',' + dialRadius + ')');
-        let bearing = Timepicker._createSVGEl('circle');
+        const bearing = Timepicker._createSVGEl('circle');
         bearing.setAttribute('class', 'timepicker-canvas-bearing');
         bearing.setAttribute('cx', '0');
         bearing.setAttribute('cy', '0');
         bearing.setAttribute('r', '4');
-        let hand = Timepicker._createSVGEl('line');
+        const hand = Timepicker._createSVGEl('line');
         hand.setAttribute('x1', '0');
         hand.setAttribute('y1', '0');
-        let bg = Timepicker._createSVGEl('circle');
+        const bg = Timepicker._createSVGEl('circle');
         bg.setAttribute('class', 'timepicker-canvas-bg');
         bg.setAttribute('r', tickRadius.toString());
         g.appendChild(hand);
@@ -6037,35 +6349,37 @@ class Timepicker extends Component {
         this.g = g;
     }
     _buildHoursView() {
-        const $tick = document.createElement('div');
-        $tick.classList.add('timepicker-tick');
+        // const $tick = document.createElement('div');
+        // $tick.classList.add('timepicker-tick');
         // Hours view
         if (this.options.twelveHour) {
             for (let i = 1; i < 13; i += 1) {
-                const tick = $tick.cloneNode(true);
+                // const tick = <HTMLElement>$tick.cloneNode(true);
                 const radian = (i / 6) * Math.PI;
                 const radius = this.options.outerRadius;
-                tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px';
-                tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px';
-                tick.innerHTML = i === 0 ? '00' : i.toString();
-                this.hoursView.appendChild(tick);
-                // tick.on(mousedownEvent, mousedown);
+                this._buildHoursTick(i, radian, radius);
             }
         }
         else {
             for (let i = 0; i < 24; i += 1) {
-                const tick = $tick.cloneNode(true);
+                // const tick = <HTMLElement>$tick.cloneNode(true);
                 const radian = (i / 6) * Math.PI;
                 const inner = i > 0 && i < 13;
                 const radius = inner ? this.options.innerRadius : this.options.outerRadius;
-                tick.style.left = this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px';
-                tick.style.top = this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px';
-                tick.innerHTML = i === 0 ? '00' : i.toString();
-                this.hoursView.appendChild(tick);
-                // tick.on(mousedownEvent, mousedown);
+                this._buildHoursTick(i, radian, radius);
             }
         }
     }
+    _buildHoursTick(i, radian, radius) {
+        const tick = document.createElement('div');
+        tick.classList.add('timepicker-tick');
+        tick.style.left =
+            this.options.dialRadius + Math.sin(radian) * radius - this.options.tickRadius + 'px';
+        tick.style.top =
+            this.options.dialRadius - Math.cos(radian) * radius - this.options.tickRadius + 'px';
+        tick.innerHTML = i === 0 ? '00' : i.toString();
+        this.hoursView.appendChild(tick);
+    }
     _buildMinutesView() {
         const _tick = document.createElement('div');
         _tick.classList.add('timepicker-tick');
@@ -6095,12 +6409,12 @@ class Timepicker extends Component {
     _updateAmPmView() {
         if (this.options.twelveHour) {
             if (this.amOrPm === 'PM') {
-                this._amBtn.classList.remove('text-primary');
-                this._pmBtn.classList.add('text-primary');
+                this._amBtn.classList.remove('filled');
+                this._pmBtn.classList.add('filled');
             }
             else if (this.amOrPm === 'AM') {
-                this._amBtn.classList.add('text-primary');
-                this._pmBtn.classList.remove('text-primary');
+                this._amBtn.classList.add('filled');
+                this._pmBtn.classList.remove('filled');
             }
         }
     }
@@ -6117,7 +6431,7 @@ class Timepicker extends Component {
             value[1] = value[1].replace('AM', '').replace('PM', '');
         }
         if (value[0] === 'now') {
-            let now = new Date(+new Date() + this.options.fromNow);
+            const now = new Date(+new Date() + this.options.fromNow);
             value = [now.getHours().toString(), now.getMinutes().toString()];
             if (this.options.twelveHour) {
                 this.amOrPm = parseInt(value[0]) >= 12 && parseInt(value[0]) < 24 ? 'PM' : 'AM';
@@ -6125,17 +6439,18 @@ class Timepicker extends Component {
         }
         this.hours = +value[0] || 0;
         this.minutes = +value[1] || 0;
-        this.inputHours.value = this.hours;
+        this.inputHours.value = Timepicker._addLeadingZero(this.hours);
         this.inputMinutes.value = Timepicker._addLeadingZero(this.minutes);
         this._updateAmPmView();
     }
     /**
      * Show hours or minutes view on timepicker.
      * @param view The name of the view you want to switch to, 'hours' or 'minutes'.
+     * @param delay
      */
     showView = (view, delay = null) => {
         if (view === 'minutes' && getComputedStyle(this.hoursView).visibility === 'visible') ;
-        let isHours = view === 'hours', nextView = isHours ? this.hoursView : this.minutesView, hideView = isHours ? this.minutesView : this.hoursView;
+        const isHours = view === 'hours', nextView = isHours ? this.hoursView : this.minutesView, hideView = isHours ? this.minutesView : this.hoursView;
         this.currentView = view;
         if (isHours) {
             this.inputHours.classList.add('text-primary');
@@ -6158,12 +6473,12 @@ class Timepicker extends Component {
         }, this.options.duration);
     };
     resetClock(delay) {
-        let view = this.currentView, value = this[view], isHours = view === 'hours', unit = Math.PI / (isHours ? 6 : 30), radian = value * unit, radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, x = Math.sin(radian) * radius, y = -Math.cos(radian) * radius, self = this;
+        const view = this.currentView, value = this[view], isHours = view === 'hours', unit = Math.PI / (isHours ? 6 : 30), radian = value * unit, radius = isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius, x = Math.sin(radian) * radius, y = -Math.cos(radian) * radius;
         if (delay) {
-            this.canvas?.classList.add('timepicker-canvas-out');
+            this._canvas?.classList.add('timepicker-canvas-out');
             setTimeout(() => {
-                self.canvas?.classList.remove('timepicker-canvas-out');
-                self.setHand(x, y);
+                this._canvas?.classList.remove('timepicker-canvas-out');
+                this.setHand(x, y);
             }, delay);
         }
         else {
@@ -6172,31 +6487,26 @@ class Timepicker extends Component {
     }
     _inputFromTextField = () => {
         const isHours = this.currentView === 'hours';
-        if (isHours) {
+        if (isHours && this.inputHours.value !== '') {
             const value = parseInt(this.inputHours.value);
-            if (value > 0 && value < 13) {
-                this.drawClockFromTimeInput(value, isHours);
-                this.showView('minutes', this.options.duration / 2);
+            if (value > 0 && value < (this.options.twelveHour ? 13 : 24)) {
                 this.hours = value;
-                this.inputMinutes.focus();
             }
             else {
-                const hour = new Date().getHours();
-                this.inputHours.value = (hour % 12).toString();
+                this.setHoursDefault();
             }
+            this.drawClockFromTimeInput(this.hours, isHours);
         }
-        else {
+        else if (!isHours && this.inputMinutes.value !== '') {
             const value = parseInt(this.inputMinutes.value);
             if (value >= 0 && value < 60) {
-                this.inputMinutes.value = Timepicker._addLeadingZero(value);
-                this.drawClockFromTimeInput(value, isHours);
                 this.minutes = value;
-                this.modalEl.querySelector('.confirmation-btns :nth-child(2)').focus();
             }
             else {
-                const minutes = new Date().getMinutes();
-                this.inputMinutes.value = Timepicker._addLeadingZero(minutes);
+                this.minutes = new Date().getMinutes();
+                this.inputMinutes.value = this.minutes.toString();
             }
+            this.drawClockFromTimeInput(this.minutes, isHours);
         }
     };
     drawClockFromTimeInput(value, isHours) {
@@ -6206,14 +6516,15 @@ class Timepicker extends Component {
         if (this.options.twelveHour) {
             radius = this.options.outerRadius;
         }
-        let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius;
-        this.hand.setAttribute('x2', cx1.toString());
-        this.hand.setAttribute('y2', cy1.toString());
-        this.bg.setAttribute('cx', cx2.toString());
-        this.bg.setAttribute('cy', cy2.toString());
+        else {
+            radius =
+                isHours && value > 0 && value < 13 ? this.options.innerRadius : this.options.outerRadius;
+        }
+        this.setClockAttributes(radian, radius);
     }
     setHand(x, y, roundBy5 = false) {
-        let radian = Math.atan2(x, -y), isHours = this.currentView === 'hours', unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2, radius = inner ? this.options.innerRadius : this.options.outerRadius;
+        const isHours = this.currentView === 'hours', unit = Math.PI / (isHours || roundBy5 ? 6 : 30), z = Math.sqrt(x * x + y * y), inner = isHours && z < (this.options.outerRadius + this.options.innerRadius) / 2;
+        let radian = Math.atan2(x, -y), radius = inner ? this.options.innerRadius : this.options.outerRadius;
         if (this.options.twelveHour) {
             radius = this.options.outerRadius;
         }
@@ -6268,41 +6579,39 @@ class Timepicker extends Component {
         }
         this[this.currentView] = value;
         if (isHours) {
-            this.inputHours.value = value.toString();
+            this.inputHours.value = Timepicker._addLeadingZero(value);
         }
         else {
             this.inputMinutes.value = Timepicker._addLeadingZero(value);
         }
         // Set clock hand and others' position
-        let cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius;
+        this.setClockAttributes(radian, radius);
+    }
+    setClockAttributes(radian, radius) {
+        const cx1 = Math.sin(radian) * (radius - this.options.tickRadius), cy1 = -Math.cos(radian) * (radius - this.options.tickRadius), cx2 = Math.sin(radian) * radius, cy2 = -Math.cos(radian) * radius;
         this.hand.setAttribute('x2', cx1.toString());
         this.hand.setAttribute('y2', cy1.toString());
         this.bg.setAttribute('cx', cx2.toString());
         this.bg.setAttribute('cy', cy2.toString());
     }
-    /**
-     * Open timepicker.
-     */
-    open = () => {
-        if (this.isOpen)
-            return;
-        this.isOpen = true;
-        this._updateTimeFromInput();
-        this.showView('hours');
-        this.modal.open(undefined);
-    };
-    /**
-     * Close timepicker.
-     */
-    close = () => {
-        if (!this.isOpen)
-            return;
-        this.isOpen = false;
-        this.modal.close();
-    };
+    formatHours() {
+        if (this.inputHours.value == '')
+            this.setHoursDefault();
+        this.inputHours.value = Timepicker._addLeadingZero(Number(this.inputHours.value));
+    }
+    formatMinutes() {
+        if (this.inputMinutes.value == '')
+            this.minutes = new Date().getMinutes();
+        this.inputMinutes.value = Timepicker._addLeadingZero(Number(this.inputMinutes.value));
+    }
+    setHoursDefault() {
+        this.hours = new Date().getHours();
+        this.inputHours.value = (this.hours % (this.options.twelveHour ? 12 : 24)).toString();
+    }
+    // todo: remove e
     done = (e = null, clearValue = null) => {
         // Set input value
-        let last = this.el.value;
+        const last = this.el.value;
         let value = clearValue
             ? ''
             : Timepicker._addLeadingZero(this.hours) + ':' + Timepicker._addLeadingZero(this.minutes);
@@ -6315,12 +6624,23 @@ class Timepicker extends Component {
         if (value !== last) {
             this.el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true, composed: true }));
         }
-        this.close();
-        this.el.focus();
+        //this.el.focus();
+        return e; // just for passing linter, can be removed
     };
     clear = () => {
         this.done(null, true);
     };
+    // deprecated
+    open() {
+        // this._updateTimeFromInput();
+        // this.showView('hours');
+        console.warn('Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.');
+        return this;
+    }
+    close() {
+        console.warn('Timepicker.close() is deprecated. Remove this method and wrap in modal yourself.');
+        return this;
+    }
     static {
         Timepicker._template = `
       <div class="modal timepicker-modal">
@@ -6328,9 +6648,15 @@ class Timepicker extends Component {
           <div class="timepicker-digital-display">
             <div class="timepicker-text-container">
               <div class="timepicker-display-column">
-                <input type="text" maxlength="2" autofocus class="timepicker-input-hours text-primary" />
-                :
-                <input type="text" maxlength="2" class="timepicker-input-minutes" />
+                <div class="timepicker-input-hours-wrapper">
+                  <input type="text" maxlength="2" autofocus class="timepicker-input-hours text-primary" />
+                </div>
+                <div class="timepicker-input-divider-wrapper">
+                  <span class="timepicker-input-divider">:</span>
+                </div>
+                <div class="timepicker-input-minutes-wrapper">
+                  <input type="text" maxlength="2" class="timepicker-input-minutes" />
+                </div>
               </div>
               <div class="timepicker-display-column timepicker-display-am-pm">
                 <div class="timepicker-span-am-pm"></div>
@@ -6346,7 +6672,7 @@ class Timepicker extends Component {
             <div class="timepicker-footer"></div>
           </div>
         </div>
-      </div`;
+      </div>`;
     }
 }
 
@@ -6381,7 +6707,7 @@ class Tooltip extends Component {
     yMovement;
     constructor(el, options) {
         super(el, options, Tooltip);
-        this.el.M_Tooltip = this;
+        this.el['M_Tooltip'] = this;
         this.options = {
             ...Tooltip.defaults,
             ...this._getAttributeOptions(),
@@ -6405,12 +6731,12 @@ class Tooltip extends Component {
         return super.init(els, options, Tooltip);
     }
     static getInstance(el) {
-        return el.M_Tooltip;
+        return el['M_Tooltip'];
     }
     destroy() {
         this.tooltipEl.remove();
         this._removeEventHandlers();
-        this.el.M_Tooltip = undefined;
+        this.el['M_Tooltip'] = undefined;
     }
     _appendTooltipEl() {
         this.tooltipEl = document.createElement('div');
@@ -6419,7 +6745,7 @@ class Tooltip extends Component {
             ? document.getElementById(this.options.tooltipId)
             : document.createElement('div');
         this.tooltipEl.append(tooltipContentEl);
-        tooltipContentEl.style.display = "";
+        tooltipContentEl.style.display = '';
         tooltipContentEl.classList.add('tooltip-content');
         this._setTooltipContent(tooltipContentEl);
         this.tooltipEl.appendChild(tooltipContentEl);
@@ -6488,7 +6814,8 @@ class Tooltip extends Component {
     _positionTooltip() {
         const tooltip = this.tooltipEl;
         const origin = this.el, originHeight = origin.offsetHeight, originWidth = origin.offsetWidth, tooltipHeight = tooltip.offsetHeight, tooltipWidth = tooltip.offsetWidth, margin = this.options.margin;
-        (this.xMovement = 0), (this.yMovement = 0);
+        this.xMovement = 0;
+        this.yMovement = 0;
         let targetTop = origin.getBoundingClientRect().top + Utils.getDocumentScrollTop();
         let targetLeft = origin.getBoundingClientRect().left + Utils.getDocumentScrollLeft();
         if (this.options.position === 'top') {
@@ -6601,7 +6928,7 @@ class Tooltip extends Component {
         this.close();
     };
     _getAttributeOptions() {
-        let attributeOptions = {};
+        const attributeOptions = {};
         const tooltipTextOption = this.el.getAttribute('data-tooltip');
         const tooltipId = this.el.getAttribute('data-tooltip-id');
         const positionOption = this.el.getAttribute('data-position');
@@ -6638,11 +6965,22 @@ class Waves {
             }
             const frame = timestamp - animationStart;
             if (frame < duration) {
-                const easing = (frame / duration) * (2 - (frame / duration));
-                const circle = isCentered ? 'circle at 50% 50%' : `circle at ${position.x}px ${position.y}px`;
+                const easing = (frame / duration) * (2 - frame / duration);
+                const circle = isCentered
+                    ? 'circle at 50% 50%'
+                    : `circle at ${position.x}px ${position.y}px`;
                 const waveColor = `rgba(${color?.r || 0}, ${color?.g || 0}, ${color?.b || 0}, ${0.3 * (1 - easing)})`;
-                const stop = 90 * easing + "%";
-                targetElement.style.backgroundImage = "radial-gradient(" + circle + ", " + waveColor + " " + stop + ", transparent " + stop + ")";
+                const stop = 90 * easing + '%';
+                targetElement.style.backgroundImage =
+                    'radial-gradient(' +
+                        circle +
+                        ', ' +
+                        waveColor +
+                        ' ' +
+                        stop +
+                        ', transparent ' +
+                        stop +
+                        ')';
                 animationFrame = window.requestAnimationFrame(animationStep);
             }
             else {
@@ -6654,8 +6992,8 @@ class Waves {
     }
     static Init() {
         if (typeof document !== 'undefined')
-            document?.addEventListener("DOMContentLoaded", () => {
-                document.body.addEventListener('click', e => {
+            document?.addEventListener('DOMContentLoaded', () => {
+                document.body.addEventListener('click', (e) => {
                     const trigger = e.target;
                     const el = trigger.closest('.waves-effect');
                     if (el && el.contains(trigger)) {
@@ -6680,7 +7018,7 @@ class Range extends Component {
     thumb;
     constructor(el, options) {
         super(el, options, Range);
-        this.el.M_Range = this;
+        this.el['M_Range'] = this;
         this.options = {
             ...Range.defaults,
             ...options
@@ -6701,12 +7039,12 @@ class Range extends Component {
         return super.init(els, options, Range);
     }
     static getInstance(el) {
-        return el.M_Range;
+        return el['M_Range'];
     }
     destroy() {
         this._removeEventHandlers();
         this._removeThumb();
-        this.el.M_Range = undefined;
+        this.el['M_Range'] = undefined;
     }
     _setupEventHandlers() {
         this.el.addEventListener('change', this._handleRangeChange);
@@ -6787,7 +7125,7 @@ class Range extends Component {
             top ${duration}ms ease,
             margin ${duration}ms ease
           `;
-                    // to          
+                    // to
                     this.thumb.style.height = '0';
                     this.thumb.style.width = '0';
                     this.thumb.style.top = '0';
@@ -6837,7 +7175,7 @@ class Range extends Component {
      */
     static Init() {
         if (typeof document !== 'undefined')
-            Range.init((document?.querySelectorAll('input[type=range]')), {});
+            Range.init(document?.querySelectorAll('input[type=range]'), {});
     }
 }
 
@@ -6851,7 +7189,7 @@ class CharacterCounter extends Component {
     isValidLength;
     constructor(el, options) {
         super(el, {}, CharacterCounter);
-        this.el.M_CharacterCounter = this;
+        this.el['M_CharacterCounter'] = this;
         this.options = {
             ...CharacterCounter.defaults,
             ...options
@@ -6873,11 +7211,11 @@ class CharacterCounter extends Component {
         return super.init(els, options, CharacterCounter);
     }
     static getInstance(el) {
-        return el.M_CharacterCounter;
+        return el['M_CharacterCounter'];
     }
     destroy() {
         this._removeEventHandlers();
-        this.el.CharacterCounter = undefined;
+        this.el['CharacterCounter'] = undefined;
         this._removeCounter();
     }
     _setupEventHandlers() {
@@ -6900,7 +7238,7 @@ class CharacterCounter extends Component {
         this.counterEl.remove();
     }
     updateCounter = () => {
-        let maxLength = parseInt(this.el.getAttribute('maxlength')), actualLength = this.el.value.length;
+        const maxLength = parseInt(this.el.getAttribute('maxlength')), actualLength = this.el.value.length;
         this.isValidLength = actualLength <= maxLength;
         let counterString = actualLength.toString();
         if (maxLength) {
@@ -6922,7 +7260,7 @@ class CharacterCounter extends Component {
     }
 }
 
-let _defaults$1 = {
+const _defaults$1 = {
     indicators: true,
     height: 400,
     duration: 500,
@@ -6946,7 +7284,7 @@ class Slider extends Component {
     _sliderId;
     constructor(el, options) {
         super(el, options, Slider);
-        this.el.M_Slider = this;
+        this.el['M_Slider'] = this;
         this.options = {
             ...Slider.defaults,
             ...options
@@ -6960,7 +7298,7 @@ class Slider extends Component {
         // setup
         this._slider = this.el.querySelector('.slides');
         this._slides = Array.from(this._slider.querySelectorAll('li'));
-        this.activeIndex = this._slides.findIndex(li => li.classList.contains('active'));
+        this.activeIndex = this._slides.findIndex((li) => li.classList.contains('active'));
         if (this.activeIndex !== -1) {
             this._activeSlide = this._slides[this.activeIndex];
         }
@@ -6974,7 +7312,7 @@ class Slider extends Component {
         }
         const placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
         // Set initial positions of captions
-        this._slides.forEach(slide => {
+        this._slides.forEach((slide) => {
             // Caption
             //const caption = <HTMLElement|null>slide.querySelector('.caption');
             //if (caption) this._animateCaptionIn(caption, 0);
@@ -7025,13 +7363,13 @@ class Slider extends Component {
         return super.init(els, options, Slider);
     }
     static getInstance(el) {
-        return el.M_Slider;
+        return el['M_Slider'];
     }
     destroy() {
         this.pause();
         this._removeIndicators();
         this._removeEventHandlers();
-        this.el.M_Slider = undefined;
+        this.el['M_Slider'] = undefined;
     }
     _setupEventHandlers() {
         if (this.options.pauseOnFocus) {
@@ -7136,7 +7474,7 @@ class Slider extends Component {
         if (!this.el.classList.contains('fullscreen')) {
             if (this.options.indicators) {
                 // Add height if indicators are present
-                this.el.style.height = (this.options.height + 40) + 'px'; //.css('height', this.options.height + 40 + 'px');
+                this.el.style.height = this.options.height + 40 + 'px'; //.css('height', this.options.height + 40 + 'px');
             }
             else {
                 this.el.style.height = this.options.height + 'px';
@@ -7179,11 +7517,11 @@ class Slider extends Component {
         const _caption = this._activeSlide.querySelector('.caption');
         this._activeSlide.classList.remove('active');
         // Enables every slide
-        this._slides.forEach(slide => slide.style.visibility = 'visible');
+        this._slides.forEach((slide) => (slide.style.visibility = 'visible'));
         //--- Hide active Slide + Caption
         this._activeSlide.style.opacity = '0';
         setTimeout(() => {
-            this._slides.forEach(slide => {
+            this._slides.forEach((slide) => {
                 if (slide.classList.contains('active'))
                     return;
                 slide.style.opacity = '0';
@@ -7201,7 +7539,7 @@ class Slider extends Component {
             const nextIndicator = this._indicators[index].children[0];
             activeIndicator.classList.remove('active');
             nextIndicator.classList.add('active');
-            if (typeof this.options.indicatorLabelFunc === "function") {
+            if (typeof this.options.indicatorLabelFunc === 'function') {
                 activeIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, this.activeIndex, false);
                 nextIndicator.ariaLabel = this.options.indicatorLabelFunc.call(this, index, true);
             }
@@ -7261,7 +7599,7 @@ class Slider extends Component {
     };
 }
 
-let _defaults = {
+const _defaults = {
     text: '',
     displayLength: 4000,
     inDuration: 300,
@@ -7307,8 +7645,8 @@ class Toast {
         }
         // Create new toast
         Toast._toasts.push(this);
-        let toastElement = this._createToast();
-        toastElement.M_Toast = this;
+        const toastElement = this._createToast();
+        toastElement['M_Toast'] = this;
         this.el = toastElement;
         this._animateIn();
         this._setTimer();
@@ -7317,7 +7655,7 @@ class Toast {
         return _defaults;
     }
     static getInstance(el) {
-        return el.M_Toast;
+        return el['M_Toast'];
     }
     static _createContainer() {
         const container = document.createElement('div');
@@ -7341,7 +7679,7 @@ class Toast {
     static _onDragStart(e) {
         if (e.target && e.target.closest('.toast')) {
             const toastElem = e.target.closest('.toast');
-            const toast = toastElem.M_Toast;
+            const toast = toastElem['M_Toast'];
             toast.panning = true;
             Toast._draggedToast = toast;
             toast.el.classList.add('panning');
@@ -7367,12 +7705,12 @@ class Toast {
     }
     static _onDragEnd() {
         if (!!Toast._draggedToast) {
-            let toast = Toast._draggedToast;
+            const toast = Toast._draggedToast;
             toast.panning = false;
             toast.el.classList.remove('panning');
-            let totalDeltaX = toast.xPos - toast.startingXPos;
-            let activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
-            let shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1;
+            const totalDeltaX = toast.xPos - toast.startingXPos;
+            const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+            const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1;
             // Remove toast
             if (shouldBeDismissed) {
                 toast.wasSwiped = true;
@@ -7388,7 +7726,7 @@ class Toast {
         }
     }
     static _xPos(e) {
-        if (e.type.startsWith("touch") && e.targetTouches.length >= 1) {
+        if (e.type.startsWith('touch') && e.targetTouches.length >= 1) {
             return e.targetTouches[0].clientX;
         }
         // mouse event
@@ -7398,7 +7736,7 @@ class Toast {
      * dismiss all toasts.
      */
     static dismissAll() {
-        for (let toastIndex in Toast._toasts) {
+        for (const toastIndex in Toast._toasts) {
             Toast._toasts[toastIndex].dismiss();
         }
     }
@@ -7425,7 +7763,7 @@ class Toast {
     }
     _animateIn() {
         // Animate toast in
-        this.el.style.display = "";
+        this.el.style.display = '';
         this.el.style.opacity = '0';
         // easeOutCubic
         this.el.style.transition = `
@@ -7459,8 +7797,8 @@ class Toast {
      * Dismiss toast with animation.
      */
     dismiss() {
-        window.clearInterval(this.counterInterval);
-        let activationDistance = this.el.offsetWidth * this.options.activationPercent;
+        clearInterval(this.counterInterval);
+        const activationDistance = this.el.offsetWidth * this.options.activationPercent;
         if (this.wasSwiped) {
             this.el.style.transition = 'transform .05s, opacity .05s';
             this.el.style.transform = `translateX(${activationDistance}px)`;
@@ -7496,20 +7834,17 @@ class Toast {
     }
 }
 
-const version = '2.1.1';
-const Grid = (children = '') => {
-    return `<div class="row">${children}</row>`;
-};
-function Button(children = '') {
-    return `<button class="btn">${children}</button>`;
-}
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const version = '2.2.1';
 /**
  * Automatically initialize components.
  * @param context Root element to initialize. Defaults to `document.body`.
+ * @param options Options for each component.
  */
-function AutoInit(context = document.body) {
-    let registry = {
+function AutoInit(context = document.body, options) {
+    const registry = {
         Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'),
+        Cards: context.querySelectorAll('.cards:not(.no-autoinit)'),
         Carousel: context.querySelectorAll('.carousel:not(.no-autoinit)'),
         Chips: context.querySelectorAll('.chips:not(.no-autoinit)'),
         Collapsible: context.querySelectorAll('.collapsible:not(.no-autoinit)'),
@@ -7528,24 +7863,25 @@ function AutoInit(context = document.body) {
         Tooltip: context.querySelectorAll('.tooltipped:not(.no-autoinit)'),
         FloatingActionButton: context.querySelectorAll('.fixed-action-btn:not(.no-autoinit)')
     };
-    Autocomplete.init(registry.Autocomplete, {});
-    Carousel.init(registry.Carousel, {});
-    Chips.init(registry.Chips, {});
-    Collapsible.init(registry.Collapsible, {});
-    Datepicker.init(registry.Datepicker, {});
-    Dropdown.init(registry.Dropdown, {});
-    Materialbox.init(registry.Materialbox, {});
-    Modal.init(registry.Modal, {});
-    Parallax.init(registry.Parallax, {});
-    Pushpin.init(registry.Pushpin, {});
-    ScrollSpy.init(registry.ScrollSpy, {});
-    FormSelect.init(registry.FormSelect, {});
-    Sidenav.init(registry.Sidenav, {});
-    Tabs.init(registry.Tabs, {});
-    TapTarget.init(registry.TapTarget, {});
-    Timepicker.init(registry.Timepicker, {});
-    Tooltip.init(registry.Tooltip, {});
-    FloatingActionButton.init(registry.FloatingActionButton, {});
+    Autocomplete.init(registry.Autocomplete, options?.Autocomplete ?? {});
+    Cards.init(registry.Cards, options?.Cards ?? {});
+    Carousel.init(registry.Carousel, options?.Carousel ?? {});
+    Chips.init(registry.Chips, options?.Chips ?? {});
+    Collapsible.init(registry.Collapsible, options?.Collapsible ?? {});
+    Datepicker.init(registry.Datepicker, options?.Datepicker ?? {});
+    Dropdown.init(registry.Dropdown, options?.Dropdown ?? {});
+    Materialbox.init(registry.Materialbox, options?.Materialbox ?? {});
+    Modal.init(registry.Modal, options?.Modal ?? {});
+    Parallax.init(registry.Parallax, options?.Parallax ?? {});
+    Pushpin.init(registry.Pushpin, options?.Pushpin ?? {});
+    ScrollSpy.init(registry.ScrollSpy, options?.ScrollSpy ?? {});
+    FormSelect.init(registry.FormSelect, options?.FormSelect ?? {});
+    Sidenav.init(registry.Sidenav, options?.Sidenav ?? {});
+    Tabs.init(registry.Tabs, options?.Tabs ?? {});
+    TapTarget.init(registry.TapTarget, options?.TapTarget ?? {});
+    Timepicker.init(registry.Timepicker, options?.Timepicker ?? {});
+    Tooltip.init(registry.Tooltip, options?.Tooltip ?? {});
+    FloatingActionButton.init(registry.FloatingActionButton, options?.FloatingActionButton ?? {});
 }
 // Init
 if (typeof document !== 'undefined') {
@@ -7554,10 +7890,9 @@ if (typeof document !== 'undefined') {
     document.addEventListener('focus', Utils.docHandleFocus, true);
     document.addEventListener('blur', Utils.docHandleBlur, true);
 }
-Cards.Init();
 Forms.Init();
 Chips.Init();
 Waves.Init();
 Range.Init();
 
-export { AutoInit, Autocomplete, Button, Cards, Carousel, CharacterCounter, Chips, Collapsible, Datepicker, Dropdown, FloatingActionButton, FormSelect, Forms, Grid, Materialbox, Modal, Parallax, Pushpin, Range, ScrollSpy, Sidenav, Slider, Tabs, TapTarget, Timepicker, Toast, Tooltip, Waves, version };
+export { AutoInit, Autocomplete, Cards, Carousel, CharacterCounter, Chips, Collapsible, Datepicker, Dropdown, FloatingActionButton, FormSelect, Forms, Materialbox, Modal, Parallax, Pushpin, Range, ScrollSpy, Sidenav, Slider, Tabs, TapTarget, Timepicker, Toast, Tooltip, Waves, version };