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

package/scss/coreui-grid.rtl.scss

@@ -0,0 +1,7 @@
+@import "mixins/banner";
+@include bsBanner("");
+
+$enable-ltr: false !default;
+$enable-rtl: true !default;
+
+@import "coreui-grid";

package/scss/coreui-grid.scss

@@ -1,5 +1,5 @@
 @import "mixins/banner";
-@include cuiBanner(Grid);
+@include bsBanner(Grid);
 
 $include-column-box-sizing: true !default;
 
@@ -8,17 +8,14 @@ $include-column-box-sizing: true !default;
 @import "variables-dark";
 @import "maps";
 
-@import "mixins/lists";
+@import "mixins/ltr-rtl";
 @import "mixins/breakpoints";
-@import "mixins/color-mode";
 @import "mixins/container";
 @import "mixins/grid";
 @import "mixins/utilities";
 
 @import "vendor/rfs";
 
-@import "root";
-
 @import "containers";
 @import "grid";
 

package/scss/coreui-reboot.rtl.scss

@@ -0,0 +1,7 @@
+@import "mixins/banner";
+@include bsBanner("");
+
+$enable-ltr: false !default;
+$enable-rtl: true !default;
+
+@import "coreui-reboot";

package/scss/coreui-reboot.scss

@@ -1,5 +1,5 @@
 @import "mixins/banner";
-@include cuiBanner(Reboot);
+@include bsBanner(Reboot);
 
 @import "functions";
 @import "variables";

package/scss/coreui-utilities.rtl.scss

@@ -0,0 +1,7 @@
+@import "mixins/banner";
+@include bsBanner("");
+
+$enable-ltr: false !default;
+$enable-rtl: true !default;
+
+@import "coreui-utilities";

package/scss/coreui-utilities.scss

@@ -1,5 +1,5 @@
 @import "mixins/banner";
-@include cuiBanner(Utilities);
+@include bsBanner(Utilities);
 
 // Configuration
 @import "functions";

package/scss/coreui.rtl.scss

@@ -0,0 +1,7 @@
+@import "mixins/banner";
+@include bsBanner("");
+
+$enable-ltr: false !default;
+$enable-rtl: true !default;
+
+@import "coreui";

package/scss/coreui.scss

@@ -1,6 +1,5 @@
 @import "mixins/banner";
-@include cuiBanner("");
-
+@include bsBanner("");
 
 // scss-docs-start import-stack
 // Configuration
@@ -46,9 +45,11 @@
 
 @import "avatar";
 @import "callout";
-@import "icon";
 @import "footer";
+@import "header";
+@import "icon";
 @import "sidebar";
+@import "subheader";
 
 // Helpers
 @import "helpers";

package/scss/forms/_floating-labels.scss

@@ -1,21 +1,11 @@
 .form-floating {
   position: relative;
 
-  &::before:not(.form-control:disabled) {
-    position: absolute;
-    top: $input-border-width;
-    left: $input-border-width;
-    width: subtract(100%, add($input-height-inner-quarter, $input-height-inner-half));
-    height: $form-floating-label-height;
-    content: "";
-    background-color: $input-bg;
-    @include border-radius($input-border-radius);
-  }
-
   > .form-control,
   > .form-control-plaintext,
   > .form-select {
     height: $form-floating-height;
+    min-height: $form-floating-height;
     line-height: $form-floating-line-height;
   }
 
@@ -23,7 +13,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
+    z-index: 2;
     height: 100%; // allow textareas
     padding: $form-floating-padding-y $form-floating-padding-x;
     overflow: hidden;
@@ -66,14 +56,24 @@
   > .form-control-plaintext,
   > .form-select {
     ~ label {
-      opacity: $form-floating-label-opacity;
+      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
       transform: $form-floating-label-transform;
+
+      &::after {
+        position: absolute;
+        inset: $form-floating-padding-y ($form-floating-padding-x * .5);
+        z-index: -1;
+        height: $form-floating-label-height;
+        content: "";
+        background-color: $input-bg;
+        @include border-radius($input-border-radius);
+      }
     }
   }
   // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
   > .form-control:-webkit-autofill {
     ~ label {
-      opacity: $form-floating-label-opacity;
+      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
       transform: $form-floating-label-transform;
     }
   }
@@ -84,7 +84,11 @@
     }
   }
 
