Release: 8.2.0

README.md

@@ -26,10 +26,13 @@ Regardless whether you want to create a Travel Blog or an e-commerce shop to sel
 <p>Created by <a href="https://mdbootstrap.com"><img height="30" src="https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-r.png"></a>  
 <a href="https://npmcharts.com/compare/mdbootstrap?minimal=true"> <img src="https://img.shields.io/npm/dm/mdbootstrap.svg?label=NPM%20Downloads" alt="Downloads"></a>
 <a href="https://github.com/mdbootstrap/bootstrap-material-design/blob/master/License.pdf"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
-<a href="https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+5+UI+KIT%20https://mdbootstrap.com/docs/jquery/&hashtags=javascript,code,webdesign,bootstrap"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&label=Let%20us%20know%20you%20were%20here%21&"></a>
-<a href="https://www.youtube.com/watch?v=c9B4TPnak1A"><img alt="YouTube Video Views" src="https://img.shields.io/youtube/views/c9B4TPnak1A?label=Bootstrap%205%20Tutorial%20Views&style=social"></a></p>
+<a href="https://x.com/intent/post?text=Thanks+%40mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+5+UI+KIT+https%3A%2F%2Fmdbootstrap.com%2Fdocs%2Fjquery%2F&hashtags=javascript%2Ccode%2Cwebdesign%2Cbootstrap"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&label=Let%20us%20know%20you%20were%20here%21&"></a>
+<a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/">
+  <img src="https://img.shields.io/static/v1?label=MDBootstrap&message=Tutorial&labelColor=007bff&color=ffffff&logoColor=007bff&textColor=000000" alt="MDBootstrap tutorial">
+</a></p>
 
-Trusted by <b>2 000 000+</b> developers & designers. Used by companies & institutions like
+
+Trusted by <b>3 000 000+</b> developers & designers. Used by companies & institutions like
 <table>
   <tbody>
     <tr>
@@ -78,37 +81,37 @@ ___
 
 # Bootstrap 5 tutorial
 
