Update karma.conf.js

BrowserStack: Google Pixel 3
Fixes to increase stability (#38511 )
2024-03-07 17:45:54 +02:00 · 2024-03-07 17:39:00 +02:00 · 2024-03-07 17:39:00 +02:00 · 2024-03-07 17:38:59 +02:00 · 2024-03-07 17:38:59 +02:00 · 2024-03-07 17:38:59 +02:00
218 changed files with 14107 additions and 6006 deletions
@@ -38,7 +38,7 @@
    },
    {
      "path": "./dist/js/bootstrap.bundle.min.js",
-      "maxSize": "23.5 kB"
+      "maxSize": "23.25 kB"
    },
    {
      "path": "./dist/js/bootstrap.esm.js",
@@ -85,7 +85,6 @@
    "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",
@@ -98,9 +97,7 @@
    "unicorn/prefer-module": "off",
    "unicorn/prefer-query-selector": "off",
    "unicorn/prefer-spread": "off",
-    "unicorn/prefer-string-raw": "off",
    "unicorn/prefer-string-replace-all": "off",
-    "unicorn/prefer-structured-clone": "off",
    "unicorn/prevent-abbreviations": "off"
  },
  "overrides": [
@@ -200,15 +197,6 @@
        "unicorn/no-array-for-each": "off"
      }
    },
-    {
-      "files": [
-        "site/assets/js/**"
-      ],
-      "parserOptions": {
-        "sourceType": "module",
-        "ecmaVersion": 2020
-      }
-    },
    {
      "files": [
        "**/*.md"
@@ -220,10 +208,9 @@
    },
    {
      "files": [
-        "**/*.md/*.js",
-        "**/*.md/*.mjs"
+        "**/*.md/*.js"
      ],
-      "extends": "plugin:markdown/recommended-legacy",
+      "extends": "plugin:markdown/recommended",
      "parserOptions": {
        "sourceType": "module"
      },
@@ -221,7 +221,7 @@ includes code changes) and under the terms of the

 [Adhere to the Code Guide.](https://codeguide.co/#css)

- When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG/#distinguishable).
+- When feasible, default color palettes should comply with [WCAG color contrast guidelines](https://www.w3.org/TR/WCAG20/#visual-audio-contrast).
 - Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/) for more details.

 ### JS
@@ -21,8 +21,3 @@ updates:
      timezone: Europe/Athens
    versioning-strategy: increase
    rebase-strategy: disabled
-    groups:
-      production-dependencies:
-        dependency-type: "production"
-      development-dependencies:
-        dependency-type: "development"
@@ -18,7 +18,7 @@ jobs:
  browserstack:
    runs-on: ubuntu-latest
    if: github.repository == 'twbs/bootstrap'
-    timeout-minutes: 30
+    timeout-minutes: 15

    steps:
      - name: Clone repository
@@ -0,0 +1,47 @@
+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,3 +41,4 @@ Thumbs.db
 /dist-sass/
 /js/coverage/
 /node_modules/
+/.lambdatest/
@@ -0,0 +1 @@
+lockfile-version=2
@@ -1,6 +1,6 @@
 The MIT License (MIT)

-Copyright (c) 2011-2025 The Bootstrap Authors
+Copyright (c) 2011-2024 The Bootstrap Authors

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -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://www.reddit.com/r/bootstrap/).
+- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://reddit.com/r/bootstrap).
 - Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.
 - Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)).
 - Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/browse/keyword/bootstrap) or similar delivery mechanisms for maximum discoverability.
@@ -243,4 +243,4 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com

 ## Copyright and license

-Code and documentation copyright 2011-2025 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors). Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
+Code and documentation copyright 2011–2024 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors). Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
@@ -2,14 +2,14 @@

 /*!
 * Script to build our plugins to use them separately.
- * Copyright 2020-2025 The Bootstrap Authors
+ * Copyright 2020-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

 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 = await globby(`${sourcePath}/**/*.js`)
+const jsFiles = globby.sync(`${sourcePath}/**/*.js`)

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

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

  const bundle = await rollup({
@@ -2,7 +2,7 @@

 /*!
 * Script to update version number references in the project.
- * Copyright 2017-2025 The Bootstrap Authors
+ * Copyright 2017-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

@@ -5,7 +5,7 @@
 * Remember to use the same vendor files as the CDN ones,
 * otherwise the hashes won't match!
 *
- * Copyright 2017-2025 The Bootstrap Authors
+ * Copyright 2017-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

@@ -2,7 +2,7 @@

 /*!
 * Script to run vnu-jar if Java is available.
- * Copyright 2017-2025 The Bootstrap Authors
+ * Copyright 2017-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

@@ -3,7 +3,7 @@
 /*!
 * Script to create the built examples zip archive;
 * requires the `zip` command to be present!
- * Copyright 2020-2025 The Bootstrap Authors
+ * Copyright 2020-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

@@ -8,6 +8,8 @@ security:
    getenv:
      - ^HUGO_
      - NETLIFY
+  gotemplates:
+    allowActionJSTmpl: true

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

-build:
-  noJSConfigInAssets:   true
-
 buildDrafts:            true
 buildFuture:            true

@@ -45,8 +44,6 @@ 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
@@ -70,14 +67,6 @@ 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"
@@ -56,7 +56,7 @@ const Manipulator = {

    for (const key of bsKeys) {
      let pureKey = key.replace(/^bs/, '')
-      pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1)
+      pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length)
      attributes[pureKey] = normalizeData(element.dataset[key])
    }

@@ -320,7 +320,7 @@ class Dropdown extends BaseComponent {

    return {
      ...defaultBsPopperConfig,
-      ...execute(this._config.popperConfig, [undefined, defaultBsPopperConfig])
+      ...execute(this._config.popperConfig, [defaultBsPopperConfig])
    }
  }

@@ -160,6 +160,7 @@ class Tooltip extends BaseComponent {
      return
    }

+    this._activeTrigger.click = !this._activeTrigger.click
    if (this._isShown()) {
      this._leave()
      return
@@ -391,7 +392,7 @@ class Tooltip extends BaseComponent {
  }

  _resolvePossibleFunction(arg) {
-    return execute(arg, [this._element, this._element])
+    return execute(arg, [this._element])
  }

  _getPopperConfig(attachment) {
@@ -437,7 +438,7 @@ class Tooltip extends BaseComponent {

    return {
      ...defaultBsPopperConfig,
-      ...execute(this._config.popperConfig, [undefined, defaultBsPopperConfig])
+      ...execute(this._config.popperConfig, [defaultBsPopperConfig])
    }
  }

@@ -170,7 +170,7 @@ const noop = () => {}
 * @param {HTMLElement} element
 * @return void
 *
- * @see https://www.harrytheo.com/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
+ * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
 */
 const reflow = element => {
  element.offsetHeight // eslint-disable-line no-unused-expressions
@@ -223,7 +223,7 @@ const defineJQueryPlugin = plugin => {
 }

 const execute = (possibleCallback, args = [], defaultValue = possibleCallback) => {
-  return typeof possibleCallback === 'function' ? possibleCallback.call(...args) : defaultValue
+  return typeof possibleCallback === 'function' ? possibleCallback(...args) : defaultValue
 }

 const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
@@ -143,7 +143,7 @@ class TemplateFactory extends Config {
  }

  _resolvePossibleFunction(arg) {
-    return execute(arg, [undefined, this])
+    return execute(arg, [this])
  }

  _putElementInTemplate(element, templateElement) {
@@ -3,75 +3,149 @@
 'use strict'

 const browsers = {
-  safariMac: {
-    base: 'BrowserStack',
-    os: 'OS X',
-    os_version: 'Catalina',
-    browser: 'Safari',
-    browser_version: 'latest'
+  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
+    }
  },
-  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
+  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
+    }
  }
 }

@@ -1,11 +1,11 @@
-const FIXTURE_ID = 'fixture'
+const fixtureId = 'fixture'

 export const getFixture = () => {
-  let fixtureElement = document.getElementById(FIXTURE_ID)
+  let fixtureElement = document.getElementById(fixtureId)

  if (!fixtureElement) {
    fixtureElement = document.createElement('div')
-    fixtureElement.setAttribute('id', FIXTURE_ID)
+    fixtureElement.setAttribute('id', fixtureId)
    fixtureElement.style.position = 'absolute'
    fixtureElement.style.top = '-10000px'
    fixtureElement.style.left = '-10000px'
@@ -9,9 +9,21 @@ 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'
@@ -54,15 +66,23 @@ const config = {
  colors: true,
  autoWatch: false,
  singleRun: true,
-  concurrency: Number.POSITIVE_INFINITY,
+  captureTimeout: 180_000,
+  browserDisconnectTolerance: 3,
+  browserDisconnectTimeout: 180_000,
+  browserNoActivityTimeout: 400_000,
+  retryLimit: 2,
+  concurrency: 5,
  client: {
-    clearContext: false
+    clearContext: false,
+    jasmine: {
+      timeoutInterval: 120_000
+    }
  },
  files: [
    'node_modules/hammer-simulator/index.js',
    {
      pattern: 'js/tests/unit/**/!(jquery).spec.js',
-      watched: !BROWSERSTACK
+      watched: !BROWSERSTACK && !LAMBDATEST
    }
  ],
  preprocessors: {
@@ -98,18 +118,51 @@ const config = {
  }
 }

-if (BROWSERSTACK) {
+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) {
  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',
-    retryLimit: 2
+    project: 'Bootstrap'
  }
  plugins.push('karma-browserstack-launcher', 'karma-jasmine-html-reporter')
-  config.customLaunchers = browsers
-  config.browsers = Object.keys(browsers)
+  config.customLaunchers = browsers.browserStack
+  config.browsers = Object.keys(browsers.browserStack)
  reporters.push('BrowserStack', 'kjhtml')
 } else if (JQUERY_TEST) {
  frameworks.push('detectBrowsers')
@@ -0,0 +1,28 @@
+/* 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)
+  })
+})()
@@ -172,10 +172,7 @@ describe('Dropdown', () => {

      const popperConfig = dropdown._getPopperConfig()

-      // Ensure that the function was called with the default config.
-      expect(getPopperConfig).toHaveBeenCalledWith(jasmine.objectContaining({
-        placement: jasmine.any(String)
-      }))
+      expect(getPopperConfig).toHaveBeenCalled()
      expect(popperConfig.placement).toEqual('left')
    })
  })
@@ -56,26 +56,6 @@ describe('Popover', () => {
  })

  describe('show', () => {
-    it('should toggle a popover after show', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
-
-        const popoverEl = fixtureEl.querySelector('a')
-        const popover = new Popover(popoverEl)
-
-        popoverEl.addEventListener('shown.bs.popover', () => {
-          expect(document.querySelector('.popover')).not.toBeNull()
-          popover.toggle()
-        })
-        popoverEl.addEventListener('hidden.bs.popover', () => {
-          expect(document.querySelector('.popover')).toBeNull()
-          resolve()
-        })
-
-        popover.show()
-      })
-    })
-
    it('should show a popover', () => {
      return new Promise(resolve => {
        fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>'
@@ -115,60 +95,6 @@ describe('Popover', () => {
      })
    })

-    it('should call content and title functions with trigger element', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" data-foo="bar">BS twitter</a>'
-
-        const popoverEl = fixtureEl.querySelector('a')
-        const popover = new Popover(popoverEl, {
-          title(el) {
-            return el.dataset.foo
-          },
-          content(el) {
-            return el.dataset.foo
-          }
-        })
-
-        popoverEl.addEventListener('shown.bs.popover', () => {
-          const popoverDisplayed = document.querySelector('.popover')
-
-          expect(popoverDisplayed).not.toBeNull()
-          expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('bar')
-          expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('bar')
-          resolve()
-        })
-
-        popover.show()
-      })
-    })
-
-    it('should call content and title functions with correct this value', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" data-foo="bar">BS twitter</a>'
-
-        const popoverEl = fixtureEl.querySelector('a')
-        const popover = new Popover(popoverEl, {
-          title() {
-            return this.dataset.foo
-          },
-          content() {
-            return this.dataset.foo
-          }
-        })
-
-        popoverEl.addEventListener('shown.bs.popover', () => {
-          const popoverDisplayed = document.querySelector('.popover')
-
-          expect(popoverDisplayed).not.toBeNull()
-          expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('bar')
-          expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('bar')
-          resolve()
-        })
-
-        popover.show()
-      })
-    })
-
    it('should show a popover with just content without having header', () => {
      return new Promise(resolve => {
        fixtureEl.innerHTML = '<a href="#">Nice link</a>'
@@ -177,10 +177,7 @@ describe('Tooltip', () => {

      const popperConfig = tooltip._getPopperConfig('top')

-      // Ensure that the function was called with the default config.
-      expect(getPopperConfig).toHaveBeenCalledWith(jasmine.objectContaining({
-        placement: jasmine.any(String)
-      }))
+      expect(getPopperConfig).toHaveBeenCalled()
      expect(popperConfig.placement).toEqual('left')
    })

@@ -922,12 +919,10 @@ describe('Tooltip', () => {

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

+        const spy = jasmine.createSpy('customClass').and.returnValue('custom-class')
        const tooltipEl = fixtureEl.querySelector('a')
-        const spy = jasmine.createSpy('customClass').and.callFake(function (el) {
-          return `${el.dataset.classA} ${this.dataset.classB}`
-        })
        const tooltip = new Tooltip(tooltipEl, {
          customClass: spy
        })
@@ -936,8 +931,7 @@ describe('Tooltip', () => {
          const tip = document.querySelector('.tooltip')
          expect(tip).not.toBeNull()
          expect(spy).toHaveBeenCalled()
-          expect(tip).toHaveClass('custom-class-a')
-          expect(tip).toHaveClass('custom-class-b')
+          expect(tip).toHaveClass('custom-class')
          resolve()
        })

@@ -1343,32 +1337,6 @@ describe('Tooltip', () => {

      expect(tooltip._getTitle()).toEqual('test')
    })
-
-    it('should call title function with trigger element', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-foo="bar"></a>'
-
-      const tooltipEl = fixtureEl.querySelector('a')
-      const tooltip = new Tooltip(tooltipEl, {
-        title(el) {
-          return el.dataset.foo
-        }
-      })
-
-      expect(tooltip._getTitle()).toEqual('bar')
-    })
-
-    it('should call title function with correct this value', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-foo="bar"></a>'
-
-      const tooltipEl = fixtureEl.querySelector('a')
-      const tooltip = new Tooltip(tooltipEl, {
-        title() {
-          return this.dataset.foo
-        }
-      })
-
-      expect(tooltip._getTitle()).toEqual('bar')
-    })
  })

  describe('getInstance', () => {
@@ -521,10 +521,10 @@ describe('Util', () => {

    it('should execute if arg is function & return the result', () => {
      const functionFoo = (num1, num2 = 10) => num1 + num2
-      const resultFoo = Util.execute(functionFoo, [undefined, 4, 5])
+      const resultFoo = Util.execute(functionFoo, [4, 5])
      expect(resultFoo).toBe(9)

-      const resultFoo1 = Util.execute(functionFoo, [undefined, 4])
+      const resultFoo1 = Util.execute(functionFoo, [4])
      expect(resultFoo1).toBe(14)

      const functionBar = () => 'foo'
@@ -1,393 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="../../../dist/css/bootstrap.min.css" rel="stylesheet">
-    <title>Form</title>
-    <style></style>
-  </head>
-  <body>
-    <div class="container py-5 d-flex flex-column gap-3">
-      <div class="form-floating">
-        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
-        <label for="floatingInput">Email address</label>
-      </div>
-      <div class="form-floating">
-        <input type="email" class="form-control" id="floatingInput1" placeholder="name@example.com">
-        <label for="floatingInput1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </div>
-      <form class="form-floating">
-        <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
-        <label for="floatingInputValue">Input with value</label>
-      </form>
-      <form class="form-floating">
-        <input type="email" class="form-control" id="floatingInputValue1" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
-        <label for="floatingInputValue1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </form>
-      <form class="form-floating">
-        <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
-        <label for="floatingInputInvalid">Invalid input</label>
-      </form>
-      <form class="form-floating">
-        <input type="email" class="form-control is-invalid" id="floatingInputInvalid1" placeholder="name@example.com" value="test@example.com">
-        <label for="floatingInputInvalid1">Invalid input</label>
-      </form>
-      <form class="form-floating">
-        <input type="email" class="form-control is-invalid" id="floatingInputInvalid2" placeholder="name@example.com">
-        <label for="floatingInputInvalid2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </form>
-      <form class="form-floating">
-        <input type="email" class="form-control is-invalid" id="floatingInputInvalid3" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
-        <label for="floatingInputInvalid3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </form>
-      <div class="form-floating">
-        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
-        <label for="floatingTextarea">Comments</label>
-      </div>
-      <div class="form-floating">
-        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea1"></textarea>
-        <label for="floatingTextarea1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </div>
-      <div class="form-floating">
-        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 50px"></textarea>
-        <label for="floatingTextarea2">Comments</label>
-      </div>
-      <div class="form-floating">
-        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea3" style="height: 50px"></textarea>
-        <label for="floatingTextarea3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </div>
-      <div class="form-floating">
-        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea4" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea>
-        <label for="floatingTextarea4">Comments</label>
-      </div>
-      <div class="form-floating">
-        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea5" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea>
-        <label for="floatingTextarea5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </div>
-      <div class="form-floating">
-        <textarea class="form-control is-invalid" placeholder="Leave a comment here" id="floatingTextarea6" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea>
-        <label for="floatingTextarea6">Comments</label>
-      </div>
-      <div class="form-floating">
-        <textarea class="form-control is-invalid" placeholder="Leave a comment here" id="floatingTextarea7" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea>
-        <label for="floatingTextarea7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </div>
-      <div class="form-floating">
-        <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
-          <option selected>Open this select menu</option>
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-        </select>
-        <label for="floatingSelect">Works with selects</label>
-      </div>
-      <div class="form-floating">
-        <select class="form-select is-invalid" id="floatingSelect1" aria-label="Floating label select example">
-          <option selected>Open this select menu</option>
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-        </select>
-        <label for="floatingSelect1">Works with selects</label>
-      </div>
-      <div class="form-floating">
-        <select class="form-select" id="floatingSelect2" aria-label="Floating label select example">
-          <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-          <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-          <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-          <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-        </select>
-        <label for="floatingSelect2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </div>
-      <div class="form-floating">
-        <select class="form-select is-invalid" id="floatingSelect3" aria-label="Floating label select example">
-          <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-          <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-          <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-          <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-        </select>
-        <label for="floatingSelect3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </div>
-      <div class="form-floating mb-3">
-        <input type="email" class="form-control" id="floatingInputDisabled" placeholder="name@example.com" disabled>
-        <label for="floatingInputDisabled">Email address</label>
-      </div>
-      <div class="form-floating mb-3">
-        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled" disabled></textarea>
-        <label for="floatingTextareaDisabled">Comments</label>
-      </div>
-      <div class="form-floating mb-3">
-        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled1" style="height: 50px" disabled>Disabled textarea with some text inside</textarea>
-        <label for="floatingTextareaDisabled1">Comments</label>
-      </div>
-      <div class="form-floating">
-        <select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled>
-          <option selected>Open this select menu</option>
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-        </select>
-        <label for="floatingSelectDisabled">Works with selects</label>
-      </div>
-      <div class="form-floating mb-3">
-        <input type="email" class="form-control" id="floatingInputDisabled1" placeholder="name@example.com" disabled>
-        <label for="floatingInputDisabled1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </div>
-      <div class="form-floating mb-3">
-        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled2" disabled></textarea>
-        <label for="floatingTextareaDisabled2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </div>
-      <div class="form-floating mb-3">
-        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled3" style="height: 50px" disabled>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea>
-        <label for="floatingTextareaDisabled3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </div>
-      <div class="form-floating">
-        <select class="form-select" id="floatingSelectDisabled1" aria-label="Floating label disabled select example" disabled>
-          <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-          <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-          <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-          <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-        </select>
-        <label for="floatingSelectDisabled1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </div>
-      <div class="form-floating mb-3">
-        <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="name@example.com">
-        <label for="floatingEmptyPlaintextInput">Empty input</label>
-      </div>
-      <div class="form-floating mb-3">
-        <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="name@example.com" value="name@example.com">
-        <label for="floatingPlaintextInput">Input with value</label>
-      </div>
-      <div class="form-floating mb-3">
-        <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput1" placeholder="name@example.com">
-        <label for="floatingEmptyPlaintextInput1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </div>
-      <div class="form-floating mb-3">
-        <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput1" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
-        <label for="floatingPlaintextInput1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-      </div>
-      <!--Compare form-select rendering depending on the size-->
-      <div class="form-floating">
-        <select class="form-select" id="floatingSelectRegular" aria-label="Floating label select example">
-          <option selected="">Open this select menu</option>
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-        </select>
-        <label for="floatingSelectRegular">Works with selects</label>
-      </div>
-      <div class="form-floating">
-        <select class="form-select form-select-sm" id="floatingSelectSmall" aria-label="Floating label select example">
-          <option selected="">Open this select menu</option>
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-        </select>
-        <label for="floatingSelectSmall">Works with selects</label>
-      </div>
-      <div class="form-floating">
-        <select class="form-select form-select-lg" id="floatingSelectLarge" aria-label="Floating label select example">
-          <option selected="">Open this select menu</option>
-          <option value="1">One</option>
-          <option value="2">Two</option>
-          <option value="3">Three</option>
-        </select>
-        <label for="floatingSelectLarge">Works with selects</label>
-      </div>
-    </div>
-    
-    <div class="container-fluid bg-body" data-bs-theme="dark">
-      <div class="container py-5 d-flex flex-column gap-3">
-        <div class="form-floating">
-          <input type="email" class="form-control" id="floatingInput2" placeholder="name@example.com">
-          <label for="floatingInput2">Email address</label>
-        </div>
-        <div class="form-floating">
-          <input type="email" class="form-control" id="floatingInput3" placeholder="name@example.com">
-          <label for="floatingInput3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </div>
-        <form class="form-floating">
-          <input type="email" class="form-control" id="floatingInputValue2" placeholder="name@example.com" value="test@example.com">
-          <label for="floatingInputValue2">Input with value</label>
-        </form>
-        <form class="form-floating">
-          <input type="email" class="form-control" id="floatingInputValue3" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
-          <label for="floatingInputValue3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </form>
-        <form class="form-floating">
-          <input type="email" class="form-control is-invalid" id="floatingInputInvalid4" placeholder="name@example.com" value="test@example.com">
-          <label for="floatingInputInvalid4">Invalid input</label>
-        </form>
-        <form class="form-floating">
-          <input type="email" class="form-control is-invalid" id="floatingInputInvalid5" placeholder="name@example.com" value="test@example.com">
-          <label for="floatingInputInvalid5">Invalid input</label>
-        </form>
-        <form class="form-floating">
-          <input type="email" class="form-control is-invalid" id="floatingInputInvalid6" placeholder="name@example.com">
-          <label for="floatingInputInvalid6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </form>
-        <form class="form-floating">
-          <input type="email" class="form-control is-invalid" id="floatingInputInvalid7" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
-          <label for="floatingInputInvalid7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </form>
-        <div class="form-floating">
-          <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea8"></textarea>
-          <label for="floatingTextarea8">Comments</label>
-        </div>
-        <div class="form-floating">
-          <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea9"></textarea>
-          <label for="floatingTextarea9">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </div>
-        <div class="form-floating">
-          <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea10" style="height: 50px"></textarea>
-          <label for="floatingTextarea10">Comments</label>
-        </div>
-        <div class="form-floating">
-          <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea11" style="height: 50px"></textarea>
-          <label for="floatingTextarea11">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </div>
-        <div class="form-floating">
-          <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea12" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea>
-          <label for="floatingTextarea12">Comments</label>
-        </div>
-        <div class="form-floating">
-          <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea13" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea>
-          <label for="floatingTextarea13">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </div>
-        <div class="form-floating">
-          <textarea class="form-control is-invalid" placeholder="Leave a comment here" id="floatingTextarea14" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea>
-          <label for="floatingTextarea14">Comments</label>
-        </div>
-        <div class="form-floating">
-          <textarea class="form-control is-invalid" placeholder="Leave a comment here" id="floatingTextarea15" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea>
-          <label for="floatingTextarea15">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </div>
-        <div class="form-floating">
-          <select class="form-select" id="floatingSelect4" aria-label="Floating label select example">
-            <option selected>Open this select menu</option>
-            <option value="1">One</option>
-            <option value="2">Two</option>
-            <option value="3">Three</option>
-          </select>
-          <label for="floatingSelect4">Works with selects</label>
-        </div>
-        <div class="form-floating">
-          <select class="form-select is-invalid" id="floatingSelect5" aria-label="Floating label select example">
-            <option selected>Open this select menu</option>
-            <option value="1">One</option>
-            <option value="2">Two</option>
-            <option value="3">Three</option>
-          </select>
-          <label for="floatingSelect5">Works with selects</label>
-        </div>
-        <div class="form-floating">
-          <select class="form-select" id="floatingSelect6" aria-label="Floating label select example">
-            <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-            <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-            <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-            <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-          </select>
-          <label for="floatingSelect6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </div>
-        <div class="form-floating">
-          <select class="form-select is-invalid" id="floatingSelect7" aria-label="Floating label select example">
-            <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-            <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-            <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-            <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-          </select>
-          <label for="floatingSelect7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </div>
-        <div class="form-floating mb-3">
-          <input type="email" class="form-control" id="floatingInputDisabled2" placeholder="name@example.com" disabled>
-          <label for="floatingInputDisabled2">Email address</label>
-        </div>
-        <div class="form-floating mb-3">
-          <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled4" disabled></textarea>
-          <label for="floatingTextareaDisabled4">Comments</label>
-        </div>
-        <div class="form-floating mb-3">
-          <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled5" style="height: 50px" disabled>Disabled textarea with some text inside</textarea>
-          <label for="floatingTextareaDisabled5">Comments</label>
-        </div>
-        <div class="form-floating">
-          <select class="form-select" id="floatingSelectDisabled2" aria-label="Floating label disabled select example" disabled>
-            <option selected>Open this select menu</option>
-            <option value="1">One</option>
-            <option value="2">Two</option>
-            <option value="3">Three</option>
-          </select>
-          <label for="floatingSelectDisabled2">Works with selects</label>
-        </div>
-        <div class="form-floating mb-3">
-          <input type="email" class="form-control" id="floatingInputDisabled3" placeholder="name@example.com" disabled>
-          <label for="floatingInputDisabled3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </div>
-        <div class="form-floating mb-3">
-          <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled6" disabled></textarea>
-          <label for="floatingTextareaDisabled6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </div>
-        <div class="form-floating mb-3">
-          <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled7" style="height: 50px" disabled>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea>
-          <label for="floatingTextareaDisabled7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </div>
-        <div class="form-floating">
-          <select class="form-select" id="floatingSelectDisabled3" aria-label="Floating label disabled select example" disabled>
-            <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-            <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-            <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-            <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option>
-          </select>
-          <label for="floatingSelectDisabled3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </div>
-        <div class="form-floating mb-3">
-          <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput2" placeholder="name@example.com">
-          <label for="floatingEmptyPlaintextInput2">Empty input</label>
-        </div>
-        <div class="form-floating mb-3">
-          <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput2" placeholder="name@example.com" value="name@example.com">
-          <label for="floatingPlaintextInput2">Input with value</label>
-        </div>
-        <div class="form-floating mb-3">
-          <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput3" placeholder="name@example.com">
-          <label for="floatingEmptyPlaintextInput3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </div>
-        <div class="form-floating mb-3">
-          <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput3" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
-          <label for="floatingPlaintextInput3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
-        </div>
-        <!--Compare form-select rendering depending on the size-->
-        <div class="form-floating">
-          <select class="form-select" id="floatingSelectRegularDark" aria-label="Floating label select example">
-            <option selected="">Open this select menu</option>
-            <option value="1">One</option>
-            <option value="2">Two</option>
-            <option value="3">Three</option>
-          </select>
-          <label for="floatingSelectRegularDark">Works with selects</label>
-        </div>
-        <div class="form-floating">
-          <select class="form-select form-select-sm" id="floatingSelectSmallDark" aria-label="Floating label select example">
-            <option selected="">Open this select menu</option>
-            <option value="1">One</option>
-            <option value="2">Two</option>
-            <option value="3">Three</option>
-          </select>
-          <label for="floatingSelectSmallDark">Works with selects</label>
-        </div>
-        <div class="form-floating">
-          <select class="form-select form-select-lg" id="floatingSelectLargeDark" aria-label="Floating label select example">
-            <option selected="">Open this select menu</option>
-            <option value="1">One</option>
-            <option value="2">Two</option>
-            <option value="3">Three</option>
-          </select>
-          <label for="floatingSelectLargeDark">Works with selects</label>
-        </div>
-      </div>
-    </div>
-
-    <script src="../../../dist/js/bootstrap.bundle.js"></script>
-  </body>
-</html>
@@ -15,7 +15,7 @@
    <repository type="git" url="https://github.com/twbs/bootstrap.git" branch="main" />
    <icon>bootstrap.png</icon>
    <license type="expression">MIT</license>
-    <copyright>Copyright 2011-2025</copyright>
+    <copyright>Copyright 2011-2024</copyright>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <tags>css mobile-first responsive front-end framework web</tags>
    <contentFiles>
@@ -15,7 +15,7 @@
    <repository type="git" url="https://github.com/twbs/bootstrap.git" branch="main" />
    <icon>bootstrap.png</icon>
    <license type="expression">MIT</license>
-    <copyright>Copyright 2011-2025</copyright>
+    <copyright>Copyright 2011-2024</copyright>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <tags>css sass mobile-first responsive front-end framework web</tags>
    <contentFiles>
@@ -72,6 +72,9 @@
    "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",
@@ -82,7 +85,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 eslint,eslint-config-xo,karma-browserstack-launcher,karma-rollup-preprocessor,sass",
+    "update-deps": "ncu -u -x globby,jasmine,karma-rollup-preprocessor && echo Manually update site/assets/js/vendor",
    "release": "npm-run-all dist release-sri docs-build release-zip*",
    "release-sri": "node build/generate-sri.mjs",
    "release-version": "node build/change-version.mjs",
@@ -97,42 +100,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\""
+    "watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\"",
+    "sleep": "sleep 5"
  },
  "peerDependencies": {
    "@popperjs/core": "^2.11.8"
  },
  "devDependencies": {
-    "@babel/cli": "^7.26.4",
-    "@babel/core": "^7.26.0",
-    "@babel/preset-env": "^7.26.0",
-    "@docsearch/js": "^3.8.3",
+    "@babel/cli": "^7.23.9",
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@lambdatest/node-tunnel": "^4.0.7",
    "@popperjs/core": "^2.11.8",
    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.2",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "@rollup/plugin-replace": "^6.0.2",
-    "@stackblitz/sdk": "^1.11.0",
-    "autoprefixer": "^10.4.20",
-    "bundlewatch": "^0.4.0",
+    "@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",
    "clean-css-cli": "^5.6.3",
-    "clipboard": "^2.0.11",
    "cross-env": "^7.0.3",
-    "eslint": "^8.57.1",
-    "eslint-config-xo": "^0.45.0",
-    "eslint-plugin-html": "^8.1.2",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-markdown": "^5.1.0",
-    "eslint-plugin-unicorn": "^55.0.0",
-    "find-unused-sass-variables": "^6.0.0",
-    "globby": "^14.0.2",
+    "eslint": "^8.57.0",
+    "eslint-config-xo": "^0.44.0",
+    "eslint-plugin-html": "^8.0.0",
+    "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",
    "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.139.0",
+    "hugo-bin": "^0.120.7",
    "ip": "^2.0.1",
-    "jasmine": "^5.5.0",
+    "jasmine": "^5.1.0",
    "jquery": "^3.7.1",
-    "karma": "^6.4.4",
-    "karma-browserstack-launcher": "1.4.0",
+    "karma": "^6.4.3",
+    "karma-browserstack-launcher": "^1.6.0",
    "karma-chrome-launcher": "^3.2.0",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-detect-browsers": "^2.3.3",
@@ -140,21 +142,22 @@
    "karma-jasmine": "^5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "karma-rollup-preprocessor": "7.0.7",
-    "lockfile-lint": "^4.14.0",
-    "nodemon": "^3.1.9",
-    "npm-run-all2": "^7.0.2",
-    "postcss": "^8.5.1",
+    "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-cli": "^11.0.0",
-    "rollup": "^4.31.0",
+    "rollup": "^4.12.0",
    "rollup-plugin-istanbul": "^5.0.0",
-    "rtlcss": "^4.3.0",
-    "sass": "1.78.0",
-    "sass-true": "^8.1.0",
+    "rtlcss": "^4.1.1",
+    "sass": "^1.71.1",
+    "sass-true": "^8.0.0",
    "shelljs": "^0.8.5",
-    "stylelint": "^16.13.2",
-    "stylelint-config-twbs-bootstrap": "^15.1.0",
-    "terser": "^5.37.0",
-    "vnu-jar": "24.10.17"
+    "stylelint": "^16.2.1",
+    "stylelint-config-twbs-bootstrap": "^14.0.0",
+    "terser": "^5.27.2",
+    "vnu-jar": "23.4.11"
  },
  "files": [
    "dist/{css,js}/*.{css,js,map}",
@@ -39,7 +39,7 @@
  // Prevent double borders when buttons are next to each other
  > :not(.btn-check:first-child) + .btn,
  > .btn-group:not(:first-child) {
-    margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
  }

  // Reset rounded corners
@@ -126,7 +126,7 @@

  > .btn:not(:first-child),
  > .btn-group:not(:first-child) {
-    margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
+    margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
  }

  // Reset rounded corners
@@ -135,12 +135,7 @@
    @include border-bottom-radius(0);
  }

-  // The top radius should be 0 if the button is:
-  // - the "third or more" child
-  // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
-  // - part of a btn-group which isn't the first child
-  > .btn:nth-child(n + 3),
-  > :not(.btn-check) + .btn,
+  > .btn ~ .btn,
  > .btn-group:not(:first-child) > .btn {
    @include border-top-radius(0);
  }
@@ -193,7 +193,8 @@
    // The child selector allows nested `.card` within `.card-group`
    // to display properly.
    > .card {
-      flex: 1 0 0;
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      flex: 1 0 0%;
      margin-bottom: 0;

      + .card {
@@ -99,7 +99,6 @@
  color: $carousel-control-color;
  text-align: center;
  background: none;
-  filter: var(--#{$prefix}carousel-control-icon-filter);
  border: 0;
  opacity: $carousel-control-opacity;
  @include transition($carousel-control-transition);
@@ -169,7 +168,7 @@
    margin-left: $carousel-indicator-spacer;
    text-indent: -999px;
    cursor: pointer;
-    background-color: var(--#{$prefix}carousel-indicator-active-bg);
+    background-color: $carousel-indicator-active-bg;
    background-clip: padding-box;
    border: 0;
    // Use transparent borders to increase the hit area by 10px on top and bottom.
@@ -196,31 +195,42 @@
  left: (100% - $carousel-caption-width) * .5;
  padding-top: $carousel-caption-padding-y;
  padding-bottom: $carousel-caption-padding-y;
-  color: var(--#{$prefix}carousel-caption-color);
+  color: $carousel-caption-color;
  text-align: center;
 }

 // Dark mode carousel

@mixin carousel-dark() {
-  --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
-  --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark};
-  --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    filter: $carousel-dark-control-icon-filter;
+  }
+
+  .carousel-indicators [data-bs-target] {
+    background-color: $carousel-dark-indicator-active-bg;
+  }
+
+  .carousel-caption {
+    color: $carousel-dark-caption-color;
+  }
 }

 .carousel-dark {
  @include carousel-dark();
 }

-:root,
-[data-bs-theme="light"] {
-  --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
-  --#{$prefix}carousel-caption-color: #{$carousel-caption-color};
-  --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
-}
-
@if $enable-dark-mode {
-  @include color-mode(dark, true) {
-    @include carousel-dark();
+  @include color-mode(dark) {
+    @if $color-mode-type == "media-query" {
+      .carousel {
+        @include carousel-dark();
+      }
+    } @else {
+      .carousel,
+      &.carousel {
+        @include carousel-dark();
+      }
+    }
  }
 }
@@ -12,6 +12,7 @@
  --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
  --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
  --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
+  --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
  // scss-docs-end close-css-vars

  box-sizing: content-box;
@@ -20,7 +21,6 @@
  padding: $btn-close-padding-y $btn-close-padding-x;
  color: var(--#{$prefix}btn-close-color);
  background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
-  filter: var(--#{$prefix}btn-close-filter);
  border: 0; // for button elements
  @include border-radius();
  opacity: var(--#{$prefix}btn-close-opacity);
@@ -47,20 +47,17 @@
 }

@mixin btn-close-white() {
-  --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
+  filter: var(--#{$prefix}btn-close-white-filter);
 }

 .btn-close-white {
  @include btn-close-white();
 }

-:root,
-[data-bs-theme="light"] {
-  --#{$prefix}btn-close-filter: #{$btn-close-filter};
-}
-
@if $enable-dark-mode {
-  @include color-mode(dark, true) {
-    @include btn-close-white();
+  @include color-mode(dark) {
+    .btn-close {
+      @include btn-close-white();
+    }
  }
 }
@@ -177,7 +177,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
 }

-// Return WCAG2.2 relative luminance
+// Return WCAG2.1 relative luminance
 // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
@function luminance($color) {
@@ -59,8 +59,8 @@

  // When fading in the modal, animate it to slide down
  .modal.fade & {
-    transform: $modal-fade-transform;
    @include transition($modal-transition);
+    transform: $modal-fade-transform;
  }
  .modal.show & {
    transform: $modal-show-transform;
@@ -169,8 +169,8 @@
 .nav-justified {
  > .nav-link,
  .nav-item {
-    flex-grow: 1;
    flex-basis: 0;
+    flex-grow: 1;
    text-align: center;
  }
 }
@@ -139,8 +139,8 @@
 // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
 // on the `.navbar` parent.
 .navbar-collapse {
-  flex-grow: 1;
  flex-basis: 100%;
+  flex-grow: 1;
  // For always expanded or extra full navbars, ensure content aligns itself
  // properly vertically. Can be easily overridden with flex utilities.
  align-items: center;
@@ -75,7 +75,7 @@
    margin-left: $pagination-margin-start;
  }

-  @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
+  @if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
    &:first-child {
      .page-link {
        @include border-start-radius(var(--#{$prefix}pagination-border-radius));
@@ -499,9 +499,9 @@ legend {
  width: 100%;
  padding: 0;
  margin-bottom: $legend-margin-bottom;
+  @include font-size($legend-font-size);
  font-weight: $legend-font-weight;
  line-height: inherit;
-  @include font-size($legend-font-size);

  + * {
    clear: left; // 2
@@ -34,11 +34,11 @@
 // Type display classes
@each $display, $font-size in $display-font-sizes {
  .display-#{$display} {
+    @include font-size($font-size);
    font-family: $display-font-family;
    font-style: $display-font-style;
    font-weight: $display-font-weight;
    line-height: $display-line-height;
-    @include font-size($font-size);
  }
 }

@@ -82,21 +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-.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;
+$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;
 // scss-docs-end sass-dark-mode-vars
-
-
-//
-// Carousel
-//
-
-$carousel-indicator-active-bg-dark:   $carousel-dark-indicator-active-bg !default;
-$carousel-caption-color-dark:         $carousel-dark-caption-color !default;
-$carousel-control-icon-filter-dark:   $carousel-dark-control-icon-filter !default;
-
-//
-// Close button
-//
-
-$btn-close-filter-dark:             $btn-close-white-filter !default;
@@ -67,8 +67,8 @@ $colors: (
 ) !default;
 // scss-docs-end colors-map

-// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.2 are 3, 4.5 and 7.
-// See https://www.w3.org/TR/WCAG/#contrast-minimum
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
 $min-contrast-ratio:   4.5 !default;

 // Customize the light and dark text colors for use in our color contrast function.
@@ -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.1'/></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.1z'/></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
@@ -1302,7 +1302,7 @@ $pagination-color:                  var(--#{$prefix}link-color) !default;
 $pagination-bg:                     var(--#{$prefix}body-bg) !default;
 $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
 $pagination-border-width:           var(--#{$prefix}border-width) !default;
-$pagination-margin-start:           calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$pagination-margin-start:           calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
 $pagination-border-color:           var(--#{$prefix}border-color) !default;

 $pagination-focus-color:            var(--#{$prefix}link-hover-color) !default;
@@ -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 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;
+$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;
 // scss-docs-end accordion-variables

 // Tooltips
@@ -1652,7 +1652,6 @@ $carousel-control-width:             15% !default;
 $carousel-control-opacity:           .5 !default;
 $carousel-control-hover-opacity:     .9 !default;
 $carousel-control-transition:        opacity .15s ease !default;
-$carousel-control-icon-filter:       null !default;

 $carousel-indicator-width:           30px !default;
 $carousel-indicator-height:          3px !default;
@@ -1670,17 +1669,17 @@ $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 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-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-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`)
 // scss-docs-end carousel-variables

 // scss-docs-start carousel-dark-variables
-$carousel-dark-indicator-active-bg:  $black !default; // Deprecated in v5.3.4
-$carousel-dark-caption-color:        $black !default; // Deprecated in v5.3.4
-$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default; // Deprecated in v5.3.4
+$carousel-dark-indicator-active-bg:  $black !default;
+$carousel-dark-caption-color:        $black !default;
+$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;
 // scss-docs-end carousel-dark-variables


@@ -1707,14 +1706,13 @@ $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.414'/></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.414z'/></svg>") !default;
 $btn-close-focus-shadow:     $focus-ring-box-shadow !default;
 $btn-close-opacity:          .5 !default;
 $btn-close-hover-opacity:    .75 !default;
 $btn-close-focus-opacity:    1 !default;
 $btn-close-disabled-opacity: .25 !default;
-$btn-close-filter:           null !default;
-$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
+$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;
 // scss-docs-end close-variables


@@ -14,11 +14,9 @@
    top: 0;
    left: 0;
    z-index: 2;
-    max-width: 100%;
    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;
@@ -51,7 +49,6 @@
  > .form-select {
    padding-top: $form-floating-input-padding-t;
    padding-bottom: $form-floating-input-padding-b;
-    padding-left: $form-floating-padding-x;
  }

  > .form-control:focus,
@@ -59,30 +56,27 @@
  > .form-control-plaintext,
  > .form-select {
    ~ label {
+      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
      transform: $form-floating-label-transform;
+
+      &::after {
+        position: absolute;
+        inset: $form-floating-padding-y ($form-floating-padding-x * .5);
+        z-index: -1;
+        height: $form-floating-label-height;
+        content: "";
+        background-color: $input-bg;
+        @include border-radius($input-border-radius);
+      }
    }
  }
  // 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;
    }
  }
-  > textarea:focus,
-  > textarea:not(:placeholder-shown) {
-    ~ label::after {
-      position: absolute;
-      inset: $form-floating-padding-y ($form-floating-padding-x * .5);
-      z-index: -1;
-      height: $form-floating-label-height;
-      content: "";
-      background-color: $input-bg;
-      @include border-radius($input-border-radius);
-    }
-  }
-  > textarea:disabled ~ label::after {
-    background-color: $input-disabled-bg;
-  }

  > .form-control-plaintext {
    ~ label {
@@ -93,5 +87,9 @@
  > :disabled ~ label,
  > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
    color: $form-floating-label-disabled-color;
+
+    &::after {
+      background-color: $input-disabled-bg;
+    }
  }
 }
@@ -121,7 +121,7 @@
  }

  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
    @include border-start-radius(0);
  }

@@ -1,7 +1,7 @@
@mixin bsBanner($file) {
  /*!
   * Bootstrap #{$file} v5.3.3 (https://getbootstrap.com/)
-   * Copyright 2011-2025 The Bootstrap Authors
+   * Copyright 2011-2024 The Bootstrap Authors
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
 }
@@ -72,7 +72,7 @@
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
      .col#{$infix} {
-        flex: 1 0 0;
+        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
      }

      .row-cols#{$infix}-auto > * {
@@ -24,7 +24,7 @@
 // Use to only display content when it's focused, or one of its child elements is focused
 // (i.e. when focus is within the element/container that the class was applied to)
 //
-// Useful for "Skip to main content" links; see https://www.w3.org/WAI/WCAG22/Techniques/general/G1.html
+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1

@mixin visually-hidden-focusable() {
  &:not(:focus):not(:focus-within) {
@@ -4,17 +4,27 @@

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

-/* 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 */
+(() => {
+  'use strict'

-sidebarScroll()
-codeExamples()
-snippets()
+  // 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)
+    }
+  }
+})()
@@ -2,18 +2,18 @@
 // IT'S ALL JUST JUNK FOR OUR DOCS!
 // ++++++++++++++++++++++++++++++++++++++++++

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

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

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

-export default () => {
  // Insert copy to clipboard button before .highlight
  const btnTitle = 'Copy to clipboard'
  const btnEdit = 'Edit on StackBlitz'
@@ -63,11 +63,6 @@ export default () => {
    const namespace = 'http://www.w3.org/1999/xlink'
    const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
    const originalTitle = event.trigger.title
-    const isCheckIconVisible = originalXhref === '#check2'
-
-    if (isCheckIconVisible) {
-      return
-    }

    tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
    event.trigger.addEventListener('hidden.bs.tooltip', () => {
@@ -92,4 +87,4 @@ export default () => {
      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
    }, { once: true })
  })
-}
+})()
@@ -1,30 +0,0 @@
-// 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-2025 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)
-  }
-}
@@ -1,168 +0,0 @@
-// 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-2025 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,31 +2,21 @@
 // IT'S ALL JUST JUNK FOR OUR DOCS!
 // ++++++++++++++++++++++++++++++++++++++++++

-/*!
- * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2024-2025 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';
-
 (() => {
+  'use strict'
+
  const searchElement = document.getElementById('docsearch')

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

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

-  docsearch({
-    apiKey,
-    indexName,
-    appId,
+  window.docsearch({
+    apiKey: '3151f502c7b9e9dafd5e6372b691a24e',
+    indexName: 'bootstrap',
+    appId: 'AK7KMZKZHQ',
    container: searchElement,
    searchParameters: {
      facetFilters: [`version:${siteDocsVersion}`]
@@ -1,15 +1,170 @@
-/*
+// 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-2025 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
 * For details, see https://creativecommons.org/licenses/by/3.0/.
 */

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

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

-snippets()
+  // --------
+  // 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)
+    })
+  }
+})()
@@ -1,66 +0,0 @@
-// 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-2025 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' })
-}
@@ -93,13 +93,13 @@
  .fixed-top,
  .sticky-top {
    position: static;
-    margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list
+    margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list
  }

  .fixed-bottom,
  .sticky-bottom {
    position: static;
-    margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)); // stylelint-disable-line function-disallowed-list
+    margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list

  }

@@ -73,8 +73,9 @@
    }

    // Prevent breaking of code
+    // stylelint-disable-next-line selector-max-compound-selectors
    th,
-    td:first-child > code { // stylelint-disable-line selector-max-compound-selectors
+    td:first-child > code {
      white-space: nowrap;
    }
  }
@@ -86,7 +86,7 @@
  padding: 1rem;
  color: rgba(var(--bg-rgb), 1);
  background-color: rgba(var(--bg-rgb), .1);
-  background-blend-mode: multiply;
+  background-blend-mode: multiple;
  @include border-radius(1rem);
  mix-blend-mode: darken;

@@ -3,10 +3,6 @@
  background-color: transparent;
  box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);

-  @media (forced-colors) {
-    background-color: Canvas;
-  }
-
  &::after {
    position: absolute;
    inset: 0;
@@ -47,7 +47,6 @@
  --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.

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

 <div class="text-center py-5">
@@ -1,6 +1,5 @@
 ---
 layout: redirect
-sitemap:
-  disable: true
+sitemap_exclude: true
 redirect: "/docs/5.3/getting-started/introduction/"
 ---
@@ -1,6 +1,6 @@
 ---
 layout: docs
-title: About Bootstrap
+title: About
 description: Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.
 group: about
 aliases:
@@ -10,7 +10,7 @@ Community members have translated Bootstrap's documentation into various languag
 {{< translations.inline >}}
 <ul>
 {{ range .Site.Data.translations -}}
-  <li><a href="{{ .url }}" hreflang="{{ .code }}" lang="{{ .code }}">{{ .description }} ({{ .name }})</a></li>
+  <li><a href="{{ .url }}" hreflang="{{ .code }}">{{ .description }} ({{ .name }})</a></li>
 {{ end -}}
 </ul>
 {{< /translations.inline >}}
@@ -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/partials/snippets.js" >}}
+{{< js-docs name="live-alert" file="site/assets/js/snippets.js" >}}

 ### Link color

@@ -72,7 +72,7 @@ Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) an

 {{< example >}}
 <div class="alert alert-primary d-flex align-items-center" role="alert">
-  <svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
+  <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
@@ -195,6 +195,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli

 {{< example >}}
 <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
+  <button type="button" class="btn btn-primary">Button</button>
+  <button type="button" class="btn btn-primary">Button</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
@@ -204,8 +206,6 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
-  <button type="button" class="btn btn-primary">Button</button>
-  <button type="button" class="btn btn-primary">Button</button>
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
@@ -165,7 +165,7 @@ You can make your carousels autoplay on page load by setting the `ride` option t
 {{< callout info >}}
 For accessibility reasons, we recommend avoiding the use of autoplaying carousels. If your page does include an autoplaying carousel, we recommend providing an additional button or control to explicitly pause/stop the carousel.

-See [WCAG 2.2 Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/TR/WCAG/#pause-stop-hide).
+See [WCAG 2.1 Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/TR/WCAG21/#pause-stop-hide).
 {{< /callout >}}

 {{< example >}}
@@ -8,7 +8,7 @@ toc: true

 ## Overview

-Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/blog/bootstrap-explained-dropdowns/).
+Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/).

 Dropdowns are built on a third party library, [Popper](https://popper.js.org/docs/v2/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required.

@@ -126,7 +126,7 @@ The best part is you can do this with any button variant, too:
 <!-- Example single danger button -->
 <div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-    Danger
+    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
@@ -228,7 +228,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
 ```html
 <!-- Example split danger button -->
 <div class="btn-group">
-  <button type="button" class="btn btn-danger">Danger</button>
+  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
@@ -201,7 +201,7 @@ When modals become too long for the user's viewport or device, they scroll indep
        <h1 class="modal-title fs-5" id="exampleModalLongTitle">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
-      <div class="modal-body" style="min-height: 100vh">
+      <div class="modal-body" style="min-height: 1500px">
        <p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
      </div>
      <div class="modal-footer">
@@ -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/partials/snippets.js" >}}
+{{< js-docs name="varying-modal-content" file="site/assets/js/snippets.js" >}}

 ### Toggle between modals

@@ -428,7 +428,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
  <!-- Navbar content -->
 </nav>

-<nav class="navbar" style="background-color: #e3f2fd;" data-bs-theme="light">
+<nav class="navbar" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
 </nav>
 ```
@@ -192,15 +192,15 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
 | `delay` | number, object | `0` | Delay showing and hiding the popover (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
 | `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
 | `html` | boolean | `false` | Allow HTML in the popover. If true, HTML tags in the popover's `title` will be rendered in the popover. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
-| `offset` | number, string, function | `[0, 8]` | Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
-| `placement` | string, function | `'right'` | How to position the popover: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the popover. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the popover instance. |
+| `offset` | number, string, function | `[0, 0]` | Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
+| `placement` | string, function | `'top'` | How to position the popover: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the popover. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the popover instance. |
 | `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
 | `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
 | `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
 | `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
-| `template` | string | `'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-header`. The popover's `content` will be injected into the `.popover-body`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="tooltip"`. |
+| `template` | string | `'<div class="popover" role="tooltip"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="tooltip"`. |
 | `title` | string, element, function | `''` | The popover title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
-| `trigger` | string | `'click'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
+| `trigger` | string | `'hover focus'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
 {{< /bs-table >}}

 {{< callout info >}}
@@ -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/partials/snippets.js" >}}
+{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}}

 ### Translucent

@@ -111,8 +111,8 @@ And with custom HTML added:
 With an SVG:

 <div class="bd-example tooltip-demo">
-  <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Hover or focus to see default tooltip">
-    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true">
+  <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip">
+    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
      <rect width="100%" height="100%" fill="#563d7c"/>
      <circle cx="50" cy="50" r="30" fill="#007bff"/>
    </svg>
@@ -205,7 +205,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
 | `delay` | number, object | `0` | Delay showing and hiding the tooltip (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
 | `fallbackPlacements` | array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
 | `html` | boolean | `false` | Allow HTML in the tooltip. If true, HTML tags in the tooltip's `title` will be rendered in the tooltip. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
-| `offset` | array, string, function | `[0, 6]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
+| `offset` | array, string, function | `[0, 0]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
 | `placement` | string, function | `'top'` | How to position the tooltip: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the tooltip instance. |
 | `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
 | `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
@@ -20,7 +20,6 @@ You can find and customize these variables for key global options in Bootstrap's
 | `$enable-transitions`          | `true` (default) or `false`        | Enables predefined `transition`s on various components. |
 | `$enable-reduced-motion`       | `true` (default) or `false`        | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
 | `$enable-grid-classes`         | `true` (default) or `false`        | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). |
-| `$enable-cssgrid`              | `true` or `false` (default)        | Enables the experimental CSS Grid system (e.g. `.grid`, `.g-col-md-1`, etc.). |
 | `$enable-container-classes`    | `true` (default) or `false`        | Enables the generation of CSS classes for layout containers. (New in v5.2.0) |
 | `$enable-caret`                | `true` (default) or `false`        | Enables pseudo element caret on `.dropdown-toggle`. |
 | `$enable-button-pointers`      | `true` (default) or `false`        | Add "hand" cursor to non-disabled button elements. |
@@ -5,8 +5,7 @@ description: Examples of Bootstrap's documentation-specific components and style
 aliases: "/docsref/"
 toc: true
 robots: noindex,follow
-sitemap:
-  disable: true
+sitemap_exclude: true
 ---

 ## Buttons
@@ -47,4 +46,4 @@ sitemap:

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

-{{< js-docs name="live-toast" file="site/assets/js/partials/snippets.js" >}}
+{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}}
@@ -4,3 +4,63 @@ 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 >}}
@@ -82,16 +82,16 @@ body_class: ""

 <div class="d-flex gap-2 justify-content-center py-5">
  <span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill">
-    <span class="px-1">Primary 1</span>
-    <a href="#" aria-label="Delete primary 1"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <span class="px-1">Primary</span>
+    <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
  </span>
  <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill">
-    <span class="px-1">Primary 2</span>
-    <a href="#" aria-label="Delete primary 2"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <span class="px-1">Primary</span>
+    <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
  </span>
  <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
-    <span class="px-1">Primary 3</span>
-    <a href="#" aria-label="Delete primary 3"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <span class="px-1">Primary</span>
+    <a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
  </span>
 </div>

@@ -102,48 +102,48 @@ body_class: ""
    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
    Primary
    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete primary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
  </span>
  <span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
    Secondary
    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete secondary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
  </span>
  <span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
    Success
    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete success"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
  </span>
  <span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
    Danger
    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete danger"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
  </span>
  <span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
    Warning
    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete warning"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
  </span>
  <span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
    Info
    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete info"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
  </span>
  <span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
    Light
    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete light"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
  </span>
  <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
    Dark
    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete dark"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
+    <a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a>
  </span>
 </div>
@@ -75,7 +75,7 @@ extra_css:
          <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
          <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
            أكمل القراءة
-            <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
          </a>
        </div>
        <div class="col-auto d-none d-lg-block">
@@ -92,7 +92,7 @@ extra_css:
          <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
          <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
            أكمل القراءة
-            <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
          </a>
        </div>
        <div class="col-auto d-none d-lg-block">
@@ -74,7 +74,7 @@ extra_css:
          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
            Continue reading
-            <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
          </a>
        </div>
        <div class="col-auto d-none d-lg-block">
@@ -91,7 +91,7 @@ extra_css:
          <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
            Continue reading
-            <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
          </a>
        </div>
        <div class="col-auto d-none d-lg-block">
@@ -29,7 +29,7 @@ body_class: ""
    <ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
      <li class="breadcrumb-item">
        <a class="link-body-emphasis" href="#">
-          <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
+          <svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
          <span class="visually-hidden">Home</span>
        </a>
      </li>
@@ -50,7 +50,7 @@ body_class: ""
    <ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
      <li class="breadcrumb-item">
        <a class="link-body-emphasis" href="#">
-          <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
+          <svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
          <span class="visually-hidden">Home</span>
        </a>
      </li>
@@ -71,7 +71,7 @@ body_class: ""
    <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
      <li class="breadcrumb-item">
        <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">
-          <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
+          <svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg>
          Home
        </a>
      </li>
@@ -40,11 +40,11 @@ body_class: ""
 <div class="d-flex gap-2 justify-content-center py-5">
  <button class="btn btn-primary d-inline-flex align-items-center" type="button">
    Primary icon
-    <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+    <svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg>
  </button>
  <button class="btn btn-outline-secondary d-inline-flex align-items-center" type="button">
    Secondary icon
-    <svg class="bi ms-1" width="20" height="20" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+    <svg class="bi ms-1" width="20" height="20"><use xlink:href="#arrow-right-short"/></svg>
  </button>
 </div>

@@ -65,22 +65,22 @@ body_class: ""

 <div class="d-flex gap-2 justify-content-center pt-5 pb-4">
  <button class="btn btn-primary rounded-circle p-2 lh-1" type="button">
-    <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
+    <svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg>
    <span class="visually-hidden">Dismiss</span>
  </button>
  <button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button">
-    <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
+    <svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg>
    <span class="visually-hidden">Dismiss</span>
  </button>
 </div>

 <div class="d-flex gap-2 justify-content-center pb-5">
  <button class="btn btn-primary rounded-circle p-3 lh-1" type="button">
-    <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
+    <svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg>
    <span class="visually-hidden">Dismiss</span>
  </button>
  <button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button">
-    <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
+    <svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg>
    <span class="visually-hidden">Dismiss</span>
  </button>
 </div>
@@ -5,7 +5,6 @@ extra_css:
  - "../cheatsheet/cheatsheet.rtl.css"
 extra_js:
  - src: "../cheatsheet/cheatsheet.js"
-    defer: true
 body_class: "bg-body-tertiary"
 direction: rtl
 ---
@@ -71,7 +70,7 @@ direction: rtl
    </ul>
  </nav>
 </aside>
-<main class="bd-cheatsheet container-fluid bg-body">
+<div class="bd-cheatsheet container-fluid bg-body">
  <section id="content">
    <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">المحتوى</h2>

@@ -921,7 +920,7 @@ direction: rtl

      <div>
        {{< example show_markup="false" >}}
-        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
+        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
          <div class="dropdown">
            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
              زر القائمة المنسدلة
@@ -1034,7 +1033,7 @@ direction: rtl
        {{< /example >}}

        {{< example show_markup="false" >}}
-        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
+        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
          <div class="dropend">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
              زر القائمة المنسدلة لليسار
@@ -1538,7 +1537,7 @@ direction: rtl
      </div>
    </article>
  </section>
-</main>
+</div>

 <div class="modal fade" id="exampleModalDefault" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
@@ -5,7 +5,6 @@ extra_css:
  - "cheatsheet.css"
 extra_js:
  - src: "cheatsheet.js"
-    defer: true
 body_class: "bg-body-tertiary"
 ---

@@ -70,7 +69,7 @@ body_class: "bg-body-tertiary"
    </ul>
  </nav>
 </aside>
-<main class="bd-cheatsheet container-fluid bg-body">
+<div class="bd-cheatsheet container-fluid bg-body">
  <section id="content">
    <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Contents</h2>

@@ -920,7 +919,7 @@ body_class: "bg-body-tertiary"

      <div>
        {{< example show_markup="false" >}}
-        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
+        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
          <div class="dropdown">
            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown button
@@ -1033,7 +1032,7 @@ body_class: "bg-body-tertiary"
        {{< /example >}}

        {{< example show_markup="false" >}}
-        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
+        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
          <div class="dropend">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropend button
@@ -1534,7 +1533,7 @@ body_class: "bg-body-tertiary"
      </div>
    </article>
  </section>
-</main>
+</div>

 <div class="modal fade" id="exampleModalDefault" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
@@ -6,7 +6,6 @@ extra_css:
  - "../checkout/checkout.css"
 extra_js:
  - src: "../checkout/checkout.js"
-    defer: true
 body_class: "bg-body-tertiary"
 ---

@@ -14,7 +13,7 @@ body_class: "bg-body-tertiary"
  <main>
    <div class="py-5 text-center">
      <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
-      <h1 class="h2">نموذج إتمام الشراء</h1>
+      <h2>نموذج إتمام الشراء</h2>
      <p class="lead">فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.</p>
    </div>

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

@@ -13,7 +12,7 @@ body_class: "bg-body-tertiary"
  <main>
    <div class="py-5 text-center">
      <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
-      <h1 class="h2">Checkout form</h1>
+      <h2>Checkout form</h2>
      <p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
    </div>

@@ -7,9 +7,7 @@ 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">
@@ -68,12 +66,12 @@ extra_js:
  <ul class="navbar-nav flex-row d-md-none">
    <li class="nav-item text-nowrap">
      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="تبديل البحث">
-        <svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
+        <svg class="bi"><use xlink:href="#search"/></svg>
      </button>
    </li>
    <li class="nav-item text-nowrap">
      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
-        <svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
+        <svg class="bi"><use xlink:href="#list"/></svg>
      </button>
    </li>
  </ul>
@@ -95,37 +93,37 @@ extra_js:
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
+                <svg class="bi"><use xlink:href="#house-fill"/></svg>
                لوحة القيادة
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
+                <svg class="bi"><use xlink:href="#file-earmark"/></svg>
                الطلبات
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
+                <svg class="bi"><use xlink:href="#cart"/></svg>
                المنتجات
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
+                <svg class="bi"><use xlink:href="#people"/></svg>
                الزبائن
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
+                <svg class="bi"><use xlink:href="#graph-up"/></svg>
                التقارير
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
+                <svg class="bi"><use xlink:href="#puzzle"/></svg>
                التكاملات
              </a>
            </li>
@@ -134,31 +132,31 @@ extra_js:
          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
            <span>التقارير المحفوظة</span>
            <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
-              <svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
+              <svg class="bi"><use xlink:href="#plus-circle"/></svg>
            </a>
          </h6>
          <ul class="nav flex-column mb-auto">
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
                الشهر الحالي
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
                الربع الأخير
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
                التفاعل الإجتماعي
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
                مبيعات نهاية العام
              </a>
            </li>
@@ -169,13 +167,13 @@ extra_js:
          <ul class="nav flex-column mb-auto">
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
+                <svg class="bi"><use xlink:href="#gear-wide-connected"/></svg>
                إعدادات
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
+                <svg class="bi"><use xlink:href="#door-closed"/></svg>
                خروج
              </a>
            </li>
@@ -193,7 +191,7 @@ extra_js:
            <button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
          </div>
          <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
-            <svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
+            <svg class="bi"><use xlink:href="#calendar3"/></svg>
            هذا الأسبوع
          </button>
        </div>
@@ -6,9 +6,7 @@ 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">
@@ -67,12 +65,12 @@ extra_js:
  <ul class="navbar-nav flex-row d-md-none">
    <li class="nav-item text-nowrap">
      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search">
-        <svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
+        <svg class="bi"><use xlink:href="#search"/></svg>
      </button>
    </li>
    <li class="nav-item text-nowrap">
      <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
-        <svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
+        <svg class="bi"><use xlink:href="#list"/></svg>
      </button>
    </li>
  </ul>
@@ -94,37 +92,37 @@ extra_js:
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
+                <svg class="bi"><use xlink:href="#house-fill"/></svg>
                Dashboard
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
+                <svg class="bi"><use xlink:href="#file-earmark"/></svg>
                Orders
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
+                <svg class="bi"><use xlink:href="#cart"/></svg>
                Products
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
+                <svg class="bi"><use xlink:href="#people"/></svg>
                Customers
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
+                <svg class="bi"><use xlink:href="#graph-up"/></svg>
                Reports
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
+                <svg class="bi"><use xlink:href="#puzzle"/></svg>
                Integrations
              </a>
            </li>
@@ -133,31 +131,31 @@ extra_js:
          <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
            <span>Saved reports</span>
            <a class="link-secondary" href="#" aria-label="Add a new report">
-              <svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
+              <svg class="bi"><use xlink:href="#plus-circle"/></svg>
            </a>
          </h6>
          <ul class="nav flex-column mb-auto">
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
                Current month
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
                Last quarter
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
                Social engagement
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
+                <svg class="bi"><use xlink:href="#file-earmark-text"/></svg>
                Year-end sale
              </a>
            </li>
@@ -168,13 +166,13 @@ extra_js:
          <ul class="nav flex-column mb-auto">
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
+                <svg class="bi"><use xlink:href="#gear-wide-connected"/></svg>
                Settings
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link d-flex align-items-center gap-2" href="#">
-                <svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
+                <svg class="bi"><use xlink:href="#door-closed"/></svg>
                Sign out
              </a>
            </li>
@@ -192,7 +190,7 @@ extra_js:
            <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
          </div>
          <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
-            <svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
+            <svg class="bi"><use xlink:href="#calendar3"/></svg>
            This week
          </button>
        </div>
@@ -124,38 +124,38 @@ body_class: ""
  <ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="light">
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
+        <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
        Documents
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
+        <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
        Photos
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
+        <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
        Movies
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
+        <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
        Music
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
+        <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
        Games
      </a>
    </li>
    <li><hr class="dropdown-divider"></li>
    <li>
      <a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
+        <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
        Trash
      </a>
    </li>
@@ -163,38 +163,38 @@ body_class: ""
  <ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark">
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
+        <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
        Documents
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
+        <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
        Photos
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
+        <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
        Movies
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
+        <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
        Music
      </a>
    </li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
+        <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
        Games
      </a>
    </li>
    <li><hr class="dropdown-divider"></li>
    <li>
      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
-        <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
+        <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
        Trash
      </a>
    </li>
@@ -208,8 +208,8 @@ body_class: ""
    <div class="d-grid gap-1">
      <div class="cal">
        <div class="cal-month">
-          <button class="btn cal-btn" type="button" aria-label="previous month">
-            <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
+          <button class="btn cal-btn" type="button">
+            <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
          </button>
          <strong class="cal-month-name">June</strong>
          <select class="form-select cal-month-name d-none">
@@ -226,8 +226,8 @@ body_class: ""
            <option value="November">November</option>
            <option value="December">December</option>
          </select>
-          <button class="btn cal-btn" type="button" aria-label="next month">
-            <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+          <button class="btn cal-btn" type="button">
+            <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
          </button>
        </div>
        <div class="cal-weekdays text-body-secondary">
@@ -287,8 +287,8 @@ body_class: ""
    <div class="d-grid gap-1">
      <div class="cal">
        <div class="cal-month">
-          <button class="btn cal-btn" type="button" aria-label="previous month">
-            <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
+          <button class="btn cal-btn" type="button">
+            <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
          </button>
          <strong class="cal-month-name">June</strong>
          <select class="form-select cal-month-name d-none">
@@ -305,8 +305,8 @@ body_class: ""
            <option value="November">November</option>
            <option value="December">December</option>
          </select>
-          <button class="btn cal-btn" type="button" aria-label="next month">
-            <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-short"/></svg>
+          <button class="btn cal-btn" type="button">
+            <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
          </button>
        </div>
        <div class="cal-weekdays text-body-secondary">
@@ -371,7 +371,7 @@ body_class: ""
      <ul class="list-unstyled d-flex flex-column gap-2">
        <li>
          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
-            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
+            <svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg>
            <div>
              <strong class="d-block">Main product</strong>
              <small>Take a tour through the product</small>
@@ -380,7 +380,7 @@ body_class: ""
        </li>
        <li>
          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
-            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
+            <svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg>
            <div>
              <strong class="d-block">Another product</strong>
              <small>Explore this other product we offer</small>
@@ -389,7 +389,7 @@ body_class: ""
        </li>
        <li>
          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
-            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
+            <svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg>
            <div>
              <strong class="d-block">Support</strong>
              <small>Get help from our support crew</small>
@@ -418,7 +418,7 @@ body_class: ""
      <ul class="list-unstyled d-flex flex-column gap-2">
        <li>
          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
-            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
+            <svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg>
            <div>
              <strong class="d-block">Main product</strong>
              <small>Take a tour through the product</small>
@@ -427,7 +427,7 @@ body_class: ""
        </li>
        <li>
          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
-            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
+            <svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg>
            <div>
              <strong class="d-block">Another product</strong>
              <small>Explore this other product we offer</small>
@@ -436,7 +436,7 @@ body_class: ""
        </li>
        <li>
          <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
-            <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
+            <svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg>
            <div>
              <strong class="d-block">Support</strong>
              <small>Get help from our support crew</small>
@@ -66,35 +66,35 @@ body_class: ""
    <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
      <div class="feature col">
        <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
-          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#collection"/></svg>
+          <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
        </div>
        <h3 class="fs-2 text-body-emphasis">Featured title</h3>
        <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
        <a href="#" class="icon-link">
          Call to action
-          <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+          <svg class="bi"><use xlink:href="#chevron-right"/></svg>
        </a>
      </div>
      <div class="feature col">
        <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
-          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
+          <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
        </div>
        <h3 class="fs-2 text-body-emphasis">Featured title</h3>
        <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
        <a href="#" class="icon-link">
          Call to action
-          <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+          <svg class="bi"><use xlink:href="#chevron-right"/></svg>
        </a>
      </div>
      <div class="feature col">
        <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
-          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
+          <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
        </div>
        <h3 class="fs-2 text-body-emphasis">Featured title</h3>
        <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
        <a href="#" class="icon-link">
          Call to action
-          <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
+          <svg class="bi"><use xlink:href="#chevron-right"/></svg>
        </a>
      </div>
    </div>
@@ -107,7 +107,7 @@ body_class: ""
    <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
      <div class="col d-flex align-items-start">
        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
-          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
+          <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
        </div>
        <div>
          <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@@ -119,7 +119,7 @@ body_class: ""
      </div>
      <div class="col d-flex align-items-start">
        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
-          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
+          <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
        </div>
        <div>
          <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@@ -131,7 +131,7 @@ body_class: ""
      </div>
      <div class="col d-flex align-items-start">
        <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
-          <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#tools"/></svg>
+          <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
        </div>
        <div>
          <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@@ -159,11 +159,11 @@ body_class: ""
                <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
              </li>
              <li class="d-flex align-items-center me-3">
-                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
+                <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
                <small>Earth</small>
              </li>
              <li class="d-flex align-items-center">
-                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
+                <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
                <small>3d</small>
              </li>
            </ul>
@@ -180,11 +180,11 @@ body_class: ""
                <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
              </li>
              <li class="d-flex align-items-center me-3">
-                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
+                <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
                <small>Pakistan</small>
              </li>
              <li class="d-flex align-items-center">
-                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
+                <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
                <small>4d</small>
              </li>
            </ul>
@@ -201,11 +201,11 @@ body_class: ""
                <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
              </li>
              <li class="d-flex align-items-center me-3">
-                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
+                <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
                <small>California</small>
              </li>
              <li class="d-flex align-items-center">
-                <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
+                <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
                <small>5d</small>
              </li>
            </ul>
@@ -222,56 +222,56 @@ body_class: ""

    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
      <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
        <div>
          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
          <p>Paragraph of text beneath the heading to explain the heading.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
        <div>
          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
          <p>Paragraph of text beneath the heading to explain the heading.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
        <div>
          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
          <p>Paragraph of text beneath the heading to explain the heading.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#home"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
        <div>
          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
          <p>Paragraph of text beneath the heading to explain the heading.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
        <div>
          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
          <p>Paragraph of text beneath the heading to explain the heading.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
        <div>
          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
          <p>Paragraph of text beneath the heading to explain the heading.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#geo-fill"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
        <div>
          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
          <p>Paragraph of text beneath the heading to explain the heading.</p>
        </div>
      </div>
      <div class="col d-flex align-items-start">
-        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#tools"/></svg>
+        <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
        <div>
          <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
          <p>Paragraph of text beneath the heading to explain the heading.</p>
@@ -296,7 +296,7 @@ body_class: ""
        <div class="row row-cols-1 row-cols-sm-2 g-4">
          <div class="col d-flex flex-column gap-2">
            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-              <svg class="bi" width="1em" height="1em" aria-hidden="true">
+              <svg class="bi" width="1em" height="1em">
                <use xlink:href="#collection" />
              </svg>
            </div>
@@ -306,7 +306,7 @@ body_class: ""

          <div class="col d-flex flex-column gap-2">
            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-              <svg class="bi" width="1em" height="1em" aria-hidden="true">
+              <svg class="bi" width="1em" height="1em">
                <use xlink:href="#gear-fill" />
              </svg>
            </div>
@@ -316,7 +316,7 @@ body_class: ""

          <div class="col d-flex flex-column gap-2">
            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-              <svg class="bi" width="1em" height="1em" aria-hidden="true">
+              <svg class="bi" width="1em" height="1em">
                <use xlink:href="#speedometer" />
              </svg>
            </div>
@@ -326,7 +326,7 @@ body_class: ""

          <div class="col d-flex flex-column gap-2">
            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-              <svg class="bi" width="1em" height="1em" aria-hidden="true">
+              <svg class="bi" width="1em" height="1em">
                <use xlink:href="#table" />
              </svg>
            </div>
@@ -24,8 +24,8 @@ body_class: ""
  <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
    <p class="col-md-4 mb-0 text-body-secondary">&copy; {{< year >}} Company, Inc</p>

-    <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
-      <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+    <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
+      <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
    </a>

    <ul class="nav col-md-4 justify-content-end">
@@ -43,16 +43,16 @@ body_class: ""
 <div class="container">
  <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
    <div class="col-md-4 d-flex align-items-center">
-      <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1" aria-label="Bootstrap">
-        <svg class="bi" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+      <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
+        <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
      </a>
      <span class="mb-3 mb-md-0 text-body-secondary">&copy; {{< year >}} Company, Inc</span>
    </div>

    <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
-      <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Twitter"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#twitter"/></svg></a></li>
-      <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#instagram"/></svg></a></li>
-      <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
+      <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
    </ul>
  </footer>
 </div>
@@ -77,8 +77,8 @@ body_class: ""
 <div class="container">
  <footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
    <div class="col mb-3">
-      <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none" aria-label="Bootstrap">
-        <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+      <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
+        <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
      </a>
      <p class="text-body-secondary">&copy; {{< year >}}</p>
    </div>
@@ -167,7 +167,7 @@ body_class: ""
          <p>Monthly digest of what's new and exciting from us.</p>
          <div class="d-flex flex-column flex-sm-row w-100 gap-2">
            <label for="newsletter1" class="visually-hidden">Email address</label>
-            <input id="newsletter1" type="email" class="form-control" placeholder="Email address">
+            <input id="newsletter1" type="text" class="form-control" placeholder="Email address">
            <button class="btn btn-primary" type="button">Subscribe</button>
          </div>
        </form>
@@ -177,9 +177,9 @@ body_class: ""
    <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
      <p>&copy; {{< year >}} Company, Inc. All rights reserved.</p>
      <ul class="list-unstyled d-flex">
-        <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Twitter"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#twitter"/></svg></a></li>
-        <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
-        <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#facebook"/></svg></a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
+        <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
      </ul>
    </div>
  </footer>
@@ -36,7 +36,7 @@ body_class: ""
  <div class="container">
    <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
-        <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+        <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
        <span class="fs-4">Simple header</span>
      </a>

@@ -159,8 +159,8 @@ body_class: ""
  <header class="py-3 mb-3 border-bottom">
    <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
      <div class="dropdown">
-        <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Bootstrap menu">
-          <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+        <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+          <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
        </a>
        <ul class="dropdown-menu text-small shadow">
          <li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>
@@ -225,7 +225,7 @@ body_class: ""
  <header class="py-3 mb-4 border-bottom">
    <div class="container d-flex flex-wrap justify-content-center">
      <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none">
-        <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
+        <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
        <span class="fs-4">Double header</span>
      </a>
      <form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search">
@@ -247,31 +247,31 @@ body_class: ""
          <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
            <li>
              <a href="#" class="nav-link text-secondary">
-                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#home"/></svg>
+                <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"/></svg>
                Home
              </a>
            </li>
            <li>
              <a href="#" class="nav-link text-white">
-                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
+                <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg>
                Dashboard
              </a>
            </li>
            <li>
              <a href="#" class="nav-link text-white">
-                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#table"/></svg>
+                <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg>
                Orders
              </a>
            </li>
            <li>
              <a href="#" class="nav-link text-white">
-                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#grid"/></svg>
+                <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg>
                Products
              </a>
            </li>
            <li>
              <a href="#" class="nav-link text-white">
-                <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
+                <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg>
                Customers
              </a>
            </li>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
XhmikosR	679759f0c3	Update karma.conf.js	2024-03-07 17:45:54 +02:00
XhmikosR	14b39390c2	BrowserStack: Google Pixel 3	2024-03-07 17:39:00 +02:00
Mukesh Rana	97b6cbcbfd	Fixes to increase stability (#38511 ) Co-authored-by: Akshat Rustagi <akshatr@lambdatest.com>	2024-03-07 17:39:00 +02:00
XhmikosR	9ed525eb83	@lambdatest/node-tunnel 4.0.7	2024-03-07 17:38:59 +02:00
XhmikosR	572c9756e5	Reduce actions timeout to 15 minutes	2024-03-07 17:38:59 +02:00
XhmikosR	f27a9c02d8	Updates	2024-03-07 17:38:59 +02:00
XhmikosR	b7c62d51f2	Partially revert "Remove BrowserStack"	2024-03-07 17:38:59 +02:00
XhmikosR	7f6b214a2a	Update lt-local.js	2024-03-07 17:38:59 +02:00
XhmikosR	45149e75dc	Remove BrowserStack	2024-03-07 17:38:59 +02:00
XhmikosR	625344c242	Testing	2024-03-07 17:38:59 +02:00
Mukesh Rana	f6d129182a	Fixes	2024-03-07 17:38:59 +02:00
XhmikosR	8dded72f16	@lambdatest/node-tunnel 3.0.14	2024-03-07 17:38:59 +02:00
Akshat Rustagi	9bf1787783	Update device to Pixel 6 for Android 12. (#38416 )	2024-03-07 17:38:59 +02:00
XhmikosR	dca50e4735	Increase retryLimit to 3	2024-03-07 17:38:59 +02:00
XhmikosR	90add983e1	Increase Jasmine timeout to 20000	2024-03-07 17:38:59 +02:00
XhmikosR	918766ebec	Update karma-browserstack-launcher	2024-03-07 17:38:58 +02:00
Mukesh Rana	6ea5131e06	Remove sleep and use iPhone 7 in devices (#38356 )	2024-03-07 17:38:58 +02:00
Mukesh Rana	b5dac1e50a	Some fixes (#38354 )	2024-03-07 17:38:58 +02:00
XhmikosR	d42acd2453	Add --race	2024-03-07 17:38:58 +02:00
XhmikosR	ce75d1d0e3	Add LambdaTest workflow	2024-03-07 17:38:58 +02:00
XhmikosR	4c3849f231	Fixes	2024-03-07 17:21:01 +02:00
Mukesh Rana	41d6ad9bc3	Add Lambdatest support	2024-03-07 17:21:01 +02:00