@coreui/coreui 5.3.1 → 5.3.2

package/js/dist/util/scrollbar.js

@@ -1,5 +1,5 @@
 /*!
-  * CoreUI scrollbar.js v5.3.1 (https://coreui.io)
+  * CoreUI scrollbar.js v5.3.2 (https://coreui.io)
   * Copyright 2025 The CoreUI Team (https://github.com/orgs/coreui/people)
   * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
   */

package/js/dist/util/swipe.js

@@ -1,5 +1,5 @@
 /*!
-  * CoreUI swipe.js v5.3.1 (https://coreui.io)
+  * CoreUI swipe.js v5.3.2 (https://coreui.io)
   * Copyright 2025 The CoreUI Team (https://github.com/orgs/coreui/people)
   * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
   */

package/js/dist/util/template-factory.js

@@ -1,5 +1,5 @@
 /*!
-  * CoreUI template-factory.js v5.3.1 (https://coreui.io)
+  * CoreUI template-factory.js v5.3.2 (https://coreui.io)
   * Copyright 2025 The CoreUI Team (https://github.com/orgs/coreui/people)
   * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
   */

package/js/src/base-component.js

@@ -17,7 +17,7 @@ import { executeAfterTransition, getElement } from './util/index.js'
  * Constants
  */
 
-const VERSION = '5.3.1'
+const VERSION = '5.3.2'
 
 /**
  * Class definition

package/js/src/dropdown.js

@@ -227,7 +227,7 @@ class Dropdown extends BaseComponent {
 
   _createPopper() {
     if (typeof Popper === 'undefined') {
-      throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
+      throw new TypeError('CoreUI\'s dropdowns require Popper (https://popper.js.org/docs/v2/)')
     }
 
     let referenceElement = this._element

package/js/src/tooltip.js

@@ -108,7 +108,7 @@ const DefaultType = {
 class Tooltip extends BaseComponent {
   constructor(element, config) {
     if (typeof Popper === 'undefined') {
-      throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
+      throw new TypeError('CoreUI\'s dropdowns require Popper (https://popper.js.org/docs/v2/)')
     }
 
     super(element, config)
@@ -163,7 +163,6 @@ class Tooltip extends BaseComponent {
       return
     }
 
-    this._activeTrigger.click = !this._activeTrigger.click
     if (this._isShown()) {
       this._leave()
       return

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coreui/coreui",
   "description": "The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintained by the CoreUI Team",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "config": {
     "version_short": "5.3"
   },
@@ -99,33 +99,33 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@babel/cli": "^7.26.4",
-    "@babel/core": "^7.26.9",
+    "@babel/cli": "^7.27.0",
+    "@babel/core": "^7.26.10",
     "@babel/preset-env": "^7.26.9",
-    "@docsearch/js": "^3.8.3",
-    "@eslint/markdown": "^6.2.2",
+    "@docsearch/js": "^3.9.0",
+    "@eslint/markdown": "^6.4.0",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.2",
-    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
     "@stackblitz/sdk": "^1.11.0",
-    "autoprefixer": "^10.4.20",
-    "bootstrap": "^5.3.3",
-    "bundlewatch": "^0.4.0",
+    "autoprefixer": "^10.4.21",
+    "bootstrap": "^5.3.5",
+    "bundlewatch": "^0.4.1",
     "clean-css-cli": "^5.6.3",
     "clipboard": "^2.0.11",
     "cross-env": "^7.0.3",
-    "eslint": "^9.20.1",
-    "eslint-config-xo": "^0.46.0",
+    "eslint": "^9.25.1",
+    "eslint-config-xo": "0.46.0",
     "eslint-plugin-html": "^8.1.2",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-unicorn": "^56.0.1",
-    "find-unused-sass-variables": "^6.0.0",
-    "globals": "^15.15.0",
+    "eslint-plugin-unicorn": "^58.0.0",
+    "find-unused-sass-variables": "^6.1.0",
+    "globals": "^16.0.0",
     "globby": "^14.1.0",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.140.1",
+    "hugo-bin": "^0.143.7",
     "ip": "^2.0.1",
     "jasmine": "^5.6.0",
     "jquery": "^3.7.1",
@@ -139,18 +139,18 @@
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-rollup-preprocessor": "7.0.8",
     "lockfile-lint": "^4.14.0",
-    "nodemon": "^3.1.9",
+    "nodemon": "^3.1.10",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.2",
-    "postcss-cli": "^11.0.0",
+    "postcss": "^8.5.3",
+    "postcss-cli": "^11.0.1",
     "postcss-combine-duplicated-selectors": "^10.0.3",
-    "rollup": "^4.34.7",
+    "rollup": "^4.40.0",
     "rollup-plugin-istanbul": "^5.0.0",
-    "sass-embedded": "^1.85.0",
+    "sass-embedded": "^1.87.0",
     "sass-true": "^8.1.0",
-    "shelljs": "^0.8.5",
-    "stylelint": "^16.14.1",
-    "stylelint-config-twbs-bootstrap": "^15.1.0",
+    "shelljs": "^0.9.2",
+    "stylelint": "^16.19.0",
+    "stylelint-config-twbs-bootstrap": "^16.0.0",
     "terser": "5.39.0",
     "vnu-jar": "24.10.17"
   },

package/scss/_banner.scss

@@ -1,7 +1,7 @@
 $file: "" !default;
 
 /*!
- * CoreUI #{$file} v5.3.1 (https://coreui.io)
+ * CoreUI #{$file} v5.3.2 (https://coreui.io)
  * Copyright (c) 2025 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  */