-**[>> Learn more about Bootstrap 5](https://mdbootstrap.com/docs/standard/bootstrap-5/)**
+**[>> Learn more about Bootstrap 5](https://mdbootstrap.com/docs/standard/)**
 
 
-**[>> Bootstrap 5 Tutorial](https://mdbootstrap.com/docs/standard/bootstrap-5-tutorial/)**
+**[>> Bootstrap 5 Tutorial](https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/)**
 
-**[>> Subscribe to our YouTube channel with dozens of Bootstrap tutorials](https://www.youtube.com/c/Mdbootstrap?sub_confirmation=1)**
+**[>> Subscribe to our YouTube channel with dozens of Bootstrap tutorials](https://www.youtube.com/c/Mdbootstrap)**
 
 <table>
   <tbody>
     <tr>
       <td align="center">
-         <a href="https://mdbootstrap.com/docs/standard/getting-started/" alt="Bootstrap Tutorials" rel="dofollow">
+         <a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/" alt="Bootstrap Tutorials" rel="dofollow">
           		<img src="https://mdbootstrap.com/wp-content/uploads/2020/12/learnmore-1.png">
           </a>
       </td>
       <td>
-          <a href="https://mdbootstrap.com/docs/standard/bootstrap-5-tutorial/#section-beginner" alt="Bootstrap 5" rel="dofollow">
-          		<img src="https://mdbootstrap.com/wp-content/uploads/2020/12/cover-bootstrap-5-1.png">
+          <a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/#section-beginner" alt="Bootstrap 5" rel="dofollow">
+          		<img src="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/assets/featured-image.png">
           </a>
       </td>
     </tr>
      <tr>
         <td align="center">
           <p align="center"><b>Start learning from Basics</b></p>
-          <a href="https://mdbootstrap.com/docs/standard/getting-started/" alt="Bootstrap 5" rel="dofollow">
+          <a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/" alt="Bootstrap 5" rel="dofollow">
           		<img src="https://mdbootstrap.com/wp-content/uploads/2020/12/Screenshot_26.png">
           </a>
          </td>
         <td align="center">
           <p align="center"><b>Learn Bootstrap 5 | Crash Course for Beginners in 1.5H</b></p>
-          <a href="https://mdbootstrap.com/docs/standard/bootstrap-5-tutorial/#section-beginner" alt="Bootstrap 5" rel="dofollow">
+          <a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/#section-beginner" alt="Bootstrap 5" rel="dofollow">
           		<img src="https://mdbootstrap.com/wp-content/uploads/2020/12/Screenshot_26.png">
           </a>
          </td>

README.txt

@@ -1,5 +1,5 @@
 MDB5
-Version: FREE 7.3.1
+Version: FREE 8.2.0
 
 Documentation:
 https://mdbootstrap.com/docs/standard/

js/mdb.es.min.js

@@ -6717,7 +6717,6 @@ const DATA_KEY$2 = `mdb.${NAME$2}`;
 const EVENT_KEY = `.${DATA_KEY$2}`;
 const Default$1 = {
   offset: [0, 2],
-  flip: true,
   boundary: "clippingParents",
   reference: "toggle",
   display: "dynamic",
@@ -6726,7 +6725,6 @@ const Default$1 = {
 };
 const DefaultType$1 = {
   offset: "(array|string|function)",
-  flip: "boolean",
   boundary: "(string|element)",
   reference: "(string|element|object)",
   display: "string",
@@ -6803,7 +6801,6 @@ class Dropdown2 extends Dropdown$1 {
         {
           name: "preventOverflow",
           options: {
-            altBoundary: this._config.flip,
             boundary: this._config.boundary
           }
         },
@@ -7340,9 +7337,13 @@ class Range extends BaseComponent2 {
     });
   }
 }
+const callbackInitState = /* @__PURE__ */ new Map();
 const alertCallback = (component, initSelector) => {
   const Alert3 = component;
-  enableDismissTrigger(Alert3, "close");
+  if (!callbackInitState.has(component.name)) {
+    enableDismissTrigger(Alert3);
+    callbackInitState.set(component.name, true);
+  }
   SelectorEngine$1.find(initSelector).forEach((element2) => {
     return Alert3.getOrCreateInstance(element2);
   });
@@ -7350,17 +7351,23 @@ const alertCallback = (component, initSelector) => {
 const buttonCallback = (component, initSelector) => {
   const Button3 = component;
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
-  EventHandler$1.on(document, EVENT_CLICK_DATA_API, initSelector, (event) => {
-    event.preventDefault();
-    const button = event.target.closest(initSelector);
-    const data = Button3.getOrCreateInstance(button);
-    data.toggle();
-  });
+  if (!callbackInitState.has(component.name)) {
+    EventHandler$1.on(document, EVENT_CLICK_DATA_API, initSelector, (event) => {
+      event.preventDefault();
+      const button = event.target.closest(initSelector);
+      const data = Button3.getOrCreateInstance(button);
+      data.toggle();
+    });
+    callbackInitState.set(component.name, true);
+  }
   SelectorEngine$1.find(initSelector).forEach((element2) => {
     return Button3.getOrCreateInstance(element2);
   });
 };
 const carouselCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
   const SELECTOR_DATA_SLIDE = "[data-mdb-slide], [data-mdb-slide-to]";
   const CLASS_NAME_CAROUSEL2 = "carousel";
@@ -7394,21 +7401,25 @@ const carouselCallback = (component, initSelector) => {
       Carousel3.getOrCreateInstance(carousel);
     });
   });
+  callbackInitState.set(component.name, true);
 };
 const collapseCallback = (component, initSelector) => {
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
   const SELECTOR_DATA_TOGGLE2 = initSelector;
   const Collapse3 = component;
-  EventHandler$1.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE2, function(event) {
-    if (event.target.tagName === "A" || event.delegateTarget && event.delegateTarget.tagName === "A") {
-      event.preventDefault();
-    }
-    const selector = getSelectorFromElement(this);
-    const selectorElements = SelectorEngine$1.find(selector);
-    selectorElements.forEach((element2) => {
-      Collapse3.getOrCreateInstance(element2, { toggle: false }).toggle();
+  if (!callbackInitState.has(component.name)) {
+    EventHandler$1.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE2, function(event) {
+      if (event.target.tagName === "A" || event.delegateTarget && event.delegateTarget.tagName === "A") {
+        event.preventDefault();
+      }
+      const selector = getSelectorFromElement(this);
+      const selectorElements = SelectorEngine$1.find(selector);
+      selectorElements.forEach((element2) => {
+        Collapse3.getOrCreateInstance(element2, { toggle: false }).toggle();
+      });
     });
-  });
+    callbackInitState.set(component.name, true);
+  }
   SelectorEngine$1.find(SELECTOR_DATA_TOGGLE2).forEach((el) => {
     const selector = getSelectorFromElement(el);
     const selectorElements = SelectorEngine$1.find(selector);
@@ -7424,19 +7435,27 @@ const dropdownCallback = (component, initSelector) => {
   const SELECTOR_MENU2 = ".dropdown-menu";
   const SELECTOR_DATA_TOGGLE2 = `[data-mdb-${component.NAME}-initialized]`;
   const Dropdown3 = component;
-  EventHandler$1.on(
-    document,
-    EVENT_KEYDOWN_DATA_API,
-    SELECTOR_DATA_TOGGLE2,
-    Dropdown3.dataApiKeydownHandler
-  );
-  EventHandler$1.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU2, Dropdown3.dataApiKeydownHandler);
-  EventHandler$1.on(document, EVENT_CLICK_DATA_API, Dropdown3.clearMenus);
-  EventHandler$1.on(document, EVENT_KEYUP_DATA_API, Dropdown3.clearMenus);
-  EventHandler$1.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE2, function(event) {
-    event.preventDefault();
-    Dropdown3.getOrCreateInstance(this).toggle();
-  });
+  if (!callbackInitState.has(component.name)) {
+    EventHandler$1.on(
+      document,
+      EVENT_KEYDOWN_DATA_API,
+      SELECTOR_DATA_TOGGLE2,
+      Dropdown3.dataApiKeydownHandler
+    );
+    EventHandler$1.on(
+      document,
+      EVENT_KEYDOWN_DATA_API,
+      SELECTOR_MENU2,
+      Dropdown3.dataApiKeydownHandler
+    );
+    EventHandler$1.on(document, EVENT_CLICK_DATA_API, Dropdown3.clearMenus);
+    EventHandler$1.on(document, EVENT_KEYUP_DATA_API, Dropdown3.clearMenus);
+    EventHandler$1.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE2, function(event) {
+      event.preventDefault();
+      Dropdown3.getOrCreateInstance(this).toggle();
+    });
+  }
+  callbackInitState.set(component.name, true);
   SelectorEngine$1.find(initSelector).forEach((el) => {
     Dropdown3.getOrCreateInstance(el);
   });
@@ -7446,31 +7465,56 @@ const inputCallback = (component, initSelector) => {
   const SELECTOR_OUTLINE_INPUT = `${SELECTOR_DATA_INIT} input`;
   const SELECTOR_OUTLINE_TEXTAREA = `${SELECTOR_DATA_INIT} textarea`;
   const Input2 = component;
-  EventHandler$1.on(document, "focus", SELECTOR_OUTLINE_INPUT, Input2.activate(new Input2()));
-  EventHandler$1.on(document, "input", SELECTOR_OUTLINE_INPUT, Input2.activate(new Input2()));
-  EventHandler$1.on(document, "blur", SELECTOR_OUTLINE_INPUT, Input2.deactivate(new Input2()));
-  EventHandler$1.on(document, "focus", SELECTOR_OUTLINE_TEXTAREA, Input2.activate(new Input2()));
-  EventHandler$1.on(document, "input", SELECTOR_OUTLINE_TEXTAREA, Input2.activate(new Input2()));
-  EventHandler$1.on(document, "blur", SELECTOR_OUTLINE_TEXTAREA, Input2.deactivate(new Input2()));
-  EventHandler$1.on(window, "shown.bs.modal", (e) => {
-    SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element2) => {
-      const instance = Input2.getInstance(element2.parentNode);
-      if (!instance) {
-        return;
-      }
-      instance.update();
+  if (!callbackInitState.has(component.name)) {
+    EventHandler$1.on(document, "focus", SELECTOR_OUTLINE_INPUT, Input2.activate(new Input2()));
+    EventHandler$1.on(document, "input", SELECTOR_OUTLINE_INPUT, Input2.activate(new Input2()));
+    EventHandler$1.on(document, "blur", SELECTOR_OUTLINE_INPUT, Input2.deactivate(new Input2()));
+    EventHandler$1.on(document, "focus", SELECTOR_OUTLINE_TEXTAREA, Input2.activate(new Input2()));
+    EventHandler$1.on(document, "input", SELECTOR_OUTLINE_TEXTAREA, Input2.activate(new Input2()));
+    EventHandler$1.on(document, "blur", SELECTOR_OUTLINE_TEXTAREA, Input2.deactivate(new Input2()));
+    EventHandler$1.on(window, "shown.bs.modal", (e) => {
+      SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element2) => {
+        const instance = Input2.getInstance(element2.parentNode);
+        if (!instance) {
+          return;
+        }
+        instance.update();
+      });
+      SelectorEngine$1.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element2) => {
+        const instance = Input2.getInstance(element2.parentNode);
+        if (!instance) {
+          return;
+        }
+        instance.update();
+      });
     });
-    SelectorEngine$1.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element2) => {
-      const instance = Input2.getInstance(element2.parentNode);
-      if (!instance) {
-        return;
+    EventHandler$1.on(window, "shown.bs.dropdown", (e) => {
+      const target = e.target.parentNode.querySelector(".dropdown-menu");
+      if (target) {
+        SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, target).forEach((element2) => {
+          const instance = Input2.getInstance(element2.parentNode);
+          if (!instance) {
+            return;
+          }
+          instance.update();
+        });
+        SelectorEngine$1.find(SELECTOR_OUTLINE_TEXTAREA, target).forEach((element2) => {
+          const instance = Input2.getInstance(element2.parentNode);
+          if (!instance) {
+            return;
+          }
+          instance.update();
+        });
       }
-      instance.update();
     });
-  });
-  EventHandler$1.on(window, "shown.bs.dropdown", (e) => {
-    const target = e.target.parentNode.querySelector(".dropdown-menu");
-    if (target) {
+    EventHandler$1.on(window, "shown.bs.tab", (e) => {
+      let targetId;
+      if (e.target.href) {
+        targetId = e.target.href.split("#")[1];
+      } else {
+        targetId = Manipulator$1.getDataAttribute(e.target, "target").split("#")[1];
+      }
+      const target = SelectorEngine$1.findOne(`#${targetId}`);
       SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, target).forEach((element2) => {
         const instance = Input2.getInstance(element2.parentNode);
         if (!instance) {
@@ -7485,55 +7529,33 @@ const inputCallback = (component, initSelector) => {
         }
         instance.update();
       });
-    }
-  });
-  EventHandler$1.on(window, "shown.bs.tab", (e) => {
-    let targetId;
-    if (e.target.href) {
-      targetId = e.target.href.split("#")[1];
-    } else {
-      targetId = Manipulator$1.getDataAttribute(e.target, "target").split("#")[1];
-    }
-    const target = SelectorEngine$1.findOne(`#${targetId}`);
-    SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, target).forEach((element2) => {
-      const instance = Input2.getInstance(element2.parentNode);
-      if (!instance) {
+    });
+    EventHandler$1.on(window, "reset", (e) => {
+      SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element2) => {
+        const instance = Input2.getInstance(element2.parentNode);
+        if (!instance) {
+          return;
+        }
+        instance.forceInactive();
+      });
+      SelectorEngine$1.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element2) => {
+        const instance = Input2.getInstance(element2.parentNode);
+        if (!instance) {
+          return;
+        }
+        instance.forceInactive();
+      });
+    });
+    EventHandler$1.on(window, "onautocomplete", (e) => {
+      const instance = Input2.getInstance(e.target.parentNode);
+      if (!instance || !e.cancelable) {
         return;
       }
-      instance.update();
+      instance.forceActive();
     });
-    SelectorEngine$1.find(SELECTOR_OUTLINE_TEXTAREA, target).forEach((element2) => {
-      const instance = Input2.getInstance(element2.parentNode);
-      if (!instance) {
-        return;
-      }
-      instance.update();
-    });
-  });
+    callbackInitState.set(component.name, true);
+  }
   SelectorEngine$1.find(SELECTOR_DATA_INIT).map((element2) => Input2.getOrCreateInstance(element2));
