Add rudimentary nested dropdowns

* 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>

.github/workflows/issue-close-require.yml

@@ -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.

.github/workflows/issue-labeled.yml

@@ -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.

README.md

@@ -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/).

config.yml

@@ -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

js/src/base-component.js

@@ -76,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

js/src/carousel.js

@@ -279,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,
@@ -291,7 +290,7 @@ class Carousel extends BaseComponent {
     })
   }
 
-  _setActiveIndicatorElement(element) {
+  _setActiveIndicatorElement(index) {
     if (!this._indicatorsElement) {
       return
     }
@@ -301,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)
@@ -344,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
     }
@@ -360,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,
@@ -372,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)
   }
@@ -482,7 +473,6 @@ class Carousel extends BaseComponent {
     }
 
     const config = {
-      ...Manipulator.getDataAttributes(target),
       ...Manipulator.getDataAttributes(this)
     }
     const slideIndex = this.getAttribute('data-bs-slide-to')
@@ -511,7 +501,7 @@ 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)
   }
 })
 

js/src/dropdown.js

@@ -49,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'
@@ -341,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 (
@@ -410,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)
 

js/src/popover.js

@@ -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()

js/src/tooltip.js

@@ -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) {
@@ -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
     }
@@ -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)

js/tests/unit/alert.spec.js

@@ -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()

js/tests/unit/carousel.spec.js

@@ -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()

js/tests/unit/collapse.spec.js

@@ -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()

js/tests/unit/dom/event-handler.spec.js

@@ -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)

js/tests/unit/dropdown.spec.js

@@ -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()

js/tests/unit/modal.spec.js

@@ -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()

js/tests/unit/offcanvas.spec.js

@@ -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()

js/tests/unit/popover.spec.js

@@ -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')
@@ -174,7 +168,7 @@ describe('Popover', () => {
 
       popover.show()
 
-      expect(EventHandler.trigger).not.toHaveBeenCalledWith(popoverEl, Popover.Event.SHOW)
+      expect(EventHandler.trigger).not.toHaveBeenCalledWith(popoverEl, Popover.eventName('show'))
       expect(document.querySelector('.popover')).toBeNull()
     })
 

js/tests/unit/tab.spec.js

@@ -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()

js/tests/unit/toast.spec.js

@@ -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()

js/tests/unit/tooltip.spec.js

@@ -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')
@@ -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()

package-lock.json

@@ -19,8 +19,8 @@
       ],
       "license": "MIT",
       "devDependencies": {
-        "@babel/cli": "^7.17.0",
-        "@babel/core": "^7.17.2",
+        "@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",
@@ -34,7 +34,7 @@
         "eslint": "^8.9.0",
         "eslint-config-xo": "^0.40.0",
         "eslint-plugin-import": "^2.25.4",
-        "eslint-plugin-unicorn": "^40.1.0",
+        "eslint-plugin-unicorn": "^41.0.0",
         "find-unused-sass-variables": "^4.0.1",
         "globby": "^11.0.4",
         "hammer-simulator": "0.0.1",
@@ -49,20 +49,20 @@
         "karma-firefox-launcher": "^2.1.2",
         "karma-jasmine": "^4.0.1",
         "karma-jasmine-html-reporter": "^1.7.0",
-        "karma-rollup-preprocessor": "^7.0.8",
+        "karma-rollup-preprocessor": "7.0.7",
         "lockfile-lint": "^4.6.2",
         "nodemon": "^2.0.15",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.6",
         "postcss-cli": "^9.1.0",
-        "rollup": "^2.67.2",
+        "rollup": "^2.68.0",
         "rollup-plugin-istanbul": "^3.0.0",
         "rtlcss": "^3.5.0",
-        "sass": "^1.49.7",
+        "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"
       },
       "peerDependencies": {
@@ -70,9 +70,9 @@
       }
     },
     "node_modules/@ampproject/remapping": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.1.tgz",
-      "integrity": "sha512-Aolwjd7HSC2PyY0fDj/wA/EimQT4HfEnFYNp5s9CQlrdhyvWTtvZ5YzrUPu6R6/1jKiUlxu8bUhkdSnKHNAHMA==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
+      "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
       "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.0"
@@ -82,11 +82,12 @@
       }
     },
     "node_modules/@babel/cli": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.17.0.tgz",
-      "integrity": "sha512-es10YH/ejXbg551vtnmEzIPe3MQRNOS644o3pf8vUr1tIeNzVNlP8BBvs1Eh7roh5A+k2fEHUas+ZptOWHA1fQ==",
+      "version": "7.17.6",
+      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.17.6.tgz",
+      "integrity": "sha512-l4w608nsDNlxZhiJ5tE3DbNmr61fIKMZ6fTBo171VEFuFMIYuJ3mHRhTLEkKKyvx2Mizkkv/0a8OJOnZqkKYNA==",
       "dev": true,
       "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.4",
         "commander": "^4.0.1",
         "convert-source-map": "^1.1.0",
         "fs-readdir-recursive": "^1.1.0",
@@ -132,20 +133,20 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.17.2",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.2.tgz",
-      "integrity": "sha512-R3VH5G42VSDolRHyUO4V2cfag8WHcZyxdq5Z/m8Xyb92lW/Erm/6kM+XtRFGf3Mulre3mveni2NHfEUws8wSvw==",
+      "version": "7.17.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz",
+      "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==",
       "dev": true,
       "dependencies": {
-        "@ampproject/remapping": "^2.0.0",
+        "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.0",
+        "@babel/generator": "^7.17.3",
         "@babel/helper-compilation-targets": "^7.16.7",
         "@babel/helper-module-transforms": "^7.16.7",
         "@babel/helpers": "^7.17.2",
-        "@babel/parser": "^7.17.0",
+        "@babel/parser": "^7.17.3",
         "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.0",
+        "@babel/traverse": "^7.17.3",
         "@babel/types": "^7.17.0",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
@@ -162,9 +163,9 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.0.tgz",
-      "integrity": "sha512-I3Omiv6FGOC29dtlZhkfXO6pgkmukJSlT26QjVvS1DGZe/NzSVCPG41X0tS21oZkJYlovfj9qDWgKP+Cn4bXxw==",
+      "version": "7.17.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz",
+      "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==",
       "dev": true,
       "dependencies": {
         "@babel/types": "^7.17.0",
@@ -219,9 +220,9 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.17.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.1.tgz",
-      "integrity": "sha512-JBdSr/LtyYIno/pNnJ75lBcqc3Z1XXujzPanHqjvvrhOA+DTceTFuJi8XjmWTZh4r3fsdfqaCMN0iZemdkxZHQ==",
+      "version": "7.17.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.6.tgz",
+      "integrity": "sha512-SogLLSxXm2OkBbSsHZMM4tUi8fUzjs63AT/d0YQIzr6GSd8Hxsbk2KYDX0k0DweAzGMj/YWeiCsorIdtdcW8Eg==",
       "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
@@ -361,9 +362,9 @@
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz",
-      "integrity": "sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==",
+      "version": "7.17.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.6.tgz",
+      "integrity": "sha512-2ULmRdqoOMpdvkbT8jONrZML/XALfzxlb052bldftkicAUy8AxSCkD5trDPQcwHNmolcl7wP6ehNqMlyUw6AaA==",
       "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.16.7",
@@ -372,8 +373,8 @@
         "@babel/helper-split-export-declaration": "^7.16.7",
         "@babel/helper-validator-identifier": "^7.16.7",
         "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/traverse": "^7.17.3",
+        "@babel/types": "^7.17.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -528,9 +529,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.0.tgz",
-      "integrity": "sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==",
+      "version": "7.17.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.3.tgz",
+      "integrity": "sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -605,12 +606,12 @@
       }
     },
     "node_modules/@babel/plugin-proposal-class-static-block": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.16.7.tgz",
-      "integrity": "sha512-dgqJJrcZoG/4CkMopzhPJjGxsIe9A8RlkQLnL/Vhhx8AA9ZuaRwGSlscSh42hazc7WSrya/IK7mTeoF0DP9tEw==",
+      "version": "7.17.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.17.6.tgz",
+      "integrity": "sha512-X/tididvL2zbs7jZCeeRJ8167U/+Ac135AM6jCAx6gYXDUviZV5Ku9UDvWS2NCuWlFjIRXklYhwo6HhAC7ETnA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.16.7",
+        "@babel/helper-create-class-features-plugin": "^7.17.6",
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-class-static-block": "^7.14.5"
       },
@@ -718,12 +719,12 @@
       }
     },
     "node_modules/@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.16.7.tgz",
