Add rudimentary nested dropdowns

Split up padding CSS vars for dropdowns
Docs: replace CSS by utilities in examples (#35699 )
2022-02-23 14:04:38 -08:00 · 2022-02-23 14:01:58 -08:00 · 2022-02-23 10:31:18 -08:00 · 2022-02-23 10:24:50 -08:00 · 2022-02-22 15:12:20 +02:00 · 2022-02-22 10:02:47 +02:00
128 changed files with 2013 additions and 2236 deletions
@@ -2,7 +2,7 @@
  "files": [
    {
      "path": "./dist/css/bootstrap-grid.css",
-      "maxSize": "7.25 kB"
+      "maxSize": "7.5 kB"
    },
    {
      "path": "./dist/css/bootstrap-grid.min.css",
@@ -14,7 +14,7 @@
    },
    {
      "path": "./dist/css/bootstrap-reboot.min.css",
-      "maxSize": "2.35 kB"
+      "maxSize": "2.5 kB"
    },
    {
      "path": "./dist/css/bootstrap-utilities.css",
@@ -30,7 +30,7 @@
    },
    {
      "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "23.5 kB"
+      "maxSize": "24 kB"
    },
    {
      "path": "./dist/js/bootstrap.bundle.js",
@@ -61,18 +61,5 @@
    "unicorn/prefer-query-selector": "off",
    "unicorn/prefer-spread": "off",
    "unicorn/prevent-abbreviations": "off"
-  },
-  "overrides": [
-    {
-      "files": "js/src/**/*.js",
-      "plugins": ["ssr-friendly"],
-      "extends": [
-        "plugin:ssr-friendly/recommended"
-      ],
-      "rules": {
-        "ssr-friendly/no-dom-globals-in-react-cc-render": "off",
-        "ssr-friendly/no-dom-globals-in-react-fc": "off"
-      }
-    }
-  ]
+  }
 }
@@ -0,0 +1,19 @@
+name: Close Issue Awaiting Reply
+
+on:
+  schedule:
+    - cron: "0 0 * * *"
+
+jobs:
+  issue-close-require:
+    runs-on: ubuntu-latest
+    if: github.repository == 'twbs/bootstrap'
+    steps:
+      - name: awaiting reply
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: "close-issues"
+          labels: "awaiting-reply"
+          inactive-day: 14
+          body: |
+            As the issue was labeled with `awaiting-reply`, but there has been no response in 14 days, this issue will be closed. If you have any questions, you can comment/reply.
@@ -0,0 +1,19 @@
+name: Issue Labeled
+
+on:
+  issues:
+    types: [labeled]
+
+jobs:
+  issue-labeled:
+    if: github.repository == 'twbs/bootstrap'
+    runs-on: ubuntu-latest
+    steps:
+      - name: awaiting reply
+        if: github.event.label.name == 'awaiting-reply'
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: "create-comment"
+          token: ${{ secrets.GITHUB_TOKEN }}
+          body: |
+            Hello @${{ github.event.issue.user.login }}. Bug reports must include a **live demo** of the issue. Per our [contributing guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md), please create a reduced test case on [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/) and report back with your link, Bootstrap version, and specific browser and Operating System details.
@@ -79,57 +79,58 @@ Read the [Getting started page](https://getbootstrap.com/docs/5.1/getting-starte

 Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.

-<details><summary>Download contents</summary>
+<details>
+  <summary>Download contents</summary>

-```text
-bootstrap/
-├── css/
-│   ├── bootstrap-grid.css
-│   ├── bootstrap-grid.css.map
-│   ├── bootstrap-grid.min.css
-│   ├── bootstrap-grid.min.css.map
-│   ├── bootstrap-grid.rtl.css
-│   ├── bootstrap-grid.rtl.css.map
-│   ├── bootstrap-grid.rtl.min.css
-│   ├── bootstrap-grid.rtl.min.css.map
-│   ├── bootstrap-reboot.css
-│   ├── bootstrap-reboot.css.map
-│   ├── bootstrap-reboot.min.css
-│   ├── bootstrap-reboot.min.css.map
-│   ├── bootstrap-reboot.rtl.css
-│   ├── bootstrap-reboot.rtl.css.map
-│   ├── bootstrap-reboot.rtl.min.css
-│   ├── bootstrap-reboot.rtl.min.css.map
-│   ├── bootstrap-utilities.css
-│   ├── bootstrap-utilities.css.map
-│   ├── bootstrap-utilities.min.css
-│   ├── bootstrap-utilities.min.css.map
-│   ├── bootstrap-utilities.rtl.css
-│   ├── bootstrap-utilities.rtl.css.map
-│   ├── bootstrap-utilities.rtl.min.css
-│   ├── bootstrap-utilities.rtl.min.css.map
-│   ├── bootstrap.css
-│   ├── bootstrap.css.map
-│   ├── bootstrap.min.css
-│   ├── bootstrap.min.css.map
-│   ├── bootstrap.rtl.css
-│   ├── bootstrap.rtl.css.map
-│   ├── bootstrap.rtl.min.css
-│   └── bootstrap.rtl.min.css.map
-└── js/
-    ├── bootstrap.bundle.js
-    ├── bootstrap.bundle.js.map
-    ├── bootstrap.bundle.min.js
-    ├── bootstrap.bundle.min.js.map
-    ├── bootstrap.esm.js
-    ├── bootstrap.esm.js.map
-    ├── bootstrap.esm.min.js
-    ├── bootstrap.esm.min.js.map
-    ├── bootstrap.js
-    ├── bootstrap.js.map
-    ├── bootstrap.min.js
-    └── bootstrap.min.js.map
-```
+  ```text
+  bootstrap/
+  ├── css/
+  │   ├── bootstrap-grid.css
+  │   ├── bootstrap-grid.css.map
+  │   ├── bootstrap-grid.min.css
+  │   ├── bootstrap-grid.min.css.map
+  │   ├── bootstrap-grid.rtl.css
+  │   ├── bootstrap-grid.rtl.css.map
+  │   ├── bootstrap-grid.rtl.min.css
+  │   ├── bootstrap-grid.rtl.min.css.map
+  │   ├── bootstrap-reboot.css
+  │   ├── bootstrap-reboot.css.map
+  │   ├── bootstrap-reboot.min.css
+  │   ├── bootstrap-reboot.min.css.map
+  │   ├── bootstrap-reboot.rtl.css
+  │   ├── bootstrap-reboot.rtl.css.map
+  │   ├── bootstrap-reboot.rtl.min.css
+  │   ├── bootstrap-reboot.rtl.min.css.map
+  │   ├── bootstrap-utilities.css
+  │   ├── bootstrap-utilities.css.map
+  │   ├── bootstrap-utilities.min.css
+  │   ├── bootstrap-utilities.min.css.map
+  │   ├── bootstrap-utilities.rtl.css
+  │   ├── bootstrap-utilities.rtl.css.map
+  │   ├── bootstrap-utilities.rtl.min.css
+  │   ├── bootstrap-utilities.rtl.min.css.map
+  │   ├── bootstrap.css
+  │   ├── bootstrap.css.map
+  │   ├── bootstrap.min.css
+  │   ├── bootstrap.min.css.map
+  │   ├── bootstrap.rtl.css
+  │   ├── bootstrap.rtl.css.map
+  │   ├── bootstrap.rtl.min.css
+  │   └── bootstrap.rtl.min.css.map
+  └── js/
+      ├── bootstrap.bundle.js
+      ├── bootstrap.bundle.js.map
+      ├── bootstrap.bundle.min.js
+      ├── bootstrap.bundle.min.js.map
+      ├── bootstrap.esm.js
+      ├── bootstrap.esm.js.map
+      ├── bootstrap.esm.min.js
+      ├── bootstrap.esm.min.js.map
+      ├── bootstrap.js
+      ├── bootstrap.js.map
+      ├── bootstrap.min.js
+      └── bootstrap.min.js.map
+  ```
 </details>

 We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).
@@ -187,7 +188,7 @@ Get updates on Bootstrap's development and chat with the project maintainers and

 For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](https://semver.org/). Sometimes we screw up, but we adhere to those rules whenever possible.

-See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap. Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com/) contain summaries of the most noteworthy changes made in each release.
+See [the Releases section of our GitHub project](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap. Release announcement posts on [the official Bootstrap blog](https://blog.getbootstrap.com/) contain summaries of the most noteworthy changes made in each release. [Release planning](https://github.com/twbs/release#upcoming-release-schedule) takes place in a separate project.


 ## Creators
@@ -48,7 +48,7 @@ const build = async plugin => {
        babelHelpers: 'bundled'
      })
    ],
