@coreui/coreui 5.0.0-alpha.0 → 5.0.0-alpha.2

package/js/src/util/swipe.js

@@ -1,15 +1,15 @@
 /**
  * --------------------------------------------------------------------------
- * CoreUI (__COREUI_VERSION__): util/swipe.js
+ * CoreUI util/swipe.js
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  *
- * This component is a modified version of the Bootstrap's util/swipe.js
+ * This is a modified version of the Bootstrap's util/swipe.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
-import Config from './config.js'
 import EventHandler from '../dom/event-handler.js'
+import Config from './config.js'
 import { execute } from './index.js'
 
 /**

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

@@ -1,18 +1,17 @@
-
 /**
  * --------------------------------------------------------------------------
- * CoreUI (__COREUI_VERSION__): util/template-factory.js
+ * CoreUI util/template-factory.js
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  *
- * This component is a modified version of the Bootstrap's util/template-factory.js
+ * This is a modified version of the Bootstrap's util/template-factory.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
 
-import { DefaultAllowlist, sanitizeHtml } from './sanitizer.js'
-import { execute, getElement, isElement } from './index.js'
 import SelectorEngine from '../dom/selector-engine.js'
 import Config from './config.js'
+import { DefaultAllowlist, sanitizeHtml } from './sanitizer.js'
+import { execute, getElement, isElement } from './index.js'
 
 /**
  * Constants

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.0.0-alpha.0",
+  "version": "5.0.0-alpha.2",
   "config": {
     "version_short": "5.0"
   },
@@ -19,11 +19,10 @@
   "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.js --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.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 --rd",
+    "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
     "css-lint-vars": "fusv scss/ docs/assets/scss/",
     "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
     "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
@@ -37,7 +36,7 @@
     "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.js --sourcemap",
     "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
     "js-compile-plugins": "node build/build-plugins.js",
-    "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives --ext .html,.js .",
+    "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives --ext .html,.js,.md .",
     "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",
@@ -51,23 +50,22 @@
     "js-test-jquery": "cross-env JQUERY=true npm run js-test-karma",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint",
     "docs": "npm-run-all docs-build docs-lint",
-    "docs-build": "hugo --cleanDestinationDir",
+    "docs-build": "hugo --cleanDestinationDir --printUnusedTemplates",
     "docs-compile": "npm run docs-build",
     "docs-vnu": "node build/vnu-jar.js",
     "docs-lint": "npm run docs-vnu",
-    "docs-serve": "hugo server --port 9001 --disableFastRender",
+    "docs-serve": "hugo server --port 9001 --disableFastRender --printUnusedTemplates",
     "docs-serve-only": "npx sirv-cli _gh_pages --port 9001",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
-    "update-deps": "ncu -u -x globby,karma-browserstack-launcher,karma-rollup-preprocessor,terser && echo Manually update docs/assets/js/vendor",
+    "update-deps": "ncu -u -x globby,jasmine,karma-browserstack-launcher,karma-rollup-preprocessor,terser && echo Manually update docs/assets/js/vendor",
     "release": "npm-run-all dist release-sri docs-build release-zip*",
     "release-sri": "node build/generate-sri.js",
     "release-version": "node build/change-version.js",
-    "release-zip": "cross-env-shell \"rm -rf coreui-$npm_package_version-dist && cp -r dist/ coreui-$npm_package_version-dist && zip -r9 coreui-$npm_package_version-dist.zip coreui-$npm_package_version-dist && rm -rf coreui-$npm_package_version-dist\"",
+    "release-zip": "cross-env-shell \"rm -rf coreui-$npm_package_version-dist coreui-$npm_package_version-dist.zip && cp -r dist/ coreui-$npm_package_version-dist && zip -qr9 coreui-$npm_package_version-dist.zip coreui-$npm_package_version-dist && rm -rf coreui-$npm_package_version-dist\"",
     "dist": "npm-run-all --aggregate-output --parallel css js",
     "test": "npm-run-all lint dist js-test docs-build docs-lint",
     "watch": "npm-run-all --parallel watch-*",
     "watch-css-main": "nodemon --watch scss/ --ext scss --exec \"npm-run-all css-lint css-compile css-prefix\"",
-    "watch-css-dist": "nodemon --watch dist/css/ --ext css --ignore \"dist/css/*.rtl.*\" --exec \"npm run css-rtl\"",
     "watch-css-docs": "nodemon --watch docs/assets/scss/ --ext scss --exec \"npm run css-lint\"",
     "watch-css-test": "nodemon --watch scss/ --ext scss,js --exec \"npm run css-test\"",
     "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",
@@ -84,63 +82,74 @@
   "bugs": {
     "url": "https://github.com/coreui/coreui/issues"
   },
+  "funding": [
+    {
+      "type": "opencollective",
+      "url": "https://opencollective.com/coreui"
+    }
+  ],
   "license": "MIT",
   "peerDependencies": {
-    "@popperjs/core": "^2.11.6"
+    "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@babel/cli": "^7.20.7",
-    "@babel/core": "^7.20.7",
-    "@babel/preset-env": "^7.20.2",
-    "@popperjs/core": "^2.11.6",
+    "@babel/cli": "^7.22.9",
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@popperjs/core": "^2.11.8",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^24.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-replace": "^5.0.2",
-    "autoprefixer": "^10.4.12",
+    "autoprefixer": "^10.4.14",
     "bundlewatch": "^0.3.3",
-    "clean-css-cli": "^5.6.1",
+    "clean-css-cli": "^5.6.2",
     "cross-env": "^7.0.3",
-    "eslint": "^8.30.0",
+    "eslint": "^8.45.0",
     "eslint-config-xo": "^0.43.1",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-markdown": "^3.0.0",
-    "eslint-plugin-unicorn": "^45.0.2",
-    "find-unused-sass-variables": "^4.0.5",
+    "eslint-plugin-unicorn": "^48.0.1",
+    "find-unused-sass-variables": "^5.0.0",
     "globby": "^11.1.0",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.97.0",
+    "hugo-bin": "^0.111.4",
     "ip": "^2.0.0",
-    "jquery": "^3.6.3",
-    "karma": "^6.4.1",
-    "karma-browserstack-launcher": "1.4.0",
-    "karma-chrome-launcher": "^3.1.1",
+    "jasmine": "^4.6.0",
+    "jquery": "^3.7.0",
+    "karma": "^6.4.2",
+    "karma-browserstack-launcher": "1.6.0",
+    "karma-chrome-launcher": "^3.2.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-detect-browsers": "^2.3.3",
     "karma-firefox-launcher": "^2.1.2",
     "karma-jasmine": "^5.1.0",
-    "karma-jasmine-html-reporter": "^2.0.0",
-    "karma-rollup-preprocessor": "7.0.7",
-    "lockfile-lint": "^4.9.6",
-    "nodemon": "^2.0.20",
+    "karma-jasmine-html-reporter": "^2.1.0",
+    "karma-rollup-preprocessor": "7.0.8",
+    "lockfile-lint": "^4.10.6",
+    "nodemon": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.20",
+    "postcss": "^8.4.27",
     "postcss-cli": "^10.1.0",
-    "rollup": "^3.8.1",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "rollup": "^3.26.3",
     "rollup-plugin-istanbul": "^4.0.0",
-    "rtlcss": "^4.0.0",
-    "sass": "^1.57.1",
+    "rtlcss": "^4.1.0",
+    "sass": "^1.64.1",
+    "sass-true": "^7.0.0",
     "shelljs": "^0.8.5",
-    "stylelint": "^14.16.0",
-    "stylelint-config-twbs-bootstrap": "^7.0.0",
-    "terser": "5.16.0",
-    "vnu-jar": "22.9.29"
+    "stylelint": "^15.10.2",
+    "stylelint-config-twbs-bootstrap": "^11.0.1",
+    "terser": "5.19.2",
+    "vnu-jar": "23.4.11"
   },
   "files": [
     "dist/{css,js}/*.{css,js,map}",
     "js/{src,dist}/**/*.{js,map}",
