Merge branch 'main' into patrickhlauke-issue36736

.github/CONTRIBUTING.md

@@ -18,9 +18,7 @@ the preferred channel for [bug reports](#bug-reports), [features requests](#feat
 and [submitting pull requests](#pull-requests), but please respect the following
 restrictions:
 
-* Please **do not** use the issue tracker for personal support requests.  Stack
+* Please **do not** use the issue tracker for personal support requests. Stack Overflow ([`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag), [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions) or [IRC](/README.md#community) are better places to get help.
-  Overflow ([`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag),
-  [Slack](https://bootstrap-slack.herokuapp.com/) or [IRC](/README.md#community) are better places to get help.
 
 * Please **do not** derail or troll issues. Keep the discussion on topic and
   respect the opinions of others.

.github/SUPPORT.md

@@ -6,6 +6,6 @@ See the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports.
 
 For general troubleshooting or help getting started:
 
-- Join [the official Slack room](https://bootstrap-slack.herokuapp.com/).
+- Ask and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
 - Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.
 - Ask and explore Stack Overflow with the [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag.

README.md

@@ -58,7 +58,6 @@ Read the [Getting started page](https://getbootstrap.com/docs/5.2/getting-starte
 
 ## Status
 
-[![Slack](https://bootstrap-slack.herokuapp.com/badge.svg)](https://bootstrap-slack.herokuapp.com/)
 [![Build Status](https://img.shields.io/github/workflow/status/twbs/bootstrap/JS%20Tests/main?label=JS%20Tests&logo=github)](https://github.com/twbs/bootstrap/actions?query=workflow%3AJS+Tests+branch%3Amain)
 [![npm version](https://img.shields.io/npm/v/bootstrap)](https://www.npmjs.com/package/bootstrap)
 [![Gem version](https://img.shields.io/gem/v/bootstrap)](https://rubygems.org/gems/bootstrap)
@@ -138,7 +137,7 @@ We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified
 
 ## Bugs and feature requests
 
-Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new).
+Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new/choose).
 
 
 ## Documentation
@@ -178,7 +177,7 @@ Get updates on Bootstrap's development and chat with the project maintainers and
 
 - Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
 - Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com/).
-- Join [the official Slack room](https://bootstrap-slack.herokuapp.com/).
+- Ask and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
 - Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.
 - Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)).
 - Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.

config.yml

@@ -48,10 +48,9 @@ module:
       target:           static/favicon.ico
 
 params:
-  description:          "The most popular HTML, CSS, and JS library in the world."
+  subtitle:             "The most popular HTML, CSS, and JS library in the world."
+  description:          "Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins."
   authors:              "Mark Otto, Jacob Thornton, and Bootstrap contributors"
-  social_image_path:    /docs/5.2/assets/brand/bootstrap-social.png
-  social_logo_path:     /docs/5.2/assets/brand/bootstrap-social-logo.png
 
   current_version:      "5.2.0"
   current_ruby_version: "5.2.0"
@@ -60,7 +59,6 @@ params:
   github_org:           "https://github.com/twbs"
   repo:                 "https://github.com/twbs/bootstrap"
   twitter:              "getbootstrap"
-  slack:                "https://bootstrap-slack.herokuapp.com/"
   opencollective:       "https://opencollective.com/bootstrap"
   blog:                 "https://blog.getbootstrap.com/"
   themes:               "https://themes.getbootstrap.com/"

js/src/scrollspy.js

@@ -40,14 +40,16 @@ const Default = {
   offset: null, // TODO: v6 @deprecated, keep it for backwards compatibility reasons
   rootMargin: '0px 0px -25%',
   smoothScroll: false,
-  target: null
+  target: null,
+  threshold: [0.1, 0.5, 1]
 }
 
 const DefaultType = {
   offset: '(number|null)', // TODO v6 @deprecated, keep it for backwards compatibility reasons
   rootMargin: 'string',
   smoothScroll: 'boolean',
-  target: 'element'
+  target: 'element',
+  threshold: 'array'
 }
 
 /**
@@ -110,6 +112,13 @@ class ScrollSpy extends BaseComponent {
     // TODO: on v6 target should be given explicitly & remove the {target: 'ss-target'} case
     config.target = getElement(config.target) || document.body
 
+    // TODO: v6 Only for backwards compatibility reasons. Use rootMargin only
+    config.rootMargin = config.offset ? `${config.offset}px 0px -30%` : config.rootMargin
+
+    if (typeof config.threshold === 'string') {
+      config.threshold = config.threshold.split(',').map(value => Number.parseFloat(value))
+    }
+
     return config
   }
 
@@ -141,8 +150,8 @@ class ScrollSpy extends BaseComponent {
   _getNewObserver() {
     const options = {
       root: this._rootElement,
-      threshold: [0.1, 0.5, 1],
+      threshold: this._config.threshold,
-      rootMargin: this._getRootMargin()
+      rootMargin: this._config.rootMargin
     }
 
     return new IntersectionObserver(entries => this._observerCallback(entries), options)
@@ -187,11 +196,6 @@ class ScrollSpy extends BaseComponent {
     }
   }
 
-  // TODO: v6 Only for backwards compatibility reasons. Use rootMargin only
-  _getRootMargin() {
-    return this._config.offset ? `${this._config.offset}px 0px -30%` : this._config.rootMargin
-  }
-
   _initializeTargetsAndObservables() {
     this._targetLinks = new Map()
     this._observableSections = new Map()

js/src/tooltip.js

@@ -185,6 +185,10 @@ class Tooltip extends BaseComponent {
       this.tip.remove()
     }
 
+    if (this._config.originalTitle) {
+      this._element.setAttribute('title', this._config.originalTitle)
+    }
+
     this._disposePopper()
     super.dispose()
   }

js/tests/unit/scrollspy.spec.js

@@ -126,6 +126,50 @@ describe('ScrollSpy', () => {
       expect(scrollSpy._rootElement).toBeNull()
     })
 
+    it('should respect threshold option', () => {
+      fixtureEl.innerHTML = [
+        '<ul id="navigation" class="navbar">',
+        '   <a class="nav-link active" id="one-link" href="#">One</a>' +
+        '</ul>',
+        '<div id="content">',
+        '  <div id="one-link">test</div>',
+        '</div>'
+      ].join('')
+
+      const scrollSpy = new ScrollSpy('#content', {
+        target: '#navigation',
+        threshold: [1]
+      })
+
+      expect(scrollSpy._observer.thresholds).toEqual([1])
+    })
+
+    it('should respect threshold option markup', () => {
+      fixtureEl.innerHTML = [
+        '<ul id="navigation" class="navbar">',
+        '   <a class="nav-link active" id="one-link" href="#">One</a>' +
+        '</ul>',
+        '<div id="content" data-bs-threshold="0,0.2,1">',
+        '  <div id="one-link">test</div>',
+        '</div>'
+      ].join('')
+
+      const scrollSpy = new ScrollSpy('#content', {
+        target: '#navigation'
+      })
+
+      // See https://stackoverflow.com/a/45592926
+      const expectToBeCloseToArray = (actual, expected) => {
+        expect(actual.length).toBe(expected.length)
+        for (const x of actual) {
+          const i = actual.indexOf(x)
+          expect(x).withContext(`[${i}]`).toBeCloseTo(expected[i])
+        }
+      }
+
+      expectToBeCloseToArray(scrollSpy._observer.thresholds, [0, 0.2, 1])
+    })
+
     it('should not take count to not visible sections', () => {
       fixtureEl.innerHTML = [
         '<nav id="navigation" class="navbar">',

js/tests/unit/tooltip.spec.js

@@ -419,6 +419,25 @@ describe('Tooltip', () => {
         tooltip.show()
       })
     })
+
+    it('should destroy a tooltip and reset it\'s initial title', () => {
+      fixtureEl.innerHTML = [
+        '<span id="tooltipWithTitle" rel="tooltip" title="tooltipTitle"></span>',
+        '<span id="tooltipWithoutTitle" rel="tooltip" data-bs-title="tooltipTitle"></span>'
+      ].join('')
+
+      const tooltipWithTitleEl = fixtureEl.querySelector('#tooltipWithTitle')
+      const tooltip = new Tooltip('#tooltipWithTitle')
+      expect(tooltipWithTitleEl.getAttribute('title')).toBeNull()
+      tooltip.dispose()
+      expect(tooltipWithTitleEl.getAttribute('title')).toBe('tooltipTitle')
+
+      const tooltipWithoutTitleEl = fixtureEl.querySelector('#tooltipWithoutTitle')
+      const tooltip2 = new Tooltip('#tooltipWithTitle')
+      expect(tooltipWithoutTitleEl.getAttribute('title')).toBeNull()
+      tooltip2.dispose()
+      expect(tooltipWithoutTitleEl.getAttribute('title')).toBeNull()
+    })
   })
 
   describe('show', () => {

package-lock.json

@@ -51,7 +51,7 @@
         "karma-jasmine": "^5.1.0",
         "karma-jasmine-html-reporter": "^2.0.0",
         "karma-rollup-preprocessor": "7.0.7",
-        "lockfile-lint": "^4.7.6",
+        "lockfile-lint": "^4.7.7",
         "nodemon": "^2.0.19",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.14",
@@ -59,7 +59,7 @@
         "rollup": "^2.77.0",
         "rollup-plugin-istanbul": "^3.0.0",
         "rtlcss": "^3.5.0",
-        "sass": "^1.53.0",
+        "sass": "^1.54.0",
         "shelljs": "^0.8.5",
         "stylelint": "^14.9.1",
         "stylelint-config-twbs-bootstrap": "^5.0.0",
@@ -2102,9 +2102,9 @@
       "dev": true
     },
     "node_modules/@yarnpkg/parsers": {
-      "version": "3.0.0-rc.12",
+      "version": "3.0.0-rc.14",
-      "resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.12.tgz",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.14.tgz",
-      "integrity": "sha512-LEijAfCE8dMhW+tRBz9EM3Ui53SX+E6Tsvzaf7opESDARK+2HAyX+M/w73oNTXCOgMRrfMVWP5wJTj9cG96uoQ==",
+      "integrity": "sha512-vLwjxSdmRNF/pPsubkmpkAgRHBbBylRDn13gv2fyTkHjeT2257NBNefjR7Dx5gSy8PM93VZitnmtWCnXEsSvkA==",
       "dev": true,
       "dependencies": {
         "js-yaml": "^3.10.0",
@@ -6685,14 +6685,14 @@
       }
     },
     "node_modules/lockfile-lint": {
-      "version": "4.7.6",
+      "version": "4.7.7",
-      "resolved": "https://registry.npmjs.org/lockfile-lint/-/lockfile-lint-4.7.6.tgz",
+      "resolved": "https://registry.npmjs.org/lockfile-lint/-/lockfile-lint-4.7.7.tgz",
-      "integrity": "sha512-vk1EgNh+fkaFWvnrQ/wDMflbkBS0zHx/z0ZjbkMiYObR9rT29AhSHLH6cH52/QG7UqHqSCa64uu8j/nXYubmkQ==",
+      "integrity": "sha512-JRB9ChNc9AtrC1sRmcSdYgCr7nVioth73Ssyq8tx3ZnBKuFymADFJDSK/aTFDt4OSdymr02lBtBNGvYs2CRFtg==",
       "dev": true,
       "dependencies": {
         "cosmiconfig": "^6.0.0",
         "debug": "^4.1.1",
-        "lockfile-lint-api": "^5.2.6",
+        "lockfile-lint-api": "^5.2.7",
         "yargs": "^16.0.0"
       },
       "bin": {
@@ -6703,9 +6703,9 @@
       }
     },
     "node_modules/lockfile-lint-api": {
-      "version": "5.2.6",
+      "version": "5.2.7",
-      "resolved": "https://registry.npmjs.org/lockfile-lint-api/-/lockfile-lint-api-5.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/lockfile-lint-api/-/lockfile-lint-api-5.2.7.tgz",
-      "integrity": "sha512-FY9DRVKH83P5qMqepVlJDUCSstts/4mW0wpB+rC9yEHHyYn4hHaRBnCqaC9/Qk2JITIQlArrO/eBwoEOnSE84Q==",
+      "integrity": "sha512-FVS5bI3xaK0fGtaogZw7q7sINqHoYASJyRdNyOHeq0NCbQZX6b3rBEdxjXjjJM+34oovh7hmdyT8UjHLnfzCnw==",
       "dev": true,
       "dependencies": {
         "@yarnpkg/parsers": "^3.0.0-rc.6",
@@ -8895,9 +8895,9 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.53.0",
+      "version": "1.54.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.0.tgz",
-      "integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==",
+      "integrity": "sha512-C4zp79GCXZfK0yoHZg+GxF818/aclhp9F48XBu/+bm9vXEVAYov9iU3FBVRMq3Hx3OA4jfKL+p2K9180mEh0xQ==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -11916,9 +11916,9 @@
       "dev": true
     },
     "@yarnpkg/parsers": {
-      "version": "3.0.0-rc.12",
+      "version": "3.0.0-rc.14",
-      "resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.12.tgz",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.0-rc.14.tgz",
-      "integrity": "sha512-LEijAfCE8dMhW+tRBz9EM3Ui53SX+E6Tsvzaf7opESDARK+2HAyX+M/w73oNTXCOgMRrfMVWP5wJTj9cG96uoQ==",
+      "integrity": "sha512-vLwjxSdmRNF/pPsubkmpkAgRHBbBylRDn13gv2fyTkHjeT2257NBNefjR7Dx5gSy8PM93VZitnmtWCnXEsSvkA==",
       "dev": true,
       "requires": {
         "js-yaml": "^3.10.0",
@@ -15388,21 +15388,21 @@
       }
     },
     "lockfile-lint": {
-      "version": "4.7.6",
+      "version": "4.7.7",
-      "resolved": "https://registry.npmjs.org/lockfile-lint/-/lockfile-lint-4.7.6.tgz",
+      "resolved": "https://registry.npmjs.org/lockfile-lint/-/lockfile-lint-4.7.7.tgz",
-      "integrity": "sha512-vk1EgNh+fkaFWvnrQ/wDMflbkBS0zHx/z0ZjbkMiYObR9rT29AhSHLH6cH52/QG7UqHqSCa64uu8j/nXYubmkQ==",
+      "integrity": "sha512-JRB9ChNc9AtrC1sRmcSdYgCr7nVioth73Ssyq8tx3ZnBKuFymADFJDSK/aTFDt4OSdymr02lBtBNGvYs2CRFtg==",
       "dev": true,
       "requires": {
         "cosmiconfig": "^6.0.0",
         "debug": "^4.1.1",
-        "lockfile-lint-api": "^5.2.6",
+        "lockfile-lint-api": "^5.2.7",
         "yargs": "^16.0.0"
       }
     },
     "lockfile-lint-api": {
-      "version": "5.2.6",
+      "version": "5.2.7",
-      "resolved": "https://registry.npmjs.org/lockfile-lint-api/-/lockfile-lint-api-5.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/lockfile-lint-api/-/lockfile-lint-api-5.2.7.tgz",
-      "integrity": "sha512-FY9DRVKH83P5qMqepVlJDUCSstts/4mW0wpB+rC9yEHHyYn4hHaRBnCqaC9/Qk2JITIQlArrO/eBwoEOnSE84Q==",
+      "integrity": "sha512-FVS5bI3xaK0fGtaogZw7q7sINqHoYASJyRdNyOHeq0NCbQZX6b3rBEdxjXjjJM+34oovh7hmdyT8UjHLnfzCnw==",
       "dev": true,
       "requires": {
         "@yarnpkg/parsers": "^3.0.0-rc.6",
@@ -16976,9 +16976,9 @@
       "dev": true
     },
     "sass": {
-      "version": "1.53.0",
+      "version": "1.54.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.53.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.0.tgz",
-      "integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==",
+      "integrity": "sha512-C4zp79GCXZfK0yoHZg+GxF818/aclhp9F48XBu/+bm9vXEVAYov9iU3FBVRMq3Hx3OA4jfKL+p2K9180mEh0xQ==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",

package.json

@@ -136,7 +136,7 @@
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
     "karma-rollup-preprocessor": "7.0.7",
-    "lockfile-lint": "^4.7.6",
+    "lockfile-lint": "^4.7.7",
     "nodemon": "^2.0.19",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.14",
@@ -144,7 +144,7 @@
     "rollup": "^2.77.0",
     "rollup-plugin-istanbul": "^3.0.0",
     "rtlcss": "^3.5.0",
-    "sass": "^1.53.0",
+    "sass": "^1.54.0",
     "shelljs": "^0.8.5",
     "stylelint": "^14.9.1",
     "stylelint-config-twbs-bootstrap": "^5.0.0",

scss/_pagination.scss

@@ -75,7 +75,7 @@
     margin-left: $pagination-margin-start;
   }
 
-  @if $pagination-margin-start == (calc($pagination-border-width * -1)) {
+  @if $pagination-margin-start == ($pagination-border-width * -1) {
     &:first-child {
       .page-link {
         @include border-start-radius(var(--#{$prefix}pagination-border-radius));

site/assets/scss/_navbar.scss

@@ -4,6 +4,12 @@
   background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
   box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
 
+  .bd-navbar-toggle {
+    @include media-breakpoint-down(lg) {
+      width: 4.25rem;
+    }
+  }
+
   .navbar-toggler {
     padding: 0;
     margin-right: -.5rem;

site/assets/scss/_search.scss

@@ -2,7 +2,6 @@
 
 .bd-search {
   position: relative;
-  width: 100%;
 
   @include media-breakpoint-up(lg) {
     position: absolute;
@@ -57,6 +56,26 @@
       opacity: 1;
     }
   }
+
+  @include media-breakpoint-down(lg) {
+    &,
+    &:hover,
+    &:focus {
+      background: transparent;
+      border: 0;
+      box-shadow: none;
+    }
+    &:focus {
+      box-shadow: var(--docsearch-searchbox-shadow);
+    }
+  }
+}
+
+.DocSearch-Button-Keys,
+.DocSearch-Button-Placeholder {
+  @include media-breakpoint-down(lg) {
+    display: none;
+  }
 }
 
 .DocSearch-Button-Keys {

site/content/docs/5.2/about/overview.md

@@ -26,4 +26,4 @@ Our latest release, Bootstrap 5, focuses on improving v4's codebase with as few
 
 ## Get involved
 
-Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.
+Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new/choose) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.

site/content/docs/5.2/about/team.md

@@ -20,4 +20,4 @@ Bootstrap is maintained by the founding team and a small group of invaluable cor
 </div>
 {{< /team.inline >}}
 
-Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.
+Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new/choose) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop.

site/content/docs/5.2/components/navbar.md

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

site/content/docs/5.2/components/offcanvas.md

@@ -81,6 +81,8 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ
 
 ### Dark offcanvas
 
+{{< added-in "5.2.0" >}}
+
 Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
 
 {{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
@@ -155,7 +157,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
 
 ## Responsive
 
-<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
+{{< added-in "5.2.0" >}}
 
 Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.offcanvas-lg` hides content in an offcanvas below the `lg` breakpoint, but shows the content above the `lg` breakpoint.
 
@@ -245,7 +247,7 @@ Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-l
 
 ### Variables
 
-<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
+{{< added-in "5.2.0" >}}
 
 As part of Bootstrap's evolving CSS variables approach, offcanvas now uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 

site/content/docs/5.2/components/scrollspy.md

@@ -380,6 +380,8 @@ const scrollSpy = new bootstrap.ScrollSpy(document.body, {
 | `rootMargin` | string | `0px 0px -40%` | Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) valid units, when calculating scroll position. |
 | `smoothScroll` | boolean | `false` | Enables smooth scrolling when a user clicks on a link that refers to ScrollSpy observables. |
 | `target` | string \| jQuery object \| DOM element |  | Specifies element to apply Scrollspy plugin. |
+| `threshold` | array | `[0.1, 0.5, 1]` | `IntersectionObserver` [threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#threshold) valid input, when calculating scroll position.|
+
 {{< /bs-table >}}
 
 {{< callout warning >}}

site/content/docs/5.2/components/tooltips.md

@@ -212,7 +212,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
 | `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. |
 | `customClass` | string, function | `''` | Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
 | `delay` | number, object | `0` | Delay showing and hiding the tooltip (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
-| `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements. |
+| `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
 | `html` | boolean | `false` | Allow HTML in the tooltip. If true, HTML tags in the tooltip's `title` will be rendered in the tooltip. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
 | `offset` | number, string, function | `[0, 0]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
 | `placement` | string, function | `'top'` | How to position the tooltip: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the tooltip instance. |

site/content/docs/5.2/examples/_index.md

@@ -16,7 +16,7 @@ aliases: "/examples/"
         <p>
           <strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
         </p>
-        <p><a href="{{ $.Site.Params.repo }}/issues/new">Please open an issue.</a></p>
+        <p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p>
       </div>
     {{ end -}}
   </div>

site/content/docs/5.2/extend/approach.md

@@ -9,7 +9,7 @@ aliases:
 
 While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on _why_ we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.
 
-See something that doesn't sound right, or perhaps could be done better? [Open an issue]({{< param repo >}}/issues/new)—we'd love to discuss it with you.
+See something that doesn't sound right, or perhaps could be done better? [Open an issue]({{< param repo >}}/issues/new/choose)—we'd love to discuss it with you.
 
 ## Summary
 

site/content/docs/5.2/getting-started/best-practices.md

@@ -17,4 +17,4 @@ We've designed and developed Bootstrap to work in a number of environments. Here
 - Working with Sass files
 - Building new CSS components
 - Working with flexbox
-- Ask in [Slack](https://bootstrap-slack.herokuapp.com/)
+- Ask in [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions)

site/content/docs/5.2/getting-started/introduction.md

@@ -154,7 +154,7 @@ For improved cross-browser rendering, we use [Reboot]({{< docsref "/content/rebo
 Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
 
 - Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}).
-- Join [the official Slack room]({{< param slack >}}).
+- Ask and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
 - Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.
 - Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)).
 - Developers should use the keyword `bootstrap` on packages that modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability.

site/content/docs/5.2/getting-started/parcel.md

@@ -4,6 +4,7 @@ title: "Bootstrap & Parcel"
 description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Parcel.
 group: getting-started
 toc: true
+thumbnail: guides/bootstrap-parcel@2x.png
 ---
 
 <img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="2000" height="1000" alt="">

site/content/docs/5.2/getting-started/rtl.md

@@ -15,7 +15,7 @@ You may also want to read up on [the RTLCSS project](https://rtlcss.com/), as it
 {{< callout warning >}}
 ### Experimental feature
 
-The RTL feature is still **experimental** and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new), we'd love to get your insights.
+The RTL feature is still **experimental** and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new/choose), we'd love to get your insights.
 {{< /callout >}}
 
 ## Required HTML

site/content/docs/5.2/getting-started/vite.md

@@ -4,6 +4,7 @@ title: "Bootstrap & Vite"
 description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Vite.
 group: getting-started
 toc: true
+thumbnail: guides/bootstrap-vite@2x.png
 ---
 
 <img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="2000" height="1000" alt="">

site/content/docs/5.2/getting-started/webpack.md

@@ -4,6 +4,7 @@ title: "Bootstrap & Webpack"
 description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Webpack.
 group: getting-started
 toc: true
+thumbnail: guides/bootstrap-webpack@2x.png
 ---
 
 <img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png" width="2000" height="1000" alt="">

site/content/docs/5.2/utilities/borders.md

@@ -143,6 +143,8 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
 
 ### Variables
 
+{{< added-in "5.2.0" >}}
+
 {{< scss-docs name="root-border-var" file="scss/_root.scss" >}}
 
 ### Sass variables

site/layouts/partials/docs-navbar.html

@@ -1,21 +1,29 @@
 <header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
   <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
     {{- if eq .Layout "docs" }}
+    <div class="bd-navbar-toggle">
       <button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
         {{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "24" "height" "24") }}
         <span class="d-none fs-6 pe-1">Browse</span>
       </button>
+    </div>
     {{- else }}
-      <div class="d-lg-none" style="width: 2.25rem;"></div>
+      <div class="d-lg-none" style="width: 1.5rem;"></div>
     {{- end }}
 
     <a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
       {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }}
     </a>
 
-    <button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
+    <div class="d-flex">
-      <svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
+      {{ if eq .Layout "docs" }}
-    </button>
+        <div class="bd-search" id="docsearch" data-bd-docs-version="{{ .Site.Params.docs_version }}"></div>
+      {{ end }}
+
+      <button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
+        <svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
+      </button>
+    </div>
 
     <div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
       <div class="offcanvas-header px-4 pb-0">
@@ -45,12 +53,6 @@
 
         <hr class="d-lg-none text-white-50">
 
-        {{ if eq .Layout "docs" }}
-        <div class="bd-search" id="docsearch" data-bd-docs-version="{{ .Site.Params.docs_version }}"></div>
-
-        <hr class="d-lg-none text-white-50">
-        {{ end }}
-
         <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
           <li class="nav-item col-6 col-lg-auto">
             <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener">
@@ -64,12 +66,6 @@
               <small class="d-lg-none ms-2">Twitter</small>
             </a>
           </li>
-          <li class="nav-item col-6 col-lg-auto">
-            <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener">
-              {{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
-              <small class="d-lg-none ms-2">Slack</small>
-            </a>
-          </li>
           <li class="nav-item col-6 col-lg-auto">
             <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">
               {{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}

site/layouts/partials/footer.html

@@ -51,7 +51,6 @@
           <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/discussions">Discussions</a></li>
           <li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
           <li class="mb-2"><a href="{{ .Site.Params.opencollective }}">Open Collective</a></li>
-          <li class="mb-2"><a href="{{ .Site.Params.slack }}">Slack</a></li>
           <li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
         </ul>
       </div>

site/layouts/partials/header.html

@@ -7,7 +7,7 @@
 <meta name="docsearch:language" content="en">
 <meta name="docsearch:version" content="{{ .Site.Params.docs_version }}">
 
-<title>{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.description | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}</title>
+<title>{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.subtitle | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}</title>
 
 <link rel="canonical" href="{{ .Permalink }}">
 

site/layouts/partials/icons/slack.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 512 512" role="img"><title>{{ with .title }}{{ . }}{{ else }}Slack{{ end }}</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>

site/layouts/partials/social.html

@@ -1,17 +1,15 @@
-{{ "<!-- Twitter -->" | safeHTML }}
+<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:card" content="{{ if .IsHome }}summary_large_image{{ else }}summary{{ end }}">
 <meta name="twitter:site" content="@{{ .Site.Params.twitter }}">
 <meta name="twitter:creator" content="@{{ .Site.Params.twitter }}">
 <meta name="twitter:title" content="{{ .Title | markdownify }}">
 <meta name="twitter:description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
-<meta name="twitter:image" content="{{ if .IsHome }}{{ .Site.Params.social_logo_path | absURL }}{{ else }}{{ .Site.Params.social_image_path | absURL }}{{ end }}">
+<meta name="twitter:image" content="/docs/{{ .Site.Params.docs_version }}/assets/{{ if .Page.Params.thumbnail }}img/{{ .Page.Params.thumbnail }}{{else}}brand/bootstrap-social.png{{end}}">
 
-{{ "<!-- Facebook -->" | safeHTML }}
 <meta property="og:url" content="{{ .Permalink }}">
 <meta property="og:title" content="{{ .Title | markdownify }}">
 <meta property="og:description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
 <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
-<meta property="og:image" content="{{ .Site.Params.social_image_path | absURL }}">
 <meta property="og:image:type" content="image/png">
 <meta property="og:image:width" content="1000">
 <meta property="og:image:height" content="500">
+<meta property="og:image" content="/docs/{{ .Site.Params.docs_version }}/assets/{{ if .Page.Params.thumbnail }}img/{{ .Page.Params.thumbnail }}{{else}}brand/bootstrap-social.png{{end}}">