-  EventHandler$1.on(window, "reset", (e) => {
-    SelectorEngine$1.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element2) => {
-      const instance = Input2.getInstance(element2.parentNode);
-      if (!instance) {
-        return;
-      }
-      instance.forceInactive();
-    });
-    SelectorEngine$1.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element2) => {
-      const instance = Input2.getInstance(element2.parentNode);
-      if (!instance) {
-        return;
-      }
-      instance.forceInactive();
-    });
-  });
-  EventHandler$1.on(window, "onautocomplete", (e) => {
-    const instance = Input2.getInstance(e.target.parentNode);
-    if (!instance || !e.cancelable) {
-      return;
-    }
-    instance.forceActive();
-  });
 };
 const modalCallback = (component, initSelector) => {
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
@@ -7541,31 +7563,34 @@ const modalCallback = (component, initSelector) => {
   const Modal3 = component;
   const EVENT_SHOW2 = `show.bs.${component.name}`;
   const EVENT_HIDDEN2 = `hidden.bs.${component.name}`;
-  EventHandler$1.on(document, EVENT_CLICK_DATA_API, initSelector, function(event) {
-    const target = getElementFromSelector(this);
-    if (["A", "AREA"].includes(this.tagName)) {
-      event.preventDefault();
-    }
-    EventHandler$1.one(target, EVENT_SHOW2, (showEvent) => {
-      if (showEvent.defaultPrevented) {
-        return;
+  if (!callbackInitState.has(component.name)) {
+    EventHandler$1.on(document, EVENT_CLICK_DATA_API, initSelector, function(event) {
+      const target = getElementFromSelector(this);
+      if (["A", "AREA"].includes(this.tagName)) {
+        event.preventDefault();
       }
-      EventHandler$1.one(target, EVENT_HIDDEN2, () => {
-        if (isVisible$1(this)) {
-          this.focus();
+      EventHandler$1.one(target, EVENT_SHOW2, (showEvent) => {
+        if (showEvent.defaultPrevented) {
+          return;
+        }
+        EventHandler$1.one(target, EVENT_HIDDEN2, () => {
+          if (isVisible$1(this)) {
+            this.focus();
+          }
+        });
+      });
+      const alreadyOpenedModals = SelectorEngine$1.find(OPEN_SELECTOR);
+      alreadyOpenedModals.forEach((modal) => {
+        if (!modal.classList.contains("modal-non-invasive-show")) {
+          Modal3.getInstance(modal).hide();
         }
       });
+      const data = Modal3.getOrCreateInstance(target);
+      data.toggle(this);
     });
-    const alreadyOpenedModals = SelectorEngine$1.find(OPEN_SELECTOR);
-    alreadyOpenedModals.forEach((modal) => {
-      if (!modal.classList.contains("modal-non-invasive-show")) {
-        Modal3.getInstance(modal).hide();
-      }
-    });
-    const data = Modal3.getOrCreateInstance(target);
-    data.toggle(this);
-  });
-  enableDismissTrigger(Modal3);
+    enableDismissTrigger(Modal3);
+    callbackInitState.set(component.name, true);
+  }
   SelectorEngine$1.find(initSelector).forEach((el) => {
     const selector = getSelectorFromElement(el);
     const selectorElement = SelectorEngine$1.findOne(selector);
@@ -7573,6 +7598,9 @@ const modalCallback = (component, initSelector) => {
   });
 };
 const offcanvasCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
   const OPEN_SELECTOR = ".offcanvas.show";
   const Offcanvas2 = component;
@@ -7612,8 +7640,12 @@ const offcanvasCallback = (component, initSelector) => {
     });
   });
   enableDismissTrigger(Offcanvas2);
+  callbackInitState.set(component.name, true);
 };
 const scrollspyCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
   const EVENT_LOAD_DATA_API = `load.bs.${component.name}.data-api`;
   const ScrollSpy3 = component;
   EventHandler$1.on(window, EVENT_LOAD_DATA_API, () => {
@@ -7621,6 +7653,7 @@ const scrollspyCallback = (component, initSelector) => {
       ScrollSpy3.getOrCreateInstance(el);
     });
   });
+  callbackInitState.set(component.name, true);
 };
 const tabCallback = (component, initSelector) => {
   const EVENT_LOAD_DATA_API = `load.bs.${component.name}.data-api`;
@@ -7628,31 +7661,40 @@ const tabCallback = (component, initSelector) => {
   const CLASS_NAME_ACTIVE2 = "active";
   const SELECTOR_DATA_TOGGLE_ACTIVE = `.${CLASS_NAME_ACTIVE2}[data-mdb-tab-init], .${CLASS_NAME_ACTIVE2}[data-mdb-pill-init], .${CLASS_NAME_ACTIVE2}[data-mdb-toggle="list"]`;
   const Tab3 = component;
-  EventHandler$1.on(document, EVENT_CLICK_DATA_API, initSelector, function(event) {
-    if (["A", "AREA"].includes(this.tagName)) {
-      event.preventDefault();
-    }
-    if (isDisabled$1(this)) {
-      return;
-    }
-    Tab3.getOrCreateInstance(this).show();
-  });
-  EventHandler$1.on(window, EVENT_LOAD_DATA_API, () => {
-    SelectorEngine$1.find(SELECTOR_DATA_TOGGLE_ACTIVE).forEach((element2) => {
-      Tab3.getOrCreateInstance(element2);
+  if (!callbackInitState.has(component.name)) {
+    EventHandler$1.on(document, EVENT_CLICK_DATA_API, initSelector, function(event) {
+      if (["A", "AREA"].includes(this.tagName)) {
+        event.preventDefault();
+      }
+      if (isDisabled$1(this)) {
+        return;
+      }
+      Tab3.getOrCreateInstance(this).show();
     });
-  });
+    EventHandler$1.on(window, EVENT_LOAD_DATA_API, () => {
+      SelectorEngine$1.find(SELECTOR_DATA_TOGGLE_ACTIVE).forEach((element2) => {
+        Tab3.getOrCreateInstance(element2);
+      });
+    });
+    callbackInitState.set(component.name, true);
+  }
 };
 const toastCallback = (component, initSelector) => {
   const Toast3 = component;
-  enableDismissTrigger(Toast3);
+  if (!callbackInitState.has(component.name)) {
+    enableDismissTrigger(Toast3);
+    callbackInitState.set(component.name, true);
+  }
   SelectorEngine$1.find(initSelector).forEach((element2) => {
     return Toast3.getOrCreateInstance(element2);
   });
 };
 const rippleCallback = (component, initSelector) => {
   const Ripple2 = component;
-  EventHandler$1.one(document, "mousedown", initSelector, Ripple2.autoInitial(new Ripple2()));
+  if (!callbackInitState.has(component.name)) {
+    EventHandler$1.one(document, "mousedown", initSelector, Ripple2.autoInitial(new Ripple2()));
+    callbackInitState.set(component.name, true);
+  }
 };
 const defaultInitSelectors = {
   // Bootstrap Components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-ui-kit",
-  "version": "7.3.1",
+  "version": "8.2.0",
   "type": "module",
   "main": "./js/mdb.umd.min.js",
   "module": "./js/mdb.es.min.js",

src/js/autoinit/callbacks/free.js

@@ -9,10 +9,15 @@ import {
 } from '../../mdb/util';
 import { enableDismissTrigger } from '../../bootstrap/mdb-prefix/util/component-functions';
 
+const callbackInitState = new Map();
+
 const alertCallback = (component, initSelector) => {
   const Alert = component;
 
-  enableDismissTrigger(Alert, 'close');
+  if (!callbackInitState.has(component.name)) {
+    enableDismissTrigger(Alert);
+    callbackInitState.set(component.name, true);
+  }
 
   // MDB init
   SelectorEngine.find(initSelector).forEach((element) => {
@@ -24,15 +29,18 @@ const buttonCallback = (component, initSelector) => {
   const Button = component;
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
 
-  // BS init
-  EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, (event) => {
-    event.preventDefault();
+  if (!callbackInitState.has(component.name)) {
+    // BS init
+    EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, (event) => {
+      event.preventDefault();
 
-    const button = event.target.closest(initSelector);
-    const data = Button.getOrCreateInstance(button);
+      const button = event.target.closest(initSelector);
+      const data = Button.getOrCreateInstance(button);
 
-    data.toggle();
-  });
+      data.toggle();
+    });
+    callbackInitState.set(component.name, true);
+  }
 
   // MDB init
   SelectorEngine.find(initSelector).forEach((element) => {
@@ -41,6 +49,10 @@ const buttonCallback = (component, initSelector) => {
 };
 
 const carouselCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
+
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
   const SELECTOR_DATA_SLIDE = '[data-mdb-slide], [data-mdb-slide-to]';
   const CLASS_NAME_CAROUSEL = 'carousel';
@@ -83,6 +95,8 @@ const carouselCallback = (component, initSelector) => {
       Carousel.getOrCreateInstance(carousel);
     });
   });
+
+  callbackInitState.set(component.name, true);
 };
 
 const collapseCallback = (component, initSelector) => {
@@ -90,22 +104,26 @@ const collapseCallback = (component, initSelector) => {
   const SELECTOR_DATA_TOGGLE = initSelector;
   const Collapse = component;
 
-  EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
-    // preventDefault only for <a> elements (which change the URL) not inside the collapsible element
-    if (
-      event.target.tagName === 'A' ||
-      (event.delegateTarget && event.delegateTarget.tagName === 'A')
-    ) {
-      event.preventDefault();
-    }
+  if (!callbackInitState.has(component.name)) {
+    EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+      // preventDefault only for <a> elements (which change the URL) not inside the collapsible element
+      if (
+        event.target.tagName === 'A' ||
+        (event.delegateTarget && event.delegateTarget.tagName === 'A')
+      ) {
+        event.preventDefault();
+      }
 
-    const selector = getSelectorFromElement(this);
-    const selectorElements = SelectorEngine.find(selector);
+      const selector = getSelectorFromElement(this);
+      const selectorElements = SelectorEngine.find(selector);
 
-    selectorElements.forEach((element) => {
-      Collapse.getOrCreateInstance(element, { toggle: false }).toggle();
+      selectorElements.forEach((element) => {
+        Collapse.getOrCreateInstance(element, { toggle: false }).toggle();
+      });
     });
-  });
+
+    callbackInitState.set(component.name, true);
+  }
 
   SelectorEngine.find(SELECTOR_DATA_TOGGLE).forEach((el) => {
     const selector = getSelectorFromElement(el);
@@ -125,19 +143,28 @@ const dropdownCallback = (component, initSelector) => {
   const SELECTOR_DATA_TOGGLE = `[data-mdb-${component.NAME}-initialized]`;
   const Dropdown = component;
 
-  EventHandler.on(
-    document,
-    EVENT_KEYDOWN_DATA_API,
-    SELECTOR_DATA_TOGGLE,
-    Dropdown.dataApiKeydownHandler
-  );
-  EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU, Dropdown.dataApiKeydownHandler);
-  EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus);
-  EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus);
-  EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
-    event.preventDefault();
-    Dropdown.getOrCreateInstance(this).toggle();
-  });
+  if (!callbackInitState.has(component.name)) {
+    EventHandler.on(
+      document,
+      EVENT_KEYDOWN_DATA_API,
+      SELECTOR_DATA_TOGGLE,
+      Dropdown.dataApiKeydownHandler
+    );
+    EventHandler.on(
+      document,
+      EVENT_KEYDOWN_DATA_API,
+      SELECTOR_MENU,
+      Dropdown.dataApiKeydownHandler
+    );
+    EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus);
+    EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus);
+    EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+      event.preventDefault();
+      Dropdown.getOrCreateInstance(this).toggle();
+    });
+  }
+
+  callbackInitState.set(component.name, true);
 
   SelectorEngine.find(initSelector).forEach((el) => {
     Dropdown.getOrCreateInstance(el);
@@ -150,34 +177,62 @@ const inputCallback = (component, initSelector) => {
   const SELECTOR_OUTLINE_TEXTAREA = `${SELECTOR_DATA_INIT} textarea`;
   const Input = component;
 
-  EventHandler.on(document, 'focus', SELECTOR_OUTLINE_INPUT, Input.activate(new Input()));
-  EventHandler.on(document, 'input', SELECTOR_OUTLINE_INPUT, Input.activate(new Input()));
-  EventHandler.on(document, 'blur', SELECTOR_OUTLINE_INPUT, Input.deactivate(new Input()));
+  if (!callbackInitState.has(component.name)) {
+    EventHandler.on(document, 'focus', SELECTOR_OUTLINE_INPUT, Input.activate(new Input()));
+    EventHandler.on(document, 'input', SELECTOR_OUTLINE_INPUT, Input.activate(new Input()));
+    EventHandler.on(document, 'blur', SELECTOR_OUTLINE_INPUT, Input.deactivate(new Input()));
 
-  EventHandler.on(document, 'focus', SELECTOR_OUTLINE_TEXTAREA, Input.activate(new Input()));
-  EventHandler.on(document, 'input', SELECTOR_OUTLINE_TEXTAREA, Input.activate(new Input()));
-  EventHandler.on(document, 'blur', SELECTOR_OUTLINE_TEXTAREA, Input.deactivate(new Input()));
+    EventHandler.on(document, 'focus', SELECTOR_OUTLINE_TEXTAREA, Input.activate(new Input()));
+    EventHandler.on(document, 'input', SELECTOR_OUTLINE_TEXTAREA, Input.activate(new Input()));
+    EventHandler.on(document, 'blur', SELECTOR_OUTLINE_TEXTAREA, Input.deactivate(new Input()));
 
-  EventHandler.on(window, 'shown.bs.modal', (e) => {
-    SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
-      const instance = Input.getInstance(element.parentNode);
-      if (!instance) {
-        return;
-      }
-      instance.update();
+    EventHandler.on(window, 'shown.bs.modal', (e) => {
+      SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
+        const instance = Input.getInstance(element.parentNode);
+        if (!instance) {
+          return;
+        }
+        instance.update();
+      });
+      SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element) => {
+        const instance = Input.getInstance(element.parentNode);
+        if (!instance) {
+          return;
+        }
+        instance.update();
+      });
     });
-    SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element) => {
-      const instance = Input.getInstance(element.parentNode);
-      if (!instance) {
-        return;
-      }
-      instance.update();
-    });
-  });
 
