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/.github/workflows/browserstack.yml b/.github/workflows/browserstack.yml
index ea0a25704..a12bffcf7 100644
--- a/.github/workflows/browserstack.yml
+++ b/.github/workflows/browserstack.yml
@@ -5,7 +5,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14.x
+  NODE: 14
 
 jobs:
   browserstack:
diff --git a/.github/workflows/bundlewatch.yml b/.github/workflows/bundlewatch.yml
index 989991f0d..b2bd5eed5 100644
--- a/.github/workflows/bundlewatch.yml
+++ b/.github/workflows/bundlewatch.yml
@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14.x
+  NODE: 14
 
 jobs:
   bundlewatch:
diff --git a/.github/workflows/css.yml b/.github/workflows/css.yml
index 4463d52f4..a28059d79 100644
--- a/.github/workflows/css.yml
+++ b/.github/workflows/css.yml
@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14.x
+  NODE: 14
 
 jobs:
   css:
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index cda6f7748..150e4d16c 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14.x
+  NODE: 14
 
 jobs:
   docs:
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index e7a55083d..369aaced3 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14.x
+  NODE: 14
 
 jobs:
   lint:
diff --git a/.github/workflows/node-sass.yml b/.github/workflows/node-sass.yml
index 285d4bcc8..ee64b2152 100644
--- a/.github/workflows/node-sass.yml
+++ b/.github/workflows/node-sass.yml
@@ -8,7 +8,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 14.x
+  NODE: 14
 
 jobs:
   css:
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
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",
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'
       }