-      "integrity": "sha512-3O0Y4+dw94HA86qSg9IHfyPktgR7q3gpNVAeiKQd+8jBKFaU5NQS1Yatgo4wY+UFNuLjvxcSmzcsHqrhgTyBUA==",
+      "version": "7.17.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.17.3.tgz",
+      "integrity": "sha512-yuL5iQA/TbZn+RGAfxQXfi7CNLmKi1f8zInn4IgobuCWcAb7i+zj4TYzQ9l8cEzVyJ89PDGuqxK1xZpUDISesw==",
       "dev": true,
       "dependencies": {
-        "@babel/compat-data": "^7.16.4",
+        "@babel/compat-data": "^7.17.0",
         "@babel/helper-compilation-targets": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
@@ -1096,9 +1097,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-destructuring": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.16.7.tgz",
-      "integrity": "sha512-VqAwhTHBnu5xBVDCvrvqJbtLUa++qZaWC0Fgr2mqokBlulZARGyIvZDoqbPlPaKImQ9dKAcCzbv+ul//uqu70A==",
+      "version": "7.17.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.17.3.tgz",
+      "integrity": "sha512-dDFzegDYKlPqa72xIlbmSkly5MluLoaC1JswABGktyt6NTXSBcUuse/kWE/wvKFWJHPETpi158qJZFS3JmykJg==",
       "dev": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -1633,18 +1634,18 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.0.tgz",
-      "integrity": "sha512-fpFIXvqD6kC7c7PUNnZ0Z8cQXlarCLtCUpt2S1Dx7PjoRtCFffvOkHHSom+m5HIxMZn5bIBVb71lhabcmjEsqg==",
+      "version": "7.17.3",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.3.tgz",
+      "integrity": "sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.0",
+        "@babel/generator": "^7.17.3",
         "@babel/helper-environment-visitor": "^7.16.7",
         "@babel/helper-function-name": "^7.16.7",
         "@babel/helper-hoist-variables": "^7.16.7",
         "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/parser": "^7.17.0",
+        "@babel/parser": "^7.17.3",
         "@babel/types": "^7.17.0",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
@@ -1995,9 +1996,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "17.0.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.18.tgz",
-      "integrity": "sha512-eKj4f/BsN/qcculZiRSujogjvp5O/k4lOW5m35NopjZM/QwLOR075a8pJW5hD+Rtdm2DaCVPENS6KtSQnUD6BA==",
+      "version": "17.0.19",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.19.tgz",
+      "integrity": "sha512-PfeQhvcMR4cPFVuYfBN4ifG7p9c+Dlh3yUZR6k+5yQK7wX3gDgVxBly4/WkBRs9x4dmcy1TVl08SY67wwtEvmA==",
       "dev": true
     },
     "node_modules/@types/normalize-package-data": {
@@ -2578,35 +2579,26 @@
       "dev": true
     },
     "node_modules/body-parser": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.1.tgz",
-      "integrity": "sha512-8ljfQi5eBk8EJfECMrgqNGWPEY5jWP+1IzkzkGdFFEwFQZZyaZ21UqdaHktgiMlH0xLHqIFtE/u2OYE5dOtViA==",
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==",
       "dev": true,
       "dependencies": {
-        "bytes": "3.1.1",
+        "bytes": "3.1.2",
         "content-type": "~1.0.4",
         "debug": "2.6.9",
         "depd": "~1.1.2",
         "http-errors": "1.8.1",
         "iconv-lite": "0.4.24",
         "on-finished": "~2.3.0",
-        "qs": "6.9.6",
-        "raw-body": "2.4.2",
+        "qs": "6.9.7",
+        "raw-body": "2.4.3",
         "type-is": "~1.6.18"
       },
       "engines": {
         "node": ">= 0.8"
       }
     },
-    "node_modules/body-parser/node_modules/bytes": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
-      "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/body-parser/node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -2761,15 +2753,15 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
-      "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==",
+      "version": "4.19.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.3.tgz",
+      "integrity": "sha512-XK3X4xtKJ+Txj8G5c30B4gsm71s69lqXlkYui4s6EkKxuv49qjYlY6oVd+IFJ73d4YymtM3+djvvt/R/iJwwDg==",
       "dev": true,
       "dependencies": {
-        "caniuse-lite": "^1.0.30001286",
-        "electron-to-chromium": "^1.4.17",
+        "caniuse-lite": "^1.0.30001312",
+        "electron-to-chromium": "^1.4.71",
         "escalade": "^3.1.1",
-        "node-releases": "^2.0.1",
+        "node-releases": "^2.0.2",
         "picocolors": "^1.0.0"
       },
       "bin": {
@@ -3469,9 +3461,9 @@
       }
     },
     "node_modules/core-js-compat": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.21.0.tgz",
-      "integrity": "sha512-OSXseNPSK2OPJa6GdtkMz/XxeXx8/CJvfhQWTqd6neuUraujcL4jVsjkLQz1OWnax8xVQJnRPe0V2jqNWORA+A==",
+      "version": "3.21.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.21.1.tgz",
+      "integrity": "sha512-gbgX5AUvMb8gwxC7FLVWYT7Kkgu/y7+h/h1X43yJkNqhlK2fuYyQimqvKGNZFAY6CKii/GFKJ2cp/1/42TN36g==",
       "dev": true,
       "dependencies": {
         "browserslist": "^4.19.1",
@@ -4021,9 +4013,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.70",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.70.tgz",
-      "integrity": "sha512-joSEu0IwP/rOY8mHcQ6J2MEm5GgsvVcrNDSGg2wQiV0epjsq6pNvRk4UA2nqV8aK0PPL+Z1Z/uD73bG8swzroA==",
+      "version": "1.4.71",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.71.tgz",
+      "integrity": "sha512-Hk61vXXKRb2cd3znPE9F+2pLWdIOmP7GjiTj45y6L3W/lO+hSnUSUhq+6lEaERWBdZOHbk2s3YV5c9xVl3boVw==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -4363,9 +4355,9 @@
       "dev": true
     },
     "node_modules/eslint-plugin-unicorn": {
-      "version": "40.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-40.1.0.tgz",
-      "integrity": "sha512-y5doK2DF9Sr5AqKEHbHxjFllJ167nKDRU01HDcWyv4Tnmaoe9iNxMrBnaybZvWZUaE3OC5Unu0lNIevYamloig==",
+      "version": "41.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-41.0.0.tgz",
+      "integrity": "sha512-xoJCaRc1uy5REg9DkVga1BkZV57jJxoqOcrU28QHZB89Lk5LdSqdVyTIt9JQVfHNKaiyJ7X+3iLlIn+VEHWEzA==",
       "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.15.7",
@@ -4390,7 +4382,7 @@
         "url": "https://github.com/sindresorhus/eslint-plugin-unicorn?sponsor=1"
       },
       "peerDependencies": {
-        "eslint": ">=7.32.0"
+        "eslint": ">=8.8.0"
       }
     },
     "node_modules/eslint-plugin-unicorn/node_modules/semver": {
@@ -5024,9 +5016,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.14.8",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
-      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==",
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
       "dev": true,
       "funding": [
         {
@@ -6367,9 +6359,9 @@
       }
     },
     "node_modules/jasmine-core": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.0.0.tgz",
-      "integrity": "sha512-tq24OCqHElgU9KDpb/8O21r1IfotgjIzalfW9eCmRR40LZpvwXT68iariIyayMwi0m98RDt16aljdbwK0sBMmQ==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.0.1.tgz",
+      "integrity": "sha512-w+JDABxQCkxbGGxg+a2hUVZyqUS2JKngvIyLGu/xiw2ZwgsoSB0iiecLQsQORSeaKQ6iGrCyWG86RfNDuoA7Lg==",
       "dev": true,
       "peer": true
     },
@@ -6619,15 +6611,15 @@
       }
     },
     "node_modules/karma-jasmine/node_modules/jasmine-core": {
-      "version": "3.99.0",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.99.0.tgz",
-      "integrity": "sha512-+ZDaJlEfRopINQqgE+hvzRyDIQDeKfqqTvF8RzXsvU1yE3pBDRud2+Qfh9WvGgRpuzqxyQJVI6Amy5XQ11r/3w==",
+      "version": "3.99.1",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.99.1.tgz",
+      "integrity": "sha512-Hu1dmuoGcZ7AfyynN3LsfruwMbxMALMka+YtZeGoLuDEySVmVAPaonkNoBRIw/ectu8b9tVQCJNgp4a4knp+tg==",
       "dev": true
     },
     "node_modules/karma-rollup-preprocessor": {
-      "version": "7.0.8",
-      "resolved": "https://registry.npmjs.org/karma-rollup-preprocessor/-/karma-rollup-preprocessor-7.0.8.tgz",
-      "integrity": "sha512-WiuBCS9qsatJuR17dghiTARBZ7LF+ml+eb7qJXhw7IbsdY0lTWELDRQC/93J9i6636CsAXVBL3VJF4WtaFLZzA==",
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/karma-rollup-preprocessor/-/karma-rollup-preprocessor-7.0.7.tgz",
+      "integrity": "sha512-Y1QwsTCiCBp8sSALZdqmqry/mWIWIy0V6zonUIpy+0/D/Kpb2XZvR+JZrWfacQvcvKQdZFJvg6EwlnKtjepu3Q==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.3.1",
@@ -7023,9 +7015,9 @@
       }
     },
     "node_modules/mime-db": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz",
