From bf1e913f05f21fd633bd27f9e97b072a5231762e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 12 Jan 2021 14:53:12 +0200
Subject: [PATCH 01/20] Bump sass from 1.32.2 to 1.32.4 (#32766)

Bumps [sass](https://github.com/sass/dart-sass) from 1.32.2 to 1.32.4.
- [Release notes](https://github.com/sass/dart-sass/releases)
- [Changelog](https://github.com/sass/dart-sass/blob/master/CHANGELOG.md)
- [Commits](https://github.com/sass/dart-sass/compare/1.32.2...1.32.4)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 6 +++---
 package.json      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c87b740e9..a8d8dd4a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9014,9 +9014,9 @@
       "dev": true
     },
     "sass": {
-      "version": "1.32.2",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.2.tgz",
-      "integrity": "sha512-u1pUuzqwz3SAgvHSWp1k0mRhX82b2DdlVnP6UIetQPZtYbuJUDaPQhZE12jyjB7vYeOScfz9WPsZJB6Rpk7heA==",
+      "version": "1.32.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.4.tgz",
+      "integrity": "sha512-N0BT0PI/t3+gD8jKa83zJJUb7ssfQnRRfqN+GIErokW6U4guBpfYl8qYB+OFLEho+QvnV5ZH1R9qhUC/Z2Ch9w==",
       "dev": true,
       "requires": {
         "chokidar": ">=2.0.0 <4.0.0"
diff --git a/package.json b/package.json
index 0c3a36e35..531d66861 100644
--- a/package.json
+++ b/package.json
@@ -140,7 +140,7 @@
     "rollup": "^2.36.1",
     "rollup-plugin-istanbul": "^3.0.0",
     "rtlcss": "^3.0.0",
-    "sass": "^1.32.2",
+    "sass": "^1.32.4",
     "shelljs": "^0.8.4",
     "stylelint": "^13.8.0",
     "stylelint-config-twbs-bootstrap": "^2.1.0",

From 69afafe8118aa045b1371f93d5a5d5224a9d15dd Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Tue, 12 Jan 2021 05:33:58 -0800
Subject: [PATCH 02/20] Mention stretched-link constraints with table elements
 (#32761)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 site/content/docs/5.0/helpers/stretched-link.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.0/helpers/stretched-link.md b/site/content/docs/5.0/helpers/stretched-link.md
index ae13c8f3e..93bffeb31 100644
--- a/site/content/docs/5.0/helpers/stretched-link.md
+++ b/site/content/docs/5.0/helpers/stretched-link.md
@@ -5,7 +5,7 @@ description: Make any HTML element or Bootstrap component clickable by "stretchi
 group: helpers
 ---
 
-Add `.stretched-link` to a link to make its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) clickable via a `::after` pseudo element. In most cases, this means that an element with `position: relative;` that contains a link with the `.stretched-link` class is clickable.
+Add `.stretched-link` to a link to make its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) clickable via a `::after` pseudo element. In most cases, this means that an element with `position: relative;` that contains a link with the `.stretched-link` class is clickable. Please note given [how CSS `position` works](https://www.w3.org/TR/CSS21/visuren.html#propdef-position), `.stretched-link` cannot be mixed with most table elements.
 
 Cards have `position: relative` by default in Bootstrap, so in this case you can safely add the `.stretched-link` class to a link in the card without any other HTML changes.
 

From ed5ddca5ba6436a6234e1b9dfa0883382c84f0db Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Wed, 13 Jan 2021 10:52:41 +0200
Subject: [PATCH 03/20] Stylelint: disallow some property values (#32756)

* `border: none`
* `outline: none`
---
 .stylelintrc | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.stylelintrc b/.stylelintrc
index 1c9ee1811..c068d30b5 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -3,6 +3,10 @@
     "stylelint-config-twbs-bootstrap/scss"
   ],
   "rules": {
+    "declaration-property-value-disallowed-list": {
+      "border": "none",
+      "outline": "none"
+    },
     "function-disallowed-list": [
       "calc",
       "lighten",

From f43133ac412eb47111d09e89750a130cc79b9835 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Wed, 13 Jan 2021 13:20:49 +0200
Subject: [PATCH 04/20] .gitignore: remove Ruby/Jekyll entries (#32770)

Our currently supported branches, v4-dev and main, use Hugo.
---
 .gitignore | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6208c57d7..0a0f88d15 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,19 +1,8 @@
 # Ignore docs files
 /_gh_pages/
-# This is the old Jekyll docs dist folder;
-# keeping it here so that when we switch branches it doesn't show up
-/site/docs/**/dist/
-# Jekyll's cache folder; keeping it for the same reason as above
-/site/.jekyll-cache/
 # Hugo resources folder
 /resources/
 
-# Ignore ruby/bundler files;
-# keeping them here so that when we switch branches they don't show up
-/.bundle/
-/vendor/
-/.ruby-version
-
 # Numerous always-ignore extensions
 *.diff
 *.err

From 408b2558dcdacfbe5754103519e5d67d9c1c149b Mon Sep 17 00:00:00 2001
From: Marcin Kasperski <newkidx@gmail.com>
Date: Wed, 13 Jan 2021 18:05:25 +0100
Subject: [PATCH 05/20] Update toasts.md (#32782)

* dropped mention of `backdrop-filter`
* changed mention of `.text-white` to `.btn-close-white` on close button
---
 site/content/docs/5.0/components/toasts.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md
index b6f7e3893..bd7bcae9c 100644
--- a/site/content/docs/5.0/components/toasts.md
+++ b/site/content/docs/5.0/components/toasts.md
@@ -43,7 +43,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi
 
 ### Translucent
 
-Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we'll also attempt to blur the elements under a toast.
+Toasts are slightly translucent, too, so they blend over whatever they might appear over.
 
 {{< example class="bg-dark" >}}
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
@@ -120,7 +120,7 @@ Alternatively, you can also add additional controls and components to toasts.
 
 ### Color schemes
 
-Building on the above example, you can create different toast color schemes with our [color utilities]({{< docsref "/utilities/colors" >}}). Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.text-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
+Building on the above example, you can create different toast color schemes with our [color utilities]({{< docsref "/utilities/colors" >}}). Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
 
 {{< example class="bg-light" >}}
 <div class="toast d-flex align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">

From 05249c8c047c39434d531cc63b7d922deb4fae28 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Wed, 13 Jan 2021 09:15:05 -0800
Subject: [PATCH 06/20] Document size and multiple aren't supported on floating
 label selects (#32744)

* Document size and multiple aren't supported on floating label selects

Closes #32660

* Update floating-labels.md
---
 site/content/docs/5.0/forms/floating-labels.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/docs/5.0/forms/floating-labels.md b/site/content/docs/5.0/forms/floating-labels.md
index 3163ea8e0..2012a4e82 100644
--- a/site/content/docs/5.0/forms/floating-labels.md
+++ b/site/content/docs/5.0/forms/floating-labels.md
@@ -61,7 +61,7 @@ To set a custom height on your `<textarea>`, do not use the `rows` attribute. In
 
 ## Selects
 
-Other than `.form-control`, floating labels are only available on `.form-select`s. They work in the same way, but unlike `<input>`s, they'll always show the `<label>` in its floated state.
+Other than `.form-control`, floating labels are only available on `.form-select`s. They work in the same way, but unlike `<input>`s, they'll always show the `<label>` in its floated state. **Selects with `size` and `multiple` are not supported.**
 
 {{< example >}}
 <div class="form-floating">

From cad88abdb0c81fce717622c9342937b338234bf5 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Wed, 13 Jan 2021 19:16:51 +0200
Subject: [PATCH 07/20] JS: update karma config (#32769)

* rename constants
* enforce the constants to be Boolean
* fix karma `logLevel`
---
 js/tests/karma.conf.js | 34 ++++++++++++++++++----------------
 package.json           |  2 +-
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/js/tests/karma.conf.js b/js/tests/karma.conf.js
index 38c7003bb..cd4946525 100644
--- a/js/tests/karma.conf.js
+++ b/js/tests/karma.conf.js
@@ -1,5 +1,7 @@
 /* eslint-env node */
 
+'use strict'
+
 const path = require('path')
 const ip = require('ip')
 const { babel } = require('@rollup/plugin-babel')
@@ -12,10 +14,11 @@ const {
   browsersKeys
 } = require('./browsers')
 
-const { env } = process
-const browserStack = env.BROWSER === 'true'
-const debug = env.DEBUG === 'true'
-const jQueryTest = env.JQUERY === 'true'
+const ENV = process.env
+const BROWSERSTACK = Boolean(ENV.BROWSERSTACK)
+const DEBUG = Boolean(ENV.DEBUG)
+const JQUERY_TEST = Boolean(ENV.JQUERY)
+
 const frameworks = [
   'jasmine'
 ]
@@ -30,16 +33,16 @@ const reporters = ['dots']
 const detectBrowsers = {
   usePhantomJS: false,
   postDetection(availableBrowser) {
-    if (env.CI === true || availableBrowser.includes('Chrome')) {
-      return debug ? ['Chrome'] : ['ChromeHeadless']
+    if (ENV.CI === true || availableBrowser.includes('Chrome')) {
+      return DEBUG ? ['Chrome'] : ['ChromeHeadless']
     }
 
     if (availableBrowser.includes('Chromium')) {
-      return debug ? ['Chromium'] : ['ChromiumHeadless']
+      return DEBUG ? ['Chromium'] : ['ChromiumHeadless']
     }
 
     if (availableBrowser.includes('Firefox')) {
-      return debug ? ['Firefox'] : ['FirefoxHeadless']
+      return DEBUG ? ['Firefox'] : ['FirefoxHeadless']
     }
 
     throw new Error('Please install Chrome, Chromium or Firefox')
@@ -67,7 +70,7 @@ const conf = {
     'node_modules/hammer-simulator/index.js',
     {
       pattern: 'js/tests/unit/**/!(jquery).spec.js',
-      watched: !browserStack
+      watched: !BROWSERSTACK
     }
   ],
   preprocessors: {
@@ -101,11 +104,11 @@ const conf = {
   }
 }
 
-if (browserStack) {
+if (BROWSERSTACK) {
   conf.hostname = ip.address()
   conf.browserStack = {
-    username: env.BROWSER_STACK_USERNAME,
-    accessKey: env.BROWSER_STACK_ACCESS_KEY,
+    username: ENV.BROWSER_STACK_USERNAME,
+    accessKey: ENV.BROWSER_STACK_ACCESS_KEY,
     build: `bootstrap-${new Date().toISOString()}`,
     project: 'Bootstrap',
     retryLimit: 2
@@ -114,7 +117,7 @@ if (browserStack) {
   conf.customLaunchers = browsers
   conf.browsers = browsersKeys
   reporters.push('BrowserStack', 'kjhtml')
-} else if (jQueryTest) {
+} else if (JQUERY_TEST) {
   frameworks.push('detectBrowsers')
   plugins.push(
     'karma-chrome-launcher',
@@ -155,7 +158,7 @@ if (browserStack) {
     }
   }
 
-  if (debug) {
+  if (DEBUG) {
     conf.hostname = ip.address()
     plugins.push('karma-jasmine-html-reporter')
     reporters.push('kjhtml')
@@ -169,7 +172,6 @@ conf.plugins = plugins
 conf.reporters = reporters
 
 module.exports = karmaConfig => {
-  // possible values: karmaConfig.LOG_DISABLE || karmaConfig.LOG_ERROR || karmaConfig.LOG_WARN || karmaConfig.LOG_INFO || karmaConfig.LOG_DEBUG
-  conf.logLevel = karmaConfig.LOG_ERROR || karmaConfig.LOG_WARN
+  conf.logLevel = karmaConfig.LOG_ERROR
   karmaConfig.set(conf)
 }
diff --git a/package.json b/package.json
index 531d66861..f70adc436 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "js-test-karma": "karma start js/tests/karma.conf.js",
     "js-test-integration-bundle": "rollup --config js/tests/integration/rollup.bundle.js",
     "js-test-integration-modularity": "rollup --config js/tests/integration/rollup.bundle-modularity.js",
-    "js-test-cloud": "cross-env BROWSER=true npm run js-test-karma",
+    "js-test-cloud": "cross-env BROWSERSTACK=true npm run js-test-karma",
     "js-test-jquery": "cross-env JQUERY=true npm run js-test-karma",
     "lint": "npm-run-all --parallel js-lint css-lint lockfile-lint",
     "docs": "npm-run-all docs-build docs-lint",

From 82e5fe2d8ce3fe248be9db4babe8b0361c81d891 Mon Sep 17 00:00:00 2001
From: ghost_32 <kalash.strt@gmail.com>
Date: Wed, 13 Jan 2021 22:48:56 +0530
Subject: [PATCH 08/20] Migration: mention the removal of `.rounded-sm/lg`
 utilities (#32758)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Changes made in migration.md file of documentation

Added information about the removal of `.rounded-sm` and `.rounded-lg`.
And addition of `.rounded-0` to `.rounded-3`

* Moved the edited line

Added `rounded-0` to `rounded-3` under  v5.0.0-alpha3

* Moved correctly

* Added link

Added link to issue #31687

* docs(migration): last typo thinggies

* Update migration.md

Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 site/content/docs/5.0/migration.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index 895b8c275..0f15282a9 100644
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -127,6 +127,7 @@ Breakpoints specific variants are consequently renamed too (eg. `.text-md-start`
   - Renamed `.font-style-*` utilities as `.fst-*` for brevity and consistency.
 - Added `.d-grid` to display utilities
 - Added new `gap` utilities (`.gap`) for CSS Grid layouts
+- Removed `.rounded-sm` and `rounded-lg`, and introduced `.rounded-0` to `.rounded-3`. [See #31687](https://github.com/twbs/bootstrap/pull/31687).
 
 ## v5.0.0-alpha2
 

From 1cdbf532af806b6a39c4d9b999eb5c96853fd8ff Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Wed, 13 Jan 2021 19:21:31 +0200
Subject: [PATCH 09/20] Improve zip-examples.js (#32469)

Only include the needed dist files: ~1.27 MB -> ~410 KB
---
 build/zip-examples.js | 66 +++++++++++++++++++++++++++++++------------
 1 file changed, 48 insertions(+), 18 deletions(-)

diff --git a/build/zip-examples.js b/build/zip-examples.js
index 898e5860f..e5eb56f22 100644
--- a/build/zip-examples.js
+++ b/build/zip-examples.js
@@ -15,34 +15,64 @@ const sh = require('shelljs')
 const pkg = require('../package.json')
 
 const versionShort = pkg.config.version_short
-const folderName = `bootstrap-${pkg.version}-examples`
+const distFolder = `bootstrap-${pkg.version}-examples`
+const rootDocsDir = '_gh_pages'
+const docsDir = `${rootDocsDir}/docs/${versionShort}/`
+
+// these are the files we need in the examples
+const cssFiles = [
+  'bootstrap.min.css',
+  'bootstrap.min.css.map',
+  'bootstrap.rtl.min.css',
+  'bootstrap.rtl.min.css.map'
+]
+const jsFiles = [
+  'bootstrap.bundle.min.js',
+  'bootstrap.bundle.min.js.map'
+]
+const imgFiles = [
+  'bootstrap-logo.svg',
+  'bootstrap-logo-white.svg'
+]
 
 sh.config.fatal = true
 
-if (!sh.test('-d', '_gh_pages')) {
-  throw new Error('The "_gh_pages" folder does not exist, did you forget building the docs?')
+if (!sh.test('-d', rootDocsDir)) {
+  throw new Error(`The "${rootDocsDir}" folder does not exist, did you forget building the docs?`)
 }
 
 // switch to the root dir
 sh.cd(path.join(__dirname, '..'))
 
 // remove any previously created folder with the same name
-sh.rm('-rf', folderName)
-// create any folders so that `cp` works
-sh.mkdir('-p', folderName)
-sh.mkdir('-p', `${folderName}/assets/brand/`)
+sh.rm('-rf', distFolder)
 
-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-logo.svg`,
-  `_gh_pages/docs/${versionShort}/assets/brand/bootstrap-logo-white.svg`
-], `${folderName}/assets/brand/`)
-sh.rm(`${folderName}/index.html`)
+// create any folders so that `cp` works
+sh.mkdir('-p', [
+  distFolder,
+  `${distFolder}/assets/brand/`,
+  `${distFolder}/assets/dist/css/`,
+  `${distFolder}/assets/dist/js/`
+])
+
+sh.cp('-Rf', `${docsDir}/examples/*`, distFolder)
+
+cssFiles.forEach(file => {
+  sh.cp('-f', `${docsDir}/dist/css/${file}`, `${distFolder}/assets/dist/css/`)
+})
+
+jsFiles.forEach(file => {
+  sh.cp('-f', `${docsDir}/dist/js/${file}`, `${distFolder}/assets/dist/js/`)
+})
+
+imgFiles.forEach(file => {
+  sh.cp('-f', `${docsDir}/assets/brand/${file}`, `${distFolder}/assets/brand/`)
+})
+
+sh.rm(`${distFolder}/index.html`)
 
 // get all examples' HTML files
-sh.find(`${folderName}/**/*.html`).forEach(file => {
+sh.find(`${distFolder}/**/*.html`).forEach(file => {
   const fileContents = sh.cat(file)
     .toString()
     .replace(new RegExp(`"/docs/${versionShort}/`, 'g'), '"../')
@@ -54,7 +84,7 @@ sh.find(`${folderName}/**/*.html`).forEach(file => {
 })
 
 // create the zip file
-sh.exec(`zip -r9 "${folderName}.zip" "${folderName}"`, { fatal: true })
+sh.exec(`zip -r9 "${distFolder}.zip" "${distFolder}"`)
 
 // remove the folder we created
-sh.rm('-rf', folderName)
+sh.rm('-rf', distFolder)

From 041de9d5ed4adb03d40932ad91f9ca72874ff84e Mon Sep 17 00:00:00 2001
From: Onycss <76773374+Onycss@users.noreply.github.com>
Date: Wed, 13 Jan 2021 19:21:57 +0200
Subject: [PATCH 10/20] Add word-break to .toast-body (#32670)

* Update _toasts.scss

* Update scss/_toasts.scss

Co-authored-by: Mark Otto <otto@github.com>
---
 scss/_toasts.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 7a1cf7354..5c533d7f5 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -47,4 +47,5 @@
 
 .toast-body {
   padding: $toast-padding-x; // apply to both vertical and horizontal
+  word-wrap: break-word;
 }

From 20a9d491a2c3615d7187d29970fd0e08b71f9471 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= <ffoodd@users.noreply.github.com>
Date: Wed, 13 Jan 2021 20:01:36 +0100
Subject: [PATCH 11/20] Improve docs regarding RTL migration (#32771)

* docs(migrations): add a note regarding migration from v4 used for RTL layouts

* docs(RTL): LTR & RTL at the same time

* docs(utilities): how-to use the API to rename utilities

* docs(RTL): mention issue when nesting styles with .ltr / .rtl
---
 site/content/docs/5.0/getting-started/rtl.md | 36 ++++++++++++++++++++
 site/content/docs/5.0/migration.md           |  4 ++-
 site/content/docs/5.0/utilities/api.md       | 19 +++++++++++
 3 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/site/content/docs/5.0/getting-started/rtl.md b/site/content/docs/5.0/getting-started/rtl.md
index cd209298b..4ade8359c 100644
--- a/site/content/docs/5.0/getting-started/rtl.md
+++ b/site/content/docs/5.0/getting-started/rtl.md
@@ -136,6 +136,42 @@ $font-family-sans-serif:
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 ```
 
+### LTR and RTL at the same time
+
+Need both LTR and RTL on the same page? Thanks to [RTLCSS String Maps](https://rtlcss.com/learn/usage-guide/string-map/), this is pretty straightforward. Wrap your `@import`s with a class, and set a custom rename rule for RTLCSS:
+
+```scss
+/* rtl:begin:options: {
+  "autoRename": true,
+  "stringMap":[
+    "name": "ltr-rtl",
+    "priority": 100,
+    "search": ["ltr"],
+    "replace": ["rtl"],
+    "options": {
+      "scope": "*",
+      "ignoreCase": false
+    }
+  ]
+} */
+.ltr {
+  @import "../node_modules/bootstrap/scss/bootstrap";
+}
+/*rtl:end:options*/
+```
+
+After running Sass then RTLCSS, each selector in your CSS files will be prepended by `.ltr`, and `.rtl` for RTL files. Now you're able to use both files on the same page, and simply use `.ltr` or `.rtl` on your components wrappers to use one or the other direction.
+
+{{< callout warning >}}
+#### Edge cases and known limitations
+
+While this approach is understandable, please pay attention to the following:
+
+1. When switching `.ltr` and `.rtl`, make sure you add `dir` and `lang` attributes accordingly.
+2. Loading both files can be a real performance bottleneck: consider some [optimization]({{< docsref "/customize/optimize" >}}), and maybe try to [load one of those files asynchronously](https://www.filamentgroup.com/lab/load-css-simpler/).
+3. Nesting styles this way will prevent our `form-validation-state()` mixin from working as intended, thus require you tweak it a bit by yourself. [See #31223](https://github.com/twbs/bootstrap/issues/31223).
+{{< /callout >}}
+
 ## The breadcrumb case
 
 The [breadcrumb separator]({{< docsref "/components/breadcrumb" >}}/#changing-the-separator) is the only case requiring its own brand new variable— namely `$breadcrumb-divider-flipped` —defaulting to `$breadcrumb-divider`.
diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index 0f15282a9..5be6c6fa1 100644
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -50,7 +50,9 @@ Horizontal direction sensitive variables, utilities and mixins are renamed with
 - Renamed `.pl-*` and `.pr-*` to `.ps-*` and `.pe-*`.
 - Renamed `.text-left` and `.text-right` to `.text-start` and `.text-end`.
 
-Breakpoints specific variants are consequently renamed too (eg. `.text-md-start` replaces `.text-md-left`).
+Breakpoints specific variants are consequently renamed too (e.g. `.text-md-start` replaces `.text-md-left`).
+
+**Note**: if you used v4 to make RTL pages, ensure to reverse changes mentioned above: e.g. use `.*-start` were you used `.*-right`.
 
 ##### Mixins
 
diff --git a/site/content/docs/5.0/utilities/api.md b/site/content/docs/5.0/utilities/api.md
index 7cd002faf..ecd80af5b 100644
--- a/site/content/docs/5.0/utilities/api.md
+++ b/site/content/docs/5.0/utilities/api.md
@@ -289,6 +289,25 @@ $utilities: map-merge(
 );
 ```
 
+#### Rename utilities
+
+Missing v4 utilities, or used to another naming convention? The utilities API can be used to override the resulting `class` of a given utility—for example, to rename `.ms-*` utilities to oldish `.ml-*`:
+
+```scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/utilities";
+
+$utilities: map-merge(
+  $utilities, (
+    "margin-start": map-merge(
+      map-get($utilities, "margin-start"),
+      ( class: ml ),
+    ),
+  )
+);
+```
+
 ### Remove utilities
 
 Remove any of the default utilities by setting the group key to `null`. For example, to remove all our `width` utilities, create a `$utilities` `map-merge` and add `"width": null` within.

From d21fb9b6276cf023f99286c2e39498990ff69895 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Wed, 13 Jan 2021 11:06:07 -0800
Subject: [PATCH 12/20] Document some basic code conventions for us (#32778)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 site/content/docs/5.0/extend/approach.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/site/content/docs/5.0/extend/approach.md b/site/content/docs/5.0/extend/approach.md
index 552b5f29b..32efbf541 100644
--- a/site/content/docs/5.0/extend/approach.md
+++ b/site/content/docs/5.0/extend/approach.md
@@ -76,3 +76,11 @@ Specifically regarding custom CSS, utilities can help combat increasing file siz
 ## Flexible HTML
 
 While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (`>`). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.
+
+## Code conventions
+
+[Code Guide](https://codeguide.co/) (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifices guidelines for general formatting, common sense defaults, property and attribute orders, and more.
+
+We use [Stylelint](https://stylelint.io/) to enforce these standards and more in our Sass/CSS. [Our custom Stylelint config](https://github.com/twbs/stylelint-config-twbs-bootstrap) is open source and available for others to use and extend.
+
+We use [vnu-jar](https://www.npmjs.com/package/vnu-jar) to enforce standard and semantic HTML, as well as detecting common errors.

From e34481b6eb5c7b9db35911f428cb96af6947741e Mon Sep 17 00:00:00 2001
From: Rohit Sharma <rohit2sharma95@gmail.com>
Date: Thu, 14 Jan 2021 01:29:47 +0530
Subject: [PATCH 13/20] Fix toggling modal when clicking on
 `data-bs-toggle="modal"` (#32691)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 js/src/modal.js             |  2 +-
 js/tests/unit/modal.spec.js | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/js/src/modal.js b/js/src/modal.js
index 87c22943a..fe1b5a4c6 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -590,7 +590,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
     data = new Modal(target, config)
   }
 
-  data.show(this)
+  data.toggle(this)
 })
 
 /**
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index f645e9892..a867bec9b 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -870,7 +870,7 @@ describe('Modal', () => {
   })
 
   describe('data-api', () => {
-    it('should open modal', done => {
+    it('should toggle modal', done => {
       fixtureEl.innerHTML = [
         '<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>',
         '<div id="exampleModal" class="modal"><div class="modal-dialog"></div></div>'
@@ -885,6 +885,15 @@ describe('Modal', () => {
         expect(modalEl.getAttribute('aria-hidden')).toEqual(null)
         expect(modalEl.style.display).toEqual('block')
         expect(document.querySelector('.modal-backdrop')).toBeDefined()
+        setTimeout(() => trigger.click(), 10)
+      })
+
+      modalEl.addEventListener('hidden.bs.modal', () => {
+        expect(modalEl.getAttribute('aria-modal')).toEqual(null)
+        expect(modalEl.getAttribute('role')).toEqual(null)
+        expect(modalEl.getAttribute('aria-hidden')).toEqual('true')
+        expect(modalEl.style.display).toEqual('none')
+        expect(document.querySelector('.modal-backdrop')).toEqual(null)
         done()
       })
 

From c9cd741aff6acedaedfd2cf96df06a8b46b4826a Mon Sep 17 00:00:00 2001
From: Rohit Sharma <rohit2sharma95@gmail.com>
Date: Thu, 14 Jan 2021 01:43:30 +0530
Subject: [PATCH 14/20] Throw a `TypeError` instead of the generic `Error`
 (#32585)

* Change from Error to TypeError

* Convert the `NAME` to upper case to make the consistency in the error message

* Update the remaining tests to be stricter

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 js/src/dropdown.js               |  2 +-
 js/src/util/index.js             |  9 ++++-----
 js/tests/unit/carousel.spec.js   |  6 ++----
 js/tests/unit/collapse.spec.js   |  6 ++----
 js/tests/unit/dropdown.spec.js   | 10 ++++------
 js/tests/unit/modal.spec.js      |  6 ++----
 js/tests/unit/popover.spec.js    |  6 ++----
 js/tests/unit/scrollspy.spec.js  |  6 ++----
 js/tests/unit/tab.spec.js        |  6 ++----
 js/tests/unit/toast.spec.js      |  6 ++----
 js/tests/unit/tooltip.spec.js    |  6 ++----
 js/tests/unit/util/index.spec.js |  2 +-
 12 files changed, 26 insertions(+), 45 deletions(-)

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 008294e9b..bada537c9 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -263,7 +263,7 @@ class Dropdown extends BaseComponent {
       typeof config.reference.getBoundingClientRect !== 'function'
     ) {
       // Popper virtual elements require a getBoundingClientRect method
-      throw new Error(`${NAME}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`)
+      throw new TypeError(`${NAME.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`)
     }
 
     return config
diff --git a/js/src/util/index.js b/js/src/util/index.js
index 9ccad1cbb..22d0a578b 100644
--- a/js/src/util/index.js
+++ b/js/src/util/index.js
@@ -111,15 +111,14 @@ const typeCheckConfig = (componentName, config, configTypes) => {
   Object.keys(configTypes).forEach(property => {
     const expectedTypes = configTypes[property]
     const value = config[property]
-    const valueType = value && isElement(value) ?
-      'element' :
-      toType(value)
+    const valueType = value && isElement(value) ? 'element' : toType(value)
 
     if (!new RegExp(expectedTypes).test(valueType)) {
-      throw new Error(
+      throw new TypeError(
         `${componentName.toUpperCase()}: ` +
         `Option "${property}" provided type "${valueType}" ` +
-        `but expected type "${expectedTypes}".`)
+        `but expected type "${expectedTypes}".`
+      )
     }
   })
 }
diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js
index 0286762fa..787a276de 100644
--- a/js/tests/unit/carousel.spec.js
+++ b/js/tests/unit/carousel.spec.js
@@ -1136,11 +1136,9 @@ describe('Carousel', () => {
       jQueryMock.fn.carousel = Carousel.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.carousel.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
   })
 
diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js
index 4af21e13f..ff493cf51 100644
--- a/js/tests/unit/collapse.spec.js
+++ b/js/tests/unit/collapse.spec.js
@@ -819,11 +819,9 @@ describe('Collapse', () => {
       jQueryMock.fn.collapse = Collapse.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.collapse.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
   })
 
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
index ba1d0f443..cc4139603 100644
--- a/js/tests/unit/dropdown.spec.js
+++ b/js/tests/unit/dropdown.spec.js
@@ -393,13 +393,13 @@ describe('Dropdown', () => {
 
       expect(() => new Dropdown(btnDropdown, {
         reference: {}
-      })).toThrow()
+      })).toThrowError(TypeError, 'DROPDOWN: Option "reference" provided type "object" without a required "getBoundingClientRect" method.')
 
       expect(() => new Dropdown(btnDropdown, {
         reference: {
           getBoundingClientRect: 'not-a-function'
         }
-      })).toThrow()
+      })).toThrowError(TypeError, 'DROPDOWN: Option "reference" provided type "object" without a required "getBoundingClientRect" method.')
 
       // use onFirstUpdate as Poppers internal update is executed async
       const dropdown = new Dropdown(btnDropdown, {
@@ -1557,11 +1557,9 @@ describe('Dropdown', () => {
       jQueryMock.fn.dropdown = Dropdown.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.dropdown.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
   })
 
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index a867bec9b..29c90bbf1 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -1070,11 +1070,9 @@ describe('Modal', () => {
       jQueryMock.fn.modal = Modal.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.modal.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
 
     it('should call show method', () => {
diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js
index 3c04e7ac1..e5c235e2a 100644
--- a/js/tests/unit/popover.spec.js
+++ b/js/tests/unit/popover.spec.js
@@ -206,11 +206,9 @@ describe('Popover', () => {
       jQueryMock.fn.popover = Popover.jQueryInterface
       jQueryMock.elements = [popoverEl]
 
-      try {
+      expect(() => {
         jQueryMock.fn.popover.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
 
     it('should should call show method', () => {
diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
index eab9183aa..0d175aafa 100644
--- a/js/tests/unit/scrollspy.spec.js
+++ b/js/tests/unit/scrollspy.spec.js
@@ -625,11 +625,9 @@ describe('ScrollSpy', () => {
       jQueryMock.fn.scrollspy = ScrollSpy.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.scrollspy.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
   })
 
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 67a85b2e4..d098ab027 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -397,11 +397,9 @@ describe('Tab', () => {
       jQueryMock.fn.tab = Tab.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.tab.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
   })
 
diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js
index cc873d1fe..2920eb2ef 100644
--- a/js/tests/unit/toast.spec.js
+++ b/js/tests/unit/toast.spec.js
@@ -368,11 +368,9 @@ describe('Toast', () => {
       jQueryMock.fn.toast = Toast.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.toast.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
   })
 
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index 8224c3437..213dcc91f 100644
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -1207,11 +1207,9 @@ describe('Tooltip', () => {
       jQueryMock.fn.tooltip = Tooltip.jQueryInterface
       jQueryMock.elements = [div]
 
-      try {
+      expect(() => {
         jQueryMock.fn.tooltip.call(jQueryMock, action)
-      } catch (error) {
-        expect(error.message).toEqual(`No method named "${action}"`)
-      }
+      }).toThrowError(TypeError, `No method named "${action}"`)
     })
   })
 })
diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js
index d4b09bf77..00ab44f1e 100644
--- a/js/tests/unit/util/index.spec.js
+++ b/js/tests/unit/util/index.spec.js
@@ -212,7 +212,7 @@ describe('Util', () => {
 
       expect(() => {
         Util.typeCheckConfig(namePlugin, config, defaultType)
-      }).toThrow(new Error('COLLAPSE: Option "parent" provided type "number" but expected type "(string|element)".'))
+      }).toThrowError(TypeError, 'COLLAPSE: Option "parent" provided type "number" but expected type "(string|element)".')
     })
 
     it('should return null stringified when null is passed', () => {

From f95004f6548f580d95837e63e15122b9d3fd0dc2 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Wed, 13 Jan 2021 22:51:39 +0200
Subject: [PATCH 15/20] Revert "docs: Fix popover example showing above navbar
 (#32445)" (#32533)

This reverts commit 517446069a60daddaf5e53651661851f9b44e9a0.
---
 site/assets/scss/_subnav.scss    | 2 +-
 site/assets/scss/_variables.scss | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss
index 8979aa3cd..8377ff423 100644
--- a/site/assets/scss/_subnav.scss
+++ b/site/assets/scss/_subnav.scss
@@ -1,7 +1,7 @@
 .bd-subnavbar {
   // The position and z-index are needed for the dropdown to stay on top of the content
   position: relative;
-  z-index: $bd-navbar-zindex;
+  z-index: $zindex-sticky;
   background-color: rgba($white, .95);
   box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15);
 
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index 6e1ae2efd..110600260 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -11,6 +11,3 @@ $bd-warning:       #f0ad4e;
 $bd-danger:        #d9534f;
 $dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
 $sidebar-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
-
-// Higher than core's $zindex-tooltip, which is 1070
-$bd-navbar-zindex: 1080;

From 80c0d4deab672b81edd0a35edfabdd959ca77095 Mon Sep 17 00:00:00 2001
From: Mark Otto <markd.otto@gmail.com>
Date: Wed, 13 Jan 2021 14:15:18 -0800
Subject: [PATCH 16/20] Add mention of CSPs and SVGs (#32759)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 site/content/docs/5.0/customize/overview.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/site/content/docs/5.0/customize/overview.md b/site/content/docs/5.0/customize/overview.md
index 16847589e..ce94ebfc4 100644
--- a/site/content/docs/5.0/customize/overview.md
+++ b/site/content/docs/5.0/customize/overview.md
@@ -34,3 +34,18 @@ While we cannot go into details here on how to use every package manager, we can
 For those who want to use the distribution files, review the [getting started page]({{< docsref "/getting-started/introduction" >}}) for how to include those files and an example HTML page. From there, consult the docs for the layout, components, and behaviors you'd like to use.
 
 As you familiarize yourself with Bootstrap, continue exploring this section for more details on how to utilize our global options, making use of and changing our color system, how we build our components, how to use our growing list of CSS custom properties, and how to optimize your code when building with Bootstrap.
+
+## CSPs and embedded SVGs
+
+Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. **For organizations with more strict <abbr title="Content Security Policy">CSP</abbr> configurations**, we've documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options.
+
+- [Accordion]({{< docsref "/components/accordion" >}})
+- [Close button]({{< docsref "/components/close-button" >}}) (used in alerts and modals)
+- [Form checkboxes and radio buttons]({{< docsref "/forms/checks-radios" >}})
+- [Form switches]({{< docsref "/forms/checks-radios#switches" >}})
+- [Form validation icons]({{< docsref "/forms/validation#server-side" >}})
+- [Select menus]({{< docsref "/forms/select" >}})
+- [Carousel controls]({{< docsref "/components/carousel#with-controls" >}})
+- [Navbar toggle buttons]({{< docsref "/components/navbar#responsive-behaviors" >}})
+
+Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on a best path forward, if necessary.
\ No newline at end of file

From 1b46601ce8461fbafc5c33d7b9030ea0ad306671 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 14 Jan 2021 00:29:26 +0200
Subject: [PATCH 17/20] Bump eslint-plugin-unicorn from 25.0.1 to 26.0.1
 (#32784)

* Bump eslint-plugin-unicorn from 25.0.1 to 26.0.1

Bumps [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn) from 25.0.1 to 26.0.1.
- [Release notes](https://github.com/sindresorhus/eslint-plugin-unicorn/releases)
- [Commits](https://github.com/sindresorhus/eslint-plugin-unicorn/compare/v25.0.1...v26.0.1)

Signed-off-by: dependabot[bot] <support@github.com>

* Updates for `eslint-plugin-unicorn@26.0.1`

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 .eslintrc.json              |  1 -
 js/src/dom/event-handler.js |  1 +
 js/src/util/sanitizer.js    |  4 ++--
 package-lock.json           | 10 +++++-----
 package.json                |  2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 680642ac6..d5a54d46b 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -43,7 +43,6 @@
     ],
     "unicorn/consistent-function-scoping": "off",
     "unicorn/explicit-length-check": "off",
-    "unicorn/import-index": "off",
     "unicorn/no-array-callback-reference": "off",
     "unicorn/no-for-loop": "off",
     "unicorn/no-null": "off",
diff --git a/js/src/dom/event-handler.js b/js/src/dom/event-handler.js
index 2ee13bafc..e3c685530 100644
--- a/js/src/dom/event-handler.js
+++ b/js/src/dom/event-handler.js
@@ -112,6 +112,7 @@ function bootstrapDelegationHandler(element, selector, fn) {
           event.delegateTarget = target
 
           if (handler.oneOff) {
+            // eslint-disable-next-line unicorn/consistent-destructuring
             EventHandler.off(element, event.type, fn)
           }
 
diff --git a/js/src/util/sanitizer.js b/js/src/util/sanitizer.js
index d908dd661..ce3d455a6 100644
--- a/js/src/util/sanitizer.js
+++ b/js/src/util/sanitizer.js
@@ -37,7 +37,7 @@ const allowedAttribute = (attr, allowedAttributeList) => {
 
   if (allowedAttributeList.includes(attrName)) {
     if (uriAttrs.has(attrName)) {
-      return Boolean(attr.nodeValue.match(SAFE_URL_PATTERN) || attr.nodeValue.match(DATA_URL_PATTERN))
+      return Boolean(SAFE_URL_PATTERN.test(attr.nodeValue) || DATA_URL_PATTERN.test(attr.nodeValue))
     }
 
     return true
@@ -47,7 +47,7 @@ const allowedAttribute = (attr, allowedAttributeList) => {
 
   // Check if a regular expression validates the attribute.
   for (let i = 0, len = regExp.length; i < len; i++) {
-    if (attrName.match(regExp[i])) {
+    if (regExp[i].test(attrName)) {
       return true
     }
   }
diff --git a/package-lock.json b/package-lock.json
index a8d8dd4a9..531a1d0e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3802,17 +3802,17 @@
       }
     },
     "eslint-plugin-unicorn": {
-      "version": "25.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-25.0.1.tgz",
-      "integrity": "sha512-MEyEWoyou/qhJH6rEER9YHACtCsQT+eewc6Fdxbi2eiTvsGrBR8JZMA6qaeof3oMQeRxOpaERoBKzU7R5c4A/w==",
+      "version": "26.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-26.0.1.tgz",
+      "integrity": "sha512-SWgF9sIVY74zqkkSN2dclSCqRfocWSUGD0haC0NX2oRfmdp9p8dQvJYkYSQePaCyssPUE/pqpsIEEZNTh8crUA==",
       "dev": true,
       "requires": {
         "ci-info": "^2.0.0",
         "clean-regexp": "^1.0.0",
         "eslint-ast-utils": "^1.1.0",
-        "eslint-template-visitor": "^2.2.1",
+        "eslint-template-visitor": "^2.2.2",
         "eslint-utils": "^2.1.0",
-        "import-modules": "^2.0.0",
+        "import-modules": "^2.1.0",
         "lodash": "^4.17.20",
         "pluralize": "^8.0.0",
         "read-pkg-up": "^7.0.1",
diff --git a/package.json b/package.json
index f70adc436..495af9c34 100644
--- a/package.json
+++ b/package.json
@@ -115,7 +115,7 @@
     "eslint": "^7.17.0",
     "eslint-config-xo": "^0.34.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-unicorn": "^25.0.1",
+    "eslint-plugin-unicorn": "^26.0.1",
     "find-unused-sass-variables": "^3.1.0",
     "glob": "^7.1.6",
     "hammer-simulator": "0.0.1",

From 157a27d43d7d785292ca527936ac2932615dea1e Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Thu, 14 Jan 2021 00:35:57 +0200
Subject: [PATCH 18/20] build-plugins: build Base component too (#32313)

---
 build/build-plugins.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/build/build-plugins.js b/build/build-plugins.js
index 80a010a7f..d1930b855 100644
--- a/build/build-plugins.js
+++ b/build/build-plugins.js
@@ -29,6 +29,7 @@ const bsPlugins = {
   Manipulator: path.resolve(__dirname, '../js/src/dom/manipulator.js'),
   SelectorEngine: path.resolve(__dirname, '../js/src/dom/selector-engine.js'),
   Alert: path.resolve(__dirname, '../js/src/alert.js'),
+  Base: path.resolve(__dirname, '../js/src/base-component.js'),
   Button: path.resolve(__dirname, '../js/src/button.js'),
   Carousel: path.resolve(__dirname, '../js/src/carousel.js'),
   Collapse: path.resolve(__dirname, '../js/src/collapse.js'),
@@ -44,11 +45,13 @@ const bsPlugins = {
 const defaultPluginConfig = {
   external: [
     bsPlugins.Data,
+    bsPlugins.Base,
     bsPlugins.EventHandler,
     bsPlugins.SelectorEngine
   ],
   globals: {
     [bsPlugins.Data]: 'Data',
+    [bsPlugins.Base]: 'Base',
     [bsPlugins.EventHandler]: 'EventHandler',
     [bsPlugins.SelectorEngine]: 'SelectorEngine'
   }
@@ -73,6 +76,7 @@ const getConfigByPluginKey = pluginKey => {
   }
 
   if (
+    pluginKey === 'Base' ||
     pluginKey === 'Button' ||
     pluginKey === 'Carousel' ||
     pluginKey === 'Collapse' ||
@@ -112,11 +116,13 @@ const getConfigByPluginKey = pluginKey => {
     return {
       external: [
         bsPlugins.Data,
+        bsPlugins.Base,
         bsPlugins.EventHandler,
         bsPlugins.Manipulator
       ],
       globals: {
         [bsPlugins.Data]: 'Data',
+        [bsPlugins.Base]: 'Base',
         [bsPlugins.EventHandler]: 'EventHandler',
         [bsPlugins.Manipulator]: 'Manipulator'
       }

From f7d38705672a79d69fe27e8457d3d39685bab39b Mon Sep 17 00:00:00 2001
From: voltaek <volt43k@gmail.com>
Date: Wed, 13 Jan 2021 17:41:42 -0500
Subject: [PATCH 19/20] Docs v5: Fix Sass rounding precision and state Sass
 implementation (#32512)

* Add Sass section to Getting Started > Build Tools, mention Sass implementation used, mention current precision of 10 due to Dart Sass, and mention recommended minimum precision (value of 6 used in BS v4). Remove outdated Sass precision from Customize > Sass docs page.

* Remove more mentions of deprecated Sass implementations. Add links to Sass compiler mentions so we can keep all pertinent Sass compiler information in just one location instead of spread through the docs, which makes it hard to find the details and/or keep them up-to-date.

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 site/content/docs/5.0/customize/sass.md              | 2 +-
 site/content/docs/5.0/getting-started/build-tools.md | 6 ++++++
 site/content/docs/5.0/getting-started/download.md    | 6 +++---
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/site/content/docs/5.0/customize/sass.md b/site/content/docs/5.0/customize/sass.md
index 46b822525..d21dff7aa 100644
--- a/site/content/docs/5.0/customize/sass.md
+++ b/site/content/docs/5.0/customize/sass.md
@@ -6,7 +6,7 @@ group: customize
 toc: true
 ---
 
-Utilize our source Sass files to take advantage of variables, maps, mixins, and more. In our build we've increased the Sass rounding precision to 6 (by default it's 5) to prevent issues with browser rounding.
+Utilize our source Sass files to take advantage of variables, maps, mixins, and more.
 
 ## File structure
 
diff --git a/site/content/docs/5.0/getting-started/build-tools.md b/site/content/docs/5.0/getting-started/build-tools.md
index 46ad928d4..fcee8cc26 100644
--- a/site/content/docs/5.0/getting-started/build-tools.md
+++ b/site/content/docs/5.0/getting-started/build-tools.md
@@ -65,6 +65,12 @@ Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/packag
   </tbody>
 </table>
 
+## Sass
+
+Bootstrap uses [Dart Sass](https://sass-lang.com/dart-sass) for compiling our Sass source files into CSS files (included in our build process), and we recommend you do the same if you're compiling Sass using your own asset pipeline. We previously used Node Sass for Bootstrap v4, but LibSass and packages built on top of it, including Node Sass, are now [deprecated](https://sass-lang.com/blog/libsass-is-deprecated).
+
+Dart Sass uses a rounding precision of 10 and for efficiency reasons does not allow adjustment of this value. We don't lower this precision during further processing of our generated CSS, such as during minification, but if you chose to do so we recommend maintaining a precision of at least 6 to prevent issues with browser rounding.
+
 ## Autoprefixer
 
 Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
diff --git a/site/content/docs/5.0/getting-started/download.md b/site/content/docs/5.0/getting-started/download.md
index e053eac39..af2d5a5de 100644
--- a/site/content/docs/5.0/getting-started/download.md
+++ b/site/content/docs/5.0/getting-started/download.md
@@ -21,10 +21,10 @@ This doesn't include documentation, source files, or any optional JavaScript dep
 
 Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:
 
-- Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS.
+- [Sass compiler]({{< docsref "/getting-started/build-tools#sass" >}}) for compiling Sass source files into CSS files
 - [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing
 
-Should you require [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
+Should you require our full set of [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
 
 <a href="{{< param "download.source" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
 
@@ -52,7 +52,7 @@ If you're using our compiled JavaScript and prefer to include Popper separately,
 
 ## Package managers
 
-Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a Sass compiler and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
+Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]({{< docsref "/getting-started/build-tools#sass" >}}) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
 
 ### npm
 

From 949fa3015283b6098f47abc988da0fb31b85eccb Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Wed, 13 Jan 2021 23:54:25 +0000
Subject: [PATCH 20/20] Remove role="button" from CTA links in carousel
 examples (#32788)

They're links, acting as links. Just because they're styled as buttons visually doesn't mean they need/get `role="button"`
---
 .../docs/5.0/examples/carousel-rtl/index.html        | 12 ++++++------
 site/content/docs/5.0/examples/carousel/index.html   | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/site/content/docs/5.0/examples/carousel-rtl/index.html b/site/content/docs/5.0/examples/carousel-rtl/index.html
index a55560e26..def1abde8 100644
--- a/site/content/docs/5.0/examples/carousel-rtl/index.html
+++ b/site/content/docs/5.0/examples/carousel-rtl/index.html
@@ -49,7 +49,7 @@ extra_css:
           <div class="carousel-caption text-start">
             <h1>عنوان المثال.</h1>
             <p> نهاية الأوضاع ان أضف, هو مما رجوعهم وقدّموا. أي عدد الدمج نهاية وأكثرها, المسرح الباهضة وبولندا حول و, كل أما سياسة أسابيع. مع حيث قُدُماً الكونجرس, بها و خيار ٢٠٠٤, كلا في مكّن وقام. مع يكن زهاء بالفشل, الجوي الصين الشمال إذ على.</p>
-            <p><a class="btn btn-lg btn-primary" href="#" role="button">سجل اليوم</a></p>
+            <p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p>
           </div>
         </div>
       </div>
@@ -59,7 +59,7 @@ extra_css:
           <div class="carousel-caption">
             <h1>عنوان مثال آخر.</h1>
             <p>ثم تزامناً الفرنسي الإقتصادية دار. لكل عن الضغوط المتّبعة, أن حتى إختار المدن بالإنزال. عن الشمل بالفشل تلك, بل أراض أوزار بلديهما حول. دون لكون والتي ثم, كُلفة ويعزى استطاعوا أن لمّ. جُل بخطوط واحدة البشريةً.</p>
-            <p><a class="btn btn-lg btn-primary" href="#" role="button">أعرف أكثر</a></p>
+            <p><a class="btn btn-lg btn-primary" href="#">أعرف أكثر</a></p>
           </div>
         </div>
       </div>
@@ -69,7 +69,7 @@ extra_css:
           <div class="carousel-caption text-end">
             <h1>واحد أكثر لقياس جيد.</h1>
             <p>قررت العصبة إيطاليا وتم أن, عن سكان وقامت الحكومة وفي. كان بـ اوروبا اليابانية, ثمّة بوابة يتعلّق عل بعض. عدم رئيس الآلاف أن حدى.</p>
-            <p><a class="btn btn-lg btn-primary" href="#" role="button">تصفح المعرض</a></p>
+            <p><a class="btn btn-lg btn-primary" href="#">تصفح المعرض</a></p>
           </div>
         </div>
       </div>
@@ -97,19 +97,19 @@ extra_css:
         {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
         <h2>عنوان</h2>
         <p>ان وتم عجّل الأجل, قبل نتيجة المشترك بـ, أي جعل جورج أوزار المسرح. أن وإعلان الساحل تلك, مكن ان استبدال الباهضة التكاليف. الى ماذا اليميني الحكومة في, إجلاء نتيجة قبل تم. مساعدة بولندا، أي هذه الحكم.</p>
-        <p><a class="btn btn-secondary" href="#" role="button">عرض التفاصيل</a></p>
+        <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
         {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
         <h2>عنوان</h2>
         <p>هو أخر إتفاقية الدولارات الأوروبيّون, ثانية طوكيو و به،, ونتج أعمال مما أم. عن الا يونيو أفريقيا, السيطرة التقليدي ومن ٣٠. هو الغالي الإتفاقية ويكيبيديا، مكن, و الى هُزم اعتداء وايرلندا. وقبل بمباركة الأوروبيّون عن فقد, بتحدّي والفلبين ما كلا.</p>
-        <p><a class="btn btn-secondary" href="#" role="button">عرض التفاصيل</a></p>
+        <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
         {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
         <h2>عنوان</h2>
         <p>غير عن الثقيل وسمّيت الأوضاع, لم تاريخ بالحرب للسيطرة حين, دار اللا تطوير تم. الى بشرية اليابان في. أما الشهيرة الإثنان وايرلندا ما, لإعلان واشتدّت و مدن. في غير والحزب للسيطرة الإكتفاء. ثانية الكونجرس الا من, جُل ٣٠ وبداية الشرقية.</p>
-        <p><a class="btn btn-secondary" href="#" role="button">عرض التفاصيل</a></p>
+        <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
       </div><!-- /.col-lg-4 -->
     </div><!-- /.row -->
 
diff --git a/site/content/docs/5.0/examples/carousel/index.html b/site/content/docs/5.0/examples/carousel/index.html
index 07d579c43..2c0bc5129 100644
--- a/site/content/docs/5.0/examples/carousel/index.html
+++ b/site/content/docs/5.0/examples/carousel/index.html
@@ -48,7 +48,7 @@ extra_css:
           <div class="carousel-caption text-start">
             <h1>Example headline.</h1>
             <p>Some representative placeholder content for the first slide of the carousel.</p>
-            <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
+            <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
           </div>
         </div>
       </div>
@@ -58,7 +58,7 @@ extra_css:
           <div class="carousel-caption">
             <h1>Another example headline.</h1>
             <p>Some representative placeholder content for the second slide of the carousel.</p>
-            <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
+            <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
           </div>
         </div>
       </div>
@@ -68,7 +68,7 @@ extra_css:
           <div class="carousel-caption text-end">
             <h1>One more for good measure.</h1>
             <p>Some representative placeholder content for the third slide of this carousel.</p>
-            <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
+            <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
           </div>
         </div>
       </div>
@@ -96,19 +96,19 @@ extra_css:
         {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
         <h2>Heading</h2>
         <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
-        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
+        <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
         {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
         <h2>Heading</h2>
         <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
-        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
+        <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
         {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
         <h2>Heading</h2>
         <p>And lastly this, the third column of representative placeholder content.</p>
-        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
+        <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
     </div><!-- /.row -->