@coreui/coreui 5.0.0-beta.2 → 5.0.0-rc-2

package/js/src/tooltip.js

@@ -12,7 +12,9 @@ import * as Popper from '@popperjs/core'
 import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import Manipulator from './dom/manipulator.js'
-import { defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index.js'
+import {
+  defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop
+} from './util/index.js'
 import { DefaultAllowlist } from './util/sanitizer.js'
 import TemplateFactory from './util/template-factory.js'
 

package/js/src/util/backdrop.js

@@ -10,7 +10,9 @@
 
 import EventHandler from '../dom/event-handler.js'
 import Config from './config.js'
-import { execute, executeAfterTransition, getElement, reflow } from './index.js'
+import {
+  execute, executeAfterTransition, getElement, reflow
+} from './index.js'
 
 /**
  * Constants

package/js/src/util/sanitizer.js

@@ -20,7 +20,10 @@ export const DefaultAllowlist = {
   br: [],
   col: [],
   code: [],
+  dd: [],
   div: [],
+  dl: [],
+  dt: [],
   em: [],
   hr: [],
   h1: [],

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-beta.2",
+  "version": "5.0.0-rc-2",
   "config": {
     "version_short": "5.0"
   },
@@ -19,28 +19,35 @@
   "scripts": {
     "start": "npm-run-all --parallel watch docs-serve",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
-    "css": "npm-run-all css-compile css-prefix css-minify",
+    "css": "npm-run-all css-compile css-prefix css-rtl 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/",
     "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\"",
-    "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
+    "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\"",
+    "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/**/*rtl.css\" \"!dist/css/**/*.min.css\"",
     "css-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*",
-    "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
+    "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/**/*.css\" \"!dist/css/**/*.rtl*.css\" \"!dist/css/**/*.min.css\"",
     "css-test": "jasmine --config=scss/tests/jasmine.js",
     "js": "npm-run-all js-compile js-minify",
     "js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
     "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.mjs --sourcemap",
     "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.mjs --sourcemap",
+    "js-compile-standalone-bootstrap": "rollup --environment BOOTSTRAP:true,BUNDLE:false --config build/rollup.config.mjs --sourcemap",
+    "js-compile-standalone-bootstrap-esm": "rollup --environment ESM:true,BOOTSTRAP:true,BUNDLE:false --config build/rollup.config.mjs --sourcemap",
     "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-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",
     "js-minify-bundle": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui.bundle.js.map,includeSources,url=coreui.bundle.min.js.map\" --output dist/js/coreui.bundle.min.js dist/js/coreui.bundle.js",
+    "js-minify-standalone-bootstrap": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
+    "js-minify-standalone-bootstrap-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.esm.js.map,includeSources,url=bootstrap.esm.min.js.map\" --output dist/js/bootstrap.esm.min.js dist/js/bootstrap.esm.js",
+    "js-minify-bundle-bootstrap": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
     "js-test": "npm-run-all --aggregate-output --parallel js-test-karma js-test-jquery js-test-integration-*",
     "js-debug": "cross-env DEBUG=true npm run js-test-karma",
     "js-test-karma": "karma start js/tests/karma.conf.js",
@@ -93,32 +100,33 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
+    "@babel/cli": "^7.23.9",
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
+    "bootstrap": "^5.3.3",
     "bundlewatch": "^0.3.3",
-    "clean-css-cli": "^5.6.2",
+    "clean-css-cli": "^5.6.3",
     "cross-env": "^7.0.3",
-    "eslint": "^8.53.0",
-    "eslint-config-xo": "^0.43.1",
-    "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint": "^8.57.0",
+    "eslint-config-xo": "^0.44.0",
+    "eslint-plugin-html": "^8.0.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-markdown": "^3.0.1",
-    "eslint-plugin-unicorn": "^49.0.0",
+    "eslint-plugin-unicorn": "^51.0.1",
     "find-unused-sass-variables": "^5.0.0",
     "globby": "^11.1.0",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.116.3",
-    "ip": "^2.0.0",
-    "jasmine": "^4.6.0",
+    "hugo-bin": "^0.120.6",
+    "ip": "^2.0.1",
+    "jasmine": "^5.1.0",
     "jquery": "^3.7.1",
-    "karma": "^6.4.2",
+    "karma": "^6.4.3",
     "karma-browserstack-launcher": "1.6.0",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
@@ -127,21 +135,21 @@
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-rollup-preprocessor": "7.0.8",
-    "lockfile-lint": "^4.12.1",
-    "nodemon": "^3.0.1",
+    "lockfile-lint": "^4.13.2",
+    "nodemon": "^3.1.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.31",
-    "postcss-cli": "^10.1.0",
+    "postcss": "^8.4.35",
+    "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
-    "rollup": "^4.3.0",
+    "rollup": "^4.12.0",
     "rollup-plugin-istanbul": "^5.0.0",
     "rtlcss": "^4.1.1",
-    "sass": "^1.69.5",
-    "sass-true": "^7.0.0",
+    "sass": "^1.71.1",
+    "sass-true": "^7.0.1",
     "shelljs": "^0.8.5",
-    "stylelint": "^15.11.0",
-    "stylelint-config-twbs-bootstrap": "^11.0.1",
-    "terser": "5.24.0",
+    "stylelint": "^16.2.1",
+    "stylelint-config-twbs-bootstrap": "^14.0.0",
+    "terser": "5.28.1",
     "vnu-jar": "23.4.11"
   },
   "files": [

package/scss/_accordion.scss

@@ -20,7 +20,6 @@
   --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
   --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
   --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
-  --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
   --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
   --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
   --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
@@ -37,7 +36,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);
-  text-align: left; // Reset button style
+  @include ltr-rtl("text-align", left); // Reset button style
   background-color: var(--#{$prefix}accordion-btn-bg);
   border: 0;
   @include border-radius(0);
@@ -60,7 +59,7 @@
     flex-shrink: 0;
     width: var(--#{$prefix}accordion-btn-icon-width);
     height: var(--#{$prefix}accordion-btn-icon-width);
-    margin-left: auto;
+    @include ltr-rtl("margin-left", auto);
     content: "";
     background-image: var(--#{$prefix}accordion-btn-icon);
     background-repeat: no-repeat;
@@ -74,7 +73,6 @@
 
   &:focus {
     z-index: 3;
-    border-color: var(--#{$prefix}accordion-btn-focus-border-color);
     outline: 0;
     box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
   }
@@ -92,7 +90,7 @@
   &:first-of-type {
     @include border-top-radius(var(--#{$prefix}accordion-border-radius));
 
-    .accordion-button {
+    > .accordion-header .accordion-button {
       @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
     }
   }
@@ -105,13 +103,13 @@
   &:last-of-type {
     @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
 
-    .accordion-button {
+    > .accordion-header .accordion-button {
       &.collapsed {
         @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
       }
     }
 
-    .accordion-collapse {
+    > .accordion-collapse {
       @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
     }
   }
@@ -127,11 +125,7 @@
 // Remove borders and border-radius to keep accordion items edge-to-edge.
 
 .accordion-flush {
-  .accordion-collapse {
-    border-width: 0;
-  }
-
-  .accordion-item {
+  > .accordion-item {
     border-right: 0;
     border-left: 0;
     @include border-radius(0);
@@ -139,12 +133,18 @@
     &:first-child { border-top: 0; }
     &:last-child { border-bottom: 0; }
 
-    .accordion-button {
+    // stylelint-disable selector-max-class
+    > .accordion-header .accordion-button {
       &,
       &.collapsed {
         @include border-radius(0);
       }
     }
+    // stylelint-enable selector-max-class
+
+    > .accordion-collapse {
+      @include border-radius(0);
+    }
   }
 }
 

package/scss/_buttons.scss

@@ -100,6 +100,15 @@
     }
   }
 
+  .btn-check:checked:focus-visible + & {
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
+    } @else {
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    }
+  }
+  
   &:disabled,
   &.disabled,
   fieldset:disabled & {

package/scss/_dropdown.scss

@@ -54,7 +54,7 @@
   margin: 0; // Override default margin of ul
   @include font-size(var(--#{$prefix}dropdown-font-size));
   color: var(--#{$prefix}dropdown-color);
-  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+  @include ltr-rtl("text-align", left); // Ensures proper alignment if parent has it changed (e.g., modal footer)
   list-style: none;
   background-color: var(--#{$prefix}dropdown-bg);
   background-clip: padding-box;

package/scss/_modal.scss

@@ -126,7 +126,6 @@
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
   padding: var(--#{$prefix}modal-header-padding);
   border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
   @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));

package/scss/_offcanvas.scss

@@ -123,7 +123,6 @@
 .offcanvas-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
 
   .btn-close {

package/scss/_reboot.scss

@@ -350,7 +350,7 @@ caption {
   padding-top: $table-cell-padding-y;
   padding-bottom: $table-cell-padding-y;
   color: var(--#{$prefix}table-caption-color, $table-caption-color);
-  text-align: left;
+  @include ltr-rtl("text-align", left);
 }
 
 // 1. Removes font-weight bold by inheriting

package/scss/_tables.scss

@@ -79,7 +79,7 @@
 //
 // When borders are added on all sides of the cells, the corners can render odd when
 // these borders do not have the same color or if they are semi-transparent.
-// Therefor we add top and border bottoms to the `tr`s and left and right borders
+// Therefore we add top and border bottoms to the `tr`s and left and right borders
 // to the `td`s or `th`s
 
 .table-bordered {

package/scss/_utilities.scss

@@ -109,21 +109,24 @@ $utilities: map-merge(
     "start": (
       property: left,
       class: start,
-      values: $position-values
+      values: $position-values,
+      rtl: true
     ),
     "end": (
       property: right,
       class: end,
-      values: $position-values
+      values: $position-values,
+      rtl: true
     ),
     "translate-middle": (
       property: transform,
       class: translate-middle,
       values: (
-        null: translate(-50%, -50%),
-        x: translateX(-50%),
+        null: ("ltr": translate(-50%, -50%), "rtl": translate(50%, -50%)),
+        x: ("ltr": translateX(-50%), "rtl": translateX(50%)),
         y: translateY(-50%),
-      )
+      ),
+      rtl: true
     ),
     // scss-docs-end utils-position
     // scss-docs-start utils-borders

package/scss/_variables.scss

@@ -1456,7 +1456,9 @@ $accordion-transition:                    $btn-transition, border-radius .15s ea
 $accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle) !default;
 $accordion-button-active-color:           var(--#{$prefix}primary-text-emphasis) !default;
 
-$accordion-button-focus-border-color:     $input-focus-border-color !default;
+// fusv-disable
+$accordion-button-focus-border-color:     $input-focus-border-color !default; // Deprecated in v5.0.0
+// fusv-enable
 $accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
 
 $accordion-icon-width:                    1.25rem !default;
@@ -1465,8 +1467,8 @@ $accordion-icon-active-color:             $primary-text-emphasis !default;
 $accordion-icon-transition:               transform .2s ease-in-out !default;
 $accordion-icon-transform:                rotate(-180deg) !default;
 
-$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><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-.708z'/></svg>") !default;
-$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><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-.708z'/></svg>") !default;
+$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;
+$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;
 // scss-docs-end accordion-variables
 
 // Tooltips
@@ -1896,21 +1898,21 @@ $sidebar-nav-link-icon-bullet-border-width:   1px !default;
 $sidebar-nav-link-icon-bullet-border-color:   var(--#{$prefix}tertiary-color) !default;
 $sidebar-nav-link-icon-bullet-border-radius:  50rem !default;
 
-$sidebar-nav-link-hover-color:                var(--#{$prefix}emphasis-color) !default;
-$sidebar-nav-link-hover-bg:                   var(--#{$prefix}tertiary-bg) !default;
-$sidebar-nav-link-hover-icon-color:           var(--#{$prefix}body-color) !default;
-$sidebar-nav-link-hover-icon-bullet-bg:       transparent !default;
-$sidebar-nav-link-hover-icon-bullet-border-color:   var(--#{$prefix}body-color) !default;
-
-$sidebar-nav-link-active-color:               var(--#{$prefix}emphasis-color) !default;
-$sidebar-nav-link-active-bg:                  var(--#{$prefix}tertiary-bg) !default;
-$sidebar-nav-link-active-icon-color:          var(--#{$prefix}primary) !default;
-$sidebar-nav-link-active-icon-bullet-bg:      transparent !default;
-$sidebar-nav-link-active-icon-bullet-border-color:   var(--#{$prefix}primary) !default;
-
-$sidebar-nav-link-disabled-color:             var(--#{$prefix}tertiary-color) !default;
-$sidebar-nav-link-disabled-icon-color:        var(--#{$prefix}tertiary-color) !default;
-$sidebar-nav-link-disabled-icon-bullet-bg:    transparent !default;
+$sidebar-nav-link-hover-color:                        var(--#{$prefix}emphasis-color) !default;
+$sidebar-nav-link-hover-bg:                           var(--#{$prefix}tertiary-bg) !default;
+$sidebar-nav-link-hover-icon-color:                   var(--#{$prefix}body-color) !default;
+$sidebar-nav-link-hover-icon-bullet-bg:               transparent !default;
+$sidebar-nav-link-hover-icon-bullet-border-color:     var(--#{$prefix}body-color) !default;
+
+$sidebar-nav-link-active-color:                       var(--#{$prefix}emphasis-color) !default;
+$sidebar-nav-link-active-bg:                          var(--#{$prefix}tertiary-bg) !default;
+$sidebar-nav-link-active-icon-color:                  var(--#{$prefix}emphasis-color) !default;
+$sidebar-nav-link-active-icon-bullet-bg:              transparent !default;
+$sidebar-nav-link-active-icon-bullet-border-color:    var(--#{$prefix}emphasis-color) !default;
+
+$sidebar-nav-link-disabled-color:                     var(--#{$prefix}tertiary-color) !default;
+$sidebar-nav-link-disabled-icon-color:                var(--#{$prefix}tertiary-color) !default;
+$sidebar-nav-link-disabled-icon-bullet-bg:            transparent !default;
 $sidebar-nav-link-disabled-icon-bullet-border-color:  var(--#{$prefix}tertiary-color) !default;
 
 $sidebar-nav-group-bg:                        transparent !default;
@@ -2019,3 +2021,5 @@ $kbd-bg:                            var(--#{$prefix}body-color) !default;
 $nested-kbd-font-weight:            null !default; // Deprecated in v4.2.6, removing in v6
 
 $pre-color:                         null !default;
+
+@import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5

package/scss/forms/_form-check.scss

@@ -131,7 +131,7 @@
     @include ltr-rtl("margin-left", $form-switch-padding-start * -1);
     background-image: var(--#{$prefix}form-switch-bg);
     background-position: left center;
-    @include border-radius($form-switch-border-radius);
+    @include border-radius($form-switch-border-radius, 0);
     @include transition($form-switch-transition);
 
     &:focus {

package/scss/mixins/_banner.scss

@@ -1,7 +1,7 @@
 @mixin bsBanner($file) {
   /*!
-   * CoreUI #{$file} v5.0.0-beta.2 (https://coreui.io)
-   * Copyright (c) 2023 creativeLabs Łukasz Holeczek
+   * CoreUI #{$file} v5.0.0-rc-2 (https://coreui.io)
+   * Copyright (c) 2024 creativeLabs Łukasz Holeczek
    * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
    */
 }

package/scss/mixins/_forms.scss

@@ -69,7 +69,12 @@
 
       &:focus {
         border-color: $border-color;
-        box-shadow: $focus-box-shadow;
+        @if $enable-shadows {
+          @include box-shadow($input-box-shadow, $focus-box-shadow);
+        } @else {
+          // Avoid using mixin so we can pass custom focus shadow properly
+          box-shadow: $focus-box-shadow;
+        }
       }
     }
   }
@@ -100,7 +105,12 @@
 
       &:focus {
         border-color: $border-color;
-        box-shadow: $focus-box-shadow;
+        @if $enable-shadows {
+          @include box-shadow($form-select-box-shadow, $focus-box-shadow);
+        } @else {
+          // Avoid using mixin so we can pass custom focus shadow properly
+          box-shadow: $focus-box-shadow;
+        }
       }
     }
   }

package/scss/mixins/_grid.scss

@@ -138,7 +138,7 @@
           }
         }
 
-        // Start with `1` because `0` is and invalid value.
+        // Start with `1` because `0` is an invalid value.
         // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
         @for $i from 1 through ($columns - 1) {
           .g-start#{$infix}-#{$i} {

package/scss/mixins/_reset-text.scss

@@ -4,7 +4,7 @@
   font-style: normal;
   font-weight: $font-weight-normal;
   line-height: $line-height-base;
-  text-align: left; // Fallback for where `start` is not supported
+  @include ltr-rtl("text-align", left); // Fallback for where `start` is not supported
   text-align: start;
   text-decoration: none;
   text-shadow: none;

package/scss/mixins/_utilities.scss

@@ -93,11 +93,14 @@
                 }
               }
               @if $is-rtl == true {
-                @include ltr-rtl($property, $value, null, null, if($enable-important-utilities, !important, null));
+                @if (type-of($value) == "map") {
+                  @include ltr-rtl($property, map-get($value, "ltr"), null, map-get($value, "rtl"), if($enable-important-utilities, !important, null));
+                } @else {
+                  @include ltr-rtl($property, $value, null, null, if($enable-important-utilities, !important, null));
+                }
               } @else {
                 #{$property}: $value if($enable-important-utilities, !important, null);
               }
-
             }
           }
         }

package/scss/sidebar/_sidebar-narrow.scss

@@ -3,11 +3,6 @@
   --#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};
   // scss-docs-end sidebar-narrow-css-vars
 
-  .sidebar-nav {
-    --#{$prefix}sidebar-nav-link-padding-x: #{$sidebar-narrow-nav-link-padding-x};
-    --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-narrow-nav-link-padding-y};
-  }
-
   @include media-breakpoint-up($mobile-breakpoint) {
     flex: 0 0 var(--#{$prefix}sidebar-narrow-width);
     width: var(--#{$prefix}sidebar-narrow-width);
@@ -32,6 +27,11 @@
       padding-left: 0;
     }
 
+    .sidebar-nav {
+      --#{$prefix}sidebar-nav-link-padding-x: #{$sidebar-narrow-nav-link-padding-x};
+      --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-narrow-nav-link-padding-y};
+    }
+
     .nav-icon {
       flex: 0 0 calc(var(--#{$prefix}sidebar-narrow-width) - (var(--#{$prefix}sidebar-nav-padding-x) * 2) - (var(--#{$prefix}sidebar-nav-link-padding-x) * 2)); // stylelint-disable-line function-disallowed-list
     }
@@ -49,7 +49,7 @@
       opacity: 0;
     }
 
-    .sidebar-toggler {
+    .sidebar-toggler::before {
       @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
     }
 
@@ -90,11 +90,11 @@
   &:hover {
     box-shadow: $box-shadow;
 
-    .sidebar-toggler {
+    .sidebar-toggler::before {
       @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
     }
 
-    &.sidebar-end .sidebar-toggler {
+    &.sidebar-end .sidebar-toggler::before {
       transform: rotate(0deg);
     }
   }

package/scss/sidebar/_sidebar.scss

@@ -14,7 +14,6 @@
 
   position: relative;
   display: flex;
-  // $sidebar-width is the width of the columns
   flex: 0 0 var(--#{$prefix}sidebar-width);
   flex-direction: column;
   // put the nav on the left
@@ -107,9 +106,9 @@
   }
 
   &.sidebar-overlaid {
-    // scss-docs-start sidebar-css-vars
+    // scss-docs-start sidebar-overlaid-css-vars
     --#{$prefix}sidebar-overlaid-box-shadow: #{$sidebar-overlaid-box-shadow};
-    // scss-docs-end sidebar-css-vars
+    // scss-docs-end sidebar-overlaid-css-vars
 
     position: fixed;
     top: 0;
@@ -137,7 +136,7 @@
       &:not(.sidebar-end) {
         @include ltr-rtl("margin-left", 0);
       }
-  
+
       &.sidebar-end {
         @include ltr-rtl("margin-right", 0);
       }
@@ -215,7 +214,7 @@
   --#{$prefix}sidebar-toggler-width: #{$sidebar-toggler-width};
   --#{$prefix}sidebar-toggler-height: #{$sidebar-toggler-height};
   --#{$prefix}sidebar-toggler-color: #{$sidebar-toggler-color};
-  --#{$prefix}sidebar-toggler-bg: #{ escape-svg($sidebar-toggler-bg) };
+  --#{$prefix}sidebar-toggler-bg: #{escape-svg($sidebar-toggler-bg)};
   --#{$prefix}sidebar-toggler-hover-color: #{$sidebar-toggler-hover-color};
   --#{$prefix}sidebar-toggler-focus-shadow: #{$sidebar-toggler-focus-shadow};
   --#{$prefix}sidebar-toggler-focus-color: #{$sidebar-toggler-focus-color};
@@ -230,7 +229,6 @@
   background-color: transparent;
   border: 0;
   @include border-radius();
-  @include transition(var(--#{$prefix}sidebar-toggler-transition));
 
   &::before {
     position: absolute;
@@ -241,6 +239,10 @@
     content: "";
     background-color: var(--#{$prefix}sidebar-toggler-color);
     mask: var(--#{$prefix}sidebar-toggler-bg) no-repeat center;
+    @include transition(var(--#{$prefix}sidebar-toggler-transition));
+    @include rtl() {
+      transform: rotate(-180deg);
+    }
   }
 
   // Override <a>'s hover style

package/scss/themes/bootstrap/_variables.scss

@@ -0,0 +1,2 @@
+$variable-prefix:             cui- !default; // Deprecated in v4.2.6 for the shorter `$prefix`
+$prefix:                      $variable-prefix !default;

package/scss/themes/bootstrap/bootstrap.rtl.scss

@@ -0,0 +1,23 @@
+@import "variables";
+
+$enable-ltr: false !default;
+$enable-rtl: true !default;
+
+@import "mixins/banner";
+@include bsBanner("");
+
+@import "../../../node_modules/bootstrap/scss/bootstrap";
+@import "../../variables";
+
+/* rtl:begin:ignore */
+@import "../../mixins/avatar";
+@import "../../mixins/icon";
+@import "../../mixins/ltr-rtl";
+
+@import "../../avatar";
+@import "../../callout";
+@import "../../footer";
+@import "../../header";
+@import "../../icon";
+@import "../../sidebar";
+/* rtl:end:ignore */