-      "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==",
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "dev": true,
       "engines": {
         "node": ">= 0.6"
@@ -7043,6 +7035,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mime-types/node_modules/mime-db": {
+      "version": "1.51.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz",
+      "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-response": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
@@ -7062,9 +7063,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.1.tgz",
-      "integrity": "sha512-reLxBcKUPNBnc/sVtAbxgRVFSegoGeLaSjmphNhcwcolhYLRgtJscn5mRl6YRZNQv40Y7P6JM2YhSIsbL9OB5A==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -7112,9 +7113,9 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.0.tgz",
-      "integrity": "sha512-JzxqqT5u/x+/KOFSd7JP15DOo9nOoHpx6DYatqIHUW2+flybkm+mdcraotSQR5WcnZr+qhGVh8Ted0KdfSMxlg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
+      "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
       "dev": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
@@ -8314,9 +8315,9 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.9.6",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
-      "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==",
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
       "dev": true,
       "engines": {
         "node": ">=0.6"
@@ -8378,12 +8379,12 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.2.tgz",
-      "integrity": "sha512-RPMAFUJP19WIet/99ngh6Iv8fzAbqum4Li7AD6DtGaW2RpMB/11xDoalPiJMTbu6I3hkbMVkATvZrqb9EEqeeQ==",
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.3.tgz",
+      "integrity": "sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==",
       "dev": true,
       "dependencies": {
-        "bytes": "3.1.1",
+        "bytes": "3.1.2",
         "http-errors": "1.8.1",
         "iconv-lite": "0.4.24",
         "unpipe": "1.0.0"
@@ -8392,15 +8393,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/raw-body/node_modules/bytes": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
-      "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -8882,9 +8874,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "2.67.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.67.2.tgz",
-      "integrity": "sha512-hoEiBWwZtf1QdK3jZIq59L0FJj4Fiv4RplCO4pvCRC86qsoFurWB4hKQIjoRf3WvJmk5UZ9b0y5ton+62fC7Tw==",
+      "version": "2.68.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.68.0.tgz",
+      "integrity": "sha512-XrMKOYK7oQcTio4wyTz466mucnd8LzkiZLozZ4Rz0zQD+HeX4nUK4B8GrTX/2EvN2/vBF/i2WnaXboPxo0JylA==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -9064,9 +9056,9 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.49.7",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.7.tgz",
-      "integrity": "sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==",
+      "version": "1.49.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.8.tgz",
+      "integrity": "sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -9924,11 +9916,12 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
-      "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.11.0.tgz",
+      "integrity": "sha512-uCA9DLanzzWSsN1UirKwylhhRz3aKPInlfmpGfw8VN6jHsAtu8HJtIpeeHHK23rxnE/cDc+yvmq5wqkIC6Kn0A==",
       "dev": true,
       "dependencies": {
+        "acorn": "^8.5.0",
         "commander": "^2.20.0",
         "source-map": "~0.7.2",
         "source-map-support": "~0.5.20"
@@ -9938,14 +9931,6 @@
       },
       "engines": {
         "node": ">=10"
-      },
-      "peerDependencies": {
-        "acorn": "^8.5.0"
-      },
-      "peerDependenciesMeta": {
-        "acorn": {
-          "optional": true
-        }
       }
     },
     "node_modules/terser/node_modules/commander": {
@@ -10750,20 +10735,21 @@
   },
   "dependencies": {
     "@ampproject/remapping": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.1.tgz",
-      "integrity": "sha512-Aolwjd7HSC2PyY0fDj/wA/EimQT4HfEnFYNp5s9CQlrdhyvWTtvZ5YzrUPu6R6/1jKiUlxu8bUhkdSnKHNAHMA==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
+      "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
       "dev": true,
       "requires": {
         "@jridgewell/trace-mapping": "^0.3.0"
       }
     },
     "@babel/cli": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.17.0.tgz",
-      "integrity": "sha512-es10YH/ejXbg551vtnmEzIPe3MQRNOS644o3pf8vUr1tIeNzVNlP8BBvs1Eh7roh5A+k2fEHUas+ZptOWHA1fQ==",
+      "version": "7.17.6",
+      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.17.6.tgz",
+      "integrity": "sha512-l4w608nsDNlxZhiJ5tE3DbNmr61fIKMZ6fTBo171VEFuFMIYuJ3mHRhTLEkKKyvx2Mizkkv/0a8OJOnZqkKYNA==",
       "dev": true,
       "requires": {
+        "@jridgewell/trace-mapping": "^0.3.4",
         "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.3",
         "chokidar": "^3.4.0",
         "commander": "^4.0.1",
@@ -10791,20 +10777,20 @@
       "dev": true
     },
     "@babel/core": {
-      "version": "7.17.2",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.2.tgz",
-      "integrity": "sha512-R3VH5G42VSDolRHyUO4V2cfag8WHcZyxdq5Z/m8Xyb92lW/Erm/6kM+XtRFGf3Mulre3mveni2NHfEUws8wSvw==",
+      "version": "7.17.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz",
+      "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==",
       "dev": true,
       "requires": {
-        "@ampproject/remapping": "^2.0.0",
+        "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.0",
+        "@babel/generator": "^7.17.3",
         "@babel/helper-compilation-targets": "^7.16.7",
         "@babel/helper-module-transforms": "^7.16.7",
         "@babel/helpers": "^7.17.2",
-        "@babel/parser": "^7.17.0",
+        "@babel/parser": "^7.17.3",
         "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.0",
+        "@babel/traverse": "^7.17.3",
         "@babel/types": "^7.17.0",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
@@ -10814,9 +10800,9 @@
       }
     },
     "@babel/generator": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.0.tgz",
-      "integrity": "sha512-I3Omiv6FGOC29dtlZhkfXO6pgkmukJSlT26QjVvS1DGZe/NzSVCPG41X0tS21oZkJYlovfj9qDWgKP+Cn4bXxw==",
+      "version": "7.17.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz",
+      "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==",
       "dev": true,
       "requires": {
         "@babel/types": "^7.17.0",
@@ -10856,9 +10842,9 @@
       }
     },
     "@babel/helper-create-class-features-plugin": {
-      "version": "7.17.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.1.tgz",
-      "integrity": "sha512-JBdSr/LtyYIno/pNnJ75lBcqc3Z1XXujzPanHqjvvrhOA+DTceTFuJi8XjmWTZh4r3fsdfqaCMN0iZemdkxZHQ==",
+      "version": "7.17.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.6.tgz",
+      "integrity": "sha512-SogLLSxXm2OkBbSsHZMM4tUi8fUzjs63AT/d0YQIzr6GSd8Hxsbk2KYDX0k0DweAzGMj/YWeiCsorIdtdcW8Eg==",
       "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.16.7",
@@ -10962,9 +10948,9 @@
       }
     },
     "@babel/helper-module-transforms": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz",
-      "integrity": "sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==",
+      "version": "7.17.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.6.tgz",
+      "integrity": "sha512-2ULmRdqoOMpdvkbT8jONrZML/XALfzxlb052bldftkicAUy8AxSCkD5trDPQcwHNmolcl7wP6ehNqMlyUw6AaA==",
       "dev": true,
       "requires": {
         "@babel/helper-environment-visitor": "^7.16.7",
@@ -10973,8 +10959,8 @@
         "@babel/helper-split-export-declaration": "^7.16.7",
         "@babel/helper-validator-identifier": "^7.16.7",
         "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/traverse": "^7.17.3",
+        "@babel/types": "^7.17.0"
       }
     },
     "@babel/helper-optimise-call-expression": {
@@ -11090,9 +11076,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.0.tgz",
-      "integrity": "sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==",
+      "version": "7.17.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.3.tgz",
+      "integrity": "sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==",
       "dev": true
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
@@ -11137,12 +11123,12 @@
       }
     },
     "@babel/plugin-proposal-class-static-block": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.16.7.tgz",
