@coreui/coreui 5.2.0 → 5.3.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "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.2.0",
+  "version": "5.3.0",
   "config": {
-    "version_short": "5.2"
+    "version_short": "5.3"
   },
   "keywords": [
     "css",
@@ -19,9 +19,8 @@
   "scripts": {
     "start": "npm-run-all --parallel watch docs-serve",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
-    "css": "npm-run-all css-compile css-prefix css-rtl css-minify",
+    "css": "npm-run-all css-compile css-prefix css-minify",
     "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/",
-    "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css/themes/bootstrap/\" --ext \".rtl.css\" \"dist/css/themes/bootstrap/*.css\" \"!dist/css/themes/bootstrap/*.min.css\" \"!dist/css/themes/bootstrap/*.rtl.css\"",
     "css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
     "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
     "css-lint-vars": "fusv scss/ docs/assets/scss/",
@@ -40,7 +39,7 @@
     "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.mjs --sourcemap",
     "js-compile-bundle-bootstrap": "rollup --environment BOOTSTRAP:true,BUNDLE:true --config build/rollup.config.mjs --sourcemap",
     "js-compile-plugins": "node build/build-plugins.mjs",
-    "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives --ext .html,.js,.mjs,.md .",
+    "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives",
     "js-minify": "npm-run-all --aggregate-output --parallel js-minify-*",
     "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui.js.map,includeSources,url=coreui.min.js.map\" --output dist/js/coreui.min.js dist/js/coreui.js",
     "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui.esm.js.map,includeSources,url=coreui.esm.min.js.map\" --output dist/js/coreui.esm.min.js dist/js/coreui.esm.js",
@@ -100,33 +99,35 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@babel/cli": "^7.25.9",
-    "@babel/core": "^7.26.0",
-    "@babel/preset-env": "^7.26.0",
-    "@docsearch/js": "^3.6.2",
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.8",
+    "@babel/preset-env": "^7.26.8",
+    "@docsearch/js": "^3.8.3",
+    "@eslint/markdown": "^6.2.2",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-replace": "^6.0.1",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@stackblitz/sdk": "^1.11.0",
     "autoprefixer": "^10.4.20",
     "bootstrap": "^5.3.3",
     "bundlewatch": "^0.4.0",
     "clean-css-cli": "^5.6.3",
     "clipboard": "^2.0.11",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
-    "eslint-config-xo": "^0.45.0",
+    "eslint": "^9.20.1",
+    "eslint-config-xo": "^0.46.0",
     "eslint-plugin-html": "^8.1.2",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-markdown": "^5.1.0",
-    "eslint-plugin-unicorn": "^55.0.0",
+    "eslint-plugin-unicorn": "^56.0.1",
     "find-unused-sass-variables": "^6.0.0",
-    "globby": "^14.0.2",
+    "globals": "^15.15.0",
+    "globby": "^14.1.0",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.133.5",
+    "hugo-bin": "^0.140.1",
     "ip": "^2.0.1",
-    "jasmine": "^5.4.0",
+    "jasmine": "^5.6.0",
     "jquery": "^3.7.1",
     "karma": "^6.4.4",
     "karma-browserstack-launcher": "1.6.0",
@@ -138,20 +139,19 @@
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-rollup-preprocessor": "7.0.8",
     "lockfile-lint": "^4.14.0",
-    "nodemon": "^3.1.7",
+    "nodemon": "^3.1.9",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.47",
+    "postcss": "^8.5.2",
     "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
-    "rollup": "^4.24.1",
+    "rollup": "^4.34.6",
     "rollup-plugin-istanbul": "^5.0.0",
-    "rtlcss": "^4.3.0",
-    "sass": "1.78.0",
+    "sass-embedded": "^1.83.4",
     "sass-true": "^8.1.0",
     "shelljs": "^0.8.5",
-    "stylelint": "^16.10.0",
+    "stylelint": "^16.14.1",
     "stylelint-config-twbs-bootstrap": "^15.1.0",
-    "terser": "5.36.0",
+    "terser": "5.39.0",
     "vnu-jar": "24.10.17"
   },
   "files": [
@@ -161,9 +161,6 @@
     "scss/**/*.scss",
     "!scss/tests/**"
   ],
-  "hugo-bin": {
-    "buildTags": "extended"
-  },
   "jspm": {
     "registry": "npm",
     "main": "js/coreui",

package/scss/_accordion.import.scss

@@ -0,0 +1 @@
+@forward "accordion";

package/scss/_accordion.scss

@@ -1,3 +1,11 @@
+@use "functions/escape-svg" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/color-mode" as *;
+@use "mixins/transition" as *;
+@use "vendor/rfs" as *;
+@use "variables" as *;
+@use "variables-dark" as *;
+
 //
 // Base styles
 //
@@ -36,7 +44,7 @@
   padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
   @include font-size($font-size-base);
   color: var(--#{$prefix}accordion-btn-color);
-  @include ltr-rtl("text-align", left); // Reset button style
+  text-align: start; // Reset button style
   background-color: var(--#{$prefix}accordion-btn-bg);
   border: 0;
   @include border-radius(0);
@@ -59,7 +67,7 @@
     flex-shrink: 0;
     width: var(--#{$prefix}accordion-btn-icon-width);
     height: var(--#{$prefix}accordion-btn-icon-width);
-    @include ltr-rtl("margin-left", auto);
+    margin-inline-start: auto;
     content: "";
     background-image: var(--#{$prefix}accordion-btn-icon);
     background-repeat: no-repeat;

package/scss/_alert.import.scss

@@ -0,0 +1 @@
+@forward "alert";

package/scss/_alert.scss

@@ -1,3 +1,7 @@
+@use "sass:map";
+@use "mixins/border-radius" as *;
+@use "variables" as *;
+
 //
 // Base styles
 //
@@ -42,13 +46,13 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
-  @include ltr-rtl("padding-right", $alert-dismissible-padding-r);
+  padding-inline-end: $alert-dismissible-padding-r;
 
   // Adjust close link position
   .btn-close {
     position: absolute;
+    inset-inline-end: 0;
     top: 0;
-    @include ltr-rtl("right", 0);
     z-index: $stretched-link-z-index + 1;
     padding: $alert-padding-y * 1.25 $alert-padding-x;
   }
@@ -57,7 +61,7 @@
 
 // scss-docs-start alert-modifiers
 // Generate contextual modifier classes for colorizing the alert.
-@each $state in map-keys($theme-colors) {
+@each $state in map.keys($theme-colors) {
   .alert-#{$state} {
     --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
     --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);

package/scss/_avatar.import.scss

@@ -0,0 +1 @@
+@forward "avatar";

package/scss/_avatar.scss

@@ -1,3 +1,8 @@
+@use "sass:map";
+@use "mixins/border-radius" as *;
+@use "mixins/transition" as *;
+@use "variables" as *;
+
 .avatar {
   // scss-docs-start avatar-css-vars
   --#{$prefix}avatar-width: #{$avatar-width};
@@ -29,7 +34,7 @@
 
 .avatar-status {
   position: absolute;
-  @include ltr-rtl("right", 0);
+  inset-inline-end: 0;
   bottom: 0;
   display: block;
   width: var(--#{$prefix}avatar-status-width);
@@ -40,11 +45,11 @@
 
 @each $size, $map in $avatar-sizes {
   .avatar-#{$size} {
-    --#{$prefix}avatar-width: #{map-get($map, "width")};
-    --#{$prefix}avatar-height: #{map-get($map, "height")};
-    --#{$prefix}avatar-font-size: #{map-get($map, "font-size")};
-    --#{$prefix}avatar-status-width: #{map-get($map, "status-width")};
-    --#{$prefix}avatar-status-height: #{map-get($map, "status-height")};
+    --#{$prefix}avatar-width: #{map.get($map, "width")};
+    --#{$prefix}avatar-height: #{map.get($map, "height")};
+    --#{$prefix}avatar-font-size: #{map.get($map, "font-size")};
+    --#{$prefix}avatar-status-width: #{map.get($map, "status-width")};
+    --#{$prefix}avatar-status-height: #{map.get($map, "status-height")};
   }
 }
 
@@ -52,10 +57,10 @@
   display: flex;
 
   .avatar {
-    @include ltr-rtl("margin-right", calc(-.4 * var(--#{$prefix}avatar-width)));
+    margin-inline-end: calc(-.4 * var(--#{$prefix}avatar-width)); // stylelint-disable-line function-disallowed-list
 
     &:hover {
-      @include ltr-rtl("margin-right", 0);
+      margin-inline-end: 0;
     }
   }
 }

package/scss/_badge.import.scss

@@ -0,0 +1 @@
+@forward "badge";

package/scss/_badge.scss

@@ -1,3 +1,7 @@
+@use "mixins/gradients" as *;
+@use "vendor/rfs" as *;
+@use "variables" as *;
+
 // Base class
 //
 // Requires one of the contextual, color modifier classes for `color` and

package/scss/_banner.scss

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

package/scss/_breadcrumb.import.scss

@@ -0,0 +1 @@
+@forward "breadcrumb";

package/scss/_breadcrumb.scss

@@ -1,3 +1,9 @@
+@use "functions/escape-svg" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/ltr-rtl" as *;
+@use "vendor/rfs" as *;
+@use "variables" as *;
+
 .breadcrumb {
   // scss-docs-start breadcrumb-css-vars
   --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
@@ -24,11 +30,11 @@
 .breadcrumb-item {
   // The separator between breadcrumbs (by default, a forward-slash: "/")
   + .breadcrumb-item {
-    @include ltr-rtl("padding-left",  var(--#{$prefix}breadcrumb-item-padding-x));
+    padding-inline-start: var(--#{$prefix}breadcrumb-item-padding-x);
 
     &::before {
-      @include ltr-rtl("float", left); // Suppress inline spacings and underlining of the separator
-      @include ltr-rtl("padding-right", var(--#{$prefix}breadcrumb-item-padding-x));
+      float: inline-start; // Suppress inline spacings and underlining of the separator
+      padding-inline-end: var(--#{$prefix}breadcrumb-item-padding-x);
       color: var(--#{$prefix}breadcrumb-divider-color);
       @include ltr-rtl(
         "content",

package/scss/_button-group.import.scss

@@ -0,0 +1 @@
+@forward "button-group";

package/scss/_button-group.scss

@@ -1,3 +1,7 @@
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "variables" as *;
+
 // Make the div behave like a button
 .btn-group,
 .btn-group-vertical {
@@ -39,7 +43,7 @@
   // Prevent double borders when buttons are next to each other
   > :not(.btn-check:first-child) + .btn,
   > .btn-group:not(:first-child) {
-    @include ltr-rtl("margin-left", calc(#{$btn-border-width} * -1));
+    margin-inline-start: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners
@@ -79,11 +83,11 @@
   &::after,
   .dropup &::after,
   .dropend &::after {
-    @include ltr-rtl("margin-left", 0);
+    margin-inline-start: 0;
   }
 
   .dropstart &::before {
-    @include ltr-rtl("margin-right", 0);
+    margin-inline-end: 0;
   }
 }
 

package/scss/_buttons.import.scss

@@ -0,0 +1 @@
+@forward "buttons";

package/scss/_buttons.scss

@@ -1,3 +1,14 @@
+@use "functions/color" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/buttons" as *;
+@use "mixins/color-mode" as *;
+@use "mixins/gradients" as *;
+@use "mixins/transition" as *;
+@use "vendor/rfs" as *;
+@use "variables" as *;
+@use "variables-dark" as *;
+
 //
 // Base styles
 //
@@ -134,21 +145,41 @@
 }
 
 // scss-docs-start btn-variant-loops
-@each $state, $variant in $button-variants {
-  .btn-#{$state} {
-    @include button-variant($variant);
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @if $color == "light" {
+      @include button-variant(
+        $value,
+        $value,
+        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+        $active-background: shade-color($value, $btn-active-bg-shade-amount),
+        $active-border: shade-color($value, $btn-active-border-shade-amount)
+      );
+    } @else if $color == "dark" {
+      @include button-variant(
+        $value,
+        $value,
+        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
+        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
+        $active-background: tint-color($value, $btn-active-bg-tint-amount),
+        $active-border: tint-color($value, $btn-active-border-tint-amount)
+      );
+    } @else {
+      @include button-variant($value, $value);
+    }
   }
 }
 
-@each $state, $variant in $button-outline-ghost-variants {
-  .btn-outline-#{$state} {
-    @include button-outline-variant($variant);
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
   }
 }
 
-@each $state, $variant in $button-outline-ghost-variants {
-  .btn-ghost-#{$state} {
-    @include button-ghost-variant($variant);
+@each $color, $value in $theme-colors {
+  .btn-ghost-#{$color} {
+    @include button-ghost-variant($value);
   }
 }
 // scss-docs-end btn-variant-loops
@@ -204,21 +235,21 @@
 
 @if $enable-dark-mode {
   @include color-mode(dark) {
-    @each $state, $variant in $button-variants-dark {
-      .btn-#{$state} {
-        @include button-variant($variant);
+    @each $color, $value in $theme-colors-dark {
+      .btn-#{$color} {
+        @include button-variant($value, $value);
       }
     }
 
-    @each $state, $variant in $button-outline-ghost-variants-dark {
-      .btn-outline-#{$state} {
-        @include button-outline-variant($variant);
+    @each $color, $value in $theme-colors-dark {
+      .btn-outline-#{$color} {
+        @include button-outline-variant($value);
       }
     }
 
-    @each $state, $variant in $button-outline-ghost-variants-dark {
-      .btn-ghost-#{$state} {
-        @include button-ghost-variant($variant);
+    @each $color, $value in $theme-colors-dark {
+      .btn-ghost-#{$color} {
+        @include button-ghost-variant($value);
       }
     }
   }

package/scss/_callout.import.scss

@@ -0,0 +1 @@
+@use "callout";

package/scss/_callout.scss

@@ -1,3 +1,6 @@
+@use "mixins/border-radius" as *;
+@use "variables" as *;
+
 .callout {
   // scss-docs-start callout-css-vars
   --#{$prefix}callout-padding-x: #{$callout-padding-x};
@@ -13,8 +16,8 @@
   padding: var(--#{$prefix}callout-padding-y) var(--#{$prefix}callout-padding-x);
   margin: var(--#{$prefix}callout-margin-y) var(--#{$prefix}callout-margin-x);
   border: var(--#{$prefix}callout-border-width) solid var(--#{$prefix}callout-border-color);
-  @include ltr-rtl("border-left-width", var(--#{$prefix}callout-border-left-width));
-  @include ltr-rtl("border-left-color", var(--#{$prefix}callout-border-left-color));
+  border-inline-start-color: var(--#{$prefix}callout-border-left-color);
+  border-inline-start-width: var(--#{$prefix}callout-border-left-width);
   @include border-radius(var(--#{$prefix}callout-border-radius));
 }
 

package/scss/_card.import.scss

@@ -0,0 +1 @@
+@forward "card";

package/scss/_card.scss

@@ -1,3 +1,8 @@
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/breakpoints" as *;
+@use "variables" as *;
+
 //
 // Base styles
 //
@@ -95,7 +100,7 @@
   }
 
   + .card-link {
-    @include ltr-rtl("margin-left", var(--#{$prefix}card-spacer-x));
+    margin-inline-start: var(--#{$prefix}card-spacer-x);
   }
 }
 
@@ -197,8 +202,8 @@
       margin-bottom: 0;
 
       + .card {
-        @include ltr-rtl("margin-left", 0);
-        @include ltr-rtl("border-left", 0);
+        margin-inline-start: 0;
+        border-inline-start: 0;
       }
 
       // Handle rounded corners

package/scss/_carousel.import.scss

@@ -0,0 +1 @@
+@forward "carousel";

package/scss/_carousel.scss

@@ -1,3 +1,9 @@
+@use "functions/escape-svg" as *;
+@use "mixins/clearfix" as *;
+@use "mixins/color-mode" as *;
+@use "mixins/transition" as *;
+@use "variables" as *;
+
 // Notes on the classes:
 //
 // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
@@ -150,7 +156,7 @@
 // Optional indicator pips/controls
 //
 // Add a container (such as a list) with the following class and add an item (ideally a focusable control,
-// like a button) with data-coreui-target for each slide your carousel holds.
+// like a button) with data#{$data-infix}target for each slide your carousel holds.
 
 .carousel-indicators {
   position: absolute;
@@ -166,7 +172,7 @@
   margin-bottom: 1rem;
   margin-left: $carousel-control-width;
 
-  [data-coreui-target] {
+  [data#{$data-infix}target] {
     box-sizing: content-box;
     flex: 0 1 auto;
     width: $carousel-indicator-width;
@@ -215,7 +221,7 @@
     filter: $carousel-dark-control-icon-filter;
   }
 
-  .carousel-indicators [data-coreui-target] {
+  .carousel-indicators [data#{$data-infix}target] {
     background-color: $carousel-dark-indicator-active-bg;
   }
 

package/scss/_close.import.scss

@@ -0,0 +1 @@
+@forward "close";

package/scss/_close.scss

@@ -1,3 +1,8 @@
+@use "functions/escape-svg" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/color-mode" as *;
+@use "variables" as *;
+
 // Transparent background and border properties included for button version.
 // iOS requires the button element instead of an anchor tag.
 // If you want the anchor version, it requires `href="#"`.
@@ -50,7 +55,7 @@
   filter: var(--#{$prefix}btn-close-white-filter);
 }
 
-.btn-close[data-coreui-theme="dark"],
+.btn-close[data#{$data-infix}theme="dark"],
 .btn-close-white {
   @include btn-close-white();
 }

package/scss/_containers.import.scss

@@ -0,0 +1 @@
+@forward "containers";

package/scss/_containers.scss

@@ -1,3 +1,7 @@
+@use "mixins/breakpoints" as *;
+@use "mixins/container" as *;
+@use "variables" as *;
+
 // Container widths
 //
 // Set the container width, and override it for fixed navbars in media queries.

package/scss/_dropdown.import.scss

@@ -0,0 +1 @@
+@forward "dropdown";