diff --git a/build/zip-examples.js b/build/zip-examples.js
index 898e5860f..b2f156502 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/`)
+// remove any previously created folder/zip with the same name
+sh.rm('-rf', [distFolder, `${distFolder}.zip`])
 
-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)
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/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/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/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/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/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/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 f645e9892..29c90bbf1 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()
       })
 
@@ -1061,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', () => {
diff --git a/package-lock.json b/package-lock.json
index a8d8dd4a9..ca8de9e55 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1253,6 +1253,24 @@
         "defer-to-connect": "^1.0.1"
       }
     },
+    "@types/component-emitter": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",
+      "integrity": "sha512-bsjleuRKWmGqajMerkzox19aGbscQX5rmmvvXl3wlIp5gMG1HgkiwPxsN5p070fBDKTNSPgojVbuY1+HWMbFhg==",
+      "dev": true
+    },
+    "@types/cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-y7mImlc/rNkvCRmg8gC3/lj87S7pTUIJ6QGjwHR9WQJcFs+ZMTOaoPrkdFA/YdbuqVEmEbb5RdhVxMkAcgOnpg==",
+      "dev": true
+    },
+    "@types/cors": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.9.tgz",
+      "integrity": "sha512-zurD1ibz21BRlAOIKP8yhrxlqKx6L9VCwkB5kMiP6nZAhoF5MvC7qS1qPA7nRcr1GJolfkQC7/EAL4hdYejLtg==",
+      "dev": true
+    },
     "@types/estree": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
@@ -1356,12 +1374,6 @@
       "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
       "dev": true
     },
-    "after": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
-      "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=",
-      "dev": true
-    },
     "agent-base": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz",
@@ -1566,12 +1578,6 @@
         "es-abstract": "^1.18.0-next.1"
       }
     },
-    "arraybuffer.slice": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz",
-      "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==",
-      "dev": true
-    },
     "arrify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
@@ -1665,12 +1671,6 @@
         "object.assign": "^4.1.0"
       }
     },
-    "backo2": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
-      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=",
-      "dev": true
-    },
     "bail": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
@@ -1908,12 +1908,6 @@
         "safe-buffer": "^5.1.1"
       }
     },
-    "blob": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz",
-      "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==",
-      "dev": true
-    },
     "bluebird": {
       "version": "3.4.7",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
@@ -2646,24 +2640,12 @@
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
       "dev": true
     },
-    "component-bind": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz",
-      "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=",
-      "dev": true
-    },
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
       "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
       "dev": true
     },
-    "component-inherit": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz",
-      "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=",
-      "dev": true
-    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2796,6 +2778,16 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "cosmiconfig": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
@@ -3348,77 +3340,44 @@
       }
     },
     "engine.io": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-3.5.0.tgz",
-      "integrity": "sha512-21HlvPUKaitDGE4GXNtQ7PLP0Sz4aWLddMPw2VTyFz1FVZqu/kZsJUO8WNpKuE/OCL7nkfRaOui2ZCJloGznGA==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-4.0.6.tgz",
+      "integrity": "sha512-rf7HAVZpcRrcKEKddgIzYUnwg0g5HE1RvJaTLwkcfJmce4g+po8aMuE6vxzp6JwlK8FEq/vi0KWN6tA585DjaA==",
       "dev": true,
       "requires": {
         "accepts": "~1.3.4",
         "base64id": "2.0.0",
         "cookie": "~0.4.1",
-        "debug": "~4.1.0",
-        "engine.io-parser": "~2.2.0",
+        "cors": "~2.8.5",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~4.0.0",
         "ws": "~7.4.2"
       },
       "dependencies": {
         "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
           "dev": true,
           "requires": {
-            "ms": "^2.1.1"
+            "ms": "2.1.2"
           }
         },
         "ms": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
           "dev": true
         }
       }
     },
-    "engine.io-client": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.5.0.tgz",
-      "integrity": "sha512-12wPRfMrugVw/DNyJk34GQ5vIVArEcVMXWugQGGuw2XxUSztFNmJggZmv8IZlLyEdnpO1QB9LkcjeWewO2vxtA==",
-      "dev": true,
-      "requires": {
-        "component-emitter": "~1.3.0",
-        "component-inherit": "0.0.3",
-        "debug": "~3.1.0",
-        "engine.io-parser": "~2.2.0",
-        "has-cors": "1.1.0",
-        "indexof": "0.0.1",
-        "parseqs": "0.0.6",
-        "parseuri": "0.0.6",
-        "ws": "~7.4.2",
-        "xmlhttprequest-ssl": "~1.5.4",
-        "yeast": "0.1.2"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        }
-      }
-    },
     "engine.io-parser": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.2.1.tgz",
-      "integrity": "sha512-x+dN/fBH8Ro8TFwJ+rkB2AmuVw9Yu2mockR/p3W8f8YtExwFgDvBDi0GWyb4ZLkpahtDGZgtr3zLovanJghPqg==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.2.tgz",
+      "integrity": "sha512-sHfEQv6nmtJrq6TKuIz5kyEKH/qSdK56H/A+7DnAuUPWosnIZAS2NHNcPLmyjtY3cGS/MqJdZbUjW97JU72iYg==",
       "dev": true,
       "requires": {
-        "after": "0.8.2",
-        "arraybuffer.slice": "~0.0.7",
-        "base64-arraybuffer": "0.1.4",
-        "blob": "0.0.5",
-        "has-binary2": "~1.0.2"
+        "base64-arraybuffer": "0.1.4"
       }
     },
     "enquirer": {
@@ -3802,17 +3761,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",
@@ -4976,29 +4935,6 @@
         "function-bind": "^1.1.1"
       }
     },
-    "has-binary2": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-binary2/-/has-binary2-1.0.3.tgz",
-      "integrity": "sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==",
-      "dev": true,
-      "requires": {
-        "isarray": "2.0.1"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
-          "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=",
-          "dev": true
-        }
-      }
-    },
-    "has-cors": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
-      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=",
-      "dev": true
-    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -5267,12 +5203,6 @@
       "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
       "dev": true
     },
-    "indexof": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
-      "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=",
-      "dev": true
-    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -5926,9 +5856,9 @@
       "dev": true
     },
     "karma": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/karma/-/karma-5.2.3.tgz",
-      "integrity": "sha512-tHdyFADhVVPBorIKCX8A37iLHxc6RBRphkSoQ+MLKdAtFn1k97tD8WUGi1KlEtDZKL3hui0qhsY9HXUfSNDYPQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/karma/-/karma-6.0.0.tgz",
+      "integrity": "sha512-Tc9VlrmAlOUjsi+5tyNlo18TWiOps3wo4HJYqfZImyTrek2gUASmW6q+bEIE1U5w9f+sQ97P5PbbUCp3uVNqrQ==",
       "dev": true,
       "requires": {
         "body-parser": "^1.19.0",
@@ -5949,13 +5879,22 @@
         "qjobs": "^1.2.0",
         "range-parser": "^1.2.1",
         "rimraf": "^3.0.2",
-        "socket.io": "^2.3.0",
+        "socket.io": "^3.0.4",
         "source-map": "^0.6.1",
         "tmp": "0.2.1",
-        "ua-parser-js": "0.7.22",
-        "yargs": "^15.3.1"
+        "ua-parser-js": "^0.7.23",
+        "yargs": "^16.1.1"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "braces": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
@@ -5965,6 +5904,32 @@
             "fill-range": "^7.0.1"
           }
         },
+        "cliui": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^7.0.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
         "fill-range": {
           "version": "7.0.1",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -5994,6 +5959,44 @@
           "requires": {
             "is-number": "^7.0.0"
           }
+        },
+        "wrap-ansi": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "y18n": {
+          "version": "5.0.5",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz",
+          "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==",
+          "dev": true
+        },
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "20.2.4",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
+          "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==",
+          "dev": true
         }
       }
     },
@@ -7573,18 +7576,6 @@
         "parse5": "^6.0.1"
       }
     },
-    "parseqs": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
-      "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==",
-      "dev": true
-    },
-    "parseuri": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
-      "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==",
-      "dev": true
-    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -9472,125 +9463,69 @@
       }
     },
     "socket.io": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-2.4.1.tgz",
-      "integrity": "sha512-Si18v0mMXGAqLqCVpTxBa8MGqriHGQh8ccEOhmsmNS3thNCGBwO8WGrwMibANsWtQQ5NStdZwHqZR3naJVFc3w==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-3.0.5.tgz",
+      "integrity": "sha512-5yWQ43P/4IttmPCGKDQ3CVocBiJWGpibyhYJxgUhf69EHMzmK8XW0DkmHIoYdLmZaVZJyiEkUqpeC7rSCIqekw==",
       "dev": true,
       "requires": {
-        "debug": "~4.1.0",
-        "engine.io": "~3.5.0",
-        "has-binary2": "~1.0.2",
-        "socket.io-adapter": "~1.1.0",
-        "socket.io-client": "2.4.0",
-        "socket.io-parser": "~3.4.0"
+        "@types/cookie": "^0.4.0",
+        "@types/cors": "^2.8.8",
+        "@types/node": "^14.14.10",
+        "accepts": "~1.3.4",
+        "base64id": "~2.0.0",
+        "debug": "~4.3.1",
+        "engine.io": "~4.0.6",
+        "socket.io-adapter": "~2.0.3",
+        "socket.io-parser": "~4.0.3"
       },
       "dependencies": {
         "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
           "dev": true,
           "requires": {
-            "ms": "^2.1.1"
+            "ms": "2.1.2"
           }
         },
         "ms": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
           "dev": true
         }
       }
     },
     "socket.io-adapter": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-1.1.2.tgz",
-      "integrity": "sha512-WzZRUj1kUjrTIrUKpZLEzFZ1OLj5FwLlAFQs9kuZJzJi5DKdU7FsWc36SNmA8iDOtwBQyT8FkrriRM8vXLYz8g==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.0.3.tgz",
+      "integrity": "sha512-2wo4EXgxOGSFueqvHAdnmi5JLZzWqMArjuP4nqC26AtLh5PoCPsaRbRdah2xhcwTAMooZfjYiNVNkkmmSMaxOQ==",
       "dev": true
     },
-    "socket.io-client": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.4.0.tgz",
-      "integrity": "sha512-M6xhnKQHuuZd4Ba9vltCLT9oa+YvTsP8j9NcEiLElfIg8KeYPyhWOes6x4t+LTAC8enQbE/995AdTem2uNyKKQ==",
-      "dev": true,
-      "requires": {
-        "backo2": "1.0.2",
-        "component-bind": "1.0.0",
-        "component-emitter": "~1.3.0",
-        "debug": "~3.1.0",
-        "engine.io-client": "~3.5.0",
-        "has-binary2": "~1.0.2",
-        "indexof": "0.0.1",
-        "parseqs": "0.0.6",
-        "parseuri": "0.0.6",
-        "socket.io-parser": "~3.3.0",
-        "to-array": "0.1.4"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "isarray": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
-          "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=",
-          "dev": true
-        },
-        "socket.io-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.3.1.tgz",
-          "integrity": "sha512-1QLvVAe8dTz+mKmZ07Swxt+LAo4Y1ff50rlyoEx00TQmDFVQYPfcqGvIDJLGaBdhdNCecXtyKpD+EgKGcmmbuQ==",
-          "dev": true,
-          "requires": {
-            "component-emitter": "~1.3.0",
-            "debug": "~3.1.0",
-            "isarray": "2.0.1"
-          }
-        }
-      }
-    },
     "socket.io-parser": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.4.1.tgz",
-      "integrity": "sha512-11hMgzL+WCLWf1uFtHSNvliI++tcRUWdoeYuwIl+Axvwy9z2gQM+7nJyN3STj1tLj5JyIUH8/gpDGxzAlDdi0A==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.3.tgz",
+      "integrity": "sha512-m4ybFiP4UYVORRt7jcdqf8UWx+ywVdAqqsJyruXxAdD3Sv6MDemijWij34mOWdMJ55bEdIb9jACBhxUgNK6sxw==",
       "dev": true,
       "requires": {
-        "component-emitter": "1.2.1",
-        "debug": "~4.1.0",
-        "isarray": "2.0.1"
+        "@types/component-emitter": "^1.2.10",
+        "component-emitter": "~1.3.0",
+        "debug": "~4.3.1"
       },
       "dependencies": {
-        "component-emitter": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
-          "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
-          "dev": true
-        },
         "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
           "dev": true,
           "requires": {
-            "ms": "^2.1.1"
+            "ms": "2.1.2"
           }
         },
-        "isarray": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
-          "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=",
-          "dev": true
-        },
         "ms": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
           "dev": true
         }
       }
@@ -10427,12 +10362,6 @@
         "rimraf": "^3.0.0"
       }
     },
-    "to-array": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",
-      "integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA=",
-      "dev": true
-    },
     "to-buffer": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
@@ -10606,9 +10535,9 @@
       }
     },
     "ua-parser-js": {
-      "version": "0.7.22",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.22.tgz",
-      "integrity": "sha512-YUxzMjJ5T71w6a8WWVcMGM6YWOTX27rCoIQgLXiWaxqXSx9D7DNjiGWn1aJIRSQ5qr0xuhra77bSIh6voR/46Q==",
+      "version": "0.7.23",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.23.tgz",
+      "integrity": "sha512-m4hvMLxgGHXG3O3fQVAyyAQpZzDOvwnhOTjYz5Xmr7r/+LpkNy3vJXdVRWgd1TkAb7NGROZuSy96CrlNVjA7KA==",
       "dev": true
     },
     "unbzip2-stream": {
@@ -10972,6 +10901,12 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
+      "dev": true
+    },
     "vfile": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
@@ -11111,12 +11046,6 @@
       "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
       "dev": true
     },
-    "xmlhttprequest-ssl": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",
-      "integrity": "sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=",
-      "dev": true
-    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -11180,12 +11109,6 @@
         "fd-slicer": "~1.1.0"
       }
     },
-    "yeast": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
-      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=",
-      "dev": true
-    },
     "yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 531d66861..9ecb9c9dd 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",
@@ -115,14 +115,14 @@
     "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",
     "hugo-bin": "^0.68.0",
     "ip": "^1.1.5",
     "jquery": "^3.5.1",
-    "karma": "^5.2.3",
+    "karma": "^6.0.0",
     "karma-browserstack-launcher": "1.4.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index ee4287c92..8f28d0277 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -55,7 +55,6 @@
 // Alternate buttons
 //
 
-// scss-docs-start btn-variant-loops
 @each $color, $value in $theme-colors {
   .btn-#{$color} {
     @include button-variant($value, $value);
@@ -67,7 +66,6 @@
     @include button-outline-variant($value);
   }
 }
-// scss-docs-end btn-variant-loops
 
 
 //
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 6dd4dd329..06ab5644d 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -202,7 +202,6 @@
   .modal-xl { max-width: $modal-xl; }
 }
 
-// scss-docs-start modal-fullscreen-loop
 @each $breakpoint in map-keys($grid-breakpoints) {
   $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
   $postfix: if($infix != "", $infix + "-down", "");
@@ -234,4 +233,3 @@
     }
   }
 }
-// scss-docs-end modal-fullscreen-loop
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 2b4d09385..852328aca 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -148,7 +148,6 @@
   background-size: 100%;
 }
 
-// scss-docs-start navbar-expand-loop
 // Generate series of `.navbar-expand-*` responsive classes for configuring
 // where your navbar collapses.
 .navbar-expand {
@@ -186,7 +185,6 @@
     }
   }
 }
-// scss-docs-end navbar-expand-loop
 
 
 // Navbar themes
diff --git a/scss/_progress.scss b/scss/_progress.scss
index 5715ab00c..b48ffc4b8 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -1,12 +1,9 @@
 // Disable animation if transitions are disabled
-
-// scss-docs-start progress-keyframes
 @if $enable-transitions {
   @keyframes progress-bar-stripes {
     0% { background-position-x: $progress-height; }
   }
 }
-// scss-docs-end progress-keyframes
 
 .progress {
   display: flex;
diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index 8e19bae51..7444ed1d1 100644
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -2,11 +2,9 @@
 // Rotating border
 //
 
-// scss-docs-start spinner-border-keyframes
 @keyframes spinner-border {
   to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
 }
-// scss-docs-end spinner-border-keyframes
 
 .spinner-border {
   display: inline-block;
@@ -30,7 +28,6 @@
 // Growing circle
 //
 
-// scss-docs-start spinner-grow-keyframes
 @keyframes spinner-grow {
   0% {
     transform: scale(0);
@@ -40,7 +37,6 @@
     transform: none;
   }
 }
-// scss-docs-end spinner-grow-keyframes
 
 .spinner-grow {
   display: inline-block;
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;
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index f54fa941c..3d677728a 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -344,7 +344,6 @@ $container-padding-x: $grid-gutter-width / 2 !default;
 //
 // Define common padding and border radius sizes and more.
 
-// scss-docs-start border-variables
 $border-width:                1px !default;
 $border-widths: (
   0: 0,
@@ -356,14 +355,11 @@ $border-widths: (
 ) !default;
 
 $border-color:                $gray-300 !default;
-// scss-docs-end border-variables
 
-// scss-docs-start border-radius-variables
 $border-radius:               .25rem !default;
 $border-radius-sm:            .2rem !default;
 $border-radius-lg:            .3rem !default;
 $border-radius-pill:          50rem !default;
-// scss-docs-end border-radius-variables
 
 $box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
 $box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
@@ -440,14 +436,12 @@ $font-sizes: (
 ) !default;
 // scss-docs-end font-sizes
 
-// scss-docs-start headings-variables
 $headings-margin-bottom:      $spacer / 2 !default;
 $headings-font-family:        null !default;
 $headings-font-style:         null !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
 $headings-color:              null !default;
-// scss-docs-end headings-variables
 
 // scss-docs-start display-headings
 $display-font-sizes: (
@@ -463,7 +457,6 @@ $display-font-weight: 300 !default;
 $display-line-height: $headings-line-height !default;
 // scss-docs-end display-headings
 
-// scss-docs-start type-variables
 $lead-font-size:              $font-size-base * 1.25 !default;
 $lead-font-weight:            300 !default;
 
@@ -498,7 +491,6 @@ $nested-kbd-font-weight:      $font-weight-bold !default;
 $list-inline-padding:         .5rem !default;
 
 $mark-bg:                     #fcf8e3 !default;
-// scss-docs-end type-variables
 
 
 // Tables
@@ -541,9 +533,7 @@ $table-group-separator-color: currentColor !default;
 $table-caption-color:         $text-muted !default;
 
 $table-bg-scale:              -80% !default;
-// scss-docs-end table-variables
 
-// scss-docs-start table-loop
 $table-variants: (
   "primary":    shift-color($primary, $table-bg-scale),
   "secondary":  shift-color($secondary, $table-bg-scale),
@@ -554,14 +544,13 @@ $table-variants: (
   "light":      $light,
   "dark":       $dark,
 ) !default;
-// scss-docs-end table-loop
+// scss-docs-end table-variables
 
 
 // Buttons + Forms
 //
 // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
 
-// scss-docs-start input-btn-variables
 $input-btn-padding-y:         .375rem !default;
 $input-btn-padding-x:         .75rem !default;
 $input-btn-font-family:       null !default;
@@ -582,14 +571,12 @@ $input-btn-padding-x-lg:      1rem !default;
 $input-btn-font-size-lg:      $font-size-lg !default;
 
 $input-btn-border-width:      $border-width !default;
-// scss-docs-end input-btn-variables
 
 
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
 
-// scss-docs-start btn-variables
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;
@@ -633,28 +620,22 @@ $btn-active-bg-shade-amount:      20% !default;
 $btn-active-bg-tint-amount:       20% !default;
 $btn-active-border-shade-amount:  25% !default;
 $btn-active-border-tint-amount:   10% !default;
-// scss-docs-end btn-variables
 
 
 // Forms
 
-// scss-docs-start form-text-variables
 $form-text-margin-top:                  .25rem !default;
 $form-text-font-size:                   $small-font-size !default;
 $form-text-font-style:                  null !default;
 $form-text-font-weight:                 null !default;
 $form-text-color:                       $text-muted !default;
-// scss-docs-end form-text-variables
 
-// scss-docs-start form-label-variables
 $form-label-margin-bottom:              .5rem !default;
 $form-label-font-size:                  null !default;
 $form-label-font-style:                 null !default;
 $form-label-font-weight:                null !default;
 $form-label-color:                      null !default;
-// scss-docs-end form-label-variables
 
-// scss-docs-start form-input-variables
 $input-padding-y:                       $input-btn-padding-y !default;
 $input-padding-x:                       $input-btn-padding-x !default;
 $input-font-family:                     $input-btn-font-family !default;
@@ -703,9 +684,8 @@ $input-height-sm:                       add($input-line-height * 1em, add($input
 $input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
 
 $input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-// scss-docs-end form-input-variables
 
-// scss-docs-start form-check-variables
+
 $form-check-input-width:                  1em !default;
 $form-check-min-height:                   $font-size-base * $line-height-base !default;
 $form-check-padding-start:                $form-check-input-width + .5em !default;
@@ -738,10 +718,6 @@ $form-check-input-disabled-opacity:        .5 !default;
 $form-check-label-disabled-opacity:        $form-check-input-disabled-opacity !default;
 $form-check-btn-check-disabled-opacity:    $btn-disabled-opacity !default;
 
-$form-check-inline-margin-end:    1rem !default;
-// scss-docs-end form-check-variables
-
-// scss-docs-start form-switch-variables
 $form-switch-color:               rgba(0, 0, 0, .25) !default;
 $form-switch-width:               2em !default;
 $form-switch-padding-start:       $form-switch-width + .5em !default;
@@ -754,18 +730,16 @@ $form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www
 $form-switch-checked-color:       $component-active-color !default;
 $form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
 $form-switch-checked-bg-position: right center !default;
-// scss-docs-end form-switch-variables
 
-// scss-docs-start input-group-variables
+$form-check-inline-margin-end:    1rem !default;
+
 $input-group-addon-padding-y:           $input-padding-y !default;
 $input-group-addon-padding-x:           $input-padding-x !default;
 $input-group-addon-font-weight:         $input-font-weight !default;
 $input-group-addon-color:               $input-color !default;
 $input-group-addon-bg:                  $gray-200 !default;
 $input-group-addon-border-color:        $input-border-color !default;
-// scss-docs-end input-group-variables
 
-// scss-docs-start form-select-variables
 $form-select-padding-y:             $input-padding-y !default;
 $form-select-padding-x:             $input-padding-x !default;
 $form-select-font-family:           $input-font-family !default;
@@ -803,9 +777,7 @@ $form-select-font-size-sm:        $input-font-size-sm !default;
 $form-select-padding-y-lg:        $input-padding-y-lg !default;
 $form-select-padding-x-lg:        $input-padding-x-lg !default;
 $form-select-font-size-lg:        $input-font-size-lg !default;
-// scss-docs-end form-select-variables
 
-// scss-docs-start form-range-variables
 $form-range-track-width:          100% !default;
 $form-range-track-height:         .5rem !default;
 $form-range-track-cursor:         pointer !default;
@@ -824,15 +796,11 @@ $form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For f
 $form-range-thumb-active-bg:               tint-color($component-active-bg, 70%) !default;
 $form-range-thumb-disabled-bg:             $gray-500 !default;
 $form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-// scss-docs-end form-range-variables
 
-// scss-docs-start form-file-variables
 $form-file-button-color:          $input-color !default;
 $form-file-button-bg:             $input-group-addon-bg !default;
 $form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%) !default;
-// scss-docs-end form-file-variables
 
-// scss-docs-start form-floating-variables
 $form-floating-height:            add(3.5rem, $input-height-border) !default;
 $form-floating-padding-x:         $input-padding-x !default;
 $form-floating-padding-y:         1rem !default;
@@ -841,11 +809,9 @@ $form-floating-input-padding-b:   .625rem !default;
 $form-floating-label-opacity:     .65 !default;
 $form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem) !default;
 $form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out !default;
-// scss-docs-end form-floating-variables
 
 // Form validation
 
-// scss-docs-start form-feedback-variables
 $form-feedback-margin-top:          $form-text-margin-top !default;
 $form-feedback-font-size:           $form-text-font-size !default;
 $form-feedback-font-style:          $form-text-font-style !default;
@@ -856,7 +822,6 @@ $form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
 $form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' 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>") !default;
 $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
-// scss-docs-end form-feedback-variables
 
 // scss-docs-start form-validation-states
 $form-validation-states: (
@@ -889,7 +854,6 @@ $zindex-tooltip:                    1070 !default;
 
 // Navs
 
-// scss-docs-start nav-variables
 $nav-link-padding-y:                .5rem !default;
 $nav-link-padding-x:                1rem !default;
 $nav-link-font-size:                null !default;
@@ -910,12 +874,10 @@ $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg
 $nav-pills-border-radius:           $border-radius !default;
 $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
-// scss-docs-end nav-variables
 
 
 // Navbar
 
-// scss-docs-start navbar-variables
 $navbar-padding-y:                  $spacer / 2 !default;
 $navbar-padding-x:                  null !default;
 
@@ -934,9 +896,7 @@ $navbar-toggler-font-size:          $font-size-lg !default;
 $navbar-toggler-border-radius:      $btn-border-radius !default;
 $navbar-toggler-focus-width:        $btn-focus-width !default;
 $navbar-toggler-transition:         box-shadow .15s ease-in-out !default;
-// scss-docs-end navbar-variables
 
-// scss-docs-start navbar-theme-variables
 $navbar-dark-color:                 rgba($white, .55) !default;
 $navbar-dark-hover-color:           rgba($white, .75) !default;
 $navbar-dark-active-color:          $white !default;
@@ -955,14 +915,12 @@ $navbar-light-brand-color:                $navbar-light-active-color !default;
 $navbar-light-brand-hover-color:          $navbar-light-active-color !default;
 $navbar-dark-brand-color:                 $navbar-dark-active-color !default;
 $navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
-// scss-docs-end navbar-theme-variables
 
 
 // Dropdowns
 //
 // Dropdown menu container and contents.
 
-// scss-docs-start dropdown-variables
 $dropdown-min-width:                10rem !default;
 $dropdown-padding-x:                0 !default;
 $dropdown-padding-y:                .5rem !default;
@@ -992,9 +950,7 @@ $dropdown-item-padding-x:           $spacer !default;
 
 $dropdown-header-color:             $gray-600 !default;
 $dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
-// scss-docs-end dropdown-variables
 
-// scss-docs-start dropdown-dark-variables
 $dropdown-dark-color:               $gray-300 !default;
 $dropdown-dark-bg:                  $gray-800 !default;
 $dropdown-dark-border-color:        $dropdown-border-color !default;
@@ -1007,12 +963,10 @@ $dropdown-dark-link-active-color:   $dropdown-link-active-color !default;
 $dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;
 $dropdown-dark-link-disabled-color: $gray-500 !default;
 $dropdown-dark-header-color:        $gray-500 !default;
-// scss-docs-end dropdown-dark-variables
 
 
 // Pagination
 
-// scss-docs-start pagination-variables
 $pagination-padding-y:              .375rem !default;
 $pagination-padding-x:              .75rem !default;
 $pagination-padding-y-sm:           .25rem !default;
@@ -1048,12 +1002,9 @@ $pagination-transition:              color .15s ease-in-out, background-color .1
 
 $pagination-border-radius-sm:       $border-radius-sm !default;
 $pagination-border-radius-lg:       $border-radius-lg !default;
-// scss-docs-end pagination-variables
-
 
 // Cards
 
-// scss-docs-start card-variables
 $card-spacer-y:                     $spacer !default;
 $card-spacer-x:                     $spacer !default;
 $card-title-spacer-y:               $spacer / 2 !default;
@@ -1068,13 +1019,12 @@ $card-cap-color:                    null !default;
 $card-height:                       null !default;
 $card-color:                        null !default;
 $card-bg:                           $white !default;
+
 $card-img-overlay-padding:          $spacer !default;
+
 $card-group-margin:                 $grid-gutter-width / 2 !default;
-// scss-docs-end card-variables
 
 // Accordion
-
-// scss-docs-start accordion-variables
 $accordion-padding-y:                     1rem !default;
 $accordion-padding-x:                     1.25rem !default;
 $accordion-color:                         $body-color !default;
@@ -1105,11 +1055,9 @@ $accordion-icon-transform:                rotate(180deg) !default;
 
 $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
 $accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-// scss-docs-end accordion-variables
 
 // Tooltips
 
-// scss-docs-start tooltip-variables
 $tooltip-font-size:                 $font-size-sm !default;
 $tooltip-max-width:                 200px !default;
 $tooltip-color:                     $white !default;
@@ -1123,22 +1071,18 @@ $tooltip-margin:                    0 !default;
 $tooltip-arrow-width:               .8rem !default;
 $tooltip-arrow-height:              .4rem !default;
 $tooltip-arrow-color:               $tooltip-bg !default;
-// scss-docs-end tooltip-variables
 
 // Form tooltips must come after regular tooltips
-// scss-docs-start tooltip-feedback-variables
 $form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
 $form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
 $form-feedback-tooltip-font-size:     $tooltip-font-size !default;
 $form-feedback-tooltip-line-height:   null !default;
 $form-feedback-tooltip-opacity:       $tooltip-opacity !default;
 $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
-// scss-docs-start tooltip-feedback-variables
 
 
 // Popovers
 
-// scss-docs-start popover-variables
 $popover-font-size:                 $font-size-sm !default;
 $popover-bg:                        $white !default;
 $popover-max-width:                 276px !default;
@@ -1162,12 +1106,10 @@ $popover-arrow-height:              .5rem !default;
 $popover-arrow-color:               $popover-bg !default;
 
 $popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
-// scss-docs-end popover-variables
 
 
 // Toasts
 
-// scss-docs-start toast-variables
 $toast-max-width:                   350px !default;
 $toast-padding-x:                   .75rem !default;
 $toast-padding-y:                   .5rem !default;
@@ -1183,26 +1125,24 @@ $toast-spacing:                     $container-padding-x !default;
 $toast-header-color:                $gray-600 !default;
 $toast-header-background-color:     rgba($white, .85) !default;
 $toast-header-border-color:         rgba(0, 0, 0, .05) !default;
-// scss-docs-end toast-variables
 
 
 // Badges
 
-// scss-docs-start badge-variables
 $badge-font-size:                   .75em !default;
 $badge-font-weight:                 $font-weight-bold !default;
 $badge-color:                       $white !default;
 $badge-padding-y:                   .35em !default;
 $badge-padding-x:                   .65em !default;
 $badge-border-radius:               $border-radius !default;
-// scss-docs-end badge-variables
 
 
 // Modals
 
-// scss-docs-start modal-variables
+// Padding applied to the modal body
 $modal-inner-padding:               $spacer !default;
 
+// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
 $modal-footer-margin-between:       .5rem !default;
 
 $modal-dialog-margin:               .5rem !default;
@@ -1238,30 +1178,28 @@ $modal-fade-transform:              translate(0, -50px) !default;
 $modal-show-transform:              none !default;
 $modal-transition:                  transform .3s ease-out !default;
 $modal-scale-transform:             scale(1.02) !default;
-// scss-docs-end modal-variables
 
 
 // Alerts
 //
 // Define alert colors, border radius, and padding.
 
-// scss-docs-start alert-variables
-$alert-padding-y:               $spacer !default;
-$alert-padding-x:               $spacer !default;
-$alert-margin-bottom:           1rem !default;
-$alert-border-radius:           $border-radius !default;
-$alert-link-font-weight:        $font-weight-bold !default;
-$alert-border-width:            $border-width !default;
-$alert-bg-scale:                -80% !default;
-$alert-border-scale:            -70% !default;
-$alert-color-scale:             40% !default;
-$alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
-// scss-docs-end alert-variables
+$alert-padding-y:                   $spacer !default;
+$alert-padding-x:                   $spacer !default;
+$alert-margin-bottom:               1rem !default;
+$alert-border-radius:               $border-radius !default;
+$alert-link-font-weight:            $font-weight-bold !default;
+$alert-border-width:                $border-width !default;
+
+$alert-bg-scale:                    -80% !default;
+$alert-border-scale:                -70% !default;
+$alert-color-scale:                 40% !default;
+
+$alert-dismissible-padding-r:       $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 
 
 // Progress bars
 
-// scss-docs-start progress-variables
 $progress-height:                   1rem !default;
 $progress-font-size:                $font-size-base * .75 !default;
 $progress-bg:                       $gray-200 !default;
@@ -1271,12 +1209,10 @@ $progress-bar-color:                $white !default;
 $progress-bar-bg:                   $primary !default;
 $progress-bar-animation-timing:     1s linear infinite !default;
 $progress-bar-transition:           width .6s ease !default;
-// scss-docs-end progress-variables
 
 
 // List group
 
-// scss-docs-start list-group-variables
 $list-group-color:                  null !default;
 $list-group-bg:                     $white !default;
 $list-group-border-color:           rgba($black, .125) !default;
@@ -1301,32 +1237,26 @@ $list-group-action-hover-color:     $list-group-action-color !default;
 
 $list-group-action-active-color:    $body-color !default;
 $list-group-action-active-bg:       $gray-200 !default;
-// scss-docs-end list-group-variables
 
 
 // Image thumbnails
 
-// scss-docs-start thumbnail-variables
 $thumbnail-padding:                 .25rem !default;
 $thumbnail-bg:                      $body-bg !default;
 $thumbnail-border-width:            $border-width !default;
 $thumbnail-border-color:            $gray-300 !default;
 $thumbnail-border-radius:           $border-radius !default;
 $thumbnail-box-shadow:              $box-shadow-sm !default;
-// scss-docs-end thumbnail-variables
 
 
 // Figures
 
-// scss-docs-start figure-variables
 $figure-caption-font-size:          $small-font-size !default;
 $figure-caption-color:              $gray-600 !default;
-// scss-docs-end figure-variables
 
 
 // Breadcrumbs
 
-// scss-docs-start breadcrumb-variables
 $breadcrumb-font-size:              null !default;
 $breadcrumb-padding-y:              0 !default;
 $breadcrumb-padding-x:              0 !default;
@@ -1338,11 +1268,9 @@ $breadcrumb-active-color:           $gray-600 !default;
 $breadcrumb-divider:                quote("/") !default;
 $breadcrumb-divider-flipped:        $breadcrumb-divider !default;
 $breadcrumb-border-radius:          null !default;
-// scss-docs-end breadcrumb-variables
 
 // Carousel
 
-// scss-docs-start carousel-variables
 $carousel-control-color:             $white !default;
 $carousel-control-width:             15% !default;
 $carousel-control-opacity:           .5 !default;
@@ -1374,12 +1302,10 @@ $carousel-transition:                transform $carousel-transition-duration eas
 $carousel-dark-indicator-active-bg:  $black !default;
 $carousel-dark-caption-color:        $black !default;
 $carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;
-// scss-docs-end carousel-variables
 
 
 // Spinners
 
-// scss-docs-start spinner-variables
 $spinner-width:           2rem !default;
 $spinner-height:          $spinner-width !default;
 $spinner-border-width:    .25em !default;
@@ -1388,12 +1314,10 @@ $spinner-animation-speed: .75s !default;
 $spinner-width-sm:        1rem !default;
 $spinner-height-sm:       $spinner-width-sm !default;
 $spinner-border-width-sm: .2em !default;
-// scss-docs-end spinner-variables
 
 
 // Close
 
-// scss-docs-start close-variables
 $btn-close-width:            1em !default;
 $btn-close-height:           $btn-close-width !default;
 $btn-close-padding-x:        .25em !default;
@@ -1406,8 +1330,6 @@ $btn-close-hover-opacity:    .75 !default;
 $btn-close-focus-opacity:    1 !default;
 $btn-close-disabled-opacity: .25 !default;
 $btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;
-// scss-docs-end close-variables
-
 
 // Code
 
diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss
index f3eb59511..99ebbc305 100644
--- a/scss/mixins/_alert.scss
+++ b/scss/mixins/_alert.scss
@@ -1,4 +1,3 @@
-// scss-docs-start alert-variant-mixin
 @mixin alert-variant($background, $border, $color) {
   color: $color;
   @include gradient-bg($background);
@@ -8,4 +7,3 @@
     color: shade-color($color, 20%);
   }
 }
-// scss-docs-end alert-variant-mixin
diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index 616decbce..819b8abd4 100644
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -14,7 +14,6 @@
   @return $return;
 }
 
-// scss-docs-start border-radius-mixins
 @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
   @if $enable-rounded {
     border-radius: valid-radius($radius);
@@ -75,4 +74,3 @@
     border-bottom-left-radius: valid-radius($radius);
   }
 }
-// scss-docs-end border-radius-mixins
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index c06fa4a98..3fbd70896 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -3,7 +3,6 @@
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
 
-// scss-docs-start btn-variant-mixin
 @mixin button-variant(
   $background,
   $border,
@@ -72,9 +71,7 @@
     border-color: $disabled-border;
   }
 }
-// scss-docs-end btn-variant-mixin
 
-// scss-docs-start btn-outline-variant-mixin
 @mixin button-outline-variant(
   $color,
   $color-hover: color-contrast($color),
@@ -121,13 +118,11 @@
     background-color: transparent;
   }
 }
-// scss-docs-end btn-outline-variant-mixin
 
-// scss-docs-start btn-size-mixin
+// Button sizes
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
   padding: $padding-y $padding-x;
   @include font-size($font-size);
   // Manually declare to provide an override to the browser default
   @include border-radius($border-radius, 0);
 }
-// scss-docs-end btn-size-mixin
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 9db92bb90..8be4d2ee9 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -1,7 +1,5 @@
 // This mixin uses an `if()` technique to be compatible with Dart Sass
 // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
-
-// scss-docs-start form-validation-mixins
 @mixin form-validation-state-selector($state) {
   @if ($state == "valid" or $state == "invalid") {
     .was-validated #{if(&, "&", "")}:#{$state},
@@ -124,4 +122,3 @@
     }
   }
 }
-// scss-docs-end form-validation-mixins
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
index e55415f2b..351e9109e 100644
--- a/scss/mixins/_list-group.scss
+++ b/scss/mixins/_list-group.scss
@@ -1,6 +1,5 @@
 // List Groups
 
-// scss-docs-start list-group-mixin
 @mixin list-group-item-variant($state, $background, $color) {
   .list-group-item-#{$state} {
     color: $color;
@@ -21,4 +20,3 @@
     }
   }
 }
-// scss-docs-end list-group-mixin
diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
index 3101b380d..9cb7fd8bc 100644
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -1,6 +1,5 @@
 // Pagination
 
-// scss-docs-start pagination-mixin
 @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
   .page-link {
     padding: $padding-y $padding-x;
@@ -28,4 +27,3 @@
     }
   }
 }
-// scss-docs-end pagination-mixin
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;
diff --git a/site/content/docs/5.0/components/accordion.md b/site/content/docs/5.0/components/accordion.md
index 51e21a314..298b0697a 100644
--- a/site/content/docs/5.0/components/accordion.md
+++ b/site/content/docs/5.0/components/accordion.md
@@ -104,13 +104,3 @@ Add `.accordion-flush` to remove the default `background-color`, some borders, a
 ## Accessibility
 
 Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information.
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for accordions.
diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md
index 3ef2e62cf..f35a044ae 100644
--- a/site/content/docs/5.0/components/alerts.md
+++ b/site/content/docs/5.0/components/alerts.md
@@ -71,24 +71,6 @@ You can see this in action with a live demo:
 When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element.
 {{< /callout >}}
 
-## Sass
-
-### Variables
-
-{{< scss-docs name="alert-variables" file="scss/_variables.scss" >}}
-
-### Variant mixin
-
-Used in combination with `$theme-colors` to create contextual modifier classes for our alerts.
-
-{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}}
-
-### Loop
-
-Loop that generates the modifier classes with the `alert-variant()` mixin.
-
-{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}}
-
 ## JavaScript behavior
 
 ### Triggers
diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md
index 6dd959983..44c85d717 100644
--- a/site/content/docs/5.0/components/badge.md
+++ b/site/content/docs/5.0/components/badge.md
@@ -63,13 +63,3 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
 <span class="badge rounded-pill bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}}
 {{< /badge.inline >}}
 {{< /example >}}
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="badge-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for badges.
diff --git a/site/content/docs/5.0/components/breadcrumb.md b/site/content/docs/5.0/components/breadcrumb.md
index d5c1a1a98..3395fbf67 100644
--- a/site/content/docs/5.0/components/breadcrumb.md
+++ b/site/content/docs/5.0/components/breadcrumb.md
@@ -88,13 +88,3 @@ $breadcrumb-divider: none;
 Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.
 
 For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="breadcrumb-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for breadcrumbs.
diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md
index 063bae1c4..b53263a88 100644
--- a/site/content/docs/5.0/components/buttons.md
+++ b/site/content/docs/5.0/components/buttons.md
@@ -205,25 +205,3 @@ buttons.forEach(function (button) {
   button.toggle()
 })
 ```
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="btn-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin.
-
-{{< scss-docs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" >}}
-
-{{< scss-docs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" >}}
-
-{{< scss-docs name="btn-size-mixin" file="scss/mixins/_buttons.scss" >}}
-
-### Loops
-
-Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`.
-
-{{< scss-docs name="btn-variant-loops" file="scss/_buttons.scss" >}}
diff --git a/site/content/docs/5.0/components/card.md b/site/content/docs/5.0/components/card.md
index d42643768..e38432692 100644
--- a/site/content/docs/5.0/components/card.md
+++ b/site/content/docs/5.0/components/card.md
@@ -721,13 +721,3 @@ Just like with card groups, card footers will automatically line up.
 ### Masonry
 
 In `v4` we used a CSS-only technique to mimic the behavior of [Masonry](https://masonry.desandro.com/)-like columns, but this technique came with lots of unpleasant [side effects](https://github.com/twbs/bootstrap/pull/28922). If you want to have this type of layout in `v5`, you can just make use of Masonry plugin. **Masonry is not included in Bootstrap**, but we've made a [demo example]({{< docsref "/examples/masonry" >}}) to help you get started.
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="card-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for cards.
diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md
index 7fbbbe72f..49bb0f9bf 100644
--- a/site/content/docs/5.0/components/carousel.md
+++ b/site/content/docs/5.0/components/carousel.md
@@ -450,13 +450,3 @@ myCarousel.addEventListener('slide.bs.carousel', function () {
 ### Change transition duration
 
 The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out`).
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="carousel-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for carousels.
diff --git a/site/content/docs/5.0/components/close-button.md b/site/content/docs/5.0/components/close-button.md
index 04f6da98c..a6bb3f4c0 100644
--- a/site/content/docs/5.0/components/close-button.md
+++ b/site/content/docs/5.0/components/close-button.md
@@ -30,13 +30,3 @@ Change the default `.btn-close` to be white with the `.btn-close-white` class. T
 <button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
 <button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>
 {{< /example >}}
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="close-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for close buttons.
diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md
index 75e39b428..a50dcf0f5 100644
--- a/site/content/docs/5.0/components/dropdowns.md
+++ b/site/content/docs/5.0/components/dropdowns.md
@@ -1010,19 +1010,3 @@ myDropdown.addEventListener('show.bs.dropdown', function () {
   // do something...
 })
 ```
-
-## Sass
-
-### Variables
-
-Variables for all dropdowns:
-
-{{< scss-docs name="dropdown-variables" file="scss/_variables.scss" >}}
-
-Variables for the [dark dropdown](#dark-dropdowns):
-
-{{< scss-docs name="dropdown-dark-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for dropdowns.
diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md
index 02f146822..5213ef5ca 100644
--- a/site/content/docs/5.0/components/list-group.md
+++ b/site/content/docs/5.0/components/list-group.md
@@ -470,21 +470,3 @@ tabEl.addEventListener('shown.bs.tab', function (event) {
   event.relatedTarget // previous active tab
 })
 ```
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s.
-
-{{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
-
-### Loop
-
-Loop that generates the modifier classes with the `list-group-item-variant()` mixin.
-
-{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}}
diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md
index 4e3438976..52493d4e8 100644
--- a/site/content/docs/5.0/components/modal.md
+++ b/site/content/docs/5.0/components/modal.md
@@ -954,19 +954,3 @@ myModalEl.addEventListener('hidden.bs.modal', function (event) {
   // do something...
 })
 ```
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="modal-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for modals.
-
-### Loop
-
-[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.
-
-{{< scss-docs name="modal-fullscreen-loop" file="scss/_modal.scss" >}}
diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md
index 3d79d21e6..e59c7c25b 100644
--- a/site/content/docs/5.0/components/navbar.md
+++ b/site/content/docs/5.0/components/navbar.md
@@ -598,21 +598,3 @@ Sometimes you want to use the collapse plugin to trigger a container element for
 {{< /example >}}
 
 When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document's structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}
-
-{{< scss-docs name="navbar-theme-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for navbars.
-
-### Loop
-
-[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.
-
-{{< scss-docs name="navbar-expand-loop" file="scss/_navbar.scss" >}}
diff --git a/site/content/docs/5.0/components/navs-tabs.md b/site/content/docs/5.0/components/navs-tabs.md
index a97e245ad..72746d5d7 100644
--- a/site/content/docs/5.0/components/navs-tabs.md
+++ b/site/content/docs/5.0/components/navs-tabs.md
@@ -663,13 +663,3 @@ tabEl.addEventListener('shown.bs.tab', function (event) {
   event.relatedTarget // previous active tab
 })
 ```
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="nav-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for navigations and tabs.
diff --git a/site/content/docs/5.0/components/pagination.md b/site/content/docs/5.0/components/pagination.md
index 6b7c7a3da..23b474589 100644
--- a/site/content/docs/5.0/components/pagination.md
+++ b/site/content/docs/5.0/components/pagination.md
@@ -155,13 +155,3 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
   </ul>
 </nav>
 {{< /example >}}
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-{{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}}
diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md
index d60665e85..ccaf1f63f 100644
--- a/site/content/docs/5.0/components/popovers.md
+++ b/site/content/docs/5.0/components/popovers.md
@@ -401,13 +401,3 @@ myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
   // do something...
 })
 ```
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="popover-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for popovers.
diff --git a/site/content/docs/5.0/components/progress.md b/site/content/docs/5.0/components/progress.md
index ca512b150..92834bebf 100644
--- a/site/content/docs/5.0/components/progress.md
+++ b/site/content/docs/5.0/components/progress.md
@@ -137,19 +137,3 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
   <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
 </div>
 ```
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="progress-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for progress bars.
-
-### Keyframes
-
-Used for creating the CSS animations for `.progress-bar-animated`. Included in the `scss/_progress-bar.scss` stylesheet.
-
-{{< scss-docs name="progress-keyframes" file="scss/_progress.scss" >}}
diff --git a/site/content/docs/5.0/components/spinners.md b/site/content/docs/5.0/components/spinners.md
index f6cad58dc..d2495b420 100644
--- a/site/content/docs/5.0/components/spinners.md
+++ b/site/content/docs/5.0/components/spinners.md
@@ -171,24 +171,6 @@ Use spinners within buttons to indicate an action is currently processing or tak
 </button>
 {{< /example >}}
 
-## Sass
-
-### Variables
-
-{{< scss-docs name="spinner-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for spinners.
-
-### Keyframes
-
-Used for creating the CSS animations for our spinners. Included in the `scss/_spinners.scss` stylesheet.
-
-{{< scss-docs name="spinner-border-keyframes" file="scss/_spinners.scss" >}}
-
-{{< scss-docs name="spinner-grow-keyframes" file="scss/_spinners.scss" >}}
-
 
 [color]:   {{< docsref "/utilities/colors" >}}
 [display]: {{< docsref "/utilities/display" >}}
diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md
index 55b82aef0..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">
@@ -376,13 +376,3 @@ myToastEl.addEventListener('hidden.bs.toast', function () {
   // do something...
 })
 ```
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="toast-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for toasts.
diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md
index d347c78c4..8f5aac533 100644
--- a/site/content/docs/5.0/components/tooltips.md
+++ b/site/content/docs/5.0/components/tooltips.md
@@ -429,13 +429,3 @@ myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
 
 tooltip.hide()
 ```
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="tooltip-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for tooltips.
diff --git a/site/content/docs/5.0/content/figures.md b/site/content/docs/5.0/content/figures.md
index e859aa5b1..f5956614f 100644
--- a/site/content/docs/5.0/content/figures.md
+++ b/site/content/docs/5.0/content/figures.md
@@ -24,9 +24,3 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut
   <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
 </figure>
 {{< /example >}}
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="figure-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/content/images.md b/site/content/docs/5.0/content/images.md
index f1012efbf..271b08e30 100644
--- a/site/content/docs/5.0/content/images.md
+++ b/site/content/docs/5.0/content/images.md
@@ -53,11 +53,3 @@ If you are using the `<picture>` element to specify multiple `<source>` elements
   <img src="..." class="img-fluid img-thumbnail" alt="...">
 </picture>
 ```
-
-## Sass
-
-### Variables
-
-Variables are available for image thumbnails.
-
-{{< scss-docs name="thumbnail-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/content/tables.md b/site/content/docs/5.0/content/tables.md
index 3681e186a..dde90b997 100644
--- a/site/content/docs/5.0/content/tables.md
+++ b/site/content/docs/5.0/content/tables.md
@@ -775,17 +775,9 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
 {{< /tables.inline >}}
 {{< /highlight >}}
 
-## Sass
-
-### Variables
-
-{{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
-
-### Loop
-
-{{< scss-docs name="table-loop" file="scss/_variables.scss" >}}
-
-### Customizing
+## Customizing in Sass
 
 - The factor variables (`$table-striped-bg-factor`, `$table-active-bg-factor` & `$table-hover-bg-factor`) are used to determine the contrast in table variants.
 - Apart from the light & dark table variants, theme colors are lightened by the `$table-bg-level` variable.
+
+{{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/content/typography.md b/site/content/docs/5.0/content/typography.md
index 7d41f04de..cf9c83636 100644
--- a/site/content/docs/5.0/content/typography.md
+++ b/site/content/docs/5.0/content/typography.md
@@ -302,19 +302,3 @@ Align terms and descriptions horizontally by using our grid system's predefined
 ## Responsive font sizes
 
 In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works.
-
-## Sass
-
-### Variables
-
-Headings have some dedicated variables for sizing and spacing.
-
-{{< scss-docs name="headings-variables" file="scss/_variables.scss" >}}
-
-Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/content/reboot" >}}) also have dedicated variables.
-
-{{< scss-docs name="type-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}).
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
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/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 -->
 
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.
diff --git a/site/content/docs/5.0/forms/checks-radios.md b/site/content/docs/5.0/forms/checks-radios.md
index d82c60a25..ae89f5ee3 100644
--- a/site/content/docs/5.0/forms/checks-radios.md
+++ b/site/content/docs/5.0/forms/checks-radios.md
@@ -269,13 +269,3 @@ Different variants of `.btn`, such at the various outlined styles, are supported
 <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
 <label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
 {{< /example >}}
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="form-check-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for checkboxes and radios.
diff --git a/site/content/docs/5.0/forms/floating-labels.md b/site/content/docs/5.0/forms/floating-labels.md
index 56b638707..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">
@@ -100,13 +100,3 @@ When working with the Bootstrap grid system, be sure to place form elements with
   </div>
 </div>
 {{< /example >}}
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for floating label forms.
diff --git a/site/content/docs/5.0/forms/form-control.md b/site/content/docs/5.0/forms/form-control.md
index a28293569..e35f09967 100644
--- a/site/content/docs/5.0/forms/form-control.md
+++ b/site/content/docs/5.0/forms/form-control.md
@@ -130,21 +130,3 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).
   <option value="Chicago">
 </datalist>
 {{< /example >}}
-
-## Sass
-
-### Variables
-
-`$input-*` are shared across most of our form controls (and not buttons).
-
-{{< scss-docs name="form-input-variables" file="scss/_variables.scss" >}}
-
-`$form-label-*` and `$form-text-*` are for our `<label>`s and `.form-text` component.
-
-{{< scss-docs name="form-label-variables" file="scss/_variables.scss" >}}
-
-{{< scss-docs name="form-text-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for form controls.
diff --git a/site/content/docs/5.0/forms/input-group.md b/site/content/docs/5.0/forms/input-group.md
index 96ee31441..0e0836b5f 100644
--- a/site/content/docs/5.0/forms/input-group.md
+++ b/site/content/docs/5.0/forms/input-group.md
@@ -308,13 +308,3 @@ Input groups include support for custom selects and custom file inputs. Browser
   <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
 </div>
 {{< /example >}}
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for input groups.
diff --git a/site/content/docs/5.0/forms/overview.md b/site/content/docs/5.0/forms/overview.md
index 0f922fb42..dcd8e8ccd 100644
--- a/site/content/docs/5.0/forms/overview.md
+++ b/site/content/docs/5.0/forms/overview.md
@@ -142,15 +142,3 @@ For situations where it's not possible to include a visible `<label>` or appropr
 If none of these are present, assistive technologies may resort to using the `placeholder` attribute as a fallback for the accessible name on `<input>` and `<textarea>` elements. The examples in this section provide a few suggested, case-specific approaches.
 
 While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.
-
-## Sass
-
-Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$btn-input-*` and `$input-*` variables.
-
-### Variables
-
-`$btn-input-*` variables are shared global variables between our buttons and our form components. You'll find these frequently reassigned as values to other component-specific variables.
-
-{{< scss-docs name="input-btn-variables" file="scss/_variables.scss" >}}
-
-### Mixins
diff --git a/site/content/docs/5.0/forms/range.md b/site/content/docs/5.0/forms/range.md
index 66d2de423..7e95e0edf 100644
--- a/site/content/docs/5.0/forms/range.md
+++ b/site/content/docs/5.0/forms/range.md
@@ -41,13 +41,3 @@ By default, range inputs "snap" to integer values. To change this, you can speci
 <label for="customRange3" class="form-label">Example range</label>
 <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
 {{< /example >}}
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for range inputs.
diff --git a/site/content/docs/5.0/forms/select.md b/site/content/docs/5.0/forms/select.md
index d82347021..e2b0bd6a8 100644
--- a/site/content/docs/5.0/forms/select.md
+++ b/site/content/docs/5.0/forms/select.md
@@ -73,13 +73,3 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara
   <option value="3">Three</option>
 </select>
 {{< /example >}}
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-There are no mixins for select elements.
diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.0/forms/validation.md
index 70ce26ac1..3f45143d7 100644
--- a/site/content/docs/5.0/forms/validation.md
+++ b/site/content/docs/5.0/forms/validation.md
@@ -349,34 +349,18 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 </form>
 {{< /example >}}
 
-## Sass
+## Customizing
 
-### Variables
+Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
 
-{{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}}
+Please note that we do not recommend customizing these values without also modifying the `form-validation-state` mixin.
 
-### Mixins
-
-Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles.
-
-{{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}}
-
-### Map
-
-This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
+This is the Sass map from `_variables.scss`. Override this and recompile your Sass to generate different states:
 
 {{< scss-docs name="form-validation-states" file="scss/_variables.scss" >}}
 
 Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
 
-### Loop
-
-Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.
+This is the loop from `forms/_validation.scss`. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop:
 
 {{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}}
-
-### Customizing
-
-Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
-
-Please note that we do not recommend customizing `$form-validation-states` values without also modifying the `form-validation-state` mixin.
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
 
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 895b8c275..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
 
@@ -127,6 +129,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
 
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.
diff --git a/site/content/docs/5.0/utilities/borders.md b/site/content/docs/5.0/utilities/borders.md
index 47beafe43..459ca4e72 100644
--- a/site/content/docs/5.0/utilities/borders.md
+++ b/site/content/docs/5.0/utilities/borders.md
@@ -77,19 +77,3 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
 {{< placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" >}}
 {{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}}
 {{< /example >}}
-
-## Sass
-
-### Variables
-
-{{< scss-docs name="border-variables" file="scss/_variables.scss" >}}
-
-{{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}}
-
-### Mixins
-
-{{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}
-
-### Utilities
-
-TODO: this errored out earlier, unclear why...