Merging upstream version 5.3.3+dfsg.

Signed-off-by: Daniel Baumann <daniel@debian.org>

.cspell.json

@@ -40,6 +40,7 @@
     "dropright",
     "dropstart",
     "dropup",
+    "dgst",
     "errorf",
     "favicon",
     "favicons",

.eslintrc.json

@@ -51,6 +51,7 @@
         "SwitchCase": 1
       }
     ],
+    "logical-assignment-operators": "off",
     "max-params": [
       "warn",
       5
@@ -75,6 +76,7 @@
       "error",
       "after"
     ],
+    "prefer-object-has-own": "off",
     "prefer-template": "error",
     "semi": [
       "error",
@@ -108,7 +110,7 @@
         "node": true
       },
       "parserOptions": {
-        "sourceType": "script"
+        "sourceType": "module"
       },
       "rules": {
         "no-console": "off",

.github/workflows/browserstack.yml

@@ -9,7 +9,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 18
+  NODE: 20
 
 permissions:
   contents: read
@@ -22,12 +22,12 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: "${{ env.NODE }}"
           cache: npm

.github/workflows/bundlewatch.yml

@@ -9,7 +9,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 18
+  NODE: 20
 
 permissions:
   contents: read
@@ -20,12 +20,12 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: "${{ env.NODE }}"
           cache: npm

.github/workflows/calibreapp-image-actions.yml

@@ -8,15 +8,21 @@ on:
       - '**.png'
       - '**.webp'
 
+permissions:
+  contents: read
+
 jobs:
   build:
     # Only run on Pull Requests within the same repository, and not from forks.
     if: github.event.pull_request.head.repo.full_name == github.repository
     name: calibreapp/image-actions
     runs-on: ubuntu-latest
+    permissions:
+      # allow calibreapp/image-actions to update PRs
+      pull-requests: write
     steps:
-      - name: Checkout Repo
+      - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 

.github/workflows/codeql.yml

@@ -24,21 +24,21 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
         with:
           config-file: ./.github/codeql/codeql-config.yml
           languages: "javascript"
           queries: +security-and-quality
 
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
+        uses: github/codeql-action/autobuild@v3
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3
         with:
           category: "/language:javascript"

.github/workflows/cspell.yml

@@ -23,12 +23,12 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Run cspell
-        uses: streetsidesoftware/cspell-action@v2
+        uses: streetsidesoftware/cspell-action@v5
         with:
           config: ".cspell.json"
           files: "**/*.md"

.github/workflows/css.yml

@@ -9,7 +9,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 18
+  NODE: 20
 
 permissions:
   contents: read
@@ -20,12 +20,12 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: "${{ env.NODE }}"
           cache: npm

.github/workflows/docs.yml

@@ -9,7 +9,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 18
+  NODE: 20
 
 permissions:
   contents: read
@@ -20,12 +20,12 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: "${{ env.NODE }}"
           cache: npm

.github/workflows/js.yml

@@ -9,7 +9,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 18
+  NODE: 20
 
 permissions:
   contents: read
@@ -25,12 +25,12 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE }}
           cache: npm
@@ -46,6 +46,7 @@ jobs:
 
       - name: Run Coveralls
         uses: coverallsapp/github-action@v2
+        if: ${{ !github.event.repository.fork }}
         with:
           github-token: "${{ secrets.GITHUB_TOKEN }}"
           path-to-lcov: "./js/coverage/lcov.info"

.github/workflows/lint.yml

@@ -9,7 +9,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 18
+  NODE: 20
 
 permissions:
   contents: read
@@ -20,12 +20,12 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: "${{ env.NODE }}"
           cache: npm

.github/workflows/node-sass.yml

@@ -9,7 +9,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 18
+  NODE: 20
 
 permissions:
   contents: read
@@ -20,12 +20,12 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: "${{ env.NODE }}"
 

.github/workflows/release-notes.yml

@@ -18,6 +18,6 @@ jobs:
     runs-on: ubuntu-latest
     if: github.repository == 'twbs/bootstrap'
     steps:
