tweak bundlewatch.config

Add dispose and toggler
Initial approach on generic triggering
2022-02-17 02:04:18 +02:00 · 2022-02-17 02:04:18 +02:00 · 2022-02-16 22:35:33 +02:00
89 changed files with 1293 additions and 935 deletions
@@ -38,7 +38,7 @@
    },
    {
      "path": "./dist/js/bootstrap.bundle.min.js",
-      "maxSize": "22.75 kB"
+      "maxSize": "23 kB"
    },
    {
      "path": "./dist/js/bootstrap.esm.js",
@@ -1,19 +0,0 @@
-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.
@@ -1,19 +0,0 @@
-name: Issue Labeled
-
-on:
-  issues:
-    types: [labeled]
-
-jobs:
-  issue-labeled:
-    if: github.repository == 'twbs/bootstrap'
-    runs-on: ubuntu-latest
-    steps:
-      - name: awaiting reply
-        if: github.event.label.name == 'awaiting-reply'
-        uses: actions-cool/issues-helper@v3
-        with:
-          actions: "create-comment"
-          token: ${{ secrets.GITHUB_TOKEN }}
-          body: |
-            Hello @${{ github.event.issue.user.login }}. Bug reports must include a **live demo** of the issue. Per our [contributing guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md), please create a reduced test case on [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/) and report back with your link, Bootstrap version, and specific browser and Operating System details.
@@ -79,58 +79,57 @@ 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/).
@@ -83,7 +83,3 @@ 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
@@ -5,6 +5,8 @@
 * --------------------------------------------------------------------------
 */

+import { enableMagicActions } from './src/dom/magic-actions'
+
 export { default as Alert } from './src/alert'
 export { default as Button } from './src/button'
 export { default as Carousel } from './src/carousel'
@@ -16,4 +18,7 @@ export { default as Popover } from './src/popover'
 export { default as ScrollSpy } from './src/scrollspy'
 export { default as Tab } from './src/tab'
 export { default as Toast } from './src/toast'
+export { default as Toggler } from './src/toggler'
 export { default as Tooltip } from './src/tooltip'
+
+enableMagicActions()
@@ -16,7 +16,9 @@ import Popover from './src/popover'
 import ScrollSpy from './src/scrollspy'
 import Tab from './src/tab'
 import Toast from './src/toast'
+import Toggler from './src/toggler'
 import Tooltip from './src/tooltip'
+import { enableMagicActions } from './src/dom/magic-actions'

 export default {
  Alert,
@@ -30,5 +32,8 @@ export default {
  ScrollSpy,
  Tab,
  Toast,
+  Toggler,
  Tooltip
 }
+
+enableMagicActions()
@@ -8,7 +8,7 @@
 import { defineJQueryPlugin } from './util/index'
 import EventHandler from './dom/event-handler'
 import BaseComponent from './base-component'
-import { enableDismissTrigger } from './util/component-functions'
+import { enableDismissTrigger } from './dom/magic-actions'

 /**
 * Constants
@@ -76,10 +76,6 @@ class BaseComponent extends Config {
  static get EVENT_KEY() {
    return `.${this.DATA_KEY}`
  }
-
-  static eventName(name) {
-    return `${name}${this.EVENT_KEY}`
-  }
 }

 export default BaseComponent
@@ -279,8 +279,9 @@ class Carousel extends BaseComponent {
    return getNextActiveElement(this._items, activeElement, isNext, this._config.wrap)
  }

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

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

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

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

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

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

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

-    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
-
+    const triggerSlidEvent = () => {
      EventHandler.trigger(this._element, EVENT_SLID, {
        relatedTarget: nextElement,
        direction: eventDirectionName,
@@ -385,17 +372,39 @@ class Carousel extends BaseComponent {
      })
    }

-    this._queueCallback(completeCallBack, activeElement, this._isAnimated())
+    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()
+    }

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

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

    const config = {
+      ...Manipulator.getDataAttributes(target),
      ...Manipulator.getDataAttributes(this)
    }
    const slideIndex = this.getAttribute('data-bs-slide-to')
@@ -501,7 +511,7 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
  const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE)

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

@@ -0,0 +1,69 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.1.3): dispose.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import { defineJQueryPlugin } from './util/index'
+import EventHandler from './dom/event-handler'
+import BaseComponent from './base-component'
+import { enableDismissTrigger } from './dom/magic-actions'
+
+/**
+ * Constants
+ */
+
+const NAME = 'dispose'
+const DATA_KEY = 'bs.dispose'
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_DISPOSE = `dispose${EVENT_KEY}`
+const EVENT_DISPOSED = `disposed${EVENT_KEY}`
+const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_SHOW = 'show'
+
+/**
+ * Class definition
+ */
+
+class Dispose extends BaseComponent {
+  // Getters
+  static get NAME() {
+    return NAME
+  }
+
+  // Private
+  dispose() {
+    const closeEvent = EventHandler.trigger(this._element, EVENT_DISPOSE)
+
+    if (closeEvent.defaultPrevented) {
+      return
+    }
+
+    this._element.classList.remove(CLASS_NAME_SHOW)
+
+    const isAnimated = this._element.classList.contains(CLASS_NAME_FADE)
+    const completeCallback = () => {
+      this._element.remove()
+      EventHandler.trigger(this._element, EVENT_DISPOSED)
+    }
+
+    this._queueCallback(completeCallback, this._element, isAnimated)
+    super.dispose()
+  }
+}
+
+/**
+ * Data API implementation
+ */
+
+enableDismissTrigger(Dispose, 'dispose')
+
+/**
+ * jQuery
+ */
+
+defineJQueryPlugin(Dispose)
+
+export default Dispose
@@ -0,0 +1,96 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.1.3): util/component-functions.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import EventHandler from './event-handler'
+import { getElementFromSelector, isDisabled } from '../util/index'
+
+const parseAction = action => {
+  const split = action.split(':')
+  const pluginName = split[1]
+  return {
+    onEvent: split[0],
+    pluginName: pluginName.charAt(0).toUpperCase() + pluginName.slice(1),
+    method: split[2]
+  }
+}
+
+const supportedEvents = [
+  'keyup',
+  'keydown',
+  'mousedown',
+  'mouseup',
+  'click',
+  'mouseenter',
+  'mouseleave',
+  'click',
+  'focus'
+]
+
+const enableMagicActions = () => {
+  for (const eventName of supportedEvents) {
+    enableMagicActionForEvent(eventName)
+  }
+}
+
+const enableMagicActionForEvent = onEvent => {
+  eventAction(onEvent, `[data-bs-act^="${onEvent}:"]`, data => {
+    const action = parseAction(data.event.target.getAttribute('data-bs-act'))
+
+    const plugin = window.bootstrap[action.pluginName] || null
+    if (!plugin) {
+      throw new TypeError(`You are trying to use plugin "${action.pluginName}", which it doesn't exist in our library`)
+    }
+
+    const instance = plugin.getOrCreateInstance(data.target)
+    instance[action.method]()
+  })
+}
+
+const eventActionOnPlugin = (Plugin, onEvent, stringSelector, method, callback = null) => {
+  eventAction(`${onEvent}.${Plugin.NAME}`, stringSelector, data => {
+    const instance = Plugin.getOrCreateInstance(data.target)
+    if (typeof callback === 'function') {
+      callback({ ...data, instance })
+    }
+
+    instance[method]()
+  })
+}
+
+const eventAction = (onEvent, stringSelector, callback) => {
+  EventHandler.on(document, onEvent, stringSelector, event => {
+    const eventTarget = event.target
+
+    if (['A', 'AREA'].includes(eventTarget.tagName)) {
+      event.preventDefault()
+    }
+
+    if (isDisabled(eventTarget)) {
+      return
+    }
+
+    const target = getElementFromSelector(eventTarget) || eventTarget
+    callback({ target, event })
+  })
+}
+
+const enableDismissTrigger = (component, method = 'hide') => {
+  const name = component.NAME
+  eventAction(`click.${name}`, `[data-bs-dismiss="${name}"]`, event => {
+    const target = getElementFromSelector(event.target) || event.target.closest(`.${name}`)
+    const instance = component.getOrCreateInstance(target)
+
+    // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method
+    instance[method]()
+  })
+}
+
+export {
+  enableDismissTrigger,
+  enableMagicActions,
+  eventActionOnPlugin
+}
@@ -49,8 +49,7 @@ const CLASS_NAME_DROPUP = 'dropup'
 const CLASS_NAME_DROPEND = 'dropend'
 const CLASS_NAME_DROPSTART = 'dropstart'

-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_DATA_TOGGLE = '[data-bs-toggle="dropdown"]'
 const SELECTOR_MENU = '.dropdown-menu'
 const SELECTOR_NAVBAR = '.navbar'
 const SELECTOR_NAVBAR_NAV = '.navbar-nav'
@@ -342,14 +341,18 @@ class Dropdown extends BaseComponent {
      return
    }

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