-  EventHandler.on(window, 'shown.bs.dropdown', (e) => {
-    const target = e.target.parentNode.querySelector('.dropdown-menu');
-    if (target) {
+    EventHandler.on(window, 'shown.bs.dropdown', (e) => {
+      const target = e.target.parentNode.querySelector('.dropdown-menu');
+      if (target) {
+        SelectorEngine.find(SELECTOR_OUTLINE_INPUT, target).forEach((element) => {
+          const instance = Input.getInstance(element.parentNode);
+          if (!instance) {
+            return;
+          }
+          instance.update();
+        });
+        SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, target).forEach((element) => {
+          const instance = Input.getInstance(element.parentNode);
+          if (!instance) {
+            return;
+          }
+          instance.update();
+        });
+      }
+    });
+
+    EventHandler.on(window, 'shown.bs.tab', (e) => {
+      let targetId;
+
+      if (e.target.href) {
+        targetId = e.target.href.split('#')[1];
+      } else {
+        targetId = Manipulator.getDataAttribute(e.target, 'target').split('#')[1];
+      }
+
+      const target = SelectorEngine.findOne(`#${targetId}`);
       SelectorEngine.find(SELECTOR_OUTLINE_INPUT, target).forEach((element) => {
         const instance = Input.getInstance(element.parentNode);
         if (!instance) {
@@ -192,64 +247,40 @@ const inputCallback = (component, initSelector) => {
         }
         instance.update();
       });
-    }
-  });
+    });
 
