@coreui/coreui-pro - npm Package Compare versions

Comparing version 4.0.0-rc.5 to 4.0.0

js/dist/alert.js

 /*!
-  * CoreUI alert.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI alert.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -7,10 +7,9 @@ * Licensed under MIT (https://coreui.io)
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/data.js'), require('./dom/event-handler.js'), require('./base-component.js')) :
-  typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/data', './dom/event-handler', './base-component'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Alert = factory(global.SelectorEngine, global.Data, global.EventHandler, global.Base));
-}(this, (function (SelectorEngine, Data, EventHandler, BaseComponent) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/event-handler.js'), require('./base-component.js')) :
+  typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/event-handler', './base-component'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Alert = factory(global.SelectorEngine, global.EventHandler, global.Base));
+}(this, (function (SelectorEngine, EventHandler, BaseComponent) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-  var Data__default = /*#__PURE__*/_interopDefaultLegacy(Data);
   var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
@@ -53,3 +52,3 @@ var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-    if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+    if (jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
       return jQuery;
@@ -61,5 +60,14 @@ }
 
+  const DOMContentLoadedCallbacks = [];
+
   const onDOMContentLoaded = callback => {
     if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', callback);
+      // add listener on the first call when the document is in loading state
+      if (!DOMContentLoadedCallbacks.length) {
+        document.addEventListener('DOMContentLoaded', () => {
+          DOMContentLoadedCallbacks.forEach(callback => callback());
+        });
+      }
+
+      DOMContentLoadedCallbacks.push(callback);
     } else {
@@ -91,3 +99,3 @@ callback();
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): alert.js
+   * CoreUI (v4.0.0): alert.js
    * Licensed under MIT (https://coreui.io/license)
@@ -158,6 +166,3 @@ *
     _destroyElement(element) {
-      if (element.parentNode) {
-        element.parentNode.removeChild(element);
-      }
-
+      element.remove();
       EventHandler__default['default'].trigger(element, EVENT_CLOSED);
@@ -169,8 +174,4 @@ } // Static
       return this.each(function () {
-        let data = Data__default['default'].get(this, DATA_KEY);
+        const data = Alert.getOrCreateInstance(this);
 
-        if (!data) {
-          data = new Alert(this);
-        }
-
         if (config === 'close') {
@@ -177,0 +178,0 @@ data[config](this);

js/dist/base-component.js

 /*!
-  * CoreUI base-component.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI base-component.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -73,16 +73,34 @@ * Licensed under MIT (https://coreui.io)
 
-  const emulateTransitionEnd = (element, duration) => {
+  const execute = callback => {
+    if (typeof callback === 'function') {
+      callback();
+    }
+  };
+
+  const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
+    if (!waitForTransition) {
+      execute(callback);
+      return;
+    }
+
+    const durationPadding = 5;
+    const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding;
     let called = false;
-    const durationPadding = 5;
-    const emulatedDuration = duration + durationPadding;
 
-    function listener() {
+    const handler = ({
+      target
+    }) => {
+      if (target !== transitionElement) {
+        return;
+      }
+
       called = true;
-      element.removeEventListener(TRANSITION_END, listener);
-    }
+      transitionElement.removeEventListener(TRANSITION_END, handler);
+      execute(callback);
+    };
 
-    element.addEventListener(TRANSITION_END, listener);
+    transitionElement.addEventListener(TRANSITION_END, handler);
     setTimeout(() => {
       if (!called) {
-        triggerTransitionEnd(element);
+        triggerTransitionEnd(transitionElement);
       }
@@ -92,11 +110,5 @@ }, emulatedDuration);
 
-  const execute = callback => {
-    if (typeof callback === 'function') {
-      callback();
-    }
-  };
-
   /**
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): alert.js
+   * CoreUI (v4.0.0): alert.js
    * Licensed under MIT (https://coreui.io/license)
@@ -114,3 +126,3 @@ *
 
-  const VERSION = '4.0.0-rc.5';
+  const VERSION = '4.0.0';
 
@@ -138,10 +150,3 @@ class BaseComponent {
     _queueCallback(callback, element, isAnimated = true) {
-      if (!isAnimated) {
-        execute(callback);
-        return;
-      }
-
-      const transitionDuration = getTransitionDurationFromElement(element);
-      EventHandler__default['default'].one(element, 'transitionend', () => execute(callback));
-      emulateTransitionEnd(element, transitionDuration);
+      executeAfterTransition(callback, element, isAnimated);
     }
@@ -155,2 +160,6 @@ /** Static */
 
+    static getOrCreateInstance(element, config = {}) {
+      return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null);
+    }
+
     static get VERSION() {
@@ -157,0 +166,0 @@ return VERSION;

js/dist/button.js

 /*!
-  * CoreUI button.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI button.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -7,10 +7,9 @@ * Licensed under MIT (https://coreui.io)
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/data.js'), require('./dom/event-handler.js'), require('./base-component.js')) :
-  typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/data', './dom/event-handler', './base-component'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Button = factory(global.SelectorEngine, global.Data, global.EventHandler, global.Base));
-}(this, (function (SelectorEngine, Data, EventHandler, BaseComponent) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/event-handler.js'), require('./base-component.js')) :
+  typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/event-handler', './base-component'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Button = factory(global.SelectorEngine, global.EventHandler, global.Base));
+}(this, (function (SelectorEngine, EventHandler, BaseComponent) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-  var Data__default = /*#__PURE__*/_interopDefaultLegacy(Data);
   var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
@@ -24,3 +23,3 @@ var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-    if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+    if (jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
       return jQuery;
@@ -32,5 +31,14 @@ }
 
+  const DOMContentLoadedCallbacks = [];
+
   const onDOMContentLoaded = callback => {
     if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', callback);
+      // add listener on the first call when the document is in loading state
+      if (!DOMContentLoadedCallbacks.length) {
+        document.addEventListener('DOMContentLoaded', () => {
+          DOMContentLoadedCallbacks.forEach(callback => callback());
+        });
+      }
+
+      DOMContentLoadedCallbacks.push(callback);
     } else {
@@ -62,3 +70,3 @@ callback();
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): alert.js
+   * CoreUI (v4.0.0): alert.js
    * Licensed under MIT (https://coreui.io/license)
@@ -104,8 +112,4 @@ *
       return this.each(function () {
-        let data = Data__default['default'].get(this, DATA_KEY);
+        const data = Button.getOrCreateInstance(this);
 
-        if (!data) {
-          data = new Button(this);
-        }
-
         if (config === 'toggle') {
@@ -128,8 +132,3 @@ data[config]();
     const button = event.target.closest(SELECTOR_DATA_TOGGLE);
-    let data = Data__default['default'].get(button, DATA_KEY);
-
-    if (!data) {
-      data = new Button(button);
-    }
-
+    const data = Button.getOrCreateInstance(button);
     data.toggle();
@@ -136,0 +135,0 @@ });

js/dist/carousel.js

 /*!
-  * CoreUI carousel.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI carousel.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -7,6 +7,6 @@ * Licensed under MIT (https://coreui.io)
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/data.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./base-component.js')) :
-  typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/data', './dom/event-handler', './dom/manipulator', './base-component'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Carousel = factory(global.SelectorEngine, global.Data, global.EventHandler, global.Manipulator, global.Base));
-}(this, (function (SelectorEngine, Data, EventHandler, Manipulator, BaseComponent) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./base-component.js')) :
+  typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/event-handler', './dom/manipulator', './base-component'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Carousel = factory(global.SelectorEngine, global.EventHandler, global.Manipulator, global.Base));
+}(this, (function (SelectorEngine, EventHandler, Manipulator, BaseComponent) { 'use strict';
 
@@ -16,3 +16,2 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
   var SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
-  var Data__default = /*#__PURE__*/_interopDefaultLegacy(Data);
   var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
@@ -104,3 +103,3 @@ var Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator);
 
-    if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+    if (jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
       return jQuery;
@@ -112,5 +111,14 @@ }
 
+  const DOMContentLoadedCallbacks = [];
+
   const onDOMContentLoaded = callback => {
     if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', callback);
+      // add listener on the first call when the document is in loading state
+      if (!DOMContentLoadedCallbacks.length) {
+        document.addEventListener('DOMContentLoaded', () => {
+          DOMContentLoadedCallbacks.forEach(callback => callback());
+        });
+      }
+
+      DOMContentLoadedCallbacks.push(callback);
     } else {
@@ -171,3 +179,3 @@ callback();
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): carousel.js
+   * CoreUI (v4.0.0): carousel.js
    * Licensed under MIT (https://coreui.io/license)
@@ -214,2 +222,6 @@ *
   const DIRECTION_RIGHT = 'right';
+  const KEY_TO_DIRECTION = {
+    [ARROW_LEFT_KEY]: DIRECTION_RIGHT,
+    [ARROW_RIGHT_KEY]: DIRECTION_LEFT
+  };
   const EVENT_SLIDE = `slide${EVENT_KEY}`;
@@ -283,5 +295,3 @@ const EVENT_SLID = `slid${EVENT_KEY}`;
     next() {
-      if (!this._isSliding) {
-        this._slide(ORDER_NEXT);
-      }
+      this._slide(ORDER_NEXT);
     }
@@ -298,5 +308,3 @@
     prev() {
-      if (!this._isSliding) {
-        this._slide(ORDER_PREV);
-      }
+      this._slide(ORDER_PREV);
     }
@@ -363,3 +371,4 @@
       config = { ...Default,
-        ...config
+        ...Manipulator__default['default'].getDataAttributes(this._element),
+        ...(typeof config === 'object' ? config : {})
       };
@@ -462,10 +471,8 @@ typeCheckConfig(NAME, config, DefaultType);
 
-      if (event.key === ARROW_LEFT_KEY) {
-        event.preventDefault();
+      const direction = KEY_TO_DIRECTION[event.key];
 
-        this._slide(DIRECTION_RIGHT);
-      } else if (event.key === ARROW_RIGHT_KEY) {
+      if (direction) {
         event.preventDefault();
 
-        this._slide(DIRECTION_LEFT);
+        this._slide(direction);
       }
@@ -554,2 +561,6 @@ }
 
+      if (this._isSliding) {
+        return;
+      }
+
       const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName);
@@ -638,6 +649,6 @@
     static carouselInterface(element, config) {
-      let data = Data__default['default'].get(element, DATA_KEY);
-      let _config = { ...Default,
-        ...Manipulator__default['default'].getDataAttributes(element)
-      };
+      const data = Carousel.getOrCreateInstance(element, config);
+      let {
+        _config
+      } = data;
 
@@ -652,6 +663,2 @@ if (typeof config === 'object') {
 
-      if (!data) {
-        data = new Carousel(element, _config);
-      }
-
       if (typeof config === 'number') {
@@ -696,3 +703,3 @@ data.to(config);
       if (slideIndex) {
-        Data__default['default'].get(target, DATA_KEY).to(slideIndex);
+        Carousel.getInstance(target).to(slideIndex);
       }
@@ -716,3 +723,3 @@
     for (let i = 0, len = carousels.length; i < len; i++) {
-      Carousel.carouselInterface(carousels[i], Data__default['default'].get(carousels[i], DATA_KEY));
+      Carousel.carouselInterface(carousels[i], Carousel.getInstance(carousels[i]));
     }
@@ -719,0 +726,0 @@ });

js/dist/collapse.js

 /*!
-  * CoreUI collapse.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI collapse.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -111,3 +111,3 @@ * Licensed under MIT (https://coreui.io)
 
-    if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+    if (jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
       return jQuery;
@@ -119,5 +119,14 @@ }
 
+  const DOMContentLoadedCallbacks = [];
+
   const onDOMContentLoaded = callback => {
     if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', callback);
+      // add listener on the first call when the document is in loading state
+      if (!DOMContentLoadedCallbacks.length) {
+        document.addEventListener('DOMContentLoaded', () => {
+          DOMContentLoadedCallbacks.forEach(callback => callback());
+        });
+      }
+
+      DOMContentLoadedCallbacks.push(callback);
     } else {
@@ -149,3 +158,3 @@ callback();
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): collapse.js
+   * CoreUI (v4.0.0): collapse.js
    * Licensed under MIT (https://coreui.io/license)
@@ -269,3 +278,3 @@ *
         const tempActiveData = actives.find(elem => container !== elem);
-        activesData = tempActiveData ? Data__default['default'].get(tempActiveData, DATA_KEY) : null;
+        activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null;
 
@@ -433,3 +442,3 @@ if (activesData && activesData._isTransitioning) {
     static collapseInterface(element, config) {
-      let data = Data__default['default'].get(element, DATA_KEY);
+      let data = Collapse.getInstance(element);
       const _config = { ...Default,
@@ -481,3 +490,3 @@ ...Manipulator__default['default'].getDataAttributes(element),
     selectorElements.forEach(element => {
-      const data = Data__default['default'].get(element, DATA_KEY);
+      const data = Collapse.getInstance(element);
       let config;
@@ -484,0 +493,0 @@

js/dist/dom/data.js

 /*!
-  * CoreUI data.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI data.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -14,3 +14,3 @@ * Licensed under MIT (https://coreui.io)
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): dom/data.js
+   * CoreUI (v4.0.0): dom/data.js
    * Licensed under MIT (https://coreui.io/license)
@@ -17,0 +17,0 @@ *

js/dist/dom/event-handler.js

 /*!
-  * CoreUI event-handler.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI event-handler.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -17,3 +17,3 @@ * Licensed under MIT (https://coreui.io)
 
-    if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+    if (jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
       return jQuery;
@@ -27,3 +27,3 @@ }
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): dom/event-handler.js
+   * CoreUI (v4.0.0): dom/event-handler.js
    * Licensed under MIT (https://coreui.io/license)
@@ -30,0 +30,0 @@ *

js/dist/dom/manipulator.js

 /*!
-  * CoreUI manipulator.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI manipulator.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -14,3 +14,3 @@ * Licensed under MIT (https://coreui.io)
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): dom/manipulator.js
+   * CoreUI (v4.0.0): dom/manipulator.js
    * Licensed under MIT (https://coreui.io/license)
@@ -17,0 +17,0 @@ *

js/dist/dom/selector-engine.js

 /*!
-  * CoreUI selector-engine.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI selector-engine.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -14,3 +14,3 @@ * Licensed under MIT (https://coreui.io)
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): dom/selector-engine.js
+   * CoreUI (v4.0.0): dom/selector-engine.js
    * Licensed under MIT (https://coreui.io/license)
@@ -17,0 +17,0 @@ *

js/dist/dropdown.js

 /*!
-  * CoreUI dropdown.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI dropdown.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -7,6 +7,6 @@ * Licensed under MIT (https://coreui.io)
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@popperjs/core'), require('./dom/selector-engine.js'), require('./dom/data.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./base-component.js')) :
-  typeof define === 'function' && define.amd ? define(['@popperjs/core', './dom/selector-engine', './dom/data', './dom/event-handler', './dom/manipulator', './base-component'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Dropdown = factory(global.Popper, global.SelectorEngine, global.Data, global.EventHandler, global.Manipulator, global.Base));
-}(this, (function (Popper, SelectorEngine, Data, EventHandler, Manipulator, BaseComponent) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@popperjs/core'), require('./dom/selector-engine.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./base-component.js')) :
+  typeof define === 'function' && define.amd ? define(['@popperjs/core', './dom/selector-engine', './dom/event-handler', './dom/manipulator', './base-component'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Dropdown = factory(global.Popper, global.SelectorEngine, global.EventHandler, global.Manipulator, global.Base));
+}(this, (function (Popper, SelectorEngine, EventHandler, Manipulator, BaseComponent) { 'use strict';
 
@@ -37,3 +37,2 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
   var SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
-  var Data__default = /*#__PURE__*/_interopDefaultLegacy(Data);
   var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
@@ -148,3 +147,3 @@ var Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator);
 
-    if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+    if (jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
       return jQuery;
@@ -156,5 +155,14 @@ }
 
+  const DOMContentLoadedCallbacks = [];
+
   const onDOMContentLoaded = callback => {
     if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', callback);
+      // add listener on the first call when the document is in loading state
+      if (!DOMContentLoadedCallbacks.length) {
+        document.addEventListener('DOMContentLoaded', () => {
+          DOMContentLoadedCallbacks.forEach(callback => callback());
+        });
+      }
+
+      DOMContentLoadedCallbacks.push(callback);
     } else {
@@ -215,3 +223,3 @@ callback();
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): dropdown.js
+   * CoreUI (v4.0.0): dropdown.js
    * Licensed under MIT (https://coreui.io/license)
@@ -556,10 +564,4 @@ *
     static dropdownInterface(element, config) {
-      let data = Data__default['default'].get(element, DATA_KEY);
+      const data = Dropdown.getOrCreateInstance(element, config);
 
-      const _config = typeof config === 'object' ? config : null;
-
-      if (!data) {
-        data = new Dropdown(element, _config);
-      }
-
       if (typeof config === 'string') {
@@ -588,3 +590,3 @@ if (typeof data[config] === 'undefined') {
       for (let i = 0, len = toggles.length; i < len; i++) {
-        const context = Data__default['default'].get(toggles[i], DATA_KEY);
+        const context = Dropdown.getInstance(toggles[i]);
 
@@ -591,0 +593,0 @@ if (!context || context._config.autoClose === false) {

js/dist/modal.js

 /*!
-  * CoreUI modal.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI modal.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -98,18 +98,13 @@ * Licensed under MIT (https://coreui.io)
 
-  const emulateTransitionEnd = (element, duration) => {
-    let called = false;
-    const durationPadding = 5;
-    const emulatedDuration = duration + durationPadding;
+  const getElement = obj => {
+    if (isElement(obj)) {
+      // it's a jQuery object or a node element
+      return obj.jquery ? obj[0] : obj;
+    }
 
-    function listener() {
-      called = true;
-      element.removeEventListener(TRANSITION_END, listener);
+    if (typeof obj === 'string' && obj.length > 0) {
+      return SelectorEngine__default['default'].findOne(obj);
     }
 
-    element.addEventListener(TRANSITION_END, listener);
-    setTimeout(() => {
-      if (!called) {
-        triggerTransitionEnd(element);
-      }
-    }, emulatedDuration);
+    return null;
   };
@@ -144,3 +139,3 @@
 
-    if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+    if (jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
       return jQuery;
@@ -152,5 +147,14 @@ }
 
+  const DOMContentLoadedCallbacks = [];
+
   const onDOMContentLoaded = callback => {
     if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', callback);
+      // add listener on the first call when the document is in loading state
+      if (!DOMContentLoadedCallbacks.length) {
+        document.addEventListener('DOMContentLoaded', () => {
+          DOMContentLoadedCallbacks.forEach(callback => callback());
+        });
+      }
+
+      DOMContentLoadedCallbacks.push(callback);
     } else {
@@ -188,5 +192,35 @@ callback();
 
+  const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
+    if (!waitForTransition) {
+      execute(callback);
+      return;
+    }
+
+    const durationPadding = 5;
+    const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding;
+    let called = false;
+
+    const handler = ({
+      target
+    }) => {
+      if (target !== transitionElement) {
+        return;
+      }
+
+      called = true;
+      transitionElement.removeEventListener(TRANSITION_END, handler);
+      execute(callback);
+    };
+
+    transitionElement.addEventListener(TRANSITION_END, handler);
+    setTimeout(() => {
+      if (!called) {
+        triggerTransitionEnd(transitionElement);
+      }
+    }, emulatedDuration);
+  };
+
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.0.1): util/scrollBar.js
+   * Bootstrap (v5.0.2): util/scrollBar.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -198,37 +232,61 @@ * --------------------------------------------------------------------------
 
-  const getWidth = () => {
-    // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-    const documentWidth = document.documentElement.clientWidth;
-    return Math.abs(window.innerWidth - documentWidth);
-  };
+  class ScrollBarHelper {
+    constructor() {
+      this._element = document.body;
+    }
 
-  const hide = (width = getWidth()) => {
-    _disableOverFlow(); // give padding to element to balances the hidden scrollbar width
+    getWidth() {
+      // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
+      const documentWidth = document.documentElement.clientWidth;
+      return Math.abs(window.innerWidth - documentWidth);
+    }
 
+    hide() {
+      const width = this.getWidth();
 
-    _setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements, to keep shown fullwidth
+      this._disableOverFlow(); // give padding to element to balance the hidden scrollbar width
 
 
-    _setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width);
+      this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth
 
-    _setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width);
-  };
 
-  const _disableOverFlow = () => {
-    const actualValue = document.body.style.overflow;
+      this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width);
 
-    if (actualValue) {
-      Manipulator__default['default'].setDataAttribute(document.body, 'overflow', actualValue);
+      this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width);
     }
 
-    document.body.style.overflow = 'hidden';
-  };
+    _disableOverFlow() {
+      this._saveInitialAttribute(this._element, 'overflow');
 
-  const _setElementAttributes = (selector, styleProp, callback) => {
-    const scrollbarWidth = getWidth();
-    SelectorEngine__default['default'].find(selector).forEach(element => {
-      if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) {
-        return;
-      }
+      this._element.style.overflow = 'hidden';
+    }
 
+    _setElementAttributes(selector, styleProp, callback) {
+      const scrollbarWidth = this.getWidth();
+
+      const manipulationCallBack = element => {
+        if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
+          return;
+        }
+
+        this._saveInitialAttribute(element, styleProp);
+
+        const calculatedValue = window.getComputedStyle(element)[styleProp];
+        element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`;
+      };
+
+      this._applyManipulationCallback(selector, manipulationCallBack);
+    }
+
+    reset() {
+      this._resetElementAttributes(this._element, 'overflow');
+
+      this._resetElementAttributes(this._element, 'paddingRight');
+
+      this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
+
+      this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
+    }
+
+    _saveInitialAttribute(element, styleProp) {
       const actualValue = element.style[styleProp];
@@ -239,34 +297,36 @@
       }
+    }
 
-      const calculatedValue = window.getComputedStyle(element)[styleProp];
-      element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`;
-    });
-  };
+    _resetElementAttributes(selector, styleProp) {
+      const manipulationCallBack = element => {
+        const value = Manipulator__default['default'].getDataAttribute(element, styleProp);
 
-  const reset = () => {
-    _resetElementAttributes('body', 'overflow');
+        if (typeof value === 'undefined') {
+          element.style.removeProperty(styleProp);
+        } else {
+          Manipulator__default['default'].removeDataAttribute(element, styleProp);
+          element.style[styleProp] = value;
+        }
+      };
 
-    _resetElementAttributes('body', 'paddingRight');
+      this._applyManipulationCallback(selector, manipulationCallBack);
+    }
 
-    _resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
+    _applyManipulationCallback(selector, callBack) {
+      if (isElement(selector)) {
+        callBack(selector);
+      } else {
+        SelectorEngine__default['default'].find(selector, this._element).forEach(callBack);
+      }
+    }
 
-    _resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
-  };
+    isOverflowing() {
+      return this.getWidth() > 0;
+    }
 
-  const _resetElementAttributes = (selector, styleProp) => {
-    SelectorEngine__default['default'].find(selector).forEach(element => {
-      const value = Manipulator__default['default'].getDataAttribute(element, styleProp);
+  }
 
-      if (typeof value === 'undefined') {
-        element.style.removeProperty(styleProp);
-      } else {
-        Manipulator__default['default'].removeDataAttribute(element, styleProp);
-        element.style[styleProp] = value;
-      }
-    });
-  };
-
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.0.1): util/backdrop.js
+   * Bootstrap (v5.0.2): util/backdrop.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
@@ -279,3 +339,3 @@ * --------------------------------------------------------------------------
     isAnimated: false,
-    rootElement: document.body,
+    rootElement: 'body',
     // give the choice to place backdrop under different elements
@@ -287,3 +347,3 @@ clickCallback: null
     isAnimated: 'boolean',
-    rootElement: 'element',
+    rootElement: '(element|string)',
     clickCallback: '(function|null)'
@@ -356,4 +416,5 @@ };
         ...(typeof config === 'object' ? config : {})
-      };
-      config.rootElement = config.rootElement || document.body;
+      }; // use getElement() with the default "body" to get a fresh Element on each instantiation
+
+      config.rootElement = getElement(config.rootElement);
       typeCheckConfig(NAME$1, config, DefaultType$1);
@@ -383,10 +444,4 @@ return config;
 
-      const {
-        parentNode
-      } = this._getElement();
+      this._element.remove();
 
-      if (parentNode) {
-        parentNode.removeChild(this._element);
-      }
-
       this._isAppended = false;
@@ -396,10 +451,3 @@ }
     _emulateAnimation(callback) {
-      if (!this._config.isAnimated) {
-        execute(callback);
-        return;
-      }
-
-      const backdropTransitionDuration = getTransitionDurationFromElement(this._getElement());
-      EventHandler__default['default'].one(this._getElement(), 'transitionend', () => execute(callback));
-      emulateTransitionEnd(this._getElement(), backdropTransitionDuration);
+      executeAfterTransition(callback, this._getElement(), this._config.isAnimated);
     }
@@ -411,3 +459,3 @@
    * --------------------------------------------------------------------------
-    * CoreUI (v4.0.0-rc.5): modal.js
+    * CoreUI (v4.0.0): modal.js
    * Licensed under MIT (https://coreui.io/license)
@@ -475,2 +523,3 @@ *
       this._isTransitioning = false;
+      this._scrollBar = new ScrollBarHelper();
     } // Getters
@@ -497,6 +546,2 @@
 
-      if (this._isAnimated()) {
-        this._isTransitioning = true;
-      }
-
       const showEvent = EventHandler__default['default'].trigger(this._element, EVENT_SHOW, {
@@ -506,3 +551,3 @@ relatedTarget
 
-      if (this._isShown || showEvent.defaultPrevented) {
+      if (showEvent.defaultPrevented) {
         return;
@@ -512,3 +557,9 @@ }
       this._isShown = true;
-      hide();
+
+      if (this._isAnimated()) {
+        this._isTransitioning = true;
+      }
+
+      this._scrollBar.hide();
+
       document.body.classList.add(CLASS_NAME_OPEN);
@@ -602,3 +653,3 @@
         ...Manipulator__default['default'].getDataAttributes(this._element),
-        ...config
+        ...(typeof config === 'object' ? config : {})
       };
@@ -706,3 +757,4 @@ typeCheckConfig(NAME, config, DefaultType);
 
-        reset();
+        this._scrollBar.reset();
+
         EventHandler__default['default'].trigger(this._element, EVENT_HIDDEN);
@@ -744,23 +796,28 @@ });
 
-      const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
+      const {
+        classList,
+        scrollHeight,
+        style
+      } = this._element;
+      const isModalOverflowing = scrollHeight > document.documentElement.clientHeight; // return if the following background transition hasn't yet completed
 
+      if (!isModalOverflowing && style.overflowY === 'hidden' || classList.contains(CLASS_NAME_STATIC)) {
+        return;
+      }
+
       if (!isModalOverflowing) {
-        this._element.style.overflowY = 'hidden';
+        style.overflowY = 'hidden';
       }
 
-      this._element.classList.add(CLASS_NAME_STATIC);
+      classList.add(CLASS_NAME_STATIC);
 
-      const modalTransitionDuration = getTransitionDurationFromElement(this._dialog);
-      EventHandler__default['default'].off(this._element, 'transitionend');
-      EventHandler__default['default'].one(this._element, 'transitionend', () => {
-        this._element.classList.remove(CLASS_NAME_STATIC);
+      this._queueCallback(() => {
+        classList.remove(CLASS_NAME_STATIC);
 
         if (!isModalOverflowing) {
-          EventHandler__default['default'].one(this._element, 'transitionend', () => {
-            this._element.style.overflowY = '';
-          });
-          emulateTransitionEnd(this._element, modalTransitionDuration);
+          this._queueCallback(() => {
+            style.overflowY = '';
+          }, this._dialog);
         }
-      });
-      emulateTransitionEnd(this._element, modalTransitionDuration);
+      }, this._dialog);
 
@@ -775,3 +832,5 @@ this._element.focus();
       const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
-      const scrollbarWidth = getWidth();
+
+      const scrollbarWidth = this._scrollBar.getWidth();
+
       const isBodyOverflowing = scrollbarWidth > 0;
@@ -796,3 +855,3 @@
       return this.each(function () {
-        const data = Modal.getInstance(this) || new Modal(this, typeof config === 'object' ? config : {});
+        const data = Modal.getOrCreateInstance(this, config);
 
@@ -838,3 +897,3 @@ if (typeof config !== 'string') {
     });
-    const data = Modal.getInstance(target) || new Modal(target);
+    const data = Modal.getOrCreateInstance(target);
     data.toggle(this);
@@ -841,0 +900,0 @@ });

js/dist/offcanvas.js

 /*!
-  * CoreUI offcanvas.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI offcanvas.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -7,6 +7,6 @@ * Licensed under MIT (https://coreui.io)
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/manipulator.js'), require('./dom/data.js'), require('./dom/event-handler.js'), require('./base-component.js')) :
-  typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/manipulator', './dom/data', './dom/event-handler', './base-component'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Offcanvas = factory(global.SelectorEngine, global.Manipulator, global.Data, global.EventHandler, global.Base));
-}(this, (function (SelectorEngine, Manipulator, Data, EventHandler, BaseComponent) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/manipulator.js'), require('./dom/event-handler.js'), require('./base-component.js')) :
+  typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/manipulator', './dom/event-handler', './base-component'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Offcanvas = factory(global.SelectorEngine, global.Manipulator, global.EventHandler, global.Base));
+}(this, (function (SelectorEngine, Manipulator, EventHandler, BaseComponent) { 'use strict';
 
@@ -17,3 +17,2 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
   var Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator);
-  var Data__default = /*#__PURE__*/_interopDefaultLegacy(Data);
   var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
@@ -101,18 +100,13 @@ var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-  const emulateTransitionEnd = (element, duration) => {
-    let called = false;
-    const durationPadding = 5;
-    const emulatedDuration = duration + durationPadding;
+  const getElement = obj => {
+    if (isElement(obj)) {
+      // it's a jQuery object or a node element
+      return obj.jquery ? obj[0] : obj;
+    }
 
-    function listener() {
-      called = true;
-      element.removeEventListener(TRANSITION_END, listener);
+    if (typeof obj === 'string' && obj.length > 0) {
+      return SelectorEngine__default['default'].findOne(obj);
     }
 
-    element.addEventListener(TRANSITION_END, listener);
-    setTimeout(() => {
-      if (!called) {
-        triggerTransitionEnd(element);
-      }
-    }, emulatedDuration);
+    return null;
   };
@@ -163,3 +157,3 @@
 
-    if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+    if (jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
       return jQuery;
@@ -171,5 +165,14 @@ }
 
+  const DOMContentLoadedCallbacks = [];
+
   const onDOMContentLoaded = callback => {
     if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', callback);
+      // add listener on the first call when the document is in loading state
+      if (!DOMContentLoadedCallbacks.length) {
+        document.addEventListener('DOMContentLoaded', () => {
+          DOMContentLoadedCallbacks.forEach(callback => callback());
+        });
+      }
+
+      DOMContentLoadedCallbacks.push(callback);
     } else {
@@ -205,5 +208,35 @@ callback();
 
+  const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
+    if (!waitForTransition) {
+      execute(callback);
+      return;
+    }
+
+    const durationPadding = 5;
+    const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding;
+    let called = false;
+
+    const handler = ({
+      target
+    }) => {
+      if (target !== transitionElement) {
+        return;
+      }
+
+      called = true;
+      transitionElement.removeEventListener(TRANSITION_END, handler);
+      execute(callback);
+    };
+
+    transitionElement.addEventListener(TRANSITION_END, handler);
+    setTimeout(() => {
+      if (!called) {
+        triggerTransitionEnd(transitionElement);
+      }
+    }, emulatedDuration);
+  };
+
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.0.1): util/scrollBar.js
+   * Bootstrap (v5.0.2): util/scrollBar.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -215,37 +248,61 @@ * --------------------------------------------------------------------------
 
-  const getWidth = () => {
-    // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-    const documentWidth = document.documentElement.clientWidth;
-    return Math.abs(window.innerWidth - documentWidth);
-  };
+  class ScrollBarHelper {
+    constructor() {
+      this._element = document.body;
+    }
 
-  const hide = (width = getWidth()) => {
-    _disableOverFlow(); // give padding to element to balances the hidden scrollbar width
+    getWidth() {
+      // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
+      const documentWidth = document.documentElement.clientWidth;
+      return Math.abs(window.innerWidth - documentWidth);
+    }
 
+    hide() {
+      const width = this.getWidth();
 
-    _setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements, to keep shown fullwidth
+      this._disableOverFlow(); // give padding to element to balance the hidden scrollbar width
 
 
-    _setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width);
+      this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width); // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth
 
-    _setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width);
-  };
 
-  const _disableOverFlow = () => {
-    const actualValue = document.body.style.overflow;
+      this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width);
 
-    if (actualValue) {
-      Manipulator__default['default'].setDataAttribute(document.body, 'overflow', actualValue);
+      this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width);
     }
 
-    document.body.style.overflow = 'hidden';
-  };
+    _disableOverFlow() {
+      this._saveInitialAttribute(this._element, 'overflow');
 
-  const _setElementAttributes = (selector, styleProp, callback) => {
-    const scrollbarWidth = getWidth();
-    SelectorEngine__default['default'].find(selector).forEach(element => {
-      if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) {
-        return;
-      }
+      this._element.style.overflow = 'hidden';
+    }
 
+    _setElementAttributes(selector, styleProp, callback) {
+      const scrollbarWidth = this.getWidth();
+
+      const manipulationCallBack = element => {
+        if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
+          return;
+        }
+
+        this._saveInitialAttribute(element, styleProp);
+
+        const calculatedValue = window.getComputedStyle(element)[styleProp];
+        element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`;
+      };
+
+      this._applyManipulationCallback(selector, manipulationCallBack);
+    }
+
+    reset() {
+      this._resetElementAttributes(this._element, 'overflow');
+
+      this._resetElementAttributes(this._element, 'paddingRight');
+
+      this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
+
+      this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
+    }
+
+    _saveInitialAttribute(element, styleProp) {
       const actualValue = element.style[styleProp];
@@ -256,34 +313,36 @@
       }
+    }
 
-      const calculatedValue = window.getComputedStyle(element)[styleProp];
-      element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`;
-    });
-  };
+    _resetElementAttributes(selector, styleProp) {
+      const manipulationCallBack = element => {
+        const value = Manipulator__default['default'].getDataAttribute(element, styleProp);
 
-  const reset = () => {
-    _resetElementAttributes('body', 'overflow');
+        if (typeof value === 'undefined') {
+          element.style.removeProperty(styleProp);
+        } else {
+          Manipulator__default['default'].removeDataAttribute(element, styleProp);
+          element.style[styleProp] = value;
+        }
+      };
 
-    _resetElementAttributes('body', 'paddingRight');
+      this._applyManipulationCallback(selector, manipulationCallBack);
+    }
 
-    _resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight');
+    _applyManipulationCallback(selector, callBack) {
+      if (isElement(selector)) {
+        callBack(selector);
+      } else {
+        SelectorEngine__default['default'].find(selector, this._element).forEach(callBack);
+      }
+    }
 
-    _resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight');
-  };
+    isOverflowing() {
+      return this.getWidth() > 0;
+    }
 
-  const _resetElementAttributes = (selector, styleProp) => {
-    SelectorEngine__default['default'].find(selector).forEach(element => {
-      const value = Manipulator__default['default'].getDataAttribute(element, styleProp);
+  }
 
-      if (typeof value === 'undefined') {
-        element.style.removeProperty(styleProp);
-      } else {
-        Manipulator__default['default'].removeDataAttribute(element, styleProp);
-        element.style[styleProp] = value;
-      }
-    });
-  };
-
   /**
    * --------------------------------------------------------------------------
-   * Bootstrap (v5.0.1): util/backdrop.js
+   * Bootstrap (v5.0.2): util/backdrop.js
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
@@ -296,3 +355,3 @@ * --------------------------------------------------------------------------
     isAnimated: false,
-    rootElement: document.body,
+    rootElement: 'body',
     // give the choice to place backdrop under different elements
@@ -304,3 +363,3 @@ clickCallback: null
     isAnimated: 'boolean',
-    rootElement: 'element',
+    rootElement: '(element|string)',
     clickCallback: '(function|null)'
@@ -373,4 +432,5 @@ };
         ...(typeof config === 'object' ? config : {})
-      };
-      config.rootElement = config.rootElement || document.body;
+      }; // use getElement() with the default "body" to get a fresh Element on each instantiation
+
+      config.rootElement = getElement(config.rootElement);
       typeCheckConfig(NAME$1, config, DefaultType$1);
@@ -400,10 +460,4 @@ return config;
 
-      const {
-        parentNode
-      } = this._getElement();
+      this._element.remove();
 
-      if (parentNode) {
-        parentNode.removeChild(this._element);
-      }
-
       this._isAppended = false;
@@ -413,10 +467,3 @@ }
     _emulateAnimation(callback) {
-      if (!this._config.isAnimated) {
-        execute(callback);
-        return;
-      }
-
-      const backdropTransitionDuration = getTransitionDurationFromElement(this._getElement());
-      EventHandler__default['default'].one(this._getElement(), 'transitionend', () => execute(callback));
-      emulateTransitionEnd(this._getElement(), backdropTransitionDuration);
+      executeAfterTransition(callback, this._getElement(), this._config.isAnimated);
     }
@@ -428,3 +475,3 @@
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): dropdown.js
+   * CoreUI (v4.0.0): dropdown.js
    * Licensed under MIT (https://coreui.io/license)
@@ -519,3 +566,3 @@ *
       if (!this._config.scroll) {
-        hide();
+        new ScrollBarHelper().hide();
 
@@ -573,3 +620,3 @@ this._enforceFocusOnElement(this._element);
         if (!this._config.scroll) {
-          reset();
+          new ScrollBarHelper().reset();
         }
@@ -632,3 +679,3 @@
       return this.each(function () {
-        const data = Data__default['default'].get(this, DATA_KEY) || new Offcanvas(this, typeof config === 'object' ? config : {});
+        const data = Offcanvas.getOrCreateInstance(this, config);
 
@@ -679,8 +726,6 @@ if (typeof config !== 'string') {
 
-    const data = Data__default['default'].get(target, DATA_KEY) || new Offcanvas(target);
+    const data = Offcanvas.getOrCreateInstance(target);
     data.toggle(this);
   });
-  EventHandler__default['default'].on(window, EVENT_LOAD_DATA_API, () => {
-    SelectorEngine__default['default'].find(OPEN_SELECTOR).forEach(el => (Data__default['default'].get(el, DATA_KEY) || new Offcanvas(el)).show());
-  });
+  EventHandler__default['default'].on(window, EVENT_LOAD_DATA_API, () => SelectorEngine__default['default'].find(OPEN_SELECTOR).forEach(el => Offcanvas.getOrCreateInstance(el).show()));
   /**
@@ -687,0 +732,0 @@ * ------------------------------------------------------------------------

js/dist/popover.js

 /*!
-  * CoreUI popover.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI popover.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -7,6 +7,6 @@ * Licensed under MIT (https://coreui.io)
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/data.js'), require('./tooltip.js')) :
-  typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/data', './tooltip'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Popover = factory(global.SelectorEngine, global.Data, global.Tooltip));
-}(this, (function (SelectorEngine, Data, Tooltip) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./tooltip.js')) :
+  typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './tooltip'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Popover = factory(global.SelectorEngine, global.Tooltip));
+}(this, (function (SelectorEngine, Tooltip) { 'use strict';
 
@@ -16,3 +16,2 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
   var SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
-  var Data__default = /*#__PURE__*/_interopDefaultLegacy(Data);
   var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
@@ -25,3 +24,3 @@
 
-    if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+    if (jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
       return jQuery;
@@ -33,5 +32,14 @@ }
 
+  const DOMContentLoadedCallbacks = [];
+
   const onDOMContentLoaded = callback => {
     if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', callback);
+      // add listener on the first call when the document is in loading state
+      if (!DOMContentLoadedCallbacks.length) {
+        document.addEventListener('DOMContentLoaded', () => {
+          DOMContentLoadedCallbacks.forEach(callback => callback());
+        });
+      }
+
+      DOMContentLoadedCallbacks.push(callback);
     } else {
@@ -63,3 +71,3 @@ callback();
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): popover.js
+   * CoreUI (v4.0.0): popover.js
    * Licensed under MIT (https://coreui.io/license)
@@ -145,7 +153,7 @@ *
       if (!this.getTitle()) {
-        this.tip.removeChild(SelectorEngine__default['default'].findOne(SELECTOR_TITLE, this.tip));
+        SelectorEngine__default['default'].findOne(SELECTOR_TITLE, this.tip).remove();
       }
 
       if (!this._getContent()) {
-        this.tip.removeChild(SelectorEngine__default['default'].findOne(SELECTOR_CONTENT, this.tip));
+        SelectorEngine__default['default'].findOne(SELECTOR_CONTENT, this.tip).remove();
       }
@@ -192,11 +200,4 @@
       return this.each(function () {
-        let data = Data__default['default'].get(this, DATA_KEY);
+        const data = Popover.getOrCreateInstance(this, config);
 
-        const _config = typeof config === 'object' ? config : null;
-
-        if (!data) {
-          data = new Popover(this, _config);
-          Data__default['default'].set(this, DATA_KEY, data);
-        }
-
         if (typeof config === 'string') {
@@ -203,0 +204,0 @@ if (typeof data[config] === 'undefined') {

js/dist/scrollspy.js

 /*!
-  * CoreUI scrollspy.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI scrollspy.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -19,14 +19,2 @@ * Licensed under MIT (https://coreui.io)
 
-  /**
-   * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): alert.js
-   * Licensed under MIT (https://coreui.io/license)
-   *
-   * This component is a modified version of the Bootstrap's  util/index.js
-   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
-   * --------------------------------------------------------------------------
-   */
-
-  const MAX_UID = 1000000;
-
   const toType = obj => {
@@ -39,17 +27,3 @@ if (obj === null || obj === undefined) {
   };
-  /**
-   * --------------------------------------------------------------------------
-   * Public Util Api
-   * --------------------------------------------------------------------------
-   */
 
-
-  const getUID = prefix => {
-    do {
-      prefix += Math.floor(Math.random() * MAX_UID);
-    } while (document.getElementById(prefix));
-
-    return prefix;
-  };
-
   const getSelector = element => {
@@ -101,2 +75,15 @@ let selector = element.getAttribute('data-coreui-target');
 
+  const getElement = obj => {
+    if (isElement(obj)) {
+      // it's a jQuery object or a node element
+      return obj.jquery ? obj[0] : obj;
+    }
+
+    if (typeof obj === 'string' && obj.length > 0) {
+      return SelectorEngine__default['default'].findOne(obj);
+    }
+
+    return null;
+  };
+
   const typeCheckConfig = (componentName, config, configTypes) => {
@@ -119,3 +106,3 @@ Object.keys(configTypes).forEach(property => {
 
-    if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+    if (jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
       return jQuery;
@@ -127,5 +114,14 @@ }
 
+  const DOMContentLoadedCallbacks = [];
+
   const onDOMContentLoaded = callback => {
     if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', callback);
+      // add listener on the first call when the document is in loading state
+      if (!DOMContentLoadedCallbacks.length) {
+        document.addEventListener('DOMContentLoaded', () => {
+          DOMContentLoadedCallbacks.forEach(callback => callback());
+        });
+      }
+
+      DOMContentLoadedCallbacks.push(callback);
     } else {
@@ -157,3 +153,3 @@ callback();
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): scrollspy.js
+   * CoreUI (v4.0.0): scrollspy.js
    * Licensed under MIT (https://coreui.io/license)
@@ -195,2 +191,3 @@ *
   const SELECTOR_LIST_ITEMS = '.list-group-item';
+  const SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}, .${CLASS_NAME_DROPDOWN_ITEM}`;
   const SELECTOR_DROPDOWN = '.dropdown';
@@ -211,3 +208,2 @@ const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle';
       this._config = this._getConfig(config);
-      this._selector = `${this._config.target} ${SELECTOR_NAV_LINKS}, ${this._config.target} ${SELECTOR_LIST_ITEMS}, ${this._config.target} .${CLASS_NAME_DROPDOWN_ITEM}`;
       this._offsets = [];
@@ -240,3 +236,3 @@ this._targets = [];
       this._scrollHeight = this._getScrollHeight();
-      const targets = SelectorEngine__default['default'].find(this._selector);
+      const targets = SelectorEngine__default['default'].find(SELECTOR_LINK_ITEMS, this._config.target);
       targets.map(element => {
@@ -273,16 +269,3 @@ const targetSelector = getSelectorFromElement(element);
       };
-
-      if (typeof config.target !== 'string' && isElement(config.target)) {
-        let {
-          id
-        } = config.target;
-
-        if (!id) {
-          id = getUID(NAME);
-          config.target.id = id;
-        }
-
-        config.target = `#${id}`;
-      }
-
+      config.target = getElement(config.target) || document.documentElement;
       typeCheckConfig(NAME, config, DefaultType);
@@ -347,12 +330,9 @@ return config;
 
-      const queries = this._selector.split(',').map(selector => `${selector}[data-coreui-target="${target}"],${selector}[href="${target}"]`);
+      const queries = SELECTOR_LINK_ITEMS.split(',').map(selector => `${selector}[data-coreui-target="${target}"],${selector}[href="${target}"]`);
+      const link = SelectorEngine__default['default'].findOne(queries.join(','), this._config.target);
+      link.classList.add(CLASS_NAME_ACTIVE);
 
-      const link = SelectorEngine__default['default'].findOne(queries.join(','));
-
       if (link.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
         SelectorEngine__default['default'].findOne(SELECTOR_DROPDOWN_TOGGLE, link.closest(SELECTOR_DROPDOWN)).classList.add(CLASS_NAME_ACTIVE);
-        link.classList.add(CLASS_NAME_ACTIVE);
       } else {
-        // Set triggered link as active
-        link.classList.add(CLASS_NAME_ACTIVE);
         SelectorEngine__default['default'].parents(link, SELECTOR_NAV_LIST_GROUP).forEach(listGroup => {
@@ -375,3 +355,3 @@ // Set triggered links parents as active
     _clear() {
-      SelectorEngine__default['default'].find(this._selector).filter(node => node.classList.contains(CLASS_NAME_ACTIVE)).forEach(node => node.classList.remove(CLASS_NAME_ACTIVE));
+      SelectorEngine__default['default'].find(SELECTOR_LINK_ITEMS, this._config.target).filter(node => node.classList.contains(CLASS_NAME_ACTIVE)).forEach(node => node.classList.remove(CLASS_NAME_ACTIVE));
     } // Static
@@ -382,3 +362,3 @@
       return this.each(function () {
-        const data = ScrollSpy.getInstance(this) || new ScrollSpy(this, typeof config === 'object' ? config : {});
+        const data = ScrollSpy.getOrCreateInstance(this, config);
 
@@ -385,0 +365,0 @@ if (typeof config !== 'string') {

js/dist/tab.js

 /*!
-  * CoreUI tab.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI tab.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -7,6 +7,6 @@ * Licensed under MIT (https://coreui.io)
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/data.js'), require('./dom/event-handler.js'), require('./base-component.js')) :
-  typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/data', './dom/event-handler', './base-component'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Tab = factory(global.SelectorEngine, global.Data, global.EventHandler, global.Base));
-}(this, (function (SelectorEngine, Data, EventHandler, BaseComponent) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/event-handler.js'), require('./base-component.js')) :
+  typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/event-handler', './base-component'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Tab = factory(global.SelectorEngine, global.EventHandler, global.Base));
+}(this, (function (SelectorEngine, EventHandler, BaseComponent) { 'use strict';
 
@@ -16,3 +16,2 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
   var SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
-  var Data__default = /*#__PURE__*/_interopDefaultLegacy(Data);
   var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
@@ -73,3 +72,3 @@ var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-    if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+    if (jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
       return jQuery;
@@ -81,5 +80,14 @@ }
 
+  const DOMContentLoadedCallbacks = [];
+
   const onDOMContentLoaded = callback => {
     if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', callback);
+      // add listener on the first call when the document is in loading state
+      if (!DOMContentLoadedCallbacks.length) {
+        document.addEventListener('DOMContentLoaded', () => {
+          DOMContentLoadedCallbacks.forEach(callback => callback());
+        });
+      }
+
+      DOMContentLoadedCallbacks.push(callback);
     } else {
@@ -111,3 +119,3 @@ callback();
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): tab.js
+   * CoreUI (v4.0.0): tab.js
    * Licensed under MIT (https://coreui.io/license)
@@ -270,3 +278,3 @@ *
       return this.each(function () {
-        const data = Data__default['default'].get(this, DATA_KEY) || new Tab(this);
+        const data = Tab.getOrCreateInstance(this);
 
@@ -300,3 +308,3 @@ if (typeof config === 'string') {
 
-    const data = Data__default['default'].get(this, DATA_KEY) || new Tab(this);
+    const data = Tab.getOrCreateInstance(this);
     data.show();
@@ -303,0 +311,0 @@ });

js/dist/toast.js

 /*!
-  * CoreUI toast.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI toast.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -7,10 +7,9 @@ * Licensed under MIT (https://coreui.io)
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/data.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./base-component.js')) :
-  typeof define === 'function' && define.amd ? define(['./dom/data', './dom/event-handler', './dom/manipulator', './base-component'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Toast = factory(global.Data, global.EventHandler, global.Manipulator, global.Base));
-}(this, (function (Data, EventHandler, Manipulator, BaseComponent) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./base-component.js')) :
+  typeof define === 'function' && define.amd ? define(['./dom/event-handler', './dom/manipulator', './base-component'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Toast = factory(global.EventHandler, global.Manipulator, global.Base));
+}(this, (function (EventHandler, Manipulator, BaseComponent) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-  var Data__default = /*#__PURE__*/_interopDefaultLegacy(Data);
   var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
@@ -59,3 +58,3 @@ var Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator);
 
-    if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+    if (jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
       return jQuery;
@@ -67,5 +66,14 @@ }
 
+  const DOMContentLoadedCallbacks = [];
+
   const onDOMContentLoaded = callback => {
     if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', callback);
+      // add listener on the first call when the document is in loading state
+      if (!DOMContentLoadedCallbacks.length) {
+        document.addEventListener('DOMContentLoaded', () => {
+          DOMContentLoadedCallbacks.forEach(callback => callback());
+        });
+      }
+
+      DOMContentLoadedCallbacks.push(callback);
     } else {
@@ -97,3 +105,3 @@ callback();
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): toast.js
+   * CoreUI (v4.0.0): toast.js
    * Licensed under MIT (https://coreui.io/license)
@@ -301,10 +309,4 @@ *
       return this.each(function () {
-        let data = Data__default['default'].get(this, DATA_KEY);
+        const data = Toast.getOrCreateInstance(this, config);
 
-        const _config = typeof config === 'object' && config;
-
-        if (!data) {
-          data = new Toast(this, _config);
-        }
-
         if (typeof config === 'string') {
@@ -311,0 +313,0 @@ if (typeof data[config] === 'undefined') {

js/dist/tooltip.js

 /*!
-  * CoreUI tooltip.js v4.0.0-rc.5 (https://coreui.io)
+  * CoreUI tooltip.js v4.0.0 (https://coreui.io)
   * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
@@ -43,3 +43,3 @@ * Licensed under MIT (https://coreui.io)
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): alert.js
+   * CoreUI (v4.0.0): alert.js
    * Licensed under MIT (https://coreui.io/license)
@@ -143,3 +143,3 @@ *
 
-    if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+    if (jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
       return jQuery;
@@ -151,5 +151,14 @@ }
 
+  const DOMContentLoadedCallbacks = [];
+
   const onDOMContentLoaded = callback => {
     if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', callback);
+      // add listener on the first call when the document is in loading state
+      if (!DOMContentLoadedCallbacks.length) {
+        document.addEventListener('DOMContentLoaded', () => {
+          DOMContentLoadedCallbacks.forEach(callback => callback());
+        });
+      }
+
+      DOMContentLoadedCallbacks.push(callback);
     } else {
@@ -183,3 +192,3 @@ callback();
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): alert.js
+   * CoreUI (v4.0.0): alert.js
    * Licensed under MIT (https://coreui.io/license)
@@ -282,3 +291,3 @@ *
       if (!allowlistKeys.includes(elName)) {
-        el.parentNode.removeChild(el);
+        el.remove();
         continue;
@@ -301,3 +310,3 @@ }
    * --------------------------------------------------------------------------
-   * CoreUI (v4.0.0-rc.5): tooltip.js
+   * CoreUI (v4.0.0): tooltip.js
    * Licensed under MIT (https://coreui.io/license)
@@ -474,4 +483,4 @@ *
 
-      if (this.tip && this.tip.parentNode) {
-        this.tip.parentNode.removeChild(this.tip);
+      if (this.tip) {
+        this.tip.remove();
       }
@@ -581,4 +590,4 @@
 
-        if (this._hoverState !== HOVER_STATE_SHOW && tip.parentNode) {
-          tip.parentNode.removeChild(tip);
+        if (this._hoverState !== HOVER_STATE_SHOW) {
+          tip.remove();
         }
@@ -970,10 +979,4 @@
       return this.each(function () {
-        let data = Data__default['default'].get(this, DATA_KEY);
+        const data = Tooltip.getOrCreateInstance(this, config);
 
-        const _config = typeof config === 'object' && config;
-
-        if (!data) {
-          data = new Tooltip(this, _config);
-        }
-
         if (typeof config === 'string') {
@@ -980,0 +983,0 @@ if (typeof data[config] === 'undefined') {

js/src/alert.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): alert.js
+ * CoreUI (v4.0.0): alert.js
  * Licensed under MIT (https://coreui.io/license)
@@ -15,3 +15,2 @@ *
 } from './util/index'
-import Data from './dom/data'
 import EventHandler from './dom/event-handler'
@@ -85,5 +84,3 @@ import BaseComponent from './base-component'
   _destroyElement(element) {
-    if (element.parentNode) {
-      element.parentNode.removeChild(element)
-    }
+    element.remove()
 
@@ -97,8 +94,4 @@ EventHandler.trigger(element, EVENT_CLOSED)
     return this.each(function () {
-      let data = Data.get(this, DATA_KEY)
+      const data = Alert.getOrCreateInstance(this)
 
-      if (!data) {
-        data = new Alert(this)
-      }
-
       if (config === 'close') {
@@ -105,0 +98,0 @@ data[config](this)

js/src/base-component.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): alert.js
+ * CoreUI (v4.0.0): alert.js
  * Licensed under MIT (https://coreui.io/license)
@@ -13,6 +13,4 @@ *
 import {
-  emulateTransitionEnd,
-  execute,
-  getElement,
-  getTransitionDurationFromElement
+  executeAfterTransition,
+  getElement
 } from './util/index'
@@ -27,3 +25,3 @@ import EventHandler from './dom/event-handler'
 
-const VERSION = '4.0.0-rc.5'
+const VERSION = '4.0.0'
 
@@ -52,11 +50,3 @@ class BaseComponent {
   _queueCallback(callback, element, isAnimated = true) {
-    if (!isAnimated) {
-      execute(callback)
-      return
-    }
-
-    const transitionDuration = getTransitionDurationFromElement(element)
-    EventHandler.one(element, 'transitionend', () => execute(callback))
-
-    emulateTransitionEnd(element, transitionDuration)
+    executeAfterTransition(callback, element, isAnimated)
   }
@@ -70,2 +60,6 @@
 
+  static getOrCreateInstance(element, config = {}) {
+    return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null)
+  }
+
   static get VERSION() {
@@ -72,0 +66,0 @@ return VERSION

js/src/button.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): alert.js
+ * CoreUI (v4.0.0): alert.js
  * Licensed under MIT (https://coreui.io/license)
@@ -12,3 +12,2 @@ *
 import { defineJQueryPlugin } from './util/index'
-import Data from './dom/data'
 import EventHandler from './dom/event-handler'
@@ -58,8 +57,4 @@ import BaseComponent from './base-component'
     return this.each(function () {
-      let data = Data.get(this, DATA_KEY)
+      const data = Button.getOrCreateInstance(this)
 
-      if (!data) {
-        data = new Button(this)
-      }
-
       if (config === 'toggle') {
@@ -82,8 +77,4 @@ data[config]()
   const button = event.target.closest(SELECTOR_DATA_TOGGLE)
+  const data = Button.getOrCreateInstance(button)
 
-  let data = Data.get(button, DATA_KEY)
-  if (!data) {
-    data = new Button(button)
-  }
-
   data.toggle()
@@ -90,0 +81,0 @@ })

js/src/carousel.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): carousel.js
+ * CoreUI (v4.0.0): carousel.js
  * Licensed under MIT (https://coreui.io/license)
@@ -21,3 +21,2 @@ *
 } from './util/index'
-import Data from './dom/data'
 import EventHandler from './dom/event-handler'
@@ -67,2 +66,7 @@ import Manipulator from './dom/manipulator'
 
+const KEY_TO_DIRECTION = {
+  [ARROW_LEFT_KEY]: DIRECTION_RIGHT,
+  [ARROW_RIGHT_KEY]: DIRECTION_LEFT
+}
+
 const EVENT_SLIDE = `slide${EVENT_KEY}`
@@ -143,5 +147,3 @@ const EVENT_SLID = `slid${EVENT_KEY}`
   next() {
-    if (!this._isSliding) {
-      this._slide(ORDER_NEXT)
-    }
+    this._slide(ORDER_NEXT)
   }
@@ -158,5 +160,3 @@
   prev() {
-    if (!this._isSliding) {
-      this._slide(ORDER_PREV)
-    }
+    this._slide(ORDER_PREV)
   }
@@ -229,3 +229,4 @@
       ...Default,
-      ...config
+      ...Manipulator.getDataAttributes(this._element),
+      ...(typeof config === 'object' ? config : {})
     }
@@ -330,8 +331,6 @@ typeCheckConfig(NAME, config, DefaultType)
 
-    if (event.key === ARROW_LEFT_KEY) {
+    const direction = KEY_TO_DIRECTION[event.key]
+    if (direction) {
       event.preventDefault()
-      this._slide(DIRECTION_RIGHT)
-    } else if (event.key === ARROW_RIGHT_KEY) {
-      event.preventDefault()
-      this._slide(DIRECTION_LEFT)
+      this._slide(direction)
     }
@@ -420,2 +419,6 @@ }
 
+    if (this._isSliding) {
+      return
+    }
+
     const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName)
@@ -509,8 +512,5 @@ if (slideEvent.defaultPrevented) {
   static carouselInterface(element, config) {
-    let data = Data.get(element, DATA_KEY)
-    let _config = {
-      ...Default,
-      ...Manipulator.getDataAttributes(element)
-    }
+    const data = Carousel.getOrCreateInstance(element, config)
 
+    let { _config } = data
     if (typeof config === 'object') {
@@ -525,6 +525,2 @@ _config = {
 
-    if (!data) {
-      data = new Carousel(element, _config)
-    }
-
     if (typeof config === 'number') {
@@ -570,3 +566,3 @@ data.to(config)
     if (slideIndex) {
-      Data.get(target, DATA_KEY).to(slideIndex)
+      Carousel.getInstance(target).to(slideIndex)
     }
@@ -590,3 +586,3 @@
   for (let i = 0, len = carousels.length; i < len; i++) {
-    Carousel.carouselInterface(carousels[i], Data.get(carousels[i], DATA_KEY))
+    Carousel.carouselInterface(carousels[i], Carousel.getInstance(carousels[i]))
   }
@@ -593,0 +589,0 @@ })

js/src/collapse.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): collapse.js
+ * CoreUI (v4.0.0): collapse.js
  * Licensed under MIT (https://coreui.io/license)
@@ -151,3 +151,3 @@ *
       const tempActiveData = actives.find(elem => container !== elem)
-      activesData = tempActiveData ? Data.get(tempActiveData, DATA_KEY) : null
+      activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null
 
@@ -317,3 +317,3 @@ if (activesData && activesData._isTransitioning) {
   static collapseInterface(element, config) {
-    let data = Data.get(element, DATA_KEY)
+    let data = Collapse.getInstance(element)
     const _config = {
@@ -366,3 +366,3 @@ ...Default,
   selectorElements.forEach(element => {
-    const data = Data.get(element, DATA_KEY)
+    const data = Collapse.getInstance(element)
     let config
@@ -369,0 +369,0 @@ if (data) {

js/src/dom/data.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): dom/data.js
+ * CoreUI (v4.0.0): dom/data.js
  * Licensed under MIT (https://coreui.io/license)
@@ -5,0 +5,0 @@ *

js/src/dom/event-handler.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): dom/event-handler.js
+ * CoreUI (v4.0.0): dom/event-handler.js
  * Licensed under MIT (https://coreui.io/license)
@@ -5,0 +5,0 @@ *

js/src/dom/manipulator.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): dom/manipulator.js
+ * CoreUI (v4.0.0): dom/manipulator.js
  * Licensed under MIT (https://coreui.io/license)
@@ -5,0 +5,0 @@ *

js/src/dom/selector-engine.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): dom/selector-engine.js
+ * CoreUI (v4.0.0): dom/selector-engine.js
  * Licensed under MIT (https://coreui.io/license)
@@ -5,0 +5,0 @@ *

js/src/dropdown.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): dropdown.js
+ * CoreUI (v4.0.0): dropdown.js
  * Licensed under MIT (https://coreui.io/license)
@@ -25,3 +25,2 @@ *
 } from './util/index'
-import Data from './dom/data'
 import EventHandler from './dom/event-handler'
@@ -376,9 +375,4 @@ import Manipulator from './dom/manipulator'
   static dropdownInterface(element, config) {
-    let data = Data.get(element, DATA_KEY)
-    const _config = typeof config === 'object' ? config : null
+    const data = Dropdown.getOrCreateInstance(element, config)
 
-    if (!data) {
-      data = new Dropdown(element, _config)
-    }
-
     if (typeof config === 'string') {
@@ -407,3 +401,3 @@ if (typeof data[config] === 'undefined') {
     for (let i = 0, len = toggles.length; i < len; i++) {
-      const context = Data.get(toggles[i], DATA_KEY)
+      const context = Dropdown.getInstance(toggles[i])
       if (!context || context._config.autoClose === false) {
@@ -410,0 +404,0 @@ continue

js/src/loading-button.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.1): loading-button.js
+ * CoreUI (v4.0.0): loading-button.js
  * Licensed under MIT (https://coreui.io/license)
@@ -9,4 +9,2 @@ */
   defineJQueryPlugin,
-  emulateTransitionEnd,
-  getTransitionDurationFromElement,
   typeCheckConfig
@@ -17,3 +15,2 @@ } from './util/index'
 import Manipulator from './dom/manipulator'
-// import SelectorEngine from './dom/selector-engine'
 import BaseComponent from './base-component'
@@ -31,29 +28,20 @@
 
-const MAX_PERCENT = 100
-const MILLISECONDS = 10
-const PROGRESS_BAR_BG_COLOR_LIGHT = 'rgba(255, 255, 255, .2)'
-const PROGRESS_BAR_BG_COLOR_DARK = 'rgba(0, 0, 0, .2)'
-
 const EVENT_START = `start${EVENT_KEY}`
 const EVENT_STOP = `stop${EVENT_KEY}`
-const EVENT_COMPLETE = `complete${EVENT_KEY}`
 
 const CLASS_NAME_IS_LOADING = 'is-loading'
-const CLASS_NAME_LOADING_BUTTON_PROGRESS = 'btn-loading-progress'
 const CLASS_NAME_LOADING_BUTTON_SPINNER = 'btn-loading-spinner'
 
 const Default = {
-  percent: 0,
-  progress: false,
+  disabledOnLoading: false,
   spinner: true,
   spinnerType: 'border',
-  timeout: 1000
+  timeout: false
 }
 
 const DefaultType = {
-  percent: 'number',
-  progress: 'boolean',
+  disabledOnLoading: 'boolean',
   spinner: 'boolean',
   spinnerType: 'string',
-  timeout: 'number'
+  timeout: '(boolean|number)'
 }
@@ -72,6 +60,3 @@
     this._config = this._getConfig(config)
-    this._pause = false
-    this._percent = this._config.percent
     this._timeout = this._config.timeout
-    this._progressBar = null
     this._spinner = null
@@ -108,9 +93,18 @@ this._state = 'idle'
       this._createSpinner()
-      this._createProgressBar()
+      this._state = 'loading'
 
       setTimeout(() => {
         this._element.classList.add(CLASS_NAME_IS_LOADING)
-        this._loading()
         EventHandler.trigger(this._element, EVENT_START)
+
+        if (this._config.disabledOnLoading) {
+          this._element.setAttribute('disabled', true)
+        }
       }, 1)
+
+      if (this._config.timeout) {
+        setTimeout(() => {
+          this.stop()
+        }, this._config.timeout)
+      }
     }
@@ -123,19 +117,13 @@ }
       this._removeSpinner()
-      this._removeProgressBar()
       this._state = 'idle'
 
-      EventHandler.trigger(this._element, EVENT_STOP)
-      if (this._percent >= 100) {
-        EventHandler.trigger(this._element, EVENT_COMPLETE)
+      if (this._config.disabledOnLoading) {
+        this._element.removeAttribute('disabled')
       }
 
-      this._percent = this._config.percent
-      this._timeout = this._config.timeout
+      EventHandler.trigger(this._element, EVENT_STOP)
     }
 
     if (this._spinner) {
-      const transitionDuration = getTransitionDurationFromElement(this._spinner)
-
-      EventHandler.one(this._spinner, 'transitionend', stoped)
-      emulateTransitionEnd(this._spinner, transitionDuration)
+      this._queueCallback(stoped, this._spinner, true)
       return
@@ -147,22 +135,2 @@ }
 
-  pause() {
-    this._pause = true
-    this._state = 'pause'
-  }
-
-  resume() {
-    this._pause = false
-    this._loading()
-  }
-
-  complete() {
-    this._timeout = 1000
-  }
-
-  updatePercent(percent) {
-    const diff = (this._percent - percent) / 100
-    this._timeout *= (1 + diff)
-    this._percent = percent
-  }
-
   dispose() {
@@ -173,6 +141,2 @@ Data.removeData(this._element, DATA_KEY)
 
-  update(config) {
-    this._config = this._getConfig(config)
-  }
-
   _getConfig(config) {
@@ -182,43 +146,8 @@ config = {
       ...Manipulator.getDataAttributes(this._element),
-      ...config
+      ...(typeof config === 'object' ? config : {})
     }
     typeCheckConfig(NAME, config, DefaultType)
-
     return config
   }
 
-  _loading() {
-    const progress = setInterval(() => {
-      this._state = 'loading'
-      if (this._percent >= MAX_PERCENT) {
-        this.stop()
-        clearInterval(progress)
-        return
-      }
-
-      if (this._pause) {
-        clearInterval(progress)
-        return
-      }
-
-      const frames = this._timeout / (MAX_PERCENT - this._percent) / MILLISECONDS
-      this._percent = Math.round((this._percent + (1 / frames)) * 100) / 100
-      this._timeout -= MILLISECONDS
-      this._animateProgressBar()
-    }, MILLISECONDS)
-  }
-
-  _createProgressBar() {
-    if (this._config.progress) {
-      const progress = document.createElement('div')
-      progress.classList.add(CLASS_NAME_LOADING_BUTTON_PROGRESS)
-      progress.setAttribute('role', 'progressbar')
-      progress.setAttribute('aria-hidden', 'true')
-      progress.style.backgroundColor = this._progressBarBg()
-
-      this._element.insertBefore(progress, this._element.firstChild)
-      this._progressBar = progress
-    }
-  }
-
   _createSpinner() {
@@ -236,9 +165,2 @@ if (this._config.spinner) {
 
-  _removeProgressBar() {
-    if (this._config.progress) {
-      this._progressBar.remove()
-      this._progressBar = null
-    }
-  }
-
   _removeSpinner() {
@@ -251,48 +173,7 @@ if (this._config.spinner) {
 
-  _progressBarBg() {
-    // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
-    const yiqContrastedThreshold = 150
-    const color = window.getComputedStyle(this._element).getPropertyValue('background-color') === 'rgba(0, 0, 0, 0)' ? 'rgb(255, 255, 255)' : window.getComputedStyle(this._element).getPropertyValue('background-color')
-
-    const rgb = color.match(/^rgb?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i)
-
-    const r = Number.parseInt(rgb[1], 10)
-    const g = Number.parseInt(rgb[2], 10)
-    const b = Number.parseInt(rgb[3], 10)
-
-    const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000
-
-    if (yiq > yiqContrastedThreshold) {
-      return PROGRESS_BAR_BG_COLOR_DARK
-    }
-
-    return PROGRESS_BAR_BG_COLOR_LIGHT
-  }
-
-  _animateProgressBar() {
-    if (this._config.progress) {
-      this._progressBar.style.width = `${this._percent}%`
-    }
-  }
-
   // Static
 
   static loadingButtonInterface(element, config) {
-    let data = Data.get(element, DATA_KEY)
-    let _config = {
-      ...Default,
-      ...Manipulator.getDataAttributes(element)
-    }
+    const data = LoadingButton.getOrCreateInstance(element, config)
 
-    if (typeof config === 'object') {
-      _config = {
-        ..._config,
-        ...config
-      }
-    }
-
-    if (!data) {
-      data = new LoadingButton(element, _config)
-    }
-
     if (typeof config === 'string') {
@@ -299,0 +180,0 @@ if (typeof data[config] === 'undefined') {

js/src/modal.js

 /**
  * --------------------------------------------------------------------------
-  * CoreUI (v4.0.0-rc.5): modal.js
+  * CoreUI (v4.0.0): modal.js
  * Licensed under MIT (https://coreui.io/license)
@@ -13,5 +13,3 @@ *
   defineJQueryPlugin,
-  emulateTransitionEnd,
   getElementFromSelector,
-  getTransitionDurationFromElement,
   isRTL,
@@ -25,3 +23,3 @@ isVisible,
 import SelectorEngine from './dom/selector-engine'
-import { getWidth as getScrollBarWidth, hide as scrollBarHide, reset as scrollBarReset } from './util/scrollbar'
+import ScrollBarHelper from './util/scrollbar'
 import BaseComponent from './base-component'
@@ -93,2 +91,3 @@ import Backdrop from './util/backdrop'
     this._isTransitioning = false
+    this._scrollBar = new ScrollBarHelper()
   }
@@ -117,6 +116,2 @@
 
-    if (this._isAnimated()) {
-      this._isTransitioning = true
-    }
-
     const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, {
@@ -126,3 +121,3 @@ relatedTarget
 
-    if (this._isShown || showEvent.defaultPrevented) {
+    if (showEvent.defaultPrevented) {
       return
@@ -133,4 +128,8 @@ }
 
-    scrollBarHide()
+    if (this._isAnimated()) {
+      this._isTransitioning = true
+    }
 
+    this._scrollBar.hide()
+
     document.body.classList.add(CLASS_NAME_OPEN)
@@ -223,3 +222,3 @@
       ...Manipulator.getDataAttributes(this._element),
-      ...config
+      ...(typeof config === 'object' ? config : {})
     }
@@ -316,3 +315,3 @@ typeCheckConfig(NAME, config, DefaultType)
       this._resetAdjustments()
-      scrollBarReset()
+      this._scrollBar.reset()
       EventHandler.trigger(this._element, EVENT_HIDDEN)
@@ -353,21 +352,24 @@ })
 
-    const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
+    const { classList, scrollHeight, style } = this._element
+    const isModalOverflowing = scrollHeight > document.documentElement.clientHeight
 
+    // return if the following background transition hasn't yet completed
+    if ((!isModalOverflowing && style.overflowY === 'hidden') || classList.contains(CLASS_NAME_STATIC)) {
+      return
+    }
+
     if (!isModalOverflowing) {
-      this._element.style.overflowY = 'hidden'
+      style.overflowY = 'hidden'
     }
 
-    this._element.classList.add(CLASS_NAME_STATIC)
-    const modalTransitionDuration = getTransitionDurationFromElement(this._dialog)
-    EventHandler.off(this._element, 'transitionend')
-    EventHandler.one(this._element, 'transitionend', () => {
-      this._element.classList.remove(CLASS_NAME_STATIC)
+    classList.add(CLASS_NAME_STATIC)
+    this._queueCallback(() => {
+      classList.remove(CLASS_NAME_STATIC)
       if (!isModalOverflowing) {
-        EventHandler.one(this._element, 'transitionend', () => {
-          this._element.style.overflowY = ''
-        })
-        emulateTransitionEnd(this._element, modalTransitionDuration)
+        this._queueCallback(() => {
+          style.overflowY = ''
+        }, this._dialog)
       }
-    })
-    emulateTransitionEnd(this._element, modalTransitionDuration)
+    }, this._dialog)
+
     this._element.focus()
@@ -382,3 +384,3 @@ }
     const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
-    const scrollbarWidth = getScrollBarWidth()
+    const scrollbarWidth = this._scrollBar.getWidth()
     const isBodyOverflowing = scrollbarWidth > 0
@@ -404,3 +406,3 @@
     return this.each(function () {
-      const data = Modal.getInstance(this) || new Modal(this, typeof config === 'object' ? config : {})
+      const data = Modal.getOrCreateInstance(this, config)
 
@@ -446,3 +448,3 @@ if (typeof config !== 'string') {
 
-  const data = Modal.getInstance(target) || new Modal(target)
+  const data = Modal.getOrCreateInstance(target)
 
@@ -449,0 +451,0 @@ data.toggle(this)

js/src/multi-select.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI PRO (v4.0.0-rc.1): multi-select.js
+ * CoreUI PRO (v4.0.0): multi-select.js
  * License (https://coreui.io/pro/license)
@@ -24,4 +24,4 @@ * --------------------------------------------------------------------------
 
-const NAME = 'mutli-select'
-const DATA_KEY = 'coreui.mutli-select'
+const NAME = 'multi-select'
+const DATA_KEY = 'coreui.multi-select'
 const EVENT_KEY = `.${DATA_KEY}`
@@ -39,3 +39,2 @@ const DATA_API_KEY = '.data-api'
 const SELECTOR_SELECT = '.form-multi-select'
-const SELECTOR_SELECTED = '.form-multi-selected'
 const SELECTOR_SELECTION = '.form-multi-select-selection'
@@ -57,8 +56,12 @@ const SELECTOR_SELECTION_CLEANER = '.form-multi-select-selection-cleaner'
 
+const CLASS_NAME_DISABLED = 'disabled'
 const CLASS_NAME_SELECT = 'form-multi-select'
-const CLASS_NAME_SELECT_INLINE = 'form-multi-select-inline'
+const CLASS_NAME_SELECT_DROPDOWN = 'form-multi-select-dropdown'
 const CLASS_NAME_SELECT_MULTIPLE = 'form-multi-select-multiple'
+const CLASS_NAME_SELECT_WITH_CLEANER = 'form-multi-select-with-cleaner'
+const CLASS_NAME_SELECT_ALL = 'form-multi-select-all'
 const CLASS_NAME_OPTGROUP = 'form-multi-select-optgroup'
 const CLASS_NAME_OPTGROUP_LABEL = 'form-multi-select-optgroup-label'
 const CLASS_NAME_OPTION = 'form-multi-select-option'
+const CLASS_NAME_OPTION_WITH_CHECKBOX = 'form-multi-select-option-with-checkbox'
 const CLASS_NAME_OPTIONS = 'form-multi-select-options'
@@ -78,10 +81,13 @@ const CLASS_NAME_OPTIONS_EMPTY = 'form-multi-select-options-empty'
 const Default = {
-  inline: false,
+  cleaner: true,
   multiple: true,
+  placeholder: 'Select...',
   options: false,
-  optionsEmptyPlaceholder: 'no items',
+  optionsMaxHeight: 'auto',
+  optionsStyle: 'checkbox',
   search: false,
-  searchPlaceholder: 'Select...',
-  selection: true,
-  selectionType: 'counter',
+  searchNoResultsLabel: 'No results found',
+  selectAll: true,
+  selectAllLabel: 'Select all options',
+  selectionType: 'tags',
   selectionTypeCounterText: 'item(s) selected'
@@ -91,9 +97,12 @@ }
 const DefaultType = {
-  inline: 'boolean',
+  cleaner: 'boolean',
   multiple: 'boolean',
+  placeholder: 'string',
   options: '(boolean|array)',
-  optionsEmptyPlaceholder: 'string',
+  optionsMaxHeight: '(number|string)',
+  optionsStyle: 'string',
   search: 'boolean',
-  searchPlaceholder: 'string',
-  selection: 'boolean',
+  searchNoResultsLabel: 'string',
+  selectAll: 'boolean',
+  selectAllLabel: 'string',
   selectionType: 'string',
@@ -113,2 +122,3 @@ selectionTypeCounterText: 'string'
 
+    this._selectAllElement = null
     this._selectionElement = null
@@ -187,2 +197,32 @@ this._selectionCleanerElement = null
 
+  selectAll(options = this._options) {
+    options.forEach(option => {
+      if (option.disabled) {
+        return
+      }
+
+      if (option.label) {
+        this.selectAll(option.options)
+        return
+      }
+
+      this._selectOption(option.value, option.text)
+    })
+  }
+
+  deselectAll(options = this._options) {
+    options.forEach(option => {
+      if (option.disabled) {
+        return
+      }
+
+      if (option.label) {
+        this.deselectAll(option.options)
+        return
+      }
+
+      this._deselectOption(option.value)
+    })
+  }
+
   getValue() {
@@ -207,6 +247,12 @@ return this._selection
       if ((key === 8 || key === 46) && event.target.value.length === 0) {
-        this._selectionDeleteLast()
+        this._deselectLastOption()
       }
     })
 
+    EventHandler.on(this._selectAllElement, EVENT_CLICK, event => {
+      event.preventDefault()
+      event.stopPropagation()
+      this.selectAll()
+    })
+
     EventHandler.on(this._optionsElement, EVENT_CLICK, event => {
@@ -221,7 +267,3 @@ event.preventDefault()
       event.stopPropagation()
-      this._selectionClear()
-      this._updateSelection()
-      // this._updateSelectionCleaner()
-      this._updateSearch()
-      this._updateSearchSize()
+      this.deselectAll()
     })
@@ -243,6 +285,5 @@
       ...Manipulator.getDataAttributes(this._element),
-      ...config
+      ...(typeof config === 'object' ? config : {})
     }
     typeCheckConfig(NAME, config, DefaultType)
-
     return config
@@ -268,3 +309,4 @@ }
           text: node.innerHTML,
-          selected: node.selected
+          selected: node.selected,
+          disabled: node.disabled
         })
@@ -310,16 +352,9 @@ }
   _createNativeSelect(data) {
-    const select = document.createElement('select')
-    select.classList.add(CLASS_NAME_SELECT)
-    if (this._element.id) {
-      select.id = this._element.id
-    }
+    this._element.classList.add(CLASS_NAME_SELECT)
 
     if (this._config.multiple) {
-      select.multiple = true
+      this._element.setAttribute('multiple', true)
     }
 
-    this._createNativeOptions(select, data)
-
-    this._element.replaceWith(select)
-    this._element = select
+    this._createNativeOptions(this._element, data)
   }
@@ -338,2 +373,7 @@
         opt.value = option.value
+
+        if (option.disabled === true) {
+          opt.setAttribute('disabled', 'disabled')
+        }
+
         if (option.selected === true) {
@@ -366,7 +406,3 @@ opt.setAttribute('selected', 'selected')
 
-    if (this._config.inline) {
-      div.classList.add(CLASS_NAME_SELECT_INLINE)
-    }
-
-    if (this._config.selectionType === 'tags') {
+    if (this._config.multiple && this._config.selectionType === 'tags') {
       div.classList.add(CLASS_NAME_SELECTION_TAGS)
@@ -377,6 +413,4 @@ }
     this._element.parentNode.insertBefore(div, this._element.nextSibling)
-    if (!this._config.inline || (this._config.inline && this._config.selection)) {
-      this._createSelection()
-      // this._createSelectionCleaner()
-    }
+    this._createSelection()
+    this._createSelectionCleaner()
 
@@ -403,9 +437,11 @@ if (this._config.search) {
   _createSelectionCleaner() {
-    const cleaner = document.createElement('span')
-    cleaner.classList.add(CLASS_NAME_SELECTION_CLEANER)
-    cleaner.innerHTML = '×'
-    this._clone.append(cleaner)
+    if (this._config.cleaner && this._config.multiple) {
+      const cleaner = document.createElement('button')
+      cleaner.classList.add(CLASS_NAME_SELECTION_CLEANER)
+      this._clone.append(cleaner)
+      this._clone.classList.add(CLASS_NAME_SELECT_WITH_CLEANER)
 
-    // this._updateSelectionCleaner()
-    this._selectionCleanerElement = cleaner
+      this._updateSelectionCleaner()
+      this._selectionCleanerElement = cleaner
+    }
   }
@@ -424,8 +460,29 @@
   _createOptionsContainer() {
-    const div = document.createElement('div')
-    div.classList.add(CLASS_NAME_OPTIONS)
-    this._clone.append(div)
+    const dropdownDiv = document.createElement('div')
+    dropdownDiv.classList.add(CLASS_NAME_SELECT_DROPDOWN)
 
-    this._createOptions(div, this._options)
-    this._optionsElement = div
+    if (this._config.selectAll && this._config.multiple) {
+      const selectAll = document.createElement('button')
+      selectAll.classList.add(CLASS_NAME_SELECT_ALL)
+      selectAll.innerHTML = this._config.selectAllLabel
+
+      this._selectAllElement = selectAll
+
+      dropdownDiv.append(selectAll)
+    }
+
+    const optionsDiv = document.createElement('div')
+    optionsDiv.classList.add(CLASS_NAME_OPTIONS)
+
+    if (this._config.optionsMaxHeight !== 'auto') {
+      optionsDiv.style.maxHeight = `${this._config.optionsMaxHeight}px`
+      optionsDiv.style.overflow = 'scroll'
+    }
+
+    dropdownDiv.append(optionsDiv)
+
+    this._clone.append(dropdownDiv)
+
+    this._createOptions(optionsDiv, this._options)
+    this._optionsElement = optionsDiv
   }
@@ -438,2 +495,11 @@
         optionDiv.classList.add(CLASS_NAME_OPTION)
+
+        if (option.disabled) {
+          optionDiv.classList.add(CLASS_NAME_DISABLED)
+        }
+
+        if (this._config.optionsStyle === 'checkbox') {
+          optionDiv.classList.add(CLASS_NAME_OPTION_WITH_CHECKBOX)
+        }
+
         optionDiv.dataset.value = String(option.value)
@@ -466,4 +532,4 @@ optionDiv.tabIndex = 0
 
-    const closeBtn = document.createElement('span')
-    closeBtn.classList.add(CLASS_NAME_TAG_DELETE, 'close')
+    const closeBtn = document.createElement('button')
+    closeBtn.classList.add(CLASS_NAME_TAG_DELETE, 'text-medium-emphasis')
     closeBtn.setAttribute('aria-label', 'Close')
@@ -474,4 +540,2 @@ closeBtn.innerHTML = '<span aria-hidden="true">&times;</span>'
 
-    // eslint-disable-next-line no-warning-comments
-    // TODO: zastanowić się czy nie zrobić tego globalnie
     EventHandler.on(closeBtn, EVENT_CLICK, event => {
@@ -482,5 +546,3 @@ event.preventDefault()
       tag.remove()
-      this._selectionDelete(value)
-      this._updateOptionsList()
-      this._updateSearch()
+      this._deselectOption(value)
     })
@@ -500,18 +562,13 @@
     if (this._config.multiple && element.classList.contains(CLASS_NAME_SELECTED)) {
-      this._selectionDelete(value)
+      this._deselectOption(value)
     } else if (this._config.multiple && !element.classList.contains(CLASS_NAME_SELECTED)) {
-      this._selectionAdd(value, text)
+      this._selectOption(value, text)
     } else if (!this._config.multiple) {
-      this._selectionAdd(value, text)
+      this._selectOption(value, text)
     }
-
-    this._updateSelection()
-    // this._updateSelectionCleaner()
-    this._updateSearch()
-    this._updateSearchSize()
   }
 
-  _selectionAdd(value, text) {
+  _selectOption(value, text) {
     if (!this._config.multiple) {
-      this._selectionClear()
+      this.deselectAll()
     }
@@ -526,32 +583,52 @@
 
-    this._selectOption(value)
-  }
+    const nativeOption = SelectorEngine.findOne(`option[value="${value}"]`, this._element)
 
-  _selectionClear() {
-    this._selection.length = 0
-    this._clearOptions()
+    if (nativeOption) {
+      nativeOption.selected = true
+    }
+
+    const option = SelectorEngine.findOne(`[data-value="${value}"]`, this._optionsElement)
+    if (option) {
+      option.classList.add(CLASS_NAME_SELECTED)
+    }
+
+    EventHandler.trigger(this._element, EVENT_CHANGED, {
+      value: this._selection
+    })
+
+    this._updateSelection()
+    this._updateSelectionCleaner()
+    this._updateSearch()
+    this._updateSearchSize()
   }
 
-  _selectionDelete(value) {
+  _deselectOption(value) {
     const selected = this._selection.filter(e => e.value !== value)
     this._selection = selected
-    this._unSelectOption(value)
+
+    SelectorEngine.findOne(`option[value="${value}"]`, this._element).selected = false
+
+    const option = SelectorEngine.findOne(`[data-value="${value}"]`, this._optionsElement)
+    if (option) {
+      option.classList.remove(CLASS_NAME_SELECTED)
+    }
+
+    EventHandler.trigger(this._element, EVENT_CHANGED, {
+      value: this._selection
+    })
+
+    this._updateSelection()
+    this._updateSelectionCleaner()
+    this._updateSearch()
+    this._updateSearchSize()
   }
 
-  _selectionDeleteLast() {
+  _deselectLastOption() {
     if (this._selection.length > 0) {
       const last = this._selection.pop()
-      this._selectionDelete(last.value)
-      this._updateSelection()
-      // this._updateSelectionCleaner()
-      this._updateSearch()
+      this._deselectOption(last.value)
     }
   }
-  // .form-multi-select-selections
 
   _updateSelection() {
-    if (this._config.inline && !this._config.selection) {
-      return
-    }
-
     const selection = SelectorEngine.findOne(SELECTOR_SELECTION, this._clone)
@@ -583,3 +660,3 @@
   _updateSelectionCleaner() {
-    if (this._selectionCleanerElement === null) {
+    if (!this._config.cleaner || this._selectionCleanerElement === null) {
       return
@@ -603,7 +680,3 @@ }
 
-    if (this._selection.length === 0 && (this._config.selectionType === 'tags' || this._config.selectionType === 'text')) {
-      this._searchElement.removeAttribute('size')
-    }
-
-    if (this._selection.length > 0 && !this._config.multiple && !this._config.inline) {
+    if (this._selection.length > 0 && !this._config.multiple) {
       this._searchElement.placeholder = this._selection[0].text
@@ -614,3 +687,3 @@ this._selectionElement.style.display = 'none'
 
-    if (this._selection.length > 0 && this._config.multiple && this._config.selectionType !== 'counter' && !this._config.inline) {
+    if (this._selection.length > 0 && this._config.multiple && this._config.selectionType !== 'counter') {
       this._searchElement.placeholder = ''
@@ -621,4 +694,4 @@ this._selectionElement.style.removeProperty('display')
 
-    if (this._selection.length === 0 && this._config.multiple && !this._config.inline) {
-      this._searchElement.placeholder = this._config.searchPlaceholder
+    if (this._selection.length === 0 && this._config.multiple) {
+      this._searchElement.placeholder = this._config.placeholder
       this._selectionElement.style.display = 'none'
@@ -628,15 +701,14 @@ return
 
-    if (this._config.multiple && this._config.selectionType === 'counter' && !this._config.inline) {
+    if (this._config.multiple && this._config.selectionType === 'counter') {
       this._searchElement.placeholder = `${this._selection.length} item(s) selected`
       this._selectionElement.style.display = 'none'
-      return
     }
+  }
 
-    if (this._config.inline) {
-      this._searchElement.placeholder = this._config.searchPlaceholder
+  _updateSearchSize(size = 2) {
+    if (!this._searchElement || !this._config.multiple) {
+      return
     }
-  }
 
-  _updateSearchSize(size = 2) {
-    if (!this._config.inline && this._selection.length > 0 && (this._config.selectionType === 'tags' || this._config.selectionType === 'text')) {
+    if (this._selection.length > 0 && (this._config.selectionType === 'tags' || this._config.selectionType === 'text')) {
       this._searchElement.size = size
@@ -651,43 +723,2 @@ return
 
-  // .form-multi-select-selections
-
-  _selectOption(value) {
-    SelectorEngine.findOne(`option[value="${value}"]`, this._element).selected = true
-
-    // eslint-disable-next-line no-warning-comments
-    // TODO: improve this solution
-    const option = SelectorEngine.findOne(`[data-value="${value}"]`, this._optionsElement)
-    if (option) {
-      option.classList.add(CLASS_NAME_SELECTED)
-    }
-
-    EventHandler.trigger(this._element, EVENT_CHANGED, {
-      value: this._selection
-    })
-  }
-
-  _unSelectOption(value) {
-    SelectorEngine.findOne(`option[value="${value}"]`, this._element).selected = false
-
-    // eslint-disable-next-line no-warning-comments
-    // TODO: improve this solution
-    const option = SelectorEngine.findOne(`[data-value="${value}"]`, this._optionsElement)
-    if (option) {
-      option.classList.remove(CLASS_NAME_SELECTED)
-    }
-
-    EventHandler.trigger(this._element, EVENT_CHANGED, {
-      value: this._selection
-    })
-  }
-
-  _clearOptions() {
-    this._element.value = null
-    SelectorEngine.find(SELECTOR_SELECTED, this._clone).forEach(element => {
-      element.classList.remove(CLASS_NAME_SELECTED)
-    })
-  }
-
-  // eslint-disable-next-line no-warning-comments
-  // TODO: poprawić tą nazwę
   _onSearchChange(element) {
@@ -701,12 +732,11 @@ if (element) {
 
-  _updateOptionsList() {
-    const options = SelectorEngine.find(SELECTOR_OPTION, this._clone)
-
+  _updateOptionsList(options = this._options) {
     options.forEach(option => {
-      if (this._selection.filter(e => e.value === option.dataset.value).length !== 0) {
-        option.classList.add(CLASS_NAME_SELECTED)
+      if (option.label) {
+        this._updateOptionsList(option.options)
+        return
       }
 
-      if (this._selection.filter(e => e.value === option.dataset.value).length === 0) {
-        option.classList.remove(CLASS_NAME_SELECTED)
+      if (option.selected) {
+        this._selectOption(option.value, option.text)
       }
@@ -716,6 +746,2 @@ })
 
-  _isHidden(element) {
-    return element.offsetParent === null
-  }
-
   _isVisible(element) {
@@ -760,3 +786,3 @@ const style = window.getComputedStyle(element)
       placeholder.classList.add(CLASS_NAME_OPTIONS_EMPTY)
-      placeholder.innerHTML = this._config.optionsEmptyPlaceholder
+      placeholder.innerHTML = this._config.searchNoResultsLabel
 
@@ -772,19 +798,4 @@ if (!SelectorEngine.findOne(SELECTOR_OPTIONS_EMPTY, this._clone)) {
   static multiSelectInterface(element, config) {
-    let data = Data.get(element, DATA_KEY)
-    let _config = {
-      ...Default,
-      ...Manipulator.getDataAttributes(element)
-    }
+    const data = MultiSelect.getOrCreateInstance(element, config)
 
-    if (typeof config === 'object') {
-      _config = {
-        ..._config,
-        ...config
-      }
-    }
-
-    if (!data) {
-      data = new MultiSelect(element, _config)
-    }
-
     if (typeof config === 'string') {
@@ -791,0 +802,0 @@ if (typeof data[config] === 'undefined') {

js/src/navigation.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): alert.js
+ * CoreUI (v4.0.0): alert.js
  * Licensed under MIT (https://coreui.io/license)
@@ -10,4 +10,4 @@ * --------------------------------------------------------------------------
   defineJQueryPlugin,
-  emulateTransitionEnd,
-  getTransitionDurationFromElement,
+  // emulateTransitionEnd,
+  // getTransitionDurationFromElement,
   typeCheckConfig
@@ -95,3 +95,4 @@ } from './util/index'
       ...Default,
-      ...config
+      ...Manipulator.getDataAttributes(this._element),
+      ...(typeof config === 'object' ? config : {})
     }
@@ -204,9 +205,6 @@ typeCheckConfig(NAME, config, DefaultType)
     }, 0)
-    const transitionDuration = getTransitionDurationFromElement(element)
 
-    EventHandler.one(element, 'transitionend', () => {
+    this._queueCallback(() => {
       element.style.height = 'auto'
-    })
-
-    emulateTransitionEnd(element, transitionDuration)
+    }, element, true)
   }
@@ -221,11 +219,7 @@
 
-    const transitionDuration = getTransitionDurationFromElement(element)
-
-    EventHandler.one(element, 'transitionend', () => {
+    this._queueCallback(() => {
       if (typeof callback === 'function') {
         callback()
       }
-    })
-
-    emulateTransitionEnd(element, transitionDuration)
+    }, element, true)
   }
@@ -274,13 +268,4 @@
   static navigationInterface(element, config) {
-    let data = Data.get(element, DATA_KEY)
-    const _config = {
-      ...Default,
-      ...Manipulator.getDataAttributes(element),
-      ...(typeof config === 'object' && config ? config : {})
-    }
+    const data = Navigation.getOrCreateInstance(element, config)
 
-    if (!data) {
-      data = new Navigation(element, _config)
-    }
-
     if (typeof config === 'string') {
@@ -287,0 +272,0 @@ if (typeof data[config] === 'undefined') {

js/src/offcanvas.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): dropdown.js
+ * CoreUI (v4.0.0): dropdown.js
  * Licensed under MIT (https://coreui.io/license)
@@ -18,4 +18,3 @@ *
 } from './util/index'
-import { hide as scrollBarHide, reset as scrollBarReset } from './util/scrollbar'
-import Data from './dom/data'
+import ScrollBarHelper from './util/scrollbar'
 import EventHandler from './dom/event-handler'
@@ -116,3 +115,3 @@ import BaseComponent from './base-component'
     if (!this._config.scroll) {
-      scrollBarHide()
+      new ScrollBarHelper().hide()
       this._enforceFocusOnElement(this._element)
@@ -157,3 +156,3 @@ }
       if (!this._config.scroll) {
-        scrollBarReset()
+        new ScrollBarHelper().reset()
       }
@@ -220,3 +219,3 @@
     return this.each(function () {
-      const data = Data.get(this, DATA_KEY) || new Offcanvas(this, typeof config === 'object' ? config : {})
+      const data = Offcanvas.getOrCreateInstance(this, config)
 
@@ -266,10 +265,9 @@ if (typeof config !== 'string') {
 
-  const data = Data.get(target, DATA_KEY) || new Offcanvas(target)
-
+  const data = Offcanvas.getOrCreateInstance(target)
   data.toggle(this)
 })
 
-EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
-  SelectorEngine.find(OPEN_SELECTOR).forEach(el => (Data.get(el, DATA_KEY) || new Offcanvas(el)).show())
-})
+EventHandler.on(window, EVENT_LOAD_DATA_API, () =>
+  SelectorEngine.find(OPEN_SELECTOR).forEach(el => Offcanvas.getOrCreateInstance(el).show())
+)
 
@@ -276,0 +274,0 @@ /**

js/src/popover.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): popover.js
+ * CoreUI (v4.0.0): popover.js
  * Licensed under MIT (https://coreui.io/license)
@@ -12,3 +12,2 @@ *
 import { defineJQueryPlugin } from './util/index'
-import Data from './dom/data'
 import SelectorEngine from './dom/selector-engine'
@@ -105,7 +104,7 @@ import Tooltip from './tooltip'
     if (!this.getTitle()) {
-      this.tip.removeChild(SelectorEngine.findOne(SELECTOR_TITLE, this.tip))
+      SelectorEngine.findOne(SELECTOR_TITLE, this.tip).remove()
     }
 
     if (!this._getContent()) {
-      this.tip.removeChild(SelectorEngine.findOne(SELECTOR_CONTENT, this.tip))
+      SelectorEngine.findOne(SELECTOR_CONTENT, this.tip).remove()
     }
@@ -154,10 +153,4 @@
     return this.each(function () {
-      let data = Data.get(this, DATA_KEY)
-      const _config = typeof config === 'object' ? config : null
+      const data = Popover.getOrCreateInstance(this, config)
 
-      if (!data) {
-        data = new Popover(this, _config)
-        Data.set(this, DATA_KEY, data)
-      }
-
       if (typeof config === 'string') {
@@ -164,0 +157,0 @@ if (typeof data[config] === 'undefined') {

js/src/scrollspy.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): scrollspy.js
+ * CoreUI (v4.0.0): scrollspy.js
  * Licensed under MIT (https://coreui.io/license)
@@ -13,5 +13,4 @@ *
   defineJQueryPlugin,
+  getElement,
   getSelectorFromElement,
-  getUID,
-  isElement,
   typeCheckConfig
@@ -59,2 +58,3 @@ } from './util/index'
 const SELECTOR_LIST_ITEMS = '.list-group-item'
+const SELECTOR_LINK_ITEMS = `${SELECTOR_NAV_LINKS}, ${SELECTOR_LIST_ITEMS}, .${CLASS_NAME_DROPDOWN_ITEM}`
 const SELECTOR_DROPDOWN = '.dropdown'
@@ -77,3 +77,2 @@ const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
     this._config = this._getConfig(config)
-    this._selector = `${this._config.target} ${SELECTOR_NAV_LINKS}, ${this._config.target} ${SELECTOR_LIST_ITEMS}, ${this._config.target} .${CLASS_NAME_DROPDOWN_ITEM}`
     this._offsets = []
@@ -119,3 +118,3 @@ this._targets = []
 
-    const targets = SelectorEngine.find(this._selector)
+    const targets = SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
 
@@ -160,12 +159,4 @@ targets.map(element => {
 
-    if (typeof config.target !== 'string' && isElement(config.target)) {
-      let { id } = config.target
-      if (!id) {
-        id = getUID(NAME)
-        config.target.id = id
-      }
+    config.target = getElement(config.target) || document.documentElement
 
-      config.target = `#${id}`
-    }
-
     typeCheckConfig(NAME, config, DefaultType)
@@ -236,16 +227,12 @@
 
-    const queries = this._selector.split(',')
+    const queries = SELECTOR_LINK_ITEMS.split(',')
       .map(selector => `${selector}[data-coreui-target="${target}"],${selector}[href="${target}"]`)
 
-    const link = SelectorEngine.findOne(queries.join(','))
+    const link = SelectorEngine.findOne(queries.join(','), this._config.target)
 
+    link.classList.add(CLASS_NAME_ACTIVE)
     if (link.classList.contains(CLASS_NAME_DROPDOWN_ITEM)) {
       SelectorEngine.findOne(SELECTOR_DROPDOWN_TOGGLE, link.closest(SELECTOR_DROPDOWN))
         .classList.add(CLASS_NAME_ACTIVE)
-
-      link.classList.add(CLASS_NAME_ACTIVE)
     } else {
-      // Set triggered link as active
-      link.classList.add(CLASS_NAME_ACTIVE)
-
       SelectorEngine.parents(link, SELECTOR_NAV_LIST_GROUP)
@@ -273,3 +260,3 @@ .forEach(listGroup => {
   _clear() {
-    SelectorEngine.find(this._selector)
+    SelectorEngine.find(SELECTOR_LINK_ITEMS, this._config.target)
       .filter(node => node.classList.contains(CLASS_NAME_ACTIVE))
@@ -283,3 +270,3 @@ .forEach(node => node.classList.remove(CLASS_NAME_ACTIVE))
     return this.each(function () {
-      const data = ScrollSpy.getInstance(this) || new ScrollSpy(this, typeof config === 'object' ? config : {})
+      const data = ScrollSpy.getOrCreateInstance(this, config)
 
@@ -286,0 +273,0 @@ if (typeof config !== 'string') {

js/src/sidebar.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): sidebar.js
+ * CoreUI (v4.0.0): sidebar.js
  * Licensed under MIT (https://coreui.io/license)
@@ -10,8 +10,5 @@ * --------------------------------------------------------------------------
   defineJQueryPlugin,
-  emulateTransitionEnd,
-  getTransitionDurationFromElement,
   reflow,
   typeCheckConfig
 } from './util/index'
-import Data from './dom/data'
 import EventHandler from './dom/event-handler'
@@ -38,2 +35,3 @@ import Manipulator from './dom/manipulator'
 const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_HIDE = 'hide'
 const CLASS_NAME_SHOW = 'show'
@@ -49,2 +47,3 @@ const CLASS_NAME_SIDEBAR = 'sidebar'
 const EVENT_HIDDEN = `hidden${EVENT_KEY}`
+const EVENT_RESIZE = 'resize'
 const EVENT_SHOW = `show${EVENT_KEY}`
@@ -100,2 +99,6 @@ const EVENT_SHOWN = `shown${EVENT_KEY}`
 
+    if (this._element.classList.contains(CLASS_NAME_HIDE)) {
+      this._element.classList.remove(CLASS_NAME_HIDE)
+    }
+
     if (REGEXP_SIDEBAR_SELF_HIDING.test(this._element.className)) {
@@ -120,6 +123,3 @@ this._element.classList.add(CLASS_NAME_SHOW)
 
-    const transitionDuration = getTransitionDurationFromElement(this._element)
-
-    EventHandler.one(this._element, 'transitionend', complete)
-    emulateTransitionEnd(this._element, transitionDuration)
+    this._queueCallback(complete, this._element, true)
   }
@@ -132,4 +132,10 @@
       this._element.classList.remove(CLASS_NAME_SHOW)
+    } else {
+      this._element.classList.add(CLASS_NAME_HIDE)
     }
 
+    if (this._isVisible()) {
+      this._element.classList.add(CLASS_NAME_HIDE)
+    }
+
     if (this._isMobile()) {
@@ -150,6 +156,3 @@ this._removeBackdrop()
 
-    const transitionDuration = getTransitionDurationFromElement(this._element)
-
-    EventHandler.one(this._element, 'transitionend', complete)
-    emulateTransitionEnd(this._element, transitionDuration)
+    this._queueCallback(complete, this._element, true)
   }
@@ -325,2 +328,8 @@
     })
+
+    EventHandler.on(window, EVENT_RESIZE, () => {
+      if (this._isMobile() && this._isVisible()) {
+        this.hide()
+      }
+    })
   }
@@ -331,9 +340,4 @@
   static sidebarInterface(element, config) {
-    let data = Data.get(element, DATA_KEY)
-    const _config = typeof config === 'object' && config
+    const data = Sidebar.getOrCreateInstance(element, config)
 
-    if (!data) {
-      data = new Sidebar(element, _config)
-    }
-
     if (typeof config === 'string') {
@@ -340,0 +344,0 @@ if (typeof data[config] === 'undefined') {

js/src/tab.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): tab.js
+ * CoreUI (v4.0.0): tab.js
  * Licensed under MIT (https://coreui.io/license)
@@ -17,3 +17,2 @@ *
 } from './util/index'
-import Data from './dom/data'
 import EventHandler from './dom/event-handler'
@@ -188,3 +187,3 @@ import SelectorEngine from './dom/selector-engine'
     return this.each(function () {
-      const data = Data.get(this, DATA_KEY) || new Tab(this)
+      const data = Tab.getOrCreateInstance(this)
 
@@ -217,3 +216,3 @@ if (typeof config === 'string') {
 
-  const data = Data.get(this, DATA_KEY) || new Tab(this)
+  const data = Tab.getOrCreateInstance(this)
   data.show()
@@ -220,0 +219,0 @@ })

js/src/toast.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): toast.js
+ * CoreUI (v4.0.0): toast.js
  * Licensed under MIT (https://coreui.io/license)
@@ -16,3 +16,2 @@ *
 } from './util/index'
-import Data from './dom/data'
 import EventHandler from './dom/event-handler'
@@ -225,9 +224,4 @@ import Manipulator from './dom/manipulator'
     return this.each(function () {
-      let data = Data.get(this, DATA_KEY)
-      const _config = typeof config === 'object' && config
+      const data = Toast.getOrCreateInstance(this, config)
 
-      if (!data) {
-        data = new Toast(this, _config)
-      }
-
       if (typeof config === 'string') {
@@ -234,0 +228,0 @@ if (typeof data[config] === 'undefined') {

js/src/tooltip.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): tooltip.js
+ * CoreUI (v4.0.0): tooltip.js
  * Licensed under MIT (https://coreui.io/license)
@@ -214,4 +214,4 @@ *
 
-    if (this.tip && this.tip.parentNode) {
-      this.tip.parentNode.removeChild(this.tip)
+    if (this.tip) {
+      this.tip.remove()
     }
@@ -321,4 +321,4 @@
 
-      if (this._hoverState !== HOVER_STATE_SHOW && tip.parentNode) {
-        tip.parentNode.removeChild(tip)
+      if (this._hoverState !== HOVER_STATE_SHOW) {
+        tip.remove()
       }
@@ -730,9 +730,4 @@
     return this.each(function () {
-      let data = Data.get(this, DATA_KEY)
-      const _config = typeof config === 'object' && config
+      const data = Tooltip.getOrCreateInstance(this, config)
 
-      if (!data) {
-        data = new Tooltip(this, _config)
-      }
-
       if (typeof config === 'string') {
@@ -739,0 +734,0 @@ if (typeof data[config] === 'undefined') {

js/src/util/backdrop.js

 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v5.0.1): util/backdrop.js
+ * Bootstrap (v5.0.2): util/backdrop.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
@@ -9,3 +9,3 @@ * --------------------------------------------------------------------------
 import EventHandler from '../dom/event-handler'
-import { emulateTransitionEnd, execute, getTransitionDurationFromElement, reflow, typeCheckConfig } from './index'
+import { execute, executeAfterTransition, getElement, reflow, typeCheckConfig } from './index'
 
@@ -15,3 +15,3 @@ const Default = {
   isAnimated: false,
-  rootElement: document.body, // give the choice to place backdrop under different elements
+  rootElement: 'body', // give the choice to place backdrop under different elements
   clickCallback: null
@@ -23,3 +23,3 @@ }
   isAnimated: 'boolean',
-  rootElement: 'element',
+  rootElement: '(element|string)',
   clickCallback: '(function|null)'
@@ -96,3 +96,4 @@ }
 
-    config.rootElement = config.rootElement || document.body
+    // use getElement() with the default "body" to get a fresh Element on each instantiation
+    config.rootElement = getElement(config.rootElement)
     typeCheckConfig(NAME, config, DefaultType)
@@ -123,7 +124,3 @@ return config
 
-    const { parentNode } = this._getElement()
-    if (parentNode) {
-      parentNode.removeChild(this._element)
-    }
-
+    this._element.remove()
     this._isAppended = false
@@ -133,10 +130,3 @@ }
   _emulateAnimation(callback) {
-    if (!this._config.isAnimated) {
-      execute(callback)
-      return
-    }
-
-    const backdropTransitionDuration = getTransitionDurationFromElement(this._getElement())
-    EventHandler.one(this._getElement(), 'transitionend', () => execute(callback))
-    emulateTransitionEnd(this._getElement(), backdropTransitionDuration)
+    executeAfterTransition(callback, this._getElement(), this._config.isAnimated)
   }
@@ -143,0 +133,0 @@ }

js/src/util/index.js

@@ -5,3 +5,3 @@ import SelectorEngine from '../dom/selector-engine'
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): alert.js
+ * CoreUI (v4.0.0): alert.js
  * Licensed under MIT (https://coreui.io/license)
@@ -133,20 +133,2 @@ *
 
-const emulateTransitionEnd = (element, duration) => {
-  let called = false
-  const durationPadding = 5
-  const emulatedDuration = duration + durationPadding
-
-  function listener() {
-    called = true
-    element.removeEventListener(TRANSITION_END, listener)
-  }
-
-  element.addEventListener(TRANSITION_END, listener)
-  setTimeout(() => {
-    if (!called) {
-      triggerTransitionEnd(element)
-    }
-  }, emulatedDuration)
-}
-
 const typeCheckConfig = (componentName, config, configTypes) => {
@@ -220,3 +202,3 @@ Object.keys(configTypes).forEach(property => {
 
-  if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
+  if (jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
     return jQuery
@@ -228,5 +210,14 @@ }
 
+const DOMContentLoadedCallbacks = []
+
 const onDOMContentLoaded = callback => {
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', callback)
+    // add listener on the first call when the document is in loading state
+    if (!DOMContentLoadedCallbacks.length) {
+      document.addEventListener('DOMContentLoaded', () => {
+        DOMContentLoadedCallbacks.forEach(callback => callback())
+      })
+    }
+
+    DOMContentLoadedCallbacks.push(callback)
   } else {
@@ -262,2 +253,31 @@ callback()
 
+const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
+  if (!waitForTransition) {
+    execute(callback)
+    return
+  }
+
+  const durationPadding = 5
+  const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding
+
+  let called = false
+
+  const handler = ({ target }) => {
+    if (target !== transitionElement) {
+      return
+    }
+
+    called = true
+    transitionElement.removeEventListener(TRANSITION_END, handler)
+    execute(callback)
+  }
+
+  transitionElement.addEventListener(TRANSITION_END, handler)
+  setTimeout(() => {
+    if (!called) {
+      triggerTransitionEnd(transitionElement)
+    }
+  }, emulatedDuration)
+}
+
 /**
@@ -299,3 +319,2 @@ * Return the previous/next element of a list.
   isElement,
-  emulateTransitionEnd,
   typeCheckConfig,
@@ -312,3 +331,4 @@ isVisible,
   defineJQueryPlugin,
-  execute
+  execute,
+  executeAfterTransition
 }

js/src/util/sanitizer.js

 /**
  * --------------------------------------------------------------------------
- * CoreUI (v4.0.0-rc.5): alert.js
+ * CoreUI (v4.0.0): alert.js
  * Licensed under MIT (https://coreui.io/license)
@@ -114,3 +114,3 @@ *
     if (!allowlistKeys.includes(elName)) {
-      el.parentNode.removeChild(el)
+      el.remove()
 
@@ -117,0 +117,0 @@ continue

js/src/util/scrollbar.js

 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v5.0.1): util/scrollBar.js
+ * Bootstrap (v5.0.2): util/scrollBar.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -10,2 +10,3 @@ * --------------------------------------------------------------------------
 import Manipulator from '../dom/manipulator'
+import { isElement } from './index'
 
@@ -15,72 +16,84 @@ const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
 
-const getWidth = () => {
-  // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-  const documentWidth = document.documentElement.clientWidth
-  return Math.abs(window.innerWidth - documentWidth)
-}
+class ScrollBarHelper {
+  constructor() {
+    this._element = document.body
+  }
 
-const hide = (width = getWidth()) => {
-  _disableOverFlow()
-  // give padding to element to balances the hidden scrollbar width
-  _setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width)
-  // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements, to keep shown fullwidth
-  _setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width)
-  _setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width)
-}
+  getWidth() {
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
+    const documentWidth = document.documentElement.clientWidth
+    return Math.abs(window.innerWidth - documentWidth)
+  }
 
-const _disableOverFlow = () => {
-  const actualValue = document.body.style.overflow
-  if (actualValue) {
-    Manipulator.setDataAttribute(document.body, 'overflow', actualValue)
+  hide() {
+    const width = this.getWidth()
+    this._disableOverFlow()
+    // give padding to element to balance the hidden scrollbar width
+    this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width)
+    // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth
+    this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width)
+    this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width)
   }
 
-  document.body.style.overflow = 'hidden'
-}
+  _disableOverFlow() {
+    this._saveInitialAttribute(this._element, 'overflow')
+    this._element.style.overflow = 'hidden'
+  }
 
-const _setElementAttributes = (selector, styleProp, callback) => {
-  const scrollbarWidth = getWidth()
-  SelectorEngine.find(selector)
-    .forEach(element => {
-      if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) {
+  _setElementAttributes(selector, styleProp, callback) {
+    const scrollbarWidth = this.getWidth()
+    const manipulationCallBack = element => {
+      if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
         return
       }
 
-      const actualValue = element.style[styleProp]
-      if (actualValue) {
-        Manipulator.setDataAttribute(element, styleProp, actualValue)
-      }
-
+      this._saveInitialAttribute(element, styleProp)
       const calculatedValue = window.getComputedStyle(element)[styleProp]
       element.style[styleProp] = `${callback(Number.parseFloat(calculatedValue))}px`
-    })
-}
+    }
 
-const reset = () => {
-  _resetElementAttributes('body', 'overflow')
-  _resetElementAttributes('body', 'paddingRight')
-  _resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight')
-  _resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight')
-}
+    this._applyManipulationCallback(selector, manipulationCallBack)
+  }
 
-const _resetElementAttributes = (selector, styleProp) => {
-  SelectorEngine.find(selector).forEach(element => {
-    const value = Manipulator.getDataAttribute(element, styleProp)
-    if (typeof value === 'undefined') {
-      element.style.removeProperty(styleProp)
+  reset() {
+    this._resetElementAttributes(this._element, 'overflow')
+    this._resetElementAttributes(this._element, 'paddingRight')
+    this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight')
+    this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight')
+  }
+
+  _saveInitialAttribute(element, styleProp) {
+    const actualValue = element.style[styleProp]
+    if (actualValue) {
+      Manipulator.setDataAttribute(element, styleProp, actualValue)
+    }
+  }
+
+  _resetElementAttributes(selector, styleProp) {
+    const manipulationCallBack = element => {
+      const value = Manipulator.getDataAttribute(element, styleProp)
+      if (typeof value === 'undefined') {
+        element.style.removeProperty(styleProp)
+      } else {
+        Manipulator.removeDataAttribute(element, styleProp)
+        element.style[styleProp] = value
+      }
+    }
+
+    this._applyManipulationCallback(selector, manipulationCallBack)
+  }
+
+  _applyManipulationCallback(selector, callBack) {
+    if (isElement(selector)) {
+      callBack(selector)
     } else {
-      Manipulator.removeDataAttribute(element, styleProp)
-      element.style[styleProp] = value
+      SelectorEngine.find(selector, this._element).forEach(callBack)
     }
-  })
-}
+  }
 
-const isBodyOverflowing = () => {
-  return getWidth() > 0
+  isOverflowing() {
+    return this.getWidth() > 0
+  }
 }
 
-export {
-  getWidth,
-  hide,
-  isBodyOverflowing,
-  reset
-}
+export default ScrollBarHelper

package.json

 {
   "name": "@coreui/coreui-pro",
   "description": "The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten by the CoreUI Team",
-  "version": "4.0.0-rc.5",
+  "version": "4.0.0",
   "config": {
@@ -22,3 +22,3 @@ "version_short": "4.0"
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
-    "changelog": "auto-changelog --template build/changelog-template.hbs --commit-limit false --package --backfill-limit 0 --starting-version v4.0.0-rc.5",
+    "changelog": "auto-changelog --template build/changelog-template.hbs --commit-limit false --package --backfill-limit 0 --starting-version v4.0.0",
     "css": "npm-run-all css-compile css-prefix css-minify",
@@ -93,5 +93,5 @@ "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/",
   "devDependencies": {
-    "@babel/cli": "^7.14.3",
-    "@babel/core": "^7.14.3",
-    "@babel/preset-env": "^7.14.2",
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.7",
     "@popperjs/core": "^2.9.2",
@@ -102,19 +102,19 @@ "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-replace": "^2.4.2",
-    "auto-changelog": "^2.2.1",
-    "autoprefixer": "^10.2.5",
+    "auto-changelog": "^2.3.0",
+    "autoprefixer": "^10.2.6",
     "bundlewatch": "^0.3.2",
     "clean-css-cli": "^5.3.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.27.0",
+    "eslint": "^7.29.0",
     "eslint-config-xo": "^0.36.0",
-    "eslint-plugin-import": "^2.23.3",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-unicorn": "^31.0.0",
     "find-unused-sass-variables": "^3.1.0",
     "glob": "^7.1.7",
-    "globby": "^11.0.3",
+    "globby": "^11.0.4",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.71.1",
+    "hugo-bin": "^0.72.1",
     "ip": "^1.1.5",
     "jquery": "^3.6.0",
-    "karma": "^6.3.2",
+    "karma": "^6.3.4",
     "karma-browserstack-launcher": "1.6.0",
@@ -124,3 +124,3 @@ "karma-chrome-launcher": "^3.1.0",
     "karma-detect-browsers": "^2.3.3",
-    "karma-firefox-launcher": "^2.1.0",
+    "karma-firefox-launcher": "^2.1.1",
     "karma-jasmine": "^4.0.1",
@@ -133,14 +133,13 @@ "karma-jasmine-html-reporter": "^1.6.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.0",
+    "postcss": "^8.3.5",
     "postcss-cli": "^8.3.1",
-    "postcss-combine-duplicated-selectors": "^10.0.2",
-    "rollup": "^2.48.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "rollup": "^2.52.2",
     "rollup-plugin-istanbul": "^3.0.0",
-    "rtlcss": "^3.1.2",
-    "sass": "^1.32.13",
+    "sass": "^1.35.1",
     "shelljs": "^0.8.4",
     "stylelint": "^13.13.1",
-    "stylelint-config-twbs-bootstrap": "^2.2.0",
-    "terser": "5.7.0",
-    "vnu-jar": "21.4.9"
+    "stylelint-config-twbs-bootstrap": "^2.2.1",
+    "terser": "5.1.0",
+    "vnu-jar": "21.6.11"
   },
@@ -147,0 +146,0 @@ "files": [

README.md

@@ -44,7 +44,7 @@ <p align="center">
 
-- [Download the latest release](https://github.com/coreui/coreui/archive/v4.0.0-rc.5.zip)
+- [Download the latest release](https://github.com/coreui/coreui/archive/v4.0.0.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/coreui@next`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/coreui@next`
-- Install with [Composer](https://getcomposer.org/): `composer require coreui/coreui:4.0.0-rc.5`
+- Install with [Composer](https://getcomposer.org/): `composer require coreui/coreui:4.0.0`
 
@@ -61,7 +61,7 @@ Read the [Getting started page](https://coreui.io/docs/4.0/getting-started/introduction/) for information on the framework contents, templates and examples, and more.
 [![devDependency Status](https://img.shields.io/david/dev/coreui/coreui)](https://david-dm.org/coreui/coreui?type=dev)
-[![Coverage Status](https://img.shields.io/coveralls/github/coreui/coreui/v4-dev)](https://coveralls.io/github/coreui/coreui?branch=v4-dev)
-[![CSS gzip size](https://img.badgesize.io/coreui/coreui/main/dist/css/coreui.min.css?compression=gzip&label=CSS%20gzip%20size)](https://github.com/coreui/coreui/blob/v4-dev/dist/css/coreui.min.css)
-[![CSS Brotli size](https://img.badgesize.io/coreui/coreui/main/dist/css/coreui.min.css?compression=brotli&label=CSS%20Brotli%20size)](https://github.com/coreui/coreui/blob/v4-dev/dist/css/coreui.min.css)
-[![JS gzip size](https://img.badgesize.io/coreui/coreui/main/dist/js/coreui.min.js?compression=gzip&label=JS%20gzip%20size)](https://github.com/coreui/coreui/blob/v4-dev/dist/js/coreui.min.js)
-[![JS Brotli size](https://img.badgesize.io/coreui/coreui/main/dist/js/coreui.min.js?compression=brotli&label=JS%20Brotli%20size)](https://github.com/coreui/coreui/blob/v4-dev/dist/js/coreui.min.js)
+[![Coverage Status](https://img.shields.io/coveralls/github/coreui/coreui/main)](https://coveralls.io/github/coreui/coreui?branch=main)
+[![CSS gzip size](https://img.badgesize.io/coreui/coreui/main/dist/css/coreui.min.css?compression=gzip&label=CSS%20gzip%20size)](https://github.com/coreui/coreui/blob/main/dist/css/coreui.min.css)
+[![CSS Brotli size](https://img.badgesize.io/coreui/coreui/main/dist/css/coreui.min.css?compression=brotli&label=CSS%20Brotli%20size)](https://github.com/coreui/coreui/blob/main/dist/css/coreui.min.css)
+[![JS gzip size](https://img.badgesize.io/coreui/coreui/main/dist/js/coreui.min.js?compression=gzip&label=JS%20gzip%20size)](https://github.com/coreui/coreui/blob/main/dist/js/coreui.min.js)
+[![JS Brotli size](https://img.badgesize.io/coreui/coreui/main/dist/js/coreui.min.js?compression=brotli&label=JS%20Brotli%20size)](https://github.com/coreui/coreui/blob/main/dist/js/coreui.min.js)
 
@@ -128,3 +128,3 @@
 
-Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/coreui/coreui/blob/v4-dev/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/coreui/coreui/issues/new).
+Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/coreui/coreui/blob/main/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/coreui/coreui/issues/new).
 
@@ -148,5 +148,5 @@ ## Documentation
 
-Please read through our [contributing guidelines](https://github.com/coreui/coreui/blob/v4-dev/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
+Please read through our [contributing guidelines](https://github.com/coreui/coreui/blob/main/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
 
-Editor preferences are available in the [editor config](https://github.com/coreui/coreui/blob/v4-dev/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org/>.
+Editor preferences are available in the [editor config](https://github.com/coreui/coreui/blob/main/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org/>.
 
@@ -158,3 +158,3 @@
 
-- Read and subscribe to [The Official CoreUI Blog](https://coreui.io/blog/).
+- Read and subscribe to [The Official CoreUI Blog](https://blog.coreui.io/).
 - Join [the official Community](https://community.coreui.io/).
@@ -188,2 +188,2 @@
 
-Copyright 2021 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui/blob/v4-dev/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
+Copyright 2021 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9790338

increased by0.13%

Dev dependency count

48

decreased by-2.04%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Lines of code

70305

decreased by-0.24%

No dependency changes