Move bundlewatch to GitHub Actions

docs: migrate to the built-in sitemap template (#39951 )
package.json: ignore eslint for now and regenerate package-lock.json (#39950 )
2024-05-02 15:16:15 +03:00 · 2024-05-02 10:19:47 +03:00 · 2024-05-02 09:59:41 +03:00 · 2024-05-02 08:41:26 +03:00 · 2024-05-02 08:40:56 +03:00 · 2024-05-01 15:03:12 +03:00
98 changed files with 2512 additions and 11924 deletions
@@ -38,7 +38,7 @@
    },
    {
      "path": "./dist/js/bootstrap.bundle.min.js",
-      "maxSize": "23.25 kB"
+      "maxSize": "23.5 kB"
    },
    {
      "path": "./dist/js/bootstrap.esm.js",
@@ -85,6 +85,7 @@
    "strict": "error",
    "unicorn/explicit-length-check": "off",
    "unicorn/filename-case": "off",
+    "unicorn/no-anonymous-default-export": "off",
    "unicorn/no-array-callback-reference": "off",
    "unicorn/no-array-method-this-argument": "off",
    "unicorn/no-null": "off",
@@ -197,6 +198,15 @@
        "unicorn/no-array-for-each": "off"
      }
    },
+    {
+      "files": [
+        "site/assets/js/**"
+      ],
+      "parserOptions": {
+        "sourceType": "module",
+        "ecmaVersion": 2020
+      }
+    },
    {
      "files": [
        "**/*.md"
@@ -208,9 +218,10 @@
    },
    {
      "files": [
-        "**/*.md/*.js"
+        "**/*.md/*.js",
+        "**/*.md/*.mjs"
      ],
-      "extends": "plugin:markdown/recommended",
+      "extends": "plugin:markdown/recommended-legacy",
      "parserOptions": {
        "sourceType": "module"
      },
@@ -18,7 +18,7 @@ jobs:
  browserstack:
    runs-on: ubuntu-latest
    if: github.repository == 'twbs/bootstrap'
-    timeout-minutes: 15
+    timeout-minutes: 30

    steps:
      - name: Clone repository
@@ -37,7 +37,8 @@ jobs:
        run: npm run dist

      - name: Run bundlewatch
-        run: npm run bundlewatch
-        env:
-          BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}"
-          CI_BRANCH_BASE: main
+        uses: jackyef/bundlewatch-gh-action@0.3.0
+        with:
+          branch-base: main
+          bundlewatch-config: .bundlewatch.config.json
+          bundlewatch-github-token: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}"
@@ -1,47 +0,0 @@
-name: LambdaTest
-
-on:
-  push:
-    branches:
-      - "**"
-      - "!dependabot/**"
-  workflow_dispatch:
-
-env:
-  FORCE_COLOR: 2
-  NODE: 20
-
-permissions:
-  contents: read
-
-jobs:
-  lambdatest:
-    runs-on: ubuntu-latest
-    if: github.repository == 'twbs/bootstrap'
-    timeout-minutes: 15
-
-    steps:
-      - name: Clone repository
-        uses: actions/checkout@v4
-        with:
-          persist-credentials: false
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "${{ env.NODE }}"
-          cache: npm
-
-      - name: Install npm dependencies
-        run: npm ci
-
-      - name: Run dist
-        run: npm run dist
-
-      - name: Run LambdaTest tests
-        run: npm run js-test-lt-cloud
-        env:
-          LT_USERNAME: "${{ secrets.LT_USERNAME }}"
-          LT_ACCESS_KEY: "${{ secrets.LT_ACCESS_KEY }}"
-          LT_TUNNEL_NAME: "tunnel-${{ github.sha }}"
-          GITHUB_SHA: "${{ github.sha }}"
@@ -41,4 +41,3 @@ Thumbs.db
 /dist-sass/
 /js/coverage/
 /node_modules/