-      - uses: release-drafter/release-drafter@v5
+      - uses: release-drafter/release-drafter@v6
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2011-2023 The Bootstrap Authors
+Copyright (c) 2011-2024 The Bootstrap Authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -46,11 +46,11 @@ Our default branch is for development of our Bootstrap 5 release. Head to the [`
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/twbs/bootstrap/archive/v5.3.1.zip)
+- [Download the latest release](https://github.com/twbs/bootstrap/archive/v5.3.3.zip)
 - Clone the repo: `git clone https://github.com/twbs/bootstrap.git`
-- Install with [npm](https://www.npmjs.com/): `npm install bootstrap@v5.3.1`
+- Install with [npm](https://www.npmjs.com/): `npm install bootstrap@v5.3.3`
-- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@v5.3.1`
+- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@v5.3.3`
-- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.3.1`
+- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.3.3`
 - Install with [NuGet](https://www.nuget.org/): CSS: `Install-Package bootstrap` Sass: `Install-Package bootstrap.sass`
 
 Read the [Getting started page](https://getbootstrap.com/docs/5.3/getting-started/introduction/) for information on the framework contents, templates, examples, and more.
@@ -69,7 +69,6 @@ Read the [Getting started page](https://getbootstrap.com/docs/5.3/getting-starte
 [![CSS Brotli size](https://img.badgesize.io/twbs/bootstrap/main/dist/css/bootstrap.min.css?compression=brotli&label=CSS%20Brotli%20size)](https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.min.css)
 [![JS gzip size](https://img.badgesize.io/twbs/bootstrap/main/dist/js/bootstrap.min.js?compression=gzip&label=JS%20gzip%20size)](https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.js)
 [![JS Brotli size](https://img.badgesize.io/twbs/bootstrap/main/dist/js/bootstrap.min.js?compression=brotli&label=JS%20Brotli%20size)](https://github.com/twbs/bootstrap/blob/main/dist/js/bootstrap.min.js)
-[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229)](https://www.browserstack.com/automate/public-build/SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229)
 [![Backers on Open Collective](https://img.shields.io/opencollective/backers/bootstrap?logo=opencollective&logoColor=fff)](#backers)
 [![Sponsors on Open Collective](https://img.shields.io/opencollective/sponsors/bootstrap?logo=opencollective&logoColor=fff)](#sponsors)
 
@@ -177,7 +176,8 @@ 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/).
-- Ask and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
+- Ask questions and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
+- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://reddit.com/r/bootstrap).
 - 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.
@@ -243,4 +243,4 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com
 
 ## Copyright and license
 
-Code and documentation copyright 2011–2023 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors). Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
+Code and documentation copyright 2011–2024 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors). Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).

build/banner.mjs

@@ -1,6 +1,11 @@
-'use strict'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 
-const pkg = require('../package.json')
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const pkgJson = path.join(__dirname, '../package.json')
+const pkg = JSON.parse(await fs.readFile(pkgJson, 'utf8'))
 
 const year = new Date().getFullYear()
 
@@ -12,4 +17,4 @@ function getBanner(pluginFilename) {
   */`
 }
 
-module.exports = getBanner
+export default getBanner

build/build-plugins.mjs

@@ -2,17 +2,19 @@
 
 /*!
  * Script to build our plugins to use them separately.
- * Copyright 2020-2023 The Bootstrap Authors
+ * Copyright 2020-2024 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
-'use strict'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { babel } from '@rollup/plugin-babel'
+import globby from 'globby'
+import { rollup } from 'rollup'
+import banner from './banner.mjs'
 
-const path = require('node:path')
+const __filename = fileURLToPath(import.meta.url)
-const rollup = require('rollup')
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
-const globby = require('globby')
-const { babel } = require('@rollup/plugin-babel')
-const banner = require('./banner.js')
 
 const sourcePath = path.resolve(__dirname, '../js/src/').replace(/\\/g, '/')
 const jsFiles = globby.sync(`${sourcePath}/**/*.js`)
@@ -37,7 +39,7 @@ for (const file of jsFiles) {
 const build = async plugin => {
   const globals = {}
 
-  const bundle = await rollup.rollup({
+  const bundle = await rollup({
     input: plugin.src,
     plugins: [
       babel({

build/change-version.mjs

@@ -2,27 +2,26 @@
 
 /*!
  * Script to update version number references in the project.
- * Copyright 2017-2023 The Bootstrap Authors
+ * Copyright 2017-2024 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
-'use strict'
+import { execFile } from 'node:child_process'
-
+import fs from 'node:fs/promises'
-const fs = require('node:fs').promises
+import process from 'node:process'
-const path = require('node:path')
-const globby = require('globby')
 
 const VERBOSE = process.argv.includes('--verbose')
 const DRY_RUN = process.argv.includes('--dry') || process.argv.includes('--dry-run')
 
-// These are the filetypes we only care about replacing the version
+// These are the files we only care about replacing the version
-const GLOB = [
+const FILES = [
-  '**/*.{css,html,js,json,md,scss,txt,yml}'
+  'README.md',
+  'hugo.yml',
+  'js/src/base-component.js',
+  'package.js',
+  'scss/mixins/_banner.scss',
+  'site/data/docs-versions.yml'
 ]
-const GLOBBY_OPTIONS = {
-  cwd: path.join(__dirname, '..'),
-  gitignore: true
-}
 
 // Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37
 function regExpQuote(string) {
@@ -53,7 +52,7 @@ async function replaceRecursively(file, oldVersion, newVersion) {
   }
 
   if (VERBOSE) {
-    console.log(`FILE: ${file}`)
+    console.log(`Found ${oldVersion} in ${file}`)
   }
 
   if (DRY_RUN) {
@@ -63,6 +62,19 @@ async function replaceRecursively(file, oldVersion, newVersion) {
   await fs.writeFile(file, newString, 'utf8')
 }
 
+function bumpNpmVersion(newVersion) {
+  if (DRY_RUN) {
+    return
+  }
+
+  execFile('npm', ['version', newVersion, '--no-git-tag'], { shell: true }, error => {
+    if (error) {
+      console.error(error)
+      process.exit(1)
+    }
+  })
+}
+
 function showUsage(args) {
   console.error('USAGE: change-version old_version new_version [--verbose] [--dry[-run]]')
   console.error('Got arguments:', args)
@@ -86,11 +98,11 @@ async function main(args) {
     showUsage(args)
   }
 
-  try {
+  bumpNpmVersion(newVersion)
-    const files = await globby(GLOB, GLOBBY_OPTIONS)
 
+  try {
     await Promise.all(
-      files.map(file => replaceRecursively(file, oldVersion, newVersion))
+      FILES.map(file => replaceRecursively(file, oldVersion, newVersion))
     )
   } catch (error) {
     console.error(error)

build/generate-sri.mjs

@@ -5,16 +5,17 @@
  * Remember to use the same vendor files as the CDN ones,
  * otherwise the hashes won't match!
  *
- * Copyright 2017-2023 The Bootstrap Authors
+ * Copyright 2017-2024 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
-'use strict'
+import crypto from 'node:crypto'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import sh from 'shelljs'
 
-const crypto = require('node:crypto')
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
-const fs = require('node:fs')
-const path = require('node:path')
-const sh = require('shelljs')
 
 sh.config.fatal = true
 
@@ -52,9 +53,9 @@ for (const { file, configPropertyName } of files) {
       throw error
     }
 
-    const algo = 'sha384'
+    const algorithm = 'sha384'
-    const hash = crypto.createHash(algo).update(data, 'utf8').digest('base64')
+    const hash = crypto.createHash(algorithm).update(data, 'utf8').digest('base64')
-    const integrity = `${algo}-${hash}`
+    const integrity = `${algorithm}-${hash}`
 
     console.log(`${configPropertyName}: ${integrity}`)
 

build/postcss.config.mjs

@@ -1,12 +1,10 @@
-'use strict'
-
 const mapConfig = {
   inline: false,
   annotation: true,
   sourcesContent: true
 }
 
-module.exports = context => {
+export default context => {
   return {
     map: context.file.dirname.includes('examples') ? false : mapConfig,
     plugins: {

build/rollup.config.mjs

@@ -1,15 +1,17 @@
-'use strict'
+import path from 'node:path'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { babel } from '@rollup/plugin-babel'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import replace from '@rollup/plugin-replace'
+import banner from './banner.mjs'
 
-const path = require('node:path')
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
-const { babel } = require('@rollup/plugin-babel')
-const { nodeResolve } = require('@rollup/plugin-node-resolve')
-const replace = require('@rollup/plugin-replace')
-const banner = require('./banner.js')
 
 const BUNDLE = process.env.BUNDLE === 'true'
 const ESM = process.env.ESM === 'true'
 
-let fileDestination = `bootstrap${ESM ? '.esm' : ''}`
+let destinationFile = `bootstrap${ESM ? '.esm' : ''}`
 const external = ['@popperjs/core']
 const plugins = [
   babel({
@@ -24,7 +26,7 @@ const globals = {
 }
 
 if (BUNDLE) {
-  fileDestination += '.bundle'
+  destinationFile += '.bundle'
   // Remove last entry in external array to bundle Popper
   external.pop()
   delete globals['@popperjs/core']
@@ -41,7 +43,7 @@ const rollupConfig = {
   input: path.resolve(__dirname, `../js/index.${ESM ? 'esm' : 'umd'}.js`),
   output: {
     banner: banner(),
-    file: path.resolve(__dirname, `../dist/js/${fileDestination}.js`),
+    file: path.resolve(__dirname, `../dist/js/${destinationFile}.js`),
     format: ESM ? 'esm' : 'umd',
     globals,
     generatedCode: 'es2015'
@@ -54,4 +56,4 @@ if (!ESM) {
   rollupConfig.output.name = 'bootstrap'
 }
 
-module.exports = rollupConfig
+export default rollupConfig

build/vnu-jar.mjs

@@ -2,14 +2,12 @@
 
 /*!
  * Script to run vnu-jar if Java is available.
- * Copyright 2017-2023 The Bootstrap Authors
+ * Copyright 2017-2024 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
-'use strict'
+import { execFile, spawn } from 'node:child_process'
-
+import vnu from 'vnu-jar'
-const { execFile, spawn } = require('node:child_process')
-const vnu = require('vnu-jar')
 
 execFile('java', ['-version'], (error, stdout, stderr) => {
   if (error) {

build/zip-examples.mjs

@@ -3,16 +3,19 @@
 /*!
  * Script to create the built examples zip archive;
  * requires the `zip` command to be present!
- * Copyright 2020-2023 The Bootstrap Authors
+ * Copyright 2020-2024 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
-'use strict'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import sh from 'shelljs'
 
-const path = require('node:path')
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
-const sh = require('shelljs')
 
-const pkg = require('../package.json')
+const pkgJson = path.join(__dirname, '../package.json')
+const pkg = JSON.parse(await fs.readFile(pkgJson, 'utf8'))
 
 const versionShort = pkg.config.version_short
 const distFolder = `bootstrap-${pkg.version}-examples`

hugo.yml

@@ -54,8 +54,8 @@ params:
   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"
 
-  current_version:      "5.3.1"
+  current_version:      "5.3.3"
-  current_ruby_version: "5.3.1"
+  current_ruby_version: "5.3.3"
   docs_version:         "5.3"
   rfs_version:          "v10.0.0"
   github_org:           "https://github.com/twbs"
@@ -68,20 +68,20 @@ params:
   swag:                 "https://cottonbureau.com/people/bootstrap"
 
   download:
-    source:             "https://github.com/twbs/bootstrap/archive/v5.3.1.zip"
+    source:             "https://github.com/twbs/bootstrap/archive/v5.3.3.zip"
-    dist:               "https://github.com/twbs/bootstrap/releases/download/v5.3.1/bootstrap-5.3.1-dist.zip"
+    dist:               "https://github.com/twbs/bootstrap/releases/download/v5.3.3/bootstrap-5.3.3-dist.zip"
-    dist_examples:      "https://github.com/twbs/bootstrap/releases/download/v5.3.1/bootstrap-5.3.1-examples.zip"
+    dist_examples:      "https://github.com/twbs/bootstrap/releases/download/v5.3.3/bootstrap-5.3.3-examples.zip"
 
   cdn:
     # See https://www.srihash.org for info on how to generate the hashes
-    css:              "https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
+    css:              "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
-    css_hash:         "sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
+    css_hash:         "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
-    css_rtl:          "https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.rtl.min.css"
+    css_rtl:          "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css"
-    css_rtl_hash:     "sha384-PRrgQVJ8NNHGieOA1grGdCTIt4h21CzJs6SnWH4YMQ6G5F5+IEzOHz67L4SQaF0o"
+    css_rtl_hash:     "sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb"
-    js:               "https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"
+    js:               "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
-    js_hash:          "sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
+    js_hash:          "sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
-    js_bundle:        "https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
+    js_bundle:        "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-    js_bundle_hash:   "sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
+    js_bundle_hash:   "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
     popper:           "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
     popper_hash:      "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
     popper_esm:       "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js"

js/src/base-component.js

@@ -14,7 +14,7 @@ import { executeAfterTransition, getElement } from './util/index.js'
  * Constants
  */
 
-const VERSION = '5.3.1'
+const VERSION = '5.3.3'
 
 /**
  * Class definition

js/src/dom/selector-engine.js

@@ -29,7 +29,7 @@ const getSelector = element => {
     selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null
   }
 
-  return parseSelector(selector)
+  return selector ? selector.split(',').map(sel => parseSelector(sel)).join(',') : null
 }
 
 const SelectorEngine = {

js/src/modal.js

@@ -11,7 +11,9 @@ import SelectorEngine from './dom/selector-engine.js'
 import Backdrop from './util/backdrop.js'
 import { enableDismissTrigger } from './util/component-functions.js'
 import FocusTrap from './util/focustrap.js'
-import { defineJQueryPlugin, isRTL, isVisible, reflow } from './util/index.js'
+import {
+  defineJQueryPlugin, isRTL, isVisible, reflow
+} from './util/index.js'
 import ScrollBarHelper from './util/scrollbar.js'
 
 /**

js/src/scrollspy.js

@@ -8,7 +8,9 @@
 import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import SelectorEngine from './dom/selector-engine.js'
-import { defineJQueryPlugin, getElement, isDisabled, isVisible } from './util/index.js'
+import {
+  defineJQueryPlugin, getElement, isDisabled, isVisible
+} from './util/index.js'
 
 /**
  * Constants

js/src/tab.js

@@ -40,7 +40,7 @@ const CLASS_DROPDOWN = 'dropdown'
 
 const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
 const SELECTOR_DROPDOWN_MENU = '.dropdown-menu'
-const NOT_SELECTOR_DROPDOWN_TOGGLE = ':not(.dropdown-toggle)'
+const NOT_SELECTOR_DROPDOWN_TOGGLE = `:not(${SELECTOR_DROPDOWN_TOGGLE})`
 
 const SELECTOR_TAB_PANEL = '.list-group, .nav, [role="tablist"]'
 const SELECTOR_OUTER = '.nav-item, .list-group-item'

js/src/tooltip.js

@@ -9,7 +9,9 @@ import * as Popper from '@popperjs/core'
 import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import Manipulator from './dom/manipulator.js'
-import { defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop } from './util/index.js'
+import {
+  defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop
+} from './util/index.js'
 import { DefaultAllowlist } from './util/sanitizer.js'
 import TemplateFactory from './util/template-factory.js'
 

js/src/util/backdrop.js

@@ -7,7 +7,9 @@
 
 import EventHandler from '../dom/event-handler.js'
 import Config from './config.js'
-import { execute, executeAfterTransition, getElement, reflow } from './index.js'
+import {
+  execute, executeAfterTransition, getElement, reflow
+} from './index.js'
 
 /**
  * Constants

js/src/util/sanitizer.js

@@ -17,7 +17,10 @@ export const DefaultAllowlist = {
   br: [],
   col: [],
   code: [],
+  dd: [],
   div: [],
+  dl: [],
+  dt: [],
   em: [],
   hr: [],
   h1: [],

js/tests/unit/carousel.spec.js

@@ -2,7 +2,9 @@ import Carousel from '../../src/carousel.js'
 import EventHandler from '../../src/dom/event-handler.js'
 import { isRTL, noop } from '../../src/util/index.js'
 import Swipe from '../../src/util/swipe.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Carousel', () => {
   const { Simulator, PointerEvent } = window

js/tests/unit/dom/selector-engine.spec.js

@@ -359,6 +359,30 @@ describe('SelectorEngine', () => {
       expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
     })
 
+    it('should get elements if several ids are given', () => {
+      fixtureEl.innerHTML = [
+        '<div id="test" data-bs-target="#target1,#target2"></div>',
+        '<div class="target" id="target1"></div>',
+        '<div class="target" id="target2"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
+    })
+
+    it('should get elements if several ids with special chars are given', () => {
+      fixtureEl.innerHTML = [
+        '<div id="test" data-bs-target="#j_id11:exampleModal,#j_id22:exampleModal"></div>',
+        '<div class="target" id="j_id11:exampleModal"></div>',
+        '<div class="target" id="j_id22:exampleModal"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
+    })
+
     it('should get elements in array, from href if no data-bs-target set', () => {
       fixtureEl.innerHTML = [
         '<a id="test" href=".target"></a>',

js/tests/unit/dropdown.spec.js

@@ -1,7 +1,9 @@
 import EventHandler from '../../src/dom/event-handler.js'
 import Dropdown from '../../src/dropdown.js'
 import { noop } from '../../src/util/index.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Dropdown', () => {
   let fixtureEl

js/tests/unit/modal.spec.js

@@ -1,7 +1,9 @@
 import EventHandler from '../../src/dom/event-handler.js'
 import Modal from '../../src/modal.js'
 import ScrollBarHelper from '../../src/util/scrollbar.js'
-import { clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Modal', () => {
   let fixtureEl
@@ -989,6 +991,35 @@ describe('Modal', () => {
         trigger.click()
       })
     })
+
+    it('should open modal, having special characters in its id', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = [
+          '<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#j_id22:exampleModal">',
+          '   Launch demo modal',
+          '</button>',
+          '<div class="modal fade" id="j_id22:exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true">',
+          '  <div class="modal-dialog">',
+          '    <div class="modal-content">',
+          '      <div class="modal-body">',
+          '        <p>modal body</p>',
+          '      </div>',
+          '    </div>',
+          '  </div>',
+          '</div>'
+        ].join('')
+
+        const modalEl = fixtureEl.querySelector('.modal')
+        const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
+
+        modalEl.addEventListener('shown.bs.modal', () => {
+          resolve()
+        })
+
+        trigger.click()
+      })
+    })
+
     it('should not prevent default when a click occurred on data-bs-dismiss="modal" where tagName is DIFFERENT than <a> or <area>', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = [

js/tests/unit/offcanvas.spec.js

@@ -2,7 +2,9 @@ import EventHandler from '../../src/dom/event-handler.js'
 import Offcanvas from '../../src/offcanvas.js'
 import { isVisible } from '../../src/util/index.js'
 import ScrollBarHelper from '../../src/util/scrollbar.js'
-import { clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearBodyAndDocument, clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Offcanvas', () => {
   let fixtureEl

js/tests/unit/scrollspy.spec.js

@@ -1,6 +1,8 @@
 import EventHandler from '../../src/dom/event-handler.js'
 import ScrollSpy from '../../src/scrollspy.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('ScrollSpy', () => {
   let fixtureEl

js/tests/unit/tab.spec.js

@@ -1,5 +1,7 @@
 import Tab from '../../src/tab.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Tab', () => {
   let fixtureEl

js/tests/unit/toast.spec.js

@@ -1,5 +1,7 @@
 import Toast from '../../src/toast.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Toast', () => {
   let fixtureEl

js/tests/unit/tooltip.spec.js

@@ -1,7 +1,9 @@
 import EventHandler from '../../src/dom/event-handler.js'
 import Tooltip from '../../src/tooltip.js'
 import { noop } from '../../src/util/index.js'
-import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture.js'
+import {
+  clearFixture, createEvent, getFixture, jQueryMock
+} from '../helpers/fixture.js'
 
 describe('Tooltip', () => {
   let fixtureEl

js/tests/visual/modal.html

@@ -13,21 +13,25 @@
     </style>
   </head>
   <body>
-    <nav class="navbar navbar-full navbar-dark bg-dark">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-      <button class="navbar-toggler hidden-lg-up" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
+      <div class="container-fluid">
-      <div class="collapse navbar-expand-md" id="navbarResponsive">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
-        <a class="navbar-brand" href="#">This shouldn't jump!</a>
+          <span class="navbar-toggler-icon"></span>
-        <ul class="navbar-nav">
+        </button>
-          <li class="nav-item">
+        <div class="collapse navbar-collapse" id="navbarResponsive">
-            <a class="nav-link active" href="#" aria-current="page">Home</a>
+          <a class="navbar-brand" href="#">This shouldn't jump!</a>
-          </li>
+          <ul class="navbar-nav">
-          <li class="nav-item">
+            <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
+              <a class="nav-link active" href="#" aria-current="page">Home</a>
-          </li>
+            </li>
-          <li class="nav-item">
+            <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
+              <a class="nav-link" href="#">Link</a>
-          </li>
+            </li>
-        </ul>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+          </ul>
+        </div>
       </div>
     </nav>
 

nuget/bootstrap.nuspec

@@ -15,7 +15,7 @@
     <repository type="git" url="https://github.com/twbs/bootstrap.git" branch="main" />
     <icon>bootstrap.png</icon>
     <license type="expression">MIT</license>
-    <copyright>Copyright 2011-2023</copyright>
+    <copyright>Copyright 2011-2024</copyright>
     <requireLicenseAcceptance>false</requireLicenseAcceptance>
     <tags>css mobile-first responsive front-end framework web</tags>
     <contentFiles>

nuget/bootstrap.sass.nuspec

@@ -15,7 +15,7 @@
     <repository type="git" url="https://github.com/twbs/bootstrap.git" branch="main" />
     <icon>bootstrap.png</icon>
     <license type="expression">MIT</license>
-    <copyright>Copyright 2011-2023</copyright>
+    <copyright>Copyright 2011-2024</copyright>
     <requireLicenseAcceptance>false</requireLicenseAcceptance>
     <tags>css sass mobile-first responsive front-end framework web</tags>
     <contentFiles>

package.js

@@ -5,7 +5,7 @@
 Package.describe({
   name: 'twbs:bootstrap', // https://atmospherejs.com/twbs/bootstrap
   summary: 'The most popular front-end framework for developing responsive, mobile first projects on the web.',
-  version: '5.3.1',
+  version: '5.3.3',
   git: 'https://github.com/twbs/bootstrap.git'
 })
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bootstrap",
   "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
-  "version": "5.3.1",
+  "version": "5.3.3",
   "config": {
     "version_short": "5.3"
   },
@@ -43,7 +43,7 @@
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
     "css": "npm-run-all css-compile css-prefix css-rtl css-minify",
     "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/",
-    "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.js --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
+    "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
     "css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
     "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
     "css-lint-vars": "fusv scss/ site/assets/scss/",
@@ -51,17 +51,17 @@
     "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
     "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
     "css-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*",
-    "css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
+    "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
-    "css-prefix-examples": "postcss --config build/postcss.config.js --replace \"site/content/**/*.css\"",
+    "css-prefix-examples": "postcss --config build/postcss.config.mjs --replace \"site/content/**/*.css\"",
-    "css-prefix-examples-rtl": "cross-env-shell NODE_ENV=RTL postcss --config build/postcss.config.js --dir \"site/content/docs/$npm_package_config_version_short/examples/\" --ext \".rtl.css\" --base \"site/content/docs/$npm_package_config_version_short/examples/\" \"site/content/docs/$npm_package_config_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.css\" \"!site/content/docs/$npm_package_config_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.rtl.css\"",
+    "css-prefix-examples-rtl": "cross-env-shell NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"site/content/docs/$npm_package_config_version_short/examples/\" --ext \".rtl.css\" --base \"site/content/docs/$npm_package_config_version_short/examples/\" \"site/content/docs/$npm_package_config_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.css\" \"!site/content/docs/$npm_package_config_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.rtl.css\"",
     "css-test": "jasmine --config=scss/tests/jasmine.js",
     "js": "npm-run-all js-compile js-minify",
     "js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
-    "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
+    "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.mjs --sourcemap",
-    "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.js --sourcemap",
+    "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.mjs --sourcemap",
-    "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
+    "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.mjs --sourcemap",
-    "js-compile-plugins": "node build/build-plugins.js",
+    "js-compile-plugins": "node build/build-plugins.mjs",
-    "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives --ext .html,.js,.md .",
+    "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives --ext .html,.js,.mjs,.md .",
     "js-minify": "npm-run-all --aggregate-output --parallel js-minify-*",
     "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
     "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.esm.js.map,includeSources,url=bootstrap.esm.min.js.map\" --output dist/js/bootstrap.esm.min.js dist/js/bootstrap.esm.js",
@@ -77,17 +77,17 @@
     "docs": "npm-run-all docs-build docs-lint",
     "docs-build": "hugo --cleanDestinationDir --printUnusedTemplates",
     "docs-compile": "npm run docs-build",
-    "docs-vnu": "node build/vnu-jar.js",
+    "docs-vnu": "node build/vnu-jar.mjs",
     "docs-lint": "npm run docs-vnu",
     "docs-serve": "hugo server --port 9001 --disableFastRender --printUnusedTemplates",
     "docs-serve-only": "npx sirv-cli _site --port 9001",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
     "update-deps": "ncu -u -x globby,jasmine,karma-browserstack-launcher,karma-rollup-preprocessor && echo Manually update site/assets/js/vendor",
     "release": "npm-run-all dist release-sri docs-build release-zip*",
-    "release-sri": "node build/generate-sri.js",
+    "release-sri": "node build/generate-sri.mjs",
-    "release-version": "node build/change-version.js",
+    "release-version": "node build/change-version.mjs",
     "release-zip": "cross-env-shell \"rm -rf bootstrap-$npm_package_version-dist bootstrap-$npm_package_version-dist.zip && cp -r dist/ bootstrap-$npm_package_version-dist && zip -qr9 bootstrap-$npm_package_version-dist.zip bootstrap-$npm_package_version-dist && rm -rf bootstrap-$npm_package_version-dist\"",
-    "release-zip-examples": "node build/zip-examples.js",
+    "release-zip-examples": "node build/zip-examples.mjs",
     "dist": "npm-run-all --aggregate-output --parallel css js",
     "test": "npm-run-all lint dist js-test docs-build docs-lint",
     "netlify": "cross-env-shell HUGO_BASEURL=$DEPLOY_PRIME_URL npm-run-all dist release-sri docs-build",
@@ -103,31 +103,31 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.9",
+    "@babel/cli": "^7.23.9",
-    "@babel/core": "^7.22.9",
+    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-env": "^7.23.9",
     "@popperjs/core": "^2.11.8",
-    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-replace": "^5.0.5",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.17",
     "bundlewatch": "^0.3.3",
-    "clean-css-cli": "^5.6.2",
+    "clean-css-cli": "^5.6.3",
     "cross-env": "^7.0.3",
-    "eslint": "^8.45.0",
+    "eslint": "^8.56.0",
-    "eslint-config-xo": "^0.43.1",
+    "eslint-config-xo": "^0.44.0",
-    "eslint-plugin-html": "^7.1.0",
+    "eslint-plugin-html": "^8.0.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-markdown": "^3.0.0",
+    "eslint-plugin-markdown": "^3.0.1",
-    "eslint-plugin-unicorn": "^48.0.0",
+    "eslint-plugin-unicorn": "^51.0.1",
     "find-unused-sass-variables": "^5.0.0",
     "globby": "^11.1.0",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.111.4",
+    "hugo-bin": "^0.119.0",
-    "ip": "^2.0.0",
+    "ip": "^2.0.1",
-    "jasmine": "^4.6.0",
+    "jasmine": "^5.1.0",
-    "jquery": "^3.7.0",
+    "jquery": "^3.7.1",
     "karma": "^6.4.2",
     "karma-browserstack-launcher": "1.4.0",
     "karma-chrome-launcher": "^3.2.0",
@@ -137,20 +137,20 @@
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-rollup-preprocessor": "7.0.7",
-    "lockfile-lint": "^4.10.6",
+    "lockfile-lint": "^4.13.1",
-    "nodemon": "^3.0.1",
+    "nodemon": "^3.0.3",
-    "npm-run-all2": "^6.0.6",
+    "npm-run-all2": "^6.1.2",
-    "postcss": "^8.4.27",
+    "postcss": "^8.4.35",
-    "postcss-cli": "^10.1.0",
+    "postcss-cli": "^11.0.0",
-    "rollup": "^3.26.3",
+    "rollup": "^4.12.0",
-    "rollup-plugin-istanbul": "^4.0.0",
+    "rollup-plugin-istanbul": "^5.0.0",
-    "rtlcss": "^4.1.0",
+    "rtlcss": "^4.1.1",
-    "sass": "^1.64.1",
+    "sass": "^1.71.0",
-    "sass-true": "^7.0.0",
+    "sass-true": "^7.0.1",
     "shelljs": "^0.8.5",
-    "stylelint": "^15.10.2",
+    "stylelint": "^16.2.1",
-    "stylelint-config-twbs-bootstrap": "^11.0.1",
+    "stylelint-config-twbs-bootstrap": "^14.0.0",
-    "terser": "^5.19.2",
+    "terser": "^5.27.2",
     "vnu-jar": "23.4.11"
   },
   "files": [

scss/_accordion.scss

@@ -20,7 +20,6 @@
   --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
   --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
   --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
-  --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
   --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
   --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
   --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
@@ -74,7 +73,6 @@
 
   &:focus {
     z-index: 3;
-    border-color: var(--#{$prefix}accordion-btn-focus-border-color);
     outline: 0;
     box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
   }
@@ -92,7 +90,7 @@
   &:first-of-type {
     @include border-top-radius(var(--#{$prefix}accordion-border-radius));
 
-    .accordion-button {
+    > .accordion-header .accordion-button {
       @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
     }
   }
@@ -105,13 +103,13 @@
   &:last-of-type {
     @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
 
-    .accordion-button {
+    > .accordion-header .accordion-button {
       &.collapsed {
         @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
       }
     }
 
-    .accordion-collapse {
+    > .accordion-collapse {
       @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
     }
   }
@@ -127,11 +125,7 @@
 // Remove borders and border-radius to keep accordion items edge-to-edge.
 
 .accordion-flush {
-  .accordion-collapse {
+  > .accordion-item {
-    border-width: 0;
-  }
-
-  .accordion-item {
     border-right: 0;
     border-left: 0;
     @include border-radius(0);
@@ -139,12 +133,18 @@
     &:first-child { border-top: 0; }
     &:last-child { border-bottom: 0; }
 
-    .accordion-button {
+    // stylelint-disable selector-max-class
+    > .accordion-header .accordion-button {
       &,
       &.collapsed {
         @include border-radius(0);
       }
     }
+    // stylelint-enable selector-max-class
+
+    > .accordion-collapse {
+      @include border-radius(0);
+    }
   }
 }
 

scss/_buttons.scss

@@ -100,6 +100,15 @@
     }
   }
 
+  .btn-check:checked:focus-visible + & {
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
+    } @else {
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    }
+  }
+
   &:disabled,
   &.disabled,
   fieldset:disabled & {
@@ -170,7 +179,7 @@
   --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
   --#{$prefix}btn-disabled-border-color: transparent;
   --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($link-color), $link-color, 15%))};
+  --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
 
   text-decoration: $link-decoration;
   @if $enable-gradients {

scss/_carousel.scss

@@ -132,19 +132,11 @@
   background-size: 100% 100%;
 }
 
-/* rtl:options: {
-  "autoRename": true,
-  "stringMap":[ {
-    "name"    : "prev-next",
-    "search"  : "prev",
-    "replace" : "next"
-  } ]
-} */
 .carousel-control-prev-icon {
-  background-image: escape-svg($carousel-control-prev-icon-bg);
+  background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
 }
 .carousel-control-next-icon {
-  background-image: escape-svg($carousel-control-next-icon-bg);
+  background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
 }
 
 // Optional indicator pips/controls

scss/_modal.scss

@@ -126,7 +126,6 @@
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
   padding: var(--#{$prefix}modal-header-padding);
   border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
   @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));

scss/_offcanvas.scss

@@ -123,14 +123,11 @@
 .offcanvas-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
 
   .btn-close {
     padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
-    margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
+    margin: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) calc(-.5 * var(--#{$prefix}offcanvas-padding-x)) calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) auto;
-    margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
-    margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
   }
 }
 

scss/_reboot.scss

@@ -217,6 +217,7 @@ small {
 
 mark {
   padding: $mark-padding;
+  color: var(--#{$prefix}highlight-color);
   background-color: var(--#{$prefix}highlight-bg);
 }
 

scss/_root.scss

@@ -91,6 +91,7 @@
   }
 
   --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}highlight-color: #{$mark-color};
   --#{$prefix}highlight-bg: #{$mark-bg};
 
   // scss-docs-start root-border-var
@@ -171,6 +172,8 @@
     --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
 
     --#{$prefix}code-color: #{$code-color-dark};
+    --#{$prefix}highlight-color: #{$mark-color-dark};
+    --#{$prefix}highlight-bg: #{$mark-bg-dark};
 
     --#{$prefix}border-color: #{$border-color-dark};
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};

scss/_tables.scss

@@ -79,7 +79,7 @@
 //
 // When borders are added on all sides of the cells, the corners can render odd when
 // these borders do not have the same color or if they are semi-transparent.
-// Therefor we add top and border bottoms to the `tr`s and left and right borders
+// Therefore we add top and border bottoms to the `tr`s and left and right borders
 // to the `td`s or `th`s
 
 .table-bordered {

scss/_utilities.scss

@@ -77,9 +77,9 @@ $utilities: map-merge(
       property: box-shadow,
       class: shadow,
       values: (
-        null: $box-shadow,
+        null: var(--#{$prefix}box-shadow),
-        sm: $box-shadow-sm,
+        sm: var(--#{$prefix}box-shadow-sm),
-        lg: $box-shadow-lg,
+        lg: var(--#{$prefix}box-shadow-lg),
         none: none,
       )
     ),

scss/_variables-dark.scss

@@ -53,6 +53,8 @@ $headings-color-dark:               inherit !default;
 $link-color-dark:                   tint-color($primary, 40%) !default;
 $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
 $code-color-dark:                   tint-color($code-color, 40%) !default;
+$mark-color-dark:                   $body-color-dark !default;
+$mark-bg-dark:                      $yellow-800 !default;
 
 
 //

scss/_variables.scss

@@ -718,6 +718,7 @@ $dt-font-weight:              $font-weight-bold !default;
 $list-inline-padding:         .5rem !default;
 
 $mark-padding:                .1875em !default;
+$mark-color:                  $body-color !default;
 $mark-bg:                     $yellow-100 !default;
 // scss-docs-end type-variables
 
@@ -734,7 +735,7 @@ $table-cell-padding-x-sm:     .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 var(--#{$prefix}body-color) !default;
+$table-color:                 var(--#{$prefix}emphasis-color) !default;
 $table-bg:                    var(--#{$prefix}body-bg) !default;
 $table-accent-bg:             transparent !default;
 
@@ -742,17 +743,17 @@ $table-th-font-weight:        null !default;
 
 $table-striped-color:         $table-color !default;
 $table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            rgba($black, $table-striped-bg-factor) !default;
+$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
 
 $table-active-color:          $table-color !default;
 $table-active-bg-factor:      .1 !default;
-$table-active-bg:             rgba($black, $table-active-bg-factor) !default;
+$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
 
 $table-hover-color:           $table-color !default;
 $table-hover-bg-factor:       .075 !default;
-$table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;
+$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
 
-$table-border-factor:         .1 !default;
+$table-border-factor:         .2 !default;
 $table-border-width:          var(--#{$prefix}border-width) !default;
 $table-border-color:          var(--#{$prefix}border-color) !default;
 
@@ -842,6 +843,7 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color:     $gray-600 !default;
+$btn-link-focus-shadow-rgb:   to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;
@@ -903,7 +905,7 @@ $input-disabled-border-color:           null !default;
 $input-color:                           var(--#{$prefix}body-color) !default;
 $input-border-color:                    var(--#{$prefix}border-color) !default;
 $input-border-width:                    $input-btn-border-width !default;
-$input-box-shadow:                      $box-shadow-inset !default;
+$input-box-shadow:                      var(--#{$prefix}box-shadow-inset) !default;
 
 $input-border-radius:                   var(--#{$prefix}border-radius) !default;
 $input-border-radius-sm:                var(--#{$prefix}border-radius-sm) !default;
@@ -1019,7 +1021,7 @@ $form-select-feedback-icon-size:        $input-height-inner-half $input-height-i
 $form-select-border-width:        $input-border-width !default;
 $form-select-border-color:        $input-border-color !default;
 $form-select-border-radius:       $input-border-radius !default;
-$form-select-box-shadow:          $box-shadow-inset !default;
+$form-select-box-shadow:          var(--#{$prefix}box-shadow-inset) !default;
 
 $form-select-focus-border-color:  $input-focus-border-color !default;
 $form-select-focus-width:         $input-focus-width !default;
@@ -1042,9 +1044,9 @@ $form-select-transition:          $input-transition !default;
 $form-range-track-width:          100% !default;
 $form-range-track-height:         .5rem !default;
 $form-range-track-cursor:         pointer !default;
-$form-range-track-bg:             var(--#{$prefix}tertiary-bg) !default;
+$form-range-track-bg:             var(--#{$prefix}secondary-bg) !default;
 $form-range-track-border-radius:  1rem !default;
-$form-range-track-box-shadow:     $box-shadow-inset !default;
+$form-range-track-box-shadow:     var(--#{$prefix}box-shadow-inset) !default;
 
 $form-range-thumb-width:                   1rem !default;
 $form-range-thumb-height:                  $form-range-thumb-width !default;
@@ -1246,7 +1248,7 @@ $dropdown-border-width:             var(--#{$prefix}border-width) !default;
 $dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
 $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
-$dropdown-box-shadow:               $box-shadow !default;
+$dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
 
 $dropdown-link-color:               var(--#{$prefix}body-color) !default;
 $dropdown-link-hover-color:         $dropdown-link-color !default;
@@ -1381,7 +1383,9 @@ $accordion-transition:                    $btn-transition, border-radius .15s ea
 $accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle) !default;
 $accordion-button-active-color:           var(--#{$prefix}primary-text-emphasis) !default;
 
-$accordion-button-focus-border-color:     $input-focus-border-color !default;
+// fusv-disable
+$accordion-button-focus-border-color:     $input-focus-border-color !default; // Deprecated in v5.3.3
+// fusv-enable
 $accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
 
 $accordion-icon-width:                    1.25rem !default;
@@ -1390,8 +1394,8 @@ $accordion-icon-active-color:             $primary-text-emphasis !default;
 $accordion-icon-transition:               transform .2s ease-in-out !default;
 $accordion-icon-transform:                rotate(-180deg) !default;
 
-$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;
-$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;
 // scss-docs-end accordion-variables
 
 // Tooltips
@@ -1435,7 +1439,7 @@ $popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
 $popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
 $popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
-$popover-box-shadow:                $box-shadow !default;
+$popover-box-shadow:                var(--#{$prefix}box-shadow) !default;
 
 $popover-header-font-size:          $font-size-base !default;
 $popover-header-bg:                 var(--#{$prefix}secondary-bg) !default;
@@ -1509,8 +1513,8 @@ $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !d
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
 $modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs:       $box-shadow-sm !default;
+$modal-content-box-shadow-xs:       var(--#{$prefix}box-shadow-sm) !default;
-$modal-content-box-shadow-sm-up:    $box-shadow !default;
+$modal-content-box-shadow-sm-up:    var(--#{$prefix}box-shadow) !default;
 
 $modal-backdrop-bg:                 $black !default;
 $modal-backdrop-opacity:            .5 !default;
@@ -1743,3 +1747,5 @@ $kbd-bg:                            var(--#{$prefix}body-color) !default;
 $nested-kbd-font-weight:            null !default; // Deprecated in v5.2.0, removing in v6
 
 $pre-color:                         null !default;
+
+@import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3

scss/forms/_form-check.scss

@@ -29,6 +29,7 @@
 .form-check-input {
   --#{$prefix}form-check-bg: #{$form-check-input-bg};
 
+  flex-shrink: 0;
   width: $form-check-input-width;
   height: $form-check-input-width;
   margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
@@ -130,7 +131,7 @@
     margin-left: $form-switch-padding-start * -1;
     background-image: var(--#{$prefix}form-switch-bg);
     background-position: left center;
-    @include border-radius($form-switch-border-radius);
+    @include border-radius($form-switch-border-radius, 0);
     @include transition($form-switch-transition);
 
     &:focus {

scss/mixins/_banner.scss

@@ -1,7 +1,7 @@
 @mixin bsBanner($file) {
   /*!
-   * Bootstrap #{$file} v5.3.1 (https://getbootstrap.com/)
+   * Bootstrap #{$file} v5.3.3 (https://getbootstrap.com/)
-   * Copyright 2011-2023 The Bootstrap Authors
+   * Copyright 2011-2024 The Bootstrap Authors
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    */
 }

scss/mixins/_forms.scss

@@ -69,7 +69,12 @@
 
       &:focus {
         border-color: $border-color;
-        box-shadow: $focus-box-shadow;
+        @if $enable-shadows {
+          @include box-shadow($input-box-shadow, $focus-box-shadow);
+        } @else {
+          // Avoid using mixin so we can pass custom focus shadow properly
+          box-shadow: $focus-box-shadow;
+        }
       }
     }
   }
@@ -100,7 +105,12 @@
 
       &:focus {
         border-color: $border-color;
-        box-shadow: $focus-box-shadow;
+        @if $enable-shadows {
+          @include box-shadow($form-select-box-shadow, $focus-box-shadow);
+        } @else {
+          // Avoid using mixin so we can pass custom focus shadow properly
+          box-shadow: $focus-box-shadow;
+        }
       }
     }
   }

scss/mixins/_grid.scss

@@ -56,7 +56,7 @@
 @mixin row-cols($count) {
   > * {
     flex: 0 0 auto;
-    width: divide(100%, $count);
+    width: percentage(divide(1, $count));
   }
 }
 
@@ -138,7 +138,7 @@
           }
         }
 
-        // Start with `1` because `0` is and invalid value.
+        // Start with `1` because `0` is an invalid value.
         // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
         @for $i from 1 through ($columns - 1) {
           .g-start#{$infix}-#{$i} {

scss/tests/mixins/_auto-import-of-variables-dark.test.scss

@@ -0,0 +1,7 @@
+// TODO: this file can be removed safely in v6 when `@import "variables-dark"` will be removed at the end of _variables.scss
+
+@import "../../functions";
+@import "../../variables";
+// Voluntarily not importing _variables-dark.scss
+@import "../../maps";
+@import "../../mixins";

scss/tests/mixins/_utilities.test.scss

@@ -258,7 +258,7 @@ $enable-important-utilities: false;
           .desaturated-color-blue {
             --bs-color-opacity: 1;
             // Sass compilation will put a leading zero so we want to keep that one
-            // stylelint-disable-next-line stylistic/number-leading-zero
+            // stylelint-disable-next-line @stylistic/number-leading-zero
             --bs-color-saturation: 0.25;
             color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
           }

site/assets/js/application.js

@@ -4,7 +4,7 @@
 
 /*!
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */

site/assets/js/code-examples.js

@@ -4,7 +4,7 @@
 
 /*!
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */

site/assets/js/snippets.js

@@ -6,7 +6,7 @@
 
 /*!
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */

site/assets/scss/_component-examples.scss

@@ -379,6 +379,10 @@
   }
 }
 
+.bd-example-snippet .highlight pre {
+  margin-right: 0;
+}
+
 .highlight-toolbar {
   background-color: var(--bd-pre-bg);
 

site/assets/scss/_navbar.scss

@@ -73,7 +73,7 @@
     border-left: 0;
 
     @include media-breakpoint-down(lg) {
-      box-shadow: $box-shadow-lg;
+      box-shadow: var(--bs-box-shadow-lg);
     }
   }
 

site/assets/scss/_scrolling.scss

@@ -3,6 +3,9 @@
 main {
   a,
   button,
+  input,
+  select,
+  textarea,
   h2,
   h3,
   h4,

site/assets/scss/_sidebar.scss

@@ -15,7 +15,7 @@
   @include media-breakpoint-down(lg) {
     .offcanvas-lg {
       border-right-color: var(--bs-border-color);
-      box-shadow: $box-shadow-lg;
+      box-shadow: var(--bs-box-shadow-lg);
     }
   }
 }

site/assets/scss/docs.scss

@@ -1,6 +1,6 @@
 /*!
  * Bootstrap Docs (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */

site/content/docs/5.3/components/accordion.md

@@ -11,7 +11,7 @@ toc: true
 
 ## How it works
 
-The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. To render an accordion that's expanded, add the `.open` class on the `.accordion`.
+The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible.
 
 {{< callout info >}}
 {{< partial "callouts/info-prefersreducedmotion.md" >}}
@@ -21,6 +21,10 @@ The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally
 
 Click the accordions below to expand/collapse the accordion content.
 
+To render an accordion that's expanded by default:
+- add the `.show` class on the `.accordion-collapse` element.
+- drop the `.collapsed` class from the `.accordion-button` element and set its `aria-expanded` attribute to `true`.
+
 {{< example >}}
 <div class="accordion" id="accordionExample">
   <div class="accordion-item">

site/content/docs/5.3/components/alerts.md

@@ -162,13 +162,11 @@ As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS
 
 {{< deprecated-in "5.3.0" >}}
 
-Used in combination with `$theme-colors` to create contextual modifier classes for our alerts.
-
 {{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}}
 
 ### Sass loops
 
-Loop that generates the modifier classes with the `alert-variant()` mixin.
+Loop that generates the modifier classes with an overriding of CSS variables.
 
 {{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}}
 

site/content/docs/5.3/components/badge.md

@@ -13,12 +13,12 @@ Badges scale to match the size of the immediate parent element by using relative
 ### Headings
 
 {{< example >}}
-<h1>Example heading <span class="badge bg-secondary">New</span></h1>
+<h1>Example heading <span class="badge text-bg-secondary">New</span></h1>
-<h2>Example heading <span class="badge bg-secondary">New</span></h2>
+<h2>Example heading <span class="badge text-bg-secondary">New</span></h2>
-<h3>Example heading <span class="badge bg-secondary">New</span></h3>
+<h3>Example heading <span class="badge text-bg-secondary">New</span></h3>
-<h4>Example heading <span class="badge bg-secondary">New</span></h4>
+<h4>Example heading <span class="badge text-bg-secondary">New</span></h4>
-<h5>Example heading <span class="badge bg-secondary">New</span></h5>
+<h5>Example heading <span class="badge text-bg-secondary">New</span></h5>
-<h6>Example heading <span class="badge bg-secondary">New</span></h6>
+<h6>Example heading <span class="badge text-bg-secondary">New</span></h6>
 {{< /example >}}
 
 ### Buttons

site/content/docs/5.3/components/card.md

@@ -63,7 +63,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
 
 ### Images
 
-`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
+`.card-img-top` and `.card-img-bottom` respectively set the top and bottom corners rounded to match the card's borders. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
 
 {{< example >}}
 <div class="card" style="width: 18rem;">

site/content/docs/5.3/components/list-group.md

@@ -117,21 +117,21 @@ These work great with custom content as well.
       <div class="fw-bold">Subheading</div>
       Content for list item
     </div>
-    <span class="badge bg-primary rounded-pill">14</span>
+    <span class="badge text-bg-primary rounded-pill">14</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-start">
     <div class="ms-2 me-auto">
       <div class="fw-bold">Subheading</div>
       Content for list item
     </div>
-    <span class="badge bg-primary rounded-pill">14</span>
+    <span class="badge text-bg-primary rounded-pill">14</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-start">
     <div class="ms-2 me-auto">
       <div class="fw-bold">Subheading</div>
       Content for list item
     </div>
-    <span class="badge bg-primary rounded-pill">14</span>
+    <span class="badge text-bg-primary rounded-pill">14</span>
   </li>
 </ol>
 {{< /example >}}
@@ -200,15 +200,15 @@ Add badges to any list group item to show unread counts, activity, and more with
 <ul class="list-group">
   <li class="list-group-item d-flex justify-content-between align-items-center">
     A list item
-    <span class="badge bg-primary rounded-pill">14</span>
+    <span class="badge text-bg-primary rounded-pill">14</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-center">
     A second list item
-    <span class="badge bg-primary rounded-pill">2</span>
+    <span class="badge text-bg-primary rounded-pill">2</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-center">
     A third list item
-    <span class="badge bg-primary rounded-pill">1</span>
+    <span class="badge text-bg-primary rounded-pill">1</span>
   </li>
 </ul>
 {{< /example >}}
@@ -321,8 +321,6 @@ As part of Bootstrap's evolving CSS variables approach, list groups now use loca
 
 {{< deprecated-in "5.3.0" >}}
 
-Used in combination with `$theme-colors` to generate the [contextual variant classes](#variants) for `.list-group-item`s.
-
 {{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
 
 ### Sass loops

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

@@ -218,7 +218,7 @@ When modals become too long for the user's viewport or device, they scroll indep
   </button>
 </div>
 
-You can also create a scrollable modal that allows scroll the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
+You can also create a scrollable modal that allows scrolling the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
 
 <div class="modal fade" id="exampleModalScrollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
   <div class="modal-dialog modal-dialog-scrollable">

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

@@ -144,7 +144,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
 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`.
 
 {{< callout warning >}}
-Heads up! Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
+**Heads up!** Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
 {{< /callout >}}
 
 {{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}}
@@ -328,6 +328,7 @@ const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
 {{< bs-table "table" >}}
 | Method | Description |
 | --- | --- |
+| `dispose` | Destroys an element's offcanvas. |
 | `getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element. |
 | `getOrCreateInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn't initialized. |
 | `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs). |

site/content/docs/5.3/components/popovers.md

@@ -198,7 +198,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
 | `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
 | `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
 | `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
-| `template` | string | `'<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="popover"`. |
+| `template` | string | `'<div class="popover" role="tooltip"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="tooltip"`. |
 | `title` | string, element, function | `''` | The popover title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
 | `trigger` | string | `'hover focus'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
 {{< /bs-table >}}
@@ -249,7 +249,7 @@ const popover = new bootstrap.Popover(element, {
 const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance
 
 // setContent example
-myPopover.setContent({
+popover.setContent({
   '.popover-header': 'another title',
   '.popover-body': 'another content'
 })

site/content/docs/5.3/content/reboot.md

@@ -64,7 +64,7 @@ $font-family-sans-serif:
   // Android
   Roboto,
   // older macOS and iOS
-  "Helvetica Neue"
+  "Helvetica Neue",
   // Linux
   "Noto Sans",
   "Liberation Sans",

site/content/docs/5.3/content/tables.md

@@ -549,7 +549,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
 
 <div class="bd-example">
 <table class="table">
-  <thead class="table-light">
+  <thead>
     <tr>
       <th scope="col">#</th>
       <th scope="col">First</th>

site/content/docs/5.3/customize/color.md

@@ -18,341 +18,343 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()`
 **Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
 {{< /callout >}}
 
-<table class="table table-swatches">
+<div class="table-responsive">
-  <thead>
+  <table class="table table-swatches">
-    <tr>
+    <thead>
-      <th style="width: 340px;">Description</th>
+      <tr>
-      <th style="width: 200px;" class="ps-0">Swatch</th>
+        <th style="width: 340px;">Description</th>
-      <th>Variables</th>
+        <th style="width: 200px;" class="ps-0">Swatch</th>
-    </tr>
+        <th>Variables</th>
-  </thead>
+      </tr>
-  <tbody>
+    </thead>
-    <tr>
+    <tbody>
-      <td rowspan="2">
+      <tr>
-        {{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}}
+        <td rowspan="2">
-      </td>
+          {{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}}
-      <td class="ps-0">
+        </td>
-        <div class="p-3 rounded-2" style="background-color: var(--bs-body-color);">&nbsp;</div>
+        <td class="ps-0">
-      </td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-body-color);">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td rowspan="2">
+      <tr>
-        {{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}}
+        <td rowspan="2">
-      </td>
+          {{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}}
-      <td class="ps-0">
+        </td>
-        <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div>
+        <td class="ps-0">
-      </td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td rowspan="2">
+      <tr>
-        {{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}}
+        <td rowspan="2">
-      </td>
+          {{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}}
-      <td class="ps-0">
+        </td>
-        <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div>
+        <td class="ps-0">
-      </td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        {{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}}
-      <td class="ps-0">
+        </td>
-        <div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);">&nbsp;</div>
+        <td class="ps-0">
-      </td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        {{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}}
-      <td class="ps-0">
+        </td>
-        <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">&nbsp;</div>
+        <td class="ps-0">
-      </td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td rowspan="4">
+      <tr>
-        {{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}}
+        <td rowspan="4">
-      </td>
+          {{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}}
-      <td class="ps-0">
+        </td>
-        <div class="p-3 rounded-2 bg-primary">&nbsp;</div>
+        <td class="ps-0">
-      </td>
+          <div class="p-3 rounded-2 bg-primary">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
+        <td>
-      </td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td rowspan="4">
+      <tr>
-        {{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}}
+        <td rowspan="4">
-      </td>
+          {{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}}
-      <td class="ps-0">
+        </td>
-        <div class="p-3 rounded-2 bg-success">&nbsp;</div>
+        <td class="ps-0">
-      </td>
+          <div class="p-3 rounded-2 bg-success">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div>
+        <td>
-      </td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td rowspan="4">
+      <tr>
-        {{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}}
+        <td rowspan="4">
-      </td>
+          {{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}}
-      <td class="ps-0">
+        </td>
-        <div class="p-3 rounded-2 bg-danger">&nbsp;</div>
+        <td class="ps-0">
-      </td>
+          <div class="p-3 rounded-2 bg-danger">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div>
+        <td>
-      </td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td rowspan="4">
+      <tr>
-        {{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}}
+        <td rowspan="4">
-      </td>
+          {{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}}
-      <td class="ps-0">
+        </td>
-        <div class="p-3 rounded-2 bg-warning">&nbsp;</div>
+        <td class="ps-0">
-      </td>
+          <div class="p-3 rounded-2 bg-warning">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div>
+        <td>
-      </td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td rowspan="4">
+      <tr>
-        {{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}}
+        <td rowspan="4">
-      </td>
+          {{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}}
-      <td class="ps-0">
+        </td>
-        <div class="p-3 rounded-2 bg-info">&nbsp;</div>
+        <td class="ps-0">
-      </td>
+          <div class="p-3 rounded-2 bg-info">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div>
+        <td>
-      </td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td rowspan="4">
+      <tr>
-        {{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}}
+        <td rowspan="4">
-      </td>
+          {{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}}
-      <td class="ps-0">
+        </td>
-        <div class="p-3 rounded-2 bg-light">&nbsp;</div>
+        <td class="ps-0">
-      </td>
+          <div class="p-3 rounded-2 bg-light">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div>
+        <td>
-      </td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td rowspan="4">
+      <tr>
-        {{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}}
+        <td rowspan="4">
-      </td>
+          {{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}}
-      <td class="ps-0">
+        </td>
-        <div class="p-3 rounded-2 bg-dark">&nbsp;</div>
+        <td class="ps-0">
-      </td>
+          <div class="p-3 rounded-2 bg-dark">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid">&nbsp;</div>
+        <td>
-      </td>
+          <div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid">&nbsp;</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}}
-    </tr>
+        </td>
-    <tr>
+      </tr>
-      <td>
+      <tr>
-        <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div>
+        <td>
-      </td>
+          <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div>
-      <td>
+        </td>
-        {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}}
+        <td>
-      </td>
+          {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}}
-    </tr>
+        </td>
-  </tbody>
+      </tr>
-</table>
+    </tbody>
+  </table>
+</div>
 
 ### Using the new colors
 

site/content/docs/5.3/customize/sass.md

@@ -244,6 +244,8 @@ Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we h
 
 You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect.
 
+`shift-color()` combines these two functions by shading the color if the weight is positive and tinting the color if the weight is negative.
+
 {{< scss-docs name="color-functions" file="scss/_functions.scss" >}}
 
 In practice, you'd call the function and pass in the color and weight parameters.
@@ -256,6 +258,11 @@ In practice, you'd call the function and pass in the color and weight parameters
 .custom-element-2 {
   color: shade-color($danger, 30%);
 }
+
+.custom-element-3 {
+  color: shift-color($success, 40%);
+  background-color: shift-color($success, -60%);
+}
 ```
 
 ### Color contrast
@@ -338,18 +345,18 @@ Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap a
 
 ### Color schemes
 
-A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin.
+A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light` and `dark` color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin.
 
 {{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}}
 
 ```scss
 .custom-element {
+  @include color-scheme(light) {
+    // Insert light mode styles here
+  }
+
   @include color-scheme(dark) {
     // Insert dark mode styles here
   }
-
-  @include color-scheme(custom-named-scheme) {
-    // Insert custom color scheme styles here
-  }
 }
 ```

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

@@ -192,7 +192,7 @@ extra_css:
                 {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
                 <div class="col-lg-8">
                   <h6 class="mb-0">مثال على عنوان منشور المدونة</h6>
-                  <small class="text-body-secondary">15 يناير 2023</small>
+                  <small class="text-body-secondary">15 يناير 2024</small>
                 </div>
               </a>
             </li>
@@ -201,7 +201,7 @@ extra_css:
                 {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
                 <div class="col-lg-8">
                   <h6 class="mb-0">هذا عنوان آخر للمدونة</h6>
-                  <small class="text-body-secondary">14 يناير 2023</small>
+                  <small class="text-body-secondary">14 يناير 2024</small>
                 </div>
               </a>
             </li>
@@ -210,7 +210,7 @@ extra_css:
                 {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
                 <div class="col-lg-8">
                   <h6 class="mb-0">أطول عنوان منشور للمدونة: يحتوي هذا الخط على عدة أسطر!</h6>
-                  <small class="text-body-secondary">13 يناير 2023</small>
+                  <small class="text-body-secondary">13 يناير 2024</small>
                 </div>
               </a>
             </li>

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

@@ -1,4 +1,4 @@
-/* stylelint-disable stylistic/selector-list-comma-newline-after */
+/* stylelint-disable @stylistic/selector-list-comma-newline-after */
 
 .blog-header-logo {
   font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;

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

@@ -1,4 +1,4 @@
-/* stylelint-disable stylistic/selector-list-comma-newline-after */
+/* stylelint-disable @stylistic/selector-list-comma-newline-after */
 
 .blog-header-logo {
   font-family: Amiri, Georgia, "Times New Roman", serif;

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

@@ -244,7 +244,7 @@ extra_css:
                 {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
                 <div class="col-lg-8">
                   <h6 class="mb-0">Example blog post title</h6>
-                  <small class="text-body-secondary">January 15, 2023</small>
+                  <small class="text-body-secondary">January 15, 2024</small>
                 </div>
               </a>
             </li>
@@ -253,7 +253,7 @@ extra_css:
                 {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
                 <div class="col-lg-8">
                   <h6 class="mb-0">This is another blog post title</h6>
-                  <small class="text-body-secondary">January 14, 2023</small>
+                  <small class="text-body-secondary">January 14, 2024</small>
                 </div>
               </a>
             </li>
@@ -262,7 +262,7 @@ extra_css:
                 {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}}
                 <div class="col-lg-8">
                   <h6 class="mb-0">Longer blog post title: This one has multiple lines!</h6>
-                  <small class="text-body-secondary">January 13, 2023</small>
+                  <small class="text-body-secondary">January 13, 2024</small>
                 </div>
               </a>
             </li>

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

@@ -23,7 +23,7 @@ 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 type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button>
         <ul class="list-unstyled ps-3 collapse" id="contents-collapse">
           <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">النصوص</a></li>
           <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">الصور</a></li>
@@ -32,7 +32,7 @@ direction: rtl
         </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 type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button>
         <ul class="list-unstyled ps-3 collapse" id="forms-collapse">
           <li><a class="d-inline-flex align-items-center rounded 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>
@@ -43,7 +43,7 @@ direction: rtl
         </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 type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button>
         <ul class="list-unstyled ps-3 collapse" id="components-collapse">
           <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">المطوية</a></li>
           <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">الإنذارات</a></li>

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

@@ -22,7 +22,7 @@ body_class: "bg-body-tertiary"
   <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 type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button>
         <ul class="list-unstyled ps-3 collapse" id="contents-collapse">
           <li><a class="d-inline-flex align-items-center rounded 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>
@@ -31,7 +31,7 @@ body_class: "bg-body-tertiary"
         </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 type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button>
         <ul class="list-unstyled ps-3 collapse" id="forms-collapse">
           <li><a class="d-inline-flex align-items-center rounded 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>
@@ -42,7 +42,7 @@ body_class: "bg-body-tertiary"
         </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 type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button>
         <ul class="list-unstyled ps-3 collapse" id="components-collapse">
           <li><a class="d-inline-flex align-items-center rounded 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>

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

@@ -3,11 +3,11 @@ layout: examples
 title: قالب لوحة القيادة
 direction: rtl
 extra_css:
-  - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"
+  - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
   - "../dashboard/dashboard.rtl.css"
 extra_js:
-  - src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"
+  - src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
-    integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG"
+    integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
   - src: "dashboard.js"
 ---
 

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

@@ -2,11 +2,11 @@
 layout: examples
 title: Dashboard Template
 extra_css:
-  - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"
+  - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
   - "dashboard.css"
 extra_js:
-  - src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"
+  - src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
-    integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG"
+    integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
   - src: "dashboard.js"
 ---
 

site/content/docs/5.3/examples/product/index.html

@@ -24,12 +24,12 @@ extra_css:
       <svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg>
       Aperture
     </a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="#offcanvas" aria-label="Toggle navigation">
+    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="offcanvas offcanvas-end" tabindex="-1" id="#offcanvas" aria-labelledby="#offcanvasLabel">
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
       <div class="offcanvas-header">
-        <h5 class="offcanvas-title" id="#offcanvasLabel">Aperture</h5>
+        <h5 class="offcanvas-title" id="offcanvasLabel">Aperture</h5>
         <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
       </div>
       <div class="offcanvas-body">

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

@@ -34,7 +34,7 @@ title: Starter Template
     <div class="row g-5">
       <div class="col-md-6">
         <h2 class="text-body-emphasis">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>
+        <p>Ready to go beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p>
         <ul class="list-unstyled ps-0">
           <li>
             <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/icons-font" rel="noopener" target="_blank">

site/content/docs/5.3/forms/checks-radios.md

@@ -305,7 +305,7 @@ Visually, these checkbox toggle buttons are identical to the [button plugin togg
 
 ### Outlined styles
 
-Different variants of `.btn`, such at the various outlined styles, are supported.
+Different variants of `.btn`, such as the various outlined styles, are supported.
 
 {{< example >}}
 <input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">