-    for (const toggle of openToggles) {
+    for (const toggle of toggles) {
      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 (
@@ -407,6 +410,10 @@ 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)

@@ -5,14 +5,14 @@
 * --------------------------------------------------------------------------
 */

-import { defineJQueryPlugin, getElementFromSelector, isRTL, isVisible, reflow } from './util/index'
+import { defineJQueryPlugin, isRTL, isVisible, reflow } from './util/index'
 import EventHandler from './dom/event-handler'
 import SelectorEngine from './dom/selector-engine'
 import ScrollBarHelper from './util/scrollbar'
 import BaseComponent from './base-component'
 import Backdrop from './util/backdrop'
 import FocusTrap from './util/focustrap'
-import { enableDismissTrigger } from './util/component-functions'
+import { enableDismissTrigger, eventActionOnPlugin } from './dom/magic-actions'

 /**
 * Constants
@@ -21,7 +21,6 @@ import { enableDismissTrigger } from './util/component-functions'
 const NAME = 'modal'
 const DATA_KEY = 'bs.modal'
 const EVENT_KEY = `.${DATA_KEY}`
-const DATA_API_KEY = '.data-api'
 const ESCAPE_KEY = 'Escape'

 const EVENT_HIDE = `hide${EVENT_KEY}`
@@ -31,7 +30,6 @@ const EVENT_SHOW = `show${EVENT_KEY}`
 const EVENT_SHOWN = `shown${EVENT_KEY}`
 const EVENT_RESIZE = `resize${EVENT_KEY}`
 const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
-const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`

 const CLASS_NAME_OPEN = 'modal-open'
 const CLASS_NAME_FADE = 'fade'
@@ -341,35 +339,24 @@ class Modal extends BaseComponent {
 * Data API implementation
 */

-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
-  const target = getElementFromSelector(this)
-
-  if (['A', 'AREA'].includes(this.tagName)) {
-    event.preventDefault()
-  }
-
-  EventHandler.one(target, EVENT_SHOW, showEvent => {
+eventActionOnPlugin(Modal, 'click', SELECTOR_DATA_TOGGLE, 'toggle', data => {
+  EventHandler.one(data.target, EVENT_SHOW, showEvent => {
    if (showEvent.defaultPrevented) {
      // only register focus restorer if modal will actually get shown
      return
    }

-    EventHandler.one(target, EVENT_HIDDEN, () => {
-      if (isVisible(this)) {
-        this.focus()
+    EventHandler.one(data.target, EVENT_HIDDEN, () => {
+      if (isVisible(data.event.target)) {
+        data.event.target.focus()
      }
    })
  })
-
-  // avoid conflict when clicking modal toggler while another one is open
+  // avoid conflict when clicking a toggler of an offcanvas, while another is open
  const alreadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)
-  if (alreadyOpen) {
+  if (alreadyOpen && alreadyOpen !== data.target) {
    Modal.getInstance(alreadyOpen).hide()
  }
-
-  const data = Modal.getOrCreateInstance(target)
-
-  data.toggle(this)
 })

 enableDismissTrigger(Modal)
@@ -7,8 +7,6 @@

 import {
  defineJQueryPlugin,
-  getElementFromSelector,
-  isDisabled,
  isVisible
 } from './util/index'
 import ScrollBarHelper from './util/scrollbar'
@@ -17,7 +15,7 @@ import BaseComponent from './base-component'
 import SelectorEngine from './dom/selector-engine'
 import Backdrop from './util/backdrop'
 import FocusTrap from './util/focustrap'
-import { enableDismissTrigger } from './util/component-functions'
+import { enableDismissTrigger, eventActionOnPlugin } from './dom/magic-actions'

 /**
 * Constants
@@ -40,7 +38,6 @@ const EVENT_SHOW = `show${EVENT_KEY}`
 const EVENT_SHOWN = `shown${EVENT_KEY}`
 const EVENT_HIDE = `hide${EVENT_KEY}`
 const EVENT_HIDDEN = `hidden${EVENT_KEY}`
-const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`

 const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="offcanvas"]'
@@ -209,32 +206,19 @@ class Offcanvas extends BaseComponent {
 * Data API implementation
 */

-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
-  const target = getElementFromSelector(this)
-
-  if (['A', 'AREA'].includes(this.tagName)) {
-    event.preventDefault()
-  }
-
-  if (isDisabled(this)) {
-    return
-  }
-
-  EventHandler.one(target, EVENT_HIDDEN, () => {
+eventActionOnPlugin(Offcanvas, 'click', SELECTOR_DATA_TOGGLE, 'toggle', data => {
+  EventHandler.one(data.target, EVENT_HIDDEN, () => {
    // focus on trigger when it is closed
-    if (isVisible(this)) {
-      this.focus()
+    if (isVisible(data.event.target)) {
+      data.event.target.focus()
    }
  })

  // avoid conflict when clicking a toggler of an offcanvas, while another is open
  const alreadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)
-  if (alreadyOpen && alreadyOpen !== target) {
+  if (alreadyOpen && alreadyOpen !== data.target) {
    Offcanvas.getInstance(alreadyOpen).hide()
  }
-
-  const data = Offcanvas.getOrCreateInstance(target)
-  data.toggle(this)
 })

 EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
@@ -13,6 +13,8 @@ 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'
@@ -35,6 +37,19 @@ 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
 */
@@ -53,6 +68,10 @@ class Popover extends Tooltip {
    return NAME
  }

+  static get Event() {
+    return Event
+  }
+
  // Overrides
  _isWithContent() {
    return this._getTitle() || this._getContent()
@@ -8,7 +8,7 @@
 import { defineJQueryPlugin, reflow } from './util/index'
 import EventHandler from './dom/event-handler'
 import BaseComponent from './base-component'
-import { enableDismissTrigger } from './util/component-functions'
+import { enableDismissTrigger } from './dom/magic-actions'

 /**
 * Constants
@@ -0,0 +1,105 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.1.3): toggle.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import { defineJQueryPlugin, getElement } from './util/index'
+import EventHandler from './dom/event-handler'
+import BaseComponent from './base-component'
+import { eventActionOnPlugin } from './dom/magic-actions'
+
+/**
+ * Constants
+ */
+
+const NAME = 'toggler'
+const DATA_KEY = 'bs.toggle'
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_TOGGLE = `toggle${EVENT_KEY}`
+const EVENT_TOGGLED = `toggled${EVENT_KEY}`
+
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="toggler"]'
+/**
+ * Class definition
+ */
+
+const DefaultType = {
+  attribute: 'string',
+  target: 'element',
+  value: 'string'
+}
+
+const Default = {
+  attribute: 'class',
+  target: null,
+  value: null
+}
+
+class Toggler extends BaseComponent {
+  // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  _configAfterMerge(config) {
+    config.target = getElement(config.target) || this._element
+    return config
+  }
+
+  // Private
+  toggle() {
+    const toggleEvent = EventHandler.trigger(this._element, EVENT_TOGGLE)
+
+    if (toggleEvent.defaultPrevented) {
+      return
+    }
+
+    this._execute()
+
+    EventHandler.trigger(this._element, EVENT_TOGGLED)
+  }
+
+  _execute() {
+    const { attribute, target, value } = this._config
+
+    if (attribute === 'id') {
+      return // You have to be kidding
+    }
+
+    if (attribute === 'class') {
+      target.classList.toggle(value)
+      return
+    }
+
+    if (target.getAttribute(attribute) === value) {
+      target.removeAttribute(attribute)
+      return
+    }
+
+    target.setAttribute(attribute, value)
+  }
+}
+
+/**
+ * Data API implementation
+ */
+eventActionOnPlugin(Toggler, 'click', SELECTOR_DATA_TOGGLE, 'toggle')
+
+/**
+ * jQuery
+ */
+
+defineJQueryPlugin(Toggler)
+
+export default Toggler
@@ -6,7 +6,14 @@
 */

 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'
@@ -18,6 +25,8 @@ 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'
@@ -34,17 +43,6 @@ 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',
@@ -96,6 +94,19 @@ 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
 */
@@ -135,6 +146,10 @@ class Tooltip extends BaseComponent {
    return NAME
  }

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

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

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

    if (this._popper) {
@@ -240,7 +255,7 @@ class Tooltip extends BaseComponent {
      const previousHoverState = this._isHovered

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

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

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

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

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

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

        EventHandler.on(this._element, eventIn, this._config.selector, event => {
          const context = this._initializeOnDelegatedTarget(event)
@@ -1,34 +0,0 @@
-/**
- * --------------------------------------------------------------------------
- * Bootstrap (v5.1.3): util/component-functions.js
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- * --------------------------------------------------------------------------
- */
-
-import EventHandler from '../dom/event-handler'
-import { getElementFromSelector, isDisabled } from './index'
-
-const enableDismissTrigger = (component, method = 'hide') => {
-  const clickEvent = `click.dismiss${component.EVENT_KEY}`
-  const name = component.NAME
-
-  EventHandler.on(document, clickEvent, `[data-bs-dismiss="${name}"]`, function (event) {
-    if (['A', 'AREA'].includes(this.tagName)) {
-      event.preventDefault()
-    }
-
-    if (isDisabled(this)) {
-      return
-    }
-
-    const target = getElementFromSelector(this) || this.closest(`.${name}`)
-    const instance = component.getOrCreateInstance(target)
-
-    // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method
-    instance[method]()
-  })
-}
-
-export {
-  enableDismissTrigger
-}
@@ -102,7 +102,7 @@ describe('Alert', () => {
    })

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

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

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

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

    it('should stay at the start when the prev method is called and wrap is false', () => {
-      return new Promise((resolve, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('carousel slid when it should not have slid'))
+          throw new Error('carousel slid when it should not have slid')
        })

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

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

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

        collapseEl.addEventListener('shown.bs.collapse', () => {
-          reject(new Error('should not fire shown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        fixtureEl.innerHTML = '<div class="collapse show"></div>'

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

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

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

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

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

        EventHandler.one(div, 'foobar', handler)
@@ -513,7 +513,7 @@ describe('Dropdown', () => {
    })

    it('should not toggle a dropdown if the element is disabled', () => {
-      return new Promise((resolve, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not throw shown.bs.dropdown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not throw shown.bs.dropdown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not throw shown.bs.dropdown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not throw shown.bs.dropdown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not throw shown.bs.dropdown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not throw shown.bs.dropdown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not throw shown.bs.dropdown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not throw shown.bs.dropdown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not throw hidden.bs.dropdown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not throw hidden.bs.dropdown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not throw hidden.bs.dropdown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not throw hidden.bs.dropdown event'))
+          throw new Error('should not throw hidden.bs.dropdown event')
        })

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

    it('should not fire shown event when show is prevented', () => {
-      return new Promise((resolve, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('shown event triggered'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        fixtureEl.innerHTML = [
          '<div class="modal">',
          '  <div class="modal-dialog">',
@@ -484,7 +484,7 @@ describe('Modal', () => {
        })

        modalEl.addEventListener('hidden.bs.modal', () => {
-          reject(new Error('Should not hide a modal'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('Should not hide a modal'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('Should not hide a modal'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('Should not hide a modal'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not trigger hidden'))
+          throw new Error('should not trigger hidden')
        })

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

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

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

        offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
-          reject(new Error('should not fire shown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        fixtureEl.innerHTML = '<div class="offcanvas"></div>'

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

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

        offCanvas.hide()
@@ -43,6 +43,12 @@ 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')
@@ -168,7 +174,7 @@ describe('Popover', () => {

      popover.show()

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

@@ -167,7 +167,7 @@ describe('Tab', () => {
    })

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

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

        navEl.addEventListener('shown.bs.tab', () => {
-          reject(new Error('should not trigger shown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not trigger shown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not trigger hidden'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not trigger shown event'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('should not trigger shown event'))
+          throw new Error('should not trigger shown event')
        })

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

    it('should not trigger shown if show is prevented', () => {
-      return new Promise((resolve, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('shown event should not be triggered if show is prevented'))
+          throw 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, reject) => {
+      return new Promise(resolve => {
        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', () => {
-          reject(new Error('hidden event should not be triggered if hide is prevented'))
+          throw new Error('hidden event should not be triggered if hide is prevented')
        })

        toast.show()
@@ -42,6 +42,12 @@ 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')
@@ -211,7 +217,7 @@ describe('Tooltip', () => {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        tooltip.show()
@@ -1,8 +1,8 @@
 /* Test helpers */

 import { clearFixture, createEvent, getFixture } from '../../helpers/fixture'
-import { enableDismissTrigger } from '../../../src/util/component-functions'
 import BaseComponent from '../../../src/base-component'
+import { enableDismissTrigger } from '../../../src/dom/magic-actions'

 class DummyClass2 extends BaseComponent {
  static get NAME() {
@@ -19,8 +19,8 @@
      ],
      "license": "MIT",
      "devDependencies": {
-        "@babel/cli": "^7.17.6",
-        "@babel/core": "^7.17.5",
+        "@babel/cli": "^7.17.0",
+        "@babel/core": "^7.17.2",
        "@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": "^41.0.0",
+        "eslint-plugin-unicorn": "^40.1.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.7",
+        "karma-rollup-preprocessor": "^7.0.8",
        "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.68.0",
+        "rollup": "^2.67.2",
        "rollup-plugin-istanbul": "^3.0.0",
        "rtlcss": "^3.5.0",
-        "sass": "^1.49.8",
+        "sass": "^1.49.7",
        "shelljs": "^0.8.5",
        "stylelint": "14.2.0",
        "stylelint-config-twbs-bootstrap": "^3.0.1",
-        "terser": "^5.11.0",
+        "terser": "^5.10.0",
        "vnu-jar": "21.10.12"
      },
      "peerDependencies": {
@@ -70,9 +70,9 @@
      }
    },
    "node_modules/@ampproject/remapping": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
-      "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.1.tgz",
+      "integrity": "sha512-Aolwjd7HSC2PyY0fDj/wA/EimQT4HfEnFYNp5s9CQlrdhyvWTtvZ5YzrUPu6R6/1jKiUlxu8bUhkdSnKHNAHMA==",
      "dev": true,
      "dependencies": {
        "@jridgewell/trace-mapping": "^0.3.0"
@@ -82,12 +82,11 @@
      }
    },
    "node_modules/@babel/cli": {
-      "version": "7.17.6",
-      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.17.6.tgz",
-      "integrity": "sha512-l4w608nsDNlxZhiJ5tE3DbNmr61fIKMZ6fTBo171VEFuFMIYuJ3mHRhTLEkKKyvx2Mizkkv/0a8OJOnZqkKYNA==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.17.0.tgz",
+      "integrity": "sha512-es10YH/ejXbg551vtnmEzIPe3MQRNOS644o3pf8vUr1tIeNzVNlP8BBvs1Eh7roh5A+k2fEHUas+ZptOWHA1fQ==",
      "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",
@@ -133,20 +132,20 @@
      }
    },
    "node_modules/@babel/core": {
-      "version": "7.17.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz",
-      "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==",
+      "version": "7.17.2",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.2.tgz",
+      "integrity": "sha512-R3VH5G42VSDolRHyUO4V2cfag8WHcZyxdq5Z/m8Xyb92lW/Erm/6kM+XtRFGf3Mulre3mveni2NHfEUws8wSvw==",
      "dev": true,
      "dependencies": {
-        "@ampproject/remapping": "^2.1.0",
+        "@ampproject/remapping": "^2.0.0",
        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.3",
+        "@babel/generator": "^7.17.0",
        "@babel/helper-compilation-targets": "^7.16.7",
        "@babel/helper-module-transforms": "^7.16.7",
        "@babel/helpers": "^7.17.2",
-        "@babel/parser": "^7.17.3",
+        "@babel/parser": "^7.17.0",
        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.3",
+        "@babel/traverse": "^7.17.0",
        "@babel/types": "^7.17.0",
        "convert-source-map": "^1.7.0",
        "debug": "^4.1.0",
@@ -163,9 +162,9 @@
      }
    },
    "node_modules/@babel/generator": {
-      "version": "7.17.3",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz",
-      "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.0.tgz",
+      "integrity": "sha512-I3Omiv6FGOC29dtlZhkfXO6pgkmukJSlT26QjVvS1DGZe/NzSVCPG41X0tS21oZkJYlovfj9qDWgKP+Cn4bXxw==",
      "dev": true,
      "dependencies": {
        "@babel/types": "^7.17.0",
@@ -220,9 +219,9 @@
      }
    },
    "node_modules/@babel/helper-create-class-features-plugin": {
-      "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==",
+      "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==",
      "dev": true,
      "dependencies": {
        "@babel/helper-annotate-as-pure": "^7.16.7",
@@ -362,9 +361,9 @@
      }
    },
    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.17.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.6.tgz",
-      "integrity": "sha512-2ULmRdqoOMpdvkbT8jONrZML/XALfzxlb052bldftkicAUy8AxSCkD5trDPQcwHNmolcl7wP6ehNqMlyUw6AaA==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz",
+      "integrity": "sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==",
      "dev": true,
      "dependencies": {
        "@babel/helper-environment-visitor": "^7.16.7",
@@ -373,8 +372,8 @@
        "@babel/helper-split-export-declaration": "^7.16.7",
        "@babel/helper-validator-identifier": "^7.16.7",
        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.3",
-        "@babel/types": "^7.17.0"
+        "@babel/traverse": "^7.16.7",
+        "@babel/types": "^7.16.7"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -529,9 +528,9 @@
      }
    },
    "node_modules/@babel/parser": {
-      "version": "7.17.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.3.tgz",
-      "integrity": "sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.0.tgz",
+      "integrity": "sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==",
      "dev": true,
      "bin": {
        "parser": "bin/babel-parser.js"
@@ -606,12 +605,12 @@
      }
    },
    "node_modules/@babel/plugin-proposal-class-static-block": {
-      "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==",
+      "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==",
      "dev": true,
      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.17.6",
+        "@babel/helper-create-class-features-plugin": "^7.16.7",
        "@babel/helper-plugin-utils": "^7.16.7",
        "@babel/plugin-syntax-class-static-block": "^7.14.5"
      },
@@ -719,12 +718,12 @@
      }
    },
    "node_modules/@babel/plugin-proposal-object-rest-spread": {
-      "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==",
+      "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==",
      "dev": true,
      "dependencies": {
-        "@babel/compat-data": "^7.17.0",
+        "@babel/compat-data": "^7.16.4",
        "@babel/helper-compilation-targets": "^7.16.7",
        "@babel/helper-plugin-utils": "^7.16.7",
        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
@@ -1097,9 +1096,9 @@
      }
    },
    "node_modules/@babel/plugin-transform-destructuring": {
-      "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==",
+      "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==",
      "dev": true,
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.16.7"
@@ -1634,18 +1633,18 @@
      }
    },
    "node_modules/@babel/traverse": {
-      "version": "7.17.3",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.3.tgz",
-      "integrity": "sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.0.tgz",
+      "integrity": "sha512-fpFIXvqD6kC7c7PUNnZ0Z8cQXlarCLtCUpt2S1Dx7PjoRtCFffvOkHHSom+m5HIxMZn5bIBVb71lhabcmjEsqg==",
      "dev": true,
      "dependencies": {
        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.3",
+        "@babel/generator": "^7.17.0",
        "@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.3",
+        "@babel/parser": "^7.17.0",
        "@babel/types": "^7.17.0",
        "debug": "^4.1.0",
        "globals": "^11.1.0"
@@ -1996,9 +1995,9 @@
      "dev": true
    },
    "node_modules/@types/node": {
-      "version": "17.0.19",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.19.tgz",
-      "integrity": "sha512-PfeQhvcMR4cPFVuYfBN4ifG7p9c+Dlh3yUZR6k+5yQK7wX3gDgVxBly4/WkBRs9x4dmcy1TVl08SY67wwtEvmA==",
+      "version": "17.0.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.18.tgz",
+      "integrity": "sha512-eKj4f/BsN/qcculZiRSujogjvp5O/k4lOW5m35NopjZM/QwLOR075a8pJW5hD+Rtdm2DaCVPENS6KtSQnUD6BA==",
      "dev": true
    },
    "node_modules/@types/normalize-package-data": {
@@ -2579,26 +2578,35 @@
      "dev": true
    },
    "node_modules/body-parser": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.2.tgz",
-      "integrity": "sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==",
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.1.tgz",
+      "integrity": "sha512-8ljfQi5eBk8EJfECMrgqNGWPEY5jWP+1IzkzkGdFFEwFQZZyaZ21UqdaHktgiMlH0xLHqIFtE/u2OYE5dOtViA==",
      "dev": true,
      "dependencies": {
-        "bytes": "3.1.2",
+        "bytes": "3.1.1",
        "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.7",
-        "raw-body": "2.4.3",
+        "qs": "6.9.6",
+        "raw-body": "2.4.2",
        "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",
@@ -2753,15 +2761,15 @@
      }
    },
    "node_modules/browserslist": {
-      "version": "4.19.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.3.tgz",
-      "integrity": "sha512-XK3X4xtKJ+Txj8G5c30B4gsm71s69lqXlkYui4s6EkKxuv49qjYlY6oVd+IFJ73d4YymtM3+djvvt/R/iJwwDg==",
+      "version": "4.19.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
+      "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==",
      "dev": true,
      "dependencies": {
-        "caniuse-lite": "^1.0.30001312",
-        "electron-to-chromium": "^1.4.71",
+        "caniuse-lite": "^1.0.30001286",
+        "electron-to-chromium": "^1.4.17",
        "escalade": "^3.1.1",
-        "node-releases": "^2.0.2",
+        "node-releases": "^2.0.1",
        "picocolors": "^1.0.0"
      },
      "bin": {
@@ -3461,9 +3469,9 @@
      }
    },
    "node_modules/core-js-compat": {
-      "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==",
+      "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==",
      "dev": true,
      "dependencies": {
        "browserslist": "^4.19.1",
@@ -4013,9 +4021,9 @@
      "dev": true
    },
    "node_modules/electron-to-chromium": {
-      "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==",
+      "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==",
      "dev": true
    },
    "node_modules/emoji-regex": {
@@ -4355,9 +4363,9 @@
      "dev": true
    },
    "node_modules/eslint-plugin-unicorn": {
-      "version": "41.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-41.0.0.tgz",
-      "integrity": "sha512-xoJCaRc1uy5REg9DkVga1BkZV57jJxoqOcrU28QHZB89Lk5LdSqdVyTIt9JQVfHNKaiyJ7X+3iLlIn+VEHWEzA==",
+      "version": "40.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-40.1.0.tgz",
+      "integrity": "sha512-y5doK2DF9Sr5AqKEHbHxjFllJ167nKDRU01HDcWyv4Tnmaoe9iNxMrBnaybZvWZUaE3OC5Unu0lNIevYamloig==",
      "dev": true,
      "dependencies": {
        "@babel/helper-validator-identifier": "^7.15.7",
@@ -4382,7 +4390,7 @@
        "url": "https://github.com/sindresorhus/eslint-plugin-unicorn?sponsor=1"
      },
      "peerDependencies": {
-        "eslint": ">=8.8.0"
+        "eslint": ">=7.32.0"
      }
    },
    "node_modules/eslint-plugin-unicorn/node_modules/semver": {
@@ -5016,9 +5024,9 @@
      "dev": true
    },
    "node_modules/follow-redirects": {
-      "version": "1.14.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
-      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
+      "version": "1.14.8",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
+      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==",
      "dev": true,
      "funding": [
        {
@@ -6359,9 +6367,9 @@
      }
    },
    "node_modules/jasmine-core": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.0.1.tgz",
-      "integrity": "sha512-w+JDABxQCkxbGGxg+a2hUVZyqUS2JKngvIyLGu/xiw2ZwgsoSB0iiecLQsQORSeaKQ6iGrCyWG86RfNDuoA7Lg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.0.0.tgz",
+      "integrity": "sha512-tq24OCqHElgU9KDpb/8O21r1IfotgjIzalfW9eCmRR40LZpvwXT68iariIyayMwi0m98RDt16aljdbwK0sBMmQ==",
      "dev": true,
      "peer": true
    },
@@ -6611,15 +6619,15 @@
      }
    },
    "node_modules/karma-jasmine/node_modules/jasmine-core": {
-      "version": "3.99.1",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.99.1.tgz",
-      "integrity": "sha512-Hu1dmuoGcZ7AfyynN3LsfruwMbxMALMka+YtZeGoLuDEySVmVAPaonkNoBRIw/ectu8b9tVQCJNgp4a4knp+tg==",
+      "version": "3.99.0",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.99.0.tgz",
+      "integrity": "sha512-+ZDaJlEfRopINQqgE+hvzRyDIQDeKfqqTvF8RzXsvU1yE3pBDRud2+Qfh9WvGgRpuzqxyQJVI6Amy5XQ11r/3w==",
      "dev": true
    },
    "node_modules/karma-rollup-preprocessor": {
-      "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==",
+      "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==",
      "dev": true,
      "dependencies": {
        "chokidar": "^3.3.1",
@@ -7015,9 +7023,9 @@
      }
    },
    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "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"
@@ -7035,15 +7043,6 @@
        "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",
@@ -7063,9 +7062,9 @@
      }
    },
    "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.1.tgz",
+      "integrity": "sha512-reLxBcKUPNBnc/sVtAbxgRVFSegoGeLaSjmphNhcwcolhYLRgtJscn5mRl6YRZNQv40Y7P6JM2YhSIsbL9OB5A==",
      "dev": true,
      "dependencies": {
        "brace-expansion": "^1.1.7"
@@ -7113,9 +7112,9 @@
      "dev": true
    },
    "node_modules/nanoid": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
-      "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.0.tgz",
+      "integrity": "sha512-JzxqqT5u/x+/KOFSd7JP15DOo9nOoHpx6DYatqIHUW2+flybkm+mdcraotSQR5WcnZr+qhGVh8Ted0KdfSMxlg==",
      "dev": true,
      "bin": {
        "nanoid": "bin/nanoid.cjs"
@@ -8315,9 +8314,9 @@
      }
    },
    "node_modules/qs": {
-      "version": "6.9.7",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
-      "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
+      "version": "6.9.6",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
+      "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==",
      "dev": true,
      "engines": {
        "node": ">=0.6"
@@ -8379,12 +8378,12 @@
      }
    },
    "node_modules/raw-body": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.3.tgz",
-      "integrity": "sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.2.tgz",
+      "integrity": "sha512-RPMAFUJP19WIet/99ngh6Iv8fzAbqum4Li7AD6DtGaW2RpMB/11xDoalPiJMTbu6I3hkbMVkATvZrqb9EEqeeQ==",
      "dev": true,
      "dependencies": {
-        "bytes": "3.1.2",
+        "bytes": "3.1.1",
        "http-errors": "1.8.1",
        "iconv-lite": "0.4.24",
        "unpipe": "1.0.0"
@@ -8393,6 +8392,15 @@
        "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",
@@ -8874,9 +8882,9 @@
      }
    },
    "node_modules/rollup": {
-      "version": "2.68.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.68.0.tgz",
-      "integrity": "sha512-XrMKOYK7oQcTio4wyTz466mucnd8LzkiZLozZ4Rz0zQD+HeX4nUK4B8GrTX/2EvN2/vBF/i2WnaXboPxo0JylA==",
+      "version": "2.67.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.67.2.tgz",
+      "integrity": "sha512-hoEiBWwZtf1QdK3jZIq59L0FJj4Fiv4RplCO4pvCRC86qsoFurWB4hKQIjoRf3WvJmk5UZ9b0y5ton+62fC7Tw==",
      "dev": true,
      "bin": {
        "rollup": "dist/bin/rollup"
@@ -9056,9 +9064,9 @@
      "dev": true
    },
    "node_modules/sass": {
-      "version": "1.49.8",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.8.tgz",
-      "integrity": "sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw==",
+      "version": "1.49.7",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.7.tgz",
+      "integrity": "sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==",
      "dev": true,
      "dependencies": {
        "chokidar": ">=3.0.0 <4.0.0",
@@ -9916,12 +9924,11 @@
      }
    },
    "node_modules/terser": {
-      "version": "5.11.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.11.0.tgz",
-      "integrity": "sha512-uCA9DLanzzWSsN1UirKwylhhRz3aKPInlfmpGfw8VN6jHsAtu8HJtIpeeHHK23rxnE/cDc+yvmq5wqkIC6Kn0A==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
+      "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
      "dev": true,
      "dependencies": {
-        "acorn": "^8.5.0",
        "commander": "^2.20.0",
        "source-map": "~0.7.2",
        "source-map-support": "~0.5.20"
@@ -9931,6 +9938,14 @@
      },
      "engines": {
        "node": ">=10"
+      },
+      "peerDependencies": {
+        "acorn": "^8.5.0"
+      },
+      "peerDependenciesMeta": {
+        "acorn": {
+          "optional": true
+        }
      }
    },
    "node_modules/terser/node_modules/commander": {
@@ -10735,21 +10750,20 @@
  },
  "dependencies": {
    "@ampproject/remapping": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
-      "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.1.tgz",
+      "integrity": "sha512-Aolwjd7HSC2PyY0fDj/wA/EimQT4HfEnFYNp5s9CQlrdhyvWTtvZ5YzrUPu6R6/1jKiUlxu8bUhkdSnKHNAHMA==",
      "dev": true,
      "requires": {
        "@jridgewell/trace-mapping": "^0.3.0"
      }
    },
    "@babel/cli": {
-      "version": "7.17.6",
-      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.17.6.tgz",
-      "integrity": "sha512-l4w608nsDNlxZhiJ5tE3DbNmr61fIKMZ6fTBo171VEFuFMIYuJ3mHRhTLEkKKyvx2Mizkkv/0a8OJOnZqkKYNA==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.17.0.tgz",
+      "integrity": "sha512-es10YH/ejXbg551vtnmEzIPe3MQRNOS644o3pf8vUr1tIeNzVNlP8BBvs1Eh7roh5A+k2fEHUas+ZptOWHA1fQ==",
      "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",
@@ -10777,20 +10791,20 @@
      "dev": true
    },
    "@babel/core": {
-      "version": "7.17.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz",
-      "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==",
+      "version": "7.17.2",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.2.tgz",
+      "integrity": "sha512-R3VH5G42VSDolRHyUO4V2cfag8WHcZyxdq5Z/m8Xyb92lW/Erm/6kM+XtRFGf3Mulre3mveni2NHfEUws8wSvw==",
      "dev": true,
      "requires": {
-        "@ampproject/remapping": "^2.1.0",
+        "@ampproject/remapping": "^2.0.0",
        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.3",
+        "@babel/generator": "^7.17.0",
        "@babel/helper-compilation-targets": "^7.16.7",
        "@babel/helper-module-transforms": "^7.16.7",
        "@babel/helpers": "^7.17.2",
-        "@babel/parser": "^7.17.3",
+        "@babel/parser": "^7.17.0",
        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.3",
+        "@babel/traverse": "^7.17.0",
        "@babel/types": "^7.17.0",
        "convert-source-map": "^1.7.0",
        "debug": "^4.1.0",
@@ -10800,9 +10814,9 @@
      }
    },
    "@babel/generator": {
-      "version": "7.17.3",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz",
-      "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.0.tgz",
+      "integrity": "sha512-I3Omiv6FGOC29dtlZhkfXO6pgkmukJSlT26QjVvS1DGZe/NzSVCPG41X0tS21oZkJYlovfj9qDWgKP+Cn4bXxw==",
      "dev": true,
      "requires": {
        "@babel/types": "^7.17.0",
@@ -10842,9 +10856,9 @@
      }
    },
    "@babel/helper-create-class-features-plugin": {
-      "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==",
+      "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==",
      "dev": true,
      "requires": {
        "@babel/helper-annotate-as-pure": "^7.16.7",
@@ -10948,9 +10962,9 @@
      }
    },
    "@babel/helper-module-transforms": {
-      "version": "7.17.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.6.tgz",
-      "integrity": "sha512-2ULmRdqoOMpdvkbT8jONrZML/XALfzxlb052bldftkicAUy8AxSCkD5trDPQcwHNmolcl7wP6ehNqMlyUw6AaA==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz",
+      "integrity": "sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==",
      "dev": true,
      "requires": {
        "@babel/helper-environment-visitor": "^7.16.7",
@@ -10959,8 +10973,8 @@
        "@babel/helper-split-export-declaration": "^7.16.7",
        "@babel/helper-validator-identifier": "^7.16.7",
        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.3",
-        "@babel/types": "^7.17.0"
+        "@babel/traverse": "^7.16.7",
+        "@babel/types": "^7.16.7"
      }
    },
    "@babel/helper-optimise-call-expression": {
@@ -11076,9 +11090,9 @@
      }
    },
    "@babel/parser": {
-      "version": "7.17.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.3.tgz",
-      "integrity": "sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.0.tgz",
+      "integrity": "sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==",
      "dev": true
    },
    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
@@ -11123,12 +11137,12 @@
      }
    },
    "@babel/plugin-proposal-class-static-block": {
-      "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==",
+      "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==",
      "dev": true,
      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.17.6",
+        "@babel/helper-create-class-features-plugin": "^7.16.7",
        "@babel/helper-plugin-utils": "^7.16.7",
        "@babel/plugin-syntax-class-static-block": "^7.14.5"
      }
@@ -11194,12 +11208,12 @@
      }
    },
    "@babel/plugin-proposal-object-rest-spread": {
-      "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==",
+      "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==",
      "dev": true,
      "requires": {
-        "@babel/compat-data": "^7.17.0",
+        "@babel/compat-data": "^7.16.4",
        "@babel/helper-compilation-targets": "^7.16.7",
        "@babel/helper-plugin-utils": "^7.16.7",
        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
@@ -11449,9 +11463,9 @@
      }
    },
    "@babel/plugin-transform-destructuring": {
-      "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==",
+      "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==",
      "dev": true,
      "requires": {
        "@babel/helper-plugin-utils": "^7.16.7"
@@ -11815,18 +11829,18 @@
      }
    },
    "@babel/traverse": {
-      "version": "7.17.3",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.3.tgz",
-      "integrity": "sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.0.tgz",
+      "integrity": "sha512-fpFIXvqD6kC7c7PUNnZ0Z8cQXlarCLtCUpt2S1Dx7PjoRtCFffvOkHHSom+m5HIxMZn5bIBVb71lhabcmjEsqg==",
      "dev": true,
      "requires": {
        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.3",
+        "@babel/generator": "^7.17.0",
        "@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.3",
+        "@babel/parser": "^7.17.0",
        "@babel/types": "^7.17.0",
        "debug": "^4.1.0",
        "globals": "^11.1.0"
@@ -12092,9 +12106,9 @@
      "dev": true
    },
    "@types/node": {
-      "version": "17.0.19",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.19.tgz",
-      "integrity": "sha512-PfeQhvcMR4cPFVuYfBN4ifG7p9c+Dlh3yUZR6k+5yQK7wX3gDgVxBly4/WkBRs9x4dmcy1TVl08SY67wwtEvmA==",
+      "version": "17.0.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.18.tgz",
+      "integrity": "sha512-eKj4f/BsN/qcculZiRSujogjvp5O/k4lOW5m35NopjZM/QwLOR075a8pJW5hD+Rtdm2DaCVPENS6KtSQnUD6BA==",
      "dev": true
    },
    "@types/normalize-package-data": {
@@ -12526,23 +12540,29 @@
      "dev": true
    },
    "body-parser": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.2.tgz",
-      "integrity": "sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==",
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.1.tgz",
+      "integrity": "sha512-8ljfQi5eBk8EJfECMrgqNGWPEY5jWP+1IzkzkGdFFEwFQZZyaZ21UqdaHktgiMlH0xLHqIFtE/u2OYE5dOtViA==",
      "dev": true,
      "requires": {
-        "bytes": "3.1.2",
+        "bytes": "3.1.1",
        "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.7",
-        "raw-body": "2.4.3",
+        "qs": "6.9.6",
+        "raw-body": "2.4.2",
        "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",
@@ -12659,15 +12679,15 @@
      }
    },
    "browserslist": {
-      "version": "4.19.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.3.tgz",
-      "integrity": "sha512-XK3X4xtKJ+Txj8G5c30B4gsm71s69lqXlkYui4s6EkKxuv49qjYlY6oVd+IFJ73d4YymtM3+djvvt/R/iJwwDg==",
+      "version": "4.19.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
+      "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==",
      "dev": true,
      "requires": {
-        "caniuse-lite": "^1.0.30001312",
-        "electron-to-chromium": "^1.4.71",
+        "caniuse-lite": "^1.0.30001286",
+        "electron-to-chromium": "^1.4.17",
        "escalade": "^3.1.1",
-        "node-releases": "^2.0.2",
+        "node-releases": "^2.0.1",
        "picocolors": "^1.0.0"
      }
    },
@@ -13196,9 +13216,9 @@
      "dev": true
    },
    "core-js-compat": {
-      "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==",
+      "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==",
      "dev": true,
      "requires": {
        "browserslist": "^4.19.1",
@@ -13631,9 +13651,9 @@
      "dev": true
    },
    "electron-to-chromium": {
-      "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==",
+      "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==",
      "dev": true
    },
    "emoji-regex": {
@@ -14000,9 +14020,9 @@
      }
    },
    "eslint-plugin-unicorn": {
-      "version": "41.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-41.0.0.tgz",
-      "integrity": "sha512-xoJCaRc1uy5REg9DkVga1BkZV57jJxoqOcrU28QHZB89Lk5LdSqdVyTIt9JQVfHNKaiyJ7X+3iLlIn+VEHWEzA==",
+      "version": "40.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unicorn/-/eslint-plugin-unicorn-40.1.0.tgz",
+      "integrity": "sha512-y5doK2DF9Sr5AqKEHbHxjFllJ167nKDRU01HDcWyv4Tnmaoe9iNxMrBnaybZvWZUaE3OC5Unu0lNIevYamloig==",
      "dev": true,
      "requires": {
        "@babel/helper-validator-identifier": "^7.15.7",
@@ -14428,9 +14448,9 @@
      "dev": true
    },
    "follow-redirects": {
-      "version": "1.14.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
-      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
+      "version": "1.14.8",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
+      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==",
      "dev": true
    },
    "fraction.js": {
@@ -15404,9 +15424,9 @@
      }
    },
    "jasmine-core": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.0.1.tgz",
-      "integrity": "sha512-w+JDABxQCkxbGGxg+a2hUVZyqUS2JKngvIyLGu/xiw2ZwgsoSB0iiecLQsQORSeaKQ6iGrCyWG86RfNDuoA7Lg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-4.0.0.tgz",
+      "integrity": "sha512-tq24OCqHElgU9KDpb/8O21r1IfotgjIzalfW9eCmRR40LZpvwXT68iariIyayMwi0m98RDt16aljdbwK0sBMmQ==",
      "dev": true,
      "peer": true
    },
@@ -15616,9 +15636,9 @@
      },
      "dependencies": {
        "jasmine-core": {
-          "version": "3.99.1",
-          "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.99.1.tgz",
-          "integrity": "sha512-Hu1dmuoGcZ7AfyynN3LsfruwMbxMALMka+YtZeGoLuDEySVmVAPaonkNoBRIw/ectu8b9tVQCJNgp4a4knp+tg==",
+          "version": "3.99.0",
+          "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-3.99.0.tgz",
+          "integrity": "sha512-+ZDaJlEfRopINQqgE+hvzRyDIQDeKfqqTvF8RzXsvU1yE3pBDRud2+Qfh9WvGgRpuzqxyQJVI6Amy5XQ11r/3w==",
          "dev": true
        }
      }
@@ -15631,9 +15651,9 @@
      "requires": {}
    },
    "karma-rollup-preprocessor": {
-      "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==",
+      "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==",
      "dev": true,
      "requires": {
        "chokidar": "^3.3.1",
@@ -15921,9 +15941,9 @@
      "dev": true
    },
    "mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "version": "1.51.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz",
+      "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==",
      "dev": true
    },
    "mime-types": {
@@ -15933,14 +15953,6 @@
      "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": {
@@ -15956,9 +15968,9 @@
      "dev": true
    },
    "minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.1.tgz",
+      "integrity": "sha512-reLxBcKUPNBnc/sVtAbxgRVFSegoGeLaSjmphNhcwcolhYLRgtJscn5mRl6YRZNQv40Y7P6JM2YhSIsbL9OB5A==",
      "dev": true,
      "requires": {
        "brace-expansion": "^1.1.7"
@@ -15997,9 +16009,9 @@
      "dev": true
    },
    "nanoid": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
-      "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.0.tgz",
+      "integrity": "sha512-JzxqqT5u/x+/KOFSd7JP15DOo9nOoHpx6DYatqIHUW2+flybkm+mdcraotSQR5WcnZr+qhGVh8Ted0KdfSMxlg==",
      "dev": true
    },
    "natural-compare": {
@@ -16860,9 +16872,9 @@
      "dev": true
    },
    "qs": {
-      "version": "6.9.7",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
-      "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
+      "version": "6.9.6",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
+      "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==",
      "dev": true
    },
    "query-string": {
@@ -16895,15 +16907,23 @@
      "dev": true
    },
    "raw-body": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.3.tgz",
-      "integrity": "sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.2.tgz",
+      "integrity": "sha512-RPMAFUJP19WIet/99ngh6Iv8fzAbqum4Li7AD6DtGaW2RpMB/11xDoalPiJMTbu6I3hkbMVkATvZrqb9EEqeeQ==",
      "dev": true,
      "requires": {
-        "bytes": "3.1.2",
+        "bytes": "3.1.1",
        "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": {
@@ -17281,9 +17301,9 @@
      }
    },
    "rollup": {
-      "version": "2.68.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.68.0.tgz",
-      "integrity": "sha512-XrMKOYK7oQcTio4wyTz466mucnd8LzkiZLozZ4Rz0zQD+HeX4nUK4B8GrTX/2EvN2/vBF/i2WnaXboPxo0JylA==",
+      "version": "2.67.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.67.2.tgz",
+      "integrity": "sha512-hoEiBWwZtf1QdK3jZIq59L0FJj4Fiv4RplCO4pvCRC86qsoFurWB4hKQIjoRf3WvJmk5UZ9b0y5ton+62fC7Tw==",
      "dev": true,
      "requires": {
        "fsevents": "~2.3.2"
@@ -17405,9 +17425,9 @@
      "dev": true
    },
    "sass": {
-      "version": "1.49.8",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.8.tgz",
-      "integrity": "sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw==",
+      "version": "1.49.7",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.7.tgz",
+      "integrity": "sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==",
      "dev": true,
      "requires": {
        "chokidar": ">=3.0.0 <4.0.0",
@@ -18079,12 +18099,11 @@
      }
    },
    "terser": {
-      "version": "5.11.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.11.0.tgz",
-      "integrity": "sha512-uCA9DLanzzWSsN1UirKwylhhRz3aKPInlfmpGfw8VN6jHsAtu8HJtIpeeHHK23rxnE/cDc+yvmq5wqkIC6Kn0A==",
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
+      "integrity": "sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==",
      "dev": true,
      "requires": {
-        "acorn": "^8.5.0",
        "commander": "^2.20.0",
        "source-map": "~0.7.2",
        "source-map-support": "~0.5.20"
@@ -104,8 +104,8 @@
    "@popperjs/core": "^2.11.2"
  },
  "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.17.5",
+    "@babel/cli": "^7.17.0",
+    "@babel/core": "^7.17.2",
    "@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": "^41.0.0",
+    "eslint-plugin-unicorn": "^40.1.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.7",
+    "karma-rollup-preprocessor": "^7.0.8",
    "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.68.0",
+    "rollup": "^2.67.2",
    "rollup-plugin-istanbul": "^3.0.0",
    "rtlcss": "^3.5.0",
-    "sass": "^1.49.8",
+    "sass": "^1.49.7",
    "shelljs": "^0.8.5",
    "stylelint": "14.2.0",
    "stylelint-config-twbs-bootstrap": "^3.0.1",
-    "terser": "^5.11.0",
+    "terser": "^5.10.0",
    "vnu-jar": "21.10.12"
  },
  "files": [
@@ -17,8 +17,7 @@
 .dropdown-menu {
  // scss-docs-start dropdown-css-vars
  --#{$variable-prefix}dropdown-min-width: #{$dropdown-min-width};
-  --#{$variable-prefix}dropdown-padding-x: #{$dropdown-padding-x};
-  --#{$variable-prefix}dropdown-padding-y: #{$dropdown-padding-y};
+  --#{$variable-prefix}dropdown-padding: #{$dropdown-padding-y $dropdown-padding-x};
  --#{$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
@@ -36,8 +35,7 @@
  --#{$variable-prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$variable-prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$variable-prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
-  --#{$variable-prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
-  --#{$variable-prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
+  --#{$variable-prefix}dropdown-item-padding: #{$dropdown-item-padding-y $dropdown-item-padding-x};
  --#{$variable-prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$variable-prefix}dropdown-header-padding: #{$dropdown-header-padding};
  // scss-docs-end dropdown-css-vars
@@ -46,7 +44,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-y) var(--#{$variable-prefix}dropdown-padding-x);
+  padding: var(--#{$variable-prefix}dropdown-padding);
  margin: 0; // Override default margin of ul
  @include font-size($dropdown-font-size);
  color: var(--#{$variable-prefix}dropdown-color);
@@ -63,25 +61,6 @@
    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
@@ -177,7 +156,7 @@
 .dropdown-item {
  display: block;
  width: 100%; // For `<button>`s
-  padding: var(--#{$variable-prefix}dropdown-item-padding-y) var(--#{$variable-prefix}dropdown-item-padding-x);
+  padding: var(--#{$variable-prefix}dropdown-item-padding);
  clear: both;
  font-weight: $font-weight-normal;
  color: var(--#{$variable-prefix}dropdown-link-color);
@@ -16,7 +16,7 @@
  list-style-type: none;
  counter-reset: section;

-  > .list-group-item::before {
+  > li::before {
    // Increments only this instance of the section counter
    content: counters(section, ".") ". ";
    counter-increment: section;
@@ -130,7 +130,6 @@
  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);

@@ -13,7 +13,6 @@
  --#{$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};
@@ -66,7 +65,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-brand-font-size));
+  @include font-size(var(--#{$variable-prefix}navbar-toggler-font-size));
  color: var(--#{$variable-prefix}navbar-brand-color);
  text-decoration: if($link-decoration == none, null, none);
  white-space: nowrap;
@@ -64,15 +64,20 @@ 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
-  border: 0;
-  border-top: $hr-border-width solid $hr-border-color;
+  background-color: $hr-bg-color;
+  border: $hr-border-width;
  opacity: $hr-opacity;
 }

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

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

 $hr-margin-y:                 $spacer !default;
 $hr-color:                    inherit !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-bg-color:                 currentColor !default;
+$hr-border-width:             0 !default;
+$hr-height:                   $border-width !default;
 $hr-opacity:                  .25 !default;

 $legend-margin-bottom:        .5rem !default;
@@ -1149,11 +1145,6 @@ $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
@@ -1399,7 +1390,6 @@ $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;
@@ -1,11 +1,11 @@
@each $color, $value in $theme-colors {
  .link-#{$color} {
-    color: $value !important; // stylelint-disable-line declaration-no-important
+    color: $value;

    @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)) !important; // stylelint-disable-line declaration-no-important
+        color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
      }
    }
  }
@@ -63,8 +63,7 @@

 // scss-docs-start btn-size-mixin
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
-  --#{$variable-prefix}btn-padding-y: #{$padding-y};
-  --#{$variable-prefix}btn-padding-x: #{$padding-x};
+  --#{$variable-prefix}btn-padding: #{$padding-y} #{$padding-x};
  @include rfs($font-size, --#{$variable-prefix}btn-font-size);
  --#{$variable-prefix}btn-border-radius: #{$border-radius};
 }
@@ -10,7 +10,7 @@
 * For details, see https://creativecommons.org/licenses/by/3.0/.
 */

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

 (function () {
  'use strict'
@@ -163,4 +163,9 @@
      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
    }, { once: true })
  })
+
+  anchors.options = {
+    icon: '#'
+  }
+  anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
 })()
@@ -1,21 +1,11 @@
-.anchor-link {
-  padding: 0 .175rem;
+.anchorjs-link {
  font-weight: 400;
  color: rgba($link-color, .5);
-  text-decoration: none;
-  opacity: 0;
-  @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
-
-  &::after {
-    content: "#";
-  }
+  @include transition(color .15s ease-in-out);

  &:focus,
-  &:hover,
-  :hover > &,
-  :target > & {
+  &:hover {
    color: $link-color;
    text-decoration: none;
-    opacity: 1;
  }
 }
@@ -124,7 +124,7 @@
    display: block;
  }

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

@@ -7,9 +7,15 @@ toc: true
 ---

 ## Examples
-
+<hr>
+<button class="btn btn-outline-dark" data-bs-toggle="toggler" data-bs-target="#anotherTarget"> Toggle next element class</button>
+<div id="anotherTarget" class="alert alert-secondary" data-bs-value="alert-danger" data-bs-attribute="class">Toggler: Toggle Class, using above button</div>
+<div class="alert alert-primary" data-bs-toggle="toggler" data-bs-value="alert-warning" data-bs-attribute="class">Toggler: Toggles Class</div>
+<div class="alert alert-primary" data-bs-toggle="toggler" data-bs-value="test" data-bs-attribute="data-tost">Toggler: Toggles attribute</div>
+<div class="alert alert-secondary" data-bs-act="click:alert:close"> Remover: Working example. Click on it and it will be removed</div>
+<div class="alert alert-danger" data-bs-act="click:kalert:close">Remover: NOT working example. Click on it</div>
+<hr>
 Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
-
 {{< example >}}
 {{< alerts.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
@@ -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-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
+        style="--bs-btn-padding: .25rem .5rem; --bs-btn-font-size: .75rem;">
  Custom button
 </button>
 {{< /example >}}
@@ -393,30 +393,6 @@ 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 >}}
@@ -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 of it. Click the button below to try it.
+When backdrop is set to static, the modal will not close when clicking outside 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 o
        <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 of me. Don't even try to press escape key.</p>
+        <p>I will not close if you click outside 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 when clicked.</td>
+      <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</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 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>
+      <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>
    </tr>
  </tbody>
 </table>
@@ -129,21 +129,6 @@ 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.
@@ -9,7 +9,7 @@ include_js: false
 ---

 <div class="container">
-  <header class="blog-header lh-1 py-3">
+  <header class="blog-header 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 mb-1">مثال على تدوينة</h2>
+        <h2 class="blog-post-title">مثال على تدوينة</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 mb-1">تدوينة أخرى</h2>
+        <h2 class="blog-post-title">تدوينة أخرى</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 mb-1">ميزة جديدة</h2>
+        <h2 class="blog-post-title">ميزة جديدة</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 rounded-pill" href="#">تدوينات أقدم</a>
-        <a class="btn btn-outline-secondary rounded-pill disabled">تدوينات أحدث</a>
+        <a class="btn btn-outline-primary" href="#">تدوينات أقدم</a>
+        <a class="btn btn-outline-secondary disabled">تدوينات أحدث</a>
      </nav>

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

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

@@ -26,6 +27,35 @@ 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;
 }
@@ -39,6 +69,9 @@ h1, h2, h3, h4, h5, h6 {
 .blog-pagination {
  margin-bottom: 4rem;
 }
+.blog-pagination > .btn {
+  border-radius: 2rem;
+}

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

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

@@ -26,6 +27,35 @@ 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;
 }
@@ -39,6 +69,9 @@ h1, h2, h3, h4, h5, h6 {
 .blog-pagination {
  margin-bottom: 4rem;
 }
+.blog-pagination > .btn {
+  border-radius: 2rem;
+}

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

 <div class="container">
-  <header class="blog-header lh-1 py-3">
+  <header class="blog-header 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 mb-1">Sample blog post</h2>
+        <h2 class="blog-post-title">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 mb-1">Another blog post</h2>
+        <h2 class="blog-post-title">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 mb-1">New feature</h2>
+        <h2 class="blog-post-title">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 rounded-pill" href="#">Older</a>
-        <a class="btn btn-outline-secondary rounded-pill disabled">Newer</a>
+        <a class="btn btn-outline-primary" href="#">Older</a>
+        <a class="btn btn-outline-secondary disabled">Newer</a>
      </nav>

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


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

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


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

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

 /* RESPONSIVE CSS
 -------------------------------------------------- */
@@ -94,19 +94,19 @@ extra_css:
    <div class="row">
      <div class="col-lg-4">
        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
-        <h2 class="fw-normal">Heading</h2>
+        <h2>Heading</h2>
        <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
        <p><a class="btn btn-secondary" href="#">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 class="fw-normal">Heading</h2>
+        <h2>Heading</h2>
        <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
        <p><a class="btn btn-secondary" href="#">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 class="fw-normal">Heading</h2>
+        <h2>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 fw-normal lh-1">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
+        <h2 class="featurette-heading">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 fw-normal lh-1">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
+        <h2 class="featurette-heading">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 fw-normal lh-1">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
+        <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
        <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
      </div>
      <div class="col-md-5">
@@ -23,48 +23,48 @@ direction: rtl
  <nav class="small" id="toc">
    <ul class="list-unstyled">
      <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed border-0" 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" 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 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>
+          <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>
        </ul>
      </li>
      <li class="my-2">
-        <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>
+        <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>
        <ul class="list-unstyled ps-3 collapse" id="forms-collapse">
-          <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>
+          <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>
        </ul>
      </li>
      <li class="my-2">
-        <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>
+        <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>
        <ul class="list-unstyled ps-3 collapse" id="components-collapse">
-          <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>
+          <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>
        </ul>
      </li>
    </ul>
@@ -116,10 +116,6 @@ direction: rtl
        <p><em>هذا السطر يحوي نص مائل.</em></p>
        {{< /example >}}

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

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

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

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

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

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

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

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

 [id="modal"] .bd-example .btn,
@@ -22,48 +22,48 @@ body_class: "bg-light"
  <nav class="small" id="toc">
    <ul class="list-unstyled">
      <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed border-0" 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" 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 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>
+          <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>
        </ul>
      </li>
      <li class="my-2">
-        <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>
+        <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>
        <ul class="list-unstyled ps-3 collapse" id="forms-collapse">
-          <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>
+          <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>
        </ul>
      </li>
      <li class="my-2">
-        <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>
+        <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>
        <ul class="list-unstyled ps-3 collapse" id="components-collapse">
-          <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>
+          <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>
        </ul>
      </li>
    </ul>
@@ -115,10 +115,6 @@ 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>
@@ -1438,7 +1434,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 position-relative mt-2 overflow-auto" tabindex="0">
+        <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
            <h4 id="scrollspyHeading1">First heading</h4>
            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
            <h4 id="scrollspyHeading2">Second heading</h4>
@@ -31,7 +31,10 @@ body {
 */

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

@@ -13,9 +13,9 @@ include_js: false
    <div>
      <h3 class="float-md-start mb-0">Cover</h3>
      <nav class="nav nav-masthead justify-content-center float-md-end">
-        <a class="nav-link 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>
+        <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>
      </nav>
    </div>
  </header>
@@ -13,11 +13,11 @@ extra_js:
 ---

 <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
-  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">اسم الشركة</a>
+  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" 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 rounded-0 border-0" type="text" placeholder="بحث" aria-label="بحث">
+  <input class="form-control form-control-dark w-100" 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" class="align-text-bottom"></span>
+              <span data-feather="home"></span>
              لوحة القيادة
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="file" class="align-text-bottom"></span>
+              <span data-feather="file"></span>
              الطلبات
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="shopping-cart" class="align-text-bottom"></span>
+              <span data-feather="shopping-cart"></span>
              المنتجات
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="users" class="align-text-bottom"></span>
+              <span data-feather="users"></span>
              الزبائن
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="bar-chart-2" class="align-text-bottom"></span>
+              <span data-feather="bar-chart-2"></span>
              التقارير
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="layers" class="align-text-bottom"></span>
+              <span data-feather="layers"></span>
              التكاملات
            </a>
          </li>
        </ul>

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

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

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

 /*
@@ -70,6 +72,7 @@ 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);
 }
@@ -81,6 +84,8 @@ body {

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

 .form-control-dark {
@@ -5,6 +5,7 @@ body {
 .feather {
  width: 16px;
  height: 16px;
+  vertical-align: text-bottom;
 }

 /*
@@ -57,6 +58,7 @@ body {

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

 /*
@@ -66,6 +68,7 @@ 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);
 }
@@ -77,6 +80,8 @@ body {

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

 .form-control-dark {
@@ -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 fs-6" href="#">Company name</a>
+  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" 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 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
+  <input class="form-control form-control-dark w-100" 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" class="align-text-bottom"></span>
+              <span data-feather="home"></span>
              Dashboard
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="file" class="align-text-bottom"></span>
+              <span data-feather="file"></span>
              Orders
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="shopping-cart" class="align-text-bottom"></span>
+              <span data-feather="shopping-cart"></span>
              Products
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="users" class="align-text-bottom"></span>
+              <span data-feather="users"></span>
              Customers
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="bar-chart-2" class="align-text-bottom"></span>
+              <span data-feather="bar-chart-2"></span>
              Reports
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="layers" class="align-text-bottom"></span>
+              <span data-feather="layers"></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 text-uppercase">
+        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
          <span>Saved reports</span>
          <a class="link-secondary" href="#" aria-label="Add a new report">
-            <span data-feather="plus-circle" class="align-text-bottom"></span>
+            <span data-feather="plus-circle"></span>
          </a>
        </h6>
        <ul class="nav flex-column mb-2">
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="file-text" class="align-text-bottom"></span>
+              <span data-feather="file-text"></span>
              Current month
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="file-text" class="align-text-bottom"></span>
+              <span data-feather="file-text"></span>
              Last quarter
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="file-text" class="align-text-bottom"></span>
+              <span data-feather="file-text"></span>
              Social engagement
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
-              <span data-feather="file-text" class="align-text-bottom"></span>
+              <span data-feather="file-text"></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" class="align-text-bottom"></span>
+            <span data-feather="calendar"></span>
            This week
          </button>
        </div>
@@ -1,7 +1,20 @@
 .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);
 }
@@ -15,7 +28,9 @@
 }

 .btn-hover-light {
+  text-align: left;
  background-color: var(--bs-white);
+  border-radius: .25rem;
 }
 .btn-hover-light:hover,
 .btn-hover-light:focus {
@@ -59,20 +74,3 @@
  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;
-}
@@ -80,27 +80,28 @@ body_class: ""
  </symbol>
 </svg>

-<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>
+<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>
    <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
+    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
-  <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>
+  <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>
    <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
+    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
 </div>

 <div class="b-example-divider"></div>

-<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">
+
+<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;">
    <form class="p-2 mb-2 bg-light border-bottom">
      <input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
    </form>
@@ -124,7 +125,7 @@ body_class: ""
    </ul>
  </div>

-  <div class="dropdown-menu dropdown-menu-dark d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
+  <div class="dropdown-menu dropdown-menu-dark border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 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>
@@ -151,8 +152,8 @@ body_class: ""

 <div class="b-example-divider"></div>

-<div class="d-flex gap-5 justify-content-center">
-  <ul class="dropdown-menu d-block position-static mx-0 shadow w-220px">
+<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownIcons">
+  <ul class="dropdown-menu mx-0 shadow" style="width: 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>
@@ -191,7 +192,7 @@ body_class: ""
      </a>
    </li>
  </ul>
-  <ul class="dropdown-menu dropdown-menu-dark d-block position-static mx-0 border-0 shadow w-220px">
+  <ul class="dropdown-menu dropdown-menu-dark mx-0 border-0 shadow" style="width: 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>
@@ -234,7 +235,7 @@ body_class: ""

 <div class="b-example-divider"></div>

-<div class="dropdown-menu d-block position-static p-2 shadow rounded-3 w-340px">
+<div class="dropdown-menu p-2 shadow rounded-3" style="width: 340px" id="dropdownCalendar">
  <div class="d-grid gap-1">
    <div class="cal">
      <div class="cal-month">
@@ -315,16 +316,16 @@ body_class: ""

 <div class="b-example-divider"></div>

-<div class="dropdown-menu position-static d-flex align-items-stretch p-3 rounded-3 shadow-lg w-600px">
+<div class="dropdown-menu d-flex align-items-stretch p-3 rounded-3 shadow-lg dropdown" style="width: 600px" id="dropdownMega">
  <nav class="d-grid gap-2 col-8">
-    <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
+    <a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm">
      <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 rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
+    <a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm">
      <svg class="bi" width="32" height="32"><use xlink:href="#question-circle"/></svg>
      <div>
        <strong class="d-block">Support</strong>
@@ -1,8 +1,19 @@
 .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;
@@ -14,10 +25,18 @@
 }

 .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); }
@@ -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 d-inline-flex align-items-center justify-content-center bg-primary bg-gradient rounded-5 text-white fs-2 mb-3">
+        <div class="feature-icon bg-primary bg-gradient">
          <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 d-inline-flex align-items-center">
+        <a href="#" class="icon-link">
          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 d-inline-flex align-items-center justify-content-center bg-primary bg-gradient rounded-5 text-white fs-2 mb-3">
+        <div class="feature-icon bg-primary bg-gradient">
          <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 d-inline-flex align-items-center">
+        <a href="#" class="icon-link">
          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 d-inline-flex align-items-center justify-content-center bg-primary bg-gradient rounded-5 text-white fs-2 mb-3">
+        <div class="feature-icon bg-primary bg-gradient">
          <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 d-inline-flex align-items-center">
+        <a href="#" class="icon-link">
          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 d-inline-flex align-items-center justify-content-center fs-4 rounded-5 flex-shrink-0 me-3">
+        <div class="icon-square bg-light text-dark 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 d-inline-flex align-items-center justify-content-center fs-4 rounded-5 flex-shrink-0 me-3">
+        <div class="icon-square bg-light text-dark 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 d-inline-flex align-items-center justify-content-center fs-4 rounded-5 flex-shrink-0 me-3">
+        <div class="icon-square bg-light text-dark 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-6 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
+        <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="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-6 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
+        <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="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-6 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');">
+        <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="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">
@@ -1,7 +1,11 @@
 .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);
 }
@@ -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 text-white bg-dark" placeholder="Search..." aria-label="Search">
+          <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
        </form>

        <div class="text-end">
@@ -27,7 +27,7 @@ body_class: ""
  </symbol>
 </svg>

-<div class="list-group w-auto">
+<div class="list-group">
  <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 w-auto">
+  <div class="list-group mx-0">
    <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 w-auto">
+  <div class="list-group mx-0">
    <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 w-auto">
+<div class="list-group">
  <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 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;">
+    <input class="form-check-input form-check-input-placeholder bg-light flex-shrink-0" 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 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">
+<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">
    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 pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
-  <label class="list-group-item rounded-4 py-3" for="listGroupCheckableRadios2">
+  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
+  <label class="list-group-item 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 pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
-  <label class="list-group-item rounded-4 py-3" for="listGroupCheckableRadios3">
+  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
+  <label class="list-group-item 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 pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
-  <label class="list-group-item rounded-4 py-3" for="listGroupCheckableRadios4">
+  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
+  <label class="list-group-item py-3" for="listGroupCheckableRadios4">
    Fourth disabled radio
    <span class="d-block small opacity-50">This option is disabled</span>
  </label>
@@ -1,4 +1,8 @@
+.opacity-50 { opacity: .5; }
+.opacity-75 { opacity: .75; }
+
 .list-group {
+  width: auto;
  max-width: 460px;
  margin: 4rem auto;
 }
@@ -8,18 +12,26 @@
 }

 .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);
@@ -1,3 +1,7 @@
+.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;
@@ -48,7 +48,7 @@ aliases: "/docs/5.1/examples/offcanvas/"
 </nav>

 <div class="nav-scroller bg-body shadow-sm">
-  <nav class="nav" aria-label="Secondary navigation">
+  <nav class="nav nav-underline" aria-label="Secondary navigation">
    <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
    <a class="nav-link" href="#">
      Friends
@@ -27,22 +27,37 @@ body {
  }
 }

-.nav-scroller .nav {
-  color: rgba(255, 255, 255, .75);
+.nav-scroller {
+  position: relative;
+  z-index: 2;
+  height: 2.75rem;
+  overflow-y: hidden;
 }

-.nav-scroller .nav-link {
+.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 {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
  color: #6c757d;
 }

-.nav-scroller .nav-link:hover {
+.nav-underline .nav-link:hover {
  color: #007bff;
 }

-.nav-scroller .active {
+.nav-underline .active {
  font-weight: 500;
  color: #343a40;
 }
@@ -67,7 +67,7 @@ body_class: ""
  </symbol>
 </svg>

-<main class="d-flex flex-nowrap">
+<main>
  <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 rounded-0" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
+        <a href="#" class="nav-link active py-3 border-bottom" 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 rounded-0" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right">
+        <a href="#" class="nav-link py-3 border-bottom" 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 rounded-0" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
+        <a href="#" class="nav-link py-3 border-bottom" 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 rounded-0" title="Products" data-bs-toggle="tooltip" data-bs-placement="right">
+        <a href="#" class="nav-link py-3 border-bottom" 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 rounded-0" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right">
+        <a href="#" class="nav-link py-3 border-bottom" 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 d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
+        <button class="btn btn-toggle align-items-center rounded 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 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>
+            <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>
          </ul>
        </div>
      </li>
      <li class="mb-1">
-        <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">
+        <button class="btn btn-toggle align-items-center rounded 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 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>
+            <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>
          </ul>
        </div>
      </li>
      <li class="mb-1">
-        <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">
+        <button class="btn btn-toggle align-items-center rounded 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 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>
+            <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>
          </ul>
        </div>
      </li>
      <li class="border-top my-3"></li>
      <li class="mb-1">
-        <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">
+        <button class="btn btn-toggle align-items-center rounded 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 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>
+            <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>
          </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-sm" aria-current="true">
+      <a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" 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-sm">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <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-sm">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <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-sm" aria-current="true">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" 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-sm">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <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-sm">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <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-sm" aria-current="true">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" 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-sm">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <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-sm">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <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-sm" aria-current="true">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" 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-sm">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <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-sm">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
        <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>
@@ -8,6 +8,8 @@ html {
 }

 main {
+  display: flex;
+  flex-wrap: nowrap;
  height: 100vh;
  height: -webkit-fill-available;
  max-height: 100vh;
@@ -17,11 +19,18 @@ 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 {
@@ -45,9 +54,11 @@ 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 {
@@ -59,3 +70,4 @@ main {
 }

 .fw-semibold { font-weight: 600; }
+.lh-tight { line-height: 1.25; }
@@ -7,7 +7,7 @@ body_class: "text-center"
 include_js: false
 ---

-<main class="form-signin w-100 m-auto">
+<main class="form-signin">
  <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>
@@ -12,8 +12,14 @@ body {
 }

 .form-signin {
+  width: 100%;
  max-width: 330px;
  padding: 15px;
+  margin: auto;
+}
+
+.form-signin .checkbox {
+  font-weight: 400;
 }

 .form-signin .form-floating:focus-within {
@@ -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 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 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>
      </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 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 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>
      </div>
    </div>
@@ -1,3 +1,12 @@
+.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;
@@ -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`.

@@ -1,5 +0,0 @@
-<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 }}>
@@ -50,28 +50,6 @@
        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 }}
Author	SHA1	Message	Date
GeoSot	1f0545bc93	tweak bundlewatch.config	2022-02-17 02:04:18 +02:00
GeoSot	8df3e6385c	Add dispose and toggler	2022-02-17 02:04:18 +02:00
GeoSot	5cfefe8d66	Initial approach on generic triggering	2022-02-16 22:35:33 +02:00