Merge branch 'main' into patrickhlauke-issue37428

2025-08-18 11:21:23 +02:00 · 2023-02-14 17:06:25 +00:00
parent cedd335da8 9dd42e1a07
commit fa712e7d2b
33 changed files with 145 additions and 170 deletions
--- a/README.md
+++ b/README.md
@@ -144,7 +144,7 @@ Have a bug or a feature request? Please first read the [issue guidelines](https:

 Bootstrap's documentation, included in this repo in the root directory, is built with [Hugo](https://gohugo.io/) and publicly hosted on GitHub Pages at <https://getbootstrap.com/>. The docs may also be run locally.

-Documentation search is powered by [Algolia's DocSearch](https://docsearch.algolia.com/). Working on our search? Be sure to set `debug: true` in `site/assets/js/search.js`.
+Documentation search is powered by [Algolia's DocSearch](https://docsearch.algolia.com/).

 ### Running documentation locally

--- a/config.yml
+++ b/config.yml
@@ -82,6 +82,7 @@ params:
    js_bundle_hash:   "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
    popper:           "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
    popper_hash:      "sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
+    popper_esm:       "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/esm/popper.min.js"

  anchors:
    min: 2
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -208,7 +208,6 @@ class Modal extends BaseComponent {
      }

      if (this._config.keyboard) {
-        event.preventDefault()
        this.hide()
        return
      }
--- a/js/src/offcanvas.js
+++ b/js/src/offcanvas.js
@@ -198,12 +198,12 @@ class Offcanvas extends BaseComponent {
        return
      }

-      if (!this._config.keyboard) {
-        EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
+      if (this._config.keyboard) {
+        this.hide()
        return
      }

-      this.hide()
+      EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
    })
  }

--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -56,7 +56,7 @@ describe('Tooltip', () => {

  describe('constructor', () => {
    it('should take care of element either passed as a CSS selector or DOM element', () => {
-      fixtureEl.innerHTML = '<a href="#" id="tooltipEl" rel="tooltip" title="Nice and short title">'
+      fixtureEl.innerHTML = '<a href="#" id="tooltipEl" rel="tooltip" title="Nice and short title"></a>'

      const tooltipEl = fixtureEl.querySelector('#tooltipEl')
      const tooltipBySelector = new Tooltip('#tooltipEl')
@@ -67,7 +67,7 @@ describe('Tooltip', () => {
    })

    it('should not take care of disallowed data attributes', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-bs-sanitize="false" title="Another tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-bs-sanitize="false" title="Another tooltip"></a>'

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

    it('should convert title and content to string if numbers', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip"></a>'

      const tooltipEl = fixtureEl.querySelector('a')
      const tooltip = new Tooltip(tooltipEl, {
@@ -98,7 +98,7 @@ describe('Tooltip', () => {
          trigger: 'click'
        })

-        containerEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        containerEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

        const tooltipInContainerEl = containerEl.querySelector('a')

@@ -114,7 +114,7 @@ describe('Tooltip', () => {

    it('should create offset modifier when offset is passed as a function', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Offset from function">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Offset from function"></a>'

        const getOffset = jasmine.createSpy('getOffset').and.returnValue([10, 20])
        const tooltipEl = fixtureEl.querySelector('a')
@@ -141,7 +141,7 @@ describe('Tooltip', () => {
    })

    it('should create offset modifier when offset option is passed in data attribute', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-bs-offset="10,20" title="Another tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-bs-offset="10,20" title="Another tooltip"></a>'

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

    it('should allow to pass config to Popper with `popperConfig`', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip"></a>'

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

    it('should allow to pass config to Popper with `popperConfig` as a function', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip"></a>'

      const tooltipEl = fixtureEl.querySelector('a')
      const getPopperConfig = jasmine.createSpy('getPopperConfig').and.returnValue({ placement: 'left' })
@@ -192,7 +192,7 @@ describe('Tooltip', () => {
  describe('enable', () => {
    it('should enable a tooltip', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

        const tooltipEl = fixtureEl.querySelector('a')
        const tooltip = new Tooltip(tooltipEl)
@@ -212,7 +212,7 @@ describe('Tooltip', () => {
  describe('disable', () => {
    it('should disable tooltip', () => {
      return new Promise((resolve, reject) => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

  describe('toggleEnabled', () => {
    it('should toggle enabled', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

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

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

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

    it('should call toggle and show the tooltip when trigger is "click"', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

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

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

    it('should call toggle and hide the tooltip when trigger is "click"', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

  describe('dispose', () => {
    it('should destroy a tooltip', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

      const tooltipEl = fixtureEl.querySelector('a')
      const addEventSpy = spyOn(tooltipEl, 'addEventListener').and.callThrough()
@@ -381,7 +381,7 @@ describe('Tooltip', () => {

    it('should destroy a tooltip after it is shown and hidden', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should destroy a tooltip and remove it from the dom', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

        const tooltipEl = fixtureEl.querySelector('a')
        const tooltip = new Tooltip(tooltipEl)
@@ -443,7 +443,7 @@ describe('Tooltip', () => {
  describe('show', () => {
    it('should show a tooltip', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should show a tooltip on mobile', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should show a tooltip relative to placement option', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should not error when trying to show a tooltip that has been removed from the dom', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should show a tooltip with a dom element container', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should show a tooltip with a jquery element container', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should show a tooltip with a selector in container', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should show a tooltip with placement as a function', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

        const spy = jasmine.createSpy('placement').and.returnValue('top')
        const tooltipEl = fixtureEl.querySelector('a')
@@ -638,7 +638,7 @@ describe('Tooltip', () => {

    it('should show a tooltip without the animation', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should throw an error the element is not visible', () => {
-      fixtureEl.innerHTML = '<a href="#" style="display: none" rel="tooltip" title="Another tooltip">'
+      fixtureEl.innerHTML = '<a href="#" style="display: none" rel="tooltip" title="Another tooltip"></a>'

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

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

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

    it('should show tooltip if leave event hasn\'t occurred before delay expires', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should not show tooltip if leave event occurs before delay expires', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should only trigger inserted event if a new tooltip element was created', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should show a tooltip with custom class provided in data attributes', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip" data-bs-custom-class="custom-class">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip" data-bs-custom-class="custom-class"></a>'

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

    it('should show a tooltip with custom class provided as a string in config', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should show a tooltip with custom class provided as a function in config', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

        const spy = jasmine.createSpy('customClass').and.returnValue('custom-class')
        const tooltipEl = fixtureEl.querySelector('a')
@@ -956,7 +956,7 @@ describe('Tooltip', () => {
  describe('hide', () => {
    it('should hide a tooltip', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should hide a tooltip on mobile', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should hide a tooltip without animation', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

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

        const assertDone = () => {
          setTimeout(() => {
@@ -1063,7 +1063,7 @@ describe('Tooltip', () => {
  describe('update', () => {
    it('should call popper update', () => {
      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should do nothing if the tooltip is not shown', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

  describe('_isWithContent', () => {
    it('should return true if there is content', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should return false if there is no content', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title=""></a>'

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

  describe('_getTipElement', () => {
    it('should create the tip element and return it', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

    it('should return the created tip element', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

  describe('setContent', () => {
    it('should set tip content', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

      const tooltipEl = fixtureEl.querySelector('a')
      const tooltip = new Tooltip(tooltipEl, { animation: false })
@@ -1160,7 +1160,7 @@ describe('Tooltip', () => {
    })

    it('should re-show tip if it was already shown', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-bs-title="Another tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-bs-title="Another tooltip"></a>'

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

    it('should keep tip hidden, if it was already hidden before', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-bs-title="Another tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-bs-title="Another tooltip"></a>'

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

    it('"setContent" should keep the initial template', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

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

  describe('setContent', () => {
    it('should do nothing if the element is null', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'

      const tooltipEl = fixtureEl.querySelector('a')
      const tooltip = new Tooltip(tooltipEl)
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,7 @@
        "bundlewatch": "^0.3.3",
        "clean-css-cli": "^5.6.2",
        "cross-env": "^7.0.3",
-        "eslint": "^8.32.0",
+        "eslint": "^8.34.0",
        "eslint-config-xo": "^0.43.1",
        "eslint-plugin-html": "^7.1.0",
        "eslint-plugin-import": "^2.27.5",
@@ -53,15 +53,15 @@
        "karma-jasmine": "^5.1.0",
        "karma-jasmine-html-reporter": "^2.0.0",
        "karma-rollup-preprocessor": "7.0.7",
-        "lockfile-lint": "^4.10.0",
+        "lockfile-lint": "^4.10.1",
        "nodemon": "^2.0.20",
        "npm-run-all": "^4.1.5",
        "postcss": "^8.4.21",
        "postcss-cli": "^10.1.0",
-        "rollup": "^3.10.1",
+        "rollup": "^3.15.0",
        "rollup-plugin-istanbul": "^4.0.0",
        "rtlcss": "^4.0.0",
-        "sass": "^1.57.1",
+        "sass": "^1.58.1",
        "sass-true": "^7.0.0",
        "shelljs": "^0.8.5",
        "stylelint": "^14.16.1",
@@ -2228,9 +2228,9 @@
      "dev": true
    },
    "node_modules/@yarnpkg/parsers": {
-      "version": "3.0.0-rc.34",
-      "resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.34.tgz",
-      "integrity": "sha512-NhEA0BusInyk7EiJ7i7qF1Mkrb6gGjZcQQ/W1xxGazxapubEmGO7v5WSll6hWxFXE2ngtLj8lflq1Ff5VtqEww==",
+      "version": "3.0.0-rc.39",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.39.tgz",
+      "integrity": "sha512-BsD4zq3EVmaHqlynXTceNuEFAtrfToV4fI9GA54moKlWZL4Eb2eXrhgf1jV2nMYx18SZxYO4Jc5Kf1sCDNRjOg==",
      "dev": true,
      "dependencies": {
        "js-yaml": "^3.10.0",
@@ -4340,9 +4340,9 @@
      }
    },
    "node_modules/eslint": {
-      "version": "8.32.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.32.0.tgz",
-      "integrity": "sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==",
+      "version": "8.34.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
+      "integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
      "dev": true,
      "dependencies": {
        "@eslint/eslintrc": "^1.4.1",
@@ -7074,14 +7074,14 @@
      }
    },
    "node_modules/lockfile-lint": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/lockfile-lint/-/lockfile-lint-4.10.0.tgz",
-      "integrity": "sha512-OM11m0txImBLFzC8DVoNx+Oca11K8jXndwQV9WLwXgMeLDJtlXGbLwRBFINjyo1YQr/STrdsx3OBth3cee+41A==",
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/lockfile-lint/-/lockfile-lint-4.10.1.tgz",
+      "integrity": "sha512-I45oGDBSKThsXiogy0hABI2T8TiR4Bk1cxpPrtA2J/MdqQYZIDl1k2+KqjD/fKRJtmaWfds70nK7Hl4K6r8veQ==",
      "dev": true,
      "dependencies": {
        "cosmiconfig": "^7.0.1",
        "debug": "^4.1.1",
-        "lockfile-lint-api": "^5.5.0",
+        "lockfile-lint-api": "^5.5.1",
        "yargs": "^16.0.0"
      },
      "bin": {
@@ -7092,9 +7092,9 @@
      }
    },
    "node_modules/lockfile-lint-api": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/lockfile-lint-api/-/lockfile-lint-api-5.5.0.tgz",
-      "integrity": "sha512-L/Jk109tOSmTCPHjUEQSH/bYDRt7rgT1E2NN8/p3tmAwJuKwuWplJliVzZ+bBiIRWKmtXBDcfHnXJ9yT1shevQ==",
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/lockfile-lint-api/-/lockfile-lint-api-5.5.1.tgz",
+      "integrity": "sha512-/29lQyXOSOgqgh5dbItWYE3sm7WAO2kWH7WmbbovUDAHyRLYtVqFfDzG35zlIOzlEydEJ33DKXl8GPoLjBAvEg==",
      "dev": true,
      "dependencies": {
        "@yarnpkg/parsers": "^3.0.0-rc.32",
@@ -9192,9 +9192,9 @@
      }
    },
    "node_modules/rollup": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.10.1.tgz",
-      "integrity": "sha512-3Er+yel3bZbZX1g2kjVM+FW+RUWDxbG87fcqFM5/9HbPCTpbVp6JOLn7jlxnNlbu7s/N/uDA4EV/91E2gWnxzw==",
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.15.0.tgz",
+      "integrity": "sha512-F9hrCAhnp5/zx/7HYmftvsNBkMfLfk/dXUh73hPSM2E3CRgap65orDNJbLetoiUFwSAk6iHPLvBrZ5iHYvzqsg==",
      "dev": true,
      "bin": {
        "rollup": "dist/bin/rollup"
@@ -9316,9 +9316,9 @@
      "dev": true
    },
    "node_modules/sass": {
-      "version": "1.57.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
-      "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+      "version": "1.58.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.1.tgz",
+      "integrity": "sha512-bnINi6nPXbP1XNRaranMFEBZWUfdW/AF16Ql5+ypRxfTvCRTTKrLsMIakyDcayUt2t/RZotmL4kgJwNH5xO+bg==",
      "dev": true,
      "dependencies": {
        "chokidar": ">=3.0.0 <4.0.0",
@@ -10420,9 +10420,9 @@
      }
    },
    "node_modules/tslib": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
      "dev": true
    },
    "node_modules/tunnel-agent": {
@@ -12448,9 +12448,9 @@
      "dev": true
    },
    "@yarnpkg/parsers": {
-      "version": "3.0.0-rc.34",
-      "resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.34.tgz",
-      "integrity": "sha512-NhEA0BusInyk7EiJ7i7qF1Mkrb6gGjZcQQ/W1xxGazxapubEmGO7v5WSll6hWxFXE2ngtLj8lflq1Ff5VtqEww==",
+      "version": "3.0.0-rc.39",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.39.tgz",
+      "integrity": "sha512-BsD4zq3EVmaHqlynXTceNuEFAtrfToV4fI9GA54moKlWZL4Eb2eXrhgf1jV2nMYx18SZxYO4Jc5Kf1sCDNRjOg==",
      "dev": true,
      "requires": {
        "js-yaml": "^3.10.0",
@@ -14044,9 +14044,9 @@
      "dev": true
    },
    "eslint": {
-      "version": "8.32.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.32.0.tgz",
-      "integrity": "sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==",
+      "version": "8.34.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
+      "integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
      "dev": true,
      "requires": {
        "@eslint/eslintrc": "^1.4.1",
@@ -16086,21 +16086,21 @@
      }
    },
    "lockfile-lint": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/lockfile-lint/-/lockfile-lint-4.10.0.tgz",
-      "integrity": "sha512-OM11m0txImBLFzC8DVoNx+Oca11K8jXndwQV9WLwXgMeLDJtlXGbLwRBFINjyo1YQr/STrdsx3OBth3cee+41A==",
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/lockfile-lint/-/lockfile-lint-4.10.1.tgz",
+      "integrity": "sha512-I45oGDBSKThsXiogy0hABI2T8TiR4Bk1cxpPrtA2J/MdqQYZIDl1k2+KqjD/fKRJtmaWfds70nK7Hl4K6r8veQ==",
      "dev": true,
      "requires": {
        "cosmiconfig": "^7.0.1",
        "debug": "^4.1.1",
-        "lockfile-lint-api": "^5.5.0",
+        "lockfile-lint-api": "^5.5.1",
        "yargs": "^16.0.0"
      }
    },
    "lockfile-lint-api": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/lockfile-lint-api/-/lockfile-lint-api-5.5.0.tgz",
-      "integrity": "sha512-L/Jk109tOSmTCPHjUEQSH/bYDRt7rgT1E2NN8/p3tmAwJuKwuWplJliVzZ+bBiIRWKmtXBDcfHnXJ9yT1shevQ==",
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/lockfile-lint-api/-/lockfile-lint-api-5.5.1.tgz",
+      "integrity": "sha512-/29lQyXOSOgqgh5dbItWYE3sm7WAO2kWH7WmbbovUDAHyRLYtVqFfDzG35zlIOzlEydEJ33DKXl8GPoLjBAvEg==",
      "dev": true,
      "requires": {
        "@yarnpkg/parsers": "^3.0.0-rc.32",
@@ -17611,9 +17611,9 @@
      }
    },
    "rollup": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.10.1.tgz",
-      "integrity": "sha512-3Er+yel3bZbZX1g2kjVM+FW+RUWDxbG87fcqFM5/9HbPCTpbVp6JOLn7jlxnNlbu7s/N/uDA4EV/91E2gWnxzw==",
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.15.0.tgz",
+      "integrity": "sha512-F9hrCAhnp5/zx/7HYmftvsNBkMfLfk/dXUh73hPSM2E3CRgap65orDNJbLetoiUFwSAk6iHPLvBrZ5iHYvzqsg==",
      "dev": true,
      "requires": {
        "fsevents": "~2.3.2"
@@ -17683,9 +17683,9 @@
      "dev": true
    },
    "sass": {
-      "version": "1.57.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
-      "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+      "version": "1.58.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.1.tgz",
+      "integrity": "sha512-bnINi6nPXbP1XNRaranMFEBZWUfdW/AF16Ql5+ypRxfTvCRTTKrLsMIakyDcayUt2t/RZotmL4kgJwNH5xO+bg==",
      "dev": true,
      "requires": {
        "chokidar": ">=3.0.0 <4.0.0",
@@ -18550,9 +18550,9 @@
      }
    },
    "tslib": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
      "dev": true
    },
    "tunnel-agent": {
--- a/package.json
+++ b/package.json
@@ -74,8 +74,9 @@
    "js-test-cloud": "cross-env BROWSERSTACK=true npm run js-test-karma",
    "js-test-jquery": "cross-env JQUERY=true npm run js-test-karma",
    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint",
-    "docs": "npm-run-all docs-build docs-lint",
+    "docs": "npm-run-all docs-build docs-lint docs-check-unused-templates",
    "docs-build": "hugo --cleanDestinationDir",
+    "docs-check-unused-templates": "hugo --printUnusedTemplates",
    "docs-compile": "npm run docs-build",
    "docs-vnu": "node build/vnu-jar.js",
    "docs-lint": "npm run docs-vnu",
@@ -115,7 +116,7 @@
    "bundlewatch": "^0.3.3",
    "clean-css-cli": "^5.6.2",
    "cross-env": "^7.0.3",
-    "eslint": "^8.32.0",
+    "eslint": "^8.34.0",
    "eslint-config-xo": "^0.43.1",
    "eslint-plugin-html": "^7.1.0",
    "eslint-plugin-import": "^2.27.5",
@@ -137,15 +138,15 @@
    "karma-jasmine": "^5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "karma-rollup-preprocessor": "7.0.7",
-    "lockfile-lint": "^4.10.0",
+    "lockfile-lint": "^4.10.1",
    "nodemon": "^2.0.20",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.21",
    "postcss-cli": "^10.1.0",
-    "rollup": "^3.10.1",
+    "rollup": "^3.15.0",
    "rollup-plugin-istanbul": "^4.0.0",
    "rtlcss": "^4.0.0",
-    "sass": "^1.57.1",
+    "sass": "^1.58.1",
    "sass-true": "^7.0.0",
    "shelljs": "^0.8.5",
    "stylelint": "^14.16.1",
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -59,10 +59,10 @@
 // Generate contextual modifier classes for colorizing the alert
@each $state in map-keys($theme-colors) {
  .alert-#{$state} {
-    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text);
+    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
-    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text);
+    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
 }
 // scss-docs-end alert-modifiers
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -182,7 +182,7 @@

@each $state in map-keys($theme-colors) {
  .list-group-item-#{$state} {
-    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text);
+    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
@@ -190,8 +190,8 @@
    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
-    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text);
-    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text);
+    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
+    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
 }
 // scss-docs-end list-group-modifiers
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -146,11 +146,6 @@

  gap: var(--#{$prefix}nav-underline-gap);

-  // .nav-item + .nav-item,
-  // .nav-link + .nav-link {
-  //   margin-left: $nav-link-padding-x;
-  // }
-
  .nav-link {
    padding-right: 0;
    padding-left: 0;
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -177,8 +177,9 @@ $utilities: map-merge(
      values: $utilities-border-subtle
    ),
    "border-width": (
-      css-var: true,
-      css-variable-name: border-width,
+      property: border-width,
+      // css-var: true,
+      // css-variable-name: border-width,
      class: border,
      values: $border-widths
    ),
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1234,7 +1234,7 @@ $dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg) !default;
 $dropdown-link-active-color:        $component-active-color !default;
 $dropdown-link-active-bg:           $component-active-bg !default;

-$dropdown-link-disabled-color:      $gray-500 !default;
+$dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color) !default;

 $dropdown-item-padding-y:           $spacer * .25 !default;
 $dropdown-item-padding-x:           $spacer !default;
--- a/scss/tests/utilities/_api.test.scss
+++ b/scss/tests/utilities/_api.test.scss
@@ -27,10 +27,9 @@ $utilities: ();

    $grid-breakpoints: (
      xs: 0,
-      sm: 576px,
-      md: 768px
-    );
-
+      sm: 333px,
+      md: 666px
+    ) !global;

    @include assert() {
      @include output() {
@@ -52,13 +51,13 @@ $utilities: ();
          font-size: 1.25rem !important;
        }

-        @media (min-width: 576px) {
+        @media (min-width: 333px) {
          .padding-sm-1rem {
            padding: 1rem !important;
          }
        }

-        @media (min-width: 768px) {
+        @media (min-width: 666px) {
          .padding-md-1rem {
            padding: 1rem !important;
          }
--- a/site/assets/js/search.js
+++ b/site/assets/js/search.js
@@ -40,8 +40,6 @@

        return item
      })
-    },
-    // Set debug to `true` if you want to inspect the dropdown
-    debug: false
+    }
  })
 })()
--- a/site/assets/scss/_scrolling.scss
+++ b/site/assets/scss/_scrolling.scss
@@ -0,0 +1,5 @@
+// When navigating with the keyboard, prevent focus from landing behind the sticky header
+
+main *:focus {
+  scroll-margin-top: 100px;
+}
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type, selector-no-qualifying-type, selector-max-compound-selectors
+// stylelint-disable selector-max-type, selector-no-qualifying-type

 .bd-toc {
  @include media-breakpoint-up(lg) {
@@ -16,22 +16,16 @@
    ul {
      padding-left: 0;
      margin-bottom: 0;
-      margin-left: -.75rem;
      list-style: none;

      ul {
        padding-left: 1rem;
-        margin-left: -1rem;
-
-        a {
-          padding-left: 1.375rem;
-        }
      }
    }

    a {
      display: block;
-      padding: .125rem 0 .125rem .625rem;
+      padding: .125rem 0 .125rem .75rem;
      color: inherit;
      text-decoration: none;
      border-left: .125rem solid transparent;
@@ -86,7 +80,7 @@
 .bd-toc-collapse {
  @include media-breakpoint-down(md) {
    nav {
-      padding: 1.25rem;
+      padding: 1.25rem 1.25rem 1.25rem 1rem;
      background-color: var(--bs-tertiary-bg);
      border: 1px solid var(--bs-border-color);
      @include border-radius(var(--bs-border-radius));
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -52,6 +52,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
@import "colors";
@import "clipboard-js";
@import "placeholder-img";
+@import "scrolling";

 // Load docs dependencies
@import "syntax";
--- a/site/content/docs/5.3/components/navs-tabs.md
+++ b/site/content/docs/5.3/components/navs-tabs.md
@@ -183,7 +183,7 @@ Take that same HTML, but use `.nav-underline` instead:
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
-    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+    <a class="nav-link disabled">Disabled</a>
  </li>
 </ul>
 {{< /example >}}
--- a/site/content/docs/5.3/components/progress.md
+++ b/site/content/docs/5.3/components/progress.md
@@ -15,7 +15,7 @@ toc: true
 Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them.

 - We use the `.progress` as a wrapper to indicate the max value of the progress bar.
- The `.progress` wrapper also requires a `role="progress"` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar).
+- The `.progress` wrapper also requires a `role="progressbar"` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar).
 - We use the inner `.progress-bar` purely for the visual bar and label.
 - The `.progress-bar` requires an inline style, utility class, or custom CSS to set its width.
 - We provide a special `.progress-stacked` class to create multiple/stacked progress bars.
--- a/site/content/docs/5.3/getting-started/introduction.md
+++ b/site/content/docs/5.3/getting-started/introduction.md
@@ -119,7 +119,7 @@ Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some fun
 </html>
 ```

-### Responsive meta tag
+### Viewport meta

 Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your `<head>`.

--- a/site/content/docs/5.3/getting-started/javascript.md
+++ b/site/content/docs/5.3/getting-started/javascript.md
@@ -71,7 +71,7 @@ To fix this, you can use an `importmap` to resolve the arbitrary module names to
    <script type="importmap">
    {
      "imports": {
-        "@popperjs/core": "{{< param "cdn.popper" >}}",
+        "@popperjs/core": "{{< param "cdn.popper_esm" >}}",
        "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@{{< param "current_version" >}}/dist/js/bootstrap.esm.min.js"
      }
    }
--- a/site/content/docs/5.3/migration.md
+++ b/site/content/docs/5.3/migration.md
@@ -51,6 +51,8 @@ If you're migrating from our previous alpha release of v5.3.0, please reviewing

 - Added new link utilities for link color opacity, underline offset, underline color, and underline opacity. [Explore the new links utilities.]({{< docsref "/utilities/link" >}})

+- CSS variable based `border-width` utilities have been reverted to set their property directly (as was done prior to v5.2.0). This avoids inheritance issues across nested elements, including tables.
+
 ### Docs

 - Examples are now displayed with the appropriate light or dark color mode as dictated by the setting in our docs. However, they lack an individual color mode picker for the time being.
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -32,13 +32,13 @@
      </div>

      {{ if (eq .Page.Params.toc true) }}
-        <div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-body-secondary">
+        <div class="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
          <button class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
            On this page
            <svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
          </button>
-          <strong class="d-none d-md-block h6 my-2">On this page</strong>
-          <hr class="d-none d-md-block my-2">
+          <strong class="d-none d-md-block h6 my-2 ms-3">On this page</strong>
+          <hr class="d-none d-md-block my-2 ms-3">
          <div class="collapse bd-toc-collapse" id="tocContents">
            {{ .TableOfContents }}
          </div>
--- a/site/layouts/partials/icons/bootstrap-logo-solid.svg
+++ b/site/layouts/partials/icons/bootstrap-logo-solid.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 64 64" role="img"><title>{{ with .title }}{{ . }}{{ else }}Bootstrap{{ end }}</title><path fill="currentColor" fill-rule="evenodd" d="M16 0h32c8.837 0 16 7.163 16 16v32c0 8.837-7.163 16-16 16H16C7.163 64 0 56.837 0 48V16C0 7.163 7.163 0 16 0zm18.14 49c7.22 0 11.555-3.633 11.555-9.586 0-4.406-3.047-7.664-7.617-8.133v-.398c3.328-.563 5.93-3.727 5.93-7.266 0-5.203-3.82-8.437-10.172-8.437H20.242V49h13.899zm-8.648-29.367h7.125c3.89 0 6.164 1.828 6.164 4.945 0 3.211-2.414 4.922-7.054 4.922h-6.235v-9.867zm0 24.914V33.648h7.29c4.945 0 7.546 1.852 7.546 5.391 0 3.586-2.508 5.508-7.242 5.508h-7.594z"/></svg>
--- a/site/layouts/partials/icons/bootstrap.svg
+++ b/site/layouts/partials/icons/bootstrap.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 612 612" role="img"><title>{{ with .title }}{{ . }}{{ else }}Bootstrap{{ end }}</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
--- a/site/layouts/partials/icons/cloud-fill.svg
+++ b/site/layouts/partials/icons/cloud-fill.svg
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" focusable="false" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M3.5 13a3.5 3.5 0 11.59-6.95 5.002 5.002 0 119.804 1.98A2.5 2.5 0 0113.5 13h-10z" clip-rule="evenodd"/>
-</svg>
--- a/site/layouts/partials/icons/code.svg
+++ b/site/layouts/partials/icons/code.svg
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" focusable="false" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M5.854 4.146a.5.5 0 010 .708L2.707 8l3.147 3.146a.5.5 0 01-.708.708l-3.5-3.5a.5.5 0 010-.708l3.5-3.5a.5.5 0 01.708 0zm4.292 0a.5.5 0 000 .708L13.293 8l-3.147 3.146a.5.5 0 00.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 00-.708 0z" clip-rule="evenodd"/>
-</svg>
--- a/site/layouts/partials/icons/collapse.svg
+++ b/site/layouts/partials/icons/collapse.svg
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16">
-  <title>{{ with .title }}{{ . }}{{ else }}Collapse{{ end }}</title>
-  <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/>
-</svg>
--- a/site/layouts/partials/icons/expand.svg
+++ b/site/layouts/partials/icons/expand.svg
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16">
-  <title>{{ with .title }}{{ . }}{{ else }}Expand{{ end }}</title>
-  <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/>
-</svg>
--- a/site/layouts/partials/icons/homepage-hero.svg
+++ b/site/layouts/partials/icons/homepage-hero.svg
--- a/site/layouts/partials/icons/list.svg
+++ b/site/layouts/partials/icons/list.svg
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
-</svg>
--- a/site/layouts/partials/icons/menu.svg
+++ b/site/layouts/partials/icons/menu.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 30 30" role="img"><title>{{ with .title }}{{ . }}{{ else }}Menu{{ end }}</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg>
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 64 64" role="img"><title>{{ with .title }}{{ . }}{{ else }}Bootstrap{{ end }}</title><path fill="currentColor" fill-rule="evenodd" d="M16 0h32c8.837 0 16 7.163 16 16v32c0 8.837-7.163 16-16 16H16C7.163 64 0 56.837 0 48V16C0 7.163 7.163 0 16 0zm18.14 49c7.22 0 11.555-3.633 11.555-9.586 0-4.406-3.047-7.664-7.617-8.133v-.398c3.328-.563 5.93-3.727 5.93-7.266 0-5.203-3.82-8.437-10.172-8.437H20.242V49h13.899zm-8.648-29.367h7.125c3.89 0 6.164 1.828 6.164 4.945 0 3.211-2.414 4.922-7.054 4.922h-6.235v-9.867zm0 24.914V33.648h7.29c4.945 0 7.546 1.852 7.546 5.391 0 3.586-2.508 5.508-7.242 5.508h-7.594z"/></svg>
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 30 30" role="img"><title>{{ with .title }}{{ . }}{{ else }}Menu{{ end }}</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg>`