-      "integrity": "sha512-dgqJJrcZoG/4CkMopzhPJjGxsIe9A8RlkQLnL/Vhhx8AA9ZuaRwGSlscSh42hazc7WSrya/IK7mTeoF0DP9tEw==",
+      "version": "7.17.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.17.6.tgz",
+      "integrity": "sha512-X/tididvL2zbs7jZCeeRJ8167U/+Ac135AM6jCAx6gYXDUviZV5Ku9UDvWS2NCuWlFjIRXklYhwo6HhAC7ETnA==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.16.7",
+        "@babel/helper-create-class-features-plugin": "^7.17.6",
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-class-static-block": "^7.14.5"
       }
@@ -11208,12 +11194,12 @@
       }
     },
     "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.16.7.tgz",
-      "integrity": "sha512-3O0Y4+dw94HA86qSg9IHfyPktgR7q3gpNVAeiKQd+8jBKFaU5NQS1Yatgo4wY+UFNuLjvxcSmzcsHqrhgTyBUA==",
+      "version": "7.17.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.17.3.tgz",
+      "integrity": "sha512-yuL5iQA/TbZn+RGAfxQXfi7CNLmKi1f8zInn4IgobuCWcAb7i+zj4TYzQ9l8cEzVyJ89PDGuqxK1xZpUDISesw==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.16.4",
+        "@babel/compat-data": "^7.17.0",
         "@babel/helper-compilation-targets": "^7.16.7",
         "@babel/helper-plugin-utils": "^7.16.7",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
@@ -11463,9 +11449,9 @@
       }
     },
     "@babel/plugin-transform-destructuring": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.16.7.tgz",
-      "integrity": "sha512-VqAwhTHBnu5xBVDCvrvqJbtLUa++qZaWC0Fgr2mqokBlulZARGyIvZDoqbPlPaKImQ9dKAcCzbv+ul//uqu70A==",
+      "version": "7.17.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.17.3.tgz",
+      "integrity": "sha512-dDFzegDYKlPqa72xIlbmSkly5MluLoaC1JswABGktyt6NTXSBcUuse/kWE/wvKFWJHPETpi158qJZFS3JmykJg==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.16.7"
@@ -11829,18 +11815,18 @@
       }
     },
     "@babel/traverse": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.0.tgz",
-      "integrity": "sha512-fpFIXvqD6kC7c7PUNnZ0Z8cQXlarCLtCUpt2S1Dx7PjoRtCFffvOkHHSom+m5HIxMZn5bIBVb71lhabcmjEsqg==",
+      "version": "7.17.3",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.3.tgz",
+      "integrity": "sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.0",
+        "@babel/generator": "^7.17.3",
         "@babel/helper-environment-visitor": "^7.16.7",
         "@babel/helper-function-name": "^7.16.7",
         "@babel/helper-hoist-variables": "^7.16.7",
         "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/parser": "^7.17.0",
+        "@babel/parser": "^7.17.3",
         "@babel/types": "^7.17.0",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
@@ -12106,9 +12092,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "17.0.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.18.tgz",
-      "integrity": "sha512-eKj4f/BsN/qcculZiRSujogjvp5O/k4lOW5m35NopjZM/QwLOR075a8pJW5hD+Rtdm2DaCVPENS6KtSQnUD6BA==",
+      "version": "17.0.19",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.19.tgz",
+      "integrity": "sha512-PfeQhvcMR4cPFVuYfBN4ifG7p9c+Dlh3yUZR6k+5yQK7wX3gDgVxBly4/WkBRs9x4dmcy1TVl08SY67wwtEvmA==",
       "dev": true
     },
     "@types/normalize-package-data": {
@@ -12540,29 +12526,23 @@
       "dev": true
     },
     "body-parser": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.1.tgz",
-      "integrity": "sha512-8ljfQi5eBk8EJfECMrgqNGWPEY5jWP+1IzkzkGdFFEwFQZZyaZ21UqdaHktgiMlH0xLHqIFtE/u2OYE5dOtViA==",
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==",
       "dev": true,
       "requires": {
-        "bytes": "3.1.1",
+        "bytes": "3.1.2",
         "content-type": "~1.0.4",
         "debug": "2.6.9",
         "depd": "~1.1.2",
         "http-errors": "1.8.1",
         "iconv-lite": "0.4.24",
         "on-finished": "~2.3.0",
-        "qs": "6.9.6",
-        "raw-body": "2.4.2",
+        "qs": "6.9.7",
+        "raw-body": "2.4.3",
         "type-is": "~1.6.18"
       },
       "dependencies": {
-        "bytes": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
-          "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==",
-          "dev": true
-        },
         "debug": {
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -12679,15 +12659,15 @@
       }
     },
     "browserslist": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
-      "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==",
+      "version": "4.19.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.3.tgz",
+      "integrity": "sha512-XK3X4xtKJ+Txj8G5c30B4gsm71s69lqXlkYui4s6EkKxuv49qjYlY6oVd+IFJ73d4YymtM3+djvvt/R/iJwwDg==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001286",
-        "electron-to-chromium": "^1.4.17",
+        "caniuse-lite": "^1.0.30001312",
+        "electron-to-chromium": "^1.4.71",
         "escalade": "^3.1.1",
-        "node-releases": "^2.0.1",
+        "node-releases": "^2.0.2",
         "picocolors": "^1.0.0"
       }
     },
@@ -13216,9 +13196,9 @@
       "dev": true
     },
     "core-js-compat": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.21.0.tgz",
-      "integrity": "sha512-OSXseNPSK2OPJa6GdtkMz/XxeXx8/CJvfhQWTqd6neuUraujcL4jVsjkLQz1OWnax8xVQJnRPe0V2jqNWORA+A==",
+      "version": "3.21.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.21.1.tgz",
+      "integrity": "sha512-gbgX5AUvMb8gwxC7FLVWYT7Kkgu/y7+h/h1X43yJkNqhlK2fuYyQimqvKGNZFAY6CKii/GFKJ2cp/1/42TN36g==",
       "dev": true,
       "requires": {
         "browserslist": "^4.19.1",
@@ -13651,9 +13631,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.4.70",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.70.tgz",
-      "integrity": "sha512-joSEu0IwP/rOY8mHcQ6J2MEm5GgsvVcrNDSGg2wQiV0epjsq6pNvRk4UA2nqV8aK0PPL+Z1Z/uD73bG8swzroA==",
+      "version": "1.4.71",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.71.tgz",
+      "integrity": "sha512-Hk61vXXKRb2cd3znPE9F+2pLWdIOmP7GjiTj45y6L3W/lO+hSnUSUhq+6lEaERWBdZOHbk2s3YV5c9xVl3boVw==",
       "dev": true
     },
     "emoji-regex": {
@@ -14020,9 +14000,9 @@
       }
     },
     "eslint-plugin-unicorn": {
-      "version": "40.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-40.1.0.tgz",
-      "integrity": "sha512-y5doK2DF9Sr5AqKEHbHxjFllJ167nKDRU01HDcWyv4Tnmaoe9iNxMrBnaybZvWZUaE3OC5Unu0lNIevYamloig==",
+      "version": "41.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-41.0.0.tgz",
+      "integrity": "sha512-xoJCaRc1uy5REg9DkVga1BkZV57jJxoqOcrU28QHZB89Lk5LdSqdVyTIt9JQVfHNKaiyJ7X+3iLlIn+VEHWEzA==",
       "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.15.7",
@@ -14448,9 +14428,9 @@
       "dev": true
     },
     "follow-redirects": {
-      "version": "1.14.8",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
-      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==",
+      "version": "1.14.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
       "dev": true
     },
     "fraction.js": {
@@ -15424,9 +15404,9 @@
       }
     },
     "jasmine-core": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.0.0.tgz",
-      "integrity": "sha512-tq24OCqHElgU9KDpb/8O21r1IfotgjIzalfW9eCmRR40LZpvwXT68iariIyayMwi0m98RDt16aljdbwK0sBMmQ==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.0.1.tgz",
+      "integrity": "sha512-w+JDABxQCkxbGGxg+a2hUVZyqUS2JKngvIyLGu/xiw2ZwgsoSB0iiecLQsQORSeaKQ6iGrCyWG86RfNDuoA7Lg==",
       "dev": true,
       "peer": true
     },
@@ -15636,9 +15616,9 @@
       },
       "dependencies": {
         "jasmine-core": {
-          "version": "3.99.0",
-          "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.99.0.tgz",
-          "integrity": "sha512-+ZDaJlEfRopINQqgE+hvzRyDIQDeKfqqTvF8RzXsvU1yE3pBDRud2+Qfh9WvGgRpuzqxyQJVI6Amy5XQ11r/3w==",
+          "version": "3.99.1",
+          "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.99.1.tgz",
+          "integrity": "sha512-Hu1dmuoGcZ7AfyynN3LsfruwMbxMALMka+YtZeGoLuDEySVmVAPaonkNoBRIw/ectu8b9tVQCJNgp4a4knp+tg==",
           "dev": true
         }
       }