-  > .form-control:disabled ~ label {
+  > :disabled ~ label {
     color: $form-floating-label-disabled-color;
+
+    &::after {
+      background-color: $input-disabled-bg;
+    }
   }
 }

package/scss/forms/_form-check.scss

@@ -5,12 +5,12 @@
 .form-check {
   display: block;
   min-height: $form-check-min-height;
-  padding-left: $form-check-padding-start;
+  @include ltr-rtl("padding-left", $form-check-padding-start);
   margin-bottom: $form-check-margin-bottom;
 
   .form-check-input {
-    float: left;
-    margin-left: $form-check-padding-start * -1;
+    @include ltr-rtl("float", left);
+    @include ltr-rtl("margin-left", $form-check-padding-start * -1);
   }
 }
 
@@ -63,8 +63,8 @@
   }
 
   &:checked {
-    background-color: $form-check-input-checked-bg-color;
-    border-color: $form-check-input-checked-border-color;
+    background-color: var(--#{$prefix}form-check-input-checked-bg-color, $form-check-input-checked-bg-color);
+    border-color: var(--#{$prefix}form-check-input-checked-border-color, $form-check-input-checked-border-color);
 
     &[type="checkbox"] {
       @if $enable-gradients {
@@ -112,7 +112,7 @@
 }
 
 .form-check-label {
-  color: $form-check-label-color;
+  color: var(--#{$prefix}form-check-label-color, $form-check-label-color);
   cursor: $form-check-label-cursor;
 }
 
@@ -121,7 +121,7 @@
 //
 
 .form-switch {
-  padding-left: $form-switch-padding-start;
+  @include ltr-rtl("padding-left", $form-switch-padding-start);
 
   .form-check-input {
     --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
@@ -159,9 +159,30 @@
   }
 }
 
+@each $size, $map in $form-switch-widths {
+  $width: map-get($map, "width");
+  $height: map-get($map, "height");
+
+  .form-switch-#{$size} {
+    min-height: $height;
+    @include ltr-rtl("padding-left", $width + .5em);
+
+    .form-check-input {
+      width: $width;
+      height: $height;
+      @include ltr-rtl("margin-left", ($width + .5em) * -1);
+    }
+
+    .form-check-label {
+      // stylelint-disable-next-line function-disallowed-list
+      padding-top: calc((#{$height} - #{$font-size-base}) / 2);
+    }
+  }
+}
+
 .form-check-inline {
   display: inline-block;
-  margin-right: $form-check-inline-margin-end;
+  @include ltr-rtl("margin-right", $form-check-inline-margin-end);
 }
 
 .btn-check {

package/scss/forms/_form-control.scss

@@ -44,12 +44,24 @@
     }
   }
 
-  // Add some height to date inputs on iOS
-  // https://github.com/twbs/bootstrap/issues/23307
-  // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
   &::-webkit-date-and-time-value {
+    // On Android Chrome, form-control's "width: 100%" makes the input width too small
+    // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
+    //
+    // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
+    // Tested under iOS 16.2 / Safari 16.2
+    min-width: 85px; // Seems to be a good minimum safe width
+
+    // Add some height to date inputs on iOS
+    // https://github.com/twbs/bootstrap/issues/23307
+    // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
     // Multiply line-height by 1em if it has no unit
     height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+
+    // Android Chrome type="date" is taller than the other inputs
+    // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
+    // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
+    margin: 0;
   }
 
   // Prevent excessive date input height in Webkit
@@ -61,7 +73,7 @@
 
   // Placeholder
   &::placeholder {
-    color: $input-placeholder-color;
+    color: var(--#{$prefix}input-placeholder-color, $input-placeholder-color);
     // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
     opacity: 1;
   }
@@ -193,6 +205,7 @@ textarea {
   }
 
   &::-webkit-color-swatch {
+    border: 0 !important; // stylelint-disable-line declaration-no-important
     @include border-radius($input-border-radius);
   }
 

package/scss/forms/_form-select.scss

@@ -8,8 +8,7 @@
 
   display: block;
   width: 100%;
-  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
-  -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
+  @include ltr-rtl-value-only("padding", $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x, $form-select-padding-y $form-select-padding-x $form-select-padding-y $form-select-indicator-padding);
   font-family: $form-select-font-family;
   @include font-size($form-select-font-size);
   font-weight: $form-select-font-weight;
@@ -18,7 +17,7 @@
   background-color: $form-select-bg;
   background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
   background-repeat: no-repeat;
-  background-position: $form-select-bg-position;
+  @include ltr-rtl-value-only("background-position", $form-select-bg-position);
   background-size: $form-select-bg-size;
   border: $form-select-border-width solid $form-select-border-color;
   @include border-radius($form-select-border-radius, 0);
@@ -27,7 +26,7 @@
   appearance: none;
 
   &:focus {
-    border-color: $form-select-focus-border-color;
+    border-color: var($form-select-focus-border-color);
     outline: 0;
     @if $enable-shadows {
       @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
@@ -39,7 +38,7 @@
 
   &[multiple],
   &[size]:not([size="1"]) {
-    padding-right: $form-select-padding-x;
+    @include ltr-rtl("padding-right", $form-select-padding-x);
     background-image: none;
   }
 
@@ -59,7 +58,7 @@
 .form-select-sm {
   padding-top: $form-select-padding-y-sm;
   padding-bottom: $form-select-padding-y-sm;
-  padding-left: $form-select-padding-x-sm;
+  @include ltr-rtl("padding-left", $form-select-padding-x-sm);
   @include font-size($form-select-font-size-sm);
   @include border-radius($form-select-border-radius-sm);
 }
@@ -67,7 +66,7 @@
 .form-select-lg {
   padding-top: $form-select-padding-y-lg;
   padding-bottom: $form-select-padding-y-lg;
-  padding-left: $form-select-padding-x-lg;
+  @include ltr-rtl("padding-left", $form-select-padding-x-lg);
   @include font-size($form-select-font-size-lg);
   @include border-radius($form-select-border-radius-lg);
 }

package/scss/forms/_input-group.scss

@@ -51,11 +51,11 @@
   @include font-size($input-font-size); // Match inputs
   font-weight: $input-group-addon-font-weight;
   line-height: $input-line-height;
-  color: $input-group-addon-color;
+  color: var(--#{$prefix}input-group-addon-color, $input-group-addon-color);
   text-align: center;
   white-space: nowrap;
-  background-color: $input-group-addon-bg;
-  border: $input-border-width solid $input-group-addon-border-color;
+  background-color: var(--#{$prefix}input-group-addon-bg, $input-group-addon-bg);
+  border: $input-border-width solid var(--#{$prefix}input-group-addon-border-color, $input-group-addon-border-color);
   @include border-radius($input-border-radius);
 }
 
@@ -85,7 +85,7 @@
 
 .input-group-lg > .form-select,
 .input-group-sm > .form-select {
-  padding-right: $form-select-padding-x + $form-select-indicator-padding;
+  @include ltr-rtl("padding-right", $form-select-padding-x + $form-select-indicator-padding);
 }
 
 
@@ -121,7 +121,7 @@
   }
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    margin-left: calc($input-border-width * -1); // stylelint-disable-line function-disallowed-list
+    @include ltr-rtl("margin-left", calc(#{$input-border-width} * -1));
     @include border-start-radius(0);
   }
 

package/scss/helpers/_color-bg.scss

@@ -1,5 +1,3 @@
-// stylelint-disable function-name-case
-
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   $color-rgb: to-rgb($value);
@@ -8,3 +6,15 @@
     background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    @each $color, $value in $theme-colors-dark {
+      $color-rgb: to-rgb($value);
+      .text-bg-#{$color} {
+        color: color-contrast($value) if($enable-important-utilities, !important, null);
+        background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+      }
+    }
+  }
+}

package/scss/helpers/_colored-links.scss

@@ -1,12 +1,30 @@
+// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in $theme-colors {
   .link-#{$color} {
-    color: $value if($enable-important-utilities, !important, null);
+    color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+    text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
 
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
-        color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) if($enable-important-utilities, !important, null);
+        $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+        color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
       }
     }
   }
 }
+
+// One-off special link helper as a bridge until v6
+.link-body-emphasis {
+  color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+
+  @if $link-shade-percentage != 0 {
+    &:hover,
+    &:focus {
+      color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
+      text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
+    }
+  }
+}

package/scss/helpers/_focus-ring.scss

@@ -0,0 +1,5 @@
+.focus-ring:focus {
+  outline: 0;
+  // By default, there is no `--cui-focus-ring-x`, `--cui-focus-ring-y`, or `--cui-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
+  box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
+}

package/scss/helpers/_icon-link.scss

@@ -0,0 +1,25 @@
+.icon-link {
+  display: inline-flex;
+  gap: $icon-link-gap;
+  align-items: center;
+  text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
+  text-underline-offset: $icon-link-underline-offset;
+  backface-visibility: hidden;
+
+  > .bi {
+    flex-shrink: 0;
+    width: $icon-link-icon-size;
+    height: $icon-link-icon-size;
+    fill: currentcolor;
+    @include transition($icon-link-icon-transition);
+  }
+}
+
+.icon-link-hover {
+  &:hover,
+  &:focus-visible {
+    > .bi {
+      transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
+    }
+  }
+}

package/scss/helpers/_ratio.scss

@@ -13,7 +13,7 @@
   > * {
     position: absolute;
     top: 0;
-    left: 0;
+    @include ltr-rtl("left", 0);
     width: 100%;
     height: 100%;
   }

package/scss/helpers/_vr.scss

@@ -3,6 +3,7 @@
   align-self: stretch;
   width: 1px;
   min-height: 1em;
+  padding: 0;
   background-color: currentcolor;
   opacity: $hr-opacity;
 }

package/scss/mixins/_alert.scss

@@ -1,4 +1,4 @@
-@include deprecate("`alert-variant()`", "v5.0.0", "v6.0.0");
+@include deprecate("`alert-variant()`", "v4.3.0", "v6.0.0");
 
 // scss-docs-start alert-variant-mixin
 @mixin alert-variant($background, $border, $color) {

package/scss/mixins/_banner.scss

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

package/scss/mixins/_border-radius.scss

@@ -33,8 +33,8 @@
 
 @mixin border-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-right-radius: valid-radius($radius);
-    border-bottom-right-radius: valid-radius($radius);
+    @include ltr-rtl("border-top-right-radius", valid-radius($radius));
+    @include ltr-rtl("border-bottom-right-radius", valid-radius($radius));
   }
 }
 
@@ -47,8 +47,8 @@
 
 @mixin border-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
-    border-bottom-left-radius: valid-radius($radius);
+    @include ltr-rtl("border-top-left-radius", valid-radius($radius));
+    @include ltr-rtl("border-bottom-left-radius", valid-radius($radius));
   }
 }
 
@@ -60,19 +60,19 @@
 
 @mixin border-top-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-right-radius: valid-radius($radius);
+    @include ltr-rtl("border-top-right-radius", valid-radius($radius));
   }
 }
 
 @mixin border-bottom-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-bottom-right-radius: valid-radius($radius);
+    @include ltr-rtl("border-bottom-right-radius", valid-radius($radius));
   }
 }
 
 @mixin border-bottom-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-bottom-left-radius: valid-radius($radius);
+    @include ltr-rtl("border-bottom-left-radius", valid-radius($radius));
   }
 }
 // scss-docs-end border-radius-mixins