-  EventHandler.on(window, 'shown.bs.tab', (e) => {
-    let targetId;
+    // form reset handler
+    EventHandler.on(window, 'reset', (e) => {
+      SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
+        const instance = Input.getInstance(element.parentNode);
+        if (!instance) {
+          return;
+        }
+        instance.forceInactive();
+      });
+      SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element) => {
+        const instance = Input.getInstance(element.parentNode);
+        if (!instance) {
+          return;
+        }
+        instance.forceInactive();
+      });
+    });
 
-    if (e.target.href) {
-      targetId = e.target.href.split('#')[1];
-    } else {
-      targetId = Manipulator.getDataAttribute(e.target, 'target').split('#')[1];
-    }
-
-    const target = SelectorEngine.findOne(`#${targetId}`);
-    SelectorEngine.find(SELECTOR_OUTLINE_INPUT, target).forEach((element) => {
-      const instance = Input.getInstance(element.parentNode);
-      if (!instance) {
+    // auto-fill
+    EventHandler.on(window, 'onautocomplete', (e) => {
+      const instance = Input.getInstance(e.target.parentNode);
+      if (!instance || !e.cancelable) {
         return;
       }
-      instance.update();
+      instance.forceActive();
     });
-    SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, target).forEach((element) => {
-      const instance = Input.getInstance(element.parentNode);
-      if (!instance) {
-        return;
-      }
-      instance.update();
-    });
-  });
+
+    callbackInitState.set(component.name, true);
+  }
 
   // auto-init
   SelectorEngine.find(SELECTOR_DATA_INIT).map((element) => Input.getOrCreateInstance(element));