-    "scss/**/*.scss"
+    "js/index.{esm,umd}.js",
+    "scss/**/*.scss",
+    "!scss/tests/**"
   ],
   "hugo-bin": {
     "buildTags": "extended"
@@ -160,10 +169,7 @@
     },
     "dependencies": {},
     "peerDependencies": {
-      "@popperjs/core": "^2.11.6"
+      "@popperjs/core": "^2.11.8"
     }
-  },
-  "dependencies": {
-    "postcss-combine-duplicated-selectors": "^10.0.3"
   }
 }

package/scss/_alert.scss

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

package/scss/_avatar.scss

@@ -17,7 +17,7 @@
 
 .avatar-status {
   position: absolute;
-  right: 0;
+  @include ltr-rtl("right", 0);
   bottom: 0;
   display: block;
   border: 1px solid $white;
@@ -34,16 +34,16 @@
   display: flex;
 
   .avatar {
-    margin-right: - ($avatar-width * .4);
+    @include ltr-rtl("margin-right", - ($avatar-width * .4));
 
     &:hover {
-      margin-right: 0;
+      @include ltr-rtl("margin-right", 0);
     }
   }
 
   @each $width, $value in $avatar-widths {
     .avatar-#{$width} {
-      margin-right: - ($value * .4);
+      @include ltr-rtl("margin-right", - ($value * .4));
     }
   }
 }