package/scss/_button-group.scss

@@ -1,5 +1,6 @@
 @use "mixins/border-radius" as *;
 @use "mixins/box-shadow" as *;
+@use "buttons" as *;
 @use "variables" as *;
 
 // Make the div behave like a button
@@ -43,7 +44,7 @@
   // Prevent double borders when buttons are next to each other
   > :not(.btn-check:first-child) + .btn,
   > .btn-group:not(:first-child) {
-    margin-inline-start: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-inline-start: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners
@@ -130,7 +131,7 @@
 
   > .btn:not(:first-child),
   > .btn-group:not(:first-child) {
-    margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners

package/scss/_carousel.scss

@@ -1,8 +1,10 @@
 @use "functions/escape-svg" as *;
 @use "mixins/clearfix" as *;
 @use "mixins/color-mode" as *;
+@use "mixins/ltr-rtl" as *;
 @use "mixins/transition" as *;
 @use "variables" as *;
+@use "variables-dark" as *;
 
 // Notes on the classes:
 //
@@ -105,6 +107,7 @@
   color: $carousel-control-color;
   text-align: center;
   background: none;
+  filter: var(--#{$prefix}carousel-control-icon-filter);
   border: 0;
   opacity: $carousel-control-opacity;
   @include transition($carousel-control-transition);
@@ -138,19 +141,11 @@
   background-size: 100% 100%;
 }
 
-/* rtl:options: {
-  "autoRename": true,
-  "stringMap":[ {
-    "name"    : "prev-next",
-    "search"  : "prev",
-    "replace" : "next"
-  } ]
-} */
 .carousel-control-prev-icon {
-  background-image: escape-svg($carousel-control-prev-icon-bg);
+  @include ltr-rtl-value-only("background-image", escape-svg($carousel-control-prev-icon-bg), escape-svg($carousel-control-next-icon-bg));
 }
 .carousel-control-next-icon {
-  background-image: escape-svg($carousel-control-next-icon-bg);
+  @include ltr-rtl-value-only("background-image", escape-svg($carousel-control-next-icon-bg), escape-svg($carousel-control-prev-icon-bg));
 }
 
 // Optional indicator pips/controls
@@ -209,42 +204,31 @@
   left: (100% - $carousel-caption-width) * .5;
   padding-top: $carousel-caption-padding-y;
   padding-bottom: $carousel-caption-padding-y;
-  color: $carousel-caption-color;
+  color: var(--#{$prefix}carousel-caption-color);
   text-align: center;
 }
 
 // Dark mode carousel
 
 @mixin carousel-dark() {
-  .carousel-control-prev-icon,
-  .carousel-control-next-icon {
-    filter: $carousel-dark-control-icon-filter;
-  }
-
-  .carousel-indicators [data#{$data-infix}target] {
-    background-color: $carousel-dark-indicator-active-bg;
-  }
-
-  .carousel-caption {
-    color: $carousel-dark-caption-color;
-  }
+  --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
+  --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark};
+  --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
 }
 
 .carousel-dark {
   @include carousel-dark();
 }
 
+:root,
+[data#{$data-infix}theme="light"] {
+  --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
+  --#{$prefix}carousel-caption-color: #{$carousel-caption-color};
+  --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
+}
+
 @if $enable-dark-mode {
-  @include color-mode(dark) {
-    @if $color-mode-type == "media-query" {
-      .carousel {
-        @include carousel-dark();
-      }
-    } @else {
-      .carousel,
-      &.carousel {
-        @include carousel-dark();
-      }
-    }
+  @include color-mode(dark, true) {
+    @include carousel-dark();
   }
 }

package/scss/_close.scss

@@ -2,6 +2,7 @@
 @use "mixins/border-radius" as *;
 @use "mixins/color-mode" as *;
 @use "variables" as *;
+@use "variables-dark" as *;
 
 // Transparent background and border properties included for button version.
 // iOS requires the button element instead of an anchor tag.
@@ -17,7 +18,6 @@
   --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
   --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
   --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
-  --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
   // scss-docs-end close-css-vars
 
   box-sizing: content-box;
@@ -26,6 +26,7 @@
   padding: $btn-close-padding-y $btn-close-padding-x;
   color: var(--#{$prefix}btn-close-color);
   background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
+  filter: var(--#{$prefix}btn-close-filter);
   border: 0; // for button elements
   @include border-radius();
   opacity: var(--#{$prefix}btn-close-opacity);
@@ -52,18 +53,20 @@
 }
 
 @mixin btn-close-white() {
-  filter: var(--#{$prefix}btn-close-white-filter);
+  --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
 }
 
-.btn-close[data#{$data-infix}theme="dark"],
 .btn-close-white {
   @include btn-close-white();
 }
 
+:root,
+[data#{$data-infix}theme="light"] {
+  --#{$prefix}btn-close-filter: #{$btn-close-filter};
+}
+
 @if $enable-dark-mode {
-  @include color-mode(dark) {
-    .btn-close {
-      @include btn-close-white();
-    }
+  @include color-mode(dark, true) {
+    @include btn-close-white();
   }
 }

package/scss/_header.scss

@@ -75,7 +75,7 @@
 .header-divider {
   flex-basis: calc(100% + (2 * var(--#{$prefix}header-padding-x))); // stylelint-disable-line function-disallowed-list
   height: 0;
-  margin: var(--#{$prefix}header-padding-y) calc(var(--#{$prefix}header-padding-x) * -1); // stylelint-disable-line function-disallowed-list
+  margin: var(--#{$prefix}header-padding-y) calc(-1 * var(--#{$prefix}header-padding-x)); // stylelint-disable-line function-disallowed-list
   border-top: var(--#{$prefix}header-divider-border);
 }
 

package/scss/_list-group.scss

@@ -48,31 +48,6 @@
   }
 }
 
-// Interactive list items
-//
-// Use anchor or button elements instead of `li`s or `div`s to create interactive
-// list items. Includes an extra `.active` modifier class for selected items.
-
-.list-group-item-action {
-  width: 100%; // For `<button>`s (anchors become 100% by default though)
-  color: var(--#{$prefix}list-group-action-color);
-  text-align: inherit; // For `<button>`s (anchors inherit)
-
-  // Hover state
-  &:hover,
-  &:focus {
-    z-index: 1; // Place hover/focus items above their siblings for proper border styling
-    color: var(--#{$prefix}list-group-action-hover-color);
-    text-decoration: none;
-    background-color: var(--#{$prefix}list-group-action-hover-bg);
-  }
-
-  &:active {
-    color: var(--#{$prefix}list-group-action-active-color);
-    background-color: var(--#{$prefix}list-group-action-active-bg);
-  }
-}
-
 // Individual list items
 //
 // Use on `li`s or `div`s within the `.list-group` parent.
@@ -120,6 +95,33 @@
   }
 }
 
+// Interactive list items
+//
+// Use anchor or button elements instead of `li`s or `div`s to create interactive
+// list items. Includes an extra `.active` modifier class for selected items.
+
+.list-group-item-action {
+  width: 100%; // For `<button>`s (anchors become 100% by default though)
+  color: var(--#{$prefix}list-group-action-color);
+  text-align: inherit; // For `<button>`s (anchors inherit)
+
+  &:not(.active) {
+    // Hover state
+    &:hover,
+    &:focus {
+      z-index: 1; // Place hover/focus items above their siblings for proper border styling
+      color: var(--#{$prefix}list-group-action-hover-color);
+      text-decoration: none;
+      background-color: var(--#{$prefix}list-group-action-hover-bg);
+    }
+
+    &:active {
+      color: var(--#{$prefix}list-group-action-active-color);
+      background-color: var(--#{$prefix}list-group-action-active-bg);
+    }
+  }
+}
+
 // Horizontal
 //
 // Change the layout of list group items from vertical (default) to horizontal.

package/scss/_modal.scss

@@ -139,7 +139,8 @@
 
   .btn-close {
     padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
-    margin-inline: auto calc(-.5 * var(--#{$prefix}modal-header-padding-x));
+    margin-inline-start: auto;
+    margin-inline-end: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
     margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
     margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
   }

package/scss/_offcanvas.scss

@@ -134,7 +134,8 @@
 
   .btn-close {
     padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
-    margin-inline: auto calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
+    margin-inline-start: auto;
+    margin-inline-end: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
     margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
     margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
   }

package/scss/_pagination.scss

@@ -83,7 +83,7 @@
     margin-inline-start: $pagination-margin-start;
   }
 
-  @if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
+  @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
     &:first-child {
       .page-link {
         @include border-start-radius(var(--#{$prefix}pagination-border-radius));

package/scss/_progress.scss

@@ -10,7 +10,7 @@
 // scss-docs-start progress-keyframes
 @if $enable-transitions {
   @keyframes progress-bar-stripes {
-    0% { background-position-x: $progress-height; }
+    0% { background-position-x: var(--#{$prefix}progress-height); }
   }
 }
 // scss-docs-end progress-keyframes

package/scss/_variables-dark.scss

@@ -146,4 +146,20 @@ $accordion-icon-active-color-dark:  $primary-text-emphasis-dark !default;
 
 $accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
 $accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
+
+
+//
+// Carousel
+//
+
+$carousel-indicator-active-bg-dark:   $carousel-dark-indicator-active-bg !default;
+$carousel-caption-color-dark:         $carousel-dark-caption-color !default;
+$carousel-control-icon-filter-dark:   $carousel-dark-control-icon-filter !default;
+
+
+//
+// Close button
+//
+
+$btn-close-filter-dark:             $btn-close-white-filter !default;
 // scss-docs-end sass-dark-mode-vars

package/scss/_variables.scss

@@ -87,7 +87,7 @@ $colors: (
 ) !default;
 // scss-docs-end colors-map
 
-// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.2 are 3, 4.5 and 7.
 // See https://www.w3.org/TR/WCAG/#contrast-minimum
 $min-contrast-ratio:   4.5 !default;
 
@@ -1379,7 +1379,7 @@ $pagination-color:                  var(--#{$prefix}link-color) !default;
 $pagination-bg:                     var(--#{$prefix}body-bg) !default;
 $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
 $pagination-border-width:           var(--#{$prefix}border-width) !default;
-$pagination-margin-start:           calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
+$pagination-margin-start:           calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list
 $pagination-border-color:           var(--#{$prefix}border-color) !default;
 
 $pagination-focus-color:            var(--#{$prefix}link-hover-color) !default;
@@ -1588,7 +1588,7 @@ $modal-dialog-margin-y-sm-up:       1.75rem !default;
 
 $modal-title-line-height:           $line-height-base !default;
 
-$modal-content-color:               null !default;
+$modal-content-color:               var(--#{$prefix}body-color) !default;
 $modal-content-bg:                  var(--#{$prefix}body-bg) !default;
 $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
@@ -1854,6 +1854,7 @@ $carousel-control-width:             15% !default;
 $carousel-control-opacity:           .5 !default;
 $carousel-control-hover-opacity:     .9 !default;
 $carousel-control-transition:        opacity .15s ease !default;
+$carousel-control-icon-filter:       null !default;
 
 $carousel-indicator-width:           30px !default;
 $carousel-indicator-height:          3px !default;
@@ -1879,9 +1880,9 @@ $carousel-transition:                transform $carousel-transition-duration eas
 // scss-docs-end carousel-variables
 
 // scss-docs-start carousel-dark-variables
-$carousel-dark-indicator-active-bg:  $black !default;
-$carousel-dark-caption-color:        $black !default;
-$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;
+$carousel-dark-indicator-active-bg:  $black !default; // Deprecated in v5.3.2
+$carousel-dark-caption-color:        $black !default; // Deprecated in v5.3.2
+$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default; // Deprecated in v5.3.2
 // scss-docs-end carousel-dark-variables
 
 // scss-docs-start sidebar-variables
@@ -2031,7 +2032,8 @@ $btn-close-opacity:          .5 !default;
 $btn-close-hover-opacity:    .75 !default;
 $btn-close-focus-opacity:    1 !default;
 $btn-close-disabled-opacity: .25 !default;
-$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;
+$btn-close-filter:           null !default;
+$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.2
 // scss-docs-end close-variables
 
 

package/scss/forms/_floating-labels.scss

@@ -53,6 +53,7 @@
   }
 
   > .form-select {
+    padding-inline-start: $form-floating-padding-x;
     padding-top: $form-floating-input-padding-t;
     padding-bottom: $form-floating-input-padding-b;
   }

package/scss/forms/_input-group.scss

@@ -127,7 +127,7 @@
   }
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    margin-inline-start: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-inline-start: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
     @include border-start-radius(0);
   }
 

package/scss/sidebar/_sidebar-nav.scss

@@ -259,7 +259,7 @@
     }
 
     .nav-icon {
-      margin-inline-start: calc((var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin)) * -1); // stylelint-disable-line function-disallowed-list
+      margin-inline-start: calc(-1 * (var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin))); // stylelint-disable-line function-disallowed-list
     }
   }