@@ -15651,9 +15631,9 @@
       "requires": {}
     },
     "karma-rollup-preprocessor": {
-      "version": "7.0.8",
-      "resolved": "https://registry.npmjs.org/karma-rollup-preprocessor/-/karma-rollup-preprocessor-7.0.8.tgz",
-      "integrity": "sha512-WiuBCS9qsatJuR17dghiTARBZ7LF+ml+eb7qJXhw7IbsdY0lTWELDRQC/93J9i6636CsAXVBL3VJF4WtaFLZzA==",
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/karma-rollup-preprocessor/-/karma-rollup-preprocessor-7.0.7.tgz",
+      "integrity": "sha512-Y1QwsTCiCBp8sSALZdqmqry/mWIWIy0V6zonUIpy+0/D/Kpb2XZvR+JZrWfacQvcvKQdZFJvg6EwlnKtjepu3Q==",
       "dev": true,
       "requires": {
         "chokidar": "^3.3.1",
@@ -15941,9 +15921,9 @@
       "dev": true
     },
     "mime-db": {
-      "version": "1.51.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz",
-      "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==",
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "dev": true
     },
     "mime-types": {
@@ -15953,6 +15933,14 @@
       "dev": true,
       "requires": {
         "mime-db": "1.51.0"
+      },
+      "dependencies": {
+        "mime-db": {
+          "version": "1.51.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz",
+          "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==",
+          "dev": true
+        }
       }
     },
     "mimic-response": {
@@ -15968,9 +15956,9 @@
       "dev": true
     },
     "minimatch": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.1.tgz",
-      "integrity": "sha512-reLxBcKUPNBnc/sVtAbxgRVFSegoGeLaSjmphNhcwcolhYLRgtJscn5mRl6YRZNQv40Y7P6JM2YhSIsbL9OB5A==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
@@ -16009,9 +15997,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.0.tgz",
-      "integrity": "sha512-JzxqqT5u/x+/KOFSd7JP15DOo9nOoHpx6DYatqIHUW2+flybkm+mdcraotSQR5WcnZr+qhGVh8Ted0KdfSMxlg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
+      "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
       "dev": true
     },
     "natural-compare": {
@@ -16872,9 +16860,9 @@
       "dev": true
     },
     "qs": {
-      "version": "6.9.6",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
-      "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==",
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
       "dev": true
     },
     "query-string": {
@@ -16907,23 +16895,15 @@
       "dev": true
     },
     "raw-body": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.2.tgz",
-      "integrity": "sha512-RPMAFUJP19WIet/99ngh6Iv8fzAbqum4Li7AD6DtGaW2RpMB/11xDoalPiJMTbu6I3hkbMVkATvZrqb9EEqeeQ==",
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.3.tgz",
+      "integrity": "sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==",
       "dev": true,
       "requires": {
-        "bytes": "3.1.1",
+        "bytes": "3.1.2",
         "http-errors": "1.8.1",
         "iconv-lite": "0.4.24",
         "unpipe": "1.0.0"
-      },
-      "dependencies": {
-        "bytes": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
-          "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==",
-          "dev": true
-        }
       }
     },
     "rc": {
@@ -17301,9 +17281,9 @@
       }
     },
     "rollup": {
-      "version": "2.67.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.67.2.tgz",
-      "integrity": "sha512-hoEiBWwZtf1QdK3jZIq59L0FJj4Fiv4RplCO4pvCRC86qsoFurWB4hKQIjoRf3WvJmk5UZ9b0y5ton+62fC7Tw==",
+      "version": "2.68.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.68.0.tgz",
+      "integrity": "sha512-XrMKOYK7oQcTio4wyTz466mucnd8LzkiZLozZ4Rz0zQD+HeX4nUK4B8GrTX/2EvN2/vBF/i2WnaXboPxo0JylA==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -17425,9 +17405,9 @@
       "dev": true
     },
     "sass": {
-      "version": "1.49.7",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.7.tgz",
-      "integrity": "sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==",
+      "version": "1.49.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.8.tgz",
+      "integrity": "sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -18099,11 +18079,12 @@
       }
     },
     "terser": {
-      "version": "5.10.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
-      "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.11.0.tgz",
+      "integrity": "sha512-uCA9DLanzzWSsN1UirKwylhhRz3aKPInlfmpGfw8VN6jHsAtu8HJtIpeeHHK23rxnE/cDc+yvmq5wqkIC6Kn0A==",
       "dev": true,
       "requires": {
+        "acorn": "^8.5.0",
         "commander": "^2.20.0",
         "source-map": "~0.7.2",
         "source-map-support": "~0.5.20"

package.json

@@ -104,8 +104,8 @@
     "@popperjs/core": "^2.11.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.0",
-    "@babel/core": "^7.17.2",
+    "@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",
@@ -119,7 +119,7 @@
     "eslint": "^8.9.0",
     "eslint-config-xo": "^0.40.0",
     "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-unicorn": "^40.1.0",
+    "eslint-plugin-unicorn": "^41.0.0",
     "find-unused-sass-variables": "^4.0.1",
     "globby": "^11.0.4",
     "hammer-simulator": "0.0.1",
@@ -134,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.8",
+    "karma-rollup-preprocessor": "7.0.7",
     "lockfile-lint": "^4.6.2",
     "nodemon": "^2.0.15",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.6",
     "postcss-cli": "^9.1.0",
-    "rollup": "^2.67.2",
+    "rollup": "^2.68.0",
     "rollup-plugin-istanbul": "^3.0.0",
     "rtlcss": "^3.5.0",
-    "sass": "^1.49.7",
+    "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": [

scss/_dropdown.scss

@@ -17,7 +17,8 @@
 .dropdown-menu {
   // scss-docs-start dropdown-css-vars
   --#{$variable-prefix}dropdown-min-width: #{$dropdown-min-width};
-  --#{$variable-prefix}dropdown-padding: #{$dropdown-padding-y $dropdown-padding-x};
+  --#{$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
@@ -35,7 +36,8 @@
   --#{$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: #{$dropdown-item-padding-y $dropdown-item-padding-x};
+  --#{$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
@@ -44,7 +46,7 @@
   z-index: $zindex-dropdown;
   display: none; // none by default, but block on "open" of the menu
   min-width: var(--#{$variable-prefix}dropdown-min-width);
-  padding: var(--#{$variable-prefix}dropdown-padding);
+  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: var(--#{$variable-prefix}dropdown-color);
@@ -61,6 +63,25 @@
     left: 0;
     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
@@ -156,7 +177,7 @@
 .dropdown-item {
   display: block;
   width: 100%; // For `<button>`s
-  padding: var(--#{$variable-prefix}dropdown-item-padding);
+  padding: var(--#{$variable-prefix}dropdown-item-padding-y) var(--#{$variable-prefix}dropdown-item-padding-x);
   clear: both;
   font-weight: $font-weight-normal;
   color: var(--#{$variable-prefix}dropdown-link-color);

scss/_list-group.scss

@@ -16,7 +16,7 @@
   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;

scss/_modal.scss

@@ -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);
 

scss/_navbar.scss

@@ -13,6 +13,7 @@
   --#{$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};
@@ -65,7 +66,7 @@
   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-toggler-font-size));
+  @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;

scss/_reboot.scss

@@ -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
 //

scss/_variables.scss

@@ -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;
@@ -1145,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
@@ -1390,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;

scss/helpers/_colored-links.scss

@@ -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
       }
     }
   }

scss/mixins/_buttons.scss

@@ -63,7 +63,8 @@
 
 // scss-docs-start btn-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
-  --#{$variable-prefix}btn-padding: #{$padding-y} #{$padding-x};
+  --#{$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};
 }

site/assets/js/application.js

@@ -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'
@@ -163,9 +163,4 @@
       tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
     }, { once: true })
   })
-
-  anchors.options = {
-    icon: '#'
-  }
-  anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
 })()

site/assets/scss/_anchor.scss

@@ -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;
   }
 }

site/assets/scss/_component-examples.scss

@@ -124,7 +124,7 @@
     display: block;
   }
 
-  > :last-child {
+  > :not(hr):last-child {
     margin-bottom: 0;
   }
 

site/content/docs/5.1/components/buttons.md

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

site/content/docs/5.1/components/dropdowns.md

@@ -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 >}}

site/content/docs/5.1/components/modal.md