package/scss/_badge.scss

@@ -22,7 +22,7 @@
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  @include border-radius(var(--#{$prefix}badge-border-radius));
+  border-radius: var(--#{$prefix}badge-border-radius, 0); // stylelint-disable-line property-disallowed-list
   @include gradient-bg();
 
   // Empty badges collapse automatically
@@ -36,3 +36,13 @@
   position: relative;
   top: -1px;
 }
+
+//
+// Badge Sizes
+//
+
+.badge-sm {
+  --#{$prefix}badge-padding-x: #{$badge-padding-x-sm};
+  --#{$prefix}badge-padding-y: #{$badge-padding-y-sm};
+  @include font-size($badge-font-size-sm);
+}

package/scss/_breadcrumb.scss

@@ -24,13 +24,18 @@
 .breadcrumb-item {
   // The separator between breadcrumbs (by default, a forward-slash: "/")
   + .breadcrumb-item {
-    padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
+    @include ltr-rtl("padding-left",  var(--#{$prefix}breadcrumb-item-padding-x));
 
     &::before {
-      float: left; // Suppress inline spacings and underlining of the separator
-      padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
+      @include ltr-rtl("float", left); // Suppress inline spacings and underlining of the separator
+      @include ltr-rtl("padding-right", var(--#{$prefix}breadcrumb-item-padding-x));
       color: var(--#{$prefix}breadcrumb-divider-color);
-      content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+      @include ltr-rtl(
+        "content",
+        var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)),
+        null,
+        var(--#{$prefix}breadcrumb-divider-flipped, escape-svg($breadcrumb-divider-flipped))
+      );
     }
   }
 

package/scss/_button-group.scss

@@ -39,7 +39,7 @@
   // Prevent double borders when buttons are next to each other
   > :not(.btn-check:first-child) + .btn,
   > .btn-group:not(:first-child) {
-    margin-left: calc($btn-border-width * -1); // stylelint-disable-line function-disallowed-list
+    @include ltr-rtl("margin-left", calc(#{$btn-border-width} * -1));
   }
 
   // Reset rounded corners
@@ -79,11 +79,11 @@
   &::after,
   .dropup &::after,
   .dropend &::after {
-    margin-left: 0;
+    @include ltr-rtl("margin-left", 0);
   }
 
   .dropstart &::before {
-    margin-right: 0;
+    @include ltr-rtl("margin-right", 0);
   }
 }
 
@@ -126,7 +126,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(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners

package/scss/_buttons.scss

@@ -10,7 +10,7 @@
   @include rfs($btn-font-size, --#{$prefix}btn-font-size);
   --#{$prefix}btn-font-weight: #{$btn-font-weight};
   --#{$prefix}btn-line-height: #{$btn-line-height};
-  --#{$prefix}btn-color: #{$body-color};
+  --#{$prefix}btn-color: #{$btn-color};
   --#{$prefix}btn-bg: transparent;
   --#{$prefix}btn-border-width: #{$btn-border-width};
   --#{$prefix}btn-border-color: transparent;
@@ -118,83 +118,33 @@
 // Alternate buttons
 //
 
-// scss-docs-start btn-variant-loops
-@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);
-    }
-  }
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    @each $color, $value in $theme-colors-dark {
-      .btn-#{$color} {
-        @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)
-        );
-      }
-    }
-  }
-}
-
-@each $color, $value in $theme-colors {
-  .btn-outline-#{$color} {
-    @include button-outline-variant($value);
-  }
+.btn-transparent {
+  --#{$prefix}btn-active-border-color: transparent;
+  --#{$prefix}btn-disabled-border-color: transparent;
+  --#{$prefix}btn-hover-border-color: transparent;
 }
 
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    @each $color, $value in $theme-colors-dark {
-      .btn-outline-#{$color} {
-        @include button-outline-variant($value);
-      }
-    }
+// 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-ghost-#{$color} {
-    @include button-ghost-variant($value);
+@each $state, $variant in $button-outline-ghost-variants {
+  .btn-outline-#{$state} {
+    @include button-outline-variant($variant);
   }
 }
 
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    @each $color, $value in $theme-colors-dark {
-      .btn-ghost-#{$color} {
-        @include button-ghost-variant($value);
-      }
-    }
+@each $state, $variant in $button-outline-ghost-variants {
+  .btn-ghost-#{$state} {
+    @include button-ghost-variant($variant);
   }
 }
 // scss-docs-end btn-variant-loops
 