-/.lambdatest/
@@ -1 +0,0 @@
-lockfile-version=2
@@ -177,7 +177,7 @@ Get updates on Bootstrap's development and chat with the project maintainers and
 - Follow [@getbootstrap on Twitter](https://twitter.com/getbootstrap).
 - Read and subscribe to [The Official Bootstrap Blog](https://blog.getbootstrap.com/).
 - 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).
+- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://www.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.
@@ -9,7 +9,7 @@
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { babel } from '@rollup/plugin-babel'
-import globby from 'globby'
+import { globby } from 'globby'
 import { rollup } from 'rollup'
 import banner from './banner.mjs'

@@ -17,7 +17,7 @@ const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(fileURLToPath(import.meta.url))

 const sourcePath = path.resolve(__dirname, '../js/src/').replace(/\\/g, '/')
-const jsFiles = globby.sync(`${sourcePath}/**/*.js`)
+const jsFiles = await globby(`${sourcePath}/**/*.js`)

 // Array which holds the resolved plugins
 const resolvedPlugins = []
@@ -37,6 +37,9 @@ for (const file of jsFiles) {
 }

 const build = async plugin => {
+  /**
+   * @type {import('rollup').GlobalsOption}
+   */
  const globals = {}

  const bundle = await rollup({
@@ -8,8 +8,6 @@ security:
    getenv:
      - ^HUGO_
      - NETLIFY
-  gotemplates:
-    allowActionJSTmpl: true

 markup:
  goldmark:
@@ -21,6 +19,9 @@ markup:
    startLevel:         2
    endLevel:           6

+build:
+  noJSConfigInAssets:   true
+
 buildDrafts:            true
 buildFuture:            true

@@ -44,6 +45,8 @@ module:
      target:           layouts
    - source:           site/static
      target:           static
+    - source:           node_modules/@docsearch/css
+      target:           assets/scss/@docsearch/css
    - source:           site/static/docs/5.3/assets/img/favicons/apple-touch-icon.png
      target:           static/apple-touch-icon.png
    - source:           site/static/docs/5.3/assets/img/favicons/favicon.ico
@@ -67,6 +70,14 @@ params:
  icons:                "https://icons.getbootstrap.com/"
  swag:                 "https://cottonbureau.com/people/bootstrap"

+  analytics:
+    fathom_site:        "ITUSEYJG"
+
+  algolia:
+    appId:              "AK7KMZKZHQ"
+    apiKey:             "3151f502c7b9e9dafd5e6372b691a24e"
+    indexName:          "bootstrap"
+
  download:
    source:             "https://github.com/twbs/bootstrap/archive/v5.3.3.zip"
    dist:               "https://github.com/twbs/bootstrap/releases/download/v5.3.3/bootstrap-5.3.3-dist.zip"
@@ -170,7 +170,7 @@ const noop = () => {}
 * @param {HTMLElement} element
 * @return void
 *
- * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
+ * @see https://www.harrytheo.com/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
 */
 const reflow = element => {
  element.offsetHeight // eslint-disable-line no-unused-expressions
@@ -3,149 +3,75 @@
 'use strict'

 const browsers = {
-  browserStack: {
-    safariMac: {
-      base: 'BrowserStack',
-      os: 'OS X',
-      os_version: 'Catalina',
-      browser: 'Safari',
-      browser_version: 'latest'
-    },
-    chromeMac: {
-      base: 'BrowserStack',
-      os: 'OS X',
-      os_version: 'Catalina',
-      browser: 'Chrome',
-      browser_version: 'latest'
-    },
-    firefoxMac: {
-      base: 'BrowserStack',
-      os: 'OS X',
-      os_version: 'Catalina',
-      browser: 'Firefox',
-      browser_version: 'latest'
-    },
-    chromeWin10: {
-      base: 'BrowserStack',
-      os: 'Windows',
-      os_version: '10',
-      browser: 'Chrome',
-      browser_version: '60'
-    },
-    firefoxWin10: {
-      base: 'BrowserStack',
-      os: 'Windows',
-      os_version: '10',
-      browser: 'Firefox',
-      browser_version: '60'
-    },
-    chromeWin10Latest: {
-      base: 'BrowserStack',
-      os: 'Windows',
-      os_version: '10',
-      browser: 'Chrome',
-      browser_version: 'latest'
-    },
-    firefoxWin10Latest: {
-      base: 'BrowserStack',
-      os: 'Windows',
-      os_version: '10',
-      browser: 'Firefox',
-      browser_version: 'latest'
-    },
-    iphone7: {
-      base: 'BrowserStack',
-      os: 'ios',
-      os_version: '12.0',
-      device: 'iPhone 7',
-      real_mobile: true
-    },
-    iphone12: {
-      base: 'BrowserStack',
-      os: 'ios',
-      os_version: '14.0',
-      device: 'iPhone 12',
-      real_mobile: true
-    },
-    pixel3: {
-      base: 'BrowserStack',
-      os: 'android',
-      os_version: '9.0',
-      device: 'Google Pixel 3',
-      real_mobile: true
-    }
+  safariMac: {
+    base: 'BrowserStack',
+    os: 'OS X',
+    os_version: 'Catalina',
+    browser: 'Safari',
+    browser_version: 'latest'
  },
-  lambdaTest: {
-    safariMac: {
-      browserName: 'Safari',
-      browserVersion: 'latest',
-      'LT:Options': {
-        platformName: 'MacOS Monterey'
-      }
-    },
-    chromeMac: {
-      browserName: 'Chrome',
-      browserVersion: 'latest',
-      'LT:Options': {
-        platformName: 'MacOS Monterey'
-      }
-    },
-    firefoxMac: {
-      browserName: 'Firefox',
-      browserVersion: 'latest',
-      'LT:Options': {
-        platformName: 'MacOS Monterey'
-      }
-    },
-    chromeWin10: {
-      browserName: 'Chrome',
-      browserVersion: '60',
-      'LT:Options': {
-        platformName: 'Windows 10'
-      }
-    },
-    firefoxWin10: {
-      browserName: 'Firefox',
-      browserVersion: '60',
-      'LT:Options': {
-        platformName: 'Windows 10'
-      }
-    },
-    chromeWin10Latest: {
-      browserName: 'Chrome',
-      browserVersion: 'latest',
-      'LT:Options': {
-        platformName: 'Windows 10'
-      }
-    },
-    firefoxWin10Latest: {
-      browserName: 'Firefox',
-      browserVersion: 'latest',
-      'LT:Options': {
-        platformName: 'Windows 10'
-      }
-    },
-    ios15: {
-      platformName: 'ios',
-      platformVersion: '15',
-      browserName: 'Safari',
-      deviceName: 'iPhone.*',
-      isRealMobile: true
-    },
-    ios16: {
-      platformName: 'ios',
-      platformVersion: '16',
-      browserName: 'Safari',
-      deviceName: 'iPhone.*',
-      isRealMobile: true
-    },
-    android12: {
-      platformName: 'android',
-      platformVersion: '12',
-      browserName: 'Chrome',
-      deviceName: 'Pixel.*',
-      isRealMobile: true
-    }
+  chromeMac: {
+    base: 'BrowserStack',
+    os: 'OS X',
+    os_version: 'Catalina',
+    browser: 'Chrome',
+    browser_version: 'latest'
+  },
+  firefoxMac: {
+    base: 'BrowserStack',
+    os: 'OS X',
+    os_version: 'Catalina',
+    browser: 'Firefox',
+    browser_version: 'latest'
+  },
+  chromeWin10: {
+    base: 'BrowserStack',
+    os: 'Windows',
+    os_version: '10',
+    browser: 'Chrome',
+    browser_version: '60'
+  },
+  firefoxWin10: {
+    base: 'BrowserStack',
+    os: 'Windows',
+    os_version: '10',
+    browser: 'Firefox',
+    browser_version: '60'
+  },
+  chromeWin10Latest: {
+    base: 'BrowserStack',
+    os: 'Windows',
+    os_version: '10',
+    browser: 'Chrome',
+    browser_version: 'latest'
+  },
+  firefoxWin10Latest: {
+    base: 'BrowserStack',
+    os: 'Windows',
+    os_version: '10',
+    browser: 'Firefox',
+    browser_version: 'latest'
+  },
+  iphone7: {
+    base: 'BrowserStack',
+    os: 'ios',
+    os_version: '12.0',
+    device: 'iPhone 7',
+    real_mobile: true
+  },
+  iphone12: {
+    base: 'BrowserStack',
+    os: 'ios',
+    os_version: '14.0',
+    device: 'iPhone 12',
+    real_mobile: true
+  },
+  pixel2: {
+    base: 'BrowserStack',
+    os: 'android',
+    os_version: '8.0',
+    device: 'Google Pixel 2',
+    real_mobile: true
  }
 }

@@ -9,21 +9,9 @@ const replace = require('@rollup/plugin-replace')
 const { browsers } = require('./browsers.js')

 const ENV = process.env
+const BROWSERSTACK = Boolean(ENV.BROWSERSTACK)
 const DEBUG = Boolean(ENV.DEBUG)
 const JQUERY_TEST = Boolean(ENV.JQUERY)
-const BROWSERSTACK = Boolean(ENV.BROWSERSTACK)
-const LAMBDATEST = Boolean(ENV.LAMBDATEST)
-
-const webDriverConfig = {
-  desktop: {
-    hostname: 'hub.lambdatest.com',
-    port: 80
-  },
-  mobile: {
-    hostname: 'mobile-hub.lambdatest.com',
-    port: 80
-  }
-}

 const frameworks = [
  'jasmine'
@@ -66,23 +54,15 @@ const config = {
  colors: true,
  autoWatch: false,
  singleRun: true,
-  captureTimeout: 180_000,
-  browserDisconnectTolerance: 3,
-  browserDisconnectTimeout: 180_000,
-  browserNoActivityTimeout: 400_000,
-  retryLimit: 2,
-  concurrency: 5,
+  concurrency: Number.POSITIVE_INFINITY,
  client: {
-    clearContext: false,
-    jasmine: {
-      timeoutInterval: 120_000
-    }
+    clearContext: false
  },
  files: [
    'node_modules/hammer-simulator/index.js',
    {
      pattern: 'js/tests/unit/**/!(jquery).spec.js',
-      watched: !BROWSERSTACK && !LAMBDATEST
+      watched: !BROWSERSTACK
    }
  ],
  preprocessors: {
@@ -118,51 +98,18 @@ const config = {
  }
 }

-if (LAMBDATEST) {
-  config.hostname = 'localhost.lambdatest.com'
-  config.captureTimeout = 600_000
-
-  for (const key of Object.keys(browsers.lambdaTest)) {
-    browsers.lambdaTest[key].base = 'WebDriver'
-    browsers.lambdaTest[key].build = `bootstrap-${ENV.GITHUB_SHA ? `${ENV.GITHUB_SHA.slice(0, 7)}-` : ''}${new Date().toISOString()}`
-    browsers.lambdaTest[key].project = 'Bootstrap'
-
-    if (browsers.lambdaTest[key].isRealMobile) {
-      browsers.lambdaTest[key].config = webDriverConfig.mobile
-      browsers.lambdaTest[key].user = ENV.LT_USERNAME
-      browsers.lambdaTest[key].accessKey = ENV.LT_ACCESS_KEY
-      browsers.lambdaTest[key].tunnel = true
-      browsers.lambdaTest[key].console = true
-      browsers.lambdaTest[key].network = true
-      browsers.lambdaTest[key].tunnelName = ENV.LT_TUNNEL_NAME || 'jasmine'
-      browsers.lambdaTest[key].pseudoActivityInterval = 5000 // 5000 ms heartbeat
-    } else {
-      browsers.lambdaTest[key].config = webDriverConfig.desktop
-      browsers.lambdaTest[key]['LT:Options'].username = ENV.LT_USERNAME
-      browsers.lambdaTest[key]['LT:Options'].accessKey = ENV.LT_ACCESS_KEY
-      browsers.lambdaTest[key]['LT:Options'].tunnel = true
-      browsers.lambdaTest[key]['LT:Options'].console = true
-      browsers.lambdaTest[key]['LT:Options'].network = true
-      browsers.lambdaTest[key]['LT:Options'].tunnelName = ENV.LT_TUNNEL_NAME || 'jasmine'
-      browsers.lambdaTest[key]['LT:Options'].pseudoActivityInterval = 5000 // 5000 ms heartbeat
-    }
-  }
-
-  plugins.push('karma-webdriver-launcher', 'karma-jasmine-html-reporter')
-  config.customLaunchers = browsers.lambdaTest
-  config.browsers = Object.keys(browsers.lambdaTest)
-  reporters.push('kjhtml')
-} else if (BROWSERSTACK) {
+if (BROWSERSTACK) {
  config.hostname = ip.address()
  config.browserStack = {
    username: ENV.BROWSER_STACK_USERNAME,
    accessKey: ENV.BROWSER_STACK_ACCESS_KEY,
    build: `bootstrap-${ENV.GITHUB_SHA ? `${ENV.GITHUB_SHA.slice(0, 7)}-` : ''}${new Date().toISOString()}`,
-    project: 'Bootstrap'
+    project: 'Bootstrap',
+    retryLimit: 2
  }
  plugins.push('karma-browserstack-launcher', 'karma-jasmine-html-reporter')
-  config.customLaunchers = browsers.browserStack
-  config.browsers = Object.keys(browsers.browserStack)
+  config.customLaunchers = browsers
+  config.browsers = Object.keys(browsers)
  reporters.push('BrowserStack', 'kjhtml')
 } else if (JQUERY_TEST) {
  frameworks.push('detectBrowsers')
@@ -1,28 +0,0 @@
-/* eslint-env node */
-/* eslint-disable no-console */
-
-'use strict'
-
-const process = require('node:process')
-const lambdaTunnel = require('@lambdatest/node-tunnel')
-
-if (process.env.LAMBDATEST !== 'true') {
-  console.log('Skipping lt-local script!')
-  return
-}
-
-const tunnelInstance = new lambdaTunnel() // eslint-disable-line new-cap
-const tunnelArguments = {
-  user: process.env.LT_USERNAME,
-  key: process.env.LT_ACCESS_KEY,
-  tunnelName: process.env.LT_TUNNEL_NAME || 'jasmine',
-  logFile: 'local.log'
-};
-
-// eslint-disable-next-line unicorn/prefer-top-level-await
-(async () => {
-  await tunnelInstance.start(tunnelArguments)
-  await new Promise(res => {
-    setTimeout(res, 5000)
-  })
-})()
@@ -40,7 +40,7 @@
  "style": "dist/css/bootstrap.css",
  "scripts": {
    "start": "npm-run-all --parallel watch docs-serve",
-    "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
+    "bundlewatch": "npx 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.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
@@ -72,9 +72,6 @@
    "js-test-integration-bundle": "rollup --config js/tests/integration/rollup.bundle.js",
    "js-test-integration-modularity": "rollup --config js/tests/integration/rollup.bundle-modularity.js",
    "js-test-cloud": "cross-env BROWSERSTACK=true npm run js-test-karma",
-    "js-test-lt-cloud": "cross-env LAMBDATEST=true npm-run-all --parallel --race js-test-lt-local js-test-karma",
-    "js-test-lt-local": "npm-run-all js-test-lt-tunnel sleep",
-    "js-test-lt-tunnel": "node js/tests/lt-local",
    "js-test-jquery": "cross-env JQUERY=true npm run js-test-karma",
    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint lockfile-lint",
    "docs": "npm-run-all docs-build docs-lint",
@@ -85,7 +82,7 @@
    "docs-serve": "hugo server --port 9001 --disableFastRender --noHTTPCache --renderToMemory --printPathWarnings --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-rollup-preprocessor && echo Manually update site/assets/js/vendor",
+    "update-deps": "ncu -u -x eslint,karma-browserstack-launcher,karma-rollup-preprocessor",
    "release": "npm-run-all dist release-sri docs-build release-zip*",
    "release-sri": "node build/generate-sri.mjs",
    "release-version": "node build/change-version.mjs",
@@ -100,41 +97,41 @@
    "watch-css-docs": "nodemon --watch site/assets/scss/ --ext scss --exec \"npm run css-lint\"",
    "watch-css-test": "nodemon --watch scss/ --ext scss,js --exec \"npm run css-test\"",
    "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",
-    "watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\"",
-    "sleep": "sleep 5"
+    "watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\""
  },
  "peerDependencies": {
    "@popperjs/core": "^2.11.8"
  },
  "devDependencies": {
-    "@babel/cli": "^7.23.9",
-    "@babel/core": "^7.24.0",
-    "@babel/preset-env": "^7.24.0",
-    "@lambdatest/node-tunnel": "^4.0.7",
+    "@babel/cli": "^7.24.5",
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@docsearch/js": "^3.6.0",
    "@popperjs/core": "^2.11.8",
    "@rollup/plugin-babel": "^6.0.4",
    "@rollup/plugin-commonjs": "^25.0.7",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-replace": "^5.0.5",
-    "autoprefixer": "^10.4.18",
-    "bundlewatch": "^0.3.3",
+    "@stackblitz/sdk": "^1.9.0",
+    "autoprefixer": "^10.4.19",
    "clean-css-cli": "^5.6.3",
+    "clipboard": "^2.0.11",
    "cross-env": "^7.0.3",
    "eslint": "^8.57.0",
    "eslint-config-xo": "^0.44.0",
-    "eslint-plugin-html": "^8.0.0",
+    "eslint-plugin-html": "^8.1.1",
    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-markdown": "^3.0.1",
-    "eslint-plugin-unicorn": "^51.0.1",
-    "find-unused-sass-variables": "^5.0.0",
-    "globby": "^11.1.0",
+    "eslint-plugin-markdown": "^4.0.1",
+    "eslint-plugin-unicorn": "^52.0.0",
+    "find-unused-sass-variables": "^6.0.0",
+    "globby": "^14.0.1",
    "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.120.7",
+    "hugo-bin": "^0.122.5",
    "ip": "^2.0.1",
    "jasmine": "^5.1.0",
    "jquery": "^3.7.1",
    "karma": "^6.4.3",
-    "karma-browserstack-launcher": "^1.6.0",
+    "karma-browserstack-launcher": "1.4.0",
    "karma-chrome-launcher": "^3.2.0",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-detect-browsers": "^2.3.3",
@@ -142,21 +139,20 @@
    "karma-jasmine": "^5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "karma-rollup-preprocessor": "7.0.7",
-    "karma-webdriver-launcher": "^1.0.8",
    "lockfile-lint": "^4.13.2",
    "nodemon": "^3.1.0",
    "npm-run-all2": "^6.1.2",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
    "postcss-cli": "^11.0.0",
-    "rollup": "^4.12.0",
+    "rollup": "^4.17.2",
    "rollup-plugin-istanbul": "^5.0.0",
    "rtlcss": "^4.1.1",
-    "sass": "^1.71.1",
+    "sass": "^1.76.0",
    "sass-true": "^8.0.0",
    "shelljs": "^0.8.5",
-    "stylelint": "^16.2.1",
-    "stylelint-config-twbs-bootstrap": "^14.0.0",
-    "terser": "^5.27.2",
+    "stylelint": "^16.4.0",
+    "stylelint-config-twbs-bootstrap": "^14.1.0",
+    "terser": "^5.31.0",
    "vnu-jar": "23.4.11"
  },
  "files": [
@@ -82,6 +82,6 @@ $form-invalid-border-color-dark:    $red-300 !default;
 $accordion-icon-color-dark:         $primary-text-emphasis-dark !default;
 $accordion-icon-active-color-dark:  $primary-text-emphasis-dark !default;

-$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><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-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><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-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><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-.708'/></svg>") !default;
+$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><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-.708'/></svg>") !default;
 // scss-docs-end sass-dark-mode-vars
@@ -1091,7 +1091,7 @@ $form-feedback-valid-color:         $success !default;
 $form-feedback-invalid-color:       $danger !default;

 $form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
-$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
+$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>") !default;
 $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
 // scss-docs-end form-feedback-variables
@@ -1394,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='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='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></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 5 6 6 6-6'/></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 5 6 6 6-6'/></svg>") !default;
 // scss-docs-end accordion-variables

 // Tooltips
@@ -1669,8 +1669,8 @@ $carousel-caption-spacer:            1.25rem !default;

 $carousel-control-icon-width:        2rem !default;

-$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
-$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>") !default;
+$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>") !default;

 $carousel-transition-duration:       .6s !default;
 $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
@@ -1706,7 +1706,7 @@ $btn-close-height:           $btn-close-width !default;
 $btn-close-padding-x:        .25em !default;
 $btn-close-padding-y:        $btn-close-padding-x !default;
 $btn-close-color:            $black !default;
-$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
+$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !default;
 $btn-close-focus-shadow:     $focus-ring-box-shadow !default;
 $btn-close-opacity:          .5 !default;
 $btn-close-hover-opacity:    .75 !default;
@@ -17,6 +17,7 @@
    height: 100%; // allow textareas
    padding: $form-floating-padding-y $form-floating-padding-x;
    overflow: hidden;
+    color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
@@ -56,7 +57,6 @@
  > .form-control-plaintext,
  > .form-select {
    ~ label {
-      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
      transform: $form-floating-label-transform;

      &::after {
@@ -73,7 +73,6 @@
  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
  > .form-control:-webkit-autofill {
    ~ label {
-      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
      transform: $form-floating-label-transform;
    }
  }
@@ -9,22 +9,12 @@
 * For details, see https://creativecommons.org/licenses/by/3.0/.
 */

-(() => {
-  'use strict'
+/* eslint-disable import/no-unresolved */
+import sidebarScroll from 'js/partials/sidebar.js'
+import codeExamples from 'js/partials/code-examples.js'
+import snippets from 'js/partials/snippets.js'
+/* eslint-enable import/no-unresolved */

-  // Scroll the active sidebar link into view
-  const sidenav = document.querySelector('.bd-sidebar')
-  const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
-
-  if (sidenav && sidenavActiveLink) {
-    const sidenavHeight = sidenav.clientHeight
-    const sidenavActiveLinkTop = sidenavActiveLink.offsetTop
-    const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
-    const viewportTop = sidenavActiveLinkTop
-    const viewportBottom = viewportTop - sidenavHeight + sidenavActiveLinkHeight
-
-    if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) {
-      sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2)
-    }
-  }
-})()
+sidebarScroll()
+codeExamples()
+snippets()
@@ -2,18 +2,18 @@
 // IT'S ALL JUST JUNK FOR OUR DOCS!
 // ++++++++++++++++++++++++++++++++++++++++++

-/*!
+/*
 * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
 * 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/.
 */

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

-(() => {
-  'use strict'
+import ClipboardJS from 'clipboard'

+export default () => {
  // Insert copy to clipboard button before .highlight
  const btnTitle = 'Copy to clipboard'
  const btnEdit = 'Edit on StackBlitz'
@@ -87,4 +87,4 @@
      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
    }, { once: true })
  })
-})()
+}
@@ -0,0 +1,30 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * 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/.
+ */
+
+export default () => {
+  // Scroll the active sidebar link into view
+  const sidenav = document.querySelector('.bd-sidebar')
+  const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
+
+  if (!sidenav || !sidenavActiveLink) {
+    return
+  }
+
+  const sidenavHeight = sidenav.clientHeight
+  const sidenavActiveLinkTop = sidenavActiveLink.offsetTop
+  const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
+  const viewportTop = sidenavActiveLinkTop
+  const viewportBottom = viewportTop - sidenavHeight + sidenavActiveLinkHeight
+
+  if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) {
+    sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2)
+  }
+}
@@ -0,0 +1,168 @@
+// NOTICE!!! Initially embedded in our docs this JavaScript
+// file contains elements that can help you create reproducible
+// use cases in StackBlitz for instance.
+// In a real project please adapt this content to your needs.
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * 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/.
+ */
+
+/* global bootstrap: false */
+
+export default () => {
+  // --------
+  // Tooltips
+  // --------
+  // Instantiate all tooltips in a docs or StackBlitz
+  document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    .forEach(tooltip => {
+      new bootstrap.Tooltip(tooltip)
+    })
+
+  // --------
+  // Popovers
+  // --------
+  // Instantiate all popovers in docs or StackBlitz
+  document.querySelectorAll('[data-bs-toggle="popover"]')
+    .forEach(popover => {
+      new bootstrap.Popover(popover)
+    })
+
+  // -------------------------------
+  // Toasts
+  // -------------------------------
+  // Used by 'Placement' example in docs or StackBlitz
+  const toastPlacement = document.getElementById('toastPlacement')
+  if (toastPlacement) {
+    document.getElementById('selectToastPlacement').addEventListener('change', function () {
+      if (!toastPlacement.dataset.originalClass) {
+        toastPlacement.dataset.originalClass = toastPlacement.className
+      }
+
+      toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}`
+    })
+  }
+
+  // Instantiate all toasts in docs pages only
+  document.querySelectorAll('.bd-example .toast')
+    .forEach(toastNode => {
+      const toast = new bootstrap.Toast(toastNode, {
+        autohide: false
+      })
+
+      toast.show()
+    })
+
+  // Instantiate all toasts in docs pages only
+  // js-docs-start live-toast
+  const toastTrigger = document.getElementById('liveToastBtn')
+  const toastLiveExample = document.getElementById('liveToast')
+
+  if (toastTrigger) {
+    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
+    toastTrigger.addEventListener('click', () => {
+      toastBootstrap.show()
+    })
+  }
+  // js-docs-end live-toast
+
+  // -------------------------------
+  // Alerts
+  // -------------------------------
+  // Used in 'Show live alert' example in docs or StackBlitz
+
+  // js-docs-start live-alert
+  const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
+  const appendAlert = (message, type) => {
+    const wrapper = document.createElement('div')
+    wrapper.innerHTML = [
+      `<div class="alert alert-${type} alert-dismissible" role="alert">`,
+      `   <div>${message}</div>`,
+      '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
+      '</div>'
+    ].join('')
+
+    alertPlaceholder.append(wrapper)
+  }
+
+  const alertTrigger = document.getElementById('liveAlertBtn')
+  if (alertTrigger) {
+    alertTrigger.addEventListener('click', () => {
+      appendAlert('Nice, you triggered this alert message!', 'success')
+    })
+  }
+  // js-docs-end live-alert
+
+  // --------
+  // Carousels
+  // --------
+  // Instantiate all non-autoplaying carousels in docs or StackBlitz
+  document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
+    .forEach(carousel => {
+      bootstrap.Carousel.getOrCreateInstance(carousel)
+    })
+
+  // -------------------------------
+  // Checks & Radios
+  // -------------------------------
+  // Indeterminate checkbox example in docs and StackBlitz
+  document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
+    .forEach(checkbox => {
+      if (checkbox.id.includes('Indeterminate')) {
+        checkbox.indeterminate = true
+      }
+    })
+
+  // -------------------------------
+  // Links
+  // -------------------------------
+  // Disable empty links in docs examples only
+  document.querySelectorAll('.bd-content [href="#"]')
+    .forEach(link => {
+      link.addEventListener('click', event => {
+        event.preventDefault()
+      })
+    })
+
+  // -------------------------------
+  // Modal
+  // -------------------------------
+  // Modal 'Varying modal content' example in docs and StackBlitz
+  // js-docs-start varying-modal-content
+  const exampleModal = document.getElementById('exampleModal')
+  if (exampleModal) {
+    exampleModal.addEventListener('show.bs.modal', event => {
+      // Button that triggered the modal
+      const button = event.relatedTarget
+      // Extract info from data-bs-* attributes
+      const recipient = button.getAttribute('data-bs-whatever')
+      // If necessary, you could initiate an Ajax request here
+      // and then do the updating in a callback.
+
+      // Update the modal's content.
+      const modalTitle = exampleModal.querySelector('.modal-title')
+      const modalBodyInput = exampleModal.querySelector('.modal-body input')
+
+      modalTitle.textContent = `New message to ${recipient}`
+      modalBodyInput.value = recipient
+    })
+  }
+  // js-docs-end varying-modal-content
+
+  // -------------------------------
+  // Offcanvas
+  // -------------------------------
+  // 'Offcanvas components' example in docs only
+  const myOffcanvas = document.querySelectorAll('.bd-example-offcanvas .offcanvas')
+  if (myOffcanvas) {
+    myOffcanvas.forEach(offcanvas => {
+      offcanvas.addEventListener('show.bs.offcanvas', event => {
+        event.preventDefault()
+      }, false)
+    })
+  }
+}
@@ -2,21 +2,31 @@
 // IT'S ALL JUST JUNK FOR OUR DOCS!
 // ++++++++++++++++++++++++++++++++++++++++++

-(() => {
-  'use strict'
+/*!
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */

+import docsearch from '@docsearch/js'
+// https://gohugo.io/hugo-pipes/js/#options
+// eslint-disable-next-line import/no-unresolved
+import { appId, apiKey, indexName } from '@params';
+
+(() => {
  const searchElement = document.getElementById('docsearch')

-  if (!window.docsearch || !searchElement) {
+  if (!searchElement) {
    return
  }

  const siteDocsVersion = searchElement.getAttribute('data-bd-docs-version')

-  window.docsearch({
-    apiKey: '3151f502c7b9e9dafd5e6372b691a24e',
-    indexName: 'bootstrap',
-    appId: 'AK7KMZKZHQ',
+  docsearch({
+    apiKey,
+    indexName,
+    appId,
    container: searchElement,
    searchParameters: {
      facetFilters: [`version:${siteDocsVersion}`]
@@ -1,170 +1,15 @@
-// NOTICE!!! Initially embedded in our docs this JavaScript
-// file contains elements that can help you create reproducible
-// use cases in StackBlitz for instance.
-// In a real project please adapt this content to your needs.
-// ++++++++++++++++++++++++++++++++++++++++++
-
-/*!
+/*
 * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
 * 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/.
 */

-/* global bootstrap: false */
+// Note that this file is not published; we only include it in scripts.html
+// for StackBlitz to work

-(() => {
-  'use strict'
+/* eslint-disable import/no-unresolved */
+import snippets from 'js/partials/snippets.js'
+/* eslint-enable import/no-unresolved */

-  // --------
-  // Tooltips
-  // --------
-  // Instantiate all tooltips in a docs or StackBlitz
-  document.querySelectorAll('[data-bs-toggle="tooltip"]')
-    .forEach(tooltip => {
-      new bootstrap.Tooltip(tooltip)
-    })
-
-  // --------
-  // Popovers
-  // --------
-  // Instantiate all popovers in docs or StackBlitz
-  document.querySelectorAll('[data-bs-toggle="popover"]')
-    .forEach(popover => {
-      new bootstrap.Popover(popover)
-    })
-
-  // -------------------------------
-  // Toasts
-  // -------------------------------
-  // Used by 'Placement' example in docs or StackBlitz
-  const toastPlacement = document.getElementById('toastPlacement')
-  if (toastPlacement) {
-    document.getElementById('selectToastPlacement').addEventListener('change', function () {
-      if (!toastPlacement.dataset.originalClass) {
-        toastPlacement.dataset.originalClass = toastPlacement.className
-      }
-
-      toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}`
-    })
-  }
-
-  // Instantiate all toasts in docs pages only
-  document.querySelectorAll('.bd-example .toast')
-    .forEach(toastNode => {
-      const toast = new bootstrap.Toast(toastNode, {
-        autohide: false
-      })
-
-      toast.show()
-    })
-
-  // Instantiate all toasts in docs pages only
-  // js-docs-start live-toast
-  const toastTrigger = document.getElementById('liveToastBtn')
-  const toastLiveExample = document.getElementById('liveToast')
-
-  if (toastTrigger) {
-    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
-    toastTrigger.addEventListener('click', () => {
-      toastBootstrap.show()
-    })
-  }
-  // js-docs-end live-toast
-
-  // -------------------------------
-  // Alerts
-  // -------------------------------
-  // Used in 'Show live alert' example in docs or StackBlitz
-
-  // js-docs-start live-alert
-  const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
-  const appendAlert = (message, type) => {
-    const wrapper = document.createElement('div')
-    wrapper.innerHTML = [
-      `<div class="alert alert-${type} alert-dismissible" role="alert">`,
-      `   <div>${message}</div>`,
-      '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
-      '</div>'
-    ].join('')
-
-    alertPlaceholder.append(wrapper)
-  }
-
-  const alertTrigger = document.getElementById('liveAlertBtn')
-  if (alertTrigger) {
-    alertTrigger.addEventListener('click', () => {
-      appendAlert('Nice, you triggered this alert message!', 'success')
-    })
-  }
-  // js-docs-end live-alert
-
-  // --------
-  // Carousels
-  // --------
-  // Instantiate all non-autoplaying carousels in docs or StackBlitz
-  document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
-    .forEach(carousel => {
-      bootstrap.Carousel.getOrCreateInstance(carousel)
-    })
-
-  // -------------------------------
-  // Checks & Radios
-  // -------------------------------
-  // Indeterminate checkbox example in docs and StackBlitz
-  document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
-    .forEach(checkbox => {
-      if (checkbox.id.includes('Indeterminate')) {
-        checkbox.indeterminate = true
-      }
-    })
-
-  // -------------------------------
-  // Links
-  // -------------------------------
-  // Disable empty links in docs examples only
-  document.querySelectorAll('.bd-content [href="#"]')
-    .forEach(link => {
-      link.addEventListener('click', event => {
-        event.preventDefault()
-      })
-    })
-
-  // -------------------------------
-  // Modal
-  // -------------------------------
-  // Modal 'Varying modal content' example in docs and StackBlitz
-  // js-docs-start varying-modal-content
-  const exampleModal = document.getElementById('exampleModal')
-  if (exampleModal) {
-    exampleModal.addEventListener('show.bs.modal', event => {
-      // Button that triggered the modal
-      const button = event.relatedTarget
-      // Extract info from data-bs-* attributes
-      const recipient = button.getAttribute('data-bs-whatever')
-      // If necessary, you could initiate an Ajax request here
-      // and then do the updating in a callback.
-
-      // Update the modal's content.
-      const modalTitle = exampleModal.querySelector('.modal-title')
-      const modalBodyInput = exampleModal.querySelector('.modal-body input')
-
-      modalTitle.textContent = `New message to ${recipient}`
-      modalBodyInput.value = recipient
-    })
-  }
-  // js-docs-end varying-modal-content
-
-  // -------------------------------
-  // Offcanvas
-  // -------------------------------
-  // 'Offcanvas components' example in docs only
-  const myOffcanvas = document.querySelectorAll('.bd-example-offcanvas .offcanvas')
-  if (myOffcanvas) {
-    myOffcanvas.forEach(offcanvas => {
-      offcanvas.addEventListener('show.bs.offcanvas', event => {
-        event.preventDefault()
-      }, false)
-    })
-  }
-})()
+snippets()
@@ -0,0 +1,66 @@
+// NOTICE!!! Initially embedded in our docs this JavaScript
+// file contains elements that can help you create reproducible
+// use cases in StackBlitz for instance.
+// In a real project please adapt this content to your needs.
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*!
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+import sdk from '@stackblitz/sdk'
+// https://gohugo.io/hugo-pipes/js/#options
+import {
+  cssCdn, docsVersion, jsBundleCdn, jsSnippetFile
+} from '@params' // eslint-disable-line import/no-unresolved
+
+// Open in StackBlitz logic
+document.querySelectorAll('.btn-edit').forEach(btn => {
+  btn.addEventListener('click', event => {
+    const codeSnippet = event.target.closest('.bd-code-snippet')
+    const exampleEl = codeSnippet.querySelector('.bd-example')
+
+    const htmlSnippet = exampleEl.innerHTML
+    const jsSnippet = codeSnippet.querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
+    // Get extra classes for this example
+    const classes = Array.from(exampleEl.classList).join(' ')
+
+    openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
+  })
+})
+
+const openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
+  const indexHtml = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="${cssCdn}" rel="stylesheet">
+    <link href="https://getbootstrap.com/docs/${docsVersion}/assets/css/docs.css" rel="stylesheet">
+    <title>Bootstrap Example</title>
+    <${'script'} defer src="${jsBundleCdn}"></${'script'}>
+  </head>
+  <body class="p-3 m-0 border-0 ${classes}">
+    <!-- Example Code Start-->
+${htmlSnippet.trimStart().replace(/^/gm, '    ').replace(/^ {4}$/gm, '').trimEnd()}
+    <!-- Example Code End -->
+  </body>
+</html>
+`
+
+  const project = {
+    files: {
+      'index.html': indexHtml,
+      ...(jsSnippet && { 'index.js': jsSnippetFile })
+    },
+    title: 'Bootstrap Example',
+    description: `Official example from ${window.location.href}`,
+    template: jsSnippet ? 'javascript' : 'html',
+    tags: ['bootstrap']
+  }
+
+  sdk.openProject(project, { openFile: 'index.html' })
+}
@@ -73,9 +73,8 @@
    }

    // Prevent breaking of code
-    // stylelint-disable-next-line selector-max-compound-selectors
    th,
-    td:first-child > code {
+    td:first-child > code { // stylelint-disable-line selector-max-compound-selectors
      white-space: nowrap;
    }
  }
@@ -47,6 +47,7 @@
  --docsearch-muted-color: var(--bs-secondary-color);
  --docsearch-hit-shadow: none;

+  position: fixed;
  z-index: 2000; // Make sure to be over all components showcased in the documentation
  cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.

@@ -36,7 +36,6 @@ $enable-cssgrid: true;
 // Load docs components
@import "variables";
@import "navbar";
-@import "search";
@import "masthead";
@import "ads";
@import "content";
@@ -0,0 +1,14 @@
+/*!
+ * Bootstrap Docs (https://getbootstrap.com/)
+ * Copyright 2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+@import "../../../scss/functions";
+@import "../../../scss/variables";
+@import "../../../scss/mixins";
+@import "variables";
+
+@import "@docsearch/css/dist/style";
+@import "search";
@@ -4,7 +4,8 @@ layout: 404
 description: ""
 url: /404.html
 robots: noindex,follow
-sitemap_exclude: true
+sitemap:
+  disable: true
 ---

 <div class="text-center py-5">
@@ -1,5 +1,6 @@
 ---
 layout: redirect
-sitemap_exclude: true
+sitemap:
+  disable: true
 redirect: "/docs/5.3/getting-started/introduction/"
 ---
@@ -38,7 +38,7 @@ Click the button below to show an alert (hidden with inline styles to start), th

 We use the following JavaScript to trigger our live alert demo:

-{{< js-docs name="live-alert" file="site/assets/js/snippets.js" >}}
+{{< js-docs name="live-alert" file="site/assets/js/partials/snippets.js" >}}

 ### Link color

@@ -481,7 +481,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
 </div>
 {{< /example >}}

-{{< js-docs name="varying-modal-content" file="site/assets/js/snippets.js" >}}
+{{< js-docs name="varying-modal-content" file="site/assets/js/partials/snippets.js" >}}

 ### Toggle between modals

@@ -87,7 +87,7 @@ Click the button below to show a toast (positioned with our utilities in the low

 We use the following JavaScript to trigger our live toast demo:

-{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}}
+{{< js-docs name="live-toast" file="site/assets/js/partials/snippets.js" >}}

 ### Translucent

@@ -5,7 +5,8 @@ description: Examples of Bootstrap's documentation-specific components and style
 aliases: "/docsref/"
 toc: true
 robots: noindex,follow
-sitemap_exclude: true
+sitemap:
+  disable: true
 ---

 ## Buttons
@@ -46,4 +47,4 @@ sitemap_exclude: true

 {{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}}

-{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}}
+{{< js-docs name="live-toast" file="site/assets/js/partials/snippets.js" >}}
@@ -4,63 +4,3 @@ title: Examples
 description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
 aliases: "/examples/"
 ---
-
-{{< list-examples.inline >}}
-{{ range $entry := $.Site.Data.examples -}}
-<div class="bd-content">
-  <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
-  <p>{{ $entry.description }}</p>
-  {{ if eq $entry.category "RTL" -}}
-    <div class="bd-callout bd-callout-warning small">
-      <p>
-        <strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
-      </p>
-      <p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p>
-    </div>
-  {{ end -}}
-  {{ range $i, $example := $entry.examples -}}
-    {{- $len := len $entry.examples -}}
-    {{ if (eq $i 0) }}<div class="row">{{ end }}
-      {{ if $entry.external }}
-        <div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
-          <svg class="bi fs-5 flex-shrink-0 mt-1"><use xlink:href="#box-seam"></use></svg>
-          <div>
-            <h3 class="h5 mb-1">
-              <a class="d-block link-offset-1" href="{{ $.Site.Params.github_org }}{{ $example.url }}/" target="_blank" rel="noopener">
-                {{ $example.name }}
-              </a>
-            </h3>
-            <p class="text-body-secondary">{{ $example.description }}</p>
-            <p>
-              {{- $indexPath := "index.html" -}}
-              {{- if $example.indexPath -}}
-                {{- $indexPath = $example.indexPath -}}
-              {{- end }}
-              <a class="icon-link small link-secondary link-offset-1" href="https://stackblitz.com/github/twbs{{ $example.url }}?file={{ $indexPath | urlquery }}" target="_blank" rel="noopener">
-                <svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
-                Edit in StackBlitz
-              </a>
-            </p>
-          </div>
-        </div>
-      {{ else }}
-        <div class="col-sm-6 col-md-3 mb-3">
-          <a class="d-block link-offset-1" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
-            <img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png,
-                                                    /docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x"
-                                            src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png"
-                                            alt=""
-                                            width="480" height="300"
-                                            loading="lazy">
-            <h3 class="h5 mb-1">
-              {{ $example.name }}
-            </h3>
-          </a>
-          <p class="text-body-secondary">{{ $example.description }}</p>
-        </div>
-      {{ end }}
-    {{ if (eq (add $i 1) $len) }}</div>{{ end }}
-  {{ end -}}
-</div>
-{{ end -}}
-{{< /list-examples.inline >}}
@@ -5,6 +5,7 @@ extra_css:
  - "../cheatsheet/cheatsheet.rtl.css"
 extra_js:
  - src: "../cheatsheet/cheatsheet.js"
+    defer: true
 body_class: "bg-body-tertiary"
 direction: rtl
 ---
@@ -5,6 +5,7 @@ extra_css:
  - "cheatsheet.css"
 extra_js:
  - src: "cheatsheet.js"
+    defer: true
 body_class: "bg-body-tertiary"
 ---

@@ -6,6 +6,7 @@ extra_css:
  - "../checkout/checkout.css"
 extra_js:
  - src: "../checkout/checkout.js"
+    defer: true
 body_class: "bg-body-tertiary"
 ---

@@ -5,6 +5,7 @@ extra_css:
  - "checkout.css"
 extra_js:
  - src: "checkout.js"
+    defer: true
 body_class: "bg-body-tertiary"
 ---

@@ -7,7 +7,9 @@ extra_css:
 extra_js:
  - src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
    integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
+    defer: true
  - src: "dashboard.js"
+    defer: true
 ---

 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
@@ -6,7 +6,9 @@ extra_css:
 extra_js:
  - src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
    integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
+    defer: true
  - src: "dashboard.js"
+    defer: true
 ---

 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
@@ -5,6 +5,7 @@ extra_css:
  - "offcanvas-navbar.css"
 extra_js:
  - src: "offcanvas-navbar.js"
+    defer: true
 body_class: "bg-body-tertiary"
 aliases: "/docs/5.3/examples/offcanvas/"
 ---
@@ -5,6 +5,7 @@ extra_css:
  - "sidebars.css"
 extra_js:
  - src: "sidebars.js"
+    defer: true
 body_class: ""
 ---

@@ -7,7 +7,7 @@ toc: true
 thumbnail: guides/bootstrap-parcel@2x.png
 ---

-<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="2000" height="1000" alt="">
+<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="800" height="400" alt="">

 {{< callout >}}
 **Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/parcel). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/parcel?file=index.html) but not run it because Parcel isn't currently supported there.
@@ -111,7 +111,7 @@ With dependencies installed and our project folder ready for us to start coding,
   npm start
   ```

-   <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server.png" alt="Parcel dev server running">
+   ![Parcel dev server running](/assets/img/guides/parcel-dev-server.png)

 In the next and final section to this guide, we'll import all of Bootstrap's CSS and JavaScript.

@@ -150,7 +150,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss`

 3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:

-   <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server-bootstrap.png" alt="Parcel dev server running with Bootstrap">
+   ![Parcel dev server running with Bootstrap](/assets/img/guides/parcel-dev-server-bootstrap.png)

   Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Parcel example project](https://github.com/twbs/examples/tree/main/parcel) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.

@@ -168,6 +168,16 @@ After running Sass then RTLCSS, each selector in your CSS files will be prepende
 3. Nesting styles this way will prevent our `form-validation-state()` mixin from working as intended, thus require you tweak it a bit by yourself. [See #31223](https://github.com/twbs/bootstrap/issues/31223).
 {{< /callout >}}

+Do you want to automate this process and address several edge cases involving both directions within a single stylesheet? Then, consider using [PostCSS RTLCSS](https://github.com/elchininet/postcss-rtlcss) as a [PostCSS](https://github.com/postcss/postcss) plugin to process your source files. PostCSS RTLCSS uses [RTLCSS](https://rtlcss.com) behind the scenes to manage the direction flipping process, but it separates the flipped declarations into rules with a different prefix for LTR and RTL, something that allows you to have both directions within the same stylesheet file. By doing this, you can switch between LTR and RTL orientations by simply changing the `dir` of the page (or even by modifying a specific class if you configure the plugin accordingly).
+
+{{< callout warning >}}
+**Important things to take into account** when using PostCSS RTLCSS to build a combined LTR and RTL implementation:
+
+1. It is recommended that you add the `dir` attribute to the `html` element. This way, the entire page will be affected when you change the direction. Also, make sure you add the `lang` attribute accordingly.
+2. Having a single bundle with both directions will increase the size of the final stylesheet (on average, by 20%-30%): consider some [optimization]({{< docsref "/customize/optimize" >}}).
+3. Take into account that PostCSS RTLCSS is not compatible with `/* rtl:remove */` directives because it doesn't remove any CSS rule. You should replace your `/* rtl:remove */`, `/* rtl:begin:remove */` and `/* rtl:end:remove */` directives with `/* rtl:ignore */`, `/* rtl:begin:ignore */` and `/* rtl:end:ignore */` directives respectively. These directives will ignore the rule and will not create an RTL counterpart (same result as the `remove` ones in RTLCSS).
+{{< /callout >}}
+
 ## The breadcrumb case

 The [breadcrumb separator]({{< docsref "/components/breadcrumb#dividers" >}}) is the only case requiring its own brand-new variable— namely `$breadcrumb-divider-flipped` —defaulting to `$breadcrumb-divider`.
@@ -10,7 +10,7 @@ added:
  version: "5.2"
 ---

-<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="2000" height="1000" alt="">
+<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="800" height="400" alt="">

 {{< callout >}}
 **Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/vite). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/vite?file=index.html) for live editing.
@@ -135,7 +135,7 @@ With dependencies installed and our project folder ready for us to start coding,
   npm start
   ```

-   <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server.png" alt="Vite dev server running">
+   ![Vite dev server running](/assets/img/guides/vite-dev-server.png)

 In the next and final section to this guide, we’ll import all of Bootstrap’s CSS and JavaScript.

@@ -175,7 +175,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s

 3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:

-   <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap">
+   ![Vite dev server running with Bootstrap](/assets/img/guides/vite-dev-server-bootstrap.png)

   Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Vite example project](https://github.com/twbs/examples/tree/main/vite) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.

@@ -7,7 +7,7 @@ toc: true
 thumbnail: guides/bootstrap-webpack@2x.png
 ---

-<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png" width="2000" height="1000" alt="">
+<img class="d-block mx-auto mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png" width="800" height="400" alt="">

 {{< callout >}}
 **Want to skip to the end?** Download the source code and working demo for this guide from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/webpack). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/webpack?file=index.html) for live editing.
@@ -141,7 +141,7 @@ With dependencies installed and our project folder ready for us to start coding,
   npm start
   ```

-   <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server.png" alt="Webpack dev server running">
+   ![Webpack dev server running](/assets/img/guides/webpack-dev-server.png)

 In the next and final section to this guide, we'll set up the Webpack loaders and import all of Bootstrap's CSS and JavaScript.

@@ -244,7 +244,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first

 4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:

-   <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server-bootstrap.png" alt="Webpack dev server running with Bootstrap">
+   ![Webpack dev server running with Bootstrap](/assets/img/guides/webpack-dev-server-bootstrap.png)

   Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.

@@ -58,7 +58,7 @@ Note that [breaking words isn't possible in Arabic](https://rtlstyling.com/posts

 ## Text transform

-Transform text in components with text capitalization classes.
+Transform text in components with our text capitalization classes: `text-lowercase`, `text-uppercase` or `text-capitalize`.

 {{< example >}}
 <p class="text-lowercase">Lowercased text.</p>
@@ -1,5 +1,6 @@
 ---
 layout: redirect
-sitemap_exclude: true
+sitemap:
+  disable: true
 redirect: "/docs/5.3/getting-started/introduction/"
 ---
@@ -13,7 +13,7 @@ description: An appendix of hosted documentation for nearly every release of Boo
    {{- range $i, $version := $versions }}
      {{- $len := len $versions -}}
      {{ if (eq $i 0) }}<div class="list-group">{{ end }}
-        <a class="list-group-item list-group-item-action py-2 text-primary{{ if (eq $version $.Site.Params.docs_version) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ $release.baseurl }}/{{ $version }}/">
+        <a class="list-group-item list-group-item-action py-2 text-primary{{ if (eq $version $.Site.Params.docs_version) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ urls.JoinPath $release.baseurl $version "/" }}">
          {{ $version }}
          {{ if (eq $version $.Site.Params.docs_version) -}}
          <span class="badge text-bg-primary">Latest</span>
@@ -0,0 +1,8 @@
+{{- $originalSrc := .Destination | safeURL -}}
+{{- $localImgPath := path.Join "/site/static/docs" site.Params.docs_version $originalSrc -}}
+{{- /* This shouldn't be needed but we have a weird folder structure with version included... */ -}}
+{{- $src := urls.JoinPath "/docs" site.Params.docs_version $originalSrc -}}
+{{- $config := imageConfig $localImgPath -}}
+{{- $classes := "d-block img-fluid" -}}
+
+<img src="{{ $src }}" class="{{ $classes }}" alt="{{ .Text }}" width="{{ $config.Width }}" height="{{ $config.Height }}" loading="lazy">
@@ -67,7 +67,7 @@
 {{ end }}
 {{ define "footer" }}
  {{ range .Page.Params.extra_js -}}
-    <script{{ with .async }} async{{ end }} src="{{ .src }}"></script>
+    <script{{ with .async }} async{{ end }}{{ with .defer }} defer{{ end }} src="{{ .src }}"></script>
  {{- end -}}
  <div class="position-fixed" aria-hidden="true"><input type="text" tabindex="-1"></div>
 {{ end }}
@@ -94,78 +94,38 @@
        z-index: 1500;
      }

+      .bd-mode-toggle .bi {
+        width: 1em;
+        height: 1em;
+      }
+
      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }
    </style>

-    {{ range .Page.Params.extra_css }}
+    {{ range .Page.Params.extra_css -}}
    {{ "<!-- Custom styles for this template -->" | safeHTML }}
    <link href="{{ . }}" rel="stylesheet">
    {{- end }}
  </head>
  <body{{ with .Page.Params.body_class }} class="{{ . }}"{{ end }}>
-    <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
-      <symbol id="check2" viewBox="0 0 16 16">
-        <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
-      </symbol>
-      <symbol id="circle-half" viewBox="0 0 16 16">
-        <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
-      </symbol>
-      <symbol id="moon-stars-fill" viewBox="0 0 16 16">
-        <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
-        <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
-      </symbol>
-      <symbol id="sun-fill" viewBox="0 0 16 16">
-        <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
-      </symbol>
-    </svg>
+    {{ partial "examples/icons" . }}

    <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
-      <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
-              id="bd-theme"
-              type="button"
-              aria-expanded="false"
-              data-bs-toggle="dropdown"
-              aria-label="Toggle theme (auto)">
-        <svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg>
-        <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
-      </button>
-      <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
-        <li>
-          <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
-            <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#sun-fill"></use></svg>
-            Light
-            <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
-          </button>
-        </li>
-        <li>
-          <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
-            <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
-            Dark
-            <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
-          </button>
-        </li>
-        <li>
-          <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
-            <svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#circle-half"></use></svg>
-            Auto
-            <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
-          </button>
-        </li>
-      </ul>
+      {{ partial "theme-toggler" . }}
    </div>

    {{ .Content }}

-    {{- if eq hugo.Environment "production" -}}
-      <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }}></script>
+    {{- if hugo.IsProduction -}}
+      <script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }}></script>
    {{- else -}}
-      <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
+      <script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
    {{- end }}

    {{ range .Page.Params.extra_js -}}
-      <script{{ with .async }} async{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script>
+      <script{{ with .async }} async{{ end }}{{ with .defer }} defer{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script>
    {{- end -}}
  </body>
 </html>
@@ -28,29 +28,10 @@
    <div class="container-xxl bd-gutter">
      {{ .Content }}

-      {{ if eq .Title "Examples" }}
-        <hr class="my-5">
-        <div class="container">
-          <div class="text-center">
-            <div class="masthead-followup-icon d-inline-block mb-2 text-bg-danger">
-              {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
-            </div>
-            <h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
-            <p class="col-md-10 col-lg-8 mx-auto lead">
-              Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
-            </p>
-            <a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
-          </div>
-          <img class="d-block img-fluid mt-3 mx-auto"
-               srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png,
-                       /docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage@2x.png 2x"
-               src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes-collage.png"
-               alt="Bootstrap Themes"
-               width="1150"
-               height="320"
-               loading="lazy">
-        </div>
-      {{ end }}
+      {{ if eq .Title "Examples" -}}
+        {{ partial "examples/main" . }}
+        {{ partial "examples/bs-themes" . }}
+      {{- end }}
    </div>
  </main>
 {{ end }}
@@ -1 +1 @@
-<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
+<script defer src="https://cdn.usefathom.com/script.js" data-site="{{ .Site.Params.analytics.fathom_site }}"></script>
@@ -23,7 +23,7 @@
      </button>
    </div>

-    <div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
+    <div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
      <div class="offcanvas-header px-4 pb-0">
        <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
@@ -83,39 +83,7 @@
          </li>

          <li class="nav-item dropdown">
-            <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
-                    id="bd-theme"
-                    type="button"
-                    aria-expanded="false"
-                    data-bs-toggle="dropdown"
-                    data-bs-display="static"
-                    aria-label="Toggle theme (auto)">
-              <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
-              <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
-            </button>
-            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
-              <li>
-                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
-                  <svg class="bi me-2 opacity-50"><use href="#sun-fill"></use></svg>
-                  Light
-                  <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
-                </button>
-              </li>
-              <li>
-                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
-                  <svg class="bi me-2 opacity-50"><use href="#moon-stars-fill"></use></svg>
-                  Dark
-                  <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
-                </button>
-              </li>
-              <li>
-                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
-                  <svg class="bi me-2 opacity-50"><use href="#circle-half"></use></svg>
-                  Auto
-                  <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
-                </button>
-              </li>
-            </ul>
+            {{ partial "theme-toggler" . }}
          </li>
        </ul>
      </div>
@@ -36,7 +36,8 @@
    {{- else }}
      <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
      <li class="bd-links-span-all">
-        <a href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/" class="bd-links-link d-inline-block rounded small {{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
+        {{- $href := urls.JoinPath "/docs" $.Site.Params.docs_version $group_slug "/" }}
+        <a href="{{ $href }}" class="bd-links-link d-inline-block rounded small{{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
          {{ $group.title }}
        </a>
      </li>
@@ -0,0 +1,17 @@
+<hr class="my-5">
+<div class="container">
+  <div class="text-center">
+    <div class="masthead-followup-icon d-inline-block mb-2 text-bg-danger">
+      {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
+    </div>
+    <h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
+    <p class="col-md-10 col-lg-8 mx-auto lead">
+      Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
+    </p>
+    <a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
+  </div>
+  {{ partial "responsive-img" (dict "context" .
+    "imgPath" "/assets/img/bootstrap-themes-collage.png"
+    "alt" "Bootstrap Themes"
+    "classes" "d-block mt-3") }}
+</div>
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+  <symbol id="check2" viewBox="0 0 16 16">
+    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
+  </symbol>
+  <symbol id="circle-half" viewBox="0 0 16 16">
+    <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
+  </symbol>
+  <symbol id="moon-stars-fill" viewBox="0 0 16 16">
+    <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
+    <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
+  </symbol>
+  <symbol id="sun-fill" viewBox="0 0 16 16">
+    <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
+  </symbol>
+</svg>
@@ -0,0 +1,63 @@
+{{ range $entry := $.Site.Data.examples -}}
+<div class="bd-content">
+  <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
+  <p>{{ $entry.description }}</p>
+  {{ if eq $entry.category "RTL" -}}
+    <div class="bd-callout bd-callout-warning small">
+      <p>
+        <strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest?
+      </p>
+      <p><a href="{{ urls.JoinPath $.Site.Params.repo "issues/new/choose" }}">Please open an issue.</a></p>
+    </div>
+  {{ end -}}
+  {{ range $i, $example := $entry.examples -}}
+    {{- $len := len $entry.examples -}}
+    {{ if (eq $i 0) }}<div class="row">{{ end }}
+      {{ if $entry.external -}}
+        <div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
+          <svg class="bi fs-5 flex-shrink-0 mt-1"><use xlink:href="#box-seam"></use></svg>
+          <div>
+            <h3 class="h5 mb-1">
+              <a class="d-block link-offset-1" href="{{ urls.JoinPath $.Site.Params.github_org $example.url }}" target="_blank" rel="noopener">
+                {{ $example.name }}
+              </a>
+            </h3>
+            <p class="text-body-secondary">{{ $example.description }}</p>
+            <p>
+              {{- $indexPath := default "index.html" $example.indexPath -}}
+              {{- $stackBlitzUrl := printf "%s%s%s" (urls.JoinPath "https://stackblitz.com/github/twbs" $example.url) "?file=" ($indexPath | urlquery) }}
+              <a class="icon-link small link-secondary link-offset-1" href="{{ $stackBlitzUrl }}" target="_blank" rel="noopener">
+                <svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
+                Edit in StackBlitz
+              </a>
+            </p>
+          </div>
+        </div>
+      {{ else -}}
+        <div class="col-sm-6 col-md-3 mb-3">
+          {{- $exampleNameUrlized := $example.name | urlize -}}
+          {{- $exampleUrl := urls.JoinPath "/docs" $.Site.Params.docs_version "/examples" $exampleNameUrlized "/" }}
+          <a class="d-block link-offset-1" href="{{ $exampleUrl }}"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
+            {{ $imageBasePath := urls.JoinPath "/docs" $.Site.Params.docs_version "assets/img/examples" -}}
+            {{- $imgPath := urls.JoinPath $imageBasePath (printf "%s.png" $exampleNameUrlized) -}}
+            {{- $imgPath2x := urls.JoinPath $imageBasePath (printf "%s@2x.png" $exampleNameUrlized) -}}
+            {{- with (imageConfig (path.Join "/site/static" $imgPath)) -}}
+            <img class="img-thumbnail mb-3"
+                 srcset="{{ $imgPath }}, {{ $imgPath2x }} 2x"
+                 src="{{ $imgPath }}"
+                 alt=""
+                 width="{{ .Width }}"
+                 height="{{ .Height }}"
+                 loading="lazy">
+            {{- end }}
+            <h3 class="h5 mb-1">
+              {{ $example.name }}
+            </h3>
+          </a>
+          <p class="text-body-secondary">{{ $example.description }}</p>
+        </div>
+      {{- end }}
+    {{ if (eq (add $i 1) $len) }}</div>{{ end -}}
+  {{ end -}}
+</div>
+{{ end -}}
@@ -7,11 +7,13 @@
 <meta name="docsearch:language" content="en">
 <meta name="docsearch:version" content="{{ .Site.Params.docs_version }}">

-<title>{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.subtitle | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}</title>
-
 <link rel="canonical" href="{{ .Permalink }}">

-<link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
+{{ if (ne .Page.Layout "examples") -}}
+<link rel="preconnect" href="https://{{ .Site.Params.algolia.appId | lower }}-dsn.algolia.net" crossorigin>
+{{- end }}
+
+<title>{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.subtitle | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}</title>

 {{ with .Params.robots -}}
 <meta name="robots" content="{{ . }}">
@@ -15,9 +15,9 @@
    </p>
  </div>
  <div class="col-lg-6">
-      <img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png,
-                                                  /docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
-                                          src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png"
-                                          alt="Bootstrap Icons" width="700" height="425" loading="lazy">
+    {{ partial "responsive-img" (dict "context" .
+      "imgPath" "/assets/img/bootstrap-icons.png"
+      "alt" "Bootstrap Icons"
+      "classes" "d-block mt-3") }}
  </div>
 </section>
@@ -1,17 +1,20 @@
 <div class="bd-masthead mb-3" id="content">
  <div class="container-xxl bd-gutter">
    <div class="col-md-8 mx-auto text-center">
-      <a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://blog.getbootstrap.com/">
-        <strong class="d-sm-inline-block p-2 me-2 mb-2 mb-lg-0 rounded-3 masthead-notice">New in v5.3</strong>
-        <span class="text-body-secondary">Color mode support, expanded color palette, and more!</span>
+      <a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol" rel="noopener" target="_blank">
+        <span class="d-sm-inline-flex align-items-center gap-1 py-2 px-3 me-2 mb-2 mb-lg-0 rounded-5 masthead-notice">
+          <span class="fw-semibold">
+            New!
+          </span>
+          Never-Ending Support for Bootstrap
+          <svg class="bi" style="width: 20px; height: 20px;"><use xlink:href="#arrow-right-short"></use></svg>
+        </span>
      </a>
-      <img class="d-none d-sm-block mx-auto mb-3"
-           srcset="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png,
-                   /docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow@2x.png 2x"
-           src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png"
-           alt="Bootstrap"
-           width="200"
-           height="165">
+      {{ partial "responsive-img" (dict "context" .
+        "imgPath" "/assets/brand/bootstrap-logo-shadow.png"
+        "alt" "Bootstrap"
+        "classes" "d-none d-sm-block mb-3"
+        "lazyload" false) }}
      <h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1>
      <p class="lead mb-4">
        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.
@@ -15,9 +15,9 @@
    </p>
  </div>
  <div class="col-lg-6">
-      <img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png,
-                                                  /docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
-                                          src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png"
-                                          alt="Bootstrap Themes" width="700" height="500" loading="lazy">
+    {{ partial "responsive-img" (dict "context" .
+      "imgPath" "/assets/img/bootstrap-themes.png"
+      "alt" "Bootstrap Themes"
+      "classes" "d-block mt-3") }}
  </div>
 </section>
@@ -2,6 +2,9 @@
  <symbol id="arrow-right" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
  </symbol>
+  <symbol id="arrow-right-short" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"/>
+  </symbol>
  <symbol id="book-half" viewBox="0 0 16 16">
    <path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
  </symbol>
@@ -0,0 +1,22 @@
+{{- /*
+  Accepts context, classes, imgPath, alt and lazyload
+*/ -}}
+
+{{- $lazy := .lazyload | default true -}}
+{{- $classes := slice "img-fluid" "mx-auto" | append (slice .classes) -}}
+
+{{- $basePath := path.Join "/docs" .context.Site.Params.docs_version (path.Dir .imgPath) -}}
+{{- $basename := path.BaseName .imgPath -}}
+{{- $ext := path.Ext .imgPath -}}
+{{- $imgPath := path.Join $basePath (printf "%s%s" $basename $ext) -}}
+{{- $imgPath2x := path.Join $basePath (printf "%s@2x%s" $basename $ext) -}}
+
+{{- with (imageConfig (path.Join "/site/static" $imgPath)) }}
+<img class="{{ delimit $classes " " }}"
+     srcset="{{ $imgPath }}, {{ $imgPath2x }} 2x"
+     src="{{ $imgPath }}"
+     alt="{{ $.alt }}"{{ if eq $lazy true }}
+     loading="lazy"{{ end }}
+     width="{{ .Width }}"
+     height="{{ .Height }}">
+{{- end }}
@@ -1,73 +1,40 @@
-{{ if eq hugo.Environment "production" -}}
-  <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }}></script>
+{{ if hugo.IsProduction -}}
+  <script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }}></script>
 {{ else -}}
-  <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
+  <script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
 {{- end }}

-<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
+{{- $esbuildOptions := dict "target" "es2019" -}}
+{{- $targetDocsJSPath := path.Join "/docs" .Site.Params.docs_version -}}
+
+{{- if hugo.IsProduction -}}
+  {{- $esbuildOptions = merge $esbuildOptions (dict "minify" "true") -}}
+{{- end }}
+
+{{- $applicationJs := resources.Get "js/application.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/application.js") }}
+<script defer src="{{ $applicationJs.RelPermalink }}"></script>
+
+{{- if (ne .Page.Layout "examples") -}}
+{{- $esbuildParams := dict
+  "apiKey" .Site.Params.algolia.apiKey
+  "appId" .Site.Params.algolia.appId
+  "indexName" .Site.Params.algolia.indexName
+-}}
+{{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}}
+{{- $searchJs := resources.Get "js/search.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/search.js") }}
+<script defer src="{{ $searchJs.RelPermalink }}"></script>
+{{- end -}}

 {{ if eq .Page.Layout "docs" -}}
-<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
-{{- end }}
-
-{{- $vendor := resources.Match "js/vendor/*.js" -}}
-{{- $js := resources.Match "js/*.js" -}}
-{{- $targetDocsJSPath := path.Join "/docs" .Site.Params.docs_version "assets/js/docs.js" -}}
-{{- $docsJs := append $js $vendor | resources.Concat $targetDocsJSPath -}}
-
-{{- if eq hugo.Environment "production" -}}
-  {{- $docsJs = $docsJs | resources.Minify -}}
-{{- end }}
-
-<script src="{{ $docsJs.Permalink | relURL }}"></script>
-
-{{ if eq .Page.Layout "docs" -}}
-<script>
-  // Open in StackBlitz logic
-  document.querySelectorAll('.btn-edit').forEach(btn => {
-    btn.addEventListener('click', event => {
-      const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
-
-      // Get extra classes for this example
-      const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
-
-      const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
-      StackBlitzSDK.openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
-    })
-  })
-
-  StackBlitzSDK.openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
-    const markup = `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="{{ .Site.Params.cdn.css }}" rel="stylesheet">
-    <link href="https://getbootstrap.com/docs/{{ .Site.Params.docs_version }}/assets/css/docs.css" rel="stylesheet">
-    <title>Bootstrap Example</title>
-    <${'script'} src="{{ .Site.Params.cdn.js_bundle }}"></${'script'}>
-  </head>
-  <body class="p-3 m-0 border-0 ${classes}">
-
-    <!-- Example Code -->
-${htmlSnippet.replace(/^/gm, '    ')}
-    <!-- End Example Code -->
-  </body>
-</html>`
-
-    const jsSnippetContent = jsSnippet ? '{{ os.ReadFile "site/assets/js/snippets.js" }}' : null
-    const project = {
-      files: {
-        'index.html': markup,
-        'index.js': jsSnippetContent
-      },
-      title: 'Bootstrap Example',
-      description: `Official example from ${window.location.href}`,
-      template: jsSnippet ? 'javascript' : 'html',
-      tags: ['bootstrap']
-    }
-
-    StackBlitzSDK.openProject(project, { openFile: 'index.html' })
-  }
-</script>
-{{- end }}
+{{- /* Disable minify options for snippets.js so that the file's readable on StackBlitz */ -}}
+{{- $snippetsFile := resources.Get "js/snippets.js" | js.Build (merge $esbuildOptions (dict "minify" "false")) -}}
+{{- $esbuildParams := dict
+  "cssCdn" .Site.Params.cdn.css
+  "jsBundleCdn" .Site.Params.cdn.js_bundle
+  "docsVersion" .Site.Params.docs_version
+  "jsSnippetFile" $snippetsFile.Content
+-}}
+{{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}}
+{{- $stackblitzJs := resources.Get "js/stackblitz.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/stackblitz.js") }}
+<script defer src="{{ $stackblitzJs.RelPermalink }}"></script>
+{{- end -}}
@@ -1,6 +1,4 @@
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
-
-{{ if eq hugo.Environment "production" -}}
+{{ if hugo.IsProduction -}}
 {{ if eq .Page.Params.direction "rtl" -}}
 <link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.rtl.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_rtl_hash | safeHTMLAttr }}>
 {{- else -}}
@@ -11,15 +9,19 @@
 {{- end }}

 {{- if (ne .Page.Layout "examples") }}
-{{- $targetDocsCssPath := path.Join "/docs" .Site.Params.docs_version "assets/css/docs.css" -}}
-{{- $sassOptions := dict "targetPath" $targetDocsCssPath "outputStyle" "expanded" "precision" 6 -}}
+{{- $sassOptions := dict "outputStyle" "expanded" "precision" 6 -}}
 {{- $postcssOptions := dict "use" "autoprefixer" "noMap" true -}}

-{{ if eq hugo.Environment "production" -}}
+{{- $targetDocsCssPath := path.Join "/docs" .Site.Params.docs_version "assets/css/docs.css" -}}
+{{- $targetSearchCssPath := path.Join "/docs" .Site.Params.docs_version "assets/css/search.css" -}}
+
+{{ if hugo.IsProduction -}}
  {{- $sassOptions = merge $sassOptions (dict "outputStyle" "compressed") -}}
 {{- end -}}

-{{- $style := resources.Get "scss/docs.scss" | toCSS $sassOptions | postCSS $postcssOptions }}
+{{- $docsCss := resources.Get "scss/docs.scss" | toCSS (merge (dict "targetPath" $targetDocsCssPath) $sassOptions) | postCSS $postcssOptions -}}
+{{- $searchCss := resources.Get "scss/search.scss" | toCSS (merge (dict "targetPath" $targetSearchCssPath) $sassOptions) | postCSS $postcssOptions -}}

-<link href="{{ $style.Permalink | relURL }}" rel="stylesheet">
+<link href="{{ $docsCss.RelPermalink }}" rel="stylesheet">
+<link href="{{ $searchCss.RelPermalink }}" rel="stylesheet">
 {{- end }}
@@ -0,0 +1,34 @@
+{{- $isExamples := eq .Layout "examples" -}}
+<button class="btn {{ if $isExamples }}btn-bd-primary{{ else }}btn-link nav-link px-0 px-lg-2{{ end }} py-2 dropdown-toggle d-flex align-items-center"
+        id="bd-theme"
+        type="button"
+        aria-expanded="false"
+        data-bs-toggle="dropdown"
+        {{ if not $isExamples }}data-bs-display="static"{{ end }}
+        aria-label="Toggle theme (auto)">
+  <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
+  <span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span>
+</button>
+<ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text">
+  <li>
+    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
+      <svg class="bi me-2 opacity-50"><use href="#sun-fill"></use></svg>
+      Light
+      <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+    </button>
+  </li>
+  <li>
+    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
+      <svg class="bi me-2 opacity-50"><use href="#moon-stars-fill"></use></svg>
+      Dark
+      <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+    </button>
+  </li>
+  <li>
+    <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
+      <svg class="bi me-2 opacity-50"><use href="#circle-half"></use></svg>
+      Auto
+      <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+    </button>
+  </li>
+</ul>
@@ -1,8 +1,7 @@
 # www.robotstxt.org

-{{- $isProduction := eq hugo.Environment "production" -}}
 {{- $isNetlify := eq (getenv "NETLIFY") "true" -}}
-{{- $allowCrawling := and (not $isNetlify) $isProduction -}}
+{{- $allowCrawling := and (not $isNetlify) hugo.IsProduction -}}

 {{ if $allowCrawling }}
 # Allow crawling of all content
@@ -1,12 +0,0 @@
-{{ printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
-  {{- range .Data.Pages -}}{{ if and .Permalink (ne .Params.sitemap_exclude true) }}
-  <url>
-    <loc>{{ .Permalink }}</loc>{{ if not .Lastmod.IsZero }}
-    <lastmod>{{ safeHTML (.Lastmod.Format "2006-01-02T15:04:05-07:00") }}</lastmod>{{ end }}{{ with .Sitemap.ChangeFreq }}
-    <changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
-    <priority>{{ .Sitemap.Priority }}</priority>{{ end }}{{ if .IsTranslated }}{{ range .Translations }}
-    <xhtml:link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}"/>{{ end }}
-    <xhtml:link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}"/>{{ end }}
-  </url>{{ end }}{{ end }}
-</urlset>