@@ -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>

site/content/docs/5.1/content/reboot.md

@@ -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.

site/content/docs/5.1/examples/blog-rtl/index.html

@@ -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>

site/content/docs/5.1/examples/blog/blog.css

@@ -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 {

site/content/docs/5.1/examples/blog/blog.rtl.css

@@ -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 {

site/content/docs/5.1/examples/blog/index.html

@@ -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>

site/content/docs/5.1/examples/carousel-rtl/index.html

@@ -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">

site/content/docs/5.1/examples/carousel/carousel.css

@@ -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;
 }

site/content/docs/5.1/examples/carousel/carousel.rtl.css

@@ -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
 -------------------------------------------------- */

site/content/docs/5.1/examples/carousel/index.html

@@ -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">

site/content/docs/5.1/examples/cheatsheet-rtl/index.html

@@ -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>
@@ -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>

site/content/docs/5.1/examples/cheatsheet/cheatsheet.css

@@ -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,

site/content/docs/5.1/examples/cheatsheet/cheatsheet.rtl.css

@@ -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,

site/content/docs/5.1/examples/cheatsheet/index.html

@@ -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>
@@ -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>

site/content/docs/5.1/examples/cover/cover.css

@@ -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;
 }
 

site/content/docs/5.1/examples/cover/index.html

@@ -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>

site/content/docs/5.1/examples/dashboard-rtl/index.html

@@ -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>

site/content/docs/5.1/examples/dashboard/dashboard.css