+
 //
 // Link buttons
 //
@@ -207,7 +157,6 @@
   --#{$prefix}btn-border-color: transparent;
   --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
   --#{$prefix}btn-hover-border-color: transparent;
-  --#{$prefix}btn-active-color: #{$btn-link-hover-color};
   --#{$prefix}btn-active-border-color: transparent;
   --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
   --#{$prefix}btn-disabled-border-color: transparent;
@@ -228,10 +177,6 @@
     color: var(--#{$prefix}btn-color);
   }
 
-  &:hover {
-    color: var(--#{$prefix}btn-hover-color);
-  }
-
   // No need for an active state here
 }
 
@@ -247,3 +192,25 @@
 .btn-sm {
   @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    @each $state, $variant in $button-variants-dark {
+      .btn-#{$state} {
+        @include button-variant($variant);
+      }
+    }
+
+    @each $state, $variant in $button-outline-ghost-variants-dark {
+      .btn-outline-#{$state} {
+        @include button-outline-variant($variant);
+      }
+    }
+
+    @each $state, $variant in $button-outline-ghost-variants-dark {
+      .btn-ghost-#{$state} {
+        @include button-ghost-variant($variant);
+      }
+    }
+  }
+}

package/scss/_callout.scss

@@ -13,8 +13,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);
-  border-left-color: var(--#{$prefix}callout-border-left-color);
-  border-left-width: var(--#{$prefix}callout-border-left-width);
+  @include ltr-rtl("border-left-width", var(--#{$prefix}callout-border-left-width));
+  @include ltr-rtl("border-left-color", var(--#{$prefix}callout-border-left-color));
   @include border-radius(var(--#{$prefix}callout-border-radius));
 }
 

package/scss/_card.scss

@@ -30,6 +30,7 @@
   flex-direction: column;
   min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
   height: var(--#{$prefix}card-height);
+  color: var(--#{$prefix}body-color);
   word-wrap: break-word;
   background-color: var(--#{$prefix}card-bg);
   background-clip: border-box;
@@ -94,7 +95,7 @@
   }
 
   + .card-link {
-    margin-left: var(--#{$prefix}card-spacer-x);
+    @include ltr-rtl("margin-left", var(--#{$prefix}card-spacer-x));
   }
 }
 
@@ -197,8 +198,8 @@
       margin-bottom: 0;
 
       + .card {
-        margin-left: 0;
-        border-left: 0;
+        @include ltr-rtl("margin-left", 0);
+        @include ltr-rtl("border-left", 0);
       }
 
       // Handle rounded corners

package/scss/_carousel.scss

@@ -165,7 +165,6 @@
   margin-right: $carousel-control-width;
   margin-bottom: 1rem;
   margin-left: $carousel-control-width;
-  list-style: none;
 
   [data-coreui-target] {
     box-sizing: content-box;
@@ -231,8 +230,15 @@
 
 @if $enable-dark-mode {
   @include color-mode(dark) {
-    .carousel {
-      @include carousel-dark();
+    @if $color-mode-type == "media-query" {
+      .carousel {
+        @include carousel-dark();
+      }
+    } @else {
+      .carousel,
+      &.carousel {
+        @include carousel-dark();
+      }
     }
   }
 }

package/scss/_close.scss

@@ -4,6 +4,7 @@
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
 .btn-close {
+  // scss-docs-start close-css-vars
   --#{$prefix}btn-close-color: #{$btn-close-color};
   --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
   --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
@@ -12,6 +13,7 @@
   --#{$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;
   width: $btn-close-width;
@@ -48,6 +50,7 @@
   filter: var(--#{$prefix}btn-close-white-filter);
 }
 
+.btn-close[data-coreui-theme="dark"],
 .btn-close-white {
   @include btn-close-white();
 }