-    external: source => {
+    external(source) {
      // Pattern to identify local files
      const pattern = /^(\.{1,2})\//

@@ -83,3 +83,7 @@ params:
    js_bundle_hash:   "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    popper:           "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.2/dist/umd/popper.min.js"
    popper_hash:      "sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn"
+
+  anchors:
+    min: 2
+    max: 5
@@ -6,12 +6,7 @@
 */

 import Data from './dom/data'
-import {
-  executeAfterTransition,
-  getElement,
-  getWindow,
-  getDocument
-} from './util/index'
+import { executeAfterTransition, getElement } from './util/index'
 import EventHandler from './dom/event-handler'
 import Config from './util/config'

@@ -35,8 +30,6 @@ class BaseComponent extends Config {
    }

    this._element = element
-    this._window = getWindow()
-    this._document = getDocument()
    this._config = this._getConfig(config)

    Data.set(this._element, this.constructor.DATA_KEY, this)
@@ -83,6 +76,10 @@ class BaseComponent extends Config {
  static get EVENT_KEY() {
    return `.${this.DATA_KEY}`
  }
+
+  static eventName(name) {
+    return `${name}${this.EVENT_KEY}`
+  }
 }

 export default BaseComponent
@@ -5,7 +5,7 @@
 * --------------------------------------------------------------------------
 */

-import { defineJQueryPlugin, getDocument } from './util/index'
+import { defineJQueryPlugin } from './util/index'
 import EventHandler from './dom/event-handler'
 import BaseComponent from './base-component'

@@ -54,7 +54,7 @@ class Button extends BaseComponent {
 * Data API implementation
 */

-EventHandler.on(getDocument(), EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
  event.preventDefault()

  const button = event.target.closest(SELECTOR_DATA_TOGGLE)
@@ -12,9 +12,7 @@ import {
  isRTL,
  isVisible,
  reflow,
-  triggerTransitionEnd,
-  getDocument,
-  getWindow
+  triggerTransitionEnd
 } from './util/index'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
@@ -131,7 +129,7 @@ class Carousel extends BaseComponent {
    // FIXME TODO use `document.visibilityState`
    // Don't call next when the page isn't visible
    // or the carousel or its parent isn't visible
-    if (!this._document.hidden && isVisible(this._element)) {
+    if (!document.hidden && isVisible(this._element)) {
      this.next()
    }
  }
@@ -281,9 +279,8 @@ class Carousel extends BaseComponent {
    return getNextActiveElement(this._items, activeElement, isNext, this._config.wrap)
  }

-  _triggerSlideEvent(relatedTarget, eventDirectionName) {
+  _triggerSlideEvent(relatedTarget, fromIndex, eventDirectionName) {
    const targetIndex = this._getItemIndex(relatedTarget)
-    const fromIndex = this._getItemIndex(this._getActive())

    return EventHandler.trigger(this._element, EVENT_SLIDE, {
      relatedTarget,
@@ -293,7 +290,7 @@ class Carousel extends BaseComponent {
    })
  }

-  _setActiveIndicatorElement(element) {
+  _setActiveIndicatorElement(index) {
    if (!this._indicatorsElement) {
      return
    }
@@ -303,7 +300,7 @@ class Carousel extends BaseComponent {
    activeIndicator.classList.remove(CLASS_NAME_ACTIVE)
    activeIndicator.removeAttribute('aria-current')

-    const newActiveIndicator = SelectorEngine.findOne(`[data-bs-slide-to="${this._getItemIndex(element)}"]`, this._indicatorsElement)
+    const newActiveIndicator = SelectorEngine.findOne(`[data-bs-slide-to="${index}"]`, this._indicatorsElement)

    if (newActiveIndicator) {
      newActiveIndicator.classList.add(CLASS_NAME_ACTIVE)
@@ -346,7 +343,7 @@ class Carousel extends BaseComponent {
      return
    }

-    const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName)
+    const slideEvent = this._triggerSlideEvent(nextElement, activeElementIndex, eventDirectionName)
    if (slideEvent.defaultPrevented) {
      return
    }
@@ -362,10 +359,24 @@ class Carousel extends BaseComponent {
      this.pause()
    }

-    this._setActiveIndicatorElement(nextElement)
+    this._setActiveIndicatorElement(nextElementIndex)
    this._activeElement = nextElement

-    const triggerSlidEvent = () => {
+    nextElement.classList.add(orderClassName)
+
+    reflow(nextElement)
+
+    activeElement.classList.add(directionalClassName)
+    nextElement.classList.add(directionalClassName)
+
+    const completeCallBack = () => {
+      nextElement.classList.remove(directionalClassName, orderClassName)
+      nextElement.classList.add(CLASS_NAME_ACTIVE)
+
+      activeElement.classList.remove(CLASS_NAME_ACTIVE, orderClassName, directionalClassName)
+
+      this._isSliding = false
+
      EventHandler.trigger(this._element, EVENT_SLID, {
        relatedTarget: nextElement,
        direction: eventDirectionName,
@@ -374,39 +385,17 @@ class Carousel extends BaseComponent {
      })
    }

-    if (this._element.classList.contains(CLASS_NAME_SLIDE)) {
-      nextElement.classList.add(orderClassName)
-
-      reflow(nextElement)
-
-      activeElement.classList.add(directionalClassName)
-      nextElement.classList.add(directionalClassName)
-
-      const completeCallBack = () => {
-        nextElement.classList.remove(directionalClassName, orderClassName)
-        nextElement.classList.add(CLASS_NAME_ACTIVE)
-
-        activeElement.classList.remove(CLASS_NAME_ACTIVE, orderClassName, directionalClassName)
-
-        this._isSliding = false
-
-        setTimeout(triggerSlidEvent, 0)
-      }
-
-      this._queueCallback(completeCallBack, activeElement, true)
-    } else {
-      activeElement.classList.remove(CLASS_NAME_ACTIVE)
-      nextElement.classList.add(CLASS_NAME_ACTIVE)
-
-      this._isSliding = false
-      triggerSlidEvent()
-    }
+    this._queueCallback(completeCallBack, activeElement, this._isAnimated())

    if (isCycling) {
      this.cycle()
    }
  }

+  _isAnimated() {
+    return this._element.classList.contains(CLASS_NAME_SLIDE)
+  }
+
  _getActive() {
    return SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM, this._element)
  }
@@ -484,7 +473,6 @@ class Carousel extends BaseComponent {
    }

    const config = {
-      ...Manipulator.getDataAttributes(target),
      ...Manipulator.getDataAttributes(this)
    }
    const slideIndex = this.getAttribute('data-bs-slide-to')
@@ -507,13 +495,13 @@ class Carousel extends BaseComponent {
 * Data API implementation
 */

-EventHandler.on(getDocument(), EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, Carousel.dataApiClickHandler)
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, Carousel.dataApiClickHandler)

-EventHandler.on(getWindow(), EVENT_LOAD_DATA_API, () => {
+EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
  const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE)

  for (const carousel of carousels) {
-    Carousel.carouselInterface(carousel, Carousel.getInstance(carousel))
+    Carousel.getOrCreateInstance(carousel)
  }
 })

@@ -10,8 +10,7 @@ import {
  getElement,
  getElementFromSelector,
  getSelectorFromElement,
-  reflow,
-  getDocument
+  reflow
 } from './util/index'
 import EventHandler from './dom/event-handler'
 import SelectorEngine from './dom/selector-engine'
@@ -257,12 +256,12 @@ class Collapse extends BaseComponent {

  // Static
  static jQueryInterface(config) {
-    return this.each(function () {
-      const _config = {}
-      if (typeof config === 'string' && /show|hide/.test(config)) {
-        _config.toggle = false
-      }
+    const _config = {}
+    if (typeof config === 'string' && /show|hide/.test(config)) {
+      _config.toggle = false
+    }

+    return this.each(function () {
      const data = Collapse.getOrCreateInstance(this, _config)

      if (typeof config === 'string') {
@@ -280,7 +279,7 @@ class Collapse extends BaseComponent {
 * Data API implementation
 */

-EventHandler.on(getDocument(), EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
  // preventDefault only for <a> elements (which change the URL) not inside the collapsible element
  if (event.target.tagName === 'A' || (event.delegateTarget && event.delegateTarget.tagName === 'A')) {
    event.preventDefault()
@@ -118,22 +118,12 @@ function bootstrapDelegationHandler(element, selector, fn) {
        return fn.apply(target, [event])
      }
    }
-
-    // To please ESLint
-    return null
  }
 }

 function findHandler(events, handler, delegationSelector = null) {
-  for (const uidEvent of Object.keys(events)) {
-    const event = events[uidEvent]
-
-    if (event.originalHandler === handler && event.delegationSelector === delegationSelector) {
-      return event
-    }
-  }
-
-  return null
+  return Object.values(events)
+    .find(event => event.originalHandler === handler && event.delegationSelector === delegationSelector)
 }

 function normalizeParameters(originalTypeEvent, handler, delegationFunction) {
@@ -284,7 +274,7 @@ const EventHandler = {
    const typeEvent = getTypeEvent(event)
    const inNamespace = event !== typeEvent

-    let jQueryEvent
+    let jQueryEvent = null
    let bubbles = true
    let nativeDispatch = true
    let defaultPrevented = false
@@ -319,7 +309,7 @@ const EventHandler = {
      element.dispatchEvent(evt)
    }

-    if (evt.defaultPrevented && typeof jQueryEvent !== 'undefined') {
+    if (evt.defaultPrevented && jQueryEvent) {
      jQueryEvent.preventDefault()
    }

@@ -5,8 +5,6 @@
 * --------------------------------------------------------------------------
 */

-import { getWindow } from '../util/index'
-
 function normalizeData(value) {
  if (value === 'true') {
    return true
@@ -63,11 +61,10 @@ const Manipulator = {

  offset(element) {
    const rect = element.getBoundingClientRect()
-    const windowRef = getWindow()

    return {
-      top: rect.top + windowRef.pageYOffset,
-      left: rect.left + windowRef.pageXOffset
+      top: rect.top + window.pageYOffset,
+      left: rect.left + window.pageXOffset
    }
  },

@@ -5,18 +5,18 @@
 * --------------------------------------------------------------------------
 */

-import { getDocument, isDisabled, isVisible } from '../util/index'
+import { isDisabled, isVisible } from '../util/index'

 /**
 * Constants
 */

 const SelectorEngine = {
-  find(selector, element = getDocument().documentElement) {
+  find(selector, element = document.documentElement) {
    return [].concat(...Element.prototype.querySelectorAll.call(element, selector))
  },

-  findOne(selector, element = getDocument().documentElement) {
+  findOne(selector, element = document.documentElement) {
    return Element.prototype.querySelector.call(element, selector)
  },

@@ -14,8 +14,7 @@ import {
  isElement,
  isRTL,
  isVisible,
-  noop,
-  getDocument
+  noop
 } from './util/index'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
@@ -50,7 +49,8 @@ const CLASS_NAME_DROPUP = 'dropup'
 const CLASS_NAME_DROPEND = 'dropend'
 const CLASS_NAME_DROPSTART = 'dropstart'

-const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]'
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)'
+const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`
 const SELECTOR_MENU = '.dropdown-menu'
 const SELECTOR_NAVBAR = '.navbar'
 const SELECTOR_NAVBAR_NAV = '.navbar-nav'
@@ -134,8 +134,8 @@ class Dropdown extends BaseComponent {
    // empty mouseover listeners to the body's immediate children;
    // only needed because of broken event delegation on iOS
    // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
-    if ('ontouchstart' in this._document.documentElement && !this._parent.closest(SELECTOR_NAVBAR_NAV)) {
-      for (const element of [].concat(...this._document.body.children)) {
+    if ('ontouchstart' in document.documentElement && !this._parent.closest(SELECTOR_NAVBAR_NAV)) {
+      for (const element of [].concat(...document.body.children)) {
        EventHandler.on(element, 'mouseover', noop)
      }
    }
@@ -342,18 +342,14 @@ class Dropdown extends BaseComponent {
      return
    }

-    const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
+    const openToggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE_SHOWN)

-    for (const toggle of toggles) {
+    for (const toggle of openToggles) {
      const context = Dropdown.getInstance(toggle)
      if (!context || context._config.autoClose === false) {
        continue
      }

-      if (!context._isShown()) {
-        continue
-      }
-
      const composedPath = event.composedPath()
      const isMenuTarget = composedPath.includes(context._menu)
      if (
@@ -411,10 +407,6 @@ class Dropdown extends BaseComponent {
    event.preventDefault()
    event.stopPropagation()

-    if (isDisabled(this)) {
-      return
-    }
-
    const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, delegateTarget.parentNode)
    const instance = Dropdown.getOrCreateInstance(getToggleButton)

@@ -435,13 +427,11 @@ class Dropdown extends BaseComponent {
 * Data API implementation
 */

-const documentRef = getDocument()
-
-EventHandler.on(documentRef, EVENT_KEYDOWN_DATA_API, SELECTOR_DATA_TOGGLE, Dropdown.dataApiKeydownHandler)
-EventHandler.on(documentRef, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU, Dropdown.dataApiKeydownHandler)
-EventHandler.on(documentRef, EVENT_CLICK_DATA_API, Dropdown.clearMenus)
-EventHandler.on(documentRef, EVENT_KEYUP_DATA_API, Dropdown.clearMenus)
-EventHandler.on(documentRef, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_DATA_TOGGLE, Dropdown.dataApiKeydownHandler)
+EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU, Dropdown.dataApiKeydownHandler)
+EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown.clearMenus)
+EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus)
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
  event.preventDefault()
  Dropdown.getOrCreateInstance(this).toggle()
 })
@@ -5,14 +5,7 @@
 * --------------------------------------------------------------------------
 */

-import {
-  defineJQueryPlugin,
-  getElementFromSelector,
-  isRTL,
-  isVisible,
-  reflow,
-  getDocument
-} from './util/index'
+import { defineJQueryPlugin, getElementFromSelector, isRTL, isVisible, reflow } from './util/index'
 import EventHandler from './dom/event-handler'
 import SelectorEngine from './dom/selector-engine'
 import ScrollBarHelper from './util/scrollbar'
@@ -191,8 +184,8 @@ class Modal extends BaseComponent {

  _showElement(relatedTarget) {
    // try to append dynamic modal
-    if (!this._document.body.contains(this._element)) {
-      this._document.body.append(this._element)
+    if (!document.body.contains(this._element)) {
+      document.body.append(this._element)
    }

    this._element.style.display = 'block'
@@ -262,7 +255,7 @@ class Modal extends BaseComponent {
    this._isTransitioning = false

    this._backdrop.hide(() => {
-      this._document.body.classList.remove(CLASS_NAME_OPEN)
+      document.body.classList.remove(CLASS_NAME_OPEN)
      this._resetAdjustments()
      this._scrollBar.reset()
      EventHandler.trigger(this._element, EVENT_HIDDEN)
@@ -279,7 +272,7 @@ class Modal extends BaseComponent {
      return
    }

-    const isModalOverflowing = this._element.scrollHeight > this._document.documentElement.clientHeight
+    const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
    const initialOverflowY = this._element.style.overflowY
    // return if the following background transition hasn't yet completed
    if (initialOverflowY === 'hidden' || this._element.classList.contains(CLASS_NAME_STATIC)) {
@@ -306,7 +299,7 @@ class Modal extends BaseComponent {
   */

  _adjustDialog() {
-    const isModalOverflowing = this._element.scrollHeight > this._document.documentElement.clientHeight
+    const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
    const scrollbarWidth = this._scrollBar.getWidth()
    const isBodyOverflowing = scrollbarWidth > 0

@@ -348,7 +341,7 @@ class Modal extends BaseComponent {
 * Data API implementation
 */

-EventHandler.on(getDocument(), EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
  const target = getElementFromSelector(this)

  if (['A', 'AREA'].includes(this.tagName)) {
@@ -9,9 +9,7 @@ import {
  defineJQueryPlugin,
  getElementFromSelector,
  isDisabled,
-  isVisible,
-  getDocument,
-  getWindow
+  isVisible
 } from './util/index'
 import ScrollBarHelper from './util/scrollbar'
 import EventHandler from './dom/event-handler'
@@ -211,7 +209,7 @@ class Offcanvas extends BaseComponent {
 * Data API implementation
 */

-EventHandler.on(getDocument(), EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
  const target = getElementFromSelector(this)

  if (['A', 'AREA'].includes(this.tagName)) {
@@ -239,7 +237,7 @@ EventHandler.on(getDocument(), EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, funct
  data.toggle(this)
 })

-EventHandler.on(getWindow(), EVENT_LOAD_DATA_API, () => {
+EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
  for (const selector of SelectorEngine.find(OPEN_SELECTOR)) {
    Offcanvas.getOrCreateInstance(selector).show()
  }
@@ -13,8 +13,6 @@ import Tooltip from './tooltip'
 */

 const NAME = 'popover'
-const DATA_KEY = 'bs.popover'
-const EVENT_KEY = `.${DATA_KEY}`

 const SELECTOR_TITLE = '.popover-header'
 const SELECTOR_CONTENT = '.popover-body'
@@ -37,19 +35,6 @@ const DefaultType = {
  content: '(null|string|element|function)'
 }

-const Event = {
-  HIDE: `hide${EVENT_KEY}`,
-  HIDDEN: `hidden${EVENT_KEY}`,
-  SHOW: `show${EVENT_KEY}`,
-  SHOWN: `shown${EVENT_KEY}`,
-  INSERTED: `inserted${EVENT_KEY}`,
-  CLICK: `click${EVENT_KEY}`,
-  FOCUSIN: `focusin${EVENT_KEY}`,
-  FOCUSOUT: `focusout${EVENT_KEY}`,
-  MOUSEENTER: `mouseenter${EVENT_KEY}`,
-  MOUSELEAVE: `mouseleave${EVENT_KEY}`
-}
-
 /**
 * Class definition
 */
@@ -68,10 +53,6 @@ class Popover extends Tooltip {
    return NAME
  }

-  static get Event() {
-    return Event
-  }
-
  // Overrides
  _isWithContent() {
    return this._getTitle() || this._getContent()
@@ -5,12 +5,7 @@
 * --------------------------------------------------------------------------
 */

-import {
-  defineJQueryPlugin,
-  getElement,
-  getSelectorFromElement,
-  getWindow
-} from './util/index'
+import { defineJQueryPlugin, getElement, getSelectorFromElement } from './util/index'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
@@ -63,7 +58,7 @@ const DefaultType = {
 class ScrollSpy extends BaseComponent {
  constructor(element, config) {
    super(element, config)
-    this._scrollElement = this._element.tagName === 'BODY' ? this._window : this._element
+    this._scrollElement = this._element.tagName === 'BODY' ? window : this._element
    this._offsets = []
    this._targets = []
    this._activeTarget = null
@@ -142,14 +137,14 @@ class ScrollSpy extends BaseComponent {

  _getScrollHeight() {
    return this._scrollElement.scrollHeight || Math.max(
-      this._document.body.scrollHeight,
-      this._document.documentElement.scrollHeight
+      document.body.scrollHeight,
+      document.documentElement.scrollHeight
    )
  }

  _getOffsetHeight() {
    return this._scrollElement === window ?
-      this._window.innerHeight :
+      window.innerHeight :
      this._scrollElement.getBoundingClientRect().height
  }

@@ -256,7 +251,7 @@ class ScrollSpy extends BaseComponent {
 * Data API implementation
 */

-EventHandler.on(getWindow(), EVENT_LOAD_DATA_API, () => {
+EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
  for (const spy of SelectorEngine.find(SELECTOR_DATA_SPY)) {
    new ScrollSpy(spy) // eslint-disable-line no-new
  }
@@ -5,13 +5,7 @@
 * --------------------------------------------------------------------------
 */

-import {
-  defineJQueryPlugin,
-  getDocument,
-  getElementFromSelector,
-  isDisabled,
-  reflow
-} from './util/index'
+import { defineJQueryPlugin, getElementFromSelector, isDisabled, reflow } from './util/index'
 import EventHandler from './dom/event-handler'
 import SelectorEngine from './dom/selector-engine'
 import BaseComponent from './base-component'
@@ -183,7 +177,7 @@ class Tab extends BaseComponent {
 * Data API implementation
 */

-EventHandler.on(getDocument(), EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
  if (['A', 'AREA'].includes(this.tagName)) {
    event.preventDefault()
  }
@@ -6,14 +6,7 @@
 */

 import * as Popper from '@popperjs/core'
-import {
-  defineJQueryPlugin,
-  findShadowRoot,
-  getElement,
-  getUID,
-  isRTL,
-  noop
-} from './util/index'
+import { defineJQueryPlugin, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index'
 import { DefaultAllowlist } from './util/sanitizer'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
@@ -25,8 +18,6 @@ import TemplateFactory from './util/template-factory'
 */

 const NAME = 'tooltip'
-const DATA_KEY = 'bs.tooltip'
-const EVENT_KEY = `.${DATA_KEY}`
 const DISALLOWED_ATTRIBUTES = new Set(['sanitize', 'allowList', 'sanitizeFn'])

 const CLASS_NAME_FADE = 'fade'
@@ -43,6 +34,17 @@ const TRIGGER_FOCUS = 'focus'
 const TRIGGER_CLICK = 'click'
 const TRIGGER_MANUAL = 'manual'

+const EVENT_HIDE = 'hide'
+const EVENT_HIDDEN = 'hidden'
+const EVENT_SHOW = 'show'
+const EVENT_SHOWN = 'shown'
+const EVENT_INSERTED = 'inserted'
+const EVENT_CLICK = 'click'
+const EVENT_FOCUSIN = 'focusin'
+const EVENT_FOCUSOUT = 'focusout'
+const EVENT_MOUSEENTER = 'mouseenter'
+const EVENT_MOUSELEAVE = 'mouseleave'
+
 const AttachmentMap = {
  AUTO: 'auto',
  TOP: 'top',
@@ -94,19 +96,6 @@ const DefaultType = {
  popperConfig: '(null|object|function)'
 }

-const Event = {
-  HIDE: `hide${EVENT_KEY}`,
-  HIDDEN: `hidden${EVENT_KEY}`,
-  SHOW: `show${EVENT_KEY}`,
-  SHOWN: `shown${EVENT_KEY}`,
-  INSERTED: `inserted${EVENT_KEY}`,
-  CLICK: `click${EVENT_KEY}`,
-  FOCUSIN: `focusin${EVENT_KEY}`,
-  FOCUSOUT: `focusout${EVENT_KEY}`,
-  MOUSEENTER: `mouseenter${EVENT_KEY}`,
-  MOUSELEAVE: `mouseleave${EVENT_KEY}`
-}
-
 /**
 * Class definition
 */
@@ -146,10 +135,6 @@ class Tooltip extends BaseComponent {
    return NAME
  }

-  static get Event() {
-    return Event
-  }
-
  // Public
  enable() {
    this._isEnabled = true
@@ -212,7 +197,7 @@ class Tooltip extends BaseComponent {
      return
    }

-    const showEvent = EventHandler.trigger(this._element, this.constructor.Event.SHOW)
+    const showEvent = EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SHOW))
    const shadowRoot = findShadowRoot(this._element)
    const isInTheDom = shadowRoot === null ?
      this._element.ownerDocument.documentElement.contains(this._element) :
@@ -230,7 +215,7 @@ class Tooltip extends BaseComponent {

    if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
      container.append(tip)
-      EventHandler.trigger(this._element, this.constructor.Event.INSERTED)
+      EventHandler.trigger(this._element, this.constructor.eventName(EVENT_INSERTED))
    }

    if (this._popper) {
@@ -245,8 +230,8 @@ class Tooltip extends BaseComponent {
    // empty mouseover listeners to the body's immediate children;
    // only needed because of broken event delegation on iOS
    // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
-    if ('ontouchstart' in this._document.documentElement) {
-      for (const element of [].concat(...this._document.body.children)) {
+    if ('ontouchstart' in document.documentElement) {
+      for (const element of [].concat(...document.body.children)) {
        EventHandler.on(element, 'mouseover', noop)
      }
    }
@@ -255,7 +240,7 @@ class Tooltip extends BaseComponent {
      const previousHoverState = this._isHovered

      this._isHovered = false
-      EventHandler.trigger(this._element, this.constructor.Event.SHOWN)
+      EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SHOWN))

      if (previousHoverState) {
        this._leave()
@@ -270,7 +255,7 @@ class Tooltip extends BaseComponent {
      return
    }

-    const hideEvent = EventHandler.trigger(this._element, this.constructor.Event.HIDE)
+    const hideEvent = EventHandler.trigger(this._element, this.constructor.eventName(EVENT_HIDE))
    if (hideEvent.defaultPrevented) {
      return
    }
@@ -280,8 +265,8 @@ class Tooltip extends BaseComponent {

    // If this is a touch-enabled device we remove the extra
    // empty mouseover listeners we added for iOS support
-    if ('ontouchstart' in this._document.documentElement) {
-      for (const element of [].concat(...this._document.body.children)) {
+    if ('ontouchstart' in document.documentElement) {
+      for (const element of [].concat(...document.body.children)) {
        EventHandler.off(element, 'mouseover', noop)
      }
    }
@@ -301,7 +286,7 @@ class Tooltip extends BaseComponent {
      }

      this._element.removeAttribute('aria-describedby')
-      EventHandler.trigger(this._element, this.constructor.Event.HIDDEN)
+      EventHandler.trigger(this._element, this.constructor.eventName(EVENT_HIDDEN))

      this._disposePopper()
    }
@@ -484,14 +469,14 @@ class Tooltip extends BaseComponent {

    for (const trigger of triggers) {
      if (trigger === 'click') {
-        EventHandler.on(this._element, this.constructor.Event.CLICK, this._config.selector, event => this.toggle(event))
+        EventHandler.on(this._element, this.constructor.eventName(EVENT_CLICK), this._config.selector, event => this.toggle(event))
      } else if (trigger !== TRIGGER_MANUAL) {
        const eventIn = trigger === TRIGGER_HOVER ?
-          this.constructor.Event.MOUSEENTER :
-          this.constructor.Event.FOCUSIN
+          this.constructor.eventName(EVENT_MOUSEENTER) :
+          this.constructor.eventName(EVENT_FOCUSIN)
        const eventOut = trigger === TRIGGER_HOVER ?
-          this.constructor.Event.MOUSELEAVE :
-          this.constructor.Event.FOCUSOUT
+          this.constructor.eventName(EVENT_MOUSELEAVE) :
+          this.constructor.eventName(EVENT_FOCUSOUT)

        EventHandler.on(this._element, eventIn, this._config.selector, event => {
          const context = this._initializeOnDelegatedTarget(event)
@@ -6,13 +6,13 @@
 */

 import EventHandler from '../dom/event-handler'
-import { getElementFromSelector, isDisabled, getDocument } from './index'
+import { getElementFromSelector, isDisabled } from './index'

 const enableDismissTrigger = (component, method = 'hide') => {
  const clickEvent = `click.dismiss${component.EVENT_KEY}`
  const name = component.NAME

-  EventHandler.on(getDocument(), clickEvent, `[data-bs-dismiss="${name}"]`, function (event) {
+  EventHandler.on(document, clickEvent, `[data-bs-dismiss="${name}"]`, function (event) {
    if (['A', 'AREA'].includes(this.tagName)) {
      event.preventDefault()
    }
@@ -7,7 +7,6 @@

 import EventHandler from '../dom/event-handler'
 import SelectorEngine from '../dom/selector-engine'
-import { getDocument } from './index'
 import Config from './config'

 /**
@@ -44,7 +43,6 @@ class FocusTrap extends Config {
    this._config = this._getConfig(config)
    this._isActive = false
    this._lastTabNavDirection = null
-    this._document = getDocument()
  }

  // Getters
@@ -70,9 +68,9 @@ class FocusTrap extends Config {
      this._config.trapElement.focus()
    }

-    EventHandler.off(this._document, EVENT_KEY) // guard against infinite focus loop
-    EventHandler.on(this._document, EVENT_FOCUSIN, event => this._handleFocusin(event))
-    EventHandler.on(this._document, EVENT_KEYDOWN_TAB, event => this._handleKeydown(event))
+    EventHandler.off(document, EVENT_KEY) // guard against infinite focus loop
+    EventHandler.on(document, EVENT_FOCUSIN, event => this._handleFocusin(event))
+    EventHandler.on(document, EVENT_KEYDOWN_TAB, event => this._handleKeydown(event))

    this._isActive = true
  }
@@ -83,14 +81,14 @@ class FocusTrap extends Config {
    }

    this._isActive = false
-    EventHandler.off(this._document, EVENT_KEY)
+    EventHandler.off(document, EVENT_KEY)
  }

  // Private
  _handleFocusin(event) {
    const { trapElement } = this._config

-    if (event.target === this._document || event.target === trapElement || trapElement.contains(event.target)) {
+    if (event.target === document || event.target === trapElement || trapElement.contains(event.target)) {
      return
    }

@@ -25,7 +25,7 @@ const toType = object => {
 const getUID = prefix => {
  do {
    prefix += Math.floor(Math.random() * MAX_UID)
-  } while (getDocument().getElementById(prefix))
+  } while (document.getElementById(prefix))

  return prefix
 }
@@ -59,7 +59,7 @@ const getSelectorFromElement = element => {
  const selector = getSelector(element)

  if (selector) {
-    return getDocument().querySelector(selector) ? selector : null
+    return document.querySelector(selector) ? selector : null
  }

  return null
@@ -68,7 +68,7 @@ const getSelectorFromElement = element => {
 const getElementFromSelector = element => {
  const selector = getSelector(element)

-  return selector ? getDocument().querySelector(selector) : null
+  return selector ? document.querySelector(selector) : null
 }

 const getTransitionDurationFromElement = element => {
@@ -77,7 +77,7 @@ const getTransitionDurationFromElement = element => {
  }

  // Get transition-duration of the element
-  let { transitionDuration, transitionDelay } = getWindow().getComputedStyle(element)
+  let { transitionDuration, transitionDelay } = window.getComputedStyle(element)

  const floatTransitionDuration = Number.parseFloat(transitionDuration)
  const floatTransitionDelay = Number.parseFloat(transitionDelay)
@@ -167,7 +167,7 @@ const isDisabled = element => {
 }

 const findShadowRoot = element => {
-  if (!getDocument().documentElement.attachShadow) {
+  if (!document.documentElement.attachShadow) {
    return null
  }

@@ -200,12 +200,11 @@ const noop = () => {}
 * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
 */
 const reflow = element => {
-  // eslint-disable-next-line no-unused-expressions
-  element.offsetHeight
+  element.offsetHeight // eslint-disable-line no-unused-expressions
 }

 const getjQuery = () => {
-  if (getWindow().jQuery && !getDocument().body.hasAttribute('data-bs-no-jquery')) {
+  if (window.jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
    return window.jQuery
  }

@@ -215,11 +214,10 @@ const getjQuery = () => {
 const DOMContentLoadedCallbacks = []

 const onDOMContentLoaded = callback => {
-  const documentRef = getDocument()
-  if (documentRef.readyState === 'loading') {
+  if (document.readyState === 'loading') {
    // add listener on the first call when the document is in loading state
    if (!DOMContentLoadedCallbacks.length) {
-      documentRef.addEventListener('DOMContentLoaded', () => {
+      document.addEventListener('DOMContentLoaded', () => {
        for (const callback of DOMContentLoadedCallbacks) {
          callback()
        }
@@ -232,7 +230,7 @@ const onDOMContentLoaded = callback => {
  }
 }

-const isRTL = () => getDocument().documentElement.dir === 'rtl'
+const isRTL = () => document.documentElement.dir === 'rtl'

 const defineJQueryPlugin = plugin => {
  onDOMContentLoaded(() => {
@@ -314,26 +312,11 @@ const getNextActiveElement = (list, activeElement, shouldGetNext, isCycleAllowed
  return list[Math.max(0, Math.min(index, listLength - 1))]
 }

-/**
- * @return {window|{}} The proper element
- */
-const getWindow = () => {
-  return typeof window !== 'undefined' ? window : {}
-}
-
-/**
- * @return {document|{}} The proper element
- */
-const getDocument = () => {
-  return typeof document !== 'undefined' ? document : {}
-}
-
 export {
  defineJQueryPlugin,
  execute,
  executeAfterTransition,
  findShadowRoot,
-  getDocument,
  getElement,
  getElementFromSelector,
  getjQuery,
@@ -341,7 +324,6 @@ export {
  getSelectorFromElement,
  getTransitionDurationFromElement,
  getUID,
-  getWindow,
  isDisabled,
  isElement,
  isRTL,
@@ -5,8 +5,6 @@
 * --------------------------------------------------------------------------
 */

-import { getWindow } from './index'
-
 const uriAttributes = new Set([
  'background',
  'cite',
@@ -93,8 +91,7 @@ export function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) {
    return sanitizeFunction(unsafeHtml)
  }

-  const windowRef = getWindow()
-  const domParser = new windowRef.DOMParser()
+  const domParser = new window.DOMParser()
  const createdDocument = domParser.parseFromString(unsafeHtml, 'text/html')
  const elements = [].concat(...createdDocument.body.querySelectorAll('*'))

@@ -7,7 +7,7 @@

 import SelectorEngine from '../dom/selector-engine'
 import Manipulator from '../dom/manipulator'
-import { isElement, getDocument, getWindow } from './index'
+import { isElement } from './index'

 /**
 * Constants
@@ -24,15 +24,14 @@ const PROPERTY_MARGIN = 'margin-right'

 class ScrollBarHelper {
  constructor() {
-    this._element = getDocument().body
-    this._window = getWindow()
+    this._element = document.body
  }

  // Public
  getWidth() {
    // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
    const documentWidth = document.documentElement.clientWidth
-    return Math.abs(this._window.innerWidth - documentWidth)
+    return Math.abs(window.innerWidth - documentWidth)
  }

  hide() {
@@ -65,12 +64,12 @@ class ScrollBarHelper {
  _setElementAttributes(selector, styleProperty, callback) {
    const scrollbarWidth = this.getWidth()
    const manipulationCallBack = element => {
-      if (element !== this._element && this._window.innerWidth > element.clientWidth + scrollbarWidth) {
+      if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
        return
      }

      this._saveInitialAttribute(element, styleProperty)
-      const calculatedValue = this._window.getComputedStyle(element).getPropertyValue(styleProperty)
+      const calculatedValue = window.getComputedStyle(element).getPropertyValue(styleProperty)
      element.style.setProperty(styleProperty, `${callback(Number.parseFloat(calculatedValue))}px`)
    }

@@ -7,7 +7,7 @@

 import Config from './config'
 import EventHandler from '../dom/event-handler'
-import { execute, getDocument, getWindow } from './index'
+import { execute } from './index'

 /**
 * Constants
@@ -52,7 +52,7 @@ class Swipe extends Config {

    this._config = this._getConfig(config)
    this._deltaX = 0
-    this._supportPointerEvents = Boolean(getWindow().PointerEvent)
+    this._supportPointerEvents = Boolean(window.PointerEvent)
    this._initEvents()
  }

@@ -139,7 +139,7 @@ class Swipe extends Config {

  // Static
  static isSupported() {
-    return 'ontouchstart' in getDocument().documentElement || navigator.maxTouchPoints > 0
+    return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
  }
 }

@@ -102,7 +102,7 @@ describe('Alert', () => {
    })

    it('should not remove alert if close event is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<div class="alert"></div>'

        const getAlert = () => document.querySelector('.alert')
@@ -118,7 +118,7 @@ describe('Alert', () => {
        })

        alertEl.addEventListener('closed.bs.alert', () => {
-          throw new Error('should not fire closed event')
+          reject(new Error('should not fire closed event'))
        })

        alert.close()
@@ -270,7 +270,7 @@ describe('Carousel', () => {
    })

    it('should stay at the start when the prev method is called and wrap is false', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div id="myCarousel" class="carousel slide">',
          '  <div class="carousel-inner">',
@@ -286,7 +286,7 @@ describe('Carousel', () => {
        const carousel = new Carousel(carouselEl, { wrap: false })

        carouselEl.addEventListener('slid.bs.carousel', () => {
-          throw new Error('carousel slid when it should not have slid')
+          reject(new Error('carousel slid when it should not have slid'))
        })

        carousel.prev()
@@ -385,7 +385,7 @@ describe('Collapse', () => {
    })

    it('should not fire shown when show is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<div class="collapse"></div>'

        const collapseEl = fixtureEl.querySelector('div')
@@ -406,7 +406,7 @@ describe('Collapse', () => {
        })

        collapseEl.addEventListener('shown.bs.collapse', () => {
-          throw new Error('should not fire shown event')
+          reject(new Error('should not fire shown event'))
        })

        collapse.show()
@@ -466,7 +466,7 @@ describe('Collapse', () => {
    })

    it('should not fire hidden when hide is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<div class="collapse show"></div>'

        const collapseEl = fixtureEl.querySelector('div')
@@ -487,7 +487,7 @@ describe('Collapse', () => {
        })

        collapseEl.addEventListener('hidden.bs.collapse', () => {
-          throw new Error('should not fire hidden event')
+          reject(new Error('should not fire hidden event'))
        })

        collapse.hide()
@@ -373,12 +373,12 @@ describe('EventHandler', () => {
    })

    it('should remove a listener registered by .one', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<div></div>'

        const div = fixtureEl.querySelector('div')
        const handler = () => {
-          throw new Error('called')
+          reject(new Error('called'))
        }

        EventHandler.one(div, 'foobar', handler)
@@ -73,7 +73,7 @@ describe('Dropdown', () => {
        const dropdown = new Dropdown(btnDropdown, {
          offset: getOffset,
          popperConfig: {
-            onFirstUpdate: state => {
+            onFirstUpdate(state) {
              expect(getOffset).toHaveBeenCalledWith({
                popper: state.rects.popper,
                reference: state.rects.reference,
@@ -513,7 +513,7 @@ describe('Dropdown', () => {
    })

    it('should not toggle a dropdown if the element is disabled', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div class="dropdown">',
          '  <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@@ -527,7 +527,7 @@ describe('Dropdown', () => {
        const dropdown = new Dropdown(btnDropdown)

        btnDropdown.addEventListener('shown.bs.dropdown', () => {
-          throw new Error('should not throw shown.bs.dropdown event')
+          reject(new Error('should not throw shown.bs.dropdown event'))
        })

        dropdown.toggle()
@@ -540,7 +540,7 @@ describe('Dropdown', () => {
    })

    it('should not toggle a dropdown if the element contains .disabled', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div class="dropdown">',
          '  <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>',
@@ -554,7 +554,7 @@ describe('Dropdown', () => {
        const dropdown = new Dropdown(btnDropdown)

        btnDropdown.addEventListener('shown.bs.dropdown', () => {
-          throw new Error('should not throw shown.bs.dropdown event')
+          reject(new Error('should not throw shown.bs.dropdown event'))
        })

        dropdown.toggle()
@@ -567,7 +567,7 @@ describe('Dropdown', () => {
    })

    it('should not toggle a dropdown if the menu is shown', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div class="dropdown">',
          '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@@ -581,7 +581,7 @@ describe('Dropdown', () => {
        const dropdown = new Dropdown(btnDropdown)

        btnDropdown.addEventListener('shown.bs.dropdown', () => {
-          throw new Error('should not throw shown.bs.dropdown event')
+          reject(new Error('should not throw shown.bs.dropdown event'))
        })

        dropdown.toggle()
@@ -594,7 +594,7 @@ describe('Dropdown', () => {
    })

    it('should not toggle a dropdown if show event is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div class="dropdown">',
          '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@@ -612,7 +612,7 @@ describe('Dropdown', () => {
        })

        btnDropdown.addEventListener('shown.bs.dropdown', () => {
-          throw new Error('should not throw shown.bs.dropdown event')
+          reject(new Error('should not throw shown.bs.dropdown event'))
        })

        dropdown.toggle()
@@ -650,7 +650,7 @@ describe('Dropdown', () => {
    })

    it('should not show a dropdown if the element is disabled', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div class="dropdown">',
          '  <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@@ -664,7 +664,7 @@ describe('Dropdown', () => {
        const dropdown = new Dropdown(btnDropdown)

        btnDropdown.addEventListener('shown.bs.dropdown', () => {
-          throw new Error('should not throw shown.bs.dropdown event')
+          reject(new Error('should not throw shown.bs.dropdown event'))
        })

        dropdown.show()
@@ -677,7 +677,7 @@ describe('Dropdown', () => {
    })

    it('should not show a dropdown if the element contains .disabled', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div class="dropdown">',
          '  <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>',
@@ -691,7 +691,7 @@ describe('Dropdown', () => {
        const dropdown = new Dropdown(btnDropdown)

        btnDropdown.addEventListener('shown.bs.dropdown', () => {
-          throw new Error('should not throw shown.bs.dropdown event')
+          reject(new Error('should not throw shown.bs.dropdown event'))
        })

        dropdown.show()
@@ -704,7 +704,7 @@ describe('Dropdown', () => {
    })

    it('should not show a dropdown if the menu is shown', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div class="dropdown">',
          '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@@ -718,7 +718,7 @@ describe('Dropdown', () => {
        const dropdown = new Dropdown(btnDropdown)

        btnDropdown.addEventListener('shown.bs.dropdown', () => {
-          throw new Error('should not throw shown.bs.dropdown event')
+          reject(new Error('should not throw shown.bs.dropdown event'))
        })

        dropdown.show()
@@ -731,7 +731,7 @@ describe('Dropdown', () => {
    })

    it('should not show a dropdown if show event is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div class="dropdown">',
          '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@@ -749,7 +749,7 @@ describe('Dropdown', () => {
        })

        btnDropdown.addEventListener('shown.bs.dropdown', () => {
-          throw new Error('should not throw shown.bs.dropdown event')
+          reject(new Error('should not throw shown.bs.dropdown event'))
        })

        dropdown.show()
@@ -817,7 +817,7 @@ describe('Dropdown', () => {
    })

    it('should not hide a dropdown if the element is disabled', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div class="dropdown">',
          '  <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@@ -832,7 +832,7 @@ describe('Dropdown', () => {
        const dropdown = new Dropdown(btnDropdown)

        btnDropdown.addEventListener('hidden.bs.dropdown', () => {
-          throw new Error('should not throw hidden.bs.dropdown event')
+          reject(new Error('should not throw hidden.bs.dropdown event'))
        })

        dropdown.hide()
@@ -845,7 +845,7 @@ describe('Dropdown', () => {
    })

    it('should not hide a dropdown if the element contains .disabled', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div class="dropdown">',
          '  <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>',
@@ -860,7 +860,7 @@ describe('Dropdown', () => {
        const dropdown = new Dropdown(btnDropdown)

        btnDropdown.addEventListener('hidden.bs.dropdown', () => {
-          throw new Error('should not throw hidden.bs.dropdown event')
+          reject(new Error('should not throw hidden.bs.dropdown event'))
        })

        dropdown.hide()
@@ -873,7 +873,7 @@ describe('Dropdown', () => {
    })

    it('should not hide a dropdown if the menu is not shown', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div class="dropdown">',
          '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@@ -887,7 +887,7 @@ describe('Dropdown', () => {
        const dropdown = new Dropdown(btnDropdown)

        btnDropdown.addEventListener('hidden.bs.dropdown', () => {
-          throw new Error('should not throw hidden.bs.dropdown event')
+          reject(new Error('should not throw hidden.bs.dropdown event'))
        })

        dropdown.hide()
@@ -900,7 +900,7 @@ describe('Dropdown', () => {
    })

    it('should not hide a dropdown if hide event is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div class="dropdown">',
          '  <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>',
@@ -919,7 +919,7 @@ describe('Dropdown', () => {
        })

        btnDropdown.addEventListener('hidden.bs.dropdown', () => {
-          throw new Error('should not throw hidden.bs.dropdown event')
+          reject(new Error('should not throw hidden.bs.dropdown event'))
        })

        dropdown.hide()
@@ -1117,7 +1117,7 @@ describe('Dropdown', () => {
    it('should not use "static" Popper in navbar', () => {
      return new Promise(resolve => {
        fixtureEl.innerHTML = [
-          '<nav class="navbar navbar-expand-md navbar-light bg-light">',
+          '<nav class="navbar navbar-expand-md bg-light">',
          '  <div class="dropdown">',
          '    <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
          '    <div class="dropdown-menu">',
@@ -1187,7 +1187,7 @@ describe('Dropdown', () => {
    it('should manage bs attribute `data-bs-popper`="static" when dropdown is in navbar', () => {
      return new Promise(resolve => {
        fixtureEl.innerHTML = [
-          '<nav class="navbar navbar-expand-md navbar-light bg-light">',
+          '<nav class="navbar navbar-expand-md bg-light">',
          '  <div class="dropdown">',
          '    <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
          '    <div class="dropdown-menu">',
@@ -182,7 +182,7 @@ describe('Modal', () => {
    })

    it('should not fire shown event when show is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'

        const modalEl = fixtureEl.querySelector('.modal')
@@ -200,7 +200,7 @@ describe('Modal', () => {
        })

        modalEl.addEventListener('shown.bs.modal', () => {
-          throw new Error('shown event triggered')
+          reject(new Error('shown event triggered'))
        })

        modal.show()
@@ -458,7 +458,7 @@ describe('Modal', () => {
    })

    it('should not close modal when clicking on modal-content', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div class="modal">',
          '  <div class="modal-dialog">',
@@ -484,7 +484,7 @@ describe('Modal', () => {
        })

        modalEl.addEventListener('hidden.bs.modal', () => {
-          throw new Error('Should not hide a modal')
+          reject(new Error('Should not hide a modal'))
        })

        modal.show()
@@ -492,7 +492,7 @@ describe('Modal', () => {
    })

    it('should not close modal when clicking outside of modal-content if backdrop = false', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'

        const modalEl = fixtureEl.querySelector('.modal')
@@ -513,7 +513,7 @@ describe('Modal', () => {
        })

        modalEl.addEventListener('hidden.bs.modal', () => {
-          throw new Error('Should not hide a modal')
+          reject(new Error('Should not hide a modal'))
        })

        modal.show()
@@ -521,7 +521,7 @@ describe('Modal', () => {
    })

    it('should not close modal when clicking outside of modal-content if backdrop = static', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'

        const modalEl = fixtureEl.querySelector('.modal')
@@ -542,7 +542,7 @@ describe('Modal', () => {
        })

        modalEl.addEventListener('hidden.bs.modal', () => {
-          throw new Error('Should not hide a modal')
+          reject(new Error('Should not hide a modal'))
        })

        modal.show()
@@ -578,7 +578,7 @@ describe('Modal', () => {
    })

    it('should not close modal when escape key is pressed with keyboard = false', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'

        const modalEl = fixtureEl.querySelector('.modal')
@@ -602,7 +602,7 @@ describe('Modal', () => {
        })

        modalEl.addEventListener('hidden.bs.modal', () => {
-          throw new Error('Should not hide a modal')
+          reject(new Error('Should not hide a modal'))
        })

        modal.show()
@@ -751,7 +751,7 @@ describe('Modal', () => {
    })

    it('should not hide a modal if hide is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'

        const modalEl = fixtureEl.querySelector('.modal')
@@ -774,7 +774,7 @@ describe('Modal', () => {
        })

        modalEl.addEventListener('hidden.bs.modal', () => {
-          throw new Error('should not trigger hidden')
+          reject(new Error('should not trigger hidden'))
        })

        modal.show()
@@ -329,7 +329,7 @@ describe('Offcanvas', () => {
    })

    it('should not fire shown when show is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<div class="offcanvas"></div>'

        const offCanvasEl = fixtureEl.querySelector('div')
@@ -349,7 +349,7 @@ describe('Offcanvas', () => {
        })

        offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
-          throw new Error('should not fire shown event')
+          reject(new Error('should not fire shown event'))
        })

        offCanvas.show()
@@ -455,7 +455,7 @@ describe('Offcanvas', () => {
    })

    it('should not fire hidden when hide is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<div class="offcanvas"></div>'

        const offCanvasEl = fixtureEl.querySelector('div')
@@ -477,7 +477,7 @@ describe('Offcanvas', () => {
        })

        offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
-          throw new Error('should not fire hidden event')
+          reject(new Error('should not fire hidden event'))
        })

        offCanvas.hide()
@@ -43,12 +43,6 @@ describe('Popover', () => {
    })
  })

-  describe('Event', () => {
-    it('should return plugin events', () => {
-      expect(Popover.Event).toEqual(jasmine.any(Object))
-    })
-  })
-
  describe('EVENT_KEY', () => {
    it('should return plugin event key', () => {
      expect(Popover.EVENT_KEY).toEqual('.bs.popover')
@@ -166,21 +160,16 @@ describe('Popover', () => {
    })

    it('should NOT show a popover without `title` and `content`', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" data-bs-content="" title="">Nice link</a>'
+      fixtureEl.innerHTML = '<a href="#" data-bs-content="" title="">Nice link</a>'

-        const popoverEl = fixtureEl.querySelector('a')
-        const popover = new Popover(popoverEl, { animation: false })
-        spyOn(EventHandler, 'trigger').and.callThrough()
+      const popoverEl = fixtureEl.querySelector('a')
+      const popover = new Popover(popoverEl, { animation: false })
+      spyOn(EventHandler, 'trigger').and.callThrough()

-        setTimeout(() => {
-          expect(EventHandler.trigger).not.toHaveBeenCalled()
-          expect(document.querySelector('.popover')).toBeNull()
-          resolve()
-        })
+      popover.show()

-        popover.show()
-      })
+      expect(EventHandler.trigger).not.toHaveBeenCalledWith(popoverEl, Popover.eventName('show'))
+      expect(document.querySelector('.popover')).toBeNull()
    })

    it('"setContent" should keep the initial template', () => {
@@ -241,7 +241,7 @@ describe('ScrollSpy', () => {
          contentEl,
          scrollSpy,
          spy,
-          cb: () => {
+          cb() {
            testElementIsActiveAfterScroll({
              elementSelector: '#a-2',
              targetSelector: '#div-2',
@@ -283,7 +283,7 @@ describe('ScrollSpy', () => {
          contentEl,
          scrollSpy,
          spy,
-          cb: () => {
+          cb() {
            testElementIsActiveAfterScroll({
              elementSelector: '#a-2',
              targetSelector: '#div-2',
@@ -325,7 +325,7 @@ describe('ScrollSpy', () => {
          contentEl,
          scrollSpy,
          spy,
-          cb: () => {
+          cb() {
            testElementIsActiveAfterScroll({
              elementSelector: '#a-2',
              targetSelector: '#div-2',
@@ -167,7 +167,7 @@ describe('Tab', () => {
    })

    it('should not fire shown when show is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<div class="nav"></div>'

        const navEl = fixtureEl.querySelector('div')
@@ -185,7 +185,7 @@ describe('Tab', () => {
        })

        navEl.addEventListener('shown.bs.tab', () => {
-          throw new Error('should not trigger shown event')
+          reject(new Error('should not trigger shown event'))
        })

        tab.show()
@@ -193,7 +193,7 @@ describe('Tab', () => {
    })

    it('should not fire shown when tab is already active', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<ul class="nav nav-tabs" role="tablist">',
          '  <li class="nav-item" role="presentation"><button type="button" data-bs-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>',
@@ -209,7 +209,7 @@ describe('Tab', () => {
        const tab = new Tab(triggerActive)

        triggerActive.addEventListener('shown.bs.tab', () => {
-          throw new Error('should not trigger shown event')
+          reject(new Error('should not trigger shown event'))
        })

        tab.show()
@@ -285,7 +285,7 @@ describe('Tab', () => {
    })

    it('should not fire hidden when hide is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<ul class="nav" role="tablist">',
          '  <li><button type="button" data-bs-target="#home" role="tab">Home</button></li>',
@@ -313,7 +313,7 @@ describe('Tab', () => {
        })

        triggerList[0].addEventListener('hidden.bs.tab', () => {
-          throw new Error('should not trigger hidden')
+          reject(new Error('should not trigger hidden'))
        })

        firstTab.show()
@@ -751,7 +751,7 @@ describe('Tab', () => {
    })

    it('should not fire shown when tab has disabled attribute', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<ul class="nav nav-tabs" role="tablist">',
          '  <li class="nav-item" role="presentation"><button type="button" data-bs-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>',
@@ -765,7 +765,7 @@ describe('Tab', () => {

        const triggerDisabled = fixtureEl.querySelector('button[disabled]')
        triggerDisabled.addEventListener('shown.bs.tab', () => {
-          throw new Error('should not trigger shown event')
+          reject(new Error('should not trigger shown event'))
        })

        triggerDisabled.click()
@@ -777,7 +777,7 @@ describe('Tab', () => {
    })

    it('should not fire shown when tab has disabled class', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<ul class="nav nav-tabs" role="tablist">',
          '  <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab" aria-selected="true">Home</a></li>',
@@ -792,7 +792,7 @@ describe('Tab', () => {
        const triggerDisabled = fixtureEl.querySelector('a.disabled')

        triggerDisabled.addEventListener('shown.bs.tab', () => {
-          throw new Error('should not trigger shown event')
+          reject(new Error('should not trigger shown event'))
        })

        triggerDisabled.click()
@@ -160,7 +160,7 @@ describe('Toast', () => {
    })

    it('should not trigger shown if show is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div class="toast" data-bs-delay="1" data-bs-animation="false">',
          '  <div class="toast-body">',
@@ -185,7 +185,7 @@ describe('Toast', () => {
        })

        toastEl.addEventListener('shown.bs.toast', () => {
-          throw new Error('shown event should not be triggered if show is prevented')
+          reject(new Error('shown event should not be triggered if show is prevented'))
        })

        toast.show()
@@ -449,7 +449,7 @@ describe('Toast', () => {
    })

    it('should not trigger hidden if hide is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = [
          '<div class="toast" data-bs-delay="1" data-bs-animation="false">',
          '  <div class="toast-body">',
@@ -478,7 +478,7 @@ describe('Toast', () => {
        })

        toastEl.addEventListener('hidden.bs.toast', () => {
-          throw new Error('hidden event should not be triggered if hide is prevented')
+          reject(new Error('hidden event should not be triggered if hide is prevented'))
        })

        toast.show()
@@ -42,12 +42,6 @@ describe('Tooltip', () => {
    })
  })

-  describe('Event', () => {
-    it('should return plugin events', () => {
-      expect(Tooltip.Event).toEqual(jasmine.any(Object))
-    })
-  })
-
  describe('EVENT_KEY', () => {
    it('should return plugin event key', () => {
      expect(Tooltip.EVENT_KEY).toEqual('.bs.tooltip')
@@ -127,7 +121,7 @@ describe('Tooltip', () => {
        const tooltip = new Tooltip(tooltipEl, {
          offset: getOffset,
          popperConfig: {
-            onFirstUpdate: state => {
+            onFirstUpdate(state) {
              expect(getOffset).toHaveBeenCalledWith({
                popper: state.rects.popper,
                reference: state.rects.reference,
@@ -217,7 +211,7 @@ describe('Tooltip', () => {

  describe('disable', () => {
    it('should disable tooltip', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'

        const tooltipEl = fixtureEl.querySelector('a')
@@ -226,7 +220,7 @@ describe('Tooltip', () => {
        tooltip.disable()

        tooltipEl.addEventListener('show.bs.tooltip', () => {
-          throw new Error('should not show a disabled tooltip')
+          reject(new Error('should not show a disabled tooltip'))
        })

        tooltip.show()
@@ -256,7 +250,7 @@ describe('Tooltip', () => {

  describe('toggle', () => {
    it('should do nothing if disabled', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'

        const tooltipEl = fixtureEl.querySelector('a')
@@ -265,7 +259,7 @@ describe('Tooltip', () => {
        tooltip.disable()

        tooltipEl.addEventListener('show.bs.tooltip', () => {
-          throw new Error('should not show a disabled tooltip')
+          reject(new Error('should not show a disabled tooltip'))
        })

        tooltip.toggle()
@@ -658,7 +652,7 @@ describe('Tooltip', () => {
    })

    it('should not show a tooltip if show.bs.tooltip is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'

        const tooltipEl = fixtureEl.querySelector('a')
@@ -677,7 +671,7 @@ describe('Tooltip', () => {
        })

        tooltipEl.addEventListener('shown.bs.tooltip', () => {
-          throw new Error('Tooltip should not be shown')
+          reject(new Error('Tooltip should not be shown'))
        })

        tooltip.show()
@@ -1007,7 +1001,7 @@ describe('Tooltip', () => {
    })

    it('should not hide a tooltip if hide event is prevented', () => {
-      return new Promise(resolve => {
+      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'

        const assertDone = () => {
@@ -1028,7 +1022,7 @@ describe('Tooltip', () => {
          assertDone()
        })
        tooltipEl.addEventListener('hidden.bs.tooltip', () => {
-          throw new Error('should not trigger hidden event')
+          reject(new Error('should not trigger hidden event'))
        })

        tooltip.show()
@@ -85,7 +85,7 @@ describe('Swipe', () => {
        defineDocumentElementOntouchstart()
        // eslint-disable-next-line no-new
        new Swipe(swipeEl, {
-          leftCallback: () => {
+          leftCallback() {
            expect(spyRight).not.toHaveBeenCalled()
            restorePointerEvents()
            resolve()
@@ -107,7 +107,7 @@ describe('Swipe', () => {
        defineDocumentElementOntouchstart()
        // eslint-disable-next-line no-new
        new Swipe(swipeEl, {
-          rightCallback: () => {
+          rightCallback() {
            expect(spyLeft).not.toHaveBeenCalled()
            restorePointerEvents()
            resolve()
@@ -190,7 +190,7 @@ describe('Swipe', () => {
        defineDocumentElementOntouchstart()
        // eslint-disable-next-line no-new
        new Swipe(swipeEl, {
-          rightCallback: () => {
+          rightCallback() {
            deleteDocumentElementOntouchstart()
            expect().nothing()
            resolve()
@@ -215,7 +215,7 @@ describe('Swipe', () => {
        defineDocumentElementOntouchstart()
        // eslint-disable-next-line no-new
        new Swipe(swipeEl, {
-          leftCallback: () => {
+          leftCallback() {
            expect().nothing()
            deleteDocumentElementOntouchstart()
            resolve()
@@ -99,7 +99,7 @@ describe('TemplateFactory', () => {

      it('should resolve class if function is given', () => {
        const factory = new TemplateFactory({
-          extraClass: arg => {
+          extraClass(arg) {
            expect(arg).toEqual(factory)
            return 'testClass'
          }
@@ -10,7 +10,7 @@
    <div class="container">
      <h1>Dropdown <small>Bootstrap Visual Test</small></h1>

-      <nav class="navbar navbar-expand-md navbar-light bg-light">
+      <nav class="navbar navbar-expand-md bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
@@ -19,6 +19,28 @@
  "contributors": [
    "Twitter, Inc."
  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/twbs/bootstrap.git"
+  },
+  "bugs": {
+    "url": "https://github.com/twbs/bootstrap/issues"
+  },
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/twbs"
+    },
+    {
+      "type": "opencollective",
+      "url": "https://opencollective.com/bootstrap"
+    }
+  ],
+  "main": "dist/js/bootstrap.js",
+  "module": "dist/js/bootstrap.esm.js",
+  "sass": "scss/bootstrap.scss",
+  "style": "dist/css/bootstrap.css",
  "scripts": {
    "start": "npm-run-all --parallel watch docs-serve",
    "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
@@ -78,50 +100,33 @@
    "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",
    "watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\""
  },
-  "style": "dist/css/bootstrap.css",
-  "sass": "scss/bootstrap.scss",
-  "main": "dist/js/bootstrap.js",
-  "module": "dist/js/bootstrap.esm.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/twbs/bootstrap.git"
-  },
-  "bugs": {
-    "url": "https://github.com/twbs/bootstrap/issues"
-  },
-  "license": "MIT",
-  "funding": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/bootstrap"
-  },
  "peerDependencies": {
    "@popperjs/core": "^2.11.2"
  },
  "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.12",
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.5",
    "@babel/preset-env": "^7.16.11",
    "@popperjs/core": "^2.11.2",
    "@rollup/plugin-babel": "^5.3.0",
    "@rollup/plugin-commonjs": "^21.0.1",
    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-replace": "^3.0.1",
+    "@rollup/plugin-replace": "^3.1.0",
    "autoprefixer": "^10.4.2",
    "bundlewatch": "^0.3.3",
    "clean-css-cli": "^5.5.2",
    "cross-env": "^7.0.3",
-    "eslint": "^8.8.0",
-    "eslint-config-xo": "^0.39.0",
+    "eslint": "^8.9.0",
+    "eslint-config-xo": "^0.40.0",
    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-ssr-friendly": "^1.0.5",
-    "eslint-plugin-unicorn": "^40.1.0",
-    "find-unused-sass-variables": "^3.1.0",
+    "eslint-plugin-unicorn": "^41.0.0",
+    "find-unused-sass-variables": "^4.0.1",
    "globby": "^11.0.4",
    "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.80.1",
+    "hugo-bin": "^0.80.2",
    "ip": "^1.1.5",
    "jquery": "^3.6.0",
-    "karma": "^6.3.13",
+    "karma": "^6.3.16",
    "karma-browserstack-launcher": "1.4.0",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage-istanbul-reporter": "^3.0.3",
@@ -129,20 +134,20 @@
    "karma-firefox-launcher": "^2.1.2",
    "karma-jasmine": "^4.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
-    "karma-rollup-preprocessor": "^7.0.7",
+    "karma-rollup-preprocessor": "7.0.7",
    "lockfile-lint": "^4.6.2",
    "nodemon": "^2.0.15",
    "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.6",
    "postcss-cli": "^9.1.0",
-    "rollup": "^2.66.1",
+    "rollup": "^2.68.0",
    "rollup-plugin-istanbul": "^3.0.0",
    "rtlcss": "^3.5.0",
-    "sass": "^1.49.4",
+    "sass": "^1.49.8",
    "shelljs": "^0.8.5",
    "stylelint": "14.2.0",
    "stylelint-config-twbs-bootstrap": "^3.0.1",
-    "terser": "^5.10.0",
+    "terser": "^5.11.0",
    "vnu-jar": "21.10.12"
  },
  "files": [
@@ -1,19 +1,29 @@
+// stylelint-disable custom-property-empty-line-before
+
 // Base class
 //
 // Requires one of the contextual, color modifier classes for `color` and
 // `background-color`.

 .badge {
+  // scss-docs-start badge-css-vars
+  --#{$variable-prefix}badge-padding: #{$badge-padding-y $badge-padding-x};
+  @include rfs($badge-font-size, --#{$variable-prefix}badge-font-size);
+  --#{$variable-prefix}badge-font-weight: #{$badge-font-weight};
+  --#{$variable-prefix}badge-color: #{$badge-color};
+  --#{$variable-prefix}badge-border-radius: #{$badge-border-radius};
+  // scss-docs-end badge-css-vars
+
  display: inline-block;
-  padding: $badge-padding-y $badge-padding-x;
-  @include font-size($badge-font-size);
-  font-weight: $badge-font-weight;
+  padding: var(--#{$variable-prefix}badge-padding);
+  font-size: var(--#{$variable-prefix}badge-font-size);
+  font-weight: var(--#{$variable-prefix}badge-font-weight);
  line-height: 1;
-  color: $badge-color;
+  color: var(--#{$variable-prefix}badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
-  @include border-radius($badge-border-radius);
+  border-radius: var(--#{$variable-prefix}badge-border-radius, 0); // stylelint-disable-line property-disallowed-list
  @include gradient-bg();

  // Empty badges collapse automatically
@@ -1,51 +1,98 @@
+// stylelint-disable custom-property-empty-line-before
+
 //
 // Base styles
 //

 .btn {
+  // scss-docs-start btn-css-vars
+  --#{$variable-prefix}btn-padding-x: #{$btn-padding-x};
+  --#{$variable-prefix}btn-padding-y: #{$btn-padding-y};
+  --#{$variable-prefix}btn-font-family: #{$btn-font-family};
+  @include rfs($btn-font-size, --#{$variable-prefix}btn-font-size);
+  --#{$variable-prefix}btn-font-weight: #{$btn-font-weight};
+  --#{$variable-prefix}btn-line-height: #{$btn-line-height};
+  --#{$variable-prefix}btn-color: #{$body-color};
+  --#{$variable-prefix}btn-bg: transparent;
+  --#{$variable-prefix}btn-border-width: #{$btn-border-width};
+  --#{$variable-prefix}btn-border-color: transparent;
+  --#{$variable-prefix}btn-border-radius: #{$btn-border-radius};
+  --#{$variable-prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$variable-prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
+  --#{$variable-prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$variable-prefix}btn-focus-shadow-rgb), .5);
+  // scss-docs-end btn-css-vars
+
  display: inline-block;
-  font-family: $btn-font-family;
-  font-weight: $btn-font-weight;
-  line-height: $btn-line-height;
-  color: $body-color;
+  padding: var(--#{$variable-prefix}btn-padding-y) var(--#{$variable-prefix}btn-padding-x);
+  font-family: var(--#{$variable-prefix}btn-font-family);
+  font-size: var(--#{$variable-prefix}btn-font-size);
+  font-weight: var(--#{$variable-prefix}btn-font-weight);
+  line-height: var(--#{$variable-prefix}btn-line-height);
+  color: var(--#{$variable-prefix}btn-color);
  text-align: center;
  text-decoration: if($link-decoration == none, null, none);
  white-space: $btn-white-space;
  vertical-align: middle;
  cursor: if($enable-button-pointers, pointer, null);
  user-select: none;
-  background-color: transparent;
-  border: $btn-border-width solid transparent;
-  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
+  border: var(--#{$variable-prefix}btn-border-width) solid var(--#{$variable-prefix}btn-border-color);
+  @include border-radius(var(--#{$variable-prefix}btn-border-radius));
+  @include gradient-bg(var(--#{$variable-prefix}btn-bg));
+  @include box-shadow(var(--#{$variable-prefix}btn-box-shadow));
  @include transition($btn-transition);

  &:hover {
-    color: $body-color;
+    color: var(--#{$variable-prefix}btn-hover-color);
    text-decoration: if($link-hover-decoration == underline, none, null);
+    background-color: var(--#{$variable-prefix}btn-hover-bg);
+    border-color: var(--#{$variable-prefix}btn-hover-border-color);
  }

  .btn-check:focus + &,
  &:focus {
+    color: var(--#{$variable-prefix}btn-hover-color);
+    @include gradient-bg(var(--#{$variable-prefix}btn-hover-bg));
+    border-color: var(--#{$variable-prefix}btn-hover-border-color);
    outline: 0;
-    box-shadow: $btn-focus-box-shadow;
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: var(--#{$variable-prefix}btn-box-shadow), var(--#{$variable-prefix}btn-focus-box-shadow);
+    } @else {
+      box-shadow: var(--#{$variable-prefix}btn-focus-box-shadow);
+    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
-  &.active {
-    @include box-shadow($btn-active-box-shadow);
+  &.active,
+  &.show {
+    color: var(--#{$variable-prefix}btn-active-color);
+    background-color: var(--#{$variable-prefix}btn-active-bg);
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$variable-prefix}btn-active-border-color);
+    @include box-shadow(var(--#{$variable-prefix}btn-active-shadow));

    &:focus {
-      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if $enable-shadows {
+        box-shadow: var(--#{$variable-prefix}btn-active-shadow), var(--#{$variable-prefix}btn-focus-box-shadow);
+      } @else {
+        box-shadow: var(--#{$variable-prefix}btn-focus-box-shadow);
+      }
    }
  }

  &:disabled,
  &.disabled,
  fieldset:disabled & {
+    color: var(--#{$variable-prefix}btn-disabled-color);
    pointer-events: none;
-    opacity: $btn-disabled-opacity;
+    background-color: var(--#{$variable-prefix}btn-disabled-bg);
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$variable-prefix}btn-disabled-border-color);
+    opacity: var(--#{$variable-prefix}btn-disabled-opacity);
    @include box-shadow(none);
  }
 }
@@ -76,24 +123,24 @@

 // Make a button look and behave like a link
 .btn-link {
-  font-weight: $font-weight-normal;
-  color: $btn-link-color;
+  --#{$variable-prefix}btn-font-weight: #{$font-weight-normal};
+  --#{$variable-prefix}btn-color: #{$btn-link-color};
+  --#{$variable-prefix}btn-bg: transparent;
+  --#{$variable-prefix}btn-border-color: transparent;
+  --#{$variable-prefix}btn-hover-color: #{$btn-link-hover-color};
+  --#{$variable-prefix}btn-hover-border-color: transparent;
+  --#{$variable-prefix}btn-active-border-color: transparent;
+  --#{$variable-prefix}btn-disabled-color: #{$btn-link-disabled-color};
+  --#{$variable-prefix}btn-disabled-border-color: transparent;
+  --#{$variable-prefix}btn-box-shadow: none;
+
  text-decoration: $link-decoration;

-  &:hover {
-    color: $btn-link-hover-color;
-    text-decoration: $link-hover-decoration;
-  }
-
+  &:hover,
  &:focus {
    text-decoration: $link-hover-decoration;
  }

-  &:disabled,
-  &.disabled {
-    color: $btn-link-disabled-color;
-  }
-
  // No need for an active state here
 }

@@ -15,27 +15,73 @@

 // The dropdown menu
 .dropdown-menu {
+  // scss-docs-start dropdown-css-vars
+  --#{$variable-prefix}dropdown-min-width: #{$dropdown-min-width};
+  --#{$variable-prefix}dropdown-padding-x: #{$dropdown-padding-x};
+  --#{$variable-prefix}dropdown-padding-y: #{$dropdown-padding-y};
+  --#{$variable-prefix}dropdown-spacer: #{$dropdown-spacer};
+  @include rfs($dropdown-font-size, --#{$variable-prefix}dropdown-font-size);
+  --#{$variable-prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before
+  --#{$variable-prefix}dropdown-bg: #{$dropdown-bg};
+  --#{$variable-prefix}dropdown-border-color: #{$dropdown-border-color};
+  --#{$variable-prefix}dropdown-border-radius: #{$dropdown-border-radius};
+  --#{$variable-prefix}dropdown-border-width: #{$dropdown-border-width};
+  --#{$variable-prefix}dropdown-inner-border: #{$dropdown-inner-border-radius};
+  --#{$variable-prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
+  --#{$variable-prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
+  --#{$variable-prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
+  --#{$variable-prefix}dropdown-link-color: #{$dropdown-link-color};
+  --#{$variable-prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
+  --#{$variable-prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
+  --#{$variable-prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
+  --#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
+  --#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
+  --#{$variable-prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
+  --#{$variable-prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
+  --#{$variable-prefix}dropdown-header-color: #{$dropdown-header-color};
+  --#{$variable-prefix}dropdown-header-padding: #{$dropdown-header-padding};
+  // scss-docs-end dropdown-css-vars
+
  position: absolute;
  z-index: $zindex-dropdown;
  display: none; // none by default, but block on "open" of the menu
-  min-width: $dropdown-min-width;
-  padding: $dropdown-padding-y $dropdown-padding-x;
+  min-width: var(--#{$variable-prefix}dropdown-min-width);
+  padding: var(--#{$variable-prefix}dropdown-padding-y) var(--#{$variable-prefix}dropdown-padding-x);
  margin: 0; // Override default margin of ul
  @include font-size($dropdown-font-size);
-  color: $dropdown-color;
+  color: var(--#{$variable-prefix}dropdown-color);
  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  list-style: none;
-  background-color: $dropdown-bg;
+  background-color: var(--#{$variable-prefix}dropdown-bg);
  background-clip: padding-box;
-  border: $dropdown-border-width solid $dropdown-border-color;
-  @include border-radius($dropdown-border-radius);
-  @include box-shadow($dropdown-box-shadow);
+  border: var(--#{$variable-prefix}dropdown-border-width) solid var(--#{$variable-prefix}dropdown-border-color);
+  @include border-radius(var(--#{$variable-prefix}dropdown-border-radius));
+  @include box-shadow(var(--#{$variable-prefix}dropdown-box-shadow));

  &[data-bs-popper] {
    top: 100%;
    left: 0;
-    margin-top: $dropdown-spacer;
+    margin-top: var(--#{$variable-prefix}dropdown-spacer);
  }
+
+  .dropdown > .dropdown-item {
+    background-image: escape-svg($dropdown-nested-bg);
+    background-repeat: no-repeat;
+    background-position: $dropdown-nested-bg-position;
+    background-size: $dropdown-nested-bg-size;
+
+    &:active {
+      background-image: escape-svg($dropdown-nested-active-bg);
+    }
+  }
+
+  .dropdown .dropdown-menu:hover,
+  .dropdown > .dropdown-item:hover ~ .dropdown-menu {
+    position: absolute;
+    top: 0;
+    left: calc(100% - .25rem); // stylelint-disable-line function-disallowed-list
+    display: block;
+
 }

 // scss-docs-start responsive-breakpoints
@@ -74,7 +120,7 @@
    top: auto;
    bottom: 100%;
    margin-top: 0;
-    margin-bottom: $dropdown-spacer;
+    margin-bottom: var(--#{$variable-prefix}dropdown-spacer);
  }

  .dropdown-toggle {
@@ -88,7 +134,7 @@
    right: auto;
    left: 100%;
    margin-top: 0;
-    margin-left: $dropdown-spacer;
+    margin-left: var(--#{$variable-prefix}dropdown-spacer);
  }

  .dropdown-toggle {
@@ -105,7 +151,7 @@
    right: 100%;
    left: auto;
    margin-top: 0;
-    margin-right: $dropdown-spacer;
+    margin-right: var(--#{$variable-prefix}dropdown-spacer);
  }

  .dropdown-toggle {
@@ -122,7 +168,7 @@
  height: 0;
  margin: $dropdown-divider-margin-y 0;
  overflow: hidden;
-  border-top: 1px solid $dropdown-divider-bg;
+  border-top: 1px solid var(--#{$variable-prefix}dropdown-divider-bg);
 }

 // Links, buttons, and more within the dropdown menu
@@ -131,10 +177,10 @@
 .dropdown-item {
  display: block;
  width: 100%; // For `<button>`s
-  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+  padding: var(--#{$variable-prefix}dropdown-item-padding-y) var(--#{$variable-prefix}dropdown-item-padding-x);
  clear: both;
  font-weight: $font-weight-normal;
-  color: $dropdown-link-color;
+  color: var(--#{$variable-prefix}dropdown-link-color);
  text-align: inherit; // For `<button>`s
  text-decoration: if($link-decoration == none, null, none);
  white-space: nowrap; // prevent links from randomly breaking onto new lines
@@ -155,21 +201,21 @@

  &:hover,
  &:focus {
-    color: $dropdown-link-hover-color;
+    color: var(--#{$variable-prefix}dropdown-link-hover-color);
    text-decoration: if($link-hover-decoration == underline, none, null);
-    @include gradient-bg($dropdown-link-hover-bg);
+    @include gradient-bg(var(--#{$variable-prefix}dropdown-link-hover-bg));
  }

  &.active,
  &:active {
-    color: $dropdown-link-active-color;
+    color: var(--#{$variable-prefix}dropdown-link-active-color);
    text-decoration: none;
-    @include gradient-bg($dropdown-link-active-bg);
+    @include gradient-bg(var(--#{$variable-prefix}dropdown-link-active-bg));
  }

  &.disabled,
  &:disabled {
-    color: $dropdown-link-disabled-color;
+    color: var(--#{$variable-prefix}dropdown-link-disabled-color);
    pointer-events: none;
    background-color: transparent;
    // Remove CSS gradients if they're enabled
@@ -184,57 +230,34 @@
 // Dropdown section headers
 .dropdown-header {
  display: block;
-  padding: $dropdown-header-padding;
+  padding: var(--#{$variable-prefix}dropdown-header-padding);
  margin-bottom: 0; // for use with heading elements
  @include font-size($font-size-sm);
-  color: $dropdown-header-color;
+  color: var(--#{$variable-prefix}dropdown-header-color);
  white-space: nowrap; // as with > li > a
 }

 // Dropdown text
 .dropdown-item-text {
  display: block;
-  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-  color: $dropdown-link-color;
+  padding: var(--#{$variable-prefix}dropdown-item-padding);
+  color: var(--#{$variable-prefix}dropdown-link-color);
 }

 // Dark dropdowns
 .dropdown-menu-dark {
-  color: $dropdown-dark-color;
-  background-color: $dropdown-dark-bg;
-  border-color: $dropdown-dark-border-color;
-  @include box-shadow($dropdown-dark-box-shadow);
-
-  .dropdown-item {
-    color: $dropdown-dark-link-color;
-
-    &:hover,
-    &:focus {
-      color: $dropdown-dark-link-hover-color;
-      @include gradient-bg($dropdown-dark-link-hover-bg);
-    }
-
-    &.active,
-    &:active {
-      color: $dropdown-dark-link-active-color;
-      @include gradient-bg($dropdown-dark-link-active-bg);
-    }
-
-    &.disabled,
-    &:disabled {
-      color: $dropdown-dark-link-disabled-color;
-    }
-  }
-
-  .dropdown-divider {
-    border-color: $dropdown-dark-divider-bg;
-  }
-
-  .dropdown-item-text {
-    color: $dropdown-dark-link-color;
-  }
-
-  .dropdown-header {
-    color: $dropdown-dark-header-color;
-  }
+  // scss-docs-start dropdown-dark-css-vars
+  --#{$variable-prefix}dropdown-color: #{$dropdown-dark-color};
+  --#{$variable-prefix}dropdown-bg: #{$dropdown-dark-bg};
+  --#{$variable-prefix}dropdown-border-color: #{$dropdown-dark-border-color};
+  --#{$variable-prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
+  --#{$variable-prefix}dropdown-link-color: #{$dropdown-dark-link-color};
+  --#{$variable-prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
+  --#{$variable-prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
+  --#{$variable-prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
+  --#{$variable-prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
+  --#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
+  --#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
+  --#{$variable-prefix}dropdown-header-color: #{$dropdown-dark-header-color};
+  // scss-docs-end dropdown-dark-css-vars
 }
@@ -16,40 +16,13 @@
  list-style-type: none;
  counter-reset: section;

-  > li::before {
+  > .list-group-item::before {
    // Increments only this instance of the section counter
    content: counters(section, ".") ". ";
    counter-increment: section;
  }
 }

-
-// Interactive list items
-//
-// Use anchor or button elements instead of `li`s or `div`s to create interactive
-// list items. Includes an extra `.active` modifier class for selected items.
-
-.list-group-item-action {
-  width: 100%; // For `<button>`s (anchors become 100% by default though)
-  color: $list-group-action-color;
-  text-align: inherit; // For `<button>`s (anchors inherit)
-
-  // Hover state
-  &:hover,
-  &:focus {
-    z-index: 1; // Place hover/focus items above their siblings for proper border styling
-    color: $list-group-action-hover-color;
-    text-decoration: none;
-    background-color: $list-group-hover-bg;
-  }
-
-  &:active {
-    color: $list-group-action-active-color;
-    background-color: $list-group-action-active-bg;
-  }
-}
-
-
 // Individual list items
 //
 // Use on `li`s or `div`s within the `.list-group` parent.
@@ -96,6 +69,30 @@
  }
 }

+// Interactive list items
+//
+// Use anchor or button elements instead of `li`s or `div`s to create interactive
+// list items. Includes an extra `.active` modifier class for selected items.
+
+.list-group-item-action {
+  width: 100%; // For `<button>`s (anchors become 100% by default though)
+  color: $list-group-action-color;
+  text-align: inherit; // For `<button>`s (anchors inherit)
+
+  // Hover state
+  &:hover,
+  &:focus {
+    z-index: 1; // Place hover/focus items above their siblings for proper border styling
+    color: $list-group-action-hover-color;
+    text-decoration: none;
+    background-color: $list-group-hover-bg;
+  }
+
+  &:active {
+    color: $list-group-action-active-color;
+    background-color: $list-group-action-active-bg;
+  }
+}

 // Horizontal
 //
@@ -130,6 +130,7 @@
  align-items: center; // vertically center
  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
  padding: $modal-inner-padding - $modal-footer-margin-between * .5;
+  background-color: $modal-footer-bg;
  border-top: $modal-footer-border-width solid $modal-footer-border-color;
  @include border-bottom-radius($modal-content-inner-border-radius);

@@ -1,29 +1,38 @@
-// Contents
-//
-// Navbar
-// Navbar brand
-// Navbar nav
-// Navbar text
-// Responsive navbar
-// Navbar position
-// Navbar themes
-
-
 // Navbar
 //
 // Provide a static navbar from which we expand to create full-width, fixed, and
 // other navbar variations.

 .navbar {
+  // scss-docs-start navbar-css-vars
+  --#{$variable-prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
+  --#{$variable-prefix}navbar-padding-y: #{$navbar-padding-y};
+  --#{$variable-prefix}navbar-color: #{$navbar-light-color};
+  --#{$variable-prefix}navbar-hover-color: #{$navbar-light-hover-color};
+  --#{$variable-prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
+  --#{$variable-prefix}navbar-active-color: #{$navbar-light-active-color};
+  --#{$variable-prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
+  --#{$variable-prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
+  --#{$variable-prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
+  --#{$variable-prefix}navbar-brand-color: #{$navbar-light-brand-color};
+  --#{$variable-prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
+  --#{$variable-prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
+  --#{$variable-prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
+  --#{$variable-prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
+  --#{$variable-prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
+  --#{$variable-prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
+  --#{$variable-prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
+  --#{$variable-prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
+  --#{$variable-prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
+  --#{$variable-prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
+  // scss-docs-end navbar-css-vars
+
  position: relative;
  display: flex;
  flex-wrap: wrap; // allow us to do the line break for collapsing content
  align-items: center;
  justify-content: space-between; // space out brand from logo
-  padding-top: $navbar-padding-y;
-  padding-right: $navbar-padding-x; // default: null
-  padding-bottom: $navbar-padding-y;
-  padding-left: $navbar-padding-x; // default: null
+  padding: var(--#{$variable-prefix}navbar-padding-y) var(--#{$variable-prefix}navbar-padding-x);
  @include gradient-bg();

  // Because flex properties aren't inherited, we need to redeclare these first
@@ -54,15 +63,17 @@
 // Used for brand, project, or site names.

 .navbar-brand {
-  padding-top: $navbar-brand-padding-y;
-  padding-bottom: $navbar-brand-padding-y;
-  margin-right: $navbar-brand-margin-end;
-  @include font-size($navbar-brand-font-size);
+  padding-top: var(--#{$variable-prefix}navbar-brand-padding-y);
+  padding-bottom: var(--#{$variable-prefix}navbar-brand-padding-y);
+  margin-right: var(--#{$variable-prefix}navbar-brand-margin-end);
+  @include font-size(var(--#{$variable-prefix}navbar-brand-font-size));
+  color: var(--#{$variable-prefix}navbar-brand-color);
  text-decoration: if($link-decoration == none, null, none);
  white-space: nowrap;

  &:hover,
  &:focus {
+    color: var(--#{$variable-prefix}navbar-brand-hover-color);
    text-decoration: if($link-hover-decoration == underline, none, null);
  }
 }
@@ -82,6 +93,21 @@
  .nav-link {
    padding-right: 0;
    padding-left: 0;
+    color: var(--#{$variable-prefix}navbar-color);
+
+    &:hover,
+    &:focus {
+      color: var(--#{$variable-prefix}navbar-hover-color);
+    }
+
+    &.disabled {
+      color: var(--#{$variable-prefix}navbar-disabled-color);
+    }
+  }
+
+  .show > .nav-link,
+  .nav-link.active {
+    color: var(--#{$variable-prefix}navbar-active-color);
  }

  .dropdown-menu {
@@ -97,6 +123,13 @@
 .navbar-text {
  padding-top: $nav-link-padding-y;
  padding-bottom: $nav-link-padding-y;
+  color: var(--#{$variable-prefix}navbar-color);
+
+  a,
+  a:hover,
+  a:focus  {
+    color: var(--#{$variable-prefix}navbar-active-color);
+  }
 }


@@ -118,13 +151,14 @@

 // Button for toggling the navbar when in its collapsed state
 .navbar-toggler {
-  padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
-  @include font-size($navbar-toggler-font-size);
+  padding: var(--#{$variable-prefix}navbar-toggler-padding-y) var(--#{$variable-prefix}navbar-toggler-padding-x);
+  @include font-size(var(--#{$variable-prefix}navbar-toggler-font-size));
  line-height: 1;
+  color: var(--#{$variable-prefix}navbar-color);
  background-color: transparent; // remove default button style
-  border: $border-width solid transparent; // remove default button style
-  @include border-radius($navbar-toggler-border-radius);
-  @include transition($navbar-toggler-transition);
+  border: $border-width solid var(--#{$variable-prefix}navbar-toggler-border-color); // remove default button style
+  @include border-radius(var(--#{$variable-prefix}navbar-toggler-border-radius));
+  @include transition(var(--#{$variable-prefix}navbar-toggler-transition));

  &:hover {
    text-decoration: none;
@@ -133,7 +167,7 @@
  &:focus {
    text-decoration: none;
    outline: 0;
-    box-shadow: 0 0 0 $navbar-toggler-focus-width;
+    box-shadow: 0 0 0 var(--#{$variable-prefix}navbar-toggler-focus-width);
  }
 }

@@ -144,6 +178,7 @@
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
+  background-image: var(--#{$variable-prefix}navbar-toggler-icon-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
@@ -176,8 +211,8 @@
          }

          .nav-link {
-            padding-right: $navbar-nav-link-padding-x;
-            padding-left: $navbar-nav-link-padding-x;
+            padding-right: var(--#{$variable-prefix}navbar-nav-link-padding-x);
+            padding-left: var(--#{$variable-prefix}navbar-nav-link-padding-x);
          }
        }

@@ -224,6 +259,12 @@
          padding: 0;
          overflow-y: visible;
        }
+
+        // Reset `background-color` in case `.bg-*` classes are used in offcanvas
+        .offcanvas,
+        .offcanvas-body {
+          background-color: transparent !important; // stylelint-disable-line declaration-no-important
+        }
      }
    }
  }
@@ -234,103 +275,17 @@
 //
 // Styles for switching between navbars with light or dark background.

-// Dark links against a light background
 .navbar-light {
-  .navbar-brand {
-    color: $navbar-light-brand-color;
-
-    &:hover,
-    &:focus {
-      color: $navbar-light-brand-hover-color;
-    }
-  }
-
-  .navbar-nav {
-    .nav-link {
-      color: $navbar-light-color;
-
-      &:hover,
-      &:focus {
-        color: $navbar-light-hover-color;
-      }
-
-      &.disabled {
-        color: $navbar-light-disabled-color;
-      }
-    }
-
-    .show > .nav-link,
-    .nav-link.active {
-      color: $navbar-light-active-color;
-    }
-  }
-
-  .navbar-toggler {
-    color: $navbar-light-color;
-    border-color: $navbar-light-toggler-border-color;
-  }
-
-  .navbar-toggler-icon {
-    background-image: escape-svg($navbar-light-toggler-icon-bg);
-  }
-
-  .navbar-text {
-    color: $navbar-light-color;
-
-    a,
-    a:hover,
-    a:focus  {
-      color: $navbar-light-active-color;
-    }
-  }
+  @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0");
 }

-// White links against a dark background
 .navbar-dark {
-  .navbar-brand {
-    color: $navbar-dark-brand-color;
-
-    &:hover,
-    &:focus {
-      color: $navbar-dark-brand-hover-color;
-    }
-  }
-
-  .navbar-nav {
-    .nav-link {
-      color: $navbar-dark-color;
-
-      &:hover,
-      &:focus {
-        color: $navbar-dark-hover-color;
-      }
-
-      &.disabled {
-        color: $navbar-dark-disabled-color;
-      }
-    }
-
-    .show > .nav-link,
-    .nav-link.active {
-      color: $navbar-dark-active-color;
-    }
-  }
-
-  .navbar-toggler {
-    color: $navbar-dark-color;
-    border-color: $navbar-dark-toggler-border-color;
-  }
-
-  .navbar-toggler-icon {
-    background-image: escape-svg($navbar-dark-toggler-icon-bg);
-  }
-
-  .navbar-text {
-    color: $navbar-dark-color;
-    a,
-    a:hover,
-    a:focus {
-      color: $navbar-dark-active-color;
-    }
-  }
+  --#{$variable-prefix}navbar-color: #{$navbar-dark-color};
+  --#{$variable-prefix}navbar-hover-color: #{$navbar-dark-hover-color};
+  --#{$variable-prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
+  --#{$variable-prefix}navbar-active-color: #{$navbar-dark-active-color};
+  --#{$variable-prefix}navbar-brand-color: #{$navbar-dark-brand-color};
+  --#{$variable-prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
+  --#{$variable-prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
+  --#{$variable-prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
 }
@@ -1,4 +1,26 @@
 .pagination {
+  // scss-docs-start pagination-css-vars
+  --#{$variable-prefix}pagination-padding-x: #{$pagination-padding-x};
+  --#{$variable-prefix}pagination-padding-y: #{$pagination-padding-y};
+  --#{$variable-prefix}pagination-color: #{$pagination-color};
+  --#{$variable-prefix}pagination-bg: #{$pagination-bg};
+  --#{$variable-prefix}pagination-border-width: #{$pagination-border-width};
+  --#{$variable-prefix}pagination-border-color: #{$pagination-border-color};
+  --#{$variable-prefix}pagination-border-radius: #{$pagination-border-radius};
+  --#{$variable-prefix}pagination-hover-color: #{$pagination-hover-color};
+  --#{$variable-prefix}pagination-hover-bg: #{$pagination-hover-bg};
+  --#{$variable-prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
+  --#{$variable-prefix}pagination-focus-color: #{$pagination-focus-color};
+  --#{$variable-prefix}pagination-focus-bg: #{$pagination-focus-bg};
+  --#{$variable-prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
+  --#{$variable-prefix}pagination-active-color: #{$pagination-active-color};
+  --#{$variable-prefix}pagination-active-bg: #{$pagination-active-bg};
+  --#{$variable-prefix}pagination-active-border-color: #{$pagination-active-border-color};
+  --#{$variable-prefix}pagination-disabled-color: #{$pagination-disabled-color};
+  --#{$variable-prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
+  --#{$variable-prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
+  // scss-docs-end pagination-css-vars
+
  display: flex;
  @include list-unstyled();
 }
@@ -6,26 +28,28 @@
 .page-link {
  position: relative;
  display: block;
-  color: $pagination-color;
+  padding: var(--#{$variable-prefix}pagination-padding-y) var(--#{$variable-prefix}pagination-padding-x);
+  font-size: var(--#{$variable-prefix}pagination-font-size);
+  color: var(--#{$variable-prefix}pagination-color);
  text-decoration: if($link-decoration == none, null, none);
-  background-color: $pagination-bg;
-  border: $pagination-border-width solid $pagination-border-color;
+  background-color: var(--#{$variable-prefix}pagination-bg);
+  border: var(--#{$variable-prefix}pagination-border-width) solid var(--#{$variable-prefix}pagination-border-color);
  @include transition($pagination-transition);

  &:hover {
    z-index: 2;
-    color: $pagination-hover-color;
+    color: var(--#{$variable-prefix}pagination-hover-color);
    text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: $pagination-hover-bg;
-    border-color: $pagination-hover-border-color;
+    background-color: var(--#{$variable-prefix}pagination-hover-bg);
+    border-color: var(--#{$variable-prefix}pagination-hover-border-color);
  }

  &:focus {
    z-index: 3;
-    color: $pagination-focus-color;
-    background-color: $pagination-focus-bg;
+    color: var(--#{$variable-prefix}pagination-focus-color);
+    background-color: var(--#{$variable-prefix}pagination-focus-bg);
    outline: $pagination-focus-outline;
-    box-shadow: $pagination-focus-box-shadow;
+    box-shadow: var(--#{$variable-prefix}pagination-focus-box-shadow);
  }
 }

@@ -34,18 +58,37 @@
    margin-left: $pagination-margin-start;
  }

+  @if $pagination-margin-start == (-$pagination-border-width) {
+    &:first-child {
+      .page-link {
+        @include border-start-radius(var(--#{$variable-prefix}pagination-border-radius));
+      }
+    }
+
+    &:last-child {
+      .page-link {
+        @include border-end-radius(var(--#{$variable-prefix}pagination-border-radius));
+      }
+    }
+  } @else {
+    // Add border-radius to all pageLinks in case they have left margin
+    .page-link {
+      @include border-radius(var(--#{$variable-prefix}pagination-border-radius));
+    }
+  }
+
  &.active .page-link {
    z-index: 3;
-    color: $pagination-active-color;
-    @include gradient-bg($pagination-active-bg);
-    border-color: $pagination-active-border-color;
+    color: var(--#{$variable-prefix}pagination-active-color);
+    @include gradient-bg(var(--#{$variable-prefix}pagination-active-bg));
+    border-color: var(--#{$variable-prefix}pagination-active-border-color);
  }

  &.disabled .page-link {
-    color: $pagination-disabled-color;
+    color: var(--#{$variable-prefix}pagination-disabled-color);
    pointer-events: none;
-    background-color: $pagination-disabled-bg;
-    border-color: $pagination-disabled-border-color;
+    background-color: var(--#{$variable-prefix}pagination-disabled-bg);
+    border-color: var(--#{$variable-prefix}pagination-disabled-border-color);
  }
 }

@@ -53,7 +96,6 @@
 //
 // Sizing
 //
-@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);

 .pagination-lg {
  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
@@ -64,20 +64,15 @@ body {
 // Content grouping
 //
 // 1. Reset Firefox's gray color
-// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field

 hr {
  margin: $hr-margin-y 0;
  color: $hr-color; // 1
-  background-color: $hr-bg-color;
-  border: $hr-border-width;
+  border: 0;
+  border-top: $hr-border-width solid $hr-border-color;
  opacity: $hr-opacity;
 }

-hr:not([size]) {
-  height: $hr-height; // 2
-}
-

 // Typography
 //
@@ -103,6 +103,7 @@
 //
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)

+// For rows
 .table-striped {
  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
@@ -110,6 +111,14 @@
  }
 }

+// For columns
+.table-striped-columns {
+  > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
+    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
+    color: var(--#{$variable-prefix}table-striped-color);
+  }
+}
+
 // Active table
 //
 // The `.table-active` class can be added to highlight rows or cells
@@ -236,12 +236,6 @@ $utilities: map-merge(
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
-    "gap": (
-      responsive: true,
-      property: gap,
-      class: gap,
-      values: $spacers
-    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
@@ -434,6 +428,13 @@ $utilities: map-merge(
      class: ps,
      values: $spacers
    ),
+    // Gap utility
+    "gap": (
+      responsive: true,
+      property: gap,
+      class: gap,
+      values: $spacers
+    ),
    // scss-docs-end utils-spacing
    // Text
    // scss-docs-start utils-text
@@ -467,7 +467,7 @@ $grid-row-columns:            6 !default;

 // Container padding

-$container-padding-x: $grid-gutter-width * .5 !default;
+$container-padding-x: $grid-gutter-width !default;


 // Components
@@ -620,9 +620,13 @@ $blockquote-footer-font-size: $small-font-size !default;

 $hr-margin-y:                 $spacer !default;
 $hr-color:                    inherit !default;
-$hr-bg-color:                 currentColor !default;
-$hr-border-width:             0 !default;
-$hr-height:                   $border-width !default;
+// fusv-disable
+$hr-bg-color: null !default; // Deprecated in v5.2.0
+$hr-height: null !default; // Deprecated in v5.2.0
+// fusv-enable
+
+$hr-border-color: null !default; // Allows for inherited colors
+$hr-border-width: $border-width !default;
 $hr-opacity:                  .25 !default;

 $legend-margin-bottom:        .5rem !default;
@@ -676,6 +680,7 @@ $table-border-width:          $border-width !default;
 $table-border-color:          $border-color !default;

 $table-striped-order:         odd !default;
+$table-striped-columns-order: even !default;

 $table-group-separator-color: currentColor !default;

@@ -1144,6 +1149,11 @@ $dropdown-item-padding-x:           $spacer !default;

 $dropdown-header-color:             $gray-600 !default;
 $dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
+
+$dropdown-nested-bg:                url("data:image/svg+xml,<svg viewBox='0 0 7 12' xmlns='http://www.w3.org/2000/svg'><path d='m1 1 5 5-5 5' stroke='#{$dropdown-link-color}' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>") !default;
+$dropdown-nested-active-bg:         url("data:image/svg+xml,<svg viewBox='0 0 7 12' xmlns='http://www.w3.org/2000/svg'><path d='m1 1 5 5-5 5' stroke='#{$dropdown-link-active-color}' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/></svg>") !default;
+$dropdown-nested-bg-position:       right $dropdown-item-padding-x center !default;
+$dropdown-nested-bg-size:           7px 12px !default;
 // scss-docs-end dropdown-variables

 // scss-docs-start dropdown-dark-variables
@@ -1389,6 +1399,7 @@ $modal-footer-border-width:         $modal-header-border-width !default;
 $modal-header-padding-y:            $modal-inner-padding !default;
 $modal-header-padding-x:            $modal-inner-padding !default;
 $modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+$modal-footer-bg:                   null !default;

 $modal-sm:                          300px !default;
 $modal-md:                          500px !default;
@@ -2,6 +2,7 @@
  position: relative;

  > .form-control,
+  > .form-control-plaintext,
  > .form-select {
    height: $form-floating-height;
    line-height: $form-floating-line-height;
@@ -19,8 +20,8 @@
    @include transition($form-floating-transition);
  }

-  // stylelint-disable no-duplicate-selectors
-  > .form-control {
+  > .form-control,
+  > .form-control-plaintext {
    padding: $form-floating-padding-y $form-floating-padding-x;

    &::placeholder {
@@ -46,6 +47,7 @@

  > .form-control:focus,
  > .form-control:not(:placeholder-shown),
+  > .form-control-plaintext,
  > .form-select {
    ~ label {
      opacity: $form-floating-label-opacity;
@@ -59,5 +61,10 @@
      transform: $form-floating-label-transform;
    }
  }
-  // stylelint-enable no-duplicate-selectors
+
+  > .form-control-plaintext {
+    ~ label {
+      border-width: $input-border-width 0; // Required to properly position label text - as explained above
+    }
+  }
 }
@@ -14,6 +14,18 @@
  }
 }

+.form-check-reverse {
+  padding-right: $form-check-padding-start;
+  padding-left: 0;
+  text-align: right;
+
+  .form-check-input {
+    float: right;
+    margin-right: $form-check-padding-start * -1;
+    margin-left: 0;
+  }
+}
+
 .form-check-input {
  width: $form-check-input-width;
  height: $form-check-input-width;
@@ -90,6 +102,7 @@
  &[disabled],
  &:disabled {
    ~ .form-check-label {
+      cursor: default;
      opacity: $form-check-label-disabled-opacity;
    }
  }
@@ -129,6 +142,16 @@
      }
    }
  }
+
+  &.form-check-reverse {
+    padding-right: $form-switch-padding-start;
+    padding-left: 0;
+
+    .form-check-input {
+      margin-right: $form-switch-padding-start * -1;
+      margin-left: 0;
+    }
+  }
 }

 .form-check-inline {
@@ -1,11 +1,11 @@
@each $color, $value in $theme-colors {
  .link-#{$color} {
-    color: $value;
+    color: $value !important; // stylelint-disable-line declaration-no-important

    @if $link-shade-percentage != 0 {
      &:hover,
      &:focus {
-        color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+        color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
      }
    }
  }
@@ -1,3 +1,5 @@
+// stylelint-disable custom-property-empty-line-before
+
 // Button variants
 //
 // Easily pump out default styles, as well as :hover, :focus, :active,
@@ -18,59 +20,20 @@
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
 ) {
-  color: $color;
-  @include gradient-bg($background);
-  border-color: $border;
-  @include box-shadow($btn-box-shadow);
-
-  &:hover {
-    color: $hover-color;
-    @include gradient-bg($hover-background);
-    border-color: $hover-border;
-  }
-
-  .btn-check:focus + &,
-  &:focus {
-    color: $hover-color;
-    @include gradient-bg($hover-background);
-    border-color: $hover-border;
-    @if $enable-shadows {
-      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
-    }
-  }
-
-  .btn-check:checked + &,
-  .btn-check:active + &,
-  &:active,
-  &.active,
-  .show > &.dropdown-toggle {
-    color: $active-color;
-    background-color: $active-background;
-    // Remove CSS gradients if they're enabled
-    background-image: if($enable-gradients, none, null);
-    border-color: $active-border;
-
-    &:focus {
-      @if $enable-shadows {
-        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
-      } @else {
-        // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
-      }
-    }
-  }
-
-  &:disabled,
-  &.disabled {
-    color: $disabled-color;
-    background-color: $disabled-background;
-    // Remove CSS gradients if they're enabled
-    background-image: if($enable-gradients, none, null);
-    border-color: $disabled-border;
-  }
+  --#{$variable-prefix}btn-color: #{$color};
+  --#{$variable-prefix}btn-bg: #{$background};
+  --#{$variable-prefix}btn-border-color: #{$border};
+  --#{$variable-prefix}btn-hover-color: #{$hover-color};
+  --#{$variable-prefix}btn-hover-bg: #{$hover-background};
+  --#{$variable-prefix}btn-hover-border-color: #{$hover-border};
+  --#{$variable-prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+  --#{$variable-prefix}btn-active-color: #{$active-color};
+  --#{$variable-prefix}btn-active-bg: #{$active-background};
+  --#{$variable-prefix}btn-active-border-color: #{$active-border};
+  --#{$variable-prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$variable-prefix}btn-disabled-color: #{$disabled-color};
+  --#{$variable-prefix}btn-disabled-bg: #{$disabled-background};
+  --#{$variable-prefix}btn-disabled-border-color: #{$disabled-border};
 }
 // scss-docs-end btn-variant-mixin

@@ -82,52 +45,27 @@
  $active-border: $color,
  $active-color: color-contrast($active-background)
 ) {
-  color: $color;
-  border-color: $color;
-
-  &:hover {
-    color: $color-hover;
-    background-color: $active-background;
-    border-color: $active-border;
-  }
-
-  .btn-check:focus + &,
-  &:focus {
-    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
-  }
-
-  .btn-check:checked + &,
-  .btn-check:active + &,
-  &:active,
-  &.active,
-  &.dropdown-toggle.show {
-    color: $active-color;
-    background-color: $active-background;
-    border-color: $active-border;
-
-    &:focus {
-      @if $enable-shadows {
-        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
-      } @else {
-        // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
-      }
-    }
-  }
-
-  &:disabled,
-  &.disabled {
-    color: $color;
-    background-color: transparent;
-  }
+  --#{$variable-prefix}btn-color: #{$color};
+  --#{$variable-prefix}btn-border-color: #{$color};
+  --#{$variable-prefix}btn-hover-color: #{$color-hover};
+  --#{$variable-prefix}btn-hover-bg: #{$active-background};
+  --#{$variable-prefix}btn-hover-border-color: #{$active-border};
+  --#{$variable-prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+  --#{$variable-prefix}btn-active-color: #{$active-color};
+  --#{$variable-prefix}btn-active-bg: #{$active-background};
+  --#{$variable-prefix}btn-active-border-color: #{$active-border};
+  --#{$variable-prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$variable-prefix}btn-disabled-color: #{$color};
+  --#{$variable-prefix}btn-disabled-bg: transparent;
+  --#{$variable-prefix}gradient: none;
 }
 // scss-docs-end btn-outline-variant-mixin

 // scss-docs-start btn-size-mixin
@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);
+  --#{$variable-prefix}btn-padding-y: #{$padding-y};
+  --#{$variable-prefix}btn-padding-x: #{$padding-x};
+  @include rfs($font-size, --#{$variable-prefix}btn-font-size);
+  --#{$variable-prefix}btn-border-radius: #{$border-radius};
 }
 // scss-docs-end btn-size-mixin
@@ -4,8 +4,8 @@
  --#{$variable-prefix}gutter-x: #{$gutter};
  --#{$variable-prefix}gutter-y: 0;
  width: 100%;
-  padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
-  padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
+  padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
  margin-right: auto;
  margin-left: auto;
 }
@@ -2,30 +2,9 @@

 // scss-docs-start pagination-mixin
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
-  .page-link {
-    padding: $padding-y $padding-x;
-    @include font-size($font-size);
-  }
-
-  .page-item {
-    @if $pagination-margin-start == (-$pagination-border-width) {
-      &:first-child {
-        .page-link {
-          @include border-start-radius($border-radius);
-        }
-      }
-
-      &:last-child {
-        .page-link {
-          @include border-end-radius($border-radius);
-        }
-      }
-    } @else {
-      //Add border-radius to all pageLinks in case they have left margin
-      .page-link {
-        @include border-radius($border-radius);
-      }
-    }
-  }
+  --#{$variable-prefix}pagination-padding-x: #{$padding-x};
+  --#{$variable-prefix}pagination-padding-y: #{$padding-y};
+  @include rfs($font-size, --#{$variable-prefix}pagination-font-size);
+  --#{$variable-prefix}pagination-border-radius: #{$border-radius}; // stylelint-disable-line custom-property-empty-line-before
 }
 // scss-docs-end pagination-mixin
@@ -10,7 +10,7 @@
 * For details, see https://creativecommons.org/licenses/by/3.0/.
 */

-/* global ClipboardJS: false, anchors: false, bootstrap: false */
+/* global ClipboardJS: false, bootstrap: false */

 (function () {
  'use strict'
@@ -118,7 +118,8 @@
  }

  // Insert copy to clipboard button before .highlight
-  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
+  var btnTitle = 'Copy to clipboard'
+  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard">Copy</button></div>'
  document.querySelectorAll('div.highlight')
    .forEach(function (element) {
      element.insertAdjacentHTML('beforebegin', btnHtml)
@@ -126,7 +127,7 @@

  document.querySelectorAll('.btn-clipboard')
    .forEach(function (btn) {
-      var tooltipBtn = new bootstrap.Tooltip(btn)
+      var tooltipBtn = new bootstrap.Tooltip(btn, { title: btnTitle })

      btn.addEventListener('mouseleave', function () {
        // Explicitly hide tooltip, since after clicking it remains
@@ -144,11 +145,10 @@

  clipboard.on('success', function (event) {
    var tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
-    var originalTitle = event.trigger.getAttribute('title')

    tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
    event.trigger.addEventListener('hidden.bs.tooltip', function () {
-      tooltipBtn.setContent({ '.tooltip-inner': originalTitle })
+      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
    }, { once: true })
    event.clearSelection()
  })
@@ -157,16 +157,10 @@
    var modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
    var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
    var tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
-    var originalTitle = event.trigger.getAttribute('title')

    tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg })
    event.trigger.addEventListener('hidden.bs.tooltip', function () {
-      tooltipBtn.setContent({ '.tooltip-inner': originalTitle })
+      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
    }, { once: true })
  })
-
-  anchors.options = {
-    icon: '#'
-  }
-  anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
 })()
@@ -24,7 +24,7 @@
 .algolia-docsearch-suggestion--category-header {
  padding: .125rem 1rem;
  font-weight: 600;
-  color: $bd-purple-bright;
+  color: $bd-violet;

  :not(.algolia-docsearch-suggestion__main) > & {
    display: none;
@@ -1,11 +1,21 @@
-.anchorjs-link {
+.anchor-link {
+  padding: 0 .175rem;
  font-weight: 400;
  color: rgba($link-color, .5);
-  @include transition(color .15s ease-in-out);
+  text-decoration: none;
+  opacity: 0;
+  @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
+
+  &::after {
+    content: "#";
+  }

  &:focus,
-  &:hover {
+  &:hover,
+  :hover > &,
+  :target > & {
    color: $link-color;
    text-decoration: none;
+    opacity: 1;
  }
 }
@@ -4,11 +4,11 @@

 // Logo series wrapper
 .bd-brand-logos {
-  color: $bd-purple-bright;
+  color: $bd-violet;

  .inverse {
    color: $white;
-    background-color: $bd-purple-bright;
+    background-color: $bd-violet;
  }
 }

@@ -2,54 +2,34 @@
 //
 // Custom buttons for the docs.

+// scss-docs-start btn-css-vars-example
 .btn-bd-primary {
-  font-weight: 600;
-  color: $white;
-  background-color: $bd-purple-bright;
-  border-color: $bd-purple-bright;
-
-  &:hover,
-  &:active {
-    color: $white;
-    background-color: shade-color($bd-purple-bright, 20%);
-    border-color: shade-color($bd-purple-bright, 20%);
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
-  }
+  --bs-btn-font-weight: 600;
+  --bs-btn-color: var(--bs-white);
+  --bs-btn-bg: var(--bd-violet);
+  --bs-btn-border-color: var(--bd-violet);
+  --bs-btn-hover-color: var(--bs-white);
+  --bs-btn-hover-bg: #{shade-color($bd-violet, 20%)};
+  --bs-btn-hover-border-color: #{shade-color($bd-violet, 20%)};
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
 }
+// scss-docs-end btn-css-vars-example

-.btn-bd-download {
-  font-weight: 600;
-  color: $bd-download;
-  border-color: $bd-download;
-
-  &:hover,
-  &:active {
-    color: $bd-dark;
-    background-color: $bd-download;
-    border-color: $bd-download;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-download, .25);
-  }
+.btn-bd-accent {
+  --bs-btn-font-weight: 600;
+  --bs-btn-color: var(--bd-accent);
+  --bs-btn-border-color: var(--bd-accent);
+  --bs-btn-hover-color: var(--bd-dark);
+  --bs-btn-hover-bg: var(--bd-accent);
+  --bs-btn-hover-border-color: var(--bd-accent);
+  --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
 }

 .btn-bd-light {
-  color: $gray-600;
-  border-color: $gray-300;
-
-  .show > &,
-  &:hover,
-  &:active {
-    color: $bd-purple-bright;
-    background-color: $white;
-    border-color: $bd-purple-bright;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
-  }
+  --bs-btn-color: var(--bs-gray-600);
+  --bs-btn-border-color: var(--bs-gray-300);
+  --bs-btn-active-color: var(--bd-violet);
+  --bs-btn-active-bg: var(--bs-white);
+  --bs-btn-active-border-color: var(--bd-violet);
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
 }
@@ -124,7 +124,7 @@
    display: block;
  }

-  > :last-child {
+  > :not(hr):last-child {
    margin-bottom: 0;
  }

@@ -73,9 +73,9 @@
 }

 .bd-text-purple-bright {
-  color: $bd-purple-bright;
+  color: $bd-violet;
 }

 .bd-bg-purple-bright {
-  background-color: $bd-purple-bright;
+  background-color: $bd-violet;
 }
@@ -3,7 +3,7 @@
  --bs-gutter-y: $bd-gutter-x;

  padding: .75rem 0;
-  background-color: $bd-purple-bright;
+  background-color: $bd-violet;

  .navbar-toggler {
    padding: 0;
@@ -34,7 +34,7 @@
  }

  .offcanvas {
-    background-color: $bd-purple-bright;
+    background-color: $bd-violet;
    border-left: 0;

    @include media-breakpoint-down(md) {
@@ -40,7 +40,7 @@
    &:focus {
      color: rgba($black, .85);
      text-decoration: if($link-hover-decoration == underline, none, null);
-      background-color: rgba($bd-purple-bright, .1);
+      background-color: rgba($bd-violet, .1);
    }
  }

@@ -55,11 +55,11 @@
    &:hover,
    &:focus {
      color: rgba($black, .85);
-      background-color: rgba($bd-purple-bright, .1);
+      background-color: rgba($bd-violet, .1);
    }

    &:focus {
-      box-shadow: 0 0 0 1px rgba($bd-purple-bright, .7);
+      box-shadow: 0 0 0 1px rgba($bd-violet, .7);
    }

    // Add chevron if there's a submenu
@@ -55,8 +55,8 @@
    padding-right: 3.75rem;

    &:focus {
-      border-color: $bd-purple-bright;
-      box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+      border-color: $bd-violet;
+      box-shadow: 0 0 0 3px rgba($bd-violet, .25);
    }
  }
 }
@@ -66,11 +66,11 @@

  &:hover,
  &:focus {
-    color: $bd-purple-bright;
+    color: $bd-violet;
  }

  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+    box-shadow: 0 0 0 3px rgba($bd-violet, .25);
  }

  .bi-collapse { display: none; }
@@ -2,14 +2,21 @@

 // Local docs variables
 $bd-purple:        #563d7c;
-$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
+$bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
 $bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
-$bd-dark:          #2a2730;
-$bd-download:      #ffe484;
-$bd-info:          #5bc0de;
-$bd-warning:       #f0ad4e;
-$bd-danger:        #d9534f;
+$bd-accent:       #ffe484;
+$bd-info:         #5bc0de;
+$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>");

 $bd-gutter-x: 1.25rem;
+
+:root {
+  --bd-purple: #{$bd-purple};
+  --bd-violet: #{$bd-violet};
+  --bd-accent: #{$bd-accent};
+  --bd-violet-rgb: #{to-rgb($bd-violet)};
+  --bd-accent-rgb: #{to-rgb($bd-accent)};
+}
@@ -86,8 +86,16 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
 {{< /badge.inline >}}
 {{< /example >}}

-## Sass
+## CSS

 ### Variables

+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+
+As part of Bootstrap's evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="badge-css-vars" file="scss/_badge.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="badge-variables" file="scss/_variables.scss" >}}
@@ -54,8 +54,15 @@ $breadcrumb-divider: quote(">");

 It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable.

+
+{{< callout info >}}
+### Using embedded SVG
+
+Inlining SVG as data URI requires to URL escape a few characters, most notably `<`, `>` and `#`. That's why the `$breadcrumb-divider` variable is passed through our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When using the CSS custom property, you need to URL escape your SVG on your own. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for detailed information on what to escape.
+{{< /callout >}}
+
 {{< example >}}
-<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
+<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
@@ -64,7 +71,7 @@ It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom
 {{< /example >}}

 ```scss
-$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");
+$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");
 ```

 You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.
@@ -72,13 +72,24 @@ Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes
 <button type="button" class="btn btn-secondary btn-sm">Small button</button>
 {{< /example >}}

+You can even roll your own custom sizing with CSS variables:
+
+{{< example >}}
+<button type="button" class="btn btn-primary"
+        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
+  Custom button
+</button>
+{{< /example >}}
+
 ## Disabled state

 Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.

 {{< example >}}
-<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
-<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
+<button type="button" class="btn btn-primary" disabled>Primary button</button>
+<button type="button" class="btn btn-secondary" disabled>Button</button>
+<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
+<button type="button" class="btn btn-outline-secondary" disabled>Button</button>
 {{< /example >}}

 Disabled buttons using the `<a>` element behave a bit different:
@@ -89,8 +100,8 @@ Disabled buttons using the `<a>` element behave a bit different:
 - Disabled buttons using `<a>` *should not* include the `href` attribute.

 {{< example >}}
-<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
-<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
+<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
+<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>
 {{< /example >}}

 ### Link functionality caveat
@@ -98,8 +109,8 @@ Disabled buttons using the `<a>` element behave a bit different:
 To cover cases where you have to keep the `href` attribute on a disabled link, the `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s. Note that this CSS property is not yet standardized for HTML, but all modern browsers support it. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.

 {{< example >}}
-<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
-<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
+<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
+<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
 {{< /example >}}

 ## Block buttons
@@ -227,13 +238,31 @@ buttons.forEach(function (button) {
 })
 ```

-## Sass
+## CSS

 ### Variables

+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+
+As part of Bootstrap's evolving CSS variables approach, buttons now use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="btn-css-vars" file="scss/_buttons.scss" >}}
+
+Each `.btn-*` modifier class updates the appropriate CSS variables to minimize additional CSS rules with our `button-variant()`, `button-outline-variant()`, and `button-size()` mixins.
+
+Here's an example of building a custom `.btn-*` modifier class like we do for the buttons unique to our docs by reassigning Bootstrap's CSS variables with a mixture of our own CSS and Sass variables.
+
+<div class="bd-example">
+  <button type="button" class="btn btn-bd-primary">Custom button</button>
+</div>
+
+{{< scss-docs name="btn-css-vars-example" file="site/assets/scss/_buttons.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="btn-variables" file="scss/_variables.scss" >}}

-### Mixins
+### Sass mixins

 There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin.

@@ -243,7 +272,7 @@ There are three mixins for buttons: button and button outline variant mixins (bo

 {{< scss-docs name="btn-size-mixin" file="scss/mixins/_buttons.scss" >}}

-### Loops
+### Sass 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`.

@@ -393,6 +393,30 @@ And putting it to use in a navbar:
 </nav>
 {{< /example >}}

+## Nesting
+
+{{< example >}}
+<div class="dropdown">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownNestedBtn" data-bs-toggle="dropdown" aria-expanded="false">
+    Nested dropdown
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="dropdownNestedBtn">
+    <li><a class="dropdown-item" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Another action</a></li>
+    <li><a class="dropdown-item" href="#">Something else here</a></li>
+    <li><hr class="dropdown-divider"></li>
+    <li class="dropdown">
+      <a class="dropdown-item" href="#" aria-labelledby="dropdownNested1">Nested dropdown</a>
+      <ul class="dropdown-menu" aria-labelledby="dropdownNested1">
+        <li><a class="dropdown-item" href="#">Nested item</a></li>
+        <li><a class="dropdown-item" href="#">Nested item 2</a></li>
+        <li><a class="dropdown-item" href="#">Nested item 3</a></li>
+      </ul>
+    </li>
+  </ul>
+</div>
+{{< /example >}}
+
 ## Directions

 {{< callout info >}}
@@ -953,10 +977,22 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
 </div>
 {{< /example >}}

-## Sass
+## CSS

 ### Variables

+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+
+As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="dropdown-css-vars" file="scss/_dropdown.scss" >}}
+
+Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
+
+{{< scss-docs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" >}}
+
+### Sass variables
+
 Variables for all dropdowns:

 {{< scss-docs name="dropdown-variables" file="scss/_variables.scss" >}}
@@ -1065,10 +1101,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
        <p>Configure the auto close behavior of the dropdown:</p>
        <ul>
          <li><code>true</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.</li>
-          <li><code>false</code> - the dropdown will be closed by clicking the toggle button and manually calling <code>hide</code> or <code>toggle</code> method. (Also will not be closed by pressing <kbd>esc</kbd> key)</li>
+          <li><code>false</code> - the dropdown will be closed by clicking the toggle button and manually calling <code>hide</code> or <code>toggle</code> method.</li>
          <li><code>'inside'</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.</li>
          <li><code>'outside'</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</li>
        </ul>
+        <p>The dropdown can always be closed with the <kbd>ESC</kbd> key.</p>
      </td>
    </tr>
    <tr>
@@ -134,7 +134,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and

 ### Static backdrop

-When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
+When backdrop is set to static, the modal will not close when clicking outside of it. Click the button below to try it.

 <div class="modal fade" id="staticBackdropLive" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
  <div class="modal-dialog">
@@ -144,7 +144,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
-        <p>I will not close if you click outside me. Don't even try to press escape key.</p>
+        <p>I will not close if you click outside of me. Don't even try to press escape key.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -873,7 +873,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
      <td><code>backdrop</code></td>
      <td>boolean or the string <code>'static'</code></td>
      <td><code>true</code></td>
-      <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
+      <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal when clicked.</td>
    </tr>
    <tr>
      <td><code>keyboard</code></td>
@@ -1001,7 +1001,7 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
    </tr>
    <tr>
      <td><code>hidePrevented.bs.modal</code></td>
-      <td>This event is fired when the modal is shown, its backdrop is <code>static</code> and a click outside the modal or an escape key press is performed with the keyboard option or <code>data-bs-keyboard</code> set to <code>false</code>.</td>
+      <td>This event is fired when the modal is shown, its backdrop is <code>static</code> and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the <code>keyboard</code> option is set to <code>false</code>.</td>
    </tr>
  </tbody>
 </table>
@@ -16,6 +16,7 @@ Here's what you need to know before getting started with the navbar:
 - Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
 - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
 - Indicate the current item by using `aria-current="page"` for the current page or `aria-current="true"` for the current item in a set.
+- **New in v5.2.0:** Navbars can be themed with CSS variables that are scoped to the `.navbar` base class. `.navbar-light` has been deprecated and `.navbar-dark` has been rewritten to override CSS variables instead of adding additional styles.

 {{< callout info >}}
 {{< partial "callout-info-prefersreducedmotion.md" >}}
@@ -36,7 +37,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
 Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.

 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -86,14 +87,14 @@ Add your text within an element with the `.navbar-brand` class.

 {{< example >}}
 <!-- As a link -->
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
 </nav>

 <!-- As a heading -->
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
@@ -105,7 +106,7 @@ Add your text within an element with the `.navbar-brand` class.
 You can replace the text within the `.navbar-brand` with an `<img>`.

 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
@@ -119,7 +120,7 @@ You can replace the text within the `.navbar-brand` with an `<img>`.
 You can also make use of some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the `<img>`.

 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
@@ -138,7 +139,7 @@ Add the `.active` class on `.nav-link` to indicate the current page.
 Please note that you should also add the `aria-current` attribute on the active `.nav-link`.

 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -167,7 +168,7 @@ Please note that you should also add the `aria-current` attribute on the active
 And because we use classes for our navs, you can avoid the list-based approach entirely if you like.

 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
@@ -188,7 +189,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
 You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.

 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
@@ -226,7 +227,7 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
 Place various form controls and components within a navbar:

 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
@@ -239,7 +240,7 @@ Place various form controls and components within a navbar:
 Immediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.

 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
@@ -253,7 +254,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
 Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<form>` element as the container and save some HTML.

 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
@@ -266,7 +267,7 @@ Input groups work, too. If your navbar is an entire form, or mostly a form, you
 Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.

 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
@@ -279,7 +280,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a
 Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.

 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
@@ -291,7 +292,7 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
 Mix and match with other components and utilities as needed.

 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
@@ -319,7 +320,11 @@ Mix and match with other components and utilities as needed.

 ## Color schemes

-Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Choose from `.navbar-light` for use with light background colors, or `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities.
+{{< callout warning >}}
+**New in v5.2.0:** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`.
+{{< /callout >}}
+
+Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities.

 <div class="bd-example">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
@@ -380,7 +385,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
    </div>
  </nav>

-  <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
+  <nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
@@ -419,7 +424,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
  <!-- Navbar content -->
 </nav>

-<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
+<nav class="navbar" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
 </nav>
 ```
@@ -430,7 +435,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it

 {{< example >}}
 <div class="container">
-  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
@@ -441,7 +446,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
 Use any of the responsive containers to change how wide the content in your navbar is presented.

 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
@@ -455,7 +460,7 @@ Use our [position utilities]({{< docsref "/utilities/position" >}}) to place nav
 Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.

 {{< example >}}
-<nav class="navbar navbar-light bg-light">
+<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
@@ -463,7 +468,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
 {{< /example >}}

 {{< example >}}
-<nav class="navbar fixed-top navbar-light bg-light">
+<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
@@ -471,7 +476,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
 {{< /example >}}

 {{< example >}}
-<nav class="navbar fixed-bottom navbar-light bg-light">
+<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
@@ -479,7 +484,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
 {{< /example >}}

 {{< example >}}
-<nav class="navbar sticky-top navbar-light bg-light">
+<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
@@ -487,7 +492,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
 {{< /example >}}

 {{< example >}}
-<nav class="navbar sticky-bottom navbar-light bg-light">
+<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
@@ -503,7 +508,7 @@ Please note that this behavior comes with a potential drawback of `overflow`—w
 Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing.

 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
@@ -554,7 +559,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el
 With no `.navbar-brand` shown at the smallest breakpoint:

 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
@@ -584,7 +589,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
 With a brand name shown on the left and toggler on the right:

 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@@ -614,7 +619,7 @@ With a brand name shown on the left and toggler on the right:
 With a toggler on the left and brand name on the right:

 {{< example >}}
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
@@ -670,7 +675,7 @@ Transform your expanding and collapsing navbar into an offcanvas drawer with the
 In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely.

 {{< example >}}
-<nav class="navbar navbar-light bg-light fixed-top">
+<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
@@ -716,7 +721,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
 To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`.

 ```html
-<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
+<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
@@ -727,15 +732,23 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br
 </nav>
 ```

-## Sass
+## CSS

 ### Variables

+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+
+As part of Bootstrap's evolving CSS variables approach, navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="navbar-css-vars" file="scss/_navbar.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}

 {{< scss-docs name="navbar-theme-variables" file="scss/_variables.scss" >}}

-### Loop
+### Sass 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`.

@@ -156,12 +156,20 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
 </nav>
 {{< /example >}}

-## Sass
+## CSS

 ### Variables

+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+
+As part of Bootstrap's evolving CSS variables approach, pagination now uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="pagination-css-vars" file="scss/_pagination.scss" >}}
+
+### Sass variables
+
 {{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}}

-### Mixins
+### Sass mixins

 {{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}}
@@ -27,7 +27,7 @@ If you're making a scrollable container (other than the `<body>`), be sure to ha
 Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.

 <div class="bd-example">
-  <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
+  <nav id="navbar-example2" class="navbar bg-light px-3">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="nav nav-pills">
      <li class="nav-item">
@@ -62,7 +62,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
 </div>

 ```html
-<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
+<nav id="navbar-example2" class="navbar bg-light px-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
@@ -103,7 +103,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
 <div class="bd-example">
  <div class="row">
    <div class="col-4">
-      <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
+      <nav id="navbar-example3" class="navbar bg-light flex-column align-items-stretch p-3">
        <a class="navbar-brand" href="#">Navbar</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link" href="#item-1">Item 1</a>
@@ -142,7 +142,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
 </div>

 ```html
-<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
+<nav id="navbar-example3" class="navbar bg-light flex-column align-items-stretch p-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
@@ -22,7 +22,7 @@ Here are our guidelines and reasons for choosing what to override in Reboot:

 <small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.1</small>

-With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css` to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more [CSS variables]({{< docsref "/customize/css-variables" >}}) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**
+With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more [CSS variables]({{< docsref "/customize/css-variables" >}}) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**

 For example, consider these `:root` CSS variables for common `<body>` styles:

@@ -129,6 +129,21 @@ All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-
  </tbody>
 </table>

+## Horizontal rules
+
+The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities.
+
+{{< example >}}
+<hr>
+
+<div class="text-success">
+  <hr>
+</div>
+
+<hr class="text-danger border-2 opacity-50">
+<hr class="border-primary border-3 opacity-75">
+{{< /example >}}
+
 ## Lists

 All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `<ul>` and `<ol>` elements.
@@ -80,12 +80,22 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`

 {{< table class="table table-striped" >}}

+### Striped columns
+
+Use `.table-striped-columns` to add zebra-striping to any table column.
+
+{{< table class="table table-striped-columns" >}}
+
 These classes can also be added to table variants:

 {{< table class="table table-dark table-striped" >}}

+{{< table class="table table-dark table-striped-columns" >}}
+
 {{< table class="table table-success table-striped" >}}

+{{< table class="table table-success table-striped-columns" >}}
+
 ### Hoverable rows

 Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
@@ -94,7 +104,7 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.

 {{< table class="table table-dark table-hover" >}}

-These hoverable rows can also be combined with the striped variant:
+These hoverable rows can also be combined with the striped rows variant:

 {{< table class="table table-striped table-hover" >}}

@@ -210,11 +220,11 @@ Highlight a table row or cell by adding a `.table-active` class.

 ## How do the variants and accented tables work?

-For the accented tables ([striped rows](#striped-rows), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
+For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):

 - We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds.
 - Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);` to layer on top of any specified `background-color`. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is unset by default, we don't have a default box shadow.
- When either `.table-striped`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background.
+- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background.
 - For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
 - Text and border colors are generated the same way, and their colors are inherited by default.

@@ -30,11 +30,17 @@ Here are the variables we include (note that the `:root` is required) that can b

 ## Component variables

-We're also beginning to make use of custom properties as local variables for various components. This way we can reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.
+Bootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation.

-Have a look at our table documentation for some [insight into how we're using CSS variables]({{< docsref "/content/tables#how-do-the-variants-and-accented-tables-work" >}}).
+Have a look at our table documentation for some [insight into how we're using CSS variables]({{< docsref "/content/tables#how-do-the-variants-and-accented-tables-work" >}}). Our [navbars also use CSS variables]({{< docsref "/components/navbar#css" >}}) as of v5.2.0. We're also using CSS variables across our grids—primarily for gutters the [new opt-in CSS grid]({{< docsref "/layout/css-grid" >}})—with more component usage coming in the future.

-We're also using CSS variables across our grids—primarily for gutters—with more component usage coming in the future.
+Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.
+
+## Prefix
+
+Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable.
+
+Customize the prefix via the `$variable-prefix` Sass variable. By default, it's set to `bs-` (note the trailing dash).

 ## Examples

@@ -9,7 +9,7 @@ include_js: false
 ---

 <div class="container">
-  <header class="blog-header py-3">
+  <header class="blog-header lh-1 py-3">
    <div class="row flex-nowrap justify-content-between align-items-center">
      <div class="col-4 pt-1">
        <a class="link-secondary" href="#">الإشتراك في النشرة البريدية</a>
@@ -91,7 +91,7 @@ include_js: false
      </h3>

      <article class="blog-post">
-        <h2 class="blog-post-title">مثال على تدوينة</h2>
+        <h2 class="blog-post-title mb-1">مثال على تدوينة</h2>
        <p class="blog-post-meta">1 يناير 2021 بواسطة <a href="#"> Mark </a></p>

        <p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p>
@@ -126,7 +126,7 @@ include_js: false
      </article>

      <article class="blog-post">
-        <h2 class="blog-post-title">تدوينة أخرى</h2>
+        <h2 class="blog-post-title mb-1">تدوينة أخرى</h2>
        <p class="blog-post-meta">23 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>

        <p>في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.</p>
@@ -138,7 +138,7 @@ include_js: false
      </article>

      <article class="blog-post">
-        <h2 class="blog-post-title">ميزة جديدة</h2>
+        <h2 class="blog-post-title mb-1">ميزة جديدة</h2>
        <p class="blog-post-meta">14 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>

        <p>كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).</p>
@@ -153,8 +153,8 @@ include_js: false
      </article>

      <nav class="blog-pagination" aria-label="Pagination">
-        <a class="btn btn-outline-primary" href="#">تدوينات أقدم</a>
-        <a class="btn btn-outline-secondary disabled">تدوينات أحدث</a>
+        <a class="btn btn-outline-primary rounded-pill" href="#">تدوينات أقدم</a>
+        <a class="btn btn-outline-secondary rounded-pill disabled">تدوينات أحدث</a>
      </nav>

    </div>
@@ -1,7 +1,6 @@
 /* stylelint-disable selector-list-comma-newline-after */

 .blog-header {
-  line-height: 1;
  border-bottom: 1px solid #e5e5e5;
 }

@@ -27,35 +26,6 @@ h1, h2, h3, h4, h5, h6 {
  }
 }

-.nav-scroller {
-  position: relative;
-  z-index: 2;
-  height: 2.75rem;
-  overflow-y: hidden;
-}
-
-.nav-scroller .nav {
-  display: flex;
-  flex-wrap: nowrap;
-  padding-bottom: 1rem;
-  margin-top: -1px;
-  overflow-x: auto;
-  text-align: center;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
-}
-
-.nav-scroller .nav-link {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  font-size: .875rem;
-}
-
-.card-img-right {
-  height: 100%;
-  border-radius: 0 3px 3px 0;
-}
-
 .flex-auto {
  flex: 0 0 auto;
 }
@@ -69,9 +39,6 @@ h1, h2, h3, h4, h5, h6 {
 .blog-pagination {
  margin-bottom: 4rem;
 }
-.blog-pagination > .btn {
-  border-radius: 2rem;
-}

 /*
 * Blog posts
@@ -80,7 +47,6 @@ h1, h2, h3, h4, h5, h6 {
  margin-bottom: 4rem;
 }
 .blog-post-title {
-  margin-bottom: .25rem;
  font-size: 2.5rem;
 }
 .blog-post-meta {
@@ -1,7 +1,6 @@
 /* stylelint-disable selector-list-comma-newline-after */

 .blog-header {
-  line-height: 1;
  border-bottom: 1px solid #e5e5e5;
 }

@@ -27,35 +26,6 @@ h1, h2, h3, h4, h5, h6 {
  }
 }

-.nav-scroller {
-  position: relative;
-  z-index: 2;
-  height: 2.75rem;
-  overflow-y: hidden;
-}
-
-.nav-scroller .nav {
-  display: flex;
-  flex-wrap: nowrap;
-  padding-bottom: 1rem;
-  margin-top: -1px;
-  overflow-x: auto;
-  text-align: center;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
-}
-
-.nav-scroller .nav-link {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  font-size: .875rem;
-}
-
-.card-img-right {
-  height: 100%;
-  border-radius: 3px 0 0 3px;
-}
-
 .flex-auto {
  flex: 0 0 auto;
 }
@@ -69,9 +39,6 @@ h1, h2, h3, h4, h5, h6 {
 .blog-pagination {
  margin-bottom: 4rem;
 }
-.blog-pagination > .btn {
-  border-radius: 2rem;
-}

 /*
 * Blog posts
@@ -80,7 +47,6 @@ h1, h2, h3, h4, h5, h6 {
  margin-bottom: 4rem;
 }
 .blog-post-title {
-  margin-bottom: .25rem;
  font-size: 2.5rem;
 }
 .blog-post-meta {
@@ -8,7 +8,7 @@ include_js: false
 ---

 <div class="container">
-  <header class="blog-header py-3">
+  <header class="blog-header lh-1 py-3">
    <div class="row flex-nowrap justify-content-between align-items-center">
      <div class="col-4 pt-1">
        <a class="link-secondary" href="#">Subscribe</a>
@@ -90,7 +90,7 @@ include_js: false
      </h3>

      <article class="blog-post">
-        <h2 class="blog-post-title">Sample blog post</h2>
+        <h2 class="blog-post-title mb-1">Sample blog post</h2>
        <p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>

        <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
@@ -144,7 +144,7 @@ include_js: false
      </article>

      <article class="blog-post">
-        <h2 class="blog-post-title">Another blog post</h2>
+        <h2 class="blog-post-title mb-1">Another blog post</h2>
        <p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>

        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
@@ -192,7 +192,7 @@ include_js: false
      </article>

      <article class="blog-post">
-        <h2 class="blog-post-title">New feature</h2>
+        <h2 class="blog-post-title mb-1">New feature</h2>
        <p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>

        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
@@ -205,8 +205,8 @@ include_js: false
      </article>

      <nav class="blog-pagination" aria-label="Pagination">
-        <a class="btn btn-outline-primary" href="#">Older</a>
-        <a class="btn btn-outline-secondary disabled">Newer</a>
+        <a class="btn btn-outline-primary rounded-pill" href="#">Older</a>
+        <a class="btn btn-outline-secondary rounded-pill disabled">Newer</a>
      </nav>

    </div>
@@ -95,19 +95,19 @@ extra_css:
    <div class="row">
      <div class="col-lg-4">
        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
-        <h2>عنوان</h2>
+        <h2 class="fw-normal">عنوان</h2>
        <p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</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>
+        <h2 class="fw-normal">عنوان آخر</h2>
        <p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</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>
+        <h2 class="fw-normal">عنوان ثالث لتأكيد المعلومة</h2>
        <p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p>
        <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
      </div><!-- /.col-lg-4 -->
@@ -120,7 +120,7 @@ extra_css:

    <div class="row featurette">
      <div class="col-md-7">
-        <h2 class="featurette-heading">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2>
        <p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
      </div>
      <div class="col-md-5">
@@ -132,7 +132,7 @@ extra_css:

    <div class="row featurette">
      <div class="col-md-7 order-md-2">
-        <h2 class="featurette-heading">أوه نعم، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">أوه نعم، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
        <p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
      </div>
      <div class="col-md-5 order-md-1">
@@ -144,7 +144,7 @@ extra_css:

    <div class="row featurette">
      <div class="col-md-7">
-        <h2 class="featurette-heading">وأخيرًا، هذا. <span class="text-muted"> كش ملك. </span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">وأخيرًا، هذا. <span class="text-muted"> كش ملك. </span></h2>
        <p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
      </div>
      <div class="col-md-5">
@@ -26,13 +26,6 @@ body {
 .carousel-item {
  height: 32rem;
 }
-.carousel-item > img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  min-width: 100%;
-  height: 32rem;
-}


 /* MARKETING CONTENT
@@ -43,9 +36,6 @@ body {
  margin-bottom: 1.5rem;
  text-align: center;
 }
-.marketing h2 {
-  font-weight: 400;
-}
 /* rtl:begin:ignore */
 .marketing .col-lg-4 p {
  margin-right: .75rem;
@@ -63,8 +53,6 @@ body {

 /* Thin out the marketing headings */
 .featurette-heading {
-  font-weight: 300;
-  line-height: 1;
  /* rtl:remove */
  letter-spacing: -.05rem;
 }
@@ -26,13 +26,6 @@ body {
 .carousel-item {
  height: 32rem;
 }
-.carousel-item > img {
-  position: absolute;
-  top: 0;
-  right: 0;
-  min-width: 100%;
-  height: 32rem;
-}


 /* MARKETING CONTENT
@@ -43,9 +36,6 @@ body {
  margin-bottom: 1.5rem;
  text-align: center;
 }
-.marketing h2 {
-  font-weight: 400;
-}
 .marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
@@ -59,12 +49,6 @@ body {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
 }

-/* Thin out the marketing headings */
-.featurette-heading {
-  font-weight: 300;
-  line-height: 1;
-}
-

 /* RESPONSIVE CSS
 -------------------------------------------------- */
@@ -94,19 +94,19 @@ extra_css:
    <div class="row">
      <div class="col-lg-4">
        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
-        <h2>Heading</h2>
+        <h2 class="fw-normal">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="#">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>
+        <h2 class="fw-normal">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="#">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>
+        <h2 class="fw-normal">Heading</h2>
        <p>And lastly this, the third column of representative placeholder content.</p>
        <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
      </div><!-- /.col-lg-4 -->
@@ -119,7 +119,7 @@ extra_css:

    <div class="row featurette">
      <div class="col-md-7">
-        <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
        <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
      </div>
      <div class="col-md-5">
@@ -131,7 +131,7 @@ extra_css:

    <div class="row featurette">
      <div class="col-md-7 order-md-2">
-        <h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
        <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
      </div>
      <div class="col-md-5 order-md-1">
@@ -143,7 +143,7 @@ extra_css:

    <div class="row featurette">
      <div class="col-md-7">
-        <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
        <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
      </div>
      <div class="col-md-5">
@@ -23,48 +23,48 @@ direction: rtl
  <nav class="small" id="toc">
    <ul class="list-unstyled">
      <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button>
+        <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button>
        <ul class="list-unstyled ps-3 collapse" id="contents-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#typography">النصوص</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#images">الصور</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#tables">الجداول</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#figures">النماذج البيانية</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">النصوص</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">الصور</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tables">الجداول</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#figures">النماذج البيانية</a></li>
        </ul>
      </li>
      <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button>
+        <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button>
        <ul class="list-unstyled ps-3 collapse" id="forms-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#overview">نظرة عامة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">الحقول المعطلة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#sizing">الأحجام</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#input-group">مجموعة الإدخال</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">الحقول ذوي العناوين العائمة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#validation">التحقق</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#overview">نظرة عامة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#disabled-forms">الحقول المعطلة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#sizing">الأحجام</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#input-group">مجموعة الإدخال</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#floating-labels">الحقول ذوي العناوين العائمة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#validation">التحقق</a></li>
        </ul>
      </li>
      <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button>
+        <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button>
        <ul class="list-unstyled ps-3 collapse" id="components-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#accordion">المطوية</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#alerts">الإنذارات</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#badge">الشارة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">مسار التنقل التفصيلي</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#buttons">الأزرار</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#button-group">مجموعة الأزرار</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#card">البطاقة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#carousel">شرائح العرض</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">القوائم المنسدلة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#list-group">مجموعة العناصر</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#modal">الصندوق العائم</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#navs">التنقل</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#navbar">شريط التنقل</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#pagination">ترقيم الصفحات</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#popovers">الصناديق المنبثقة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#progress">شريط التقدم</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">المخطوطة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#spinners">الدوائر المتحركة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#toasts">الإشعارات</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#tooltips">التلميحات</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">المطوية</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">الإنذارات</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#badge">الشارة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#breadcrumb">مسار التنقل التفصيلي</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#buttons">الأزرار</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#button-group">مجموعة الأزرار</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#card">البطاقة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#carousel">شرائح العرض</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#dropdowns">القوائم المنسدلة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#list-group">مجموعة العناصر</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#modal">الصندوق العائم</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navs">التنقل</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navbar">شريط التنقل</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#pagination">ترقيم الصفحات</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#popovers">الصناديق المنبثقة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#progress">شريط التقدم</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#scrollspy">المخطوطة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#spinners">الدوائر المتحركة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#toasts">الإشعارات</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tooltips">التلميحات</a></li>
        </ul>
      </li>
    </ul>
@@ -116,6 +116,10 @@ direction: rtl
        <p><em>هذا السطر يحوي نص مائل.</em></p>
        {{< /example >}}

+        {{< example show_markup="false" >}}
+        <hr>
+        {{< /example >}}
+
        {{< example show_markup="false" >}}
        <blockquote class="blockquote">
          <p>إقتباس مبهر، موضوع في عنصر blockquote</p>
@@ -1208,7 +1212,7 @@ direction: rtl

      <div>
        {{< example show_markup="false" >}}
-        <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <nav class="navbar navbar-expand-lg bg-light">
          <div class="container-fluid">
            <a class="navbar-brand" href="#">
              <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
@@ -1417,7 +1421,7 @@ direction: rtl

      <div>
        <div class="bd-example">
-          <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
+          <nav id="navbar-example2" class="navbar bg-light px-3">
            <a class="navbar-brand" href="#">شريط التنقل</a>
            <ul class="nav nav-pills">
              <li class="nav-item">
@@ -1437,7 +1441,7 @@ direction: rtl
              </li>
            </ul>
          </nav>
-          <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example">
+          <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto">
            <h4 id="fat"><bdi lang="en" dir="ltr">@fat</bdi></h4>
            <p>محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.</p>
            <h4 id="mdo"><bdi lang="en" dir="ltr">@mdo</bdi></h4>
@@ -27,7 +27,6 @@ body {
  margin-top: .125rem;
  margin-left: .3125rem;
  color: rgba(0, 0, 0, .65);
-  text-decoration: none;
 }

 .bd-aside a:hover,
@@ -45,7 +44,6 @@ body {
  padding: .25rem .5rem;
  font-weight: 600;
  color: rgba(0, 0, 0, .65);
-  border: 0;
 }

 .bd-aside .btn:hover,
@@ -77,10 +75,7 @@ body {

 /* Examples */
 .scrollspy-example {
-  position: relative;
  height: 200px;
-  margin-top: .5rem;
-  overflow: auto;
 }

 [id="modal"] .bd-example .btn,
@@ -27,7 +27,6 @@ body {
  margin-top: .125rem;
  margin-right: .3125rem;
  color: rgba(0, 0, 0, .65);
-  text-decoration: none;
 }

 .bd-aside a:hover,
@@ -45,7 +44,6 @@ body {
  padding: .25rem .5rem;
  font-weight: 600;
  color: rgba(0, 0, 0, .65);
-  border: 0;
 }

 .bd-aside .btn:hover,
@@ -74,10 +72,7 @@ body {

 /* Examples */
 .scrollspy-example {
-  position: relative;
  height: 200px;
-  margin-top: .5rem;
-  overflow: auto;
 }

 [id="modal"] .bd-example .btn,
@@ -22,48 +22,48 @@ body_class: "bg-light"
  <nav class="small" id="toc">
    <ul class="list-unstyled">
      <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button>
+        <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button>
        <ul class="list-unstyled ps-3 collapse" id="contents-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#typography">Typography</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#images">Images</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#tables">Tables</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#figures">Figures</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">Typography</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">Images</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tables">Tables</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#figures">Figures</a></li>
        </ul>
      </li>
      <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button>
+        <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button>
        <ul class="list-unstyled ps-3 collapse" id="forms-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#overview">Overview</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">Disabled forms</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#sizing">Sizing</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#input-group">Input group</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">Floating labels</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#validation">Validation</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#overview">Overview</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#disabled-forms">Disabled forms</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#sizing">Sizing</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#input-group">Input group</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#floating-labels">Floating labels</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#validation">Validation</a></li>
        </ul>
      </li>
      <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button>
+        <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button>
        <ul class="list-unstyled ps-3 collapse" id="components-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#accordion">Accordion</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#alerts">Alerts</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#badge">Badge</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">Breadcrumb</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#buttons">Buttons</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#button-group">Button group</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#card">Card</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#carousel">Carousel</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">Dropdowns</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#list-group">List group</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#modal">Modal</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#navs">Navs</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#navbar">Navbar</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#pagination">Pagination</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#popovers">Popovers</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#progress">Progress</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">Scrollspy</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#spinners">Spinners</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#toasts">Toasts</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#tooltips">Tooltips</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">Accordion</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">Alerts</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#badge">Badge</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#breadcrumb">Breadcrumb</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#buttons">Buttons</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#button-group">Button group</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#card">Card</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#carousel">Carousel</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#dropdowns">Dropdowns</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#list-group">List group</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#modal">Modal</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navs">Navs</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navbar">Navbar</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#pagination">Pagination</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#popovers">Popovers</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#progress">Progress</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#scrollspy">Scrollspy</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#spinners">Spinners</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#toasts">Toasts</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tooltips">Tooltips</a></li>
        </ul>
      </li>
    </ul>
@@ -115,6 +115,10 @@ body_class: "bg-light"
        <p><em>This line rendered as italicized text.</em></p>
        {{< /example >}}

+        {{< example show_markup="false" >}}
+        <hr>
+        {{< /example >}}
+
        {{< example show_markup="false" >}}
        <blockquote class="blockquote">
          <p>A well-known quote, contained in a blockquote element.</p>
@@ -1207,7 +1211,7 @@ body_class: "bg-light"

      <div>
        {{< example show_markup="false" >}}
-        <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <nav class="navbar navbar-expand-lg bg-light">
          <div class="container-fluid">
            <a class="navbar-brand" href="#">
              <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
@@ -1414,7 +1418,7 @@ body_class: "bg-light"

      <div>
        <div class="bd-example">
-          <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
+          <nav id="navbar-example2" class="navbar bg-light px-3">
            <a class="navbar-brand" href="#">Navbar</a>
            <ul class="nav nav-pills">
              <li class="nav-item">
@@ -1434,7 +1438,7 @@ body_class: "bg-light"
              </li>
            </ul>
          </nav>
-        <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
+        <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto" tabindex="0">
            <h4 id="scrollspyHeading1">First heading</h4>
            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
            <h4 id="scrollspyHeading2">Second heading</h4>
@@ -31,10 +31,7 @@ body {
 */

 .nav-masthead .nav-link {
-  padding: .25rem 0;
-  font-weight: 700;
  color: rgba(255, 255, 255, .5);
-  background-color: transparent;
  border-bottom: .25rem solid transparent;
 }

@@ -13,9 +13,9 @@ include_js: false
    <div>
      <h3 class="float-md-start mb-0">Cover</h3>
      <nav class="nav nav-masthead justify-content-center float-md-end">
-        <a class="nav-link active" aria-current="page" href="#">Home</a>
-        <a class="nav-link" href="#">Features</a>
-        <a class="nav-link" href="#">Contact</a>
+        <a class="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a>
+        <a class="nav-link fw-bold py-1 px-0" href="#">Features</a>
+        <a class="nav-link fw-bold py-1 px-0" href="#">Contact</a>
      </nav>
    </div>
  </header>
@@ -13,11 +13,11 @@ extra_js:
 ---

 <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
-  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">اسم الشركة</a>
+  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">اسم الشركة</a>
  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="عرض/إخفاء لوحة التنقل">
    <span class="navbar-toggler-icon"></span>
  </button>
-  <input class="form-control form-control-dark w-100" type="text" placeholder="بحث" aria-label="بحث">
+  <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="بحث" aria-label="بحث">
  <div class="navbar-nav">
    <div class="nav-item text-nowrap">
      <a class="nav-link px-3" href="#">تسجيل الخروج</a>
@@ -32,70 +32,70 @@ extra_js:
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">
-              <span data-feather="home"></span>
+              <span data-feather="home" class="align-text-bottom"></span>
              لوحة القيادة
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="file"></span>
+              <span data-feather="file" class="align-text-bottom"></span>
              الطلبات
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="shopping-cart"></span>
+              <span data-feather="shopping-cart" class="align-text-bottom"></span>
              المنتجات
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="users"></span>
+              <span data-feather="users" class="align-text-bottom"></span>
              الزبائن
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="bar-chart-2"></span>
+              <span data-feather="bar-chart-2" class="align-text-bottom"></span>
              التقارير
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="layers"></span>
+              <span data-feather="layers" class="align-text-bottom"></span>
              التكاملات
            </a>
          </li>
        </ul>

-        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
+        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
          <span>التقارير المحفوظة</span>
          <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
-            <span data-feather="plus-circle"></span>
+            <span data-feather="plus-circle" class="align-text-bottom"></span>
          </a>
        </h6>
        <ul class="nav flex-column mb-2">
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
+              <span data-feather="file-text" class="align-text-bottom"></span>
              الشهر الحالي
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
+              <span data-feather="file-text" class="align-text-bottom"></span>
              الربع الأخير
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
+              <span data-feather="file-text" class="align-text-bottom"></span>
              التفاعل الإجتماعي
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
+              <span data-feather="file-text" class="align-text-bottom"></span>
              مبيعات نهاية العام
            </a>
          </li>
@@ -112,7 +112,7 @@ extra_js:
            <button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
          </div>
          <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
-            <span data-feather="calendar"></span>
+            <span data-feather="calendar" class="align-text-bottom"></span>
            هذا الأسبوع
          </button>
        </div>
@@ -5,7 +5,6 @@ body {
 .feather {
  width: 16px;
  height: 16px;
-  vertical-align: text-bottom;
 }

 /*
@@ -62,7 +61,6 @@ body {

 .sidebar-heading {
  font-size: .75rem;
-  text-transform: uppercase;
 }

 /*
@@ -72,7 +70,6 @@ body {
 .navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
-  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
 }
@@ -84,8 +81,6 @@ body {

 .navbar .form-control {
  padding: .75rem 1rem;
-  border-width: 0;
-  border-radius: 0;
 }

 .form-control-dark {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Mark Otto	e12dddc50e	Add rudimentary nested dropdowns	2022-02-23 14:04:38 -08:00
Mark Otto	88437bd464	Split up padding CSS vars for dropdowns	2022-02-23 14:01:58 -08:00
Julien Déramond	333d89e498	Docs: replace CSS by utilities in examples (#35699 ) * Drop .opacity-50 and .opacity-75 redefinition in examples * Drop unused .card-img-right from blog example CSS files * Use line-height utilities when possible * Use rounded-* utilities in examples * Replace .nav-underline by .nav-scroller and use it in examples.html default * Use .mb-1 for .blog-post-title * Remove unused CSS rule and use .fw-* utilities for carousels examples * Use utilities for cheatsheet examples * Extract some CSS to utilities for .nav-masthead .nav-link in cover example * Dashboard group of minor modifications * Dropdowns example: refactoring * Dropdowns example refactoring: fix linting by removing selector by id * Features example refactoring * Headers example refactoring * List groups example refactoring * Sidebars example refactoring * Sign-in example refactoring * Starter template refactoring * Fix RTL examples Co-authored-by: Mark Otto <markd.otto@gmail.com>	2022-02-23 10:31:18 -08:00
Julien Déramond	36765912c6	Replace non-existent `--bs-btn-padding` by `--bs-btn-padding-{x\|y}`	2022-02-23 10:24:50 -08:00
chefarbeiter	a381ee320b	Fix modal doc	2022-02-22 15:12:20 +02:00
Gaël Poupard	37f3977e6d	Rely on `border-width` for `<hr>` size (#35491 ) * fix(reboot): revert hr styles to v4 implementation * docs(cheatsheet): add a hr example * fix(reboot): currentColor is the initial border-color value * Document hr element in Reboot docs * Update migration guide * Update scss/_variables.scss Co-authored-by: Mark Otto <markd.otto@gmail.com>	2022-02-22 10:02:47 +02:00
xrkffgg	0804c0043f	CI: add issues-helper (#35846 )	2022-02-22 09:55:29 +02:00
Christian Oliff	9ac8e80660	remove opacity utlitilies from example CSS (#35877 ) These are included in Bootstrap itself now Co-authored-by: XhmikosR <xhmikosr@gmail.com>	2022-02-22 09:39:57 +02:00
XhmikosR	3a9b0b8b6f	Update devDependencies and pin karma-rollup-preprocessor (#35868 ) * @babel/cli ^7.17.0 → ^7.17.6 * @babel/core ^7.17.2 → ^7.17.5 * eslint-plugin-unicorn ^40.1.0 → ^41.0.0 * rollup ^2.67.2 → ^2.68.0 * sass ^1.49.7 → ^1.49.8 * terser ^5.10.0 → ^5.11.0	2022-02-22 09:35:36 +02:00
GeoSot	cb8726d9e7	Dropdown: use a better selector to avoid triggering click if button is disabled (#35866 )	2022-02-19 16:22:32 +02:00
GeoSot	353ad45b4b	Dropdown: use a combined selector to filter foreign not shown instances iteration (#35766 )	2022-02-19 16:16:51 +02:00
GeoSot	4b17868fb4	tests: revisit all tests using Promise.reject instead of throwing an error (#35765 )	2022-02-19 16:08:16 +02:00
XhmikosR	ae12d645ef	Replace AnchorJS with a Hugo render hook (#32953 ) * Replace AnchorJS with a Hugo render hook * docs(anchors): improve aria-label on anchor links * docs(anchors): show anchor link when ed * docs(anchors): add hash in pseudo-element Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>	2022-02-19 15:16:23 +02:00
GeoSot	407af8ac7f	Make event name helper and use it on tooltip & popover to reduce dist sizes (#35856 ) * feat: create eventName getter function in baseComponent * refactor: use `eventName` getter on tooltip & popover	2022-02-19 15:10:47 +02:00
GeoSot	642d756eea	Carousel: remove one more call to ActiveIndex	2022-02-19 14:52:36 +02:00
GeoSot	d52f6c9de1	Carousel: change argument to `_setActiveIndicatorElement`, from element to index	2022-02-19 14:52:36 +02:00
GeoSot	928bdcadc5	Carousel: make direct triggering of slid event, instead of using a callback	2022-02-19 14:52:36 +02:00
GeoSot	d97125475b	Carousel: merge slide functionality, regardless of whether it is animated or not	2022-02-19 14:52:36 +02:00
GeoSot	a247fe9b27	Carousel: simplify initialization on document load, using `getOrCreateInstance`	2022-02-19 14:52:36 +02:00
GeoSot	ccba6a3589	Carousel: remove redundant config merge on `dataApiClickHandler`, as it is done by default in the `constructor`	2022-02-19 14:52:36 +02:00
Jann Westermann	546e34cf85	Apply list group numbering to all items (#35822 )	2022-02-18 01:17:37 +02:00
Mark Otto	f7f450ec59	Add null modal-footer-bg variable (#35858 ) Fixes #35782	2022-02-18 01:14:18 +02:00
Louis-Maxime Piton	d82602063a	New CSS variable for Navbars (#35829 ) * Adding a brand new CSS var * Update scss/_variables.scss Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>	2022-02-17 11:25:01 -08:00
Nudasoft	999bfaa036	Add !important property to colored links. (#35740 ) * Add !important property to colored links. * Apply suggestions from code review Co-authored-by: Mark Otto <otto@github.com>	2022-02-17 11:20:44 -08:00
Alan Christian	5565c64bde	code indentation in readme	2022-02-17 10:23:18 -08:00
Mark Otto	63f75bccd8	Rename dropdown-shadow to dropdown-box-shadow for consistency	2022-02-16 10:36:01 -08:00
Mark Otto	48a7160cf4	Convert pagination component to CSS variables (#35399 ) * Convert pagination component to CSS variables * Use RFS mixin * Remove the useless fallback	2022-02-16 10:26:24 -08:00
Eugene Kopyov	2a09f10676	Fixed border radius var name and .show target	2022-02-16 08:48:54 -08:00
XhmikosR	42da2b9556	Update devDependencies (#35841 ) * Update devDependencies * @babel/core ^7.17.0 → ^7.17.2 * @rollup/plugin-replace ^3.0.1 → ^3.1.0 * eslint ^8.8.0 → ^8.9.0 * eslint-config-xo ^0.39.0 → ^0.40.0 * hugo-bin ^0.80.1 → ^0.80.2 * karma ^6.3.15 → ^6.3.16 * rollup ^2.67.1 → ^2.67.2 * Fix new ESLint errors	2022-02-15 08:50:37 +02:00
Mark Otto	d568e029da	Convert dropdowns to CSS variables	2022-02-14 19:11:35 -08:00
Mark Otto	3e6265ac55	Rewrite custom docs buttons - Use CSS variables wherever possible - Rename purple-bright to violet for brevity, add CSS vars versions - Rename download to accent	2022-02-14 19:00:59 -08:00
Mark Otto	85938bb2ed	Tighten bundlewatch	2022-02-14 19:00:59 -08:00
Mark Otto	ef9d8538a0	Convert .btn and mixins to use CSS variables	2022-02-14 19:00:59 -08:00
Mark Otto	918a86b425	Correct the horizontal padding on grid containers (#35825 ) * Correct the horizontal padding on grid containers * Don't halve the container-padding-x variable	2022-02-14 15:07:17 -08:00
vpakati	a163ed76d4	Update reboot.md Add the missing right parenthesis.	2022-02-14 15:03:05 -08:00
Julien Déramond	daefd34693	Fix typo in Badges CSS variables description	2022-02-14 16:10:42 +02:00
Mark Otto	48807758af	Fixes #32082 Remove sentence in docs that's no longer needed. Fixes #32082.	2022-02-11 10:06:15 -08:00
Mark Otto	a7942190c7	Bump version callout	2022-02-10 19:51:23 -08:00
Mark Otto	f2d33b2a1e	Bump bundlewatch	2022-02-10 19:51:23 -08:00
Mark Otto	7e71fe7bae	Convert .badge to CSS variables	2022-02-10 19:51:23 -08:00
Julien Déramond	d3babf7d7f	Remove remaining `.navbar-light` classes (#35814 ) * Fix typo in CSS variables documentation * Drop remaining .navbar-light classes	2022-02-09 21:12:08 +02:00
Fabián Karaben	d19c635f16	Add Spanish translation The translation of version 5 of Bootstrap is added, by the Esdocu project.	2022-02-08 17:14:29 -08:00
Anton	761c4ff235	Fix overriding styles of `.list-group-item-action` ~~~html <style> .list-group-item-action {color: blue;} .list-group-item {color: red;} </style> <p class="list-group-item">red text!</p> <p class="list-group-item list-group-item-action">still red text!</p> ~~~ because `.list-group-item` declared after `.list-group-item-action` (order in attribute `class` no effect)	2022-02-08 17:11:46 -08:00
Christopher Yeleighton	da9c007139	README: About release planning	2022-02-08 17:03:45 -08:00
Sebastian Podjasek	0853778eba	Support floating labels on `.form-control-plaintext` (#32840 ) * Support floating labels on `.form-control-plaintext` * Update floating-labels.md * Apply suggestions from code review Co-authored-by: XhmikosR <xhmikosr@gmail.com> Co-authored-by: Mark Otto <otto@github.com>	2022-02-08 12:38:29 -08:00
Mark Otto	4308b67e59	Add `.form-check-reverse` modifier class (#33606 ) * Add .form-check-reverse modifier class * Update checks-radios.md Co-authored-by: XhmikosR <xhmikosr@gmail.com>	2022-02-08 12:33:39 -08:00
Mark Otto	71a211f2bd	bundlewatch	2022-02-08 10:39:58 -08:00
Mark Otto	27a0f40dc8	Add deprecation notice for .navbar-light	2022-02-08 10:39:58 -08:00
Mark Otto	c9cec89764	Convert navbar to CSS variables Co-Authored-By: Gaël Poupard <ffoodd@users.noreply.github.com>	2022-02-08 10:39:58 -08:00
XhmikosR	8f11c52919	Update devDependencies (#35798 ) * @babel/cli ^7.16.8 → ^7.17.0 * @babel/core ^7.16.12 → ^7.17.0 * karma ^6.3.13 → ^6.3.15 * karma-rollup-preprocessor ^7.0.7 → ^7.0.8 * postcss ^8.4.5 → ^8.4.6 * rollup ^2.66.1 → ^2.67.1 * sass ^1.49.4 → ^1.49.7	2022-02-08 09:21:59 +02:00
Anton	a805330f63	Optimize jQueryInterface in Collapse (#35689 ) extracts config initialization from cycle	2022-02-07 10:50:26 +02:00
XhmikosR	77e02a07c7	package.json: add GitHub Sponsors and reorder properties (#35451 )	2022-02-07 10:15:17 +02:00
GeoSot	96c67a7ff7	Fix empty content of tooltip after 'copy' action in docs (#35773 ) Co-authored-by: XhmikosR <xhmikosr@gmail.com>	2022-02-07 10:05:43 +02:00
The Fake Cake	ff2472becc	Set `cursor: default` on disabled `.form-check-label` (#35082 ) Fixes #35056	2022-02-07 09:55:44 +02:00
Macinto5h	d2986daa12	Add zebra striping for table columns Co-Authored-By: Macallan Camara <44030647+Macinto5h@users.noreply.github.com> Co-Authored-By: XhmikosR <xhmikosr@gmail.com>	2022-02-06 15:59:18 -08:00
Ty Mick	43a9216a7f	Move `gap` utility API from "Flex" to "Spacing" The `gap` utility is described on the [Spacing page][1] but is not actually mentioned on the [Flex page][2] (apart from the [API section][3]). [1]: https://getbootstrap.com/docs/5.1/utilities/spacing/ [2]: https://getbootstrap.com/docs/5.1/utilities/flex/ [3]: https://getbootstrap.com/docs/5.1/utilities/flex/#utilities-api	2022-02-06 15:45:22 -08:00
Sigurd Moland Wahl	4dc4108460	Fixed typo in docs	2022-02-06 14:31:59 -08:00
Florian Lacreuse	957c1dd6ea	Fix dropdown docs about autoclose and esc key.	2022-02-03 18:20:47 +02:00
Gaël Poupard	a5483a8a96	Breadcrumb docs: drop confusing currentColor and add new callout (#35434 )	2022-02-01 15:37:33 +02:00
XhmikosR	dc09509193	Update find-unused-sass-variables to v4.0.1 (#35761 )	2022-02-01 13:03:48 +02:00
XhmikosR	cf7fec8a2e	event-handler.js: remove unneeded return statement	2022-02-01 12:43:19 +02:00
GeoSot	a1e924c4da	Event-handler: use `Array.find` instead of `for`	2022-02-01 12:43:19 +02:00
GeoSot	fc7c5fcb7a	Event-handler: initialize variable properly	2022-02-01 12:43:19 +02:00
GeoSot	3f7b31e0e0	Fix Popover test that randomly fails on BrowserStack (#35757 ) Co-authored-by: XhmikosR <xhmikosr@gmail.com>	2022-02-01 10:33:18 +02:00