-
-  // form reset handler
-  EventHandler.on(window, 'reset', (e) => {
-    SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
-      const instance = Input.getInstance(element.parentNode);
-      if (!instance) {
-        return;
-      }
-      instance.forceInactive();
-    });
-    SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element) => {
-      const instance = Input.getInstance(element.parentNode);
-      if (!instance) {
-        return;
-      }
-      instance.forceInactive();
-    });
-  });
-
-  // auto-fill
-  EventHandler.on(window, 'onautocomplete', (e) => {
-    const instance = Input.getInstance(e.target.parentNode);
-    if (!instance || !e.cancelable) {
-      return;
-    }
-    instance.forceActive();
-  });
 };
 
 const modalCallback = (component, initSelector) => {
@@ -259,40 +290,43 @@ const modalCallback = (component, initSelector) => {
   const EVENT_SHOW = `show.bs.${component.name}`;
   const EVENT_HIDDEN = `hidden.bs.${component.name}`;
 
-  EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, function (event) {
-    const target = getElementFromSelector(this);
+  if (!callbackInitState.has(component.name)) {
+    EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, function (event) {
+      const target = getElementFromSelector(this);
 
-    if (['A', 'AREA'].includes(this.tagName)) {
-      event.preventDefault();
-    }
-
-    EventHandler.one(target, EVENT_SHOW, (showEvent) => {
-      if (showEvent.defaultPrevented) {
-        // only register focus restorer if modal will actually get shown
-        return;
+      if (['A', 'AREA'].includes(this.tagName)) {
+        event.preventDefault();
       }
 
-      EventHandler.one(target, EVENT_HIDDEN, () => {
-        if (isVisible(this)) {
-          this.focus();
+      EventHandler.one(target, EVENT_SHOW, (showEvent) => {
+        if (showEvent.defaultPrevented) {
+          // only register focus restorer if modal will actually get shown
+          return;
+        }
+
+        EventHandler.one(target, EVENT_HIDDEN, () => {
+          if (isVisible(this)) {
+            this.focus();
+          }
+        });
+      });
+
+      // avoid conflict when clicking modal toggler while another one is open
+      const alreadyOpenedModals = SelectorEngine.find(OPEN_SELECTOR);
+      alreadyOpenedModals.forEach((modal) => {
+        if (!modal.classList.contains('modal-non-invasive-show')) {
+          Modal.getInstance(modal).hide();
         }
       });
+
+      const data = Modal.getOrCreateInstance(target);
+
+      data.toggle(this);
     });
 
-    // avoid conflict when clicking modal toggler while another one is open
-    const alreadyOpenedModals = SelectorEngine.find(OPEN_SELECTOR);
-    alreadyOpenedModals.forEach((modal) => {
-      if (!modal.classList.contains('modal-non-invasive-show')) {
-        Modal.getInstance(modal).hide();
-      }
-    });
-
-    const data = Modal.getOrCreateInstance(target);
-
-    data.toggle(this);
-  });
-
-  enableDismissTrigger(Modal);
+    enableDismissTrigger(Modal);
+    callbackInitState.set(component.name, true);
+  }
 
   SelectorEngine.find(initSelector).forEach((el) => {
     const selector = getSelectorFromElement(el);
@@ -312,6 +346,10 @@ const popoverCallback = (component, initSelector) => {
 };
 
 const offcanvasCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
+
   const EVENT_CLICK_DATA_API = `click.bs.${component.name}.data-api`;
   const OPEN_SELECTOR = '.offcanvas.show';
   const Offcanvas = component;
@@ -362,9 +400,14 @@ const offcanvasCallback = (component, initSelector) => {
   });
 
   enableDismissTrigger(Offcanvas);
+  callbackInitState.set(component.name, true);
 };
 
 const scrollspyCallback = (component, initSelector) => {
+  if (callbackInitState.has(component.name)) {
+    return;
+  }
+
   const EVENT_LOAD_DATA_API = `load.bs.${component.name}.data-api`;
   const ScrollSpy = component;
 
@@ -373,6 +416,8 @@ const scrollspyCallback = (component, initSelector) => {
       ScrollSpy.getOrCreateInstance(el);
     });
   });
+
+  callbackInitState.set(component.name, true);
 };
 
 const tabCallback = (component, initSelector) => {
@@ -382,29 +427,36 @@ const tabCallback = (component, initSelector) => {
   const SELECTOR_DATA_TOGGLE_ACTIVE = `.${CLASS_NAME_ACTIVE}[data-mdb-tab-init], .${CLASS_NAME_ACTIVE}[data-mdb-pill-init], .${CLASS_NAME_ACTIVE}[data-mdb-toggle="list"]`;
   const Tab = component;
 
-  EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, function (event) {
-    if (['A', 'AREA'].includes(this.tagName)) {
-      event.preventDefault();
-    }
+  if (!callbackInitState.has(component.name)) {
+    EventHandler.on(document, EVENT_CLICK_DATA_API, initSelector, function (event) {
+      if (['A', 'AREA'].includes(this.tagName)) {
+        event.preventDefault();
+      }
 
-    if (isDisabled(this)) {
-      return;
-    }
+      if (isDisabled(this)) {
+        return;
+      }
 
-    Tab.getOrCreateInstance(this).show();
-  });
-
-  EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
-    SelectorEngine.find(SELECTOR_DATA_TOGGLE_ACTIVE).forEach((element) => {
-      Tab.getOrCreateInstance(element);
+      Tab.getOrCreateInstance(this).show();
     });
-  });
+
+    EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
+      SelectorEngine.find(SELECTOR_DATA_TOGGLE_ACTIVE).forEach((element) => {
+        Tab.getOrCreateInstance(element);
+      });
+    });
+
+    callbackInitState.set(component.name, true);
+  }
 };
 
 const toastCallback = (component, initSelector) => {
   const Toast = component;
 
-  enableDismissTrigger(Toast);
+  if (!callbackInitState.has(component.name)) {
+    enableDismissTrigger(Toast);
+    callbackInitState.set(component.name, true);
+  }
 
   // MDB init
   SelectorEngine.find(initSelector).forEach((element) => {
@@ -415,7 +467,10 @@ const toastCallback = (component, initSelector) => {
 const rippleCallback = (component, initSelector) => {
   const Ripple = component;
 
-  EventHandler.one(document, 'mousedown', initSelector, Ripple.autoInitial(new Ripple()));
+  if (!callbackInitState.has(component.name)) {
+    EventHandler.one(document, 'mousedown', initSelector, Ripple.autoInitial(new Ripple()));
+    callbackInitState.set(component.name, true);
+  }
 };
 
 export {

src/js/free/dropdown.js

@@ -16,7 +16,6 @@ const EVENT_KEY = `.${DATA_KEY}`;
 
 const Default = {
   offset: [0, 2],
-  flip: true,
   boundary: 'clippingParents',
   reference: 'toggle',
   display: 'dynamic',
@@ -26,7 +25,6 @@ const Default = {
 
 const DefaultType = {
   offset: '(array|string|function)',
-  flip: 'boolean',
   boundary: '(string|element)',
   reference: '(string|element|object)',
   display: 'string',
@@ -121,7 +119,6 @@ class Dropdown extends BSDropdown {
         {
           name: 'preventOverflow',
           options: {
-            altBoundary: this._config.flip,
             boundary: this._config.boundary,
           },
         },

src/js/mdb/perfect-scrollbar/handlers/drag-thumb.js

@@ -1,23 +1,9 @@
-/* eslint-disable */
-
-import * as CSS from '../lib/css';
-import * as DOM from '../lib/dom';
 import cls, { addScrollingClass, removeScrollingClass } from '../lib/class-names';
 import updateGeometry from '../update-geometry';
-import { toInt } from '../lib/util';
 
-export default function (i) {
-  bindMouseScrollHandler(i, [
-    'containerWidth',
-    'contentWidth',
-    'pageX',
-    'railXWidth',
-    'scrollbarX',
-    'scrollbarXWidth',
-    'scrollLeft',
-    'x',
-    'scrollbarXRail',
-  ]);
+let activeSlider = null; // Variable to track the currently active slider
+
+export default function setupScrollHandlers(i) {
   bindMouseScrollHandler(i, [
     'containerHeight',
     'contentHeight',
@@ -29,70 +15,96 @@ export default function (i) {
     'y',
     'scrollbarYRail',
   ]);
+
+  bindMouseScrollHandler(i, [
+    'containerWidth',
+    'contentWidth',
+    'pageX',
+    'railXWidth',
+    'scrollbarX',
+    'scrollbarXWidth',
+    'scrollLeft',
+    'x',
+    'scrollbarXRail',
+  ]);
 }
 
 function bindMouseScrollHandler(
   i,
   [
-    containerHeight,
-    contentHeight,
-    pageY,
-    railYHeight,
-    scrollbarY,
-    scrollbarYHeight,
-    scrollTop,
-    y,
-    scrollbarYRail,
+    containerDimension,
+    contentDimension,
+    pageAxis,
+    railDimension,
+    scrollbarAxis,
+    scrollbarDimension,
+    scrollAxis,
+    axis,
+    scrollbarRail,
   ]
 ) {
   const element = i.element;
-
-  let startingScrollTop = null;
-  let startingMousePageY = null;
+  let startingScrollPosition = null;
+  let startingMousePagePosition = null;
   let scrollBy = null;
 
-  function mouseMoveHandler(e) {
+  function moveHandler(e) {
     if (e.touches && e.touches[0]) {
-      e[pageY] = e.touches[0].pageY;
+      e[pageAxis] = e.touches[0][`page${axis.toUpperCase()}`];
     }
-    element[scrollTop] = startingScrollTop + scrollBy * (e[pageY] - startingMousePageY);
-    addScrollingClass(i, y);
-    updateGeometry(i);
 
-    e.stopPropagation();
-    e.preventDefault();
-  }
+    // Only move if the active slider is the one we started with
+    if (activeSlider === scrollbarAxis) {
+      element[scrollAxis] =
+        startingScrollPosition + scrollBy * (e[pageAxis] - startingMousePagePosition);
+      addScrollingClass(i, axis);
+      updateGeometry(i);
 
-  function mouseUpHandler() {
-    removeScrollingClass(i, y);
-    i[scrollbarYRail].classList.remove(cls.state.clicking);
-    i.event.unbind(i.ownerDocument, 'mousemove', mouseMoveHandler);
-  }
-
-  function bindMoves(e, touchMode) {
-    startingScrollTop = element[scrollTop];
-    if (touchMode && e.touches) {
-      e[pageY] = e.touches[0].pageY;
-    }
-    startingMousePageY = e[pageY];
-    scrollBy = (i[contentHeight] - i[containerHeight]) / (i[railYHeight] - i[scrollbarYHeight]);
-    if (!touchMode) {
-      i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
-      i.event.once(i.ownerDocument, 'mouseup', mouseUpHandler);
+      e.stopPropagation();
       e.preventDefault();
-    } else {
-      i.event.bind(i.ownerDocument, 'touchmove', mouseMoveHandler);
     }
-
-    i[scrollbarYRail].classList.add(cls.state.clicking);
-
-    e.stopPropagation();
   }
 
-  i.event.bind(i[scrollbarY], 'mousedown', (e) => {
-    bindMoves(e);
-  });
-  i.event.bind(i[scrollbarY], 'touchstart', (e) => {
-    bindMoves(e, true);
-  });
+  function endHandler() {
+    removeScrollingClass(i, axis);
+    i[scrollbarRail].classList.remove(cls.state.clicking);
+    document.removeEventListener('mousemove', moveHandler);
+    document.removeEventListener('mouseup', endHandler);
+    document.removeEventListener('touchmove', moveHandler);
+    document.removeEventListener('touchend', endHandler);
+    activeSlider = null; // Reset active slider when interaction ends
+  }
+
+  function bindMoves(e) {
+    if (activeSlider === null) {
+      // Only bind if no slider is currently active
+      activeSlider = scrollbarAxis; // Set current slider as active
+
+      startingScrollPosition = element[scrollAxis];
+      if (e.touches) {
+        e[pageAxis] = e.touches[0][`page${axis.toUpperCase()}`];
+      }
+      startingMousePagePosition = e[pageAxis];
+      scrollBy =
+        (i[contentDimension] - i[containerDimension]) / (i[railDimension] - i[scrollbarDimension]);
+
+      if (!e.touches) {
+        document.addEventListener('mousemove', moveHandler);
+        document.addEventListener('mouseup', endHandler);
+      } else {
+        document.addEventListener('touchmove', moveHandler, { passive: false });
+        document.addEventListener('touchend', endHandler);
+      }
+
+      i[scrollbarRail].classList.add(cls.state.clicking);
+    }
+
+    e.stopPropagation();
+    if (e.cancelable) {
+      e.preventDefault();
+    }
+  }
+
+  i[scrollbarAxis].addEventListener('mousedown', bindMoves);
+  i[scrollbarAxis].addEventListener('touchstart', bindMoves);
 }

src/js/mdb/perfect-scrollbar/handlers/touch.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import updateGeometry from '../update-geometry';
 import cls from '../lib/class-names';
 import * as CSS from '../lib/css';
@@ -11,6 +10,13 @@ export default function (i) {
 
   const element = i.element;
 
+  const state = {
+    startOffset: {},
+    startTime: 0,
+    speed: {},
+    easingLoop: null,
+  };
+
   function shouldPrevent(deltaX, deltaY) {
     const scrollTop = Math.floor(element.scrollTop);
     const scrollLeft = element.scrollLeft;
@@ -18,18 +24,13 @@ export default function (i) {
     const magnitudeY = Math.abs(deltaY);
 
     if (magnitudeY > magnitudeX) {
-      // user is perhaps trying to swipe up/down the page
-
       if (
         (deltaY < 0 && scrollTop === i.contentHeight - i.containerHeight) ||
         (deltaY > 0 && scrollTop === 0)
       ) {
-        // set prevent for mobile Chrome refresh
         return window.scrollY === 0 && deltaY > 0 && env.isChrome;
       }
     } else if (magnitudeX > magnitudeY) {
-      // user is perhaps trying to swipe left/right across the page
-
       if (
         (deltaX < 0 && scrollLeft === i.contentWidth - i.containerWidth) ||
         (deltaX > 0 && scrollLeft === 0)
@@ -48,21 +49,18 @@ export default function (i) {
     updateGeometry(i);
   }
 
-  let startOffset = {};
-  let startTime = 0;
-  let speed = {};
-  let easingLoop = null;
-
   function getTouch(e) {
     if (e.targetTouches) {
       return e.targetTouches[0];
-    } else {
-      // Maybe IE pointer
-      return e;
     }
+    // Maybe IE pointer
+    return e;
   }
 
   function shouldHandle(e) {
+    if (e.target === i.scrollbarX || e.target === i.scrollbarY) {
+      return false;
+    }
     if (e.pointerType && e.pointerType === 'pen' && e.buttons === 0) {
       return false;
     }
@@ -82,13 +80,13 @@ export default function (i) {
 
     const touch = getTouch(e);
 
-    startOffset.pageX = touch.pageX;
-    startOffset.pageY = touch.pageY;
+    state.startOffset.pageX = touch.pageX;
+    state.startOffset.pageY = touch.pageY;
 
-    startTime = new Date().getTime();
+    state.startTime = new Date().getTime();
 
-    if (easingLoop !== null) {
-      clearInterval(easingLoop);
+    if (state.easingLoop !== null) {
+      clearInterval(state.easingLoop);
     }
   }
 
@@ -143,53 +141,57 @@ export default function (i) {
 
       const currentOffset = { pageX: touch.pageX, pageY: touch.pageY };
 
-      const differenceX = currentOffset.pageX - startOffset.pageX;
-      const differenceY = currentOffset.pageY - startOffset.pageY;
+      const differenceX = currentOffset.pageX - state.startOffset.pageX;
+      const differenceY = currentOffset.pageY - state.startOffset.pageY;
 
       if (shouldBeConsumedByChild(e.target, differenceX, differenceY)) {
         return;
       }
 
       applyTouchMove(differenceX, differenceY);
-      startOffset = currentOffset;
+      state.startOffset = currentOffset;
 
       const currentTime = new Date().getTime();
 
-      const timeGap = currentTime - startTime;
+      const timeGap = currentTime - state.startTime;
       if (timeGap > 0) {
-        speed.x = differenceX / timeGap;
-        speed.y = differenceY / timeGap;
-        startTime = currentTime;
+        state.speed.x = differenceX / timeGap;
+        state.speed.y = differenceY / timeGap;
+        state.startTime = currentTime;
       }
 
       if (shouldPrevent(differenceX, differenceY)) {
-        e.preventDefault();
+        // Prevent the default behavior if the event is cancelable
+        if (e.cancelable) {
+          e.preventDefault();
+        }
       }
     }
   }
+
   function touchEnd() {
     if (i.settings.swipeEasing) {
-      clearInterval(easingLoop);
-      easingLoop = setInterval(function () {
+      clearInterval(state.easingLoop);
+      state.easingLoop = setInterval(() => {
         if (i.isInitialized) {
-          clearInterval(easingLoop);
+          clearInterval(state.easingLoop);
           return;
         }
 
-        if (!speed.x && !speed.y) {
-          clearInterval(easingLoop);
+        if (!state.speed.x && !state.speed.y) {
+          clearInterval(state.easingLoop);
           return;
         }
 
-        if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
-          clearInterval(easingLoop);
+        if (Math.abs(state.speed.x) < 0.01 && Math.abs(state.speed.y) < 0.01) {
+          clearInterval(state.easingLoop);
           return;
         }
 
-        applyTouchMove(speed.x * 30, speed.y * 30);
+        applyTouchMove(state.speed.x * 30, state.speed.y * 30);
 
-        speed.x *= 0.8;
-        speed.y *= 0.8;
+        state.speed.x *= 0.8;
+        state.speed.y *= 0.8;
       }, 10);
     }
   }

src/scss/free/_flag.scss

@@ -1,13 +1,3 @@
-/*!
- * # Semantic UI 2.4.2 - Flag
- * http://github.com/semantic-org/semantic-ui/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
 /*******************************
              Flag
 *******************************/

src/scss/free/_list-group.scss

@@ -6,6 +6,16 @@
   --#{$prefix}list-group-item-transition-time: #{$list-group-item-transition-time};
 }
 
+.list-group-item {
+  --#{$prefix}list-group-item-active-margin-top: #{$list-group-active-margin-top};
+
+  & + .list-group-item {
+    &.active {
+      margin-top: var(--#{$prefix}list-group-item-active-margin-top);
+    }
+  }
+}
+
 .list-group-item-action {
   transition: var(--#{$prefix}list-group-item-transition-time);
 

src/scss/free/_nav.scss

@@ -54,6 +54,7 @@
 
 .nav-pills {
   margin-left: -$nav-pills-margin;
+  margin-right: -$nav-pills-margin;
 
   .nav-link {
     --#{$prefix}nav-pills-link-border-radius: #{$nav-pills-link-border-radius};

src/scss/free/_progress.scss

@@ -4,3 +4,54 @@
   border-radius: 0;
   box-shadow: none;
 }
+
+.progress-circular {
+  --#{$prefix}progress-circular-size: #{$progress-circular-size};
+  --#{$prefix}progress-circular-bar-width: #{$progress-circular-bar-width};
+  --#{$prefix}progress-circular-color: var(--#{$prefix}emphasis-color);
+
+  position: relative;
+  width: var(--#{$prefix}progress-circular-size);
+  height: var(--#{$prefix}progress-circular-size);
+  background-color: transparent;
+  display: inline-block;
+
+  .progress-bar {
+    background-color: var(--#{$prefix}progress-bar-bg);
+  }
+
+  .progress-bar::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    box-sizing: border-box;
+
+    background: conic-gradient(
+      transparent calc(var(--percentage) * 1%),
+      var(--#{$prefix}progress-bg) 0%
+    );
+    -webkit-mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--#{$prefix}progress-circular-bar-width)),
+      black calc(100% - var(--#{$prefix}progress-circular-bar-width) + 1px)
+    );
+    mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--#{$prefix}progress-circular-bar-width)),
+      black calc(100% - var(--#{$prefix}progress-circular-bar-width) + 1px)
+    );
+    background-color: inherit;
+  }
+
+  .progress-label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--#{$prefix}progress-circular-color);
+  }
+}

src/scss/free/_root.scss

@@ -30,6 +30,7 @@
   --#{$prefix}box-shadow-color: #{$box-shadow-color};
   --#{$prefix}box-shadow-color-rgb: #{to-rgb($box-shadow-color)};
   --#{$prefix}stepper-mobile-bg: #{$stepper-mobile-bg};
+  --#{$prefix}datepicker-cell-in-range-background-color: #{$datepicker-cell-in-range-background-color};
 }
 
 @if $enable-dark-mode {
@@ -57,6 +58,7 @@
     --#{$prefix}box-shadow-color: #{$box-shadow-color-dark};
     --#{$prefix}box-shadow-color-rgb: #{to-rgb($box-shadow-color-dark)};
     --#{$prefix}stepper-mobile-bg: #{$stepper-mobile-bg-dark};
+    --#{$prefix}datepicker-cell-in-range-background-color: #{$datepicker-cell-in-range-bg-dark};
     // scss-docs-end root-dark-mode-vars
   }
 }

src/scss/free/_variables-dark.scss

@@ -68,6 +68,7 @@ $form-control-label-color-dark: $gray-400 !default;
 $form-control-disabled-bg-dark: $gray-700 !default;
 $box-shadow-color-dark: $black !default;
 $stepper-mobile-bg-dark: $body-tertiary-bg-dark !default;
+$datepicker-cell-in-range-bg-dark: $gray-700 !default;
 // scss-docs-start mdb-global-dark-theme-variables
 
 // Accordion

src/scss/free/_variables.scss

@@ -723,6 +723,7 @@ $form-control-label-color: $gray-600 !default;
 $form-control-disabled-bg: $gray-300 !default;
 $box-shadow-color: $black !default;
 $stepper-mobile-bg: $gray-50 !default;
+$datepicker-cell-in-range-background-color: $primary-border-subtle !default;
 // scss-docs-start mdb-global-light-theme-variables
 
 // Body
@@ -1561,6 +1562,8 @@ $alert-border-radius: $border-radius-lg !default;
 // scss-docs-start progress-variables
 $progress-height: 4px !default;
 $progress-bar-color: color-contrast($primary) !default;
+$progress-circular-size: 48px !default;
+$progress-circular-bar-width: 4px !default;
 // scss-docs-end progress-variables
 
 // Range
@@ -1600,6 +1603,7 @@ $list-group-light-active-border-radius: 0.5rem !default;
 $list-group-light-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
 $list-group-light-active-color: var(--#{$prefix}primary-text-emphasis) !default;
 
+$list-group-active-margin-top: 0 !default;
 $list-group-small-item-py: 0.5rem !default;
 // scss-docs-end list-group-variables
 

src/scss/free/forms/_input-group.scss

@@ -133,8 +133,8 @@ TEXTAREA {
     animation-name: onautofillstart;
 
     -webkit-background-clip: text;
-    box-shadow: inset 0 0 20px 20px white;
-    -webkit-box-shadow: 0 0 20px 20px white inset !important;
+    box-shadow: inset 0 0 20px 20px var(--#{$prefix}body-bg);
+    -webkit-box-shadow: 0 0 20px 20px var(--#{$prefix}body-bg) inset !important;
 
     &:hover,
     &:focus,
@@ -142,8 +142,8 @@ TEXTAREA {
       animation-name: onautofillstart;
 
       -webkit-background-clip: text;
-      box-shadow: inset 0 0 20px 20px white;
-      -webkit-box-shadow: 0 0 20px 20px white inset !important;
+      box-shadow: inset 0 0 20px 20px var(--#{$prefix}body-bg);
+      -webkit-box-shadow: 0 0 20px 20px var(--#{$prefix}body-bg) inset !important;
     }
   }
 

src/scss/free/forms/_validation.scss

@@ -89,9 +89,11 @@
           box-shadow: 0 1px 0 0 $color;
         }
         &:focus ~ .form-notch .form-notch-leading {
+          border-color: $color;
           box-shadow: -1px 0 0 0 $color, 0 1px 0 0 $color, 0 -1px 0 0 $color;
         }
         &:focus ~ .form-notch .form-notch-trailing {
+          border-color: $color;
           box-shadow: 1px 0 0 0 $color, 0 -1px 0 0 $color, 0 1px 0 0 $color;
         }