@@ -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 {

site/content/docs/5.1/examples/dashboard/dashboard.rtl.css

@@ -5,7 +5,6 @@ body {
 .feather {
   width: 16px;
   height: 16px;
-  vertical-align: text-bottom;
 }
 
 /*
@@ -58,7 +57,6 @@ body {
 
 .sidebar-heading {
   font-size: .75rem;
-  text-transform: uppercase;
 }
 
 /*
@@ -68,7 +66,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);
 }
@@ -80,8 +77,6 @@ body {
 
 .navbar .form-control {
   padding: .75rem 1rem;
-  border-width: 0;
-  border-radius: 0;
 }
 
 .form-control-dark {

site/content/docs/5.1/examples/dashboard/index.html

@@ -12,11 +12,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="#">Company name</a>
+  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">Company name</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="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
-  <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
+  <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
   <div class="navbar-nav">
     <div class="nav-item text-nowrap">
       <a class="nav-link px-3" href="#">Sign out</a>
@@ -31,70 +31,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>
               Dashboard
             </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>
               Orders
             </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>
               Products
             </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>
               Customers
             </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>
               Reports
             </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>
               Integrations
             </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>Saved reports</span>
           <a class="link-secondary" href="#" aria-label="Add a new report">
-            <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>
               Current month
             </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>
               Last quarter
             </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>
               Social engagement
             </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>
               Year-end sale
             </a>
           </li>
@@ -111,7 +111,7 @@ extra_js:
             <button type="button" class="btn btn-sm btn-outline-secondary">Export</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>
             This week
           </button>
         </div>

site/content/docs/5.1/examples/dropdowns/dropdowns.css

@@ -1,20 +1,7 @@
 .dropdown-menu {
-  position: static;
-  display: block;
-  width: auto;
   margin: 4rem auto;
 }
 
-.dropdown-menu-macos {
-  display: grid;
-  gap: .25rem;
-  padding: .5rem;
-  border-radius: .5rem;
-}
-.dropdown-menu-macos .dropdown-item {
-  border-radius: .25rem;
-}
-
 .dropdown-item-danger {
   color: var(--bs-red);
 }
@@ -28,9 +15,7 @@
 }
 
 .btn-hover-light {
-  text-align: left;
   background-color: var(--bs-white);
-  border-radius: .25rem;
 }
 .btn-hover-light:hover,
 .btn-hover-light:focus {
@@ -74,3 +59,20 @@
   background-color: rgba(255, 255, 255, .05);
   border-color: rgba(255, 255, 255, .15);
 }
+
+
+.w-220px {
+  width: 220px;
+}
+
+.w-280px {
+  width: 280px;
+}
+
+.w-340px {
+  width: 340px;
+}
+
+.w-600px {
+  width: 600px;
+}

site/content/docs/5.1/examples/dropdowns/index.html

@@ -80,28 +80,27 @@ body_class: ""
   </symbol>
 </svg>
 
-<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownMacos">
-  <ul class="dropdown-menu dropdown-menu-macos mx-0 shadow" style="width: 220px;">
-    <li><a class="dropdown-item active" 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>
+<div class="d-flex gap-5 justify-content-center">
+  <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-4 mx-0 shadow w-220px">
+    <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
     <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
   </ul>
-  <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-macos mx-0 border-0 shadow" style="width: 220px;">
-    <li><a class="dropdown-item active" 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>
+  <ul class="dropdown-menu dropdown-menu-dark position-static d-grid gap-1 p-2 rounded-4 mx-0 border-0 shadow w-220px">
+    <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
     <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
   </ul>
 </div>
 
 <div class="b-example-divider"></div>
 
-
-<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownFilter">
-  <div class="dropdown-menu pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;">
+<div class="d-flex gap-5 justify-content-center">
+  <div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
     <form class="p-2 mb-2 bg-light border-bottom">
       <input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
     </form>
@@ -125,7 +124,7 @@ body_class: ""
     </ul>
   </div>
 
-  <div class="dropdown-menu dropdown-menu-dark border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;">
+  <div class="dropdown-menu dropdown-menu-dark d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
     <form class="p-2 mb-2 bg-dark border-bottom border-dark">
       <input type="search" class="form-control form-control-dark" autocomplete="false" placeholder="Type to filter...">
     </form>
@@ -152,8 +151,8 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownIcons">
-  <ul class="dropdown-menu mx-0 shadow" style="width: 220px;">
+<div class="d-flex gap-5 justify-content-center">
+  <ul class="dropdown-menu d-block position-static mx-0 shadow w-220px">
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
         <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
@@ -192,7 +191,7 @@ body_class: ""
       </a>
     </li>
   </ul>
-  <ul class="dropdown-menu dropdown-menu-dark mx-0 border-0 shadow" style="width: 220px;">
+  <ul class="dropdown-menu dropdown-menu-dark d-block position-static mx-0 border-0 shadow w-220px">
     <li>
       <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
         <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
@@ -235,7 +234,7 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="dropdown-menu p-2 shadow rounded-3" style="width: 340px" id="dropdownCalendar">
+<div class="dropdown-menu d-block position-static p-2 shadow rounded-3 w-340px">
   <div class="d-grid gap-1">
     <div class="cal">
       <div class="cal-month">
@@ -316,16 +315,16 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="dropdown-menu d-flex align-items-stretch p-3 rounded-3 shadow-lg dropdown" style="width: 600px" id="dropdownMega">
+<div class="dropdown-menu position-static d-flex align-items-stretch p-3 rounded-3 shadow-lg w-600px">
   <nav class="d-grid gap-2 col-8">
-    <a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm">
+    <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
       <svg class="bi" width="32" height="32"><use xlink:href="#image-fill"/></svg>
       <div>
         <strong class="d-block">Features</strong>
         <small>Take a tour through the product</small>
       </div>
     </a>
-    <a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm">
+    <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
       <svg class="bi" width="32" height="32"><use xlink:href="#question-circle"/></svg>
       <div>
         <strong class="d-block">Support</strong>

site/content/docs/5.1/examples/features/features.css

@@ -1,19 +1,8 @@
 .feature-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   width: 4rem;
   height: 4rem;
-  margin-bottom: 1rem;
-  font-size: 2rem;
-  color: #fff;
-  border-radius: .75rem;
 }
 
-.icon-link {
-  display: inline-flex;
-  align-items: center;
-}
 .icon-link > .bi {
   margin-top: .125rem;
   margin-left: .125rem;
@@ -25,18 +14,10 @@
 }
 
 .icon-square {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   width: 3rem;
   height: 3rem;
-  font-size: 1.5rem;
-  border-radius: .75rem;
 }
 
-.rounded-4 { border-radius: .5rem; }
-.rounded-5 { border-radius: 1rem; }
-
 .text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
 .text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
 .text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }

site/content/docs/5.1/examples/features/index.html

@@ -71,34 +71,34 @@ body_class: ""
     <h2 class="pb-2 border-bottom">Columns with icons</h2>
     <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
       <div class="feature col">
-        <div class="feature-icon bg-primary bg-gradient">
+        <div class="feature-icon d-inline-flex align-items-center justify-content-center bg-primary bg-gradient rounded-5 text-white fs-2 mb-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
         </div>
         <h2>Featured title</h2>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
-        <a href="#" class="icon-link">
+        <a href="#" class="icon-link d-inline-flex align-items-center">
           Call to action
           <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
         </a>
       </div>
       <div class="feature col">
-        <div class="feature-icon bg-primary bg-gradient">
+        <div class="feature-icon d-inline-flex align-items-center justify-content-center bg-primary bg-gradient rounded-5 text-white fs-2 mb-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
         </div>
         <h2>Featured title</h2>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
-        <a href="#" class="icon-link">
+        <a href="#" class="icon-link d-inline-flex align-items-center">
           Call to action
           <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
         </a>
       </div>
       <div class="feature col">
-        <div class="feature-icon bg-primary bg-gradient">
+        <div class="feature-icon d-inline-flex align-items-center justify-content-center bg-primary bg-gradient rounded-5 text-white fs-2 mb-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
         </div>
         <h2>Featured title</h2>
         <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
-        <a href="#" class="icon-link">
+        <a href="#" class="icon-link d-inline-flex align-items-center">
           Call to action
           <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
         </a>
@@ -112,7 +112,7 @@ body_class: ""
     <h2 class="pb-2 border-bottom">Hanging icons</h2>
     <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
       <div class="col d-flex align-items-start">
-        <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
+        <div class="icon-square bg-light text-dark d-inline-flex align-items-center justify-content-center fs-4 rounded-5 flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
         </div>
         <div>
@@ -124,7 +124,7 @@ body_class: ""
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
+        <div class="icon-square bg-light text-dark d-inline-flex align-items-center justify-content-center fs-4 rounded-5 flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
         </div>
         <div>
@@ -136,7 +136,7 @@ body_class: ""
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
+        <div class="icon-square bg-light text-dark d-inline-flex align-items-center justify-content-center fs-4 rounded-5 flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
         </div>
         <div>
@@ -157,7 +157,7 @@ body_class: ""
 
     <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
       <div class="col">
-        <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
+        <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-6 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
           <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
             <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2>
             <ul class="d-flex list-unstyled mt-auto">
@@ -178,7 +178,7 @@ body_class: ""
       </div>
 
       <div class="col">
-        <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
+        <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-6 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
           <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
             <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2>
             <ul class="d-flex list-unstyled mt-auto">
@@ -199,7 +199,7 @@ body_class: ""
       </div>
 
       <div class="col">
-        <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');">
+        <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-6 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');">
           <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
             <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2>
             <ul class="d-flex list-unstyled mt-auto">

site/content/docs/5.1/examples/headers/headers.css

@@ -1,11 +1,7 @@
 .form-control-dark {
-  color: #fff;
-  background-color: var(--bs-dark);
   border-color: var(--bs-gray);
 }
 .form-control-dark:focus {
-  color: #fff;
-  background-color: var(--bs-dark);
   border-color: #fff;
   box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
 }

site/content/docs/5.1/examples/headers/index.html

@@ -105,7 +105,7 @@ body_class: ""
         </ul>
 
         <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
-          <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
+          <input type="search" class="form-control form-control-dark text-white bg-dark" placeholder="Search..." aria-label="Search">
         </form>
 
         <div class="text-end">

site/content/docs/5.1/examples/list-groups/index.html

@@ -27,7 +27,7 @@ body_class: ""
   </symbol>
 </svg>
 
-<div class="list-group">
+<div class="list-group w-auto">
   <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
     <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
     <div class="d-flex gap-2 w-100 justify-content-between">
@@ -63,7 +63,7 @@ body_class: ""
 <div class="b-example-divider"></div>
 
 <div class="d-flex gap-5 justify-content-center">
-  <div class="list-group mx-0">
+  <div class="list-group mx-0 w-auto">
     <label class="list-group-item d-flex gap-2">
       <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked>
       <span>
@@ -87,7 +87,7 @@ body_class: ""
     </label>
   </div>
 
-  <div class="list-group mx-0">
+  <div class="list-group mx-0 w-auto">
     <label class="list-group-item d-flex gap-2">
       <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked>
       <span>
@@ -114,7 +114,7 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="list-group">
+<div class="list-group w-auto">
   <label class="list-group-item d-flex gap-3">
     <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;">
     <span class="pt-1 form-checked-content">
@@ -146,7 +146,7 @@ body_class: ""
     </span>
   </label>
   <label class="list-group-item d-flex gap-3 bg-light">
-    <input class="form-check-input form-check-input-placeholder bg-light flex-shrink-0" disabled type="checkbox" value="" style="font-size: 1.375em;">
+    <input class="form-check-input form-check-input-placeholder bg-light flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;">
     <span class="pt-1 form-checked-content">
       <span contenteditable="true" class="w-100">Add new task...</span>
       <small class="d-block text-muted">
@@ -159,27 +159,27 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="list-group list-group-checkable">
-  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked>
-  <label class="list-group-item py-3" for="listGroupCheckableRadios1">
+<div class="list-group list-group-checkable d-grid gap-2 border-0 w-auto">
+  <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked>
+  <label class="list-group-item rounded-4 py-3" for="listGroupCheckableRadios1">
     First radio
     <span class="d-block small opacity-50">With support text underneath to add more detail</span>
   </label>
 
-  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
-  <label class="list-group-item py-3" for="listGroupCheckableRadios2">
+  <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
+  <label class="list-group-item rounded-4 py-3" for="listGroupCheckableRadios2">
     Second radio
     <span class="d-block small opacity-50">Some other text goes here</span>
   </label>
 
-  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
-  <label class="list-group-item py-3" for="listGroupCheckableRadios3">
+  <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
+  <label class="list-group-item rounded-4 py-3" for="listGroupCheckableRadios3">
     Third radio
     <span class="d-block small opacity-50">And we end with another snippet of text</span>
   </label>
 
-  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
-  <label class="list-group-item py-3" for="listGroupCheckableRadios4">
+  <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
+  <label class="list-group-item rounded-4 py-3" for="listGroupCheckableRadios4">
     Fourth disabled radio
     <span class="d-block small opacity-50">This option is disabled</span>
   </label>

site/content/docs/5.1/examples/list-groups/list-groups.css

@@ -1,8 +1,4 @@
-.opacity-50 { opacity: .5; }
-.opacity-75 { opacity: .75; }
-
 .list-group {
-  width: auto;
   max-width: 460px;
   margin: 4rem auto;
 }
@@ -12,26 +8,18 @@
 }
 
 .form-check-input-placeholder {
-  pointer-events: none;
   border-style: dashed;
 }
 [contenteditable]:focus {
   outline: 0;
 }
 
-.list-group-checkable {
-  display: grid;
-  gap: .5rem;
-  border: 0;
-}
 .list-group-checkable .list-group-item {
   cursor: pointer;
-  border-radius: .5rem;
 }
 .list-group-item-check {
   position: absolute;
   clip: rect(0, 0, 0, 0);
-  pointer-events: none;
 }
 .list-group-item-check:hover + .list-group-item {
   background-color: var(--bs-light);

site/content/docs/5.1/examples/modals/modals.css

@@ -1,7 +1,3 @@
-.rounded-4 { border-radius: .5rem; }
-.rounded-5 { border-radius: .75rem; }
-.rounded-6 { border-radius: 1rem; }
-
 .modal-sheet .modal-dialog {
   width: 380px;
   transition: bottom .75s ease-in-out;

site/content/docs/5.1/examples/offcanvas-navbar/index.html

@@ -48,7 +48,7 @@ aliases: "/docs/5.1/examples/offcanvas/"
 </nav>
 
 <div class="nav-scroller bg-body shadow-sm">
-  <nav class="nav nav-underline" aria-label="Secondary navigation">
+  <nav class="nav" aria-label="Secondary navigation">
     <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
     <a class="nav-link" href="#">
       Friends

site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.css

@@ -27,37 +27,22 @@ body {
   }
 }
 
-.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;
   color: rgba(255, 255, 255, .75);
-  text-align: center;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
 }
 
-.nav-underline .nav-link {
+.nav-scroller .nav-link {
   padding-top: .75rem;
   padding-bottom: .75rem;
   font-size: .875rem;
   color: #6c757d;
 }
 
-.nav-underline .nav-link:hover {
+.nav-scroller .nav-link:hover {
   color: #007bff;
 }
 
-.nav-underline .active {
+.nav-scroller .active {
   font-weight: 500;
   color: #343a40;
 }

site/content/docs/5.1/examples/sidebars/index.html

@@ -67,7 +67,7 @@ body_class: ""
   </symbol>
 </svg>
 
-<main>
+<main class="d-flex flex-nowrap">
   <h1 class="visually-hidden">Sidebars examples</h1>
 
   <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">
@@ -189,27 +189,27 @@ body_class: ""
     </a>
     <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
       <li class="nav-item">
-        <a href="#" class="nav-link active py-3 border-bottom" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
+        <a href="#" class="nav-link active py-3 border-bottom rounded-0" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
           <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg>
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link py-3 border-bottom" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right">
+        <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right">
           <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Dashboard"><use xlink:href="#speedometer2"/></svg>
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link py-3 border-bottom" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
+        <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
           <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Orders"><use xlink:href="#table"/></svg>
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link py-3 border-bottom" title="Products" data-bs-toggle="tooltip" data-bs-placement="right">
+        <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Products" data-bs-toggle="tooltip" data-bs-placement="right">
           <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Products"><use xlink:href="#grid"/></svg>
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link py-3 border-bottom" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right">
+        <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right">
           <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Customers"><use xlink:href="#people-circle"/></svg>
         </a>
       </li>
@@ -237,54 +237,54 @@ body_class: ""
     </a>
     <ul class="list-unstyled ps-0">
       <li class="mb-1">
-        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
+        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
           Home
         </button>
         <div class="collapse show" id="home-collapse">
           <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li><a href="#" class="link-dark rounded">Overview</a></li>
-            <li><a href="#" class="link-dark rounded">Updates</a></li>
-            <li><a href="#" class="link-dark rounded">Reports</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Overview</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Updates</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Reports</a></li>
           </ul>
         </div>
       </li>
       <li class="mb-1">
-        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
+        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
           Dashboard
         </button>
         <div class="collapse" id="dashboard-collapse">
           <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li><a href="#" class="link-dark rounded">Overview</a></li>
-            <li><a href="#" class="link-dark rounded">Weekly</a></li>
-            <li><a href="#" class="link-dark rounded">Monthly</a></li>
-            <li><a href="#" class="link-dark rounded">Annually</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Overview</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Weekly</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Monthly</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Annually</a></li>
           </ul>
         </div>
       </li>
       <li class="mb-1">
-        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
+        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
           Orders
         </button>
         <div class="collapse" id="orders-collapse">
           <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li><a href="#" class="link-dark rounded">New</a></li>
-            <li><a href="#" class="link-dark rounded">Processed</a></li>
-            <li><a href="#" class="link-dark rounded">Shipped</a></li>
-            <li><a href="#" class="link-dark rounded">Returned</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">New</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Processed</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Shipped</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Returned</a></li>
           </ul>
         </div>
       </li>
       <li class="border-top my-3"></li>
       <li class="mb-1">
-        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
+        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
           Account
         </button>
         <div class="collapse" id="account-collapse">
           <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li><a href="#" class="link-dark rounded">New...</a></li>
-            <li><a href="#" class="link-dark rounded">Profile</a></li>
-            <li><a href="#" class="link-dark rounded">Settings</a></li>
-            <li><a href="#" class="link-dark rounded">Sign out</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">New...</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Profile</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Settings</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Sign out</a></li>
           </ul>
         </div>
       </li>
@@ -299,21 +299,21 @@ body_class: ""
       <span class="fs-5 fw-semibold">List group</span>
     </a>
     <div class="list-group list-group-flush border-bottom scrollarea">
-      <a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
+      <a href="#" class="list-group-item list-group-item-action active py-3 lh-sm" aria-current="true">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
           <small>Wed</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
           <small class="text-muted">Tues</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
           <small class="text-muted">Mon</small>
@@ -321,63 +321,63 @@ body_class: ""
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
 
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
           <small class="text-muted">Wed</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
           <small class="text-muted">Tues</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
           <small class="text-muted">Mon</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
           <small class="text-muted">Wed</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
           <small class="text-muted">Tues</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
           <small class="text-muted">Mon</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
           <small class="text-muted">Wed</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
           <small class="text-muted">Tues</small>
         </div>
         <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
       </a>
-      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <div class="d-flex w-100 align-items-center justify-content-between">
           <strong class="mb-1">List group item heading</strong>
           <small class="text-muted">Mon</small>

site/content/docs/5.1/examples/sidebars/sidebars.css

@@ -8,8 +8,6 @@ html {
 }
 
 main {
-  display: flex;
-  flex-wrap: nowrap;
   height: 100vh;
   height: -webkit-fill-available;
   max-height: 100vh;
@@ -19,18 +17,11 @@ main {
 
 .dropdown-toggle { outline: 0; }
 
-.nav-flush .nav-link {
-  border-radius: 0;
-}
-
 .btn-toggle {
-  display: inline-flex;
-  align-items: center;
   padding: .25rem .5rem;
   font-weight: 600;
   color: rgba(0, 0, 0, .65);
   background-color: transparent;
-  border: 0;
 }
 .btn-toggle:hover,
 .btn-toggle:focus {
@@ -54,11 +45,9 @@ main {
 }
 
 .btn-toggle-nav a {
-  display: inline-flex;
   padding: .1875rem .5rem;
   margin-top: .125rem;
   margin-left: 1.25rem;
-  text-decoration: none;
 }
 .btn-toggle-nav a:hover,
 .btn-toggle-nav a:focus {
@@ -70,4 +59,3 @@ main {
 }
 
 .fw-semibold { font-weight: 600; }
-.lh-tight { line-height: 1.25; }

site/content/docs/5.1/examples/sign-in/index.html

@@ -7,7 +7,7 @@ body_class: "text-center"
 include_js: false
 ---
 
-<main class="form-signin">
+<main class="form-signin w-100 m-auto">
   <form>
     <img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
     <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

site/content/docs/5.1/examples/sign-in/signin.css

@@ -12,14 +12,8 @@ body {
 }
 
 .form-signin {
-  width: 100%;
   max-width: 330px;
   padding: 15px;
-  margin: auto;
-}
-
-.form-signin .checkbox {
-  font-weight: 400;
 }
 
 .form-signin .form-floating:focus-within {

site/content/docs/5.1/examples/starter-template/index.html

@@ -27,20 +27,20 @@ extra_css:
       <div class="col-md-6">
         <h2>Starter projects</h2>
         <p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p>
-        <ul class="icon-list">
-          <li><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li>
-          <li class="text-muted">Bootstrap Parcel starter (coming soon!)</li>
+        <ul class="icon-list ps-0">
+          <li class="d-flex align-items-start mb-1"><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li>
+          <li class="text-muted d-flex align-items-start mb-1">Bootstrap Parcel starter (coming soon!)</li>
         </ul>
       </div>
 
       <div class="col-md-6">
         <h2>Guides</h2>
         <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
-        <ul class="icon-list">
-          <li><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li>
-          <li><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li>
-          <li><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li>
-          <li><a href="{{< docsref "/getting-started/contribute" >}}">Contributing to Bootstrap</a></li>
+        <ul class="icon-list ps-0">
+          <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li>
+          <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li>
+          <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li>
+          <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/contribute" >}}">Contributing to Bootstrap</a></li>
         </ul>
       </div>
     </div>

site/content/docs/5.1/examples/starter-template/starter-template.css

@@ -1,12 +1,3 @@
-.icon-list {
-  padding-left: 0;
-  list-style: none;
-}
-.icon-list li {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: .25rem;
-}
 .icon-list li::before {
   display: block;
   flex-shrink: 0;

site/content/docs/5.1/migration.md

@@ -181,7 +181,7 @@ Your custom Bootstrap CSS builds should now look something like this with a sepa
 
 - <span class="badge bg-danger">Breaking</span> Dropped `.text-justify` class. [See #29793](https://github.com/twbs/bootstrap/pull/29793)
 
-- <span class="badge bg-danger">Breaking</span> `<hr>` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `<hr class="py-1">`).
+- <span class="badge bg-danger">Breaking</span> ~~`<hr>` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `<hr class="py-1">`).~~
 
 - Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
 

site/layouts/_default/_markup/render-heading.html

@@ -0,0 +1,5 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}
+{{- if and (ge .Level .Page.Site.Params.anchors.min) (le .Level .Page.Site.Params.anchors.max) }}{{" " -}}
+<a class="anchor-link" href="#{{ .Anchor | safeURL }}" aria-label="Link to this section: {{ .Text | safeHTML }}"></a>
+{{- end -}}
+</h{{ .Level }}>

site/layouts/_default/examples.html

@@ -50,6 +50,28 @@
         vertical-align: -.125em;
         fill: currentColor;
       }
+
+      .rounded-4 { border-radius: .5rem; }
+      .rounded-5 { border-radius: .75rem; }
+      .rounded-6 { border-radius: 1rem; }
+
+      .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;
+      }
     </style>
 
     {{ range .Page.Params.extra_css }}