Merge branch 'main' into main-xmr-docs-bundle

.eslintrc.json

@@ -44,6 +44,7 @@
     "unicorn/no-null": "off",
     "unicorn/no-unused-properties": "error",
     "unicorn/no-useless-undefined": "off",
+    "unicorn/prefer-array-find": "off",
     "unicorn/prefer-dataset": "off",
     "unicorn/prefer-includes": "off",
     "unicorn/prefer-node-append": "off",

README.md

@@ -46,11 +46,11 @@ Our default branch is for development of our upcoming Bootstrap 5 release. Head
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/twbs/bootstrap/archive/v5.0.0.zip)
+- [Download the latest release](https://github.com/twbs/bootstrap/archive/v5.0.0-alpha1.zip)
 - Clone the repo: `git clone https://github.com/twbs/bootstrap.git`
 - Install with [npm](https://www.npmjs.com/): `npm install bootstrap@next`
 - Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@next`
-- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.0.0`
+- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.0.0-alpha1`
 - Install with [NuGet](https://www.nuget.org/): CSS: `Install-Package bootstrap` Sass: `Install-Package bootstrap.sass`
 
 Read the [Getting started page](https://v5.getbootstrap.com/docs/5.0/getting-started/introduction/) for information on the framework contents, templates and examples, and more.

build/zip-examples.js

@@ -35,8 +35,8 @@ sh.cp('-Rf', `_gh_pages/docs/${versionShort}/examples/*`, folderName)
 sh.cp('-Rf', `_gh_pages/docs/${versionShort}/dist/`, `${folderName}/assets/`)
 // also copy the two brand images we use in the examples
 sh.cp('-f', [
-  `_gh_pages/docs/${versionShort}/assets/brand/bootstrap-outline.svg`,
-  `_gh_pages/docs/${versionShort}/assets/brand/bootstrap-solid.svg`
+  `_gh_pages/docs/${versionShort}/assets/brand/bootstrap-logo.svg`,
+  `_gh_pages/docs/${versionShort}/assets/brand/bootstrap-logo-white.svg`
 ], `${folderName}/assets/brand/`)
 sh.rm(`${folderName}/index.html`)
 

config.yml

@@ -48,7 +48,7 @@ params:
   social_logo_path:     /docs/5.0/assets/brand/bootstrap-social-logo.png
 
   current_version:      "5.0.0-alpha1"
-  current_ruby_version: "5.0.0-alpha1"
+  current_ruby_version: "5.0.0.alpha1"
   docs_version:         "5.0"
   rfs_version:          "9.0.3"
   github_org:           "https://github.com/twbs"

package.json

@@ -92,49 +92,49 @@
     "popper.js": "^1.16.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.10.4",
-    "@babel/core": "^7.10.4",
-    "@babel/preset-env": "^7.10.4",
-    "@rollup/plugin-babel": "^5.1.0",
-    "@rollup/plugin-commonjs": "^14.0.0",
-    "@rollup/plugin-node-resolve": "^8.4.0",
-    "autoprefixer": "^9.8.5",
+    "@babel/cli": "^7.11.6",
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "@rollup/plugin-babel": "^5.2.0",
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "autoprefixer": "^9.8.6",
     "bundlewatch": "^0.2.7",
     "clean-css-cli": "^4.3.0",
     "cross-env": "^7.0.2",
-    "eslint": "^7.4.0",
-    "eslint-config-xo": "^0.32.0",
+    "eslint": "^7.8.1",
+    "eslint-config-xo": "^0.32.1",
     "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-unicorn": "^20.1.0",
+    "eslint-plugin-unicorn": "^21.0.0",
     "find-unused-sass-variables": "^2.0.0",
     "glob": "^7.1.6",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.62.1",
+    "hugo-bin": "^0.62.3",
     "ip": "^1.1.5",
     "jquery": "^3.5.1",
-    "karma": "^5.1.0",
+    "karma": "^5.2.1",
     "karma-browserstack-launcher": "1.4.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-detect-browsers": "^2.3.3",
     "karma-firefox-launcher": "^1.3.0",
-    "karma-jasmine": "^3.3.1",
+    "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.5.4",
     "karma-rollup-preprocessor": "^7.0.5",
-    "linkinator": "^2.1.1",
+    "linkinator": "^2.1.2",
     "lockfile-lint": "^4.3.7",
     "node-sass": "^4.14.1",
     "nodemon": "^2.0.4",
     "npm-run-all": "^4.1.5",
     "popper.js": "^1.16.1",
-    "postcss-cli": "^7.1.1",
-    "rollup": "^2.21.0",
+    "postcss-cli": "^7.1.2",
+    "rollup": "^2.26.11",
     "rollup-plugin-istanbul": "^2.0.1",
     "shelljs": "^0.8.4",
-    "sirv-cli": "^1.0.3",
+    "sirv-cli": "^1.0.6",
     "stylelint": "^13.6.1",
     "stylelint-config-twbs-bootstrap": "^2.0.3",
-    "terser": "^4.8.0",
+    "terser": "^5.1.0",
     "vnu-jar": "20.6.30"
   },
   "files": [

scss/_card.scss

@@ -220,6 +220,8 @@
 //
 
 .accordion {
+  overflow-anchor: none;
+
   > .card {
     overflow: hidden;
 

scss/_mixins.scss

@@ -12,7 +12,7 @@
 @import "mixins/breakpoints";
 @import "mixins/image";
 @import "mixins/resize";
-@import "mixins/screen-reader";
+@import "mixins/visually-hidden";
 @import "mixins/reset-text";
 @import "mixins/text-truncate";
 

scss/_pagination.scss

@@ -10,6 +10,7 @@
   text-decoration: if($link-decoration == none, null, none);
   background-color: $pagination-bg;
   border: $pagination-border-width solid $pagination-border-color;
+  @include transition($pagination-transition);
 
   &:hover {
     z-index: 2;
@@ -21,6 +22,8 @@
 
   &:focus {
     z-index: 3;
+    color: $pagination-focus-color;
+    background-color: $pagination-focus-bg;
     outline: $pagination-focus-outline;
     box-shadow: $pagination-focus-box-shadow;
   }

scss/_reboot.scss

@@ -69,7 +69,6 @@ body {
 //
 // 1. Reset Firefox's gray color
 // 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
-//    See https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_size
 
 hr {
   margin: $hr-margin-y 0;

scss/_toasts.scss

@@ -1,6 +1,5 @@
 .toast {
   max-width: $toast-max-width;
-  overflow: hidden; // cheap rounded corners on nested items
   @include font-size($toast-font-size);
   color: $toast-color;
   background-color: $toast-background-color;
@@ -36,6 +35,7 @@
   background-color: $toast-header-background-color;
   background-clip: padding-box;
   border-bottom: $toast-border-width solid $toast-header-border-color;
+  @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
 }
 
 .toast-body {

scss/_utilities.scss

@@ -23,7 +23,7 @@ $utilities: map-merge(
       print: true,
       property: display,
       class: d,
-      values: none inline inline-block block table table-row table-cell flex inline-flex
+      values: inline inline-block block table table-row table-cell flex inline-flex none
     ),
     "shadow": (
       property: box-shadow,
@@ -79,6 +79,11 @@ $utilities: map-merge(
       class: border,
       values: map-merge($theme-colors, ("white": $white))
     ),
+    "border-width": (
+      property: border-width,
+      class: border,
+      values: $border-widths
+    ),
     // Sizing utilities
     "width": (
       property: width,

scss/_variables.scss

@@ -338,6 +338,14 @@ $border-color:                $gray-300 !default;
 $border-radius:               .25rem !default;
 $border-radius-sm:            .2rem !default;
 $border-radius-lg:            .3rem !default;
+$border-widths: (
+  0: 0,
+  1: 1px,
+  2: 2px,
+  3: 3px,
+  4: 4px,
+  5: 5px
+) !default;
 
 $rounded-pill:                50rem !default;
 
@@ -658,7 +666,7 @@ $input-height-lg:                       add($input-line-height * 1em, add($input
 $input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
 
-$form-check-input-width:                  1.25em !default;
+$form-check-input-width:                  1em !default;
 $form-check-min-height:                   $font-size-base * $line-height-base !default;
 $form-check-padding-left:                 $form-check-input-width + .5em !default;
 $form-check-margin-bottom:                .125rem !default;
@@ -954,6 +962,8 @@ $pagination-border-radius:          $border-radius !default;
 $pagination-margin-left:            -$pagination-border-width !default;
 $pagination-border-color:           $gray-300 !default;
 
+$pagination-focus-color:            $link-hover-color !default;
+$pagination-focus-bg:               $gray-200 !default;
 $pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
 $pagination-focus-outline:          0 !default;
 
@@ -969,6 +979,7 @@ $pagination-disabled-color:         $gray-600 !default;
 $pagination-disabled-bg:            $white !default;
 $pagination-disabled-border-color:  $gray-300 !default;
 
+$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
 // Cards
 
@@ -1067,8 +1078,8 @@ $toast-header-border-color:         rgba(0, 0, 0, .05) !default;
 $badge-font-size:                   .75em !default;
 $badge-font-weight:                 $font-weight-bold !default;
 $badge-color:                       $white !default;
-$badge-padding-y:                   .25em !default;
-$badge-padding-x:                   .5em !default;
+$badge-padding-y:                   .35em !default;
+$badge-padding-x:                   .65em !default;
 $badge-border-radius:               $border-radius !default;
 
 

scss/helpers/_colored-links.scss

@@ -5,7 +5,7 @@
     @if $emphasized-link-hover-darken-percentage != 0 {
       &:hover,
       &:focus {
-        color: darken($value, $emphasized-link-hover-darken-percentage);
+        color: if(color-contrast($value) == $color-contrast-light, darken($value, $emphasized-link-hover-darken-percentage), lighten($value, $emphasized-link-hover-darken-percentage));
       }
     }
   }

scss/mixins/_border-radius.scss

@@ -23,53 +23,53 @@
   }
 }
 
-@mixin border-top-radius($radius) {
+@mixin border-top-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-top-left-radius: valid-radius($radius);
     border-top-right-radius: valid-radius($radius);
   }
 }
 
-@mixin border-right-radius($radius) {
+@mixin border-right-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-top-right-radius: valid-radius($radius);
     border-bottom-right-radius: valid-radius($radius);
   }
 }
 
-@mixin border-bottom-radius($radius) {
+@mixin border-bottom-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-bottom-right-radius: valid-radius($radius);
     border-bottom-left-radius: valid-radius($radius);
   }
 }
 
-@mixin border-left-radius($radius) {
+@mixin border-left-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-top-left-radius: valid-radius($radius);
     border-bottom-left-radius: valid-radius($radius);
   }
 }
 
-@mixin border-top-left-radius($radius) {
+@mixin border-top-left-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-top-left-radius: valid-radius($radius);
   }
 }
 
-@mixin border-top-right-radius($radius) {
+@mixin border-top-right-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-top-right-radius: valid-radius($radius);
   }
 }
 
-@mixin border-bottom-right-radius($radius) {
+@mixin border-bottom-right-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-bottom-right-radius: valid-radius($radius);
   }
 }
 
-@mixin border-bottom-left-radius($radius) {
+@mixin border-bottom-left-radius($radius: $border-radius) {
   @if $enable-rounded {
     border-bottom-left-radius: valid-radius($radius);
   }

scss/mixins/_box-shadow.scss

@@ -2,17 +2,15 @@
   @if $enable-shadows {
     $result: ();
 
-    @if (length($shadow) == 1) {
-      // We can pass `@include box-shadow(none);`
-      $result: $shadow;
-    } @else {
-      // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
-      @for $i from 1 through length($shadow) {
-        @if nth($shadow, $i) != "none" {
-          $result: append($result, nth($shadow, $i), "comma");
-        }
+    @each $value in $shadow {
+      @if $value != null {
+        $result: append($result, $value, "comma");
+      }
+      @if $value == none and length($shadow) > 1 {
+        @warn "The keyword 'none' must be used as a single argument.";
       }
     }
+
     @if (length($result) > 0) {
       box-shadow: $result;
     }

scss/mixins/_breakpoints.scss

@@ -107,8 +107,9 @@
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
 @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-  $min: breakpoint-min($name, $breakpoints);
-  $max: breakpoint-max(breakpoint-next($name, $breakpoints));
+  $min:  breakpoint-min($name, $breakpoints);
+  $next: breakpoint-next($name, $breakpoints);
+  $max:  breakpoint-max($next);
 
   @if $min != null and $max != null {
     @media (min-width: $min) and (max-width: $max) {
@@ -119,7 +120,7 @@
       @content;
     }
   } @else if $min == null {
-    @include media-breakpoint-down($name, $breakpoints) {
+    @include media-breakpoint-down($next, $breakpoints) {
       @content;
     }
   }

scss/mixins/_buttons.scss

@@ -7,11 +7,11 @@
   $background,
   $border,
   $color: color-contrast($background),
-  $hover-background: darken($background, 7.5%),
-  $hover-border: darken($border, 10%),
+  $hover-background: if($color == $color-contrast-light, darken($background, 7.5%), lighten($background, 7.5%)),
+  $hover-border: if($color == $color-contrast-light, darken($border, 10%), lighten($border, 5%)),
   $hover-color: color-contrast($hover-background),
-  $active-background: darken($background, 10%),
-  $active-border: darken($border, 12.5%),
+  $active-background: if($color == $color-contrast-light, darken($background, 10%), lighten($background, 10%)),
+  $active-border: if($color == $color-contrast-light, darken($border, 12.5%), lighten($border, 5%)),
   $active-color: color-contrast($active-background),
   $disabled-background: $background,
   $disabled-border: $border,

scss/mixins/_grid.scss

@@ -6,7 +6,6 @@
   --bs-gutter-x: #{$gutter};
   --bs-gutter-y: 0;
   display: flex;
-  flex: 1 0 100%;
   flex-wrap: wrap;
   margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-blacklist
   margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist