Merge branch 'main' into main-jd-stackblitz-for-examples

Docs: remove Webpack reference in Parcel guide (#37670 )
docs: move color-mode script (#37658 )
2022-12-19 19:03:27 +01:00 · 2022-12-19 18:34:18 +01:00 · 2022-12-18 14:32:17 -07:00 · 2022-12-18 08:19:33 +01:00 · 2022-12-18 08:12:19 +01:00 · 2022-12-16 09:34:54 +02:00
236 changed files with 5474 additions and 2791 deletions
@@ -2,43 +2,43 @@
  "files": [
    {
      "path": "./dist/css/bootstrap-grid.css",
-      "maxSize": "7.5 kB"
+      "maxSize": "8.25 kB"
    },
    {
      "path": "./dist/css/bootstrap-grid.min.css",
-      "maxSize": "6.55 kB"
+      "maxSize": "7.5 kB"
    },
    {
      "path": "./dist/css/bootstrap-reboot.css",
-      "maxSize": "2.75 kB"
+      "maxSize": "3.5 kB"
    },
    {
      "path": "./dist/css/bootstrap-reboot.min.css",
-      "maxSize": "2.5 kB"
+      "maxSize": "3.25 kB"
    },
    {
      "path": "./dist/css/bootstrap-utilities.css",
-      "maxSize": "9.25 kB"
+      "maxSize": "10.5 kB"
    },
    {
      "path": "./dist/css/bootstrap-utilities.min.css",
-      "maxSize": "8.5 kB"
+      "maxSize": "9.75 kB"
    },
    {
      "path": "./dist/css/bootstrap.css",
-      "maxSize": "28.75 kB"
+      "maxSize": "31.25 kB"
    },
    {
      "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "26.75 kB"
+      "maxSize": "29.25 kB"
    },
    {
      "path": "./dist/js/bootstrap.bundle.js",
-      "maxSize": "43.25 kB"
+      "maxSize": "43.0 kB"
    },
    {
      "path": "./dist/js/bootstrap.bundle.min.js",
-      "maxSize": "22.75 kB"
+      "maxSize": "23.0 kB"
    },
    {
      "path": "./dist/js/bootstrap.esm.js",
@@ -46,7 +46,7 @@
    },
    {
      "path": "./dist/js/bootstrap.esm.min.js",
-      "maxSize": "18.5 kB"
+      "maxSize": "18.25 kB"
    },
    {
      "path": "./dist/js/bootstrap.js",
@@ -54,7 +54,7 @@
    },
    {
      "path": "./dist/js/bootstrap.min.js",
-      "maxSize": "16.25 kB"
+      "maxSize": "16.0 kB"
    }
  ],
  "ci": {
@@ -63,4 +63,4 @@
      "v4-dev"
    ]
  }
-}
+}
@@ -8,6 +8,7 @@
    "autohiding",
    "autoplay",
    "autoplays",
+    "autoplaying",
    "blazingly",
    "Blockquotes",
    "Bootstrappers",
@@ -46,6 +46,7 @@
      "error",
      "after"
    ],
+    "prefer-template": "error",
    "semi": [
      "error",
      "never"
@@ -54,6 +55,7 @@
    "unicorn/no-array-callback-reference": "off",
    "unicorn/no-array-method-this-argument": "off",
    "unicorn/no-null": "off",
+    "unicorn/no-typeof-undefined": "off",
    "unicorn/no-unused-properties": "error",
    "unicorn/prefer-array-flat": "off",
    "unicorn/prefer-dom-node-dataset": "off",
@@ -18,16 +18,16 @@ the preferred channel for [bug reports](#bug-reports), [features requests](#feat
 and [submitting pull requests](#pull-requests), but please respect the following
 restrictions:

-* Please **do not** use the issue tracker for personal support requests. Stack Overflow ([`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag), [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions) or [IRC](/README.md#community) are better places to get help.
+- Please **do not** use the issue tracker for personal support requests. Stack Overflow ([`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5) tag), [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions) or [IRC](/README.md#community) are better places to get help.

-* Please **do not** derail or troll issues. Keep the discussion on topic and
+- Please **do not** derail or troll issues. Keep the discussion on topic and
  respect the opinions of others.

-* Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
+- Please **do not** post comments consisting solely of "+1" or ":thumbsup:".
  Use [GitHub's "reactions" feature](https://blog.github.com/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/)
  instead. We reserve the right to delete comments which violate this rule.

-* Please **do not** open issues regarding the official themes offered on <https://themes.getbootstrap.com/>.
+- Please **do not** open issues regarding the official themes offered on <https://themes.getbootstrap.com/>.
  Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`.


@@ -101,16 +101,16 @@ Sometimes bugs reported to us are actually caused by bugs in the browser(s) them

 | Vendor(s)     | Browser(s)                   | Rendering engine | Bug reporting website(s)                               | Notes                                                    |
 | ------------- | ---------------------------- | ---------------- | ------------------------------------------------------ | -------------------------------------------------------- |
-| Mozilla       | Firefox                      | Gecko            | https://bugzilla.mozilla.org/enter_bug.cgi             | "Core" is normally the right product option to choose.   |
-| Apple         | Safari                       | WebKit           | https://bugs.webkit.org/enter_bug.cgi?product=WebKit   | In Apple's bug reporter, choose "Safari" as the product. |
-| Google, Opera | Chrome, Chromium, Opera v15+ | Blink            | https://bugs.chromium.org/p/chromium/issues/list       | Click the "New issue" button.                            |
-| Microsoft     | Edge                         | Blink            | https://developer.microsoft.com/en-us/microsoft-edge/  | Go to "Help > Send Feedback" from the browser            |
+| Mozilla       | Firefox                      | Gecko            | <https://bugzilla.mozilla.org/enter_bug.cgi>             | "Core" is normally the right product option to choose.   |
+| Apple         | Safari                       | WebKit           | <https://bugs.webkit.org/enter_bug.cgi?product=WebKit>   | In Apple's bug reporter, choose "Safari" as the product. |
+| Google, Opera | Chrome, Chromium, Opera v15+ | Blink            | <https://bugs.chromium.org/p/chromium/issues/list>       | Click the "New issue" button.                            |
+| Microsoft     | Edge                         | Blink            | <https://developer.microsoft.com/en-us/microsoft-edge/>  | Go to "Help > Send Feedback" from the browser            |


 ## Feature requests

 Feature requests are welcome. But take a moment to find out whether your idea
-fits with the scope and aims of the project. It's up to *you* to make a strong
+fits with the scope and aims of the project. It's up to _you_ to make a strong
 case to convince the project's developers of the merits of this feature. Please
 provide as much detail and context as possible.

@@ -31,7 +31,7 @@

 <!-- Please add direct links where your modifications can be seen in the documentation -->

-* https://deploy-preview-{your pr number}--twbs-bootstrap.netlify.app/
+- <https://deploy-preview-{your_pr_number}--twbs-bootstrap.netlify.app/>

 ### Related issues

@@ -0,0 +1,3 @@
+name: "CodeQL config"
+paths-ignore:
+  - dist
@@ -6,7 +6,10 @@ on:

 env:
  FORCE_COLOR: 2
-  NODE: 16
+  NODE: 18
+
+permissions:
+  contents: read

 jobs:
  browserstack:
@@ -17,6 +20,8 @@ jobs:
    steps:
      - name: Clone repository
        uses: actions/checkout@v3
+        with:
+          persist-credentials: false

      - name: Set up Node.js
        uses: actions/setup-node@v3
@@ -9,7 +9,10 @@ on:

 env:
  FORCE_COLOR: 2
-  NODE: 16
+  NODE: 18
+
+permissions:
+  contents: read

 jobs:
  bundlewatch:
@@ -18,6 +21,8 @@ jobs:
    steps:
      - name: Clone repository
        uses: actions/checkout@v3
+        with:
+          persist-credentials: false

      - name: Set up Node.js
        uses: actions/setup-node@v3
@@ -17,6 +17,8 @@ jobs:
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3
+        with:
+          persist-credentials: false

      - name: Compress Images
        uses: calibreapp/image-actions@1.1.0
@@ -7,7 +7,6 @@ on:
      - v4-dev
      - "!dependabot/**"
  pull_request:
-    # The branches below must be a subset of the branches above
    branches:
      - main
      - v4-dev
@@ -28,11 +27,20 @@ jobs:
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
+        with:
+          persist-credentials: false

      - name: Initialize CodeQL
        uses: github/codeql-action/init@v2
        with:
+          config-file: ./.github/codeql/codeql-config.yml
          languages: "javascript"
+          queries: +security-and-quality
+
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2

      - name: Perform CodeQL Analysis
        uses: github/codeql-action/analyze@v2
+        with:
+          category: "/language:javascript"
@@ -9,15 +9,23 @@ on:

 env:
  FORCE_COLOR: 2
-  NODE: 16
+
+permissions:
+  contents: read

 jobs:
  cspell:
+    permissions:
+      # allow streetsidesoftware/cspell-action to fetch files for commits and PRs
+      contents: read
+      pull-requests: read
    runs-on: ubuntu-latest

    steps:
      - name: Clone repository
        uses: actions/checkout@v3
+        with:
+          persist-credentials: false

      - name: Run cspell
        uses: streetsidesoftware/cspell-action@v2
@@ -9,7 +9,10 @@ on:

 env:
  FORCE_COLOR: 2
-  NODE: 16
+  NODE: 18
+
+permissions:
+  contents: read

 jobs:
  css:
@@ -18,6 +21,8 @@ jobs:
    steps:
      - name: Clone repository
        uses: actions/checkout@v3
+        with:
+          persist-credentials: false

      - name: Set up Node.js
        uses: actions/setup-node@v3
@@ -9,7 +9,10 @@ on:

 env:
  FORCE_COLOR: 2
-  NODE: 16
+  NODE: 18
+
+permissions:
+  contents: read

 jobs:
  docs:
@@ -18,6 +21,8 @@ jobs:
    steps:
      - name: Clone repository
        uses: actions/checkout@v3
+        with:
+          persist-credentials: false

      - name: Set up Node.js
        uses: actions/setup-node@v3
@@ -4,8 +4,15 @@ on:
  schedule:
    - cron: "0 0 * * *"

+permissions:
+  contents: read
+
 jobs:
  issue-close-require:
+    permissions:
+      # allow actions-cool/issues-helper to update issues and PRs
+      issues: write
+      pull-requests: write
    runs-on: ubuntu-latest
    if: github.repository == 'twbs/bootstrap'
    steps:
@@ -4,8 +4,15 @@ on:
  issues:
    types: [labeled]

+permissions:
+  contents: read
+
 jobs:
  issue-labeled:
+    permissions:
+      # allow actions-cool/issues-helper to update issues and PRs
+      issues: write
+      pull-requests: write
    if: github.repository == 'twbs/bootstrap'
    runs-on: ubuntu-latest
    steps:
@@ -9,16 +9,25 @@ on:

 env:
  FORCE_COLOR: 2
-  NODE: 16
+  NODE: 18
+
+permissions:
+  contents: read

 jobs:
  run:
+    permissions:
+      # allow coverallsapp/github-action to create new checks issues and fetch code
+      checks: write
+      contents: read
    name: JS Tests
    runs-on: ubuntu-latest

    steps:
      - name: Clone repository
        uses: actions/checkout@v3
+        with:
+          persist-credentials: false

      - name: Set up Node.js
        uses: actions/setup-node@v3
@@ -9,7 +9,10 @@ on:

 env:
  FORCE_COLOR: 2
-  NODE: 16
+  NODE: 18
+
+permissions:
+  contents: read

 jobs:
  lint:
@@ -18,6 +21,8 @@ jobs:
    steps:
      - name: Clone repository
        uses: actions/checkout@v3
+        with:
+          persist-credentials: false

      - name: Set up Node.js
        uses: actions/setup-node@v3
@@ -9,7 +9,10 @@ on:

 env:
  FORCE_COLOR: 2
-  NODE: 16
+  NODE: 18
+
+permissions:
+  contents: read

 jobs:
  css:
@@ -18,6 +21,8 @@ jobs:
    steps:
      - name: Clone repository
        uses: actions/checkout@v3
+        with:
+          persist-credentials: false

      - name: Set up Node.js
        uses: actions/setup-node@v3
@@ -6,8 +6,15 @@ on:
      - main
  workflow_dispatch:

+permissions:
+  contents: read
+
 jobs:
  update_release_draft:
+    permissions:
+      # allow release-drafter/release-drafter to create GitHub releases and add labels to PRs
+      contents: write
+      pull-requests: write
    runs-on: ubuntu-latest
    if: github.repository == 'twbs/bootstrap'
    steps:
@@ -0,0 +1,65 @@
+name: Scorecards supply-chain security
+
+on:
+  # Only the default branch is supported.
+  branch_protection_rule:
+  push:
+    branches:
+      - main
+  schedule:
+    - cron: "16 10 * * 6"
+  workflow_dispatch:
+
+# Declare default permissions as read only.
+permissions: read-all
+
+jobs:
+  analysis:
+    name: Scorecards analysis
+    runs-on: ubuntu-latest
+    permissions:
+      # Needed to upload the results to code-scanning dashboard.
+      security-events: write
+      # Used to receive a badge.
+      id-token: write
+      # Needs for private repositories.
+      contents: read
+      actions: read
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+
+      - name: Run analysis
+        uses: ossf/scorecard-action@v2.1.0
+        with:
+          results_file: results.sarif
+          results_format: sarif
+          # (Optional) Read-only PAT token. Uncomment the `repo_token` line below if:
+          # - you want to enable the Branch-Protection check on a *public* repository, or
+          # - you are installing Scorecards on a *private* repository
+          # To create the PAT, follow the steps in https://github.com/ossf/scorecard-action#authentication-with-pat.
+          # repo_token: ${{ secrets.SCORECARD_READ_TOKEN }}
+
+          # Publish the results for public repositories to enable scorecard badges. For more details, see
+          # https://github.com/ossf/scorecard-action#publishing-results.
+          # For private repositories, `publish_results` will automatically be set to `false`, regardless
+          # of the value entered here.
+          publish_results: true
+
+      # Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF
+      # format to the repository Actions tab.
+      - name: Upload artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: SARIF file
+          path: results.sarif
+          retention-days: 5
+
+      # Upload the results to GitHub's code scanning dashboard.
+      - name: Upload to code-scanning
+        uses: github/codeql-action/upload-sarif@v1
+        with:
+          sarif_file: results.sarif
@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:

-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
  and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the overall
+- Focusing on what is best not just for us as individuals, but for the overall
  community

 Examples of unacceptable behavior include:

-* The use of sexualized language or imagery, and sexual attention or advances of
+- The use of sexualized language or imagery, and sexual attention or advances of
  any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email address,
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address,
  without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
  professional setting

 ## Enforcement Responsibilities
@@ -58,7 +58,7 @@ Read the [Getting started page](https://getbootstrap.com/docs/5.2/getting-starte

 ## Status

-[![Build Status](https://img.shields.io/github/workflow/status/twbs/bootstrap/JS%20Tests/main?label=JS%20Tests&logo=github)](https://github.com/twbs/bootstrap/actions?query=workflow%3AJS+Tests+branch%3Amain)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/twbs/bootstrap/js.yml?branch=main&label=JS%20Tests&logo=github)](https://github.com/twbs/bootstrap/actions?query=workflow%3AJS+Tests+branch%3Amain)
 [![npm version](https://img.shields.io/npm/v/bootstrap)](https://www.npmjs.com/package/bootstrap)
 [![Gem version](https://img.shields.io/gem/v/bootstrap)](https://rubygems.org/gems/bootstrap)
 [![Meteor Atmosphere](https://img.shields.io/badge/meteor-twbs%3Abootstrap-blue)](https://atmospherejs.com/twbs/bootstrap)
@@ -72,6 +72,7 @@ Read the [Getting started page](https://getbootstrap.com/docs/5.2/getting-starte
 [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229)](https://www.browserstack.com/automate/public-build/SkxZcStBeExEdVJqQ2hWYnlWckpkNmNEY213SFp6WHFETWk2bGFuY3pCbz0tLXhqbHJsVlZhQnRBdEpod3NLSDMzaHc9PQ==--3d0b75245708616eb93113221beece33e680b229)
 [![Backers on Open Collective](https://img.shields.io/opencollective/backers/bootstrap)](#backers)
 [![Sponsors on Open Collective](https://img.shields.io/opencollective/sponsors/bootstrap)](#sponsors)
+![OpenSSF Scorecard](https://img.shields.io/ossf-scorecard/github.com/twbs/bootstrap)


 ## What's included
@@ -16,7 +16,7 @@ const { babel } = require('@rollup/plugin-babel')
 const banner = require('./banner.js')

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

 // Array which holds the resolved plugins
 const resolvedPlugins = []
@@ -27,7 +27,7 @@ const filenameToEntity = filename => filename.replace('.js', '')

 for (const file of jsFiles) {
  resolvedPlugins.push({
-    src: file.replace('.js', ''),
+    src: file,
    dist: file.replace('src', 'dist'),
    fileName: path.basename(file),
    className: filenameToEntity(path.basename(file))
@@ -40,7 +40,7 @@ if (BUNDLE) {
 const rollupConfig = {
  input: path.resolve(__dirname, `../js/index.${ESM ? 'esm' : 'umd'}.js`),
  output: {
-    banner,
+    banner: banner(),
    file: path.resolve(__dirname, `../dist/js/${fileDestination}.js`),
    format: ESM ? 'esm' : 'umd',
    globals,
@@ -0,0 +1,26 @@
+{
+  "extends": "../.eslintrc.json",
+  "env": {
+    "es2022": true
+  },
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "overrides": [
+    {
+      "files": [
+        "./*.js",
+        "./src/**/*.js"
+      ],
+      "rules": {
+        "import/extensions": [
+          2,
+          {
+            "js": "always"
+          }
+        ]
+      }
+    }
+  ]
+}
@@ -5,15 +5,15 @@
 * --------------------------------------------------------------------------
 */

-export { default as Alert } from './src/alert'
-export { default as Button } from './src/button'
-export { default as Carousel } from './src/carousel'
-export { default as Collapse } from './src/collapse'
-export { default as Dropdown } from './src/dropdown'
-export { default as Modal } from './src/modal'
-export { default as Offcanvas } from './src/offcanvas'
-export { default as Popover } from './src/popover'
-export { default as ScrollSpy } from './src/scrollspy'
-export { default as Tab } from './src/tab'
-export { default as Toast } from './src/toast'
-export { default as Tooltip } from './src/tooltip'
+export { default as Alert } from './src/alert.js'
+export { default as Button } from './src/button.js'
+export { default as Carousel } from './src/carousel.js'
+export { default as Collapse } from './src/collapse.js'
+export { default as Dropdown } from './src/dropdown.js'
+export { default as Modal } from './src/modal.js'
+export { default as Offcanvas } from './src/offcanvas.js'
+export { default as Popover } from './src/popover.js'
+export { default as ScrollSpy } from './src/scrollspy.js'
+export { default as Tab } from './src/tab.js'
+export { default as Toast } from './src/toast.js'
+export { default as Tooltip } from './src/tooltip.js'
@@ -5,18 +5,18 @@
 * --------------------------------------------------------------------------
 */

-import Alert from './src/alert'
-import Button from './src/button'
-import Carousel from './src/carousel'
-import Collapse from './src/collapse'
-import Dropdown from './src/dropdown'
-import Modal from './src/modal'
-import Offcanvas from './src/offcanvas'
-import Popover from './src/popover'
-import ScrollSpy from './src/scrollspy'
-import Tab from './src/tab'
-import Toast from './src/toast'
-import Tooltip from './src/tooltip'
+import Alert from './src/alert.js'
+import Button from './src/button.js'
+import Carousel from './src/carousel.js'
+import Collapse from './src/collapse.js'
+import Dropdown from './src/dropdown.js'
+import Modal from './src/modal.js'
+import Offcanvas from './src/offcanvas.js'
+import Popover from './src/popover.js'
+import ScrollSpy from './src/scrollspy.js'
+import Tab from './src/tab.js'
+import Toast from './src/toast.js'
+import Tooltip from './src/tooltip.js'

 export default {
  Alert,
@@ -5,10 +5,10 @@
 * --------------------------------------------------------------------------
 */

-import { defineJQueryPlugin } from './util/index'
-import EventHandler from './dom/event-handler'
-import BaseComponent from './base-component'
-import { enableDismissTrigger } from './util/component-functions'
+import { defineJQueryPlugin } from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import BaseComponent from './base-component.js'
+import { enableDismissTrigger } from './util/component-functions.js'

 /**
 * Constants
@@ -5,10 +5,10 @@
 * --------------------------------------------------------------------------
 */

-import Data from './dom/data'
-import { executeAfterTransition, getElement } from './util/index'
-import EventHandler from './dom/event-handler'
-import Config from './util/config'
+import Data from './dom/data.js'
+import { executeAfterTransition, getElement } from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import Config from './util/config.js'

 /**
 * Constants
@@ -5,9 +5,9 @@
 * --------------------------------------------------------------------------
 */

-import { defineJQueryPlugin } from './util/index'
-import EventHandler from './dom/event-handler'
-import BaseComponent from './base-component'
+import { defineJQueryPlugin } from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import BaseComponent from './base-component.js'

 /**
 * Constants
@@ -7,18 +7,17 @@

 import {
  defineJQueryPlugin,
-  getElementFromSelector,
  getNextActiveElement,
  isRTL,
  isVisible,
  reflow,
  triggerTransitionEnd
-} from './util/index'
-import EventHandler from './dom/event-handler'
-import Manipulator from './dom/manipulator'
-import SelectorEngine from './dom/selector-engine'
-import Swipe from './util/swipe'
-import BaseComponent from './base-component'
+} from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import Manipulator from './dom/manipulator.js'
+import SelectorEngine from './dom/selector-engine.js'
+import Swipe from './util/swipe.js'
+import BaseComponent from './base-component.js'

 /**
 * Constants
@@ -431,7 +430,7 @@ class Carousel extends BaseComponent {
 */

 EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, function (event) {
-  const target = getElementFromSelector(this)
+  const target = SelectorEngine.getElementFromSelector(this)

  if (!target || !target.classList.contains(CLASS_NAME_CAROUSEL)) {
    return
@@ -8,13 +8,11 @@
 import {
  defineJQueryPlugin,
  getElement,
-  getElementFromSelector,
-  getSelectorFromElement,
  reflow
-} from './util/index'
-import EventHandler from './dom/event-handler'
-import SelectorEngine from './dom/selector-engine'
-import BaseComponent from './base-component'
+} from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import SelectorEngine from './dom/selector-engine.js'
+import BaseComponent from './base-component.js'

 /**
 * Constants
@@ -68,7 +66,7 @@ class Collapse extends BaseComponent {
    const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE)

    for (const elem of toggleList) {
-      const selector = getSelectorFromElement(elem)
+      const selector = SelectorEngine.getSelectorFromElement(elem)
      const filterElement = SelectorEngine.find(selector)
        .filter(foundElement => foundElement === this._element)

@@ -185,7 +183,7 @@ class Collapse extends BaseComponent {
    this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW)

    for (const trigger of this._triggerArray) {
-      const element = getElementFromSelector(trigger)
+      const element = SelectorEngine.getElementFromSelector(trigger)

      if (element && !this._isShown(element)) {
        this._addAriaAndCollapsedClass([trigger], false)
@@ -229,7 +227,7 @@ class Collapse extends BaseComponent {
    const children = this._getFirstLevelChildren(SELECTOR_DATA_TOGGLE)

    for (const element of children) {
-      const selected = getElementFromSelector(element)
+      const selected = SelectorEngine.getElementFromSelector(element)

      if (selected) {
        this._addAriaAndCollapsedClass([element], this._isShown(selected))
@@ -285,10 +283,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
    event.preventDefault()
  }

-  const selector = getSelectorFromElement(this)
-  const selectorElements = SelectorEngine.find(selector)
-
-  for (const element of selectorElements) {
+  for (const element of SelectorEngine.getMultipleElementsFromSelector(this)) {
    Collapse.getOrCreateInstance(element, { toggle: false }).toggle()
  }
 })
@@ -5,7 +5,7 @@
 * --------------------------------------------------------------------------
 */

-import { getjQuery } from '../util/index'
+import { getjQuery } from '../util/index.js'

 /**
 * Constants
@@ -198,9 +198,8 @@ function removeHandler(element, events, typeEvent, handler, delegationSelector)
 function removeNamespacedHandlers(element, events, typeEvent, namespace) {
  const storeElementEvent = events[typeEvent] || {}

-  for (const handlerKey of Object.keys(storeElementEvent)) {
+  for (const [handlerKey, event] of Object.entries(storeElementEvent)) {
    if (handlerKey.includes(namespace)) {
-      const event = storeElementEvent[handlerKey]
      removeHandler(element, events, typeEvent, event.callable, event.delegationSelector)
    }
  }
@@ -248,11 +247,10 @@ const EventHandler = {
      }
    }

-    for (const keyHandlers of Object.keys(storeElementEvent)) {
+    for (const [keyHandlers, event] of Object.entries(storeElementEvent)) {
      const handlerKey = keyHandlers.replace(stripUidRegex, '')

      if (!inNamespace || originalTypeEvent.includes(handlerKey)) {
-        const event = storeElementEvent[keyHandlers]
        removeHandler(element, events, typeEvent, event.callable, event.delegationSelector)
      }
    }
@@ -300,8 +298,8 @@ const EventHandler = {
  }
 }

-function hydrateObj(obj, meta) {
-  for (const [key, value] of Object.entries(meta || {})) {
+function hydrateObj(obj, meta = {}) {
+  for (const [key, value] of Object.entries(meta)) {
    try {
      obj[key] = value
    } catch {
@@ -5,11 +5,32 @@
 * --------------------------------------------------------------------------
 */

-import { isDisabled, isVisible } from '../util/index'
+import { isDisabled, isVisible, parseSelector } from '../util/index.js'

-/**
- * Constants
- */
+const getSelector = element => {
+  let selector = element.getAttribute('data-bs-target')
+
+  if (!selector || selector === '#') {
+    let hrefAttribute = element.getAttribute('href')
+
+    // The only valid content that could double as a selector are IDs or classes,
+    // so everything starting with `#` or `.`. If a "real" URL is used as the selector,
+    // `document.querySelector` will rightfully complain it is invalid.
+    // See https://github.com/twbs/bootstrap/issues/32273
+    if (!hrefAttribute || (!hrefAttribute.includes('#') && !hrefAttribute.startsWith('.'))) {
+      return null
+    }
+
+    // Just in case some CMS puts out a full URL with the anchor appended
+    if (hrefAttribute.includes('#') && !hrefAttribute.startsWith('#')) {
+      hrefAttribute = `#${hrefAttribute.split('#')[1]}`
+    }
+
+    selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null
+  }
+
+  return parseSelector(selector)
+}

 const SelectorEngine = {
  find(selector, element = document.documentElement) {
@@ -77,6 +98,28 @@ const SelectorEngine = {
    ].map(selector => `${selector}:not([tabindex^="-"])`).join(',')

    return this.find(focusables, element).filter(el => !isDisabled(el) && isVisible(el))
+  },
+
+  getSelectorFromElement(element) {
+    const selector = getSelector(element)
+
+    if (selector) {
+      return SelectorEngine.findOne(selector) ? selector : null
+    }
+
+    return null
+  },
+
+  getElementFromSelector(element) {
+    const selector = getSelector(element)
+
+    return selector ? SelectorEngine.findOne(selector) : null
+  },
+
+  getMultipleElementsFromSelector(element) {
+    const selector = getSelector(element)
+
+    return selector ? SelectorEngine.find(selector) : []
  }
 }

@@ -8,6 +8,7 @@
 import * as Popper from '@popperjs/core'
 import {
  defineJQueryPlugin,
+  execute,
  getElement,
  getNextActiveElement,
  isDisabled,
@@ -15,11 +16,11 @@ import {
  isRTL,
  isVisible,
  noop
-} from './util/index'
-import EventHandler from './dom/event-handler'
-import Manipulator from './dom/manipulator'
-import SelectorEngine from './dom/selector-engine'
-import BaseComponent from './base-component'
+} from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import Manipulator from './dom/manipulator.js'
+import SelectorEngine from './dom/selector-engine.js'
+import BaseComponent from './base-component.js'

 /**
 * Constants
@@ -319,7 +320,7 @@ class Dropdown extends BaseComponent {

    return {
      ...defaultBsPopperConfig,
-      ...(typeof this._config.popperConfig === 'function' ? this._config.popperConfig(defaultBsPopperConfig) : this._config.popperConfig)
+      ...execute(this._config.popperConfig, [defaultBsPopperConfig])
    }
  }

@@ -5,14 +5,14 @@
 * --------------------------------------------------------------------------
 */

-import { defineJQueryPlugin, getElementFromSelector, isRTL, isVisible, reflow } from './util/index'
-import EventHandler from './dom/event-handler'
-import SelectorEngine from './dom/selector-engine'
-import ScrollBarHelper from './util/scrollbar'
-import BaseComponent from './base-component'
-import Backdrop from './util/backdrop'
-import FocusTrap from './util/focustrap'
-import { enableDismissTrigger } from './util/component-functions'
+import { defineJQueryPlugin, isRTL, isVisible, reflow } from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import SelectorEngine from './dom/selector-engine.js'
+import ScrollBarHelper from './util/scrollbar.js'
+import BaseComponent from './base-component.js'
+import Backdrop from './util/backdrop.js'
+import FocusTrap from './util/focustrap.js'
+import { enableDismissTrigger } from './util/component-functions.js'

 /**
 * Constants
@@ -336,7 +336,7 @@ class Modal extends BaseComponent {
 */

 EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
-  const target = getElementFromSelector(this)
+  const target = SelectorEngine.getElementFromSelector(this)

  if (['A', 'AREA'].includes(this.tagName)) {
    event.preventDefault()
@@ -7,17 +7,16 @@

 import {
  defineJQueryPlugin,
-  getElementFromSelector,
  isDisabled,
  isVisible
-} from './util/index'
-import ScrollBarHelper from './util/scrollbar'
-import EventHandler from './dom/event-handler'
-import BaseComponent from './base-component'
-import SelectorEngine from './dom/selector-engine'
-import Backdrop from './util/backdrop'
-import FocusTrap from './util/focustrap'
-import { enableDismissTrigger } from './util/component-functions'
+} from './util/index.js'
+import ScrollBarHelper from './util/scrollbar.js'
+import EventHandler from './dom/event-handler.js'
+import BaseComponent from './base-component.js'
+import SelectorEngine from './dom/selector-engine.js'
+import Backdrop from './util/backdrop.js'
+import FocusTrap from './util/focustrap.js'
+import { enableDismissTrigger } from './util/component-functions.js'

 /**
 * Constants
@@ -231,7 +230,7 @@ class Offcanvas extends BaseComponent {
 */

 EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
-  const target = getElementFromSelector(this)
+  const target = SelectorEngine.getElementFromSelector(this)

  if (['A', 'AREA'].includes(this.tagName)) {
    event.preventDefault()
@@ -5,8 +5,8 @@
 * --------------------------------------------------------------------------
 */

-import { defineJQueryPlugin } from './util/index'
-import Tooltip from './tooltip'
+import { defineJQueryPlugin } from './util/index.js'
+import Tooltip from './tooltip.js'

 /**
 * Constants
@@ -5,10 +5,10 @@
 * --------------------------------------------------------------------------
 */

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

 /**
 * Constants
@@ -5,10 +5,10 @@
 * --------------------------------------------------------------------------
 */

-import { defineJQueryPlugin, getElementFromSelector, getNextActiveElement, isDisabled } from './util/index'
-import EventHandler from './dom/event-handler'
-import SelectorEngine from './dom/selector-engine'
-import BaseComponent from './base-component'
+import { defineJQueryPlugin, getNextActiveElement, isDisabled } from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import SelectorEngine from './dom/selector-engine.js'
+import BaseComponent from './base-component.js'

 /**
 * Constants
@@ -106,7 +106,7 @@ class Tab extends BaseComponent {

    element.classList.add(CLASS_NAME_ACTIVE)

-    this._activate(getElementFromSelector(element)) // Search and activate/show the proper section
+    this._activate(SelectorEngine.getElementFromSelector(element)) // Search and activate/show the proper section

    const complete = () => {
      if (element.getAttribute('role') !== 'tab') {
@@ -133,7 +133,7 @@ class Tab extends BaseComponent {
    element.classList.remove(CLASS_NAME_ACTIVE)
    element.blur()

-    this._deactivate(getElementFromSelector(element)) // Search and deactivate the shown section too
+    this._deactivate(SelectorEngine.getElementFromSelector(element)) // Search and deactivate the shown section too

    const complete = () => {
      if (element.getAttribute('role') !== 'tab') {
@@ -203,7 +203,7 @@ class Tab extends BaseComponent {
  }

  _setInitialAttributesOnTargetPanel(child) {
-    const target = getElementFromSelector(child)
+    const target = SelectorEngine.getElementFromSelector(child)

    if (!target) {
      return
@@ -5,10 +5,10 @@
 * --------------------------------------------------------------------------
 */

-import { defineJQueryPlugin, reflow } from './util/index'
-import EventHandler from './dom/event-handler'
-import BaseComponent from './base-component'
-import { enableDismissTrigger } from './util/component-functions'
+import { defineJQueryPlugin, reflow } from './util/index.js'
+import EventHandler from './dom/event-handler.js'
+import BaseComponent from './base-component.js'
+import { enableDismissTrigger } from './util/component-functions.js'

 /**
 * Constants
@@ -6,12 +6,12 @@
 */

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

 /**
 * Constants
@@ -370,9 +370,7 @@ class Tooltip extends BaseComponent {
  }

  _createPopper(tip) {
-    const placement = typeof this._config.placement === 'function' ?
-      this._config.placement.call(this, tip, this._element) :
-      this._config.placement
+    const placement = execute(this._config.placement, [this, tip, this._element])
    const attachment = AttachmentMap[placement.toUpperCase()]
    return Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
  }
@@ -392,7 +390,7 @@ class Tooltip extends BaseComponent {
  }

  _resolvePossibleFunction(arg) {
-    return typeof arg === 'function' ? arg.call(this._element) : arg
+    return execute(arg, [this._element])
  }

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

    return {
      ...defaultBsPopperConfig,
-      ...(typeof this._config.popperConfig === 'function' ? this._config.popperConfig(defaultBsPopperConfig) : this._config.popperConfig)
+      ...execute(this._config.popperConfig, [defaultBsPopperConfig])
    }
  }

@@ -579,9 +577,9 @@ class Tooltip extends BaseComponent {
  _getDelegateConfig() {
    const config = {}

-    for (const key in this._config) {
-      if (this.constructor.Default[key] !== this._config[key]) {
-        config[key] = this._config[key]
+    for (const [key, value] of Object.entries(this._config)) {
+      if (this.constructor.Default[key] !== value) {
+        config[key] = value
      }
    }

@@ -5,9 +5,9 @@
 * --------------------------------------------------------------------------
 */

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

 /**
 * Constants
@@ -5,8 +5,9 @@
 * --------------------------------------------------------------------------
 */

-import EventHandler from '../dom/event-handler'
-import { getElementFromSelector, isDisabled } from './index'
+import EventHandler from '../dom/event-handler.js'
+import { isDisabled } from './index.js'
+import SelectorEngine from '../dom/selector-engine.js'

 const enableDismissTrigger = (component, method = 'hide') => {
  const clickEvent = `click.dismiss${component.EVENT_KEY}`
@@ -21,7 +22,7 @@ const enableDismissTrigger = (component, method = 'hide') => {
      return
    }

-    const target = getElementFromSelector(this) || this.closest(`.${name}`)
+    const target = SelectorEngine.getElementFromSelector(this) || this.closest(`.${name}`)
    const instance = component.getOrCreateInstance(target)

    // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method
@@ -5,8 +5,8 @@
 * --------------------------------------------------------------------------
 */

-import { isElement, toType } from './index'
-import Manipulator from '../dom/manipulator'
+import { isElement, toType } from './index.js'
+import Manipulator from '../dom/manipulator.js'

 /**
 * Class definition
@@ -49,8 +49,7 @@ class Config {
  }

  _typeCheckConfig(config, configTypes = this.constructor.DefaultType) {
-    for (const property of Object.keys(configTypes)) {
-      const expectedTypes = configTypes[property]
+    for (const [property, expectedTypes] of Object.entries(configTypes)) {
      const value = config[property]
      const valueType = isElement(value) ? 'element' : toType(value)

@@ -5,9 +5,9 @@
 * --------------------------------------------------------------------------
 */

-import EventHandler from '../dom/event-handler'
-import SelectorEngine from '../dom/selector-engine'
-import Config from './config'
+import EventHandler from '../dom/event-handler.js'
+import SelectorEngine from '../dom/selector-engine.js'
+import Config from './config.js'

 /**
 * Constants
@@ -9,6 +9,20 @@ const MAX_UID = 1_000_000
 const MILLISECONDS_MULTIPLIER = 1000
 const TRANSITION_END = 'transitionend'

+/**
+ * Properly escape IDs selectors to handle weird IDs
+ * @param {string} selector
+ * @returns {string}
+ */
+const parseSelector = selector => {
+  if (selector && window.CSS && window.CSS.escape) {
+    // document.querySelector needs escaping to handle IDs (html5+) containing for instance /
+    selector = selector.replace(/#([^\s"#']+)/g, (match, id) => `#${CSS.escape(id)}`)
+  }
+
+  return selector
+}
+
 // Shout-out Angus Croll (https://goo.gl/pxwQGp)
 const toType = object => {
  if (object === null || object === undefined) {
@@ -30,47 +44,6 @@ const getUID = prefix => {
  return prefix
 }

-const getSelector = element => {
-  let selector = element.getAttribute('data-bs-target')
-
-  if (!selector || selector === '#') {
-    let hrefAttribute = element.getAttribute('href')
-
-    // The only valid content that could double as a selector are IDs or classes,
-    // so everything starting with `#` or `.`. If a "real" URL is used as the selector,
-    // `document.querySelector` will rightfully complain it is invalid.
-    // See https://github.com/twbs/bootstrap/issues/32273
-    if (!hrefAttribute || (!hrefAttribute.includes('#') && !hrefAttribute.startsWith('.'))) {
-      return null
-    }
-
-    // Just in case some CMS puts out a full URL with the anchor appended
-    if (hrefAttribute.includes('#') && !hrefAttribute.startsWith('#')) {
-      hrefAttribute = `#${hrefAttribute.split('#')[1]}`
-    }
-
-    selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null
-  }
-
-  return selector
-}
-
-const getSelectorFromElement = element => {
-  const selector = getSelector(element)
-
-  if (selector) {
-    return document.querySelector(selector) ? selector : null
-  }
-
-  return null
-}
-
-const getElementFromSelector = element => {
-  const selector = getSelector(element)
-
-  return selector ? document.querySelector(selector) : null
-}
-
 const getTransitionDurationFromElement = element => {
  if (!element) {
    return 0
@@ -117,7 +90,7 @@ const getElement = object => {
  }

  if (typeof object === 'string' && object.length > 0) {
-    return document.querySelector(object)
+    return document.querySelector(parseSelector(object))
  }

  return null
@@ -249,10 +222,8 @@ const defineJQueryPlugin = plugin => {
  })
 }

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

 const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
@@ -318,10 +289,8 @@ export {
  executeAfterTransition,
  findShadowRoot,
  getElement,
-  getElementFromSelector,
  getjQuery,
  getNextActiveElement,
-  getSelectorFromElement,
  getTransitionDurationFromElement,
  getUID,
  isDisabled,
@@ -330,6 +299,7 @@ export {
  isVisible,
  noop,
  onDOMContentLoaded,
+  parseSelector,
  reflow,
  triggerTransitionEnd,
  toType
@@ -5,9 +5,9 @@
 * --------------------------------------------------------------------------
 */

-import SelectorEngine from '../dom/selector-engine'
-import Manipulator from '../dom/manipulator'
-import { isElement } from './index'
+import SelectorEngine from '../dom/selector-engine.js'
+import Manipulator from '../dom/manipulator.js'
+import { isElement } from './index.js'

 /**
 * Constants
@@ -5,9 +5,9 @@
 * --------------------------------------------------------------------------
 */

-import Config from './config'
-import EventHandler from '../dom/event-handler'
-import { execute } from './index'
+import Config from './config.js'
+import EventHandler from '../dom/event-handler.js'
+import { execute } from './index.js'

 /**
 * Constants
@@ -5,10 +5,10 @@
 * --------------------------------------------------------------------------
 */

-import { DefaultAllowlist, sanitizeHtml } from './sanitizer'
-import { getElement, isElement } from '../util/index'
-import SelectorEngine from '../dom/selector-engine'
-import Config from './config'
+import { DefaultAllowlist, sanitizeHtml } from './sanitizer.js'
+import { execute, getElement, isElement } from './index.js'
+import SelectorEngine from '../dom/selector-engine.js'
+import Config from './config.js'

 /**
 * Constants
@@ -143,7 +143,7 @@ class TemplateFactory extends Config {
  }

  _resolvePossibleFunction(arg) {
-    return typeof arg === 'function' ? arg(this) : arg
+    return execute(arg, [this])
  }

  _putElementInTemplate(element, templateElement) {
@@ -105,7 +105,7 @@ if (BROWSERSTACK) {
  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()}`,
+    build: `bootstrap-${ENV.GITHUB_SHA ? `${ENV.GITHUB_SHA.slice(0, 7)}-` : ''}${new Date().toISOString()}`,
    project: 'Bootstrap',
    retryLimit: 2
  }
@@ -278,14 +278,14 @@ describe('Collapse', () => {
        fixtureEl.innerHTML = [
          '<div id="parentGroup" class="accordion">',
          '  <div id="parentHeader" class="accordion-header">',
-          '    <button data-bs-target="#parentContent" data-bs-toggle="collapse" role="button" class="accordion-toggle">Parent</button>',
+          '    <button data-bs-target="#parentContent" data-bs-toggle="collapse" class="accordion-toggle">Parent</button>',
          '  </div>',
          '  <div id="parentContent" class="accordion-collapse collapse" aria-labelledby="parentHeader" data-bs-parent="#parentGroup">',
          '    <div class="accordion-body">',
          '      <div id="childGroup" class="accordion">',
          '        <div class="accordion-item">',
          '          <div id="childHeader1" class="accordion-header">',
-          '            <button data-bs-target="#childContent1" data-bs-toggle="collapse" role="button" class="accordion-toggle">Child 1</button>',
+          '            <button data-bs-target="#childContent1" data-bs-toggle="collapse" class="accordion-toggle">Child 1</button>',
          '          </div>',
          '          <div id="childContent1" class="accordion-collapse collapse" aria-labelledby="childHeader1" data-bs-parent="#childGroup">',
          '            <div>content</div>',
@@ -293,7 +293,7 @@ describe('Collapse', () => {
          '        </div>',
          '        <div class="accordion-item">',
          '          <div id="childHeader2" class="accordion-header">',
-          '            <button data-bs-target="#childContent2" data-bs-toggle="collapse" role="button" class="accordion-toggle">Child 2</button>',
+          '            <button data-bs-target="#childContent2" data-bs-toggle="collapse" class="accordion-toggle">Child 2</button>',
          '          </div>',
          '          <div id="childContent2" class="accordion-collapse collapse" aria-labelledby="childHeader2" data-bs-parent="#childGroup">',
          '            <div>content</div>',
@@ -887,17 +887,17 @@ describe('Collapse', () => {
      return new Promise(resolve => {
        fixtureEl.innerHTML = [
          '<a id="trigger1" role="button" data-bs-toggle="collapse" href="#test1"></a>',
-          '<a id="trigger2" role="button" data-bs-toggle="collapse" href="#test2"></a>',
+          '<a id="trigger2" role="button" data-bs-toggle="collapse" href="#0/my/id"></a>',
          '<a id="trigger3" role="button" data-bs-toggle="collapse" href=".multi"></a>',
          '<div id="test1" class="multi"></div>',
-          '<div id="test2" class="multi"></div>'
+          '<div id="0/my/id" class="multi"></div>'
        ].join('')

        const trigger1 = fixtureEl.querySelector('#trigger1')
        const trigger2 = fixtureEl.querySelector('#trigger2')
        const trigger3 = fixtureEl.querySelector('#trigger3')
        const target1 = fixtureEl.querySelector('#test1')
-        const target2 = fixtureEl.querySelector('#test2')
+        const target2 = fixtureEl.querySelector(`#${CSS.escape('0/my/id')}`)

        const target2Shown = () => {
          expect(trigger1).not.toHaveClass('collapsed')
@@ -1,5 +1,5 @@
 import SelectorEngine from '../../../src/dom/selector-engine'
-import { getFixture, clearFixture } from '../../helpers/fixture'
+import { clearFixture, getFixture } from '../../helpers/fixture'

 describe('SelectorEngine', () => {
  let fixtureEl
@@ -232,5 +232,159 @@ describe('SelectorEngine', () => {
      expect(SelectorEngine.focusableChildren(fixtureEl)).toEqual(expectedElements)
    })
  })
-})

+  describe('getSelectorFromElement', () => {
+    it('should get selector from data-bs-target', () => {
+      fixtureEl.innerHTML = [
+        '<div id="test" data-bs-target=".target"></div>',
+        '<div class="target"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('.target')
+    })
+
+    it('should get selector from href if no data-bs-target set', () => {
+      fixtureEl.innerHTML = [
+        '<a id="test" href=".target"></a>',
+        '<div class="target"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('.target')
+    })
+
+    it('should get selector from href if data-bs-target equal to #', () => {
+      fixtureEl.innerHTML = [
+        '<a id="test" data-bs-target="#" href=".target"></a>',
+        '<div class="target"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('.target')
+    })
+
+    it('should return null if a selector from a href is a url without an anchor', () => {
+      fixtureEl.innerHTML = [
+        '<a id="test" data-bs-target="#" href="foo/bar.html"></a>',
+        '<div class="target"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getSelectorFromElement(testEl)).toBeNull()
+    })
+
+    it('should return the anchor if a selector from a href is a url', () => {
+      fixtureEl.innerHTML = [
+        '<a id="test" data-bs-target="#" href="foo/bar.html#target"></a>',
+        '<div id="target"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('#target')
+    })
+
+    it('should return null if selector not found', () => {
+      fixtureEl.innerHTML = '<a id="test" href=".target"></a>'
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getSelectorFromElement(testEl)).toBeNull()
+    })
+
+    it('should return null if no selector', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const testEl = fixtureEl.querySelector('div')
+
+      expect(SelectorEngine.getSelectorFromElement(testEl)).toBeNull()
+    })
+  })
+
+  describe('getElementFromSelector', () => {
+    it('should get element from data-bs-target', () => {
+      fixtureEl.innerHTML = [
+        '<div id="test" data-bs-target=".target"></div>',
+        '<div class="target"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target'))
+    })
+
+    it('should get element from href if no data-bs-target set', () => {
+      fixtureEl.innerHTML = [
+        '<a id="test" href=".target"></a>',
+        '<div class="target"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target'))
+    })
+
+    it('should return null if element not found', () => {
+      fixtureEl.innerHTML = '<a id="test" href=".target"></a>'
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getElementFromSelector(testEl)).toBeNull()
+    })
+
+    it('should return null if no selector', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const testEl = fixtureEl.querySelector('div')
+
+      expect(SelectorEngine.getElementFromSelector(testEl)).toBeNull()
+    })
+  })
+
+  describe('getMultipleElementsFromSelector', () => {
+    it('should get elements from data-bs-target', () => {
+      fixtureEl.innerHTML = [
+        '<div id="test" data-bs-target=".target"></div>',
+        '<div class="target"></div>',
+        '<div class="target"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
+    })
+
+    it('should get elements in array, from href if no data-bs-target set', () => {
+      fixtureEl.innerHTML = [
+        '<a id="test" href=".target"></a>',
+        '<div class="target"></div>',
+        '<div class="target"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
+    })
+
+    it('should return empty array if elements not found', () => {
+      fixtureEl.innerHTML = '<a id="test" href=".target"></a>'
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toHaveSize(0)
+    })
+
+    it('should return empty array if no selector', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const testEl = fixtureEl.querySelector('div')
+
+      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toHaveSize(0)
+    })
+  })
+})
@@ -177,6 +177,43 @@ describe('Tab', () => {
      })
    })

+    it('should work with tab id being an int', done => {
+      fixtureEl.innerHTML = [
+        '<div class="card-header d-block d-inline-block">',
+        '  <ul class="nav nav-tabs card-header-tabs" id="page_tabs">',
+        '    <li class="nav-item">',
+        '      <a class="nav-link" draggable="false" data-toggle="tab" href="#tab1">',
+        '        Working Tab 1 (#tab1)',
+        '     </a>',
+        '    </li>',
+        '    <li class="nav-item">',
+        '      <a id="trigger2" class="nav-link" draggable="false" data-toggle="tab" href="#2">',
+        '        Tab with numeric ID should work (#2)',
+        '      </a>',
+        '    </li>',
+        '  </ul>',
+        '</div>',
+        '<div class="card-body">',
+        '  <div class="tab-content" id="page_content">',
+        '     <div class="tab-pane fade" id="tab1">',
+        '      Working Tab 1 (#tab1) Content Here',
+        '  </div>',
+        '  <div class="tab-pane fade" id="2">',
+        '      Working Tab 2 (#2) with numeric ID',
+        '  </div>',
+        '</div>'
+      ].join('')
+      const profileTriggerEl = fixtureEl.querySelector('#trigger2')
+      const tab = new Tab(profileTriggerEl)
+
+      profileTriggerEl.addEventListener('shown.bs.tab', () => {
+        expect(fixtureEl.querySelector(`#${CSS.escape('2')}`)).toHaveClass('active')
+        done()
+      })
+
+      tab.show()
+    })
+
    it('should not fire shown when show is prevented', () => {
      return new Promise((resolve, reject) => {
        fixtureEl.innerHTML = '<div class="nav"><div class="nav-link"></div></div>'
@@ -603,19 +640,19 @@ describe('Tab', () => {
        '</div>'
      ].join('')

-      const tabEl = fixtureEl.querySelector('#tab1')
+      const tabEl1 = fixtureEl.querySelector('#tab1')
      const tabEl2 = fixtureEl.querySelector('#tab2')
      const tabEl3 = fixtureEl.querySelector('#tab3')
      const tabEl4 = fixtureEl.querySelector('#tab4')
-      const tab = new Tab(tabEl)
+      const tab1 = new Tab(tabEl1)
      const tab2 = new Tab(tabEl2)
      const tab3 = new Tab(tabEl3)
      const tab4 = new Tab(tabEl4)
-      const spy1 = spyOn(tab, 'show').and.callThrough()
+      const spy1 = spyOn(tab1, 'show').and.callThrough()
      const spy2 = spyOn(tab2, 'show').and.callThrough()
      const spy3 = spyOn(tab3, 'show').and.callThrough()
      const spy4 = spyOn(tab4, 'show').and.callThrough()
-      const spyFocus1 = spyOn(tabEl, 'focus').and.callThrough()
+      const spyFocus1 = spyOn(tabEl1, 'focus').and.callThrough()
      const spyFocus2 = spyOn(tabEl2, 'focus').and.callThrough()
      const spyFocus3 = spyOn(tabEl3, 'focus').and.callThrough()
      const spyFocus4 = spyOn(tabEl4, 'focus').and.callThrough()
@@ -623,7 +660,7 @@ describe('Tab', () => {
      const keydown = createEvent('keydown')
      keydown.key = 'ArrowRight'

-      tabEl.dispatchEvent(keydown)
+      tabEl1.dispatchEvent(keydown)
      expect(spy1).not.toHaveBeenCalled()
      expect(spy2).not.toHaveBeenCalled()
      expect(spy3).not.toHaveBeenCalled()
@@ -644,19 +681,19 @@ describe('Tab', () => {
        '</div>'
      ].join('')

-      const tabEl = fixtureEl.querySelector('#tab1')
+      const tabEl1 = fixtureEl.querySelector('#tab1')
      const tabEl2 = fixtureEl.querySelector('#tab2')
      const tabEl3 = fixtureEl.querySelector('#tab3')
      const tabEl4 = fixtureEl.querySelector('#tab4')
-      const tab = new Tab(tabEl)
+      const tab1 = new Tab(tabEl1)
      const tab2 = new Tab(tabEl2)
      const tab3 = new Tab(tabEl3)
      const tab4 = new Tab(tabEl4)
-      const spy1 = spyOn(tab, 'show').and.callThrough()
+      const spy1 = spyOn(tab1, 'show').and.callThrough()
      const spy2 = spyOn(tab2, 'show').and.callThrough()
      const spy3 = spyOn(tab3, 'show').and.callThrough()
      const spy4 = spyOn(tab4, 'show').and.callThrough()
-      const spyFocus1 = spyOn(tabEl, 'focus').and.callThrough()
+      const spyFocus1 = spyOn(tabEl1, 'focus').and.callThrough()
      const spyFocus2 = spyOn(tabEl2, 'focus').and.callThrough()
      const spyFocus3 = spyOn(tabEl3, 'focus').and.callThrough()
      const spyFocus4 = spyOn(tabEl4, 'focus').and.callThrough()
@@ -128,7 +128,7 @@ describe('Config', () => {
      const obj = new DummyConfigClass()
      expect(() => {
        obj._typeCheckConfig(config)
-      }).toThrowError(TypeError, obj.constructor.NAME.toUpperCase() + ': Option "parent" provided type "number" but expected type "(string|element)".')
+      }).toThrowError(TypeError, `${obj.constructor.NAME.toUpperCase()}: Option "parent" provided type "number" but expected type "(string|element)".`)
    })

    it('should return null stringified when null is passed', () => {
@@ -22,119 +22,6 @@ describe('Util', () => {
    })
  })

-  describe('getSelectorFromElement', () => {
-    it('should get selector from data-bs-target', () => {
-      fixtureEl.innerHTML = [
-        '<div id="test" data-bs-target=".target"></div>',
-        '<div class="target"></div>'
-      ].join('')
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getSelectorFromElement(testEl)).toEqual('.target')
-    })
-
-    it('should get selector from href if no data-bs-target set', () => {
-      fixtureEl.innerHTML = [
-        '<a id="test" href=".target"></a>',
-        '<div class="target"></div>'
-      ].join('')
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getSelectorFromElement(testEl)).toEqual('.target')
-    })
-
-    it('should get selector from href if data-bs-target equal to #', () => {
-      fixtureEl.innerHTML = [
-        '<a id="test" data-bs-target="#" href=".target"></a>',
-        '<div class="target"></div>'
-      ].join('')
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getSelectorFromElement(testEl)).toEqual('.target')
-    })
-
-    it('should return null if a selector from a href is a url without an anchor', () => {
-      fixtureEl.innerHTML = [
-        '<a id="test" data-bs-target="#" href="foo/bar.html"></a>',
-        '<div class="target"></div>'
-      ].join('')
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getSelectorFromElement(testEl)).toBeNull()
-    })
-
-    it('should return the anchor if a selector from a href is a url', () => {
-      fixtureEl.innerHTML = [
-        '<a id="test" data-bs-target="#" href="foo/bar.html#target"></a>',
-        '<div id="target"></div>'
-      ].join('')
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getSelectorFromElement(testEl)).toEqual('#target')
-    })
-
-    it('should return null if selector not found', () => {
-      fixtureEl.innerHTML = '<a id="test" href=".target"></a>'
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getSelectorFromElement(testEl)).toBeNull()
-    })
-
-    it('should return null if no selector', () => {
-      fixtureEl.innerHTML = '<div></div>'
-
-      const testEl = fixtureEl.querySelector('div')
-
-      expect(Util.getSelectorFromElement(testEl)).toBeNull()
-    })
-  })
-
-  describe('getElementFromSelector', () => {
-    it('should get element from data-bs-target', () => {
-      fixtureEl.innerHTML = [
-        '<div id="test" data-bs-target=".target"></div>',
-        '<div class="target"></div>'
-      ].join('')
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target'))
-    })
-
-    it('should get element from href if no data-bs-target set', () => {
-      fixtureEl.innerHTML = [
-        '<a id="test" href=".target"></a>',
-        '<div class="target"></div>'
-      ].join('')
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target'))
-    })
-
-    it('should return null if element not found', () => {
-      fixtureEl.innerHTML = '<a id="test" href=".target"></a>'
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getElementFromSelector(testEl)).toBeNull()
-    })
-
-    it('should return null if no selector', () => {
-      fixtureEl.innerHTML = '<div></div>'
-
-      const testEl = fixtureEl.querySelector('div')
-
-      expect(Util.getElementFromSelector(testEl)).toBeNull()
-    })
-  })
-
  describe('getTransitionDurationFromElement', () => {
    it('should get transition from element', () => {
      fixtureEl.innerHTML = '<div style="transition: all 300ms ease-out;"></div>'
@@ -631,6 +518,25 @@ describe('Util', () => {
      Util.execute(spy)
      expect(spy).toHaveBeenCalled()
    })
+
+    it('should execute if arg is function & return the result', () => {
+      const functionFoo = (num1, num2 = 10) => num1 + num2
+      const resultFoo = Util.execute(functionFoo, [4, 5])
+      expect(resultFoo).toBe(9)
+
+      const resultFoo1 = Util.execute(functionFoo, [4])
+      expect(resultFoo1).toBe(14)
+
+      const functionBar = () => 'foo'
+      const resultBar = Util.execute(functionBar)
+      expect(resultBar).toBe('foo')
+    })
+
+    it('should not execute if arg is not function & return default argument', () => {
+      const foo = 'bar'
+      expect(Util.execute(foo)).toBe('bar')
+      expect(Util.execute(foo, [], 4)).toBe(4)
+    })
  })

  describe('executeAfterTransition', () => {
@@ -15,7 +15,7 @@
      </button>

      <p>For checkboxes and radio buttons, ensure that keyboard behavior is functioning correctly.</p>
-      <p>Navigate to the checkboxes with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>), and ensure that <kbd>SPACE</kbd> toggles the currently focused checkbox. Click on one of the checkboxes using the mouse, ensure that focus was correctly set on the actual checkbox, and that <kbd>SPACE</kbd> toggles the checkbox again.</p>
+      <p>Navigate to the checkboxes with the keyboard (generally, using <kbd>Tab</kbd> / <kbd><kbd>Shift</kbd> + <kbd>Tab</kbd></kbd>), and ensure that <kbd>Space</kbd> toggles the currently focused checkbox. Click on one of the checkboxes using the mouse, ensure that focus was correctly set on the actual checkbox, and that <kbd>Space</kbd> toggles the checkbox again.</p>

      <div class="btn-group" data-bs-toggle="buttons">
        <label class="btn btn-primary active">
@@ -29,7 +29,7 @@
        </label>
      </div>

-      <p>Navigate to the radio button group with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>). If no radio button was initially set to be selected, the first/last radio button should receive focus (depending on whether you navigated "forward" to the group with <kbd>TAB</kbd> or "backwards" using <kbd>SHIFT + TAB</kbd>). If a radio button was already selected, navigating with the keyboard should set focus to that particular radio button. Only one radio button in a group should receive focus at any given time.  Ensure that the selected radio button can be changed by using the <kbd>←</kbd> and <kbd>→</kbd> arrow keys. Click on one of the radio buttons with the mouse,  ensure that focus was correctly set on the actual radio button, and that <kbd>←</kbd> and <kbd>→</kbd> change the selected radio button again.</p>
+      <p>Navigate to the radio button group with the keyboard (generally, using <kbd>Tab</kbd> / <kbd><kbd>Shift</kbd> + <kbd>Tab</kbd></kbd>). If no radio button was initially set to be selected, the first/last radio button should receive focus (depending on whether you navigated "forward" to the group with <kbd>Tab</kbd> or "backwards" using <kbd><kbd>Shift</kbd> + <kbd>Tab</kbd></kbd>). If a radio button was already selected, navigating with the keyboard should set focus to that particular radio button. Only one radio button in a group should receive focus at any given time.  Ensure that the selected radio button can be changed by using the <kbd>←</kbd> and <kbd>→</kbd> arrow keys. Click on one of the radio buttons with the mouse,  ensure that focus was correctly set on the actual radio button, and that <kbd>←</kbd> and <kbd>→</kbd> change the selected radio button again.</p>

      <div class="btn-group" data-bs-toggle="buttons">
        <label class="btn btn-primary active">
@@ -55,7 +55,7 @@
      // Test to show that transition-duration can be changed with css
      carousel.addEventListener('slid.bs.carousel', event => {
        t1 = performance.now()
-        console.log('transition-duration took ' + (t1 - t0) + 'ms, slid at ' + event.timeStamp)
+        console.log(`transition-duration took ${t1 - t0}ms, slid at ${event.timeStamp}`)
      })
      carousel.addEventListener('slide.bs.carousel', () => {
        t0 = performance.now()
@@ -264,7 +264,7 @@

      slowModal.addEventListener('shown.bs.modal', () => {
        t1 = performance.now()
-        console.log('transition-duration took ' + (t1 - t0) + 'ms.')
+        console.log(`transition-duration took ${t1 - t0}ms.`)
      })

      slowModal.addEventListener('show.bs.modal', () => {
@@ -5,16 +5,17 @@
    <!-- pulled from package.json -->
    <version>5</version>
    <title>Bootstrap CSS</title>
-    <authors>The Bootstrap Authors, Twitter Inc.</authors>
+    <authors>The Bootstrap Authors</authors>
    <owners>bootstrap</owners>
    <description>The most popular front-end framework for developing responsive, mobile first projects on the web.</description>
    <releaseNotes>https://blog.getbootstrap.com/</releaseNotes>
    <summary>Bootstrap framework in CSS. Includes JavaScript.</summary>
    <language>en-us</language>
    <projectUrl>https://getbootstrap.com/</projectUrl>
+    <repository type="git" url="https://github.com/twbs/bootstrap.git" branch="main" />
    <icon>bootstrap.png</icon>
    <license type="expression">MIT</license>
-    <copyright>Copyright 2017-2022</copyright>
+    <copyright>Copyright 2011-2022</copyright>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <tags>css mobile-first responsive front-end framework web</tags>
    <contentFiles>
@@ -5,16 +5,17 @@
    <!-- pulled from package.json -->
    <version>5</version>
    <title>Bootstrap Sass</title>
-    <authors>The Bootstrap Authors, Twitter Inc.</authors>
+    <authors>The Bootstrap Authors</authors>
    <owners>bootstrap</owners>
    <description>The most popular front-end framework for developing responsive, mobile first projects on the web.</description>
    <releaseNotes>https://blog.getbootstrap.com/</releaseNotes>
    <summary>Bootstrap framework in Sass. Includes JavaScript</summary>
    <language>en-us</language>
    <projectUrl>https://getbootstrap.com/</projectUrl>
+    <repository type="git" url="https://github.com/twbs/bootstrap.git" branch="main" />
    <icon>bootstrap.png</icon>
    <license type="expression">MIT</license>
-    <copyright>Copyright 2017-2022</copyright>
+    <copyright>Copyright 2011-2022</copyright>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <tags>css sass mobile-first responsive front-end framework web</tags>
    <contentFiles>
@@ -84,7 +84,7 @@
    "docs-serve": "hugo server --port 9001 --disableFastRender",
    "docs-serve-only": "npx sirv-cli _site --port 9001",
    "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
-    "update-deps": "ncu -u -x globby,karma-browserstack-launcher,karma-rollup-preprocessor && echo Manually update site/assets/js/vendor",
+    "update-deps": "ncu -u -x globby,karma-browserstack-launcher,karma-rollup-preprocessor,terser && echo Manually update site/assets/js/vendor",
    "release": "npm-run-all dist release-sri docs-build release-zip*",
    "release-sri": "node build/generate-sri.js",
    "release-version": "node build/change-version.js",
@@ -105,29 +105,29 @@
  },
  "devDependencies": {
    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.19.3",
-    "@babel/preset-env": "^7.19.3",
+    "@babel/core": "^7.20.5",
+    "@babel/preset-env": "^7.20.2",
    "@popperjs/core": "^2.11.6",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^14.1.0",
-    "@rollup/plugin-replace": "^4.0.0",
-    "autoprefixer": "^10.4.12",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^23.0.4",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.1",
+    "autoprefixer": "^10.4.13",
    "bundlewatch": "^0.3.3",
    "clean-css-cli": "^5.6.1",
    "cross-env": "^7.0.3",
-    "eslint": "^8.24.0",
-    "eslint-config-xo": "^0.42.0",
+    "eslint": "^8.29.0",
+    "eslint-config-xo": "^0.43.1",
    "eslint-plugin-html": "^7.1.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-markdown": "^3.0.0",
-    "eslint-plugin-unicorn": "^44.0.0",
-    "find-unused-sass-variables": "^4.0.4",
+    "eslint-plugin-unicorn": "^45.0.2",
+    "find-unused-sass-variables": "^4.0.5",
    "globby": "^11.1.0",
    "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.92.2",
+    "hugo-bin": "^0.96.0",
    "ip": "^2.0.0",
-    "jquery": "^3.6.1",
+    "jquery": "^3.6.2",
    "karma": "^6.4.1",
    "karma-browserstack-launcher": "1.4.0",
    "karma-chrome-launcher": "^3.1.1",
@@ -137,24 +137,25 @@
    "karma-jasmine": "^5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "karma-rollup-preprocessor": "7.0.7",
-    "lockfile-lint": "^4.9.5",
+    "lockfile-lint": "^4.9.6",
    "nodemon": "^2.0.20",
    "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.17",
-    "postcss-cli": "^10.0.0",
-    "rollup": "^2.79.1",
-    "rollup-plugin-istanbul": "^3.0.0",
+    "postcss": "^8.4.20",
+    "postcss-cli": "^10.1.0",
+    "rollup": "^3.7.4",
+    "rollup-plugin-istanbul": "^4.0.0",
    "rtlcss": "^4.0.0",
-    "sass": "^1.55.0",
+    "sass": "^1.56.2",
    "shelljs": "^0.8.5",
-    "stylelint": "^14.13.0",
-    "stylelint-config-twbs-bootstrap": "^6.0.0",
-    "terser": "^5.15.0",
+    "stylelint": "^14.16.0",
+    "stylelint-config-twbs-bootstrap": "^7.0.0",
+    "terser": "5.16.0",
    "vnu-jar": "22.9.29"
  },
  "files": [
    "dist/{css,js}/*.{css,js,map}",
    "js/{src,dist}/**/*.{js,map}",
+    "js/index.{esm,umd}.js",
    "scss/**/*.scss"
  ],
  "hugo-bin": {
@@ -147,3 +147,12 @@
    }
  }
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .accordion-button::after {
+      --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+      --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+    }
+  }
+}
@@ -12,6 +12,7 @@
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};
+  --#{$prefix}alert-link-color: inherit;
  // scss-docs-end alert-css-vars

  position: relative;
@@ -32,6 +33,7 @@
 // Provide class for links that match alerts
 .alert-link {
  font-weight: $alert-link-font-weight;
+  color: var(--#{$prefix}alert-link-color);
 }


@@ -54,18 +56,13 @@


 // scss-docs-start alert-modifiers
-// Generate contextual modifier classes for colorizing the alert.
-
-@each $state, $value in $theme-colors {
-  $alert-background: shift-color($value, $alert-bg-scale);
-  $alert-border: shift-color($value, $alert-border-scale);
-  $alert-color: shift-color($value, $alert-color-scale);
-
-  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
-    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
-  }
+// Generate contextual modifier classes for colorizing the alert
+@each $state in map-keys($theme-colors) {
  .alert-#{$state} {
-    @include alert-variant($alert-background, $alert-border, $alert-color);
+    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text);
+    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text);
  }
 }
 // scss-docs-end alert-modifiers
@@ -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: -$btn-border-width;
+    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: -$btn-border-width;
+    margin-top: calc($btn-border-width * -1); // stylelint-disable-line function-disallowed-list
  }

  // Reset rounded corners
@@ -7,6 +7,8 @@
  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
+  --#{$prefix}card-title-color: #{$card-title-color};
+  --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
@@ -73,11 +75,13 @@

 .card-title {
  margin-bottom: var(--#{$prefix}card-title-spacer-y);
+  color: var(--#{$prefix}card-title-color);
 }

 .card-subtitle {
  margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
  margin-bottom: 0;
+  color: var(--#{$prefix}card-subtitle-color);
 }

 .card-text:last-child {
@@ -210,7 +210,7 @@

 // Dark mode carousel

-.carousel-dark {
+%carousel-dark {
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    filter: $carousel-dark-control-icon-filter;
@@ -224,3 +224,15 @@
    color: $carousel-dark-caption-color;
  }
 }
+
+.carousel-dark {
+  @extend %carousel-dark;
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .carousel {
+      @extend %carousel-dark;
+    }
+  }
+}
@@ -4,37 +4,58 @@
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile

 .btn-close {
+  --#{$prefix}btn-close-color: #{$btn-close-color};
+  --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
+  --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
+  --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
+  --#{$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};
+
  box-sizing: content-box;
  width: $btn-close-width;
  height: $btn-close-height;
  padding: $btn-close-padding-y $btn-close-padding-x;
-  color: $btn-close-color;
-  background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
+  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
  border: 0; // for button elements
  @include border-radius();
-  opacity: $btn-close-opacity;
+  opacity: var(--#{$prefix}btn-close-opacity);

  // Override <a>'s hover style
  &:hover {
-    color: $btn-close-color;
+    color: var(--#{$prefix}btn-close-color);
    text-decoration: none;
-    opacity: $btn-close-hover-opacity;
+    opacity: var(--#{$prefix}btn-close-hover-opacity);
  }

  &:focus {
    outline: 0;
-    box-shadow: $btn-close-focus-shadow;
-    opacity: $btn-close-focus-opacity;
+    box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+    opacity: var(--#{$prefix}btn-close-focus-opacity);
  }

  &:disabled,
  &.disabled {
    pointer-events: none;
    user-select: none;
-    opacity: $btn-close-disabled-opacity;
+    opacity: var(--#{$prefix}btn-close-disabled-opacity);
  }
 }

-.btn-close-white {
-  filter: $btn-close-white-filter;
+%btn-close-white {
+  filter: var(--#{$prefix}btn-close-white-filter);
+}
+
+.btn-close-white {
+  @extend %btn-close-white;
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .btn-close {
+      @extend %btn-close-white;
+    }
+  }
 }
@@ -184,6 +184,7 @@
  white-space: nowrap; // prevent links from randomly breaking onto new lines
  background-color: transparent; // For `<button>`s
  border: 0; // For `<button>`s
+  @include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));

  &:hover,
  &:focus {
@@ -180,13 +180,25 @@
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.

-@each $state, $value in $theme-colors {
-  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
-  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
-  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
-    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
-  }
+@each $state in map-keys($theme-colors) {
+  .list-group-item-#{$state} {
+    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text);
+    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);

-  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
+    &.list-group-item-action {
+      &:hover,
+      &:focus {
+        --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
+        --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
+      }
+
+      &:active {
+        --#{$prefix}list-group-active-color: var(--#{$prefix}emphasis-color);
+        --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text);
+        --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text);
+      }
+    }
+  }
 }
 // scss-docs-end list-group-modifiers
@@ -6,6 +6,39 @@
 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
 // scss-docs-end theme-colors-rgb

+$theme-colors-text: (
+  "primary": $primary-text,
+  "secondary": $secondary-text,
+  "success": $success-text,
+  "info": $info-text,
+  "warning": $warning-text,
+  "danger": $danger-text,
+  "light": $light-text,
+  "dark": $dark-text,
+) !default;
+
+$theme-colors-bg-subtle: (
+  "primary": $primary-bg-subtle,
+  "secondary": $secondary-bg-subtle,
+  "success": $success-bg-subtle,
+  "info": $info-bg-subtle,
+  "warning": $warning-bg-subtle,
+  "danger": $danger-bg-subtle,
+  "light": $light-bg-subtle,
+  "dark": $dark-bg-subtle,
+) !default;
+
+$theme-colors-border-subtle: (
+  "primary": $primary-border-subtle,
+  "secondary": $secondary-border-subtle,
+  "success": $success-border-subtle,
+  "info": $info-border-subtle,
+  "warning": $warning-border-subtle,
+  "danger": $danger-border-subtle,
+  "light": $light-border-subtle,
+  "dark": $dark-border-subtle,
+) !default;
+
 // Utilities maps
 //
 // Extends the default `$theme-colors` maps to help create our utilities.
@@ -25,6 +58,17 @@ $utilities-text: map-merge(
  )
 ) !default;
 $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+
+$utilities-text-emphasis-colors: (
+  "primary-emphasis": var(--#{$prefix}primary-text),
+  "secondary-emphasis": var(--#{$prefix}secondary-text),
+  "success-emphasis": var(--#{$prefix}success-text),
+  "info-emphasis": var(--#{$prefix}info-text),
+  "warning-emphasis": var(--#{$prefix}warning-text),
+  "danger-emphasis": var(--#{$prefix}danger-text),
+  "light-emphasis": var(--#{$prefix}light-text),
+  "dark-emphasis": var(--#{$prefix}dark-text)
+) !default;
 // scss-docs-end utilities-text-colors

 // scss-docs-start utilities-bg-colors
@@ -37,6 +81,18 @@ $utilities-bg: map-merge(
  )
 ) !default;
 $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+
+$utilities-bg-subtle: (
+  "primary-subtle": var(--#{$prefix}primary-bg-subtle),
+  "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
+  "success-subtle": var(--#{$prefix}success-bg-subtle),
+  "info-subtle": var(--#{$prefix}info-bg-subtle),
+  "warning-subtle": var(--#{$prefix}warning-bg-subtle),
+  "danger-subtle": var(--#{$prefix}danger-bg-subtle),
+  "light-subtle": var(--#{$prefix}light-bg-subtle),
+  "dark-subtle": var(--#{$prefix}dark-bg-subtle)
+) !default;
+// $utilities-bg-subtle-colors: map-loop($utilities-bg-subtle, rgba-css-var, "$key", "bg") !default;
 // scss-docs-end utilities-bg-colors

 // scss-docs-start utilities-border-colors
@@ -47,6 +103,17 @@ $utilities-border: map-merge(
  )
 ) !default;
 $utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
+
+$utilities-border-subtle: (
+  "primary-subtle": var(--#{$prefix}primary-border-subtle),
+  "secondary-subtle": var(--#{$prefix}secondary-border-subtle),
+  "success-subtle": var(--#{$prefix}success-border-subtle),
+  "info-subtle": var(--#{$prefix}info-border-subtle),
+  "warning-subtle": var(--#{$prefix}warning-border-subtle),
+  "danger-subtle": var(--#{$prefix}danger-border-subtle),
+  "light-subtle": var(--#{$prefix}light-border-subtle),
+  "dark-subtle": var(--#{$prefix}dark-border-subtle)
+) !default;
 // scss-docs-end utilities-border-colors

 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
@@ -10,6 +10,7 @@

 // Helpers
@import "mixins/breakpoints";
+@import "mixins/color-mode";
@import "mixins/color-scheme";
@import "mixins/image";
@import "mixins/resize";
@@ -21,13 +22,11 @@
@import "mixins/utilities";

 // Components
-@import "mixins/alert";
@import "mixins/backdrop";
@import "mixins/buttons";
@import "mixins/caret";
@import "mixins/pagination";
@import "mixins/lists";
-@import "mixins/list-group";
@import "mixins/forms";
@import "mixins/table-variants";

@@ -276,3 +276,11 @@
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
  // scss-docs-end navbar-dark-css-vars
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .navbar {
+      --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+    }
+  }
+}
@@ -12,6 +12,8 @@
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
+  --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
+  --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
  // scss-docs-end offcanvas-css-vars
 }

@@ -42,7 +44,7 @@
      background-clip: padding-box;
      outline: 0;
      @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
-      @include transition(transform $offcanvas-transition-duration ease-in-out);
+      @include transition(var(--#{$prefix}offcanvas-transition));

      &.offcanvas-start {
        top: 0;
@@ -134,7 +136,7 @@

 .offcanvas-title {
  margin-bottom: 0;
-  line-height: $offcanvas-title-line-height;
+  line-height: var(--#{$prefix}offcanvas-title-line-height);
 }

 .offcanvas-body {
@@ -75,7 +75,7 @@
    margin-left: $pagination-margin-start;
  }

-  @if $pagination-margin-start == ($pagination-border-width * -1) {
+  @if $pagination-margin-start == calc($pagination-border-width * -1) {
    &:first-child {
      .page-link {
        @include border-start-radius(var(--#{$prefix}pagination-border-radius));
@@ -8,7 +8,8 @@
 }
 // scss-docs-end progress-keyframes

-.progress {
+.progress,
+.progress-stacked {
  // scss-docs-start progress-css-vars
  --#{$prefix}progress-height: #{$progress-height};
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
@@ -46,6 +47,14 @@
  background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
 }

+.progress-stacked > .progress {
+  overflow: visible;
+}
+
+.progress-stacked > .progress > .progress-bar {
+  width: 100%;
+}
+
@if $enable-transitions {
  .progress-bar-animated {
    animation: $progress-bar-animation-timing progress-bar-stripes;
@@ -87,7 +87,7 @@ hr {
  font-style: $headings-font-style;
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
-  color: $headings-color;
+  color: var(--#{$prefix}heading-color, inherit);
 }

 h1 {
@@ -241,11 +241,11 @@ sup { top: -.5em; }
 // Links

 a {
-  color: var(--#{$prefix}link-color);
+  color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
  text-decoration: $link-decoration;

  &:hover {
-    color: var(--#{$prefix}link-hover-color);
+    --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
    text-decoration: $link-hover-decoration;
  }
 }
@@ -1,4 +1,5 @@
-:root {
+:root,
+[data-bs-theme="light"] {
  // Note: Custom variable values only support SassScript inside `#{}`.

  // Colors
@@ -21,6 +22,18 @@
    --#{$prefix}#{$color}-rgb: #{$value};
  }

+  @each $color, $value in $theme-colors-text {
+    --#{$prefix}#{$color}-text: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-bg-subtle {
+    --#{$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-border-subtle {
+    --#{$prefix}#{$color}-border-subtle: #{$value};
+  }
+
  --#{$prefix}white-rgb: #{to-rgb($white)};
  --#{$prefix}black-rgb: #{to-rgb($black)};
  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
@@ -39,17 +52,50 @@
  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
-  --#{$prefix}body-font-family: #{$font-family-base};
+  --#{$prefix}body-font-family: #{inspect($font-family-base)};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
+
+  --#{$prefix}emphasis-color: #{$body-emphasis-color};
+  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
+
+  --#{$prefix}secondary-color: #{$body-secondary-color};
+  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+  --#{$prefix}secondary-bg: #{$body-secondary-bg};
+  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
+
+  --#{$prefix}tertiary-color: #{$body-tertiary-color};
+  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
  // scss-docs-end root-body-variables

+  @if $headings-color != null {
+    --#{$prefix}heading-color: #{$headings-color};
+  }
+
+  --#{$prefix}link-color: #{$link-color};
+  --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+  --#{$prefix}link-decoration: #{$link-decoration};
+
+  --#{$prefix}link-hover-color: #{$link-hover-color};
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+
+  @if $link-hover-decoration != null {
+    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
+  }
+
+  --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}highlight-bg: #{$mark-bg};
+
  // scss-docs-start root-border-var
  --#{$prefix}border-width: #{$border-width};
  --#{$prefix}border-style: #{$border-style};
@@ -64,10 +110,86 @@
  --#{$prefix}border-radius-pill: #{$border-radius-pill};
  // scss-docs-end root-border-var

-  --#{$prefix}link-color: #{$link-color};
-  --#{$prefix}link-hover-color: #{$link-hover-color};
+  --#{$prefix}box-shadow: #{$box-shadow};
+  --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
+  --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
+  --#{$prefix}box-shadow-inset: #{$box-shadow-inset};

-  --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}emphasis-color: #{$emphasis-color};
+
+  // scss-docs-start form-control-vars
+  --#{$prefix}form-control-bg: var(--#{$prefix}body-bg);
+  --#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg);
+  // scss-docs-end form-control-vars

  --#{$prefix}highlight-bg: #{$mark-bg};
+
+  @each $name, $value in $grid-breakpoints {
+    --#{$prefix}breakpoint-#{$name}: #{$value};
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    // scss-docs-start root-dark-mode-vars
+    --#{$prefix}body-color: #{$body-color-dark};
+    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+    --#{$prefix}body-bg: #{$body-bg-dark};
+    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+    --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+    --#{$prefix}emphasis-color: #{$emphasis-color-dark};
+
+    --#{$prefix}primary-text: #{$primary-text-dark};
+    --#{$prefix}secondary-text: #{$secondary-text-dark};
+    --#{$prefix}success-text: #{$success-text-dark};
+    --#{$prefix}info-text: #{$info-text-dark};
+    --#{$prefix}warning-text: #{$warning-text-dark};
+    --#{$prefix}danger-text: #{$danger-text-dark};
+    --#{$prefix}light-text: #{$light-text-dark};
+    --#{$prefix}dark-text: #{$dark-text-dark};
+
+    --#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark};
+    --#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark};
+    --#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark};
+    --#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark};
+    --#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark};
+    --#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark};
+    --#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark};
+    --#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark};
+
+    --#{$prefix}primary-border-subtle: #{$primary-border-subtle-dark};
+    --#{$prefix}secondary-border-subtle: #{$secondary-border-subtle-dark};
+    --#{$prefix}success-border-subtle: #{$success-border-subtle-dark};
+    --#{$prefix}info-border-subtle: #{$info-border-subtle-dark};
+    --#{$prefix}warning-border-subtle: #{$warning-border-subtle-dark};
+    --#{$prefix}danger-border-subtle: #{$danger-border-subtle-dark};
+    --#{$prefix}light-border-subtle: #{$light-border-subtle-dark};
+    --#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark};
+
+    --#{$prefix}heading-color: #{$headings-color-dark};
+
+    --#{$prefix}link-color: #{$link-color-dark};
+    --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+
+    --#{$prefix}code-color: #{$code-color-dark};
+
+    --#{$prefix}border-color: #{$border-color-dark};
+    --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+    // scss-docs-end root-dark-mode-vars
+  }
 }
@@ -42,7 +42,7 @@
 }

 .table-group-divider {
-  border-top: ($table-border-width * 2) solid $table-group-separator-color;
+  border-top: calc($table-border-width * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
 }

 //
@@ -22,6 +22,20 @@ $utilities: map-merge(
      )
    ),
    // scss-docs-end utils-float
+    // Object Fit utilities
+    // scss-docs-start utils-object-fit
+    "object-fit": (
+      responsive: true,
+      property: object-fit,
+      values: (
+        contain: contain,
+        cover: cover,
+        fill: fill,
+        scale: scale-down,
+        none: none,
+      )
+    ),
+    // scss-docs-end utils-object-fit
    // Opacity utilities
    // scss-docs-start utils-opacity
    "opacity": (
@@ -40,6 +54,14 @@ $utilities: map-merge(
      property: overflow,
      values: auto hidden visible scroll,
    ),
+    "overflow-x": (
+      property: overflow-x,
+      values: auto hidden visible scroll,
+    ),
+    "overflow-y": (
+      property: overflow-y,
+      values: auto hidden visible scroll,
+    ),
    // scss-docs-end utils-overflow
    // scss-docs-start utils-display
    "display": (
@@ -141,6 +163,11 @@ $utilities: map-merge(
      ),
      values: $utilities-border-colors
    ),
+    "subtle-border-color": (
+      property: border-color,
+      class: border,
+      values: $utilities-border-subtle
+    ),
    "border-width": (
      css-var: true,
      css-variable-name: border-width,
@@ -450,6 +477,18 @@ $utilities: map-merge(
      class: gap,
      values: $spacers
    ),
+    "row-gap": (
+      responsive: true,
+      property: row-gap,
+      class: row-gap,
+      values: $spacers
+    ),
+    "column-gap": (
+      responsive: true,
+      property: column-gap,
+      class: column-gap,
+      values: $spacers
+    ),
    // scss-docs-end utils-spacing
    // Text
    // scss-docs-start utils-text
@@ -473,11 +512,12 @@ $utilities: map-merge(
      property: font-weight,
      class: fw,
      values: (
-        light: $font-weight-light,
        lighter: $font-weight-lighter,
+        light: $font-weight-light,
        normal: $font-weight-normal,
-        bold: $font-weight-bold,
+        medium: $font-weight-medium,
        semibold: $font-weight-semibold,
+        bold: $font-weight-bold,
        bolder: $font-weight-bolder
      )
    ),
@@ -535,9 +575,12 @@ $utilities: map-merge(
      values: map-merge(
        $utilities-text-colors,
        (
-          "muted": $text-muted,
+          "muted": $text-muted, // deprecated
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
+          "body-secondary": var(--#{$prefix}secondary-color),
+          "body-tertiary": var(--#{$prefix}tertiary-color),
+          "body-emphasis": var(--#{$prefix}emphasis-color),
          "reset": inherit,
        )
      )
@@ -552,6 +595,11 @@ $utilities: map-merge(
        100: 1
      )
    ),
+    "text-color": (
+      property: color,
+      class: text,
+      values: $utilities-text-emphasis-colors
+    ),
    // scss-docs-end utils-color
    // scss-docs-start utils-bg-color
    "background-color": (
@@ -563,7 +611,10 @@ $utilities: map-merge(
      values: map-merge(
        $utilities-bg-colors,
        (
-          "transparent": transparent
+          "transparent": transparent,
+          "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
+          "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
+          "body-emphasis": rgba(var(--#{$prefix}emphasis-bg-rgb), var(--#{$prefix}bg-opacity)),
        )
      )
    ),
@@ -578,6 +629,11 @@ $utilities: map-merge(
        100: 1
      )
    ),
+    "subtle-background-color": (
+      property: background-color,
+      class: bg,
+      values: $utilities-bg-subtle
+    ),
    // scss-docs-end utils-bg-color
    "gradient": (
      property: background-image,
@@ -614,22 +670,62 @@ $utilities: map-merge(
    "rounded-top": (
      property: border-top-left-radius border-top-right-radius,
      class: rounded-top,
-      values: (null: var(--#{$prefix}border-radius))
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-2xl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
    ),
    "rounded-end": (
      property: border-top-right-radius border-bottom-right-radius,
      class: rounded-end,
-      values: (null: var(--#{$prefix}border-radius))
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-2xl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
    ),
    "rounded-bottom": (
      property: border-bottom-right-radius border-bottom-left-radius,
      class: rounded-bottom,
-      values: (null: var(--#{$prefix}border-radius))
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-2xl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
    ),
    "rounded-start": (
      property: border-bottom-left-radius border-top-left-radius,
      class: rounded-start,
-      values: (null: var(--#{$prefix}border-radius))
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-2xl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
    ),
    // scss-docs-end utils-border-radius
    // scss-docs-start utils-visibility
@@ -640,8 +736,13 @@ $utilities: map-merge(
        visible: visible,
        invisible: hidden,
      )
-    )
+    ),
    // scss-docs-end utils-visibility
+    "z-index": (
+      property: z-index,
+      class: z,
+      values: $zindex-levels,
+    )
  ),
  $utilities
 );
@@ -0,0 +1,70 @@
+// Dark color mode variables
+//
+// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+
+//
+// Global colors
+//
+
+// scss-docs-start sass-dark-mode-vars
+$primary-text-dark:                 $blue-300 !default;
+$secondary-text-dark:               $gray-300 !default;
+$success-text-dark:                 $green-300 !default;
+$info-text-dark:                    $cyan-300 !default;
+$warning-text-dark:                 $yellow-300 !default;
+$danger-text-dark:                  $red-300 !default;
+$light-text-dark:                   $gray-100 !default;
+$dark-text-dark:                    $gray-300 !default;
+
+$primary-bg-subtle-dark:            $blue-900 !default;
+$secondary-bg-subtle-dark:          $gray-900 !default;
+$success-bg-subtle-dark:            $green-900 !default;
+$info-bg-subtle-dark:               $cyan-900 !default;
+$warning-bg-subtle-dark:            $yellow-900 !default;
+$danger-bg-subtle-dark:             $red-900 !default;
+$light-bg-subtle-dark:              $gray-800 !default;
+$dark-bg-subtle-dark:               mix($gray-800, $black) !default;
+
+$primary-border-subtle-dark:        $blue-700 !default;
+$secondary-border-subtle-dark:      $gray-700 !default;
+$success-border-subtle-dark:        $green-700 !default;
+$info-border-subtle-dark:           $cyan-800 !default;
+$warning-border-subtle-dark:        $yellow-800 !default;
+$danger-border-subtle-dark:         $red-700 !default;
+$light-border-subtle-dark:          $gray-700 !default;
+$dark-border-subtle-dark:           $gray-800 !default;
+
+$body-color-dark:                   $gray-500 !default;
+$body-bg-dark:                      $gray-900 !default;
+$body-emphasis-color-dark:          $gray-100 !default;
+$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
+$body-secondary-bg-dark:            $gray-800 !default;
+$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
+$body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
+$emphasis-color-dark:               $white !default;
+$border-color-dark:                 $gray-700 !default;
+$border-color-translucent-dark:     rgba($white, .15) !default;
+$headings-color-dark:               #fff !default;
+$link-color-dark:                   $blue-300 !default;
+$link-hover-color-dark:             $blue-200 !default;
+$code-color-dark:                   $pink-300 !default;
+
+
+//
+// Forms
+//
+
+$form-select-indicator-color-dark:  $body-color-dark !default;
+$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
+
+$form-switch-color-dark:            rgba($white, .25) !default;
+$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
+
+
+//
+// Accordion
+//
+
+$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-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='#{$primary-text-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
@@ -321,6 +321,33 @@ $theme-colors: (
 ) !default;
 // scss-docs-end theme-colors-map

+$primary-text:            $blue-600 !default;
+$secondary-text:          $gray-600 !default;
+$success-text:            $green-600 !default;
+$info-text:               $cyan-700 !default;
+$warning-text:            $yellow-700 !default;
+$danger-text:             $red-600 !default;
+$light-text:              $gray-600 !default;
+$dark-text:               $gray-700 !default;
+
+$primary-bg-subtle:       $blue-100 !default;
+$secondary-bg-subtle:     $gray-100 !default;
+$success-bg-subtle:       $green-100 !default;
+$info-bg-subtle:          $cyan-100 !default;
+$warning-bg-subtle:       $yellow-100 !default;
+$danger-bg-subtle:        $red-100 !default;
+$light-bg-subtle:         mix($gray-100, $white) !default;
+$dark-bg-subtle:          $gray-400 !default;
+
+$primary-border-subtle:   $blue-200 !default;
+$secondary-border-subtle: $gray-200 !default;
+$success-border-subtle:   $green-200 !default;
+$info-border-subtle:      $cyan-200 !default;
+$warning-border-subtle:   $yellow-200 !default;
+$danger-border-subtle:    $red-200 !default;
+$light-border-subtle:     $gray-200 !default;
+$dark-border-subtle:      $gray-500 !default;
+
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (
  ("<", "%3c"),
@@ -351,6 +378,9 @@ $enable-negative-margins:     false !default;
 $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;

+$enable-dark-mode:            true !default;
+$color-mode-type:             data !default;
+
 // Prefix for :root CSS variables

 $variable-prefix:             bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
@@ -398,9 +428,19 @@ $position-values: (
 //
 // Settings for the `<body>` element.

-$body-bg:                   $white !default;
-$body-color:                $gray-900 !default;
 $body-text-align:           null !default;
+$body-color:                $gray-900 !default;
+$body-bg:                   $white !default;
+
+$body-emphasis-color:       $black !default;
+
+$body-secondary-color:      rgba($body-color, .75) !default;
+$body-secondary-bg:         $gray-200 !default;
+
+$body-tertiary-color:       rgba($body-color, .5) !default;
+$body-tertiary-bg:          $gray-100 !default;
+
+$emphasis-color:            $black !default;

 // Links
 //
@@ -485,7 +525,6 @@ $border-widths: (
  4: 4px,
  5: 5px
 ) !default;
-
 $border-style:                solid !default;
 $border-color:                $gray-300 !default;
 $border-color-translucent:    rgba($black, .175) !default;
@@ -501,10 +540,10 @@ $border-radius-pill:          50rem !default;
 // scss-docs-end border-radius-variables

 // scss-docs-start box-shadow-variables
-$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
-$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
-$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
-$box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
+$box-shadow:                  0 .5rem 1rem rgba(var(--#{$prefix}body-color-rgb), .15) !default;
+$box-shadow-sm:               0 .125rem .25rem rgba(var(--#{$prefix}body-color-rgb), .075) !default;
+$box-shadow-lg:               0 1rem 3rem rgba(var(--#{$prefix}body-color-rgb), .175) !default;
+$box-shadow-inset:            inset 0 1px 2px rgba(var(--#{$prefix}body-color-rgb), .075) !default;
 // scss-docs-end box-shadow-variables

 $component-active-color:      $white !default;
@@ -556,6 +595,7 @@ $font-size-lg:                $font-size-base * 1.25 !default;
 $font-weight-lighter:         lighter !default;
 $font-weight-light:           300 !default;
 $font-weight-normal:          400 !default;
+$font-weight-medium:          500 !default;
 $font-weight-semibold:        600 !default;
 $font-weight-bold:            700 !default;
 $font-weight-bolder:          bolder !default;
@@ -618,7 +658,7 @@ $small-font-size:             .875em !default;

 $sub-sup-font-size:           .75em !default;

-$text-muted:                  $gray-600 !default;
+$text-muted:                  var(--#{$prefix}secondary-color) !default;

 $initialism-font-size:        $small-font-size !default;

@@ -636,7 +676,7 @@ $hr-height:                   null !default; // Deprecated in v5.2.0
 // fusv-enable

 $hr-border-color:             null !default; // Allows for inherited colors
-$hr-border-width:             $border-width !default;
+$hr-border-width:             var(--#{$prefix}border-width) !default;
 $hr-opacity:                  .25 !default;

 $legend-margin-bottom:        .5rem !default;
@@ -683,7 +723,7 @@ $table-hover-bg-factor:       .075 !default;
 $table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;

 $table-border-factor:         .1 !default;
-$table-border-width:          $border-width !default;
+$table-border-width:          var(--#{$prefix}border-width) !default;
 $table-border-color:          var(--#{$prefix}border-color) !default;

 $table-striped-order:         odd !default;
@@ -735,7 +775,7 @@ $input-btn-padding-y-lg:      .5rem !default;
 $input-btn-padding-x-lg:      1rem !default;
 $input-btn-font-size-lg:      $font-size-lg !default;

-$input-btn-border-width:      $border-width !default;
+$input-btn-border-width:      var(--#{$prefix}border-width) !default;
 // scss-docs-end input-btn-variables


@@ -824,13 +864,13 @@ $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
 $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
 $input-font-size-lg:                    $input-btn-font-size-lg !default;

-$input-bg:                              $body-bg !default;
+$input-bg:                              var(--#{$prefix}form-control-bg) !default;
 $input-disabled-color:                  null !default;
-$input-disabled-bg:                     $gray-200 !default;
+$input-disabled-bg:                     var(--#{$prefix}form-control-disabled-bg) !default;
 $input-disabled-border-color:           null !default;

-$input-color:                           $body-color !default;
-$input-border-color:                    $gray-400 !default;
+$input-color:                           var(--#{$prefix}body-color) !default;
+$input-border-color:                    var(--#{$prefix}border-color) !default; //$gray-400
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      $box-shadow-inset !default;

@@ -844,10 +884,10 @@ $input-focus-color:                     $input-color !default;
 $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;

-$input-placeholder-color:               $gray-600 !default;
-$input-plaintext-color:                 $body-color !default;
+$input-placeholder-color:               var(--#{$prefix}secondary-color) !default;
+$input-plaintext-color:                 var(--#{$prefix}body-color) !default;

-$input-height-border:                   $input-border-width * 2 !default;
+$input-height-border:                   calc($input-border-width * 2) !default; // stylelint-disable-line function-disallowed-list

 $input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
 $input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
@@ -874,7 +914,7 @@ $form-check-transition:                   null !default;
 $form-check-input-active-filter:          brightness(90%) !default;

 $form-check-input-bg:                     $input-bg !default;
-$form-check-input-border:                 1px solid rgba($black, .25) !default;
+$form-check-input-border:                 var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default;
 $form-check-input-border-radius:          .25em !default;
 $form-check-radio-border-radius:          50% !default;
 $form-check-input-focus-border:           $input-focus-border-color !default;
@@ -919,7 +959,7 @@ $input-group-addon-padding-y:           $input-padding-y !default;
 $input-group-addon-padding-x:           $input-padding-x !default;
 $input-group-addon-font-weight:         $input-font-weight !default;
 $input-group-addon-color:               $input-color !default;
-$input-group-addon-bg:                  $gray-200 !default;
+$input-group-addon-bg:                  var(--#{$prefix}tertiary-bg) !default;
 $input-group-addon-border-color:        $input-border-color !default;
 // scss-docs-end input-group-variables

@@ -934,7 +974,7 @@ $form-select-line-height:           $input-line-height !default;
 $form-select-color:                 $input-color !default;
 $form-select-bg:                    $input-bg !default;
 $form-select-disabled-color:        null !default;
-$form-select-disabled-bg:           $gray-200 !default;
+$form-select-disabled-bg:           $input-disabled-bg !default;
 $form-select-disabled-border-color: $input-disabled-border-color !default;
 $form-select-bg-position:           right $form-select-padding-x center !default;
 $form-select-bg-size:               16px 12px !default; // In pixels because image dimensions
@@ -971,7 +1011,7 @@ $form-select-transition:          $input-transition !default;
 $form-range-track-width:          100% !default;
 $form-range-track-height:         .5rem !default;
 $form-range-track-cursor:         pointer !default;
-$form-range-track-bg:             $gray-300 !default;
+$form-range-track-bg:             var(--#{$prefix}tertiary-bg) !default;
 $form-range-track-border-radius:  1rem !default;
 $form-range-track-box-shadow:     $box-shadow-inset !default;

@@ -984,26 +1024,28 @@ $form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !defa
 $form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
 $form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
 $form-range-thumb-active-bg:               tint-color($component-active-bg, 70%) !default;
-$form-range-thumb-disabled-bg:             $gray-500 !default;
+$form-range-thumb-disabled-bg:             var(--#{$prefix}secondary-color) !default;
 $form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 // scss-docs-end form-range-variables

 // scss-docs-start form-file-variables
 $form-file-button-color:          $input-color !default;
-$form-file-button-bg:             $input-group-addon-bg !default;
-$form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%) !default;
+$form-file-button-bg:             var(--#{$prefix}tertiary-bg) !default;
+$form-file-button-hover-bg:       var(--#{$prefix}secondary-bg) !default;
 // scss-docs-end form-file-variables

 // scss-docs-start form-floating-variables
-$form-floating-height:            add(3.5rem, $input-height-border) !default;
-$form-floating-line-height:       1.25 !default;
-$form-floating-padding-x:         $input-padding-x !default;
-$form-floating-padding-y:         1rem !default;
-$form-floating-input-padding-t:   1.625rem !default;
-$form-floating-input-padding-b:   .625rem !default;
-$form-floating-label-opacity:     .65 !default;
-$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem) !default;
-$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out !default;
+$form-floating-height:                  add(3.5rem, $input-height-border) !default;
+$form-floating-line-height:             1.25 !default;
+$form-floating-padding-x:               $input-padding-x !default;
+$form-floating-padding-y:               1rem !default;
+$form-floating-input-padding-t:         1.625rem !default;
+$form-floating-input-padding-b:         .625rem !default;
+$form-floating-label-height:            1.875em !default;
+$form-floating-label-opacity:           .65 !default;
+$form-floating-label-transform:         scale(.85) translateY(-.5rem) translateX(.15rem) !default;
+$form-floating-label-disabled-color:    $gray-600 !default;
+$form-floating-transition:              opacity .1s ease-in-out, transform .1s ease-in-out !default;
 // scss-docs-end form-floating-variables

 // Form validation
@@ -1024,12 +1066,20 @@ $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://w
 // scss-docs-start form-validation-states
 $form-validation-states: (
  "valid": (
-    "color": $form-feedback-valid-color,
-    "icon": $form-feedback-icon-valid
+    "color": var(--#{$prefix}success-text),
+    "icon": $form-feedback-icon-valid,
+    "tooltip-color": #fff,
+    "tooltip-bg-color": var(--#{$prefix}success),
+    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
+    "border-color": var(--#{$prefix}success),
  ),
  "invalid": (
-    "color": $form-feedback-invalid-color,
-    "icon": $form-feedback-icon-invalid
+    "color": var(--#{$prefix}danger-text),
+    "icon": $form-feedback-icon-invalid,
+    "tooltip-color": #fff,
+    "tooltip-bg-color": var(--#{$prefix}danger),
+    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
+    "border-color": var(--#{$prefix}danger),
  )
 ) !default;
 // scss-docs-end form-validation-states
@@ -1052,6 +1102,16 @@ $zindex-tooltip:                    1080 !default;
 $zindex-toast:                      1090 !default;
 // scss-docs-end zindex-stack

+// scss-docs-start zindex-levels-map
+$zindex-levels: (
+  n1: -1,
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3
+) !default;
+// scss-docs-end zindex-levels-map
+

 // Navs

@@ -1063,15 +1123,15 @@ $nav-link-font-weight:              null !default;
 $nav-link-color:                    var(--#{$prefix}link-color) !default;
 $nav-link-hover-color:              var(--#{$prefix}link-hover-color) !default;
 $nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
-$nav-link-disabled-color:           $gray-600 !default;
+$nav-link-disabled-color:           var(--#{$prefix}secondary-color) !default;

-$nav-tabs-border-color:             $gray-300 !default;
-$nav-tabs-border-width:             $border-width !default;
-$nav-tabs-border-radius:            $border-radius !default;
-$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
-$nav-tabs-link-active-color:        $gray-700 !default;
-$nav-tabs-link-active-bg:           $body-bg !default;
-$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
+$nav-tabs-border-color:             var(--#{$prefix}border-color) !default;
+$nav-tabs-border-width:             var(--#{$prefix}border-width) !default;
+$nav-tabs-border-radius:            var(--#{$prefix}border-radius) !default;
+$nav-tabs-link-hover-border-color:  var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color) !default;
+$nav-tabs-link-active-bg:           var(--#{$prefix}body-bg) !default;
+$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;

 $nav-pills-border-radius:           $border-radius !default;
 $nav-pills-link-active-color:       $component-active-color !default;
@@ -1101,12 +1161,12 @@ $navbar-toggler-border-radius:      $btn-border-radius !default;
 $navbar-toggler-focus-width:        $btn-focus-width !default;
 $navbar-toggler-transition:         box-shadow .15s ease-in-out !default;

-$navbar-light-color:                rgba($black, .55) !default;
-$navbar-light-hover-color:          rgba($black, .7) !default;
-$navbar-light-active-color:         rgba($black, .9) !default;
-$navbar-light-disabled-color:       rgba($black, .3) !default;
-$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: rgba($black, .1) !default;
+$navbar-light-color:                rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
+$navbar-light-hover-color:          rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
+$navbar-light-active-color:         rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
+$navbar-light-disabled-color:       rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
+$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{rgba($body-color, .75)}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
 $navbar-light-brand-color:          $navbar-light-active-color !default;
 $navbar-light-brand-hover-color:    $navbar-light-active-color !default;
 // scss-docs-end navbar-variables
@@ -1133,19 +1193,19 @@ $dropdown-padding-x:                0 !default;
 $dropdown-padding-y:                .5rem !default;
 $dropdown-spacer:                   .125rem !default;
 $dropdown-font-size:                $font-size-base !default;
-$dropdown-color:                    $body-color !default;
-$dropdown-bg:                       $white !default;
+$dropdown-color:                    var(--#{$prefix}body-color) !default;
+$dropdown-bg:                       var(--#{$prefix}body-bg) !default;
 $dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
 $dropdown-border-radius:            $border-radius !default;
-$dropdown-border-width:             $border-width !default;
-$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
+$dropdown-border-width:             var(--#{$prefix}border-width) !default;
+$dropdown-inner-border-radius:      calc($dropdown-border-radius - $dropdown-border-width) !default; // stylelint-disable-line function-disallowed-list
 $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
 $dropdown-box-shadow:               $box-shadow !default;

-$dropdown-link-color:               $gray-900 !default;
-$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%) !default;
-$dropdown-link-hover-bg:            $gray-200 !default;
+$dropdown-link-color:               var(--#{$prefix}body-color) !default;
+$dropdown-link-hover-color:         $dropdown-link-color !default;
+$dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg) !default;

 $dropdown-link-active-color:        $component-active-color !default;
 $dropdown-link-active-bg:           $component-active-bg !default;
@@ -1192,28 +1252,28 @@ $pagination-padding-x-lg:           1.5rem !default;
 $pagination-font-size:              $font-size-base !default;

 $pagination-color:                  var(--#{$prefix}link-color) !default;
-$pagination-bg:                     $white !default;
-$pagination-border-radius:          $border-radius !default;
-$pagination-border-width:           $border-width !default;
-$pagination-margin-start:           ($pagination-border-width * -1) !default;
-$pagination-border-color:           $gray-300 !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($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;
-$pagination-focus-bg:               $gray-200 !default;
+$pagination-focus-bg:               var(--#{$prefix}secondary-bg) !default;
 $pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
 $pagination-focus-outline:          0 !default;

 $pagination-hover-color:            var(--#{$prefix}link-hover-color) !default;
-$pagination-hover-bg:               $gray-200 !default;
-$pagination-hover-border-color:     $gray-300 !default;
+$pagination-hover-bg:               var(--#{$prefix}tertiary-bg) !default;
+$pagination-hover-border-color:     var(--#{$prefix}border-color) !default; // Todo in v6: remove this?

 $pagination-active-color:           $component-active-color !default;
 $pagination-active-bg:              $component-active-bg !default;
-$pagination-active-border-color:    $pagination-active-bg !default;
+$pagination-active-border-color:    $component-active-bg !default;

-$pagination-disabled-color:         $gray-600 !default;
-$pagination-disabled-bg:            $white !default;
-$pagination-disabled-border-color:  $gray-300 !default;
+$pagination-disabled-color:         var(--#{$prefix}secondary-color) !default;
+$pagination-disabled-bg:            var(--#{$prefix}secondary-bg) !default;
+$pagination-disabled-border-color:  var(--#{$prefix}border-color) !default;

 $pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

@@ -1235,18 +1295,20 @@ $placeholder-opacity-min:           .2 !default;
 $card-spacer-y:                     $spacer !default;
 $card-spacer-x:                     $spacer !default;
 $card-title-spacer-y:               $spacer * .5 !default;
-$card-border-width:                 $border-width !default;
+$card-title-color:                  null !default;
+$card-subtitle-color:               null !default;
+$card-border-width:                 var(--#{$prefix}border-width) !default;
 $card-border-color:                 var(--#{$prefix}border-color-translucent) !default;
-$card-border-radius:                $border-radius !default;
+$card-border-radius:                var(--#{$prefix}border-radius) !default;
 $card-box-shadow:                   null !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
 $card-cap-padding-y:                $card-spacer-y * .5 !default;
 $card-cap-padding-x:                $card-spacer-x !default;
-$card-cap-bg:                       rgba($black, .03) !default;
+$card-cap-bg:                       rgba(var(--#{$prefix}body-color-rgb), .03) !default;
 $card-cap-color:                    null !default;
 $card-height:                       null !default;
 $card-color:                        null !default;
-$card-bg:                           $white !default;
+$card-bg:                           var(--#{$prefix}body-bg) !default;
 $card-img-overlay-padding:          $spacer !default;
 $card-group-margin:                 $grid-gutter-width * .5 !default;
 // scss-docs-end card-variables
@@ -1256,11 +1318,11 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 // scss-docs-start accordion-variables
 $accordion-padding-y:                     1rem !default;
 $accordion-padding-x:                     1.25rem !default;
-$accordion-color:                         $body-color !default; // Sass variable because of $accordion-button-icon
-$accordion-bg:                            $body-bg !default;
-$accordion-border-width:                  $border-width !default;
+$accordion-color:                         var(--#{$prefix}body-color) !default; // Sass variable because of $accordion-button-icon
+$accordion-bg:                            var(--#{$prefix}body-bg) !default;
+$accordion-border-width:                  var(--#{$prefix}border-width) !default;
 $accordion-border-color:                  var(--#{$prefix}border-color) !default;
-$accordion-border-radius:                 $border-radius !default;
+$accordion-border-radius:                 var(--#{$prefix}border-radius) !default;
 $accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;

 $accordion-body-padding-y:                $accordion-padding-y !default;
@@ -1268,18 +1330,18 @@ $accordion-body-padding-x:                $accordion-padding-x !default;

 $accordion-button-padding-y:              $accordion-padding-y !default;
 $accordion-button-padding-x:              $accordion-padding-x !default;
-$accordion-button-color:                  $accordion-color !default;
+$accordion-button-color:                  var(--#{$prefix}body-color) !default;
 $accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default;
 $accordion-transition:                    $btn-transition, border-radius .15s ease !default;
-$accordion-button-active-bg:              tint-color($component-active-bg, 90%) !default;
-$accordion-button-active-color:           shade-color($primary, 10%) !default;
+$accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle) !default;
+$accordion-button-active-color:           var(--#{$prefix}primary-text) !default;

 $accordion-button-focus-border-color:     $input-focus-border-color !default;
 $accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;

 $accordion-icon-width:                    1.25rem !default;
-$accordion-icon-color:                    $accordion-button-color !default;
-$accordion-icon-active-color:             $accordion-button-active-color !default;
+$accordion-icon-color:                    $body-color !default;
+$accordion-icon-active-color:             $primary-text !default;
 $accordion-icon-transition:               transform .2s ease-in-out !default;
 $accordion-icon-transform:                rotate(-180deg) !default;

@@ -1292,9 +1354,9 @@ $accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w
 // scss-docs-start tooltip-variables
 $tooltip-font-size:                 $font-size-sm !default;
 $tooltip-max-width:                 200px !default;
-$tooltip-color:                     $white !default;
-$tooltip-bg:                        $black !default;
-$tooltip-border-radius:             $border-radius !default;
+$tooltip-color:                     var(--#{$prefix}body-bg) !default;
+$tooltip-bg:                        var(--#{$prefix}emphasis-color) !default;
+$tooltip-border-radius:             var(--#{$prefix}border-radius) !default;
 $tooltip-opacity:                   .9 !default;
 $tooltip-padding-y:                 $spacer * .25 !default;
 $tooltip-padding-x:                 $spacer * .5 !default;
@@ -1322,21 +1384,21 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;

 // scss-docs-start popover-variables
 $popover-font-size:                 $font-size-sm !default;
-$popover-bg:                        $white !default;
+$popover-bg:                        var(--#{$prefix}body-bg) !default;
 $popover-max-width:                 276px !default;
-$popover-border-width:              $border-width !default;
+$popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
-$popover-border-radius:             $border-radius-lg !default;
-$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
+$popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
+$popover-inner-border-radius:       calc($popover-border-radius - $popover-border-width) !default; // stylelint-disable-line function-disallowed-list
 $popover-box-shadow:                $box-shadow !default;

 $popover-header-font-size:          $font-size-base !default;
-$popover-header-bg:                 shade-color($popover-bg, 6%) !default;
+$popover-header-bg:                 var(--#{$prefix}secondary-bg) !default;
 $popover-header-color:              $headings-color !default;
 $popover-header-padding-y:          .5rem !default;
 $popover-header-padding-x:          $spacer !default;

-$popover-body-color:                $body-color !default;
+$popover-body-color:                var(--#{$prefix}body-color) !default;
 $popover-body-padding-y:            $spacer !default;
 $popover-body-padding-x:            $spacer !default;

@@ -1359,16 +1421,16 @@ $toast-padding-x:                   .75rem !default;
 $toast-padding-y:                   .5rem !default;
 $toast-font-size:                   .875rem !default;
 $toast-color:                       null !default;
-$toast-background-color:            rgba($white, .85) !default;
-$toast-border-width:                $border-width !default;
+$toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-border-width:                var(--#{$prefix}border-width) !default;
 $toast-border-color:                var(--#{$prefix}border-color-translucent) !default;
-$toast-border-radius:               $border-radius !default;
-$toast-box-shadow:                  $box-shadow !default;
+$toast-border-radius:               var(--#{$prefix}border-radius) !default;
+$toast-box-shadow:                  var(--#{$prefix}box-shadow) !default;
 $toast-spacing:                     $container-padding-x !default;

-$toast-header-color:                $gray-600 !default;
-$toast-header-background-color:     rgba($white, .85) !default;
-$toast-header-border-color:         rgba($black, .05) !default;
+$toast-header-color:                var(--#{$prefix}secondary-color) !default;
+$toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
+$toast-header-border-color:         $toast-border-color !default;
 // scss-docs-end toast-variables


@@ -1397,10 +1459,10 @@ $modal-dialog-margin-y-sm-up:       1.75rem !default;
 $modal-title-line-height:           $line-height-base !default;

 $modal-content-color:               null !default;
-$modal-content-bg:                  $white !default;
+$modal-content-bg:                  var(--#{$prefix}body-bg) !default;
 $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
-$modal-content-border-width:        $border-width !default;
-$modal-content-border-radius:       $border-radius-lg !default;
+$modal-content-border-width:        var(--#{$prefix}border-width) !default;
+$modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
 $modal-content-box-shadow-xs:       $box-shadow-sm !default;
 $modal-content-box-shadow-sm-up:    $box-shadow !default;
@@ -1440,22 +1502,27 @@ $alert-padding-x:               $spacer !default;
 $alert-margin-bottom:           1rem !default;
 $alert-border-radius:           $border-radius !default;
 $alert-link-font-weight:        $font-weight-bold !default;
-$alert-border-width:            $border-width !default;
+$alert-border-width:            var(--#{$prefix}border-width) !default;
 $alert-bg-scale:                -80% !default;
 $alert-border-scale:            -70% !default;
 $alert-color-scale:             40% !default;
 $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 // scss-docs-end alert-variables

+// fusv-disable
+$alert-bg-scale:                -80% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-border-scale:            -70% !default; // Deprecated in v5.2.0, to be removed in v6
+$alert-color-scale:             40% !default; // Deprecated in v5.2.0, to be removed in v6
+// fusv-enable

 // Progress bars

 // scss-docs-start progress-variables
 $progress-height:                   1rem !default;
 $progress-font-size:                $font-size-base * .75 !default;
-$progress-bg:                       $gray-200 !default;
-$progress-border-radius:            $border-radius !default;
-$progress-box-shadow:               $box-shadow-inset !default;
+$progress-bg:                       var(--#{$prefix}secondary-bg) !default;
+$progress-border-radius:            var(--#{$prefix}border-radius) !default;
+$progress-box-shadow:               var(--#{$prefix}box-shadow-inset) !default;
 $progress-bar-color:                $white !default;
 $progress-bar-bg:                   $primary !default;
 $progress-bar-animation-timing:     1s linear infinite !default;
@@ -1466,30 +1533,32 @@ $progress-bar-transition:           width .6s ease !default;
 // List group

 // scss-docs-start list-group-variables
-$list-group-color:                  $gray-900 !default;
-$list-group-bg:                     $white !default;
-$list-group-border-color:           rgba($black, .125) !default;
+$list-group-color:                  var(--#{$prefix}body-color) !default;
+$list-group-bg:                     var(--#{$prefix}body-bg) !default;
+$list-group-border-color:           var(--#{$prefix}border-color) !default;
 $list-group-border-width:           $border-width !default;
-$list-group-border-radius:          $border-radius !default;
+$list-group-border-radius:          var(--#{$prefix}border-radius) !default;

 $list-group-item-padding-y:         $spacer * .5 !default;
 $list-group-item-padding-x:         $spacer !default;
-$list-group-item-bg-scale:          -80% !default;
-$list-group-item-color-scale:       40% !default;
+// fusv-disable
+$list-group-item-bg-scale:          -80% !default; // Deprecated in v5.3.0
+$list-group-item-color-scale:       40% !default; // Deprecated in v5.3.0
+// fusv-enable

-$list-group-hover-bg:               $gray-100 !default;
+$list-group-hover-bg:               var(--#{$prefix}tertiary-bg) !default;
 $list-group-active-color:           $component-active-color !default;
 $list-group-active-bg:              $component-active-bg !default;
 $list-group-active-border-color:    $list-group-active-bg !default;

-$list-group-disabled-color:         $gray-600 !default;
+$list-group-disabled-color:         var(--#{$prefix}secondary-color) !default;
 $list-group-disabled-bg:            $list-group-bg !default;

-$list-group-action-color:           $gray-700 !default;
-$list-group-action-hover-color:     $list-group-action-color !default;
+$list-group-action-color:           var(--#{$prefix}secondary-color) !default;
+$list-group-action-hover-color:     var(--#{$prefix}emphasis-color) !default;

-$list-group-action-active-color:    $body-color !default;
-$list-group-action-active-bg:       $gray-200 !default;
+$list-group-action-active-color:    var(--#{$prefix}body-color) !default;
+$list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
 // scss-docs-end list-group-variables


@@ -1497,11 +1566,11 @@ $list-group-action-active-bg:       $gray-200 !default;

 // scss-docs-start thumbnail-variables
 $thumbnail-padding:                 .25rem !default;
-$thumbnail-bg:                      $body-bg !default;
-$thumbnail-border-width:            $border-width !default;
+$thumbnail-bg:                      var(--#{$prefix}body-bg) !default;
+$thumbnail-border-width:            var(--#{$prefix}border-width) !default;
 $thumbnail-border-color:            var(--#{$prefix}border-color) !default;
-$thumbnail-border-radius:           $border-radius !default;
-$thumbnail-box-shadow:              $box-shadow-sm !default;
+$thumbnail-border-radius:           var(--#{$prefix}border-radius) !default;
+$thumbnail-box-shadow:              var(--#{$prefix}box-shadow-sm) !default;
 // scss-docs-end thumbnail-variables


@@ -1509,7 +1578,7 @@ $thumbnail-box-shadow:              $box-shadow-sm !default;

 // scss-docs-start figure-variables
 $figure-caption-font-size:          $small-font-size !default;
-$figure-caption-color:              $gray-600 !default;
+$figure-caption-color:              var(--#{$prefix}secondary-color) !default;
 // scss-docs-end figure-variables


@@ -1522,8 +1591,8 @@ $breadcrumb-padding-x:              0 !default;
 $breadcrumb-item-padding-x:         .5rem !default;
 $breadcrumb-margin-bottom:          1rem !default;
 $breadcrumb-bg:                     null !default;
-$breadcrumb-divider-color:          $gray-600 !default;
-$breadcrumb-active-color:           $gray-600 !default;
+$breadcrumb-divider-color:          var(--#{$prefix}secondary-color) !default;
+$breadcrumb-active-color:           var(--#{$prefix}secondary-color) !default;
 $breadcrumb-divider:                quote("/") !default;
 $breadcrumb-divider-flipped:        $breadcrumb-divider !default;
 $breadcrumb-border-radius:          null !default;
@@ -1612,8 +1681,8 @@ $offcanvas-transition-duration:     .3s !default;
 $offcanvas-border-color:            $modal-content-border-color !default;
 $offcanvas-border-width:            $modal-content-border-width !default;
 $offcanvas-title-line-height:       $modal-title-line-height !default;
-$offcanvas-bg-color:                $modal-content-bg !default;
-$offcanvas-color:                   $modal-content-color !default;
+$offcanvas-bg-color:                var(--#{$prefix}body-bg) !default;
+$offcanvas-color:                   var(--#{$prefix}body-color) !default;
 $offcanvas-box-shadow:              $modal-content-box-shadow-xs !default;
 $offcanvas-backdrop-bg:             $modal-backdrop-bg !default;
 $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
@@ -5,10 +5,12 @@ $include-column-box-sizing: true !default;

@import "functions";
@import "variables";
+@import "variables-dark";
@import "maps";

@import "mixins/lists";
@import "mixins/breakpoints";
+@import "mixins/color-mode";
@import "mixins/container";
@import "mixins/grid";
@import "mixins/utilities";
@@ -3,6 +3,7 @@

@import "functions";
@import "variables";
+@import "variables-dark";
@import "maps";
@import "mixins";
@import "root";
@@ -4,6 +4,7 @@
 // Configuration
@import "functions";
@import "variables";
+@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
@@ -6,6 +6,7 @@
 // Configuration
@import "functions";
@import "variables";
+@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
@@ -1,6 +1,17 @@
 .form-floating {
  position: relative;

+  &::before:not(.form-control:disabled) {
+    position: absolute;
+    top: $input-border-width;
+    left: $input-border-width;
+    width: subtract(100%, add($input-height-inner-quarter, $input-height-inner-half));
+    height: $form-floating-label-height;
+    content: "";
+    background-color: $input-bg;
+    @include border-radius($input-border-radius);
+  }
+
  > .form-control,
  > .form-control-plaintext,
  > .form-select {
@@ -72,4 +83,8 @@
      border-width: $input-border-width 0; // Required to properly position label text - as explained above
    }
  }
+
+  > .form-control:disabled ~ label {
+    color: $form-floating-label-disabled-color;
+  }
 }
@@ -27,11 +27,14 @@
 }

 .form-check-input {
+  --#{$prefix}form-check-bg: #{$form-check-input-bg};
+
  width: $form-check-input-width;
  height: $form-check-input-width;
  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
  vertical-align: top;
-  background-color: $form-check-input-bg;
+  background-color: var(--#{$prefix}form-check-bg);
+  background-image: var(--#{$prefix}form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
@@ -65,17 +68,17 @@

    &[type="checkbox"] {
      @if $enable-gradients {
-        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
      } @else {
-        background-image: escape-svg($form-check-input-checked-bg-image);
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
      }
    }

    &[type="radio"] {
      @if $enable-gradients {
-        background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient);
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
      } @else {
-        background-image: escape-svg($form-check-radio-checked-bg-image);
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
      }
    }
  }
@@ -85,9 +88,9 @@
    border-color: $form-check-input-indeterminate-border-color;

    @if $enable-gradients {
-      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient);
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
    } @else {
-      background-image: escape-svg($form-check-input-indeterminate-bg-image);
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
    }
  }

@@ -121,24 +124,26 @@
  padding-left: $form-switch-padding-start;

  .form-check-input {
+    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+
    width: $form-switch-width;
    margin-left: $form-switch-padding-start * -1;
-    background-image: escape-svg($form-switch-bg-image);
+    background-image: var(--#{$prefix}form-switch-bg);
    background-position: left center;
    @include border-radius($form-switch-border-radius);
    @include transition($form-switch-transition);

    &:focus {
-      background-image: escape-svg($form-switch-focus-bg-image);
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
    }

    &:checked {
      background-position: $form-switch-checked-bg-position;

      @if $enable-gradients {
-        background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient);
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
      } @else {
-        background-image: escape-svg($form-switch-checked-bg-image);
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
      }
    }
  }
@@ -173,3 +178,11 @@
    }
  }
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .form-switch .form-check-input:not(:checked):not(:focus) {
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+    }
+  }
+}
@@ -52,6 +52,13 @@
    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
  }

+  // Prevent excessive date input height in Webkit
+  // https://github.com/twbs/bootstrap/issues/34433
+  &::-webkit-datetime-edit {
+    display: block;
+    padding: 0;
+  }
+
  // Placeholder
  &::placeholder {
    color: $input-placeholder-color;
@@ -4,6 +4,8 @@
 // https://primer.github.io/.

 .form-select {
+  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
+
  display: block;
  width: 100%;
  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
@@ -14,7 +16,7 @@
  line-height: $form-select-line-height;
  color: $form-select-color;
  background-color: $form-select-bg;
-  background-image: escape-svg($form-select-indicator);
+  background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: $form-select-bg-position;
  background-size: $form-select-bg-size;
@@ -69,3 +71,11 @@
  @include font-size($form-select-font-size-lg);
  @include border-radius($form-select-border-radius-lg);
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .form-select {
+      --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
+    }
+  }
+}
@@ -121,7 +121,7 @@
  }

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

@@ -1,11 +1,11 @@
@each $color, $value in $theme-colors {
  .link-#{$color} {
-    color: $value !important; // stylelint-disable-line declaration-no-important
+    color: $value if($enable-important-utilities, !important, null);

    @if $link-shade-percentage != 0 {
      &:hover,
      &:focus {
-        color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) !important; // stylelint-disable-line declaration-no-important
+        color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)) if($enable-important-utilities, !important, null);
      }
    }
  }
@@ -1,15 +1,18 @@
+@include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0");
+
 // scss-docs-start alert-variant-mixin
@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};
+  --#{$prefix}alert-link-color: #{shade-color($color, 20%)};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .alert-link {
-    color: shade-color($color, 20%);
+    color: var(--#{$prefix}alert-link-color);
  }
 }
 // scss-docs-end alert-variant-mixin
@@ -1,44 +1,49 @@
 // scss-docs-start caret-mixins
-@mixin caret-down {
-  border-top: $caret-width solid;
-  border-right: $caret-width solid transparent;
+@mixin caret-down($width: $caret-width) {
+  border-top: $width solid;
+  border-right: $width solid transparent;
  border-bottom: 0;
-  border-left: $caret-width solid transparent;
+  border-left: $width solid transparent;
 }

-@mixin caret-up {
+@mixin caret-up($width: $caret-width) {
  border-top: 0;
-  border-right: $caret-width solid transparent;
-  border-bottom: $caret-width solid;
-  border-left: $caret-width solid transparent;
+  border-right: $width solid transparent;
+  border-bottom: $width solid;
+  border-left: $width solid transparent;
 }

-@mixin caret-end {
-  border-top: $caret-width solid transparent;
+@mixin caret-end($width: $caret-width) {
+  border-top: $width solid transparent;
  border-right: 0;
-  border-bottom: $caret-width solid transparent;
-  border-left: $caret-width solid;
+  border-bottom: $width solid transparent;
+  border-left: $width solid;
 }

-@mixin caret-start {
-  border-top: $caret-width solid transparent;
-  border-right: $caret-width solid;
-  border-bottom: $caret-width solid transparent;
+@mixin caret-start($width: $caret-width) {
+  border-top: $width solid transparent;
+  border-right: $width solid;
+  border-bottom: $width solid transparent;
 }

-@mixin caret($direction: down) {
+@mixin caret(
+  $direction: down,
+  $width: $caret-width,
+  $spacing: $caret-spacing,
+  $vertical-align: $caret-vertical-align
+) {
  @if $enable-caret {
    &::after {
      display: inline-block;
-      margin-left: $caret-spacing;
-      vertical-align: $caret-vertical-align;
+      margin-left: $spacing;
+      vertical-align: $vertical-align;
      content: "";
      @if $direction == down {
-        @include caret-down();
+        @include caret-down($width);
      } @else if $direction == up {
-        @include caret-up();
+        @include caret-up($width);
      } @else if $direction == end {
-        @include caret-end();
+        @include caret-end($width);
      }
    }

@@ -49,10 +54,10 @@

      &::before {
        display: inline-block;
-        margin-right: $caret-spacing;
-        vertical-align: $caret-vertical-align;
+        margin-right: $spacing;
+        vertical-align: $vertical-align;
        content: "";
-        @include caret-start();
+        @include caret-start($width);
      }
    }

@@ -0,0 +1,13 @@
+// scss-docs-start color-mode-mixin
+@mixin color-mode($mode: light, $type: $color-mode-type) {
+  @if $type == "media-query" {
+    @media (prefers-color-scheme: $mode) {
+      @content;
+    }
+  } @else {
+    [data-bs-theme="#{$mode}"] {
+      @content;
+    }
+  }
+}
+// scss-docs-end color-mode-mixin
@@ -21,7 +21,8 @@
  $icon,
  $tooltip-color: color-contrast($color),
  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
-  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)
+  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
+  $border-color: $color
 ) {
  .#{$state}-feedback {
    display: none;
@@ -56,7 +57,7 @@

  .form-control {
    @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;

      @if $enable-validation-icons {
        padding-right: $input-height-inner;
@@ -67,7 +68,7 @@
      }

      &:focus {
-        border-color: $color;
+        border-color: $border-color;
        box-shadow: $focus-box-shadow;
      }
    }
@@ -85,20 +86,20 @@

  .form-select {
    @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;

      @if $enable-validation-icons {
        &:not([multiple]):not([size]),
        &:not([multiple])[size="1"] {
+          --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
          padding-right: $form-select-feedback-icon-padding-end;
-          background-image: escape-svg($form-select-indicator), escape-svg($icon);
          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
          background-size: $form-select-bg-size, $form-select-feedback-icon-size;
        }
      }

      &:focus {
-        border-color: $color;
+        border-color: $border-color;
        box-shadow: $focus-box-shadow;
      }
    }
@@ -114,7 +115,7 @@

  .form-check-input {
    @include form-validation-state-selector($state) {
-      border-color: $color;
+      border-color: $border-color;

      &:checked {
        background-color: $color;
@@ -1,3 +1,6 @@
+@include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0");
+
+
 // List Groups

 // scss-docs-start list-group-mixin
@@ -1,15 +1,28 @@
 {
+  "extends": "../.eslintrc.json",
  "env": {
    "browser": true,
    "node": false
  },
+  "parserOptions": {
+    "sourceType": "script"
+  },
  "plugins": [
    "markdown"
  ],
+  "rules": {
+    "no-new": "off",
+    "strict": "error",
+    "unicorn/no-array-for-each": "off",
+    "unicorn/numeric-separators-style": "off",
+    "unicorn/prefer-node-protocol": "off"
+  },
  "overrides": [
    {
      // 2. Enable the Markdown processor for all .md files.
-      "files": ["./**/*.md"],
+      "files": [
+        "./**/*.md"
+      ],
      "processor": "markdown/markdown"
    },
    {
@@ -28,27 +41,15 @@
      },
      "rules": {
        "no-array-for-each": "off",
+        "no-labels": "off",
+        "no-redeclare": "off",
        "no-undef": "off",
-        "no-unused-vars": "off",
-        "unicorn/no-array-for-each": "off",
-        "unicorn/numeric-separators-style": "off",
        "no-unused-expressions": "off",
        "no-unused-labels": "off",
-        "no-labels": "off",
-        "no-redeclare": "off"
+        "no-unused-vars": "off",
+        "unicorn/no-array-for-each": "off",
+        "unicorn/numeric-separators-style": "off"
      }
    }
-  ],
-  "parserOptions": {
-    "sourceType": "script"
-  },
-  "extends": "../.eslintrc.json",
-  "rules": {
-    "no-new": "off",
-    "prefer-template": "error",
-    "strict": "error",
-    "unicorn/no-array-for-each": "off",
-    "unicorn/numeric-separators-style": "off",
-    "unicorn/prefer-node-protocol": "off"
-  }
+  ]
 }
@@ -56,7 +56,7 @@
  })

  clipboard.on('success', event => {
-    const iconFirstChild = event.trigger.querySelector('.bi').firstChild
+    const iconFirstChild = event.trigger.querySelector('.bi').firstElementChild
    const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
    const namespace = 'http://www.w3.org/1999/xlink'
    const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
--- a/Show More
+++ b/Show More