Sass modules

* Reorganize scss folder

* Migrate to Sass modules

* Migrate docs to Sass modules, comment out docs grid CSS

* Give helpers folder an index.scss, migrate ratio helper to aspect-ratio utility

* Delete node sass Action

* Modify Sass tests to pass for new Sass modules implementation

* Don't disallow calc()

* Move heading classes back to Reboot to prevent a dependency

* Utilities, some helpers, and theme colors

* Temporary fix of docs compilation

* Temporary Bundlewatch fix

* docs fix import to use

* Restyle docs callouts

* Fix docs colors

* Revert typo

* Reintroduce `css-lint-vars` npm script

* Bump to Sass v1.90.x

* Fixes

* more

* Remove

---------

Co-authored-by: Julien Déramond <juderamond@gmail.com>

.bundlewatch.config.json

@@ -2,35 +2,35 @@
   "files": [
     {
       "path": "./dist/css/bootstrap-grid.css",
-      "maxSize": "10.0 kB"
+      "maxSize": "6.5 kB"
     },
     {
       "path": "./dist/css/bootstrap-grid.min.css",
-      "maxSize": "9.0 kB"
+      "maxSize": "6.0 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.css",
-      "maxSize": "5.5 kB"
+      "maxSize": "4.25 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.min.css",
-      "maxSize": "4.5 kB"
+      "maxSize": "4.25 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.css",
-      "maxSize": "15.25 kB"
+      "maxSize": "12.75 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
-      "maxSize": "13.5 kB"
+      "maxSize": "12.0 kB"
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "37.5 kB"
+      "maxSize": "33.75 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "33.75 kB"
+      "maxSize": "31.25 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

.cspell.json

@@ -21,7 +21,6 @@
     "callout",
     "callouts",
     "camelCase",
-    "checkgroup",
     "clearfix",
     "Codesniffer",
     "combinator",
@@ -30,7 +29,6 @@
     "Crossfade",
     "crossfading",
     "cssgrid",
-    "csstricks",
     "Csvg",
     "Datalists",
     "Deque",
@@ -48,7 +46,6 @@
     "favicons",
     "fieldsets",
     "flexbox",
-    "frontmatter",
     "fullscreen",
     "getbootstrap",
     "Grayscale",

.github/workflows/browserstack.yml

@@ -27,7 +27,7 @@ jobs:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: "${{ env.NODE }}"
           cache: npm

.github/workflows/bundlewatch.yml

@@ -25,7 +25,7 @@ jobs:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: "${{ env.NODE }}"
           cache: npm

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

@@ -27,6 +27,6 @@ jobs:
           persist-credentials: false
 
       - name: Compress Images
-        uses: calibreapp/image-actions@f32575787d333b0579f0b7d506ff03be63a669d1 # v1.4.1
+        uses: calibreapp/image-actions@51921e25c9b0b62ed202c0ad0a2121f0f3ad186d # v1.3.0
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/codeql.yml

@@ -29,16 +29,16 @@ jobs:
           persist-credentials: false
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
+        uses: github/codeql-action/init@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
         with:
           config-file: ./.github/codeql/codeql-config.yml
           languages: "javascript"
           queries: +security-and-quality
 
       - name: Autobuild
-        uses: github/codeql-action/autobuild@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
+        uses: github/codeql-action/autobuild@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
+        uses: github/codeql-action/analyze@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
         with:
           category: "/language:javascript"

.github/workflows/cspell.yml

@@ -28,7 +28,7 @@ jobs:
           persist-credentials: false
 
       - name: Run cspell
-        uses: streetsidesoftware/cspell-action@3294df585d3d639e30f3bc019cb11940b9866e95 # v8.0.0
+        uses: streetsidesoftware/cspell-action@dcd03dc3e8a59ec2e360d0c62db517baa0b4bb6d # v7.2.0
         with:
           config: ".cspell.json"
           files: "**/*.{md,mdx}"

.github/workflows/css.yml

@@ -25,7 +25,7 @@ jobs:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: "${{ env.NODE }}"
           cache: npm

.github/workflows/docs.yml

@@ -25,11 +25,13 @@ jobs:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: "${{ env.NODE }}"
           cache: npm
 
+      - run: java -version
+
       - name: Install npm dependencies
         run: npm ci
 
@@ -37,10 +39,10 @@ jobs:
         run: npm run docs-build
 
       - name: Validate HTML
-        run: npm run docs-html-validate
+        run: npm run docs-vnu
 
       - name: Run linkinator
-        uses: JustinBeckwith/linkinator-action@af984b9f30f63e796ae2ea5be5e07cb587f1bbd9 # v2.3
+        uses: JustinBeckwith/linkinator-action@3d5ba091319fa7b0ac14703761eebb7d100e6f6d # v1.11.0
         with:
           paths: _site
           recurse: true

.github/workflows/issue-close-require.yml

@@ -17,7 +17,7 @@ jobs:
     if: github.repository == 'twbs/bootstrap'
     steps:
       - name: awaiting reply
-        uses: actions-cool/issues-helper@9861779a695cf1898bd984c727f685f351cfc372 # v3.7.2
+        uses: actions-cool/issues-helper@50068f49b7b2b3857270ead65e2d02e4459b022c # v3.6.2
         with:
           actions: "close-issues"
           labels: "awaiting-reply"

.github/workflows/issue-labeled.yml

@@ -18,7 +18,7 @@ jobs:
     steps:
       - name: awaiting reply
         if: github.event.label.name == 'needs-example'
-        uses: actions-cool/issues-helper@9861779a695cf1898bd984c727f685f351cfc372 # v3.7.2
+        uses: actions-cool/issues-helper@50068f49b7b2b3857270ead65e2d02e4459b022c # v3.6.2
         with:
           actions: "create-comment"
           token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/js.yml

@@ -30,7 +30,7 @@ jobs:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: ${{ env.NODE }}
           cache: npm

.github/workflows/lint.yml

@@ -25,7 +25,7 @@ jobs:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: "${{ env.NODE }}"
           cache: npm

.github/workflows/scorecard.yml

@@ -39,7 +39,7 @@ jobs:
           persist-credentials: false
 
       - name: "Run analysis"
-        uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
+        uses: ossf/scorecard-action@05b42c624433fc40578a4040d5cf5e36ddca8cde # v2.4.2
         with:
           results_file: results.sarif
           results_format: sarif
@@ -64,7 +64,7 @@ jobs:
       # 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@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: SARIF file
           path: results.sarif
@@ -73,6 +73,6 @@ jobs:
       # Upload the results to GitHub's code scanning dashboard (optional).
       # Commenting out will disable upload of results to your repo's Code Scanning dashboard
       - name: "Upload to code-scanning"
-        uses: github/codeql-action/upload-sarif@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
+        uses: github/codeql-action/upload-sarif@3c3833e0f8c1c83d449a7478aa59c036a9165498 # v3.29.11
         with:
           sarif_file: results.sarif

.gitignore

@@ -18,7 +18,6 @@
 .cache
 .DS_Store
 .idea
-.nvmrc
 .project
 .settings
 .tmproj

.markdownlint.json

@@ -1,7 +1,6 @@
 {
   "default": true,
   "MD004": { "style": "dash" },
-  "MD011": false,
   "MD013": false,
   "MD024": false,
   "MD025": false,
@@ -15,4 +14,4 @@
   "MD046": false,
   "line-length": false,
   "no-inline-html": false
-}
+}

README.md

@@ -87,18 +87,34 @@ Within the download you’ll find the following directories and files, logically
   │   ├── bootstrap-grid.css.map
   │   ├── bootstrap-grid.min.css
   │   ├── bootstrap-grid.min.css.map
+  │   ├── bootstrap-grid.rtl.css
+  │   ├── bootstrap-grid.rtl.css.map
+  │   ├── bootstrap-grid.rtl.min.css
+  │   ├── bootstrap-grid.rtl.min.css.map
   │   ├── bootstrap-reboot.css
   │   ├── bootstrap-reboot.css.map
   │   ├── bootstrap-reboot.min.css
   │   ├── bootstrap-reboot.min.css.map
+  │   ├── bootstrap-reboot.rtl.css
+  │   ├── bootstrap-reboot.rtl.css.map
+  │   ├── bootstrap-reboot.rtl.min.css
+  │   ├── bootstrap-reboot.rtl.min.css.map
   │   ├── bootstrap-utilities.css
   │   ├── bootstrap-utilities.css.map
   │   ├── bootstrap-utilities.min.css
   │   ├── bootstrap-utilities.min.css.map
+  │   ├── bootstrap-utilities.rtl.css
+  │   ├── bootstrap-utilities.rtl.css.map
+  │   ├── bootstrap-utilities.rtl.min.css
+  │   ├── bootstrap-utilities.rtl.min.css.map
   │   ├── bootstrap.css
   │   ├── bootstrap.css.map
   │   ├── bootstrap.min.css
-  │   └── bootstrap.min.css.map
+  │   ├── bootstrap.min.css.map
+  │   ├── bootstrap.rtl.css
+  │   ├── bootstrap.rtl.css.map
+  │   ├── bootstrap.rtl.min.css
+  │   └── bootstrap.rtl.min.css.map
   └── js/
       ├── bootstrap.bundle.js
       ├── bootstrap.bundle.js.map
@@ -115,7 +131,7 @@ Within the download you’ll find the following directories and files, logically
   ```
 </details>
 
-We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/docs/v2/). All CSS files work for both LTR and RTL layouts thanks to logical properties—simply set `dir="rtl"` on your HTML element.
+We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers’ developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/docs/v2/).
 
 
 ## Bugs and feature requests

build/generate-sri.mjs

@@ -29,6 +29,10 @@ const files = [
     file: 'dist/css/bootstrap.min.css',
     configPropertyName: 'css_hash'
   },
+  {
+    file: 'dist/css/bootstrap.rtl.min.css',
+    configPropertyName: 'css_rtl_hash'
+  },
   {
     file: 'dist/js/bootstrap.min.js',
     configPropertyName: 'js_hash'

build/generate-utilities-json.mjs

@@ -1,87 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Generate utilities metadata JSON from Sass
- * This script compiles a special Sass file that outputs utility information as CSS comments,
- * then extracts and saves it as JSON for documentation use.
- */
-
-import { readFileSync, writeFileSync, unlinkSync } from 'node:fs'
-import { execSync } from 'node:child_process'
-import { fileURLToPath } from 'node:url'
-import path from 'node:path'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-const rootDir = path.join(__dirname, '..')
-
-// Compile the metadata generator SCSS file
-console.log('Compiling utilities metadata...')
-
-try {
-  execSync(
-    'sass --style expanded --no-source-map build/generate-utilities-metadata.scss:dist/css/utilities-metadata.tmp.css',
-    { cwd: rootDir, stdio: 'inherit' }
-  )
-} catch {
-  console.error('Failed to compile metadata SCSS')
-  process.exit(1)
-}
-
-// Read the compiled CSS
-const cssPath = path.join(rootDir, 'dist/css/utilities-metadata.tmp.css')
-const cssContent = readFileSync(cssPath, 'utf8')
-
-// Extract JSON from the CSS comment
-const startMarker = 'BOOTSTRAP-UTILITIES-METADATA-START'
-const endMarker = 'BOOTSTRAP-UTILITIES-METADATA-END'
-
-const startIndex = cssContent.indexOf(startMarker)
-const endIndex = cssContent.indexOf(endMarker)
-
-if (startIndex === -1 || endIndex === -1) {
-  console.error('Could not find metadata markers in compiled CSS')
-  process.exit(1)
-}
-
-// Extract JSON content between markers
-const jsonContent = cssContent
-  .slice(startIndex + startMarker.length, endIndex)
-  .trim()
-
-// Validate JSON
-try {
-  const parsed = JSON.parse(jsonContent)
-  console.log(`✓ Extracted metadata for ${Object.keys(parsed.utilities).length} utilities`)
-
-  // Write to JSON file
-  const outputPath = path.join(rootDir, 'dist/css/bootstrap-utilities.metadata.json')
-  writeFileSync(outputPath, JSON.stringify(parsed, null, 2))
-  console.log(`✓ Wrote metadata to ${outputPath}`)
-
-  // Clean up temporary CSS files
-  try {
-    unlinkSync(cssPath)
-  } catch {
-    // File may not exist
-  }
-
-  // Also clean up any other temporary variants that may have been created
-  const tempFiles = [
-    'dist/css/utilities-metadata.tmp.min.css',
-    'dist/css/utilities-metadata.tmp.min.css.map'
-  ]
-
-  for (const file of tempFiles) {
-    try {
-      unlinkSync(path.join(rootDir, file))
-    } catch {
-      // File may not exist, ignore
-    }
-  }
-
-  console.log('✓ Cleaned up temporary files')
-} catch (error) {
-  console.error('Failed to parse extracted JSON:', error.message)
-  console.error('Extracted content:', jsonContent.slice(0, 500))
-  process.exit(1)
-}

build/generate-utilities-metadata.scss

@@ -1,112 +0,0 @@
-// Generate utilities metadata JSON for documentation
-// This file is compiled to extract utility information without generating CSS
-
-@use "sass:map";
-@use "sass:list";
-@use "sass:string";
-@use "sass:meta";
-@use "../scss/config" as *;
-@use "../scss/colors" as *;
-@use "../scss/variables" as *;
-@use "../scss/functions" as *;
-@use "../scss/theme" as *;
-@use "../scss/utilities" as *;
-
-// Access the utilities map
-$utilities-map: $utilities !default;
-
-// Start JSON output
-$json: '{"utilities":{' !default;
-
-$utility-count: 0 !default;
-$total-utilities: list.length(map.keys($utilities-map)) !default;
-
-@each $key, $utility in $utilities-map {
-  $utility-count: $utility-count + 1;
-
-  // Skip if utility is null or false (disabled)
-  @if $utility {
-    // Extract class prefix
-    $class: if(map.has-key($utility, "class"), map.get($utility, "class"), $key);
-
-    // Extract property
-    $property: if(map.has-key($utility, "property"), map.get($utility, "property"), null);
-
-    // Extract values
-    $values: if(map.has-key($utility, "values"), map.get($utility, "values"), null);
-
-    // Generate class list
-    $classes: "";
-    @if $values {
-      @if meta.type-of($values) == "map" {
-        $value-keys: map.keys($values);
-        $first: true;
-        @each $value-key in $value-keys {
-          @if not $first {
-            $classes: $classes + ", ";
-          }
-          $class-name: if($value-key == "null" or $value-key == null, $class, "#{$class}-#{$value-key}");
-          $classes: $classes + '"' + $class-name + '"';
-          $first: false;
-        }
-      } @else if meta.type-of($values) == "list" {
-        $first: true;
-        @each $value in $values {
-          @if not $first {
-            $classes: $classes + ", ";
-          }
-          $class-name: "#{$class}-#{$value}";
-          $classes: $classes + '"' + $class-name + '"';
-          $first: false;
-        }
-      }
-    }
-
-    // Build JSON entry
-    $json: $json + '"' + $key + '":{"class":"' + $class + '"';
-
-    @if $property {
-      @if meta.type-of($property) == "string" {
-        $json: $json + ',"property":"' + $property + '"';
-      } @else if meta.type-of($property) == "list" {
-        $property-str: "";
-        $first: true;
-        @each $prop in $property {
-          @if not $first {
-            $property-str: $property-str + " ";
-          }
-          $property-str: $property-str + $prop;
-          $first: false;
-        }
-        $json: $json + ',"property":"' + $property-str + '"';
-      }
-      // Skip map properties as they're complex and don't translate to JSON well
-    }
-
-    @if $classes != "" {
-      $json: $json + ',"classes":[' + $classes + "]";
-    } @else {
-      $json: $json + ',"classes":[]';
-    }
-
-    $json: $json + "}";
-
-    @if $utility-count < $total-utilities {
-      $json: $json + ",";
-    }
-  }
-}
-
-// stylelint-disable-next-line scss/dollar-variable-default
-$json: $json + "}}";
-
-// Output as CSS comment so it appears in compiled file
-
-/*! BOOTSTRAP-UTILITIES-METADATA-START
-#{$json}
-BOOTSTRAP-UTILITIES-METADATA-END */
-
-// Prevent any actual CSS output
-.bootstrap-utilities-metadata-generator {
-  content: "This file should not generate CSS, only metadata comments";
-}

build/html-validate.mjs

@@ -1,104 +0,0 @@
-#!/usr/bin/env node
-
-/*!
- * Script to run html-validate for HTML validation.
- *
- * This replaces the Java-based vnu-jar validator with a faster, Node.js-only solution.
- * Benefits:
- * - No Java dependency required
- * - Faster execution (no JVM startup time)
- * - Easy to configure with rule-based system
- * - Better integration with Node.js build tools
- *
- * Copyright 2017-2025 The Bootstrap Authors
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- */
-
-import { HtmlValidate } from 'html-validate'
-import { globby } from 'globby'
-
-const htmlValidate = new HtmlValidate({
-  rules: {
-    // Allow autocomplete on buttons (Bootstrap specific)
-    'attribute-allowed-values': 'off',
-    // Allow aria-disabled on links (Bootstrap specific)
-    'aria-label-misuse': 'off',
-    // Allow modern CSS syntax
-    'valid-id': 'off',
-    // Allow void elements with trailing slashes (Astro)
-    'void-style': 'off',
-    // Allow custom attributes
-    'no-unknown-elements': 'off',
-    'attribute-boolean-style': 'off',
-    'no-inline-style': 'off',
-    // KEEP duplicate ID checking enabled (this is important for HTML validity)
-    'no-dup-id': 'error'
-  },
-  elements: [
-    'html5',
-    {
-      // Allow custom attributes for Astro/framework compatibility
-      '*': {
-        attributes: {
-          'is:raw': { boolean: true },
-          switch: { boolean: true },
-          autocomplete: { enum: ['on', 'off', 'new-password', 'current-password'] }
-        }
-      }
-    }
-  ]
-})
-
-async function validateHTML() {
-  try {
-    console.log('Running html-validate validation...')
-
-    // Find all HTML files
-    const files = await globby([
-      '_site/**/*.html',
-      'js/tests/**/*.html'
-    ], {
-      ignore: ['**/node_modules/**']
-    })
-
-    console.log(`Validating ${files.length} HTML files...`)
-
-    let hasErrors = false
-
-    // Validate all files in parallel to avoid await-in-loop
-    const validationPromises = files.map(file =>
-      htmlValidate.validateFile(file).then(report => ({ file, report }))
-    )
-
-    const validationResults = await Promise.all(validationPromises)
-
-    // Process results and check for errors
-    for (const { file, report } of validationResults) {
-      if (!report.valid) {
-        hasErrors = true
-        console.error(`\nErrors in ${file}:`)
-
-        // Extract error messages with reduced nesting
-        const errorMessages = report.results.flatMap(result =>
-          result.messages.filter(message => message.severity === 2)
-        )
-
-        for (const message of errorMessages) {
-          console.error(`  Line ${message.line}:${message.column} - ${message.message} (${message.ruleId})`)
-        }
-      }
-    }
-
-    if (hasErrors) {
-      console.error('\nHTML validation failed!')
-      process.exit(1)
-    } else {
-      console.log('✓ All HTML files are valid!')
-    }
-  } catch (error) {
-    console.error('HTML validation error:', error)
-    process.exit(1)
-  }
-}
-
-validateHTML()

build/postcss.config.mjs

@@ -10,7 +10,8 @@ export default context => {
     plugins: {
       autoprefixer: {
         cascade: false
-      }
+      },
+      rtlcss: context.env === 'RTL'
     }
   }
 }

build/vnu-jar.mjs

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+/*!
+ * Script to run vnu-jar if Java is available.
+ * Copyright 2017-2025 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+import { execFile, spawn } from 'node:child_process'
+import vnu from 'vnu-jar'
+
+execFile('java', ['-version'], (error, stdout, stderr) => {
+  if (error) {
+    console.error('Skipping vnu-jar test; Java is probably missing.')
+    console.error(error)
+    return
+  }
+
+  console.log('Running vnu-jar validation...')
+
+  const is32bitJava = !/64-Bit/.test(stderr)
+
+  // vnu-jar accepts multiple ignores joined with a `|`.
+  // Also note that the ignores are string regular expressions.
+  const ignores = [
+    // "autocomplete" is included in <button> and checkboxes and radio <input>s due to
+    // Firefox's non-standard autocomplete behavior - see https://bugzilla.mozilla.org/show_bug.cgi?id=654072
+    'Attribute “autocomplete” is only allowed when the input type is.*',
+    'Attribute “autocomplete” not allowed on element “button” at this point.',
+    // Per https://www.w3.org/TR/html-aria/#docconformance having "aria-disabled" on a link is
+    // NOT RECOMMENDED, but it's still valid - we explain in the docs that it's not ideal,
+    // and offer more robust alternatives, but also need to show a less-than-ideal example
+    'An “aria-disabled” attribute whose value is “true” should not be specified on an “a” element that has an “href” attribute.',
+    // A `code` element with the `is:raw` attribute coming from remark-prismjs (Astro upstream possible bug)
+    'Attribute “is:raw” is not serializable as XML 1.0.',
+    'Attribute “is:raw” not allowed on element “code” at this point.',
+    // Astro's expecting trailing slashes on HTML tags such as <br />
+    'Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.',
+    // Allow `switch` attribute.
+    'Attribute “switch” not allowed on element “input” at this point.'
+  ].join('|')
+
+  const args = [
+    '-jar',
+    `"${vnu}"`,
+    '--asciiquotes',
+    '--skip-non-html',
+    '--Werror',
+    `--filterpattern "${ignores}"`,
+    '_site/',
+    'js/tests/'
+  ]
+
+  // For the 32-bit Java we need to pass `-Xss512k`
+  if (is32bitJava) {
+    args.splice(0, 0, '-Xss512k')
+  }
+
+  console.log(`command used: java ${args.join(' ')}`)
+
+  return spawn('java', args, {
+    shell: true,
+    stdio: 'inherit'
+  })
+    .on('exit', process.exit)
+})

config.yml

@@ -36,6 +36,8 @@ cdn:
   # See https://www.srihash.org for info on how to generate the hashes
   css:                  "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
   css_hash:             "sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
+  css_rtl:              "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css"
+  css_rtl_hash:         "sha384-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW"
   js:                   "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"
   js_hash:              "sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y"
   js_bundle:            "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"

package.json

@@ -41,17 +41,19 @@
   "scripts": {
     "start": "npm-run-all --parallel watch docs-serve",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
-    "css": "npm-run-all css-compile css-prefix css-minify css-docs",
+    "css": "npm-run-all css-compile css-prefix css-rtl css-minify",
     "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/bootstrap.scss:dist/css/bootstrap.css scss/bootstrap-grid.scss:dist/css/bootstrap-grid.css scss/bootstrap-reboot.scss:dist/css/bootstrap-reboot.css scss/bootstrap-utilities.scss:dist/css/bootstrap-utilities.css",
-    "css-docs": "node build/generate-utilities-json.mjs",
+    "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
     "css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
     "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
     "css-lint-vars": "fusv scss/ site/src/scss/",
     "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
-    "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.tmp.css\"",
+    "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
+    "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
     "css-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*",
-    "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.tmp.css\"",
+    "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
     "css-prefix-examples": "postcss --config build/postcss.config.mjs --replace \"site/src/assets/examples/**/*.css\"",
+    "css-prefix-examples-rtl": "cross-env-shell NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"site/src/assets/examples/\" --ext \".rtl.css\" --base \"site/src/assets/examples/\" \"site/src/assets/examples/{blog,carousel,dashboard,cheatsheet}/*.css\" \"!site/src/assets/examples/{blog,carousel,dashboard,cheatsheet}/*.rtl.css\"",
     "css-test": "jasmine --config=scss/tests/jasmine.js",
     "js": "npm-run-all js-compile js-minify",
     "js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
@@ -75,14 +77,14 @@
     "docs": "npm-run-all docs-build docs-lint",
     "docs-build": "npm run astro-build",
     "docs-compile": "npm run docs-build",
-    "docs-html-validate": "node build/html-validate.mjs",
-    "docs-lint": "npm-run-all docs-prettier-check docs-html-validate",
+    "docs-vnu": "node build/vnu-jar.mjs",
+    "docs-lint": "npm-run-all docs-prettier-check docs-vnu",
     "docs-prettier-check": "prettier --config site/.prettierrc.json -c --cache site",
     "docs-prettier-format": "prettier --config site/.prettierrc.json --write --cache site",
     "docs-serve": "npm run astro-dev",
     "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 @docsearch/js,eslint,eslint-config-xo,eslint-plugin-unicorn,karma-browserstack-launcher,karma-rollup-preprocessor,sass",
+    "update-deps": "ncu -u -x eslint,eslint-config-xo,eslint-plugin-unicorn,karma-browserstack-launcher,karma-rollup-preprocessor,sass",
     "release": "npm-run-all dist release-sri docs-build release-zip*",
     "release-sri": "node build/generate-sri.mjs",
     "release-version": "node build/change-version.mjs",
@@ -93,6 +95,7 @@
     "netlify": "npm-run-all dist release-sri astro-build",
     "watch": "npm-run-all --parallel watch-*",
     "watch-css-main": "nodemon --watch scss/ --ext scss --exec \"npm-run-all css-lint css-compile css-prefix\"",
+    "watch-css-dist": "nodemon --watch dist/css/ --ext css --ignore \"dist/css/*.rtl.*\" --exec \"npm run css-rtl\"",
     "watch-css-docs": "nodemon --watch site/src/scss/ --ext scss --exec \"npm run css-lint\"",
     "watch-css-test": "nodemon --watch scss/ --ext scss,js --exec \"npm run css-test\"",
     "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",
@@ -105,31 +108,31 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.5",
-    "@astrojs/markdown-remark": "^6.3.8",
-    "@astrojs/mdx": "^4.3.10",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/markdown-remark": "^6.3.6",
+    "@astrojs/mdx": "^4.3.4",
     "@astrojs/prism": "^3.3.0",
-    "@astrojs/sitemap": "^3.6.0",
+    "@astrojs/sitemap": "^3.5.0",
     "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
+    "@babel/core": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
     "@docsearch/js": "^3.9.0",
     "@popperjs/core": "^2.11.8",
-    "@rollup/plugin-babel": "^6.1.0",
-    "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-replace": "^6.0.3",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-replace": "^6.0.2",
     "@stackblitz/sdk": "^1.11.0",
     "@types/js-yaml": "^4.0.9",
     "@types/mime": "^4.0.0",
     "@types/prismjs": "^1.26.5",
-    "astro": "^5.15.6",
-    "astro-auto-import": "^0.4.5",
-    "autoprefixer": "^10.4.22",
+    "astro": "^5.13.2",
+    "astro-auto-import": "^0.4.4",
+    "autoprefixer": "^10.4.21",
     "bundlewatch": "^0.4.1",
     "clean-css-cli": "^5.6.3",
     "clipboard": "^2.0.11",
-    "cross-env": "^10.1.0",
+    "cross-env": "^10.0.0",
     "eslint": "8.57.1",
     "eslint-config-xo": "0.45.0",
     "eslint-plugin-html": "^8.1.3",
@@ -138,14 +141,13 @@
     "eslint-plugin-unicorn": "56.0.1",
     "find-unused-sass-variables": "^6.1.0",
     "github-slugger": "^2.0.0",
-    "globby": "^15.0.0",
+    "globby": "^14.1.0",
     "hammer-simulator": "0.0.1",
-    "html-validate": "^8.24.1",
     "htmlparser2": "^10.0.0",
     "image-size": "^2.0.2",
     "ip": "^2.0.1",
-    "jasmine": "^5.12.0",
-    "js-yaml": "^4.1.1",
+    "jasmine": "^5.9.0",
+    "js-yaml": "^4.1.0",
     "karma": "^6.4.4",
     "karma-browserstack-launcher": "1.4.0",
     "karma-chrome-launcher": "^3.2.0",
@@ -157,8 +159,8 @@
     "karma-rollup-preprocessor": "7.0.7",
     "lockfile-lint": "^4.14.1",
     "markdownlint-cli": "^0.45.0",
-    "mime": "^4.1.0",
-    "nodemon": "^3.1.11",
+    "mime": "^4.0.7",
+    "nodemon": "^3.1.10",
     "npm-run-all2": "^8.0.4",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
@@ -167,16 +169,18 @@
     "rehype-autolink-headings": "^7.1.0",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",
-    "rollup": "^4.53.2",
+    "rollup": "^4.46.3",
     "rollup-plugin-istanbul": "^5.0.0",
+    "rtlcss": "^4.3.0",
     "sass": "^1.90.0",
     "sass-true": "^9.0.0",
     "shelljs": "^0.10.0",
-    "stylelint": "^16.25.0",
+    "stylelint": "^16.23.1",
     "stylelint-config-twbs-bootstrap": "^16.1.0",
-    "terser": "^5.44.1",
+    "terser": "^5.43.1",
     "unist-util-visit": "^5.0.0",
-    "zod": "^4.1.12"
+    "vnu-jar": "24.10.17",
+    "zod": "^4.0.17"
   },
   "files": [
     "dist/{css,js}/*.{css,js,map}",
@@ -202,8 +206,5 @@
     "peerDependencies": {
       "@popperjs/core": "^2.11.8"
     }
-  },
-  "overrides": {
-    "volar-service-emmet": "0.0.63"
   }
 }

scss/_accordion.scss

@@ -7,180 +7,156 @@
 @use "mixins/box-shadow" as *;
 @use "mixins/color-mode" as *;
 
-// scss-docs-start accordion-variables
-$accordion-padding-y:                     1rem !default;
-$accordion-padding-x:                     1.25rem !default;
-$accordion-color:                         var(--#{$prefix}color-body) !default;
-$accordion-bg:                            var(--#{$prefix}bg-body) !default;
-$accordion-border-width:                  var(--#{$prefix}border-width) !default;
-$accordion-border-color:                  var(--#{$prefix}border-color) !default;
-$accordion-border-radius:                 var(--#{$prefix}border-radius-lg) !default;
-$accordion-inner-border-radius:           calc(#{$accordion-border-radius} - #{$accordion-border-width}) !default;
+//
+// Base styles
+//
 
-$accordion-body-padding-y:                $accordion-padding-y !default;
-$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:                  var(--#{$prefix}fg-2) !default;
-$accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default;
-$accordion-transition:                    $btn-transition, border-radius .15s ease !default;
-$accordion-button-active-bg:              var(--#{$prefix}bg-2) !default;
-$accordion-button-active-color:           var(--#{$prefix}fg) !default;
-
-$accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
-
-$accordion-icon-width:                    1.25rem !default;
-$accordion-icon-transition:               transform .2s ease-in-out !default;
-$accordion-icon-transform:                rotate(-180deg) !default;
-$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#000' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
-// scss-docs-end accordion-variables
-
-@layer componenents {
-  .accordion {
-    // scss-docs-start accordion-css-vars
-    --#{$prefix}accordion-color: #{$accordion-color};
-    --#{$prefix}accordion-bg: #{$accordion-bg};
-    --#{$prefix}accordion-transition: #{$accordion-transition};
-    --#{$prefix}accordion-border-color: #{$accordion-border-color};
-    --#{$prefix}accordion-border-width: #{$accordion-border-width};
-    --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
-    --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
-    --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
-    --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
-    --#{$prefix}accordion-btn-color: #{$accordion-button-color};
-    --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
-    --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
-    --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
-    --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
-    --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
-    --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
-    --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
-    --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
-    --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
-    --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
-    // scss-docs-end accordion-css-vars
-  }
-
-  .accordion-button {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
-    @include font-size($font-size-base);
-    color: var(--#{$prefix}accordion-btn-color);
-    text-align: start; // Reset button style
-    background-color: var(--#{$prefix}accordion-btn-bg);
-    border: 0;
-    @include border-radius(0);
-    overflow-anchor: none;
-    @include transition(var(--#{$prefix}accordion-transition));
-
-    &:not(.collapsed) {
-      color: var(--#{$prefix}accordion-active-color);
-      background-color: var(--#{$prefix}accordion-active-bg);
-      box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color);
-
-      &::after {
-        background-image: var(--#{$prefix}accordion-btn-active-icon);
-        transform: var(--#{$prefix}accordion-btn-icon-transform);
-      }
-    }
-
-    // Accordion icon
-    &::after {
-      flex-shrink: 0;
-      width: var(--#{$prefix}accordion-btn-icon-width);
-      height: var(--#{$prefix}accordion-btn-icon-width);
-      margin-inline-start: auto;
-      content: "";
-      background-color: var(--#{$prefix}accordion-btn-color);
-      mask: var(--#{$prefix}accordion-btn-icon) no-repeat center 100%;
-      @include transition(var(--#{$prefix}accordion-btn-icon-transition));
-    }
-
-    &:hover {
-      z-index: 2;
-    }
-
-    &:focus {
-      z-index: 3;
-      outline: 0;
-      box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
-    }
-  }
-
-  .accordion-header {
-    margin-bottom: 0;
-  }
-
-  .accordion-item {
-    color: var(--#{$prefix}accordion-color);
-    background-color: var(--#{$prefix}accordion-bg);
-    border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
-
-    &:first-of-type {
-      @include border-top-radius(var(--#{$prefix}accordion-border-radius));
-
-      > .accordion-header .accordion-button {
-        @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
-      }
-    }
-
-    &:not(:first-of-type) {
-      border-block-start: 0;
-    }
-
-    // Only set a border-radius on the last item if the accordion is collapsed
-    &:last-of-type {
-      @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
-
-      > .accordion-header .accordion-button {
-        &.collapsed {
-          @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
-        }
-      }
-
-      > .accordion-collapse {
-        @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
-      }
-    }
-  }
-
-  .accordion-body {
-    padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
-  }
-
-
-  // Flush accordion items
-  //
-  // Remove borders and border-radius to keep accordion items edge-to-edge.
-
-  .accordion-flush {
-    > .accordion-item {
-      border-inline: 0;
-      @include border-radius(0);
-
-      &:first-child { border-block-start: 0; }
-      &:last-child { border-block-end: 0; }
-
-      // stylelint-disable selector-max-class
-      > .accordion-collapse,
-      > .accordion-header .accordion-button,
-      > .accordion-header .accordion-button.collapsed {
-        @include border-radius(0);
-      }
-      // stylelint-enable selector-max-class
-    }
-  }
-
-  // @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)};
-  //     }
-  //   }
-  // }
+.accordion {
+  // scss-docs-start accordion-css-vars
+  --#{$prefix}accordion-color: #{$accordion-color};
+  --#{$prefix}accordion-bg: #{$accordion-bg};
+  --#{$prefix}accordion-transition: #{$accordion-transition};
+  --#{$prefix}accordion-border-color: #{$accordion-border-color};
+  --#{$prefix}accordion-border-width: #{$accordion-border-width};
+  --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
+  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
+  --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
+  --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
+  --#{$prefix}accordion-btn-color: #{$accordion-button-color};
+  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
+  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
+  --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
+  --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
+  --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
+  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
+  --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+  --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
+  --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
+  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
+  --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
+  // scss-docs-end accordion-css-vars
+}
+
+.accordion-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
+  @include font-size($font-size-base);
+  color: var(--#{$prefix}accordion-btn-color);
+  text-align: left; // Reset button style
+  background-color: var(--#{$prefix}accordion-btn-bg);
+  border: 0;
+  @include border-radius(0);
+  overflow-anchor: none;
+  @include transition(var(--#{$prefix}accordion-transition));
+
+  &:not(.collapsed) {
+    color: var(--#{$prefix}accordion-active-color);
+    background-color: var(--#{$prefix}accordion-active-bg);
+    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color);
+
+    &::after {
+      background-image: var(--#{$prefix}accordion-btn-active-icon);
+      transform: var(--#{$prefix}accordion-btn-icon-transform);
+    }
+  }
+
+  // Accordion icon
+  &::after {
+    flex-shrink: 0;
+    width: var(--#{$prefix}accordion-btn-icon-width);
+    height: var(--#{$prefix}accordion-btn-icon-width);
+    margin-left: auto;
+    content: "";
+    background-image: var(--#{$prefix}accordion-btn-icon);
+    background-repeat: no-repeat;
+    background-size: var(--#{$prefix}accordion-btn-icon-width);
+    @include transition(var(--#{$prefix}accordion-btn-icon-transition));
+  }
+
+  &:hover {
+    z-index: 2;
+  }
+
+  &:focus {
+    z-index: 3;
+    outline: 0;
+    box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+  }
+}
+
+.accordion-header {
+  margin-bottom: 0;
+}
+
+.accordion-item {
+  color: var(--#{$prefix}accordion-color);
+  background-color: var(--#{$prefix}accordion-bg);
+  border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+
+  &:first-of-type {
+    @include border-top-radius(var(--#{$prefix}accordion-border-radius));
+
+    > .accordion-header .accordion-button {
+      @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
+    }
+  }
+
+  &:not(:first-of-type) {
+    border-top: 0;
+  }
+
+  // Only set a border-radius on the last item if the accordion is collapsed
+  &:last-of-type {
+    @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+
+    > .accordion-header .accordion-button {
+      &.collapsed {
+        @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
+      }
+    }
+
+    > .accordion-collapse {
+      @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+    }
+  }
+}
+
+.accordion-body {
+  padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
+}
+
+
+// Flush accordion items
+//
+// Remove borders and border-radius to keep accordion items edge-to-edge.
+
+.accordion-flush {
+  > .accordion-item {
+    border-right: 0;
+    border-left: 0;
+    @include border-radius(0);
+
+    &:first-child { border-top: 0; }
+    &:last-child { border-bottom: 0; }
+
+    // stylelint-disable selector-max-class
+    > .accordion-collapse,
+    > .accordion-header .accordion-button,
+    > .accordion-header .accordion-button.collapsed {
+      @include border-radius(0);
+    }
+    // stylelint-enable selector-max-class
+  }
+}
+
+@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)};
+    }
+  }
 }

scss/_alert.scss

@@ -1,69 +1,73 @@
 @use "sass:map";
 @use "config" as *;
-@use "theme" as *;
 @use "variables" as *;
 @use "mixins/border-radius" as *;
 
-// scss-docs-start alert-variables
-$alert-padding-y:               $spacer !default;
-$alert-padding-x:               $spacer !default;
-$alert-margin-bottom:           1rem !default;
-$alert-border-radius:           var(--#{$prefix}border-radius) !default;
-$alert-link-font-weight:        $font-weight-bold !default;
-$alert-border-width:            var(--#{$prefix}border-width) !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
+//
+// Base styles
+//
 
-@layer components {
-  .alert {
-    // scss-docs-start alert-css-vars
-    --#{$prefix}alert-bg: var(--#{$prefix}theme-bg-subtle, transparent);
-    --#{$prefix}alert-padding-x: #{$alert-padding-x};
-    --#{$prefix}alert-padding-y: #{$alert-padding-y};
-    --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
-    --#{$prefix}alert-color: var(--#{$prefix}theme-text, inherit);
-    --#{$prefix}alert-border-color: transparent;
-    --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}theme-border, var(--#{$prefix}alert-border-color));
-    --#{$prefix}alert-border-radius: #{$alert-border-radius};
-    --#{$prefix}alert-link-color: inherit;
-    // scss-docs-end alert-css-vars
+.alert {
+  // scss-docs-start alert-css-vars
+  --#{$prefix}alert-bg: transparent;
+  --#{$prefix}alert-padding-x: #{$alert-padding-x};
+  --#{$prefix}alert-padding-y: #{$alert-padding-y};
+  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
+  --#{$prefix}alert-color: inherit;
+  --#{$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;
-    padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
-    // margin-bottom: var(--#{$prefix}alert-margin-bottom);
-    color: var(--#{$prefix}alert-color);
-    background-color: var(--#{$prefix}alert-bg);
-    border: var(--#{$prefix}alert-border);
-    @include border-radius(var(--#{$prefix}alert-border-radius));
-  }
+  position: relative;
+  padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
+  margin-bottom: var(--#{$prefix}alert-margin-bottom);
+  color: var(--#{$prefix}alert-color);
+  background-color: var(--#{$prefix}alert-bg);
+  border: var(--#{$prefix}alert-border);
+  @include border-radius(var(--#{$prefix}alert-border-radius));
+}
 
-  // Headings for larger alerts
-  .alert-heading {
-    // Specified to prevent conflicts of changing $headings-color
-    color: inherit;
-  }
+// Headings for larger alerts
+.alert-heading {
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+}
 
-  // Provide class for links that match alerts
-  .alert-link {
-    font-weight: $alert-link-font-weight;
-    color: var(--#{$prefix}alert-link-color);
-  }
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+  color: var(--#{$prefix}alert-link-color);
+}
 
 
-  // Dismissible alerts
-  //
-  // Expand the right padding and account for the close button's positioning.
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
 
-  .alert-dismissible {
-    padding-inline-end: $alert-dismissible-padding-r;
+.alert-dismissible {
+  padding-right: $alert-dismissible-padding-r;
 
-    // Adjust close link position
-    .btn-close {
-      position: absolute;
-      top: 0;
-      right: 0;
-      z-index: $stretched-link-z-index + 1;
-      padding: $alert-padding-y * 1.25 $alert-padding-x;
-    }
+  // Adjust close link position
+  .btn-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: $stretched-link-z-index + 1;
+    padding: $alert-padding-y * 1.25 $alert-padding-x;
   }
 }
+
+
+// scss-docs-start alert-modifiers
+// Generate contextual modifier classes for colorizing the alert
+@each $state in map.keys($theme-colors) {
+  .alert-#{$state} {
+    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
+    --#{$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-emphasis);
+  }
+}
+// scss-docs-end alert-modifiers

scss/_badge.scss

@@ -1,59 +1,44 @@
 @use "config" as *;
-@use "colors" as *;
 @use "variables" as *;
-@use "theme" as *;
 @use "mixins/border-radius" as *;
 @use "mixins/gradients" as *;
 @use "vendor/rfs" as *;
 
-// scss-docs-start badge-variables
-$badge-font-size:                   .75em !default;
-$badge-font-weight:                 $font-weight-bold !default;
-$badge-color:                       inherit !default;
-$badge-padding-y:                   .35em !default;
-$badge-padding-x:                   .5em !default;
-$badge-border-radius:               var(--#{$prefix}border-radius) !default;
-// scss-docs-end badge-variables
+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
 
-@layer components {
-  .badge {
-    // scss-docs-start badge-css-vars
-    --#{$prefix}badge-padding-x: #{$badge-padding-x};
-    --#{$prefix}badge-padding-y: #{$badge-padding-y};
-    @include rfs($badge-font-size, --#{$prefix}badge-font-size);
-    --#{$prefix}badge-font-weight: #{$badge-font-weight};
-    --#{$prefix}badge-color: var(--#{$prefix}theme-contrast, #{$badge-color});
-    --#{$prefix}badge-bg: var(--#{$prefix}theme-bg, var(--#{$prefix}bg-2));
-    --#{$prefix}badge-border-radius: #{$badge-border-radius};
-    // scss-docs-end badge-css-vars
+.badge {
+  // scss-docs-start badge-css-vars
+  --#{$prefix}badge-padding-x: #{$badge-padding-x};
+  --#{$prefix}badge-padding-y: #{$badge-padding-y};
+  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
+  --#{$prefix}badge-font-weight: #{$badge-font-weight};
+  --#{$prefix}badge-color: #{$badge-color};
+  --#{$prefix}badge-border-radius: #{$badge-border-radius};
+  // scss-docs-end badge-css-vars
 
-    display: inline-block;
-    padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
-    @include font-size(var(--#{$prefix}badge-font-size));
-    font-weight: var(--#{$prefix}badge-font-weight);
-    line-height: 1;
-    color: var(--#{$prefix}badge-color);
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-    background-color: var(--#{$prefix}badge-bg);
-    @include border-radius(var(--#{$prefix}badge-border-radius));
-    @include gradient-bg();
+  display: inline-block;
+  padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
+  @include font-size(var(--#{$prefix}badge-font-size));
+  font-weight: var(--#{$prefix}badge-font-weight);
+  line-height: 1;
+  color: var(--#{$prefix}badge-color);
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  @include border-radius(var(--#{$prefix}badge-border-radius));
+  @include gradient-bg();
 
-    // Empty badges collapse automatically
-    &:empty {
-      display: none;
-    }
-  }
-
-  // Quick fix for badges in buttons
-  .btn .badge {
-    position: relative;
-    top: -1px;
-  }
-
-  .badge-subtle {
-    --#{$prefix}badge-color: var(--#{$prefix}theme-text);
-    --#{$prefix}badge-bg: var(--#{$prefix}theme-bg-subtle);
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
   }
 }
+
+// Quick fix for badges in buttons
+.btn .badge {
+  position: relative;
+  top: -1px;
+}

scss/_breadcrumb.scss

@@ -1,67 +1,45 @@
-@use "sass:string";
 @use "config" as *;
 @use "variables" as *;
-@use "functions" as *;
 @use "mixins/border-radius" as *;
 @use "vendor/rfs" as *;
 
-// scss-docs-start breadcrumb-variables
-$breadcrumb-font-size:              null !default;
-$breadcrumb-padding-y:              0 !default;
-$breadcrumb-padding-x:              0 !default;
-$breadcrumb-item-padding-x:         .5rem !default;
-$breadcrumb-margin-bottom:          1rem !default;
-$breadcrumb-bg:                     null !default;
-$breadcrumb-divider-color:          var(--#{$prefix}secondary-color) !default;
-$breadcrumb-active-color:           var(--#{$prefix}secondary-color) !default;
-$breadcrumb-divider:                string.quote("/") !default;
-$breadcrumb-divider-flipped:        $breadcrumb-divider !default;
-$breadcrumb-border-radius:          null !default;
-// scss-docs-end breadcrumb-variables
+.breadcrumb {
+  // scss-docs-start breadcrumb-css-vars
+  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
+  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
+  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
+  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
+  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
+  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
+  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
+  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
+  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
+  // scss-docs-end breadcrumb-css-vars
 
-@layer components {
-  .breadcrumb {
-    // scss-docs-start breadcrumb-css-vars
-    --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
-    --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
-    --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
-    @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
-    --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
-    --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
-    --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
-    --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
-    --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
-    // scss-docs-end breadcrumb-css-vars
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
+  margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
+  @include font-size(var(--#{$prefix}breadcrumb-font-size));
+  list-style: none;
+  background-color: var(--#{$prefix}breadcrumb-bg);
+  @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
+}
 
-    display: flex;
-    flex-wrap: wrap;
-    padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
-    margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
-    @include font-size(var(--#{$prefix}breadcrumb-font-size));
-    list-style: none;
-    background-color: var(--#{$prefix}breadcrumb-bg);
-    @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
+.breadcrumb-item {
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
+  + .breadcrumb-item {
+    padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
+
+    &::before {
+      float: left; // Suppress inline spacings and underlining of the separator
+      padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
+      color: var(--#{$prefix}breadcrumb-divider-color);
+      content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+    }
   }
 
-  .breadcrumb-item {
-    // The separator between breadcrumbs (by default, a forward-slash: "/")
-    + .breadcrumb-item {
-      padding-inline-start: var(--#{$prefix}breadcrumb-item-padding-x);
-
-      &::before {
-        float: inline-start; // Suppress inline spacings and underlining of the separator
-        padding-inline-end: var(--#{$prefix}breadcrumb-item-padding-x);
-        color: var(--#{$prefix}breadcrumb-divider-color);
-        content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider));
-      }
-    }
-
-    [dir="rtl"] &:not(:first-child)::before {
-      content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped));
-    }
-
-    &.active {
-      color: var(--#{$prefix}breadcrumb-item-active-color);
-    }
+  &.active {
+    color: var(--#{$prefix}breadcrumb-item-active-color);
   }
 }

scss/_button-group.scss

@@ -0,0 +1,152 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+
+// Make the div behave like a button
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle; // match .btn alignment given font-size hack above
+
+  > .btn {
+    position: relative;
+    flex: 1 1 auto;
+  }
+
+  // Bring the hover, focused, and "active" buttons to the front to overlay
+  // the borders properly
+  > .btn-check:checked + .btn,
+  > .btn-check:focus + .btn,
+  > .btn:hover,
+  > .btn:focus,
+  > .btn:active,
+  > .btn.active {
+    z-index: 1;
+  }
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  .input-group {
+    width: auto;
+  }
+}
+
+.btn-group {
+  @include border-radius($btn-border-radius);
+
+  // Prevent double borders when buttons are next to each other
+  > :not(.btn-check:first-child) + .btn,
+  > .btn-group:not(:first-child) {
+    margin-left: calc(-1 * #{$btn-border-width});
+  }
+
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn.dropdown-toggle-split:first-child,
+  > .btn-group:not(:last-child) > .btn {
+    @include border-end-radius(0);
+  }
+
+  // The left radius should be 0 if the button is:
+  // - the "third or more" child
+  // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
+  // - part of a btn-group which isn't the first child
+  > .btn:nth-child(n + 3),
+  > :not(.btn-check) + .btn,
+  > .btn-group:not(:first-child) > .btn {
+    @include border-start-radius(0);
+  }
+}
+
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-sm > .btn { @extend .btn-sm; }
+.btn-group-lg > .btn { @extend .btn-lg; }
+
+
+//
+// Split button dropdowns
+//
+
+.dropdown-toggle-split {
+  padding-right: $btn-padding-x * .75;
+  padding-left: $btn-padding-x * .75;
+
+  &::after,
+  .dropup &::after,
+  .dropend &::after {
+    margin-left: 0;
+  }
+
+  .dropstart &::before {
+    margin-right: 0;
+  }
+}
+
+.btn-sm + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-sm * .75;
+  padding-left: $btn-padding-x-sm * .75;
+}
+
+.btn-lg + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-lg * .75;
+  padding-left: $btn-padding-x-lg * .75;
+}
+
+
+// The clickable button for toggling the menu
+// Set the same inset shadow as the :active state
+.btn-group.show .dropdown-toggle {
+  @include box-shadow($btn-active-box-shadow);
+
+  // Show no shadow for `.btn-link` since it has no other button styles.
+  &.btn-link {
+    @include box-shadow(none);
+  }
+}
+
+
+//
+// Vertical button groups
+//
+
+.btn-group-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  > .btn,
+  > .btn-group {
+    width: 100%;
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-top: calc(-1 * #{$btn-border-width});
+  }
+
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-bottom-radius(0);
+  }
+
+  // The top radius should be 0 if the button is:
+  // - the "third or more" child
+  // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
+  // - part of a btn-group which isn't the first child
+  > .btn:nth-child(n + 3),
+  > :not(.btn-check) + .btn,
+  > .btn-group:not(:first-child) > .btn {
+    @include border-top-radius(0);
+  }
+}

scss/_buttons.scss

@@ -0,0 +1,299 @@
+@use "sass:color";
+@use "colors" as *;
+@use "config" as *;
+@use "variables" as *;
+@use "functions" as *;
+@use "vendor/rfs" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/transition" as *;
+@use "mixins/gradients" as *;
+
+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+// scss-docs-start btn-variant-mixin
+@mixin button-variant(
+  $background,
+  $border,
+  $color: color-contrast($background),
+  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+  $hover-color: color-contrast($hover-background),
+  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+  $active-color: color-contrast($active-background),
+  $disabled-background: $background,
+  $disabled-border: $border,
+  $disabled-color: color-contrast($disabled-background)
+) {
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: #{$background};
+  --#{$prefix}btn-border-color: #{$border};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-bg: #{$disabled-background};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+}
+// scss-docs-end btn-variant-mixin
+
+// scss-docs-start btn-outline-variant-mixin
+@mixin button-outline-variant(
+  $color,
+  $color-hover: color-contrast($color),
+  $active-background: $color,
+  $active-border: $color,
+  $active-color: color-contrast($active-background)
+) {
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-border-color: #{$color};
+  --#{$prefix}btn-hover-color: #{$color-hover};
+  --#{$prefix}btn-hover-bg: #{$active-background};
+  --#{$prefix}btn-hover-border-color: #{$active-border};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$color};
+  --#{$prefix}btn-disabled-bg: transparent;
+  --#{$prefix}btn-disabled-border-color: #{$color};
+  --#{$prefix}gradient: none;
+}
+// scss-docs-end btn-outline-variant-mixin
+
+// scss-docs-start btn-size-mixin
+@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
+  --#{$prefix}btn-padding-y: #{$padding-y};
+  --#{$prefix}btn-padding-x: #{$padding-x};
+  @include rfs($font-size, --#{$prefix}btn-font-size);
+  --#{$prefix}btn-border-radius: #{$border-radius};
+}
+// scss-docs-end btn-size-mixin
+
+
+//
+// Base styles
+//
+
+.btn {
+  // scss-docs-start btn-css-vars
+  --#{$prefix}btn-padding-x: #{$btn-padding-x};
+  --#{$prefix}btn-padding-y: #{$btn-padding-y};
+  --#{$prefix}btn-font-family: #{$btn-font-family};
+  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
+  --#{$prefix}btn-font-weight: #{$btn-font-weight};
+  --#{$prefix}btn-line-height: #{$btn-line-height};
+  --#{$prefix}btn-color: #{$btn-color};
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-border-width: #{$btn-border-width};
+  --#{$prefix}btn-border-color: transparent;
+  --#{$prefix}btn-border-radius: #{$btn-border-radius};
+  --#{$prefix}btn-hover-border-color: transparent;
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
+  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
+  // scss-docs-end btn-css-vars
+
+  display: inline-block;
+  padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
+  font-family: var(--#{$prefix}btn-font-family);
+  @include font-size(var(--#{$prefix}btn-font-size));
+  font-weight: var(--#{$prefix}btn-font-weight);
+  line-height: var(--#{$prefix}btn-line-height);
+  color: var(--#{$prefix}btn-color);
+  text-align: center;
+  text-decoration: if($link-decoration == none, null, none);
+  white-space: $btn-white-space;
+  vertical-align: middle;
+  cursor: if($enable-button-pointers, pointer, null);
+  user-select: none;
+  border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
+  @include border-radius(var(--#{$prefix}btn-border-radius));
+  @include gradient-bg(var(--#{$prefix}btn-bg));
+  @include box-shadow(var(--#{$prefix}btn-box-shadow));
+  @include transition($btn-transition);
+
+  &:hover {
+    color: var(--#{$prefix}btn-hover-color);
+    text-decoration: if($link-hover-decoration == underline, none, null);
+    background-color: var(--#{$prefix}btn-hover-bg);
+    border-color: var(--#{$prefix}btn-hover-border-color);
+  }
+
+  .btn-check + &:hover {
+    // override for the checkbox/radio buttons
+    color: var(--#{$prefix}btn-color);
+    background-color: var(--#{$prefix}btn-bg);
+    border-color: var(--#{$prefix}btn-border-color);
+  }
+
+  &:focus-visible {
+    color: var(--#{$prefix}btn-hover-color);
+    @include gradient-bg(var(--#{$prefix}btn-hover-bg));
+    border-color: var(--#{$prefix}btn-hover-border-color);
+    outline: 0;
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
+    } @else {
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    }
+  }
+
+  .btn-check:focus-visible + & {
+    border-color: var(--#{$prefix}btn-hover-border-color);
+    outline: 0;
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
+    } @else {
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    }
+  }
+
+  .btn-check:checked + &,
+  :not(.btn-check) + &:active,
+  &:first-child:active,
+  &.active,
+  &.show {
+    color: var(--#{$prefix}btn-active-color);
+    background-color: var(--#{$prefix}btn-active-bg);
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$prefix}btn-active-border-color);
+    @include box-shadow(var(--#{$prefix}btn-active-shadow));
+
+    &:focus-visible {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      @if $enable-shadows {
+        box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
+      } @else {
+        box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+      }
+    }
+  }
+
+  .btn-check:checked:focus-visible + & {
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
+    } @else {
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
+    }
+  }
+
+  &:disabled,
+  &.disabled,
+  fieldset:disabled & {
+    color: var(--#{$prefix}btn-disabled-color);
+    pointer-events: none;
+    background-color: var(--#{$prefix}btn-disabled-bg);
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$prefix}btn-disabled-border-color);
+    opacity: var(--#{$prefix}btn-disabled-opacity);
+    @include box-shadow(none);
+  }
+}
+
+
+//
+// Alternate buttons
+//
+
+// scss-docs-start btn-variant-loops
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @if $color == "light" {
+      @include button-variant(
+        $value,
+        $value,
+        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+        $active-background: shade-color($value, $btn-active-bg-shade-amount),
+        $active-border: shade-color($value, $btn-active-border-shade-amount)
+      );
+    } @else if $color == "dark" {
+      @include button-variant(
+        $value,
+        $value,
+        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
+        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
+        $active-background: tint-color($value, $btn-active-bg-tint-amount),
+        $active-border: tint-color($value, $btn-active-border-tint-amount)
+      );
+    } @else {
+      @include button-variant($value, $value);
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}
+// scss-docs-end btn-variant-loops
+
+
+//
+// Link buttons
+//
+
+// Make a button look and behave like a link
+.btn-link {
+  --#{$prefix}btn-font-weight: #{$font-weight-normal};
+  --#{$prefix}btn-color: #{$btn-link-color};
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-border-color: transparent;
+  --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
+  --#{$prefix}btn-hover-border-color: transparent;
+  --#{$prefix}btn-active-color: #{$btn-link-hover-color};
+  --#{$prefix}btn-active-border-color: transparent;
+  --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
+  --#{$prefix}btn-disabled-border-color: transparent;
+  --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
+  --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
+
+  text-decoration: $link-decoration;
+  @if $enable-gradients {
+    background-image: none;
+  }
+
+  &:hover,
+  &:focus-visible {
+    text-decoration: $link-hover-decoration;
+  }
+
+  &:focus-visible {
+    color: var(--#{$prefix}btn-color);
+  }
+
+  &:hover {
+    color: var(--#{$prefix}btn-hover-color);
+  }
+
+  // No need for an active state here
+}
+
+
+//
+// Button Sizes
+//
+
+.btn-lg {
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
+}
+
+.btn-sm {
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
+}

scss/_card.scss

@@ -4,247 +4,238 @@
 @use "mixins/box-shadow" as *;
 @use "layout/breakpoints" as *;
 
-// scss-docs-start card-variables
-$card-spacer-y:                     $spacer !default;
-$card-spacer-x:                     $spacer !default;
-$card-title-spacer-y:               $spacer * .5 !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:                var(--#{$prefix}border-radius) !default;
-$card-box-shadow:                   null !default;
-$card-inner-border-radius:          calc(#{$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(var(--#{$prefix}body-color-rgb), .03) !default;
-$card-cap-color:                    null !default;
-$card-height:                       null !default;
-$card-color:                        null !default;
-$card-bg:                           var(--#{$prefix}bg-body) !default;
-$card-img-overlay-padding:          $spacer !default;
-$card-group-margin:                 $grid-gutter-width * .5 !default;
-// scss-docs-end card-variables
+//
+// Base styles
+//
 
-@layer components {
-  .card {
-    // scss-docs-start card-css-vars
-    --#{$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};
-    --#{$prefix}card-box-shadow: #{$card-box-shadow};
-    --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
-    --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
-    --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
-    --#{$prefix}card-cap-bg: #{$card-cap-bg};
-    --#{$prefix}card-cap-color: #{$card-cap-color};
-    --#{$prefix}card-height: #{$card-height};
-    --#{$prefix}card-color: #{$card-color};
-    --#{$prefix}card-bg: #{$card-bg};
-    --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
-    --#{$prefix}card-group-margin: #{$card-group-margin};
-    // scss-docs-end card-css-vars
+.card {
+  // scss-docs-start card-css-vars
+  --#{$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};
+  --#{$prefix}card-box-shadow: #{$card-box-shadow};
+  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
+  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
+  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
+  --#{$prefix}card-cap-bg: #{$card-cap-bg};
+  --#{$prefix}card-cap-color: #{$card-cap-color};
+  --#{$prefix}card-height: #{$card-height};
+  --#{$prefix}card-color: #{$card-color};
+  --#{$prefix}card-bg: #{$card-bg};
+  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
+  --#{$prefix}card-group-margin: #{$card-group-margin};
+  // scss-docs-end card-css-vars
 
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
-    height: var(--#{$prefix}card-height);
-    color: var(--#{$prefix}color-body);
-    word-wrap: break-word;
-    background-color: var(--#{$prefix}card-bg);
-    background-clip: border-box;
-    border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
-    @include border-radius(var(--#{$prefix}card-border-radius));
-    @include box-shadow(var(--#{$prefix}card-box-shadow));
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+  height: var(--#{$prefix}card-height);
+  color: var(--#{$prefix}body-color);
+  word-wrap: break-word;
+  background-color: var(--#{$prefix}card-bg);
+  background-clip: border-box;
+  border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+  @include border-radius(var(--#{$prefix}card-border-radius));
+  @include box-shadow(var(--#{$prefix}card-box-shadow));
 
-    > hr {
-      margin-inline: 0;
-    }
-
-    > .list-group {
-      border-block: inherit;
-
-      &:first-child {
-        border-block-start-width: 0;
-        @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
-      }
-
-      &:last-child  {
-        border-block-end-width: 0;
-        @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
-      }
-    }
-
-    // Due to specificity of the above selector (`.card > .list-group`), we must
-    // use a child selector here to prevent double borders.
-    > .card-header + .list-group,
-    > .list-group + .card-footer {
-      border-block-start: 0;
-    }
+  > hr {
+    margin-right: 0;
+    margin-left: 0;
   }
 
-  .card-body {
-    // Enable `flex-grow: 1` for decks and groups so that card blocks take up
-    // as much space as possible, ensuring footers are aligned to the bottom.
-    flex: 1 1 auto;
-    padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
-    color: var(--#{$prefix}card-color);
-  }
-
-  .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));
-    margin-bottom: 0;
-    color: var(--#{$prefix}card-subtitle-color);
-  }
-
-  .card-text:last-child {
-    margin-bottom: 0;
-  }
-
-  .card-link {
-    &:hover {
-      text-decoration: none;
-    }
-
-    + .card-link {
-      margin-inline-start: var(--#{$prefix}card-spacer-x);
-    }
-  }
-
-  //
-  // Optional textual caps
-  //
-
-  .card-header {
-    padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
-    margin-bottom: 0; // Removes the default margin-bottom of <hN>
-    color: var(--#{$prefix}card-cap-color);
-    background-color: var(--#{$prefix}card-cap-bg);
-    border-block-end: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+  > .list-group {
+    border-top: inherit;
+    border-bottom: inherit;
 
     &:first-child {
-      @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
+      border-top-width: 0;
+      @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
+    }
+
+    &:last-child  {
+      border-bottom-width: 0;
+      @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
     }
   }
 
-  .card-footer {
-    padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
-    color: var(--#{$prefix}card-cap-color);
-    background-color: var(--#{$prefix}card-cap-bg);
-    border-block-start: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+  // Due to specificity of the above selector (`.card > .list-group`), we must
+  // use a child selector here to prevent double borders.
+  > .card-header + .list-group,
+  > .list-group + .card-footer {
+    border-top: 0;
+  }
+}
 
-    &:last-child {
-      @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
-    }
+.card-body {
+  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
+  // as much space as possible, ensuring footers are aligned to the bottom.
+  flex: 1 1 auto;
+  padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
+  color: var(--#{$prefix}card-color);
+}
+
+.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));
+  margin-bottom: 0;
+  color: var(--#{$prefix}card-subtitle-color);
+}
+
+.card-text:last-child {
+  margin-bottom: 0;
+}
+
+.card-link {
+  &:hover {
+    text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
+  + .card-link {
+    margin-left: var(--#{$prefix}card-spacer-x);
+  }
+}
 
-  //
-  // Header navs
-  //
+//
+// Optional textual caps
+//
 
-  .card-header-tabs {
-    margin-inline: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
-    margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y));
-    border-block-end: 0;
+.card-header {
+  padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
+  margin-bottom: 0; // Removes the default margin-bottom of <hN>
+  color: var(--#{$prefix}card-cap-color);
+  background-color: var(--#{$prefix}card-cap-bg);
+  border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
 
-    .nav-link.active {
-      background-color: var(--#{$prefix}card-bg);
-      border-block-end-color: var(--#{$prefix}card-bg);
-    }
+  &:first-child {
+    @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
+  }
+}
+
+.card-footer {
+  padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
+  color: var(--#{$prefix}card-cap-color);
+  background-color: var(--#{$prefix}card-cap-bg);
+  border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+
+  &:last-child {
+    @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
+  }
+}
+
+
+//
+// Header navs
+//
+
+.card-header-tabs {
+  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+  margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y));
+  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+  border-bottom: 0;
+
+  .nav-link.active {
+    background-color: var(--#{$prefix}card-bg);
+    border-bottom-color: var(--#{$prefix}card-bg);
+  }
+}
+
+.card-header-pills {
+  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+}
+
+// Card image
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: var(--#{$prefix}card-img-overlay-padding);
+  @include border-radius(var(--#{$prefix}card-inner-border-radius));
+}
+
+.card-img,
+.card-img-top,
+.card-img-bottom {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+}
+
+.card-img,
+.card-img-top {
+  @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
+}
+
+.card-img,
+.card-img-bottom {
+  @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
+}
+
+
+//
+// Card groups
+//
+
+.card-group {
+  // The child selector allows nested `.card` within `.card-group`
+  // to display properly.
+  > .card {
+    margin-bottom: var(--#{$prefix}card-group-margin);
   }
 
-  .card-header-pills {
-    margin-inline: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
-  }
-
-  // Card image
-  .card-img-overlay {
-    position: absolute;
-    inset: 0;
-    padding: var(--#{$prefix}card-img-overlay-padding);
-    @include border-radius(var(--#{$prefix}card-inner-border-radius));
-  }
-
-  .card-img,
-  .card-img-top,
-  .card-img-bottom {
-    width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
-  }
-
-  .card-img,
-  .card-img-top {
-    @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
-  }
-
-  .card-img,
-  .card-img-bottom {
-    @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
-  }
-
-
-  //
-  // Card groups
-  //
-
-  .card-group {
+  @include media-breakpoint-up(sm) {
+    display: flex;
+    flex-flow: row wrap;
     // The child selector allows nested `.card` within `.card-group`
     // to display properly.
     > .card {
-      margin-bottom: var(--#{$prefix}card-group-margin);
-    }
+      flex: 1 0 0;
+      margin-bottom: 0;
 
-    @include media-breakpoint-up(sm) {
-      display: flex;
-      flex-flow: row wrap;
-      // The child selector allows nested `.card` within `.card-group`
-      // to display properly.
-      > .card {
-        flex: 1 0 0;
-        margin-bottom: 0;
+      + .card {
+        margin-left: 0;
+        border-left: 0;
+      }
 
-        + .card {
-          margin-inline-start: 0;
-          border-inline-start: 0;
+      // Handle rounded corners
+      @if $enable-rounded {
+        &:not(:last-child) {
+          @include border-end-radius(0);
+
+          > .card-img-top,
+          > .card-header {
+            // stylelint-disable-next-line property-disallowed-list
+            border-top-right-radius: 0;
+          }
+          > .card-img-bottom,
+          > .card-footer {
+            // stylelint-disable-next-line property-disallowed-list
+            border-bottom-right-radius: 0;
+          }
         }
 
-        // Handle rounded corners
-        @if $enable-rounded {
-          &:not(:last-child) {
-            @include border-end-radius(0);
+        &:not(:first-child) {
+          @include border-start-radius(0);
 
-            > .card-img-top,
-            > .card-header {
-              border-start-end-radius: 0;
-            }
-            > .card-img-bottom,
-            > .card-footer {
-              border-end-end-radius: 0;
-            }
+          > .card-img-top,
+          > .card-header {
+            // stylelint-disable-next-line property-disallowed-list
+            border-top-left-radius: 0;
           }
-
-          &:not(:first-child) {
-            @include border-start-radius(0);
-
-            > .card-img-top,
-            > .card-header {
-              border-start-start-radius: 0;
-            }
-            > .card-img-bottom,
-            > .card-footer {
-              border-end-start-radius: 0;
-            }
+          > .card-img-bottom,
+          > .card-footer {
+            // stylelint-disable-next-line property-disallowed-list
+            border-bottom-left-radius: 0;
           }
         }
       }

scss/_carousel.scss

@@ -1,48 +1,10 @@
 @use "config" as *;
-@use "colors" as *;
 @use "variables" as *;
 @use "mixins/transition" as *;
 @use "mixins/gradients" as *;
 @use "mixins/color-mode" as *;
 @use "vendor/rfs" as *;
 
-// scss-docs-start carousel-variables
-$carousel-control-color:             $white !default;
-$carousel-control-width:             15% !default;
-$carousel-control-opacity:           .5 !default;
-$carousel-control-hover-opacity:     .9 !default;
-$carousel-control-transition:        opacity .15s ease !default;
-$carousel-control-icon-filter:       null !default;
-
-$carousel-indicator-width:           30px !default;
-$carousel-indicator-height:          3px !default;
-$carousel-indicator-hit-area-height: 10px !default;
-$carousel-indicator-spacer:          3px !default;
-$carousel-indicator-opacity:         .5 !default;
-$carousel-indicator-active-bg:       $white !default;
-$carousel-indicator-active-opacity:  1 !default;
-$carousel-indicator-transition:      opacity .6s ease !default;
-
-$carousel-caption-width:             70% !default;
-$carousel-caption-color:             $white !default;
-$carousel-caption-padding-y:         1.25rem !default;
-$carousel-caption-spacer:            1.25rem !default;
-
-$carousel-control-icon-width:        2rem !default;
-
-$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>") !default;
-$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>") !default;
-
-$carousel-transition-duration:       .6s !default;
-$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
-// scss-docs-end carousel-variables
-
-// scss-docs-start carousel-dark-variables
-$carousel-indicator-active-bg-dark:   $black !default;
-$carousel-caption-color-dark:         $black !default;
-$carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
-// scss-docs-end carousel-dark-variables
-
 // Notes on the classes:
 //
 // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
@@ -56,221 +18,216 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
 // 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
 //    is the upcoming slide in transition.
 
-@layer components {
-  .carousel {
-    position: relative;
-  }
+.carousel {
+  position: relative;
+}
 
-  .carousel.pointer-event {
-    touch-action: pan-y;
-  }
+.carousel.pointer-event {
+  touch-action: pan-y;
+}
 
-  .carousel-inner {
-    position: relative;
-    display: flow-root;
-    width: 100%;
-    overflow: hidden;
-  }
+.carousel-inner {
+  position: relative;
+  display: flow-root;
+  width: 100%;
+  overflow: hidden;
+}
 
+.carousel-item {
+  position: relative;
+  display: none;
+  float: left;
+  width: 100%;
+  margin-right: -100%;
+  backface-visibility: hidden;
+  @include transition($carousel-transition);
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
+}
+
+.carousel-item-next:not(.carousel-item-start),
+.active.carousel-item-end {
+  transform: translateX(100%);
+}
+
+.carousel-item-prev:not(.carousel-item-end),
+.active.carousel-item-start {
+  transform: translateX(-100%);
+}
+
+
+//
+// Alternate transitions
+//
+
+.carousel-fade {
   .carousel-item {
-    position: relative;
-    display: none;
-    float: inline-start;
-    width: 100%;
-    margin-inline-end: -100%;
-    backface-visibility: hidden;
-    @include transition($carousel-transition);
+    opacity: 0;
+    transition-property: opacity;
+    transform: none;
   }
 
   .carousel-item.active,
-  .carousel-item-next,
-  .carousel-item-prev {
-    display: block;
-  }
-
-  .carousel-item-next:not(.carousel-item-start),
-  .active.carousel-item-end {
-    transform: translateX(100%);
-  }
-
-  .carousel-item-prev:not(.carousel-item-end),
-  .active.carousel-item-start {
-    transform: translateX(-100%);
-  }
-
-
-  //
-  // Alternate transitions
-  //
-
-  .carousel-fade {
-    .carousel-item {
-      opacity: 0;
-      transition-property: opacity;
-      transform: none;
-    }
-
-    .carousel-item.active,
-    .carousel-item-next.carousel-item-start,
-    .carousel-item-prev.carousel-item-end {
-      z-index: 1;
-      opacity: 1;
-    }
-
-    .active.carousel-item-start,
-    .active.carousel-item-end {
-      z-index: 0;
-      opacity: 0;
-      @include transition(opacity 0s $carousel-transition-duration);
-    }
-  }
-
-
-  //
-  // Left/right controls for nav
-  //
-
-  .carousel-control-prev,
-  .carousel-control-next {
-    position: absolute;
-    inset-block: 0;
+  .carousel-item-next.carousel-item-start,
+  .carousel-item-prev.carousel-item-end {
     z-index: 1;
-    // Use flex for alignment (1-3)
-    display: flex; // 1. allow flex styles
-    align-items: center; // 2. vertically center contents
-    justify-content: center; // 3. horizontally center contents
-    width: $carousel-control-width;
-    padding: 0;
-    color: $carousel-control-color;
-    text-align: center;
-    background: none;
-    filter: var(--#{$prefix}carousel-control-icon-filter);
-    border: 0;
-    opacity: $carousel-control-opacity;
-    @include transition($carousel-control-transition);
-
-    // Hover/focus state
-    &:hover,
-    &:focus {
-      color: $carousel-control-color;
-      text-decoration: none;
-      outline: 0;
-      opacity: $carousel-control-hover-opacity;
-    }
-  }
-  .carousel-control-prev {
-    inset-inline-start: 0;
-    background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
-  }
-  .carousel-control-next {
-    inset-inline-end: 0;
-    background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
+    opacity: 1;
   }
 
-  // Icons for within
-  .carousel-control-prev-icon,
-  .carousel-control-next-icon {
-    display: inline-block;
-    width: $carousel-control-icon-width;
-    height: $carousel-control-icon-width;
-    background-repeat: no-repeat;
-    background-position: 50%;
-    background-size: 100% 100%;
-  }
-
-  .carousel-control-prev-icon {
-    background-image: escape-svg($carousel-control-prev-icon-bg);
-  }
-
-  [dir="rtl"] .carousel-control-prev-icon {
-    background-image: escape-svg($carousel-control-next-icon-bg);
-  }
-
-  .carousel-control-next-icon {
-    background-image: escape-svg($carousel-control-next-icon-bg);
-  }
-
-  [dir="rtl"] .carousel-control-next-icon {
-    background-image: escape-svg($carousel-control-prev-icon-bg);
-  }
-
-  // Optional indicator pips/controls
-  //
-  // Add a container (such as a list) with the following class and add an item (ideally a focusable control,
-  // like a button) with data-bs-target for each slide your carousel holds.
-
-  .carousel-indicators {
-    position: absolute;
-    inset: auto 0 0;
-    z-index: 2;
-    display: flex;
-    justify-content: center;
-    padding: 0;
-    // Use the .carousel-control's width as margin so we don't overlay those
-    margin-inline: $carousel-control-width;
-    margin-bottom: 1rem;
-
-    [data-bs-target] {
-      box-sizing: content-box;
-      flex: 0 1 auto;
-      width: $carousel-indicator-width;
-      height: $carousel-indicator-height;
-      padding: 0;
-      margin-inline: $carousel-indicator-spacer;
-      text-indent: -999px;
-      cursor: pointer;
-      background-color: var(--#{$prefix}carousel-indicator-active-bg);
-      background-clip: padding-box;
-      border: 0;
-      // Use transparent borders to increase the hit area by 10px on top and bottom.
-      border-block: $carousel-indicator-hit-area-height solid transparent;
-      opacity: $carousel-indicator-opacity;
-      @include transition($carousel-indicator-transition);
-    }
-
-    .active {
-      opacity: $carousel-indicator-active-opacity;
-    }
-  }
-
-
-  // Optional captions
-  //
-  //
-
-  .carousel-caption {
-    position: absolute;
-    right: (100% - $carousel-caption-width) * .5;
-    bottom: $carousel-caption-spacer;
-    left: (100% - $carousel-caption-width) * .5;
-    padding-top: $carousel-caption-padding-y;
-    padding-bottom: $carousel-caption-padding-y;
-    color: var(--#{$prefix}carousel-caption-color);
-    text-align: center;
-  }
-
-  // Dark mode carousel
-
-  @mixin carousel-dark() {
-    --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
-    --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark};
-    --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
-  }
-
-  .carousel-dark {
-    @include carousel-dark();
-  }
-
-  :root,
-  [data-bs-theme="light"] {
-    --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
-    --#{$prefix}carousel-caption-color: #{$carousel-caption-color};
-    --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
-  }
-
-  @if $enable-dark-mode {
-    @include color-mode(dark, true) {
-      @include carousel-dark();
-    }
+  .active.carousel-item-start,
+  .active.carousel-item-end {
+    z-index: 0;
+    opacity: 0;
+    @include transition(opacity 0s $carousel-transition-duration);
+  }
+}
+
+
+//
+// Left/right controls for nav
+//
+
+.carousel-control-prev,
+.carousel-control-next {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  // Use flex for alignment (1-3)
+  display: flex; // 1. allow flex styles
+  align-items: center; // 2. vertically center contents
+  justify-content: center; // 3. horizontally center contents
+  width: $carousel-control-width;
+  padding: 0;
+  color: $carousel-control-color;
+  text-align: center;
+  background: none;
+  filter: var(--#{$prefix}carousel-control-icon-filter);
+  border: 0;
+  opacity: $carousel-control-opacity;
+  @include transition($carousel-control-transition);
+
+  // Hover/focus state
+  &:hover,
+  &:focus {
+    color: $carousel-control-color;
+    text-decoration: none;
+    outline: 0;
+    opacity: $carousel-control-hover-opacity;
+  }
+}
+.carousel-control-prev {
+  left: 0;
+  background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
+}
+.carousel-control-next {
+  right: 0;
+  background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
+}
+
+// Icons for within
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: $carousel-control-icon-width;
+  height: $carousel-control-icon-width;
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: 100% 100%;
+}
+
+.carousel-control-prev-icon {
+  background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
+}
+.carousel-control-next-icon {
+  background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
+}
+
+// Optional indicator pips/controls
+//
+// Add a container (such as a list) with the following class and add an item (ideally a focusable control,
+// like a button) with data-bs-target for each slide your carousel holds.
+
+.carousel-indicators {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  padding: 0;
+  // Use the .carousel-control's width as margin so we don't overlay those
+  margin-right: $carousel-control-width;
+  margin-bottom: 1rem;
+  margin-left: $carousel-control-width;
+
+  [data-bs-target] {
+    box-sizing: content-box;
+    flex: 0 1 auto;
+    width: $carousel-indicator-width;
+    height: $carousel-indicator-height;
+    padding: 0;
+    margin-right: $carousel-indicator-spacer;
+    margin-left: $carousel-indicator-spacer;
+    text-indent: -999px;
+    cursor: pointer;
+    background-color: var(--#{$prefix}carousel-indicator-active-bg);
+    background-clip: padding-box;
+    border: 0;
+    // Use transparent borders to increase the hit area by 10px on top and bottom.
+    border-top: $carousel-indicator-hit-area-height solid transparent;
+    border-bottom: $carousel-indicator-hit-area-height solid transparent;
+    opacity: $carousel-indicator-opacity;
+    @include transition($carousel-indicator-transition);
+  }
+
+  .active {
+    opacity: $carousel-indicator-active-opacity;
+  }
+}
+
+
+// Optional captions
+//
+//
+
+.carousel-caption {
+  position: absolute;
+  right: (100% - $carousel-caption-width) * .5;
+  bottom: $carousel-caption-spacer;
+  left: (100% - $carousel-caption-width) * .5;
+  padding-top: $carousel-caption-padding-y;
+  padding-bottom: $carousel-caption-padding-y;
+  color: var(--#{$prefix}carousel-caption-color);
+  text-align: center;
+}
+
+// Dark mode carousel
+
+@mixin carousel-dark() {
+  --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
+  --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark};
+  --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
+}
+
+.carousel-dark {
+  @include carousel-dark();
+}
+
+:root,
+[data-bs-theme="light"] {
+  --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
+  --#{$prefix}carousel-caption-color: #{$carousel-caption-color};
+  --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    @include carousel-dark();
   }
 }

scss/_close.scss

@@ -0,0 +1,71 @@
+@use "config" as *;
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/color-mode" as *;
+
+// Transparent background and border properties included for button version.
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+.btn-close {
+  // scss-docs-start close-css-vars
+  --#{$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};
+  // scss-docs-end close-css-vars
+
+  box-sizing: content-box;
+  width: $btn-close-width;
+  height: $btn-close-height;
+  padding: $btn-close-padding-y $btn-close-padding-x;
+  color: var(--#{$prefix}btn-close-color);
+  background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
+  filter: var(--#{$prefix}btn-close-filter);
+  border: 0; // for button elements
+  @include border-radius();
+  opacity: var(--#{$prefix}btn-close-opacity);
+
+  // Override <a>'s hover style
+  &:hover {
+    color: var(--#{$prefix}btn-close-color);
+    text-decoration: none;
+    opacity: var(--#{$prefix}btn-close-hover-opacity);
+  }
+
+  &:focus {
+    outline: 0;
+    box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+    opacity: var(--#{$prefix}btn-close-focus-opacity);
+  }
+
+  &:disabled,
+  &.disabled {
+    pointer-events: none;
+    user-select: none;
+    opacity: var(--#{$prefix}btn-close-disabled-opacity);
+  }
+}
+
+@mixin btn-close-white() {
+  --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
+}
+
+.btn-close-white {
+  @include btn-close-white();
+}
+
+:root,
+[data-bs-theme="light"] {
+  --#{$prefix}btn-close-filter: #{$btn-close-filter};
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    @include btn-close-white();
+  }
+}

scss/_colors.scss

@@ -1,61 +1,282 @@
-@use "config" as *;
+$blue: #0d6efd !default;
+$blue-100: #cfe2ff !default;
+$blue-200: #9ec5fe !default;
+$blue-300: #6ea8fe !default;
+$blue-400: #3d8bfd !default;
+$blue-500: $blue !default;
+$blue-600: #0a58ca !default;
+$blue-700: #084298 !default;
+$blue-800: #052c65 !default;
+$blue-900: #031633 !default;
 
-// stylelint-disable hue-degree-notation, @stylistic/number-leading-zero
+$indigo: #6610f2 !default;
+$indigo-100: #e0cffc !default;
+$indigo-200: #c29ffa !default;
+$indigo-300: #a370f7 !default;
+$indigo-400: #8540f5 !default;
+$indigo-500: $indigo !default;
+$indigo-600: #520dc2 !default;
+$indigo-700: #3d0a91 !default;
+$indigo-800: #290661 !default;
+$indigo-900: #140330 !default;
 
-// Easily convert colors to oklch() with https://oklch.com/
-$new-blue: oklch(60% 0.24 258) !default;
-$new-indigo: oklch(56% 0.26 288) !default;
-$new-violet: oklch(56% 0.24 300) !default;
-$new-purple: oklch(56% 0.24 320) !default;
-$new-pink: oklch(60% 0.22 4) !default;
-$new-red: oklch(60% 0.22 20) !default;
-$new-orange: oklch(70% 0.22 52) !default;
-$new-amber: oklch(79% 0.2 78) !default;
-$new-yellow: oklch(88% 0.24 88) !default;
-$new-lime: oklch(65% 0.24 135) !default;
-$new-green: oklch(64% 0.22 160) !default;
-$new-teal: oklch(68% 0.22 190) !default;
-$new-cyan: oklch(69% 0.22 220) !default;
-$new-brown: oklch(60% 0.12 54) !default;
-$new-gray: oklch(60% 0.02 245) !default;
-$new-pewter: oklch(65% 0.01 290) !default;
+$purple: #6f42c1 !default;
+$purple-100: #e2d9f3 !default;
+$purple-200: #c5b3e6 !default;
+$purple-300: #a98eda !default;
+$purple-400: #8c68cd !default;
+$purple-500: $purple !default;
+$purple-600: #59359a !default;
+$purple-700: #432874 !default;
+$purple-800: #2c1a4d !default;
+$purple-900: #160d27 !default;
 
-$hues: (
-  "blue": $new-blue,
-  "indigo": $new-indigo,
-  "violet": $new-violet,
-  "purple": $new-purple,
-  "pink": $new-pink,
-  "red": $new-red,
-  "orange": $new-orange,
-  "amber": $new-amber,
-  "yellow": $new-yellow,
-  "lime": $new-lime,
-  "green": $new-green,
-  "teal": $new-teal,
-  "cyan": $new-cyan,
-  "brown": $new-brown,
-  "gray": $new-gray,
-  "pewter": $new-pewter
-) !default;
+$pink: #d63384 !default;
+$pink-100: #f7d6e6 !default;
+$pink-200: #efadce !default;
+$pink-300: #e685b5 !default;
+$pink-400: #de5c9d !default;
+$pink-500: $pink !default;
+$pink-600: #ab296a !default;
+$pink-700: #801f4f !default;
+$pink-800: #561435 !default;
+$pink-900: #2b0a1a !default;
 
-:root {
-  @each $color, $hue in $hues {
-    --#{$prefix}#{$color}-025: color-mix(in lab, #fff 94%, #{$hue});
-    --#{$prefix}#{$color}-050: color-mix(in lab, #fff 90%, #{$hue});
-    --#{$prefix}#{$color}-100: color-mix(in lab, #fff 80%, #{$hue});
-    --#{$prefix}#{$color}-200: color-mix(in lab, #fff 60%, #{$hue});
-    --#{$prefix}#{$color}-300: color-mix(in lab, #fff 40%, #{$hue});
-    --#{$prefix}#{$color}-400: color-mix(in lab, #fff 20%, #{$hue});
-    --#{$prefix}#{$color}-500: #{$hue};
-    --#{$prefix}#{$color}-600: color-mix(in lab, #000 16%, #{$hue});
-    --#{$prefix}#{$color}-700: color-mix(in lab, #000 32%, #{$hue});
-    --#{$prefix}#{$color}-800: color-mix(in lab, #000 48%, #{$hue});
-    --#{$prefix}#{$color}-900: color-mix(in lab, #000 64%, #{$hue});
-    --#{$prefix}#{$color}-950: color-mix(in lab, #000 76%, #{$hue});
-    --#{$prefix}#{$color}-975: color-mix(in lab, #000 88%, #{$hue});
-  }
-}
+$red: #dc3545 !default;
+$red-100: #f8d7da !default;
+$red-200: #f1aeb5 !default;
+$red-300: #ea868f !default;
+$red-400: #e35d6a !default;
+$red-500: $red !default;
+$red-600: #b02a37 !default;
+$red-700: #842029 !default;
+$red-800: #58151c !default;
+$red-900: #2c0b0e !default;
+
+$orange: #fd7e14 !default;
+$orange-100: #ffe5d0 !default;
+$orange-200: #fecba1 !default;
+$orange-300: #feb272 !default;
+$orange-400: #fd9843 !default;
+$orange-500: $orange !default;
+$orange-600: #ca6510 !default;
+$orange-700: #984c0c !default;
+$orange-800: #653208 !default;
+$orange-900: #331904 !default;
+
+$yellow: #ffc107 !default;
+$yellow-100: #fff3cd !default;
+$yellow-200: #ffe69c !default;
+$yellow-300: #ffda6a !default;
+$yellow-400: #ffcd39 !default;
+$yellow-500: $yellow !default;
+$yellow-600: #cc9a06 !default;
+$yellow-700: #997404 !default;
+$yellow-800: #664d03 !default;
+$yellow-900: #332701 !default;
+
+$green: #198754 !default;
+$green-100: #d1e7dd !default;
+$green-200: #a3cfbb !default;
+$green-300: #75b798 !default;
+$green-400: #479f76 !default;
+$green-500: $green !default;
+$green-600: #146c43 !default;
+$green-700: #0f5132 !default;
+$green-800: #0a3622 !default;
+$green-900: #051b11 !default;
+
+$teal: #20c997 !default;
+$teal-100: #d2f4ea !default;
+$teal-200: #a6e9d5 !default;
+$teal-300: #79dfc1 !default;
+$teal-400: #4dd4ac !default;
+$teal-500: $teal !default;
+$teal-600: #1aa179 !default;
+$teal-700: #13795b !default;
+$teal-800: #0d503c !default;
+$teal-900: #06281e !default;
+
+$cyan: #0dcaf0 !default;
+$cyan-100: #cff4fc !default;
+$cyan-200: #9eeaf9 !default;
+$cyan-300: #6edff6 !default;
+$cyan-400: #3dd5f3 !default;
+$cyan-500: $cyan !default;
+$cyan-600: #0aa2c0 !default;
+$cyan-700: #087990 !default;
+$cyan-800: #055160 !default;
+$cyan-900: #032830 !default;
+
+$gray: #adb5bd !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: $gray !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
 
 $white: #fff !default;
 $black: #000 !default;
+
+$blues: (
+  "blue-100": $blue-100,
+  "blue-200": $blue-200,
+  "blue-300": $blue-300,
+  "blue-400": $blue-400,
+  "blue-500": $blue-500,
+  "blue-600": $blue-600,
+  "blue-700": $blue-700,
+  "blue-800": $blue-800,
+  "blue-900": $blue-900
+) !default;
+
+$indigos: (
+  "indigo-100": $indigo-100,
+  "indigo-200": $indigo-200,
+  "indigo-300": $indigo-300,
+  "indigo-400": $indigo-400,
+  "indigo-500": $indigo-500,
+  "indigo-600": $indigo-600,
+  "indigo-700": $indigo-700,
+  "indigo-800": $indigo-800,
+  "indigo-900": $indigo-900
+) !default;
+
+$purples: (
+  "purple-100": $purple-100,
+  "purple-200": $purple-200,
+  "purple-300": $purple-300,
+  "purple-400": $purple-400,
+  "purple-500": $purple-500,
+  "purple-600": $purple-600,
+  "purple-700": $purple-700,
+  "purple-800": $purple-800,
+  "purple-900": $purple-900
+) !default;
+
+$pinks: (
+  "pink-100": $pink-100,
+  "pink-200": $pink-200,
+  "pink-300": $pink-300,
+  "pink-400": $pink-400,
+  "pink-500": $pink-500,
+  "pink-600": $pink-600,
+  "pink-700": $pink-700,
+  "pink-800": $pink-800,
+  "pink-900": $pink-900
+) !default;
+
+$reds: (
+  "red-100": $red-100,
+  "red-200": $red-200,
+  "red-300": $red-300,
+  "red-400": $red-400,
+  "red-500": $red-500,
+  "red-600": $red-600,
+  "red-700": $red-700,
+  "red-800": $red-800,
+  "red-900": $red-900
+) !default;
+
+$oranges: (
+  "orange-100": $orange-100,
+  "orange-200": $orange-200,
+  "orange-300": $orange-300,
+  "orange-400": $orange-400,
+  "orange-500": $orange-500,
+  "orange-600": $orange-600,
+  "orange-700": $orange-700,
+  "orange-800": $orange-800,
+  "orange-900": $orange-900
+) !default;
+
+$yellows: (
+  "yellow-100": $yellow-100,
+  "yellow-200": $yellow-200,
+  "yellow-300": $yellow-300,
+  "yellow-400": $yellow-400,
+  "yellow-500": $yellow-500,
+  "yellow-600": $yellow-600,
+  "yellow-700": $yellow-700,
+  "yellow-800": $yellow-800,
+  "yellow-900": $yellow-900
+) !default;
+
+$greens: (
+  "green-100": $green-100,
+  "green-200": $green-200,
+  "green-300": $green-300,
+  "green-400": $green-400,
+  "green-500": $green-500,
+  "green-600": $green-600,
+  "green-700": $green-700,
+  "green-800": $green-800,
+  "green-900": $green-900
+) !default;
+
+$teals: (
+  "teal-100": $teal-100,
+  "teal-200": $teal-200,
+  "teal-300": $teal-300,
+  "teal-400": $teal-400,
+  "teal-500": $teal-500,
+  "teal-600": $teal-600,
+  "teal-700": $teal-700,
+  "teal-800": $teal-800,
+  "teal-900": $teal-900
+) !default;
+
+$cyans: (
+  "cyan-100": $cyan-100,
+  "cyan-200": $cyan-200,
+  "cyan-300": $cyan-300,
+  "cyan-400": $cyan-400,
+  "cyan-500": $cyan-500,
+  "cyan-600": $cyan-600,
+  "cyan-700": $cyan-700,
+  "cyan-800": $cyan-800,
+  "cyan-900": $cyan-900
+) !default;
+
+$grays: (
+  "gray-100": $gray-100,
+  "gray-200": $gray-200,
+  "gray-300": $gray-300,
+  "gray-400": $gray-400,
+  "gray-500": $gray-500,
+  "gray-600": $gray-600,
+  "gray-700": $gray-700,
+  "gray-800": $gray-800,
+  "gray-900": $gray-900
+) !default;
+
+$colors: (
+  "blue": $blue,
+  "indigo": $indigo,
+  "purple": $purple,
+  "pink": $pink,
+  "red": $red,
+  "orange": $orange,
+  "yellow": $yellow,
+  "green": $green,
+  "teal": $teal,
+  "cyan": $cyan
+) !default;
+
+$all-colors: (
+  "grays": $grays,
+  "blues": $blues,
+  "indigos": $indigos,
+  "purples": $purples,
+  "pinks": $pinks,
+  "reds": $reds,
+  "oranges": $oranges,
+  "yellows": $yellows,
+  "greens": $greens,
+  "teals": $teals,
+  "cyans": $cyans
+) !default;

scss/_config.scss

@@ -13,12 +13,13 @@ $enable-reduced-motion:       true !default;
 $enable-smooth-scroll:        true !default;
 $enable-grid-classes:         true !default;
 $enable-container-classes:    true !default;
-$enable-cssgrid:              true !default;
+$enable-cssgrid:              false !default;
 $enable-button-pointers:      true !default;
 $enable-rfs:                  true !default;
 $enable-validation-icons:     true !default;
 $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; // `data` or `media-query`
@@ -30,33 +31,6 @@ $color-contrast-dark:      #000 !default;
 $color-contrast-light:     #fff !default;
 $min-contrast-ratio:         4.5 !default;
 
-// scss-docs-start spacer-variables-maps
-$spacer: 1rem !default;
-$spacers: (
-  0: 0,
-  1: $spacer * .25,
-  2: $spacer * .5,
-  3: $spacer,
-  4: $spacer * 1.5,
-  5: $spacer * 3,
-) !default;
-// scss-docs-end spacer-variables-maps
-
-$sizes: (
-  1: $spacer,
-  2: calc($spacer * 2),
-  3: calc($spacer * 3),
-  4: calc($spacer * 4),
-  5: calc($spacer * 5),
-  6: calc($spacer * 6),
-  7: calc($spacer * 7),
-  8: calc($spacer * 8),
-  9: calc($spacer * 9),
-  10: calc($spacer * 10),
-  11: calc($spacer * 11),
-  12: calc($spacer * 12),
-) !default;
-
 // Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,
@@ -67,15 +41,12 @@ $grid-breakpoints: (
   xs: 0,
   sm: 576px,
   md: 768px,
-  lg: 1024px,
-  xl: 1280px,
-  2xl: 1536px
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
 ) !default;
 // scss-docs-end grid-breakpoints
 
-// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
-
 // Grid columns
 //
 // Set the number of columns and specify the width of the gutters.
@@ -84,8 +55,6 @@ $grid-columns: 12 !default;
 $grid-gutter-width: 1.5rem !default;
 $grid-row-columns: 6 !default;
 
-$gutters: $spacers !default;
-
 // Grid containers
 //
 // Define the maximum width of `.container` for different screen sizes.
@@ -95,8 +64,8 @@ $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
-  xl: 1200px,
-  2xl: 1440px
+  xl: 1140px,
+  xxl: 1320px
 ) !default;
 // scss-docs-end container-max-widths
 

scss/_dropdown.scss

@@ -1,6 +1,5 @@
 @use "sass:map";
 @use "config" as *;
-@use "colors" as *;
 @use "variables" as *;
 @use "mixins/caret" as *;
 @use "mixins/border-radius" as *;
@@ -10,301 +9,253 @@
 @use "vendor/rfs" as *;
 @use "layout/breakpoints" as *;
 
-// scss-docs-start dropdown-variables
-$dropdown-min-width:                10rem !default;
-$dropdown-padding-x:                0 !default;
-$dropdown-padding-y:                .5rem !default;
-$dropdown-spacer:                   .125rem !default;
-$dropdown-font-size:                $font-size-base !default;
-$dropdown-color:                    var(--#{$prefix}color-body) !default;
-$dropdown-bg:                       var(--#{$prefix}bg-body) !default;
-$dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
-$dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
-$dropdown-border-width:             var(--#{$prefix}border-width) !default;
-$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
-$dropdown-divider-bg:               $dropdown-border-color !default;
-$dropdown-divider-margin-y:         $spacer * .5 !default;
-$dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
+// The dropdown wrapper (`<div>`)
+.dropup,
+.dropend,
+.dropdown,
+.dropstart,
+.dropup-center,
+.dropdown-center {
+  position: relative;
+}
 
-$dropdown-link-color:               var(--#{$prefix}color-body) !default;
-$dropdown-link-hover-color:         $dropdown-link-color !default;
-$dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg) !default;
+.dropdown-toggle {
+  white-space: nowrap;
 
-$dropdown-link-active-color:        $component-active-color !default;
-$dropdown-link-active-bg:           $component-active-bg !default;
+  // Generate the caret automatically
+  @include caret();
+}
 
-$dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color) !default;
+// The dropdown menu
+.dropdown-menu {
+  // scss-docs-start dropdown-css-vars
+  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
+  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
+  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
+  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
+  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
+  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
+  --#{$prefix}dropdown-color: #{$dropdown-color};
+  --#{$prefix}dropdown-bg: #{$dropdown-bg};
+  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
+  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
+  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
+  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
+  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
+  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
+  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
+  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
+  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
+  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
+  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
+  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
+  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
+  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
+  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
+  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
+  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
+  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
+  // scss-docs-end dropdown-css-vars
 
-$dropdown-item-padding-y:           $spacer * .25 !default;
-$dropdown-item-padding-x:           $spacer !default;
+  position: absolute;
+  z-index: var(--#{$prefix}dropdown-zindex);
+  display: none; // none by default, but block on "open" of the menu
+  min-width: var(--#{$prefix}dropdown-min-width);
+  padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
+  margin: 0; // Override default margin of ul
+  @include font-size(var(--#{$prefix}dropdown-font-size));
+  color: var(--#{$prefix}dropdown-color);
+  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+  list-style: none;
+  background-color: var(--#{$prefix}dropdown-bg);
+  background-clip: padding-box;
+  border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
+  @include border-radius(var(--#{$prefix}dropdown-border-radius));
+  @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
 
-$dropdown-header-color:             var(--#{$prefix}gray-600) !default;
-$dropdown-header-padding-x:         $dropdown-item-padding-x !default;
-$dropdown-header-padding-y:         $dropdown-padding-y !default;
-// scss-docs-end dropdown-variables
+  &[data-bs-popper] {
+    top: 100%;
+    left: 0;
+    margin-top: var(--#{$prefix}dropdown-spacer);
+  }
 
-// scss-docs-start dropdown-dark-variables
-$dropdown-dark-color:               var(--#{$prefix}gray-300) !default;
-$dropdown-dark-bg:                  var(--#{$prefix}gray-800) !default;
-$dropdown-dark-border-color:        $dropdown-border-color !default;
-$dropdown-dark-divider-bg:          $dropdown-divider-bg !default;
-$dropdown-dark-box-shadow:          null !default;
-$dropdown-dark-link-color:          $dropdown-dark-color !default;
-$dropdown-dark-link-hover-color:    $white !default;
-$dropdown-dark-link-hover-bg:       rgba($white, .15) !default;
-$dropdown-dark-link-active-color:   $dropdown-link-active-color !default;
-$dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;
-$dropdown-dark-link-disabled-color: var(--#{$prefix}gray-500) !default;
-$dropdown-dark-header-color:        var(--#{$prefix}gray-500) !default;
-// scss-docs-end dropdown-dark-variables
+  @if $dropdown-padding-y == 0 {
+    > .dropdown-item:first-child,
+    > li:first-child .dropdown-item {
+      @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
+    }
+    > .dropdown-item:last-child,
+    > li:last-child .dropdown-item {
+      @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
+    }
 
-@layer components {
-  // The dropdown wrapper (`<div>`)
-  .dropup,
-  .dropend,
-  .dropdown,
-  .dropstart,
-  .dropup-center,
-  .dropdown-center {
-    position: relative;
+  }
+}
+
+// scss-docs-start responsive-breakpoints
+// We deliberately hardcode the `bs-` prefix because we check
+// this custom property in JS to determine Popper's positioning
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .dropdown-menu#{$infix}-start {
+      --bs-position: start;
+
+      &[data-bs-popper] {
+        right: auto;
+        left: 0;
+      }
+    }
+
+    .dropdown-menu#{$infix}-end {
+      --bs-position: end;
+
+      &[data-bs-popper] {
+        right: 0;
+        left: auto;
+      }
+    }
+  }
+}
+// scss-docs-end responsive-breakpoints
+
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// Just add .dropup after the standard .dropdown class and you're set.
+.dropup {
+  .dropdown-menu[data-bs-popper] {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: var(--#{$prefix}dropdown-spacer);
   }
 
   .dropdown-toggle {
-    white-space: nowrap;
-
-    // Generate the caret automatically
-    @include caret();
-  }
-
-  // The dropdown menu
-  .dropdown-menu {
-    // scss-docs-start dropdown-css-vars
-    --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
-    --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
-    --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
-    --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
-    --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
-    @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
-    --#{$prefix}dropdown-color: #{$dropdown-color};
-    --#{$prefix}dropdown-bg: #{$dropdown-bg};
-    --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
-    --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
-    --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
-    --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
-    --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
-    --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
-    --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
-    --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
-    --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
-    --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
-    --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
-    --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
-    --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
-    --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
-    --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
-    --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
-    --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
-    --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
-    // scss-docs-end dropdown-css-vars
-
-    position: absolute;
-    z-index: var(--#{$prefix}dropdown-zindex);
-    display: none; // none by default, but block on "open" of the menu
-    min-width: var(--#{$prefix}dropdown-min-width);
-    padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
-    margin: 0; // Override default margin of ul
-    @include font-size(var(--#{$prefix}dropdown-font-size));
-    color: var(--#{$prefix}dropdown-color);
-    text-align: start; // Ensures proper alignment if parent has it changed (e.g., modal footer)
-    list-style: none;
-    background-color: var(--#{$prefix}dropdown-bg);
-    background-clip: padding-box;
-    border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
-    @include border-radius(var(--#{$prefix}dropdown-border-radius));
-    @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
-
-    &[data-bs-popper] {
-      top: 100%;
-      left: 0;
-      margin-top: var(--#{$prefix}dropdown-spacer);
-    }
-
-    @if $dropdown-padding-y == 0 {
-      > .dropdown-item:first-child,
-      > li:first-child .dropdown-item {
-        @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
-      }
-      > .dropdown-item:last-child,
-      > li:last-child .dropdown-item {
-        @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
-      }
-
-    }
-  }
-
-  // scss-docs-start responsive-breakpoints
-  // We deliberately hardcode the `bs-` prefix because we check
-  // this custom property in JS to determine Popper's positioning
-
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-      .dropdown-menu#{$infix}-start {
-        --bs-position: start;
-
-        &[data-bs-popper] {
-          right: auto;
-          left: 0;
-        }
-      }
-
-      .dropdown-menu#{$infix}-end {
-        --bs-position: end;
-
-        &[data-bs-popper] {
-          right: 0;
-          left: auto;
-        }
-      }
-    }
-  }
-  // scss-docs-end responsive-breakpoints
-
-  // Allow for dropdowns to go bottom up (aka, dropup-menu)
-  // Just add .dropup after the standard .dropdown class and you're set.
-  .dropup {
-    .dropdown-menu[data-bs-popper] {
-      top: auto;
-      bottom: 100%;
-      margin-top: 0;
-      margin-bottom: var(--#{$prefix}dropdown-spacer);
-    }
-
-    .dropdown-toggle {
-      @include caret(up);
-    }
-  }
-
-  .dropend {
-    .dropdown-menu[data-bs-popper] {
-      top: 0;
-      right: auto;
-      left: 100%;
-      margin-inline-start: var(--#{$prefix}dropdown-spacer);
-      margin-top: 0;
-    }
-
-    .dropdown-toggle {
-      @include caret(end);
-      &::after {
-        vertical-align: 0;
-      }
-    }
-  }
-
-  .dropstart {
-    .dropdown-menu[data-bs-popper] {
-      top: 0;
-      right: 100%;
-      left: auto;
-      margin-inline-end: var(--#{$prefix}dropdown-spacer);
-      margin-top: 0;
-    }
-
-    .dropdown-toggle {
-      @include caret(start);
-      &::before {
-        vertical-align: 0;
-      }
-    }
-  }
-
-
-  // Dividers (basically an `<hr>`) within the dropdown
-  .dropdown-divider {
-    height: 0;
-    margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
-    overflow: hidden;
-    border-block-start: 1px solid var(--#{$prefix}dropdown-divider-bg);
-    opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
-  }
-
-  // Links, buttons, and more within the dropdown menu
-  //
-  // `<button>`-specific styles are denoted with `// For <button>s`
-  .dropdown-item {
-    display: block;
-    width: 100%; // For `<button>`s
-    padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
-    clear: both;
-    font-weight: $font-weight-normal;
-    color: var(--#{$prefix}dropdown-link-color);
-    text-align: inherit; // For `<button>`s
-    text-decoration: none;
-    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 {
-      color: var(--#{$prefix}dropdown-link-hover-color);
-      @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
-    }
-
-    &.active,
-    &:active {
-      color: var(--#{$prefix}dropdown-link-active-color);
-      @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
-    }
-
-    &.disabled,
-    &:disabled {
-      color: var(--#{$prefix}dropdown-link-disabled-color);
-      pointer-events: none;
-      background-color: transparent;
-      // Remove CSS gradients if they're enabled
-      background-image: if($enable-gradients, none, null);
-    }
-  }
-
-  .dropdown-menu.show {
-    display: block;
-  }
-
-  // Dropdown section headers
-  .dropdown-header {
-    display: block;
-    padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
-    margin-bottom: 0; // for use with heading elements
-    @include font-size($font-size-sm);
-    color: var(--#{$prefix}dropdown-header-color);
-    white-space: nowrap; // as with > li > a
-  }
-
-  // Dropdown text
-  .dropdown-item-text {
-    display: block;
-    padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
-    color: var(--#{$prefix}dropdown-link-color);
-  }
-
-  // Dark dropdowns
-  .dropdown-menu-dark {
-    // scss-docs-start dropdown-dark-css-vars
-    --#{$prefix}dropdown-color: #{$dropdown-dark-color};
-    --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
-    --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
-    --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
-    --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
-    --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
-    --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
-    --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
-    --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
-    --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
-    --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
-    --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
-    // scss-docs-end dropdown-dark-css-vars
+    @include caret(up);
   }
 }
+
+.dropend {
+  .dropdown-menu[data-bs-popper] {
+    top: 0;
+    right: auto;
+    left: 100%;
+    margin-top: 0;
+    margin-left: var(--#{$prefix}dropdown-spacer);
+  }
+
+  .dropdown-toggle {
+    @include caret(end);
+    &::after {
+      vertical-align: 0;
+    }
+  }
+}
+
+.dropstart {
+  .dropdown-menu[data-bs-popper] {
+    top: 0;
+    right: 100%;
+    left: auto;
+    margin-top: 0;
+    margin-right: var(--#{$prefix}dropdown-spacer);
+  }
+
+  .dropdown-toggle {
+    @include caret(start);
+    &::before {
+      vertical-align: 0;
+    }
+  }
+}
+
+
+// Dividers (basically an `<hr>`) within the dropdown
+.dropdown-divider {
+  height: 0;
+  margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
+  overflow: hidden;
+  border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
+  opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
+}
+
+// Links, buttons, and more within the dropdown menu
+//
+// `<button>`-specific styles are denoted with `// For <button>s`
+.dropdown-item {
+  display: block;
+  width: 100%; // For `<button>`s
+  padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
+  clear: both;
+  font-weight: $font-weight-normal;
+  color: var(--#{$prefix}dropdown-link-color);
+  text-align: inherit; // For `<button>`s
+  text-decoration: if($link-decoration == none, null, none);
+  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 {
+    color: var(--#{$prefix}dropdown-link-hover-color);
+    text-decoration: if($link-hover-decoration == underline, none, null);
+    @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
+  }
+
+  &.active,
+  &:active {
+    color: var(--#{$prefix}dropdown-link-active-color);
+    text-decoration: none;
+    @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
+  }
+
+  &.disabled,
+  &:disabled {
+    color: var(--#{$prefix}dropdown-link-disabled-color);
+    pointer-events: none;
+    background-color: transparent;
+    // Remove CSS gradients if they're enabled
+    background-image: if($enable-gradients, none, null);
+  }
+}
+
+.dropdown-menu.show {
+  display: block;
+}
+
+// Dropdown section headers
+.dropdown-header {
+  display: block;
+  padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
+  margin-bottom: 0; // for use with heading elements
+  @include font-size($font-size-sm);
+  color: var(--#{$prefix}dropdown-header-color);
+  white-space: nowrap; // as with > li > a
+}
+
+// Dropdown text
+.dropdown-item-text {
+  display: block;
+  padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
+  color: var(--#{$prefix}dropdown-link-color);
+}
+
+// Dark dropdowns
+.dropdown-menu-dark {
+  // scss-docs-start dropdown-dark-css-vars
+  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
+  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
+  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
+  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
+  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
+  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
+  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
+  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
+  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
+  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
+  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
+  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
+  // scss-docs-end dropdown-dark-css-vars
+}

scss/_functions.scss

@@ -105,23 +105,6 @@
   @return $result;
 }
 
-// Extract a specific nested property from all items in a map
-// Useful for extracting a single property from nested map structures
-// Example: map-get-nested($font-sizes, "font-size")
-// Returns: ("xs": clamp(...), "sm": clamp(...), ...)
-@function map-get-nested($map, $nested-key) {
-  $result: ();
-  @each $key, $value in $map {
-    @if meta.type-of($value) == "map" {
-      $nested-value: map.get($value, $nested-key);
-      @if $nested-value != null {
-        $result: map.merge($result, ($key: $nested-value));
-      }
-    }
-  }
-  @return $result;
-}
-
 // Merge multiple maps
 @function map-merge-multiple($maps...) {
   $merged-maps: ();
@@ -224,7 +207,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 // Return opaque color
 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
 @function opaque($background, $foreground) {
-  @return color-mix(in srgb, rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
+  @return color.mix(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
 }
 
 // scss-docs-start color-functions

scss/_list-group.scss

@@ -1,208 +1,207 @@
 @use "sass:map";
 @use "colors" as *;
-@use "theme" as *;
 @use "config" as *;
 @use "variables" as *;
 @use "mixins/border-radius" as *;
 @use "vendor/rfs" as *;
 @use "layout/breakpoints" as *;
 
-// scss-docs-start list-group-variables
-$list-group-color:                  var(--#{$prefix}color-body) !default;
-$list-group-bg:                     var(--#{$prefix}bg-body) !default;
-$list-group-border-color:           var(--#{$prefix}border-color) !default;
-$list-group-border-width:           var(--#{$prefix}border-width) !default;
-$list-group-border-radius:          var(--#{$prefix}border-radius) !default;
+// Base class
+//
+// Easily usable on <ul>, <ol>, or <div>.
 
-$list-group-item-padding-y:         $spacer * .5 !default;
-$list-group-item-padding-x:         $spacer !default;
+.list-group {
+  // scss-docs-start list-group-css-vars
+  --#{$prefix}list-group-color: #{$list-group-color};
+  --#{$prefix}list-group-bg: #{$list-group-bg};
+  --#{$prefix}list-group-border-color: #{$list-group-border-color};
+  --#{$prefix}list-group-border-width: #{$list-group-border-width};
+  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
+  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
+  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
+  --#{$prefix}list-group-action-color: #{$list-group-action-color};
+  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
+  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
+  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
+  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
+  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
+  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
+  --#{$prefix}list-group-active-color: #{$list-group-active-color};
+  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
+  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
+  // scss-docs-end list-group-css-vars
 
-$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;
+  display: flex;
+  flex-direction: column;
 
-$list-group-disabled-color:         var(--#{$prefix}secondary-color) !default;
-$list-group-disabled-bg:            $list-group-bg !default;
+  // No need to set list-style: none; since .list-group-item is block level
+  padding-left: 0; // reset padding because ul and ol
+  margin-bottom: 0;
+  @include border-radius(var(--#{$prefix}list-group-border-radius));
+}
 
-$list-group-action-color:           var(--#{$prefix}secondary-color) !default;
-$list-group-action-hover-color:     var(--#{$prefix}emphasis-color) !default;
+.list-group-numbered {
+  list-style-type: none;
+  counter-reset: section;
 
-$list-group-action-active-color:    var(--#{$prefix}color-body) !default;
-$list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
-// scss-docs-end list-group-variables
+  > .list-group-item::before {
+    // Increments only this instance of the section counter
+    content: counters(section, ".") ". ";
+    counter-increment: section;
+  }
+}
 
-@layer components {
-  .list-group {
-    // scss-docs-start list-group-css-vars
-    --#{$prefix}list-group-color: #{$list-group-color};
-    --#{$prefix}list-group-bg: #{$list-group-bg};
-    --#{$prefix}list-group-border-color: #{$list-group-border-color};
-    --#{$prefix}list-group-border-width: #{$list-group-border-width};
-    --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
-    --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
-    --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
-    --#{$prefix}list-group-action-color: #{$list-group-action-color};
-    --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
-    --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
-    --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
-    --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
-    --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
-    --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
-    --#{$prefix}list-group-active-color: #{$list-group-active-color};
-    --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
-    --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
-    // scss-docs-end list-group-css-vars
+// Individual list items
+//
+// Use on `li`s or `div`s within the `.list-group` parent.
 
-    display: flex;
-    flex-direction: column;
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
+  color: var(--#{$prefix}list-group-color);
+  text-decoration: if($link-decoration == none, null, none);
+  background-color: var(--#{$prefix}list-group-bg);
+  border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
 
-    // No need to set list-style: none; since .list-group-item is block level
-    padding-inline-start: 0; // reset padding because ul and ol
-    margin-bottom: 0;
-    @include border-radius(var(--#{$prefix}list-group-border-radius));
+  &:first-child {
+    @include border-top-radius(inherit);
   }
 
-  .list-group-numbered {
-    list-style-type: none;
-    counter-reset: section;
-
-    > .list-group-item::before {
-      // Increments only this instance of the section counter
-      content: counters(section, ".") ". ";
-      counter-increment: section;
-    }
+  &:last-child {
+    @include border-bottom-radius(inherit);
   }
 
-  // Individual list items
-  //
-  // Use on `li`s or `div`s within the `.list-group` parent.
+  &.disabled,
+  &:disabled {
+    color: var(--#{$prefix}list-group-disabled-color);
+    pointer-events: none;
+    background-color: var(--#{$prefix}list-group-disabled-bg);
+  }
 
-  .list-group-item {
-    position: relative;
-    display: block;
-    padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
-    color: var(--#{$prefix}theme-text, var(--#{$prefix}list-group-color));
-    text-decoration: if($link-decoration == none, null, none);
-    background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}list-group-bg));
-    border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}theme-border, var(--#{$prefix}list-group-border-color));
+  // Include both here for `<a>`s and `<button>`s
+  &.active {
+    z-index: 2; // Place active items above their siblings for proper border styling
+    color: var(--#{$prefix}list-group-active-color);
+    background-color: var(--#{$prefix}list-group-active-bg);
+    border-color: var(--#{$prefix}list-group-active-border-color);
+  }
 
-    &:first-child {
-      @include border-top-radius(inherit);
-    }
+  // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
+  & + .list-group-item {
+    border-top-width: 0;
 
-    &:last-child {
-      @include border-bottom-radius(inherit);
-    }
-
-    &.disabled,
-    &:disabled {
-      color: var(--#{$prefix}list-group-disabled-color);
-      pointer-events: none;
-      background-color: var(--#{$prefix}list-group-disabled-bg);
-    }
-
-    // Include both here for `<a>`s and `<button>`s
     &.active {
-      z-index: 2; // Place active items above their siblings for proper border styling
-      color: var(--#{$prefix}list-group-active-color);
-      background-color: var(--#{$prefix}list-group-active-bg);
-      border-color: var(--#{$prefix}list-group-active-border-color);
-    }
-
-    // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
-    & + .list-group-item {
-      border-block-start-width: 0;
-
-      &.active {
-        margin-top: calc(-1 * var(--#{$prefix}list-group-border-width));
-        border-block-start-width: var(--#{$prefix}list-group-border-width);
-      }
+      margin-top: calc(-1 * var(--#{$prefix}list-group-border-width));
+      border-top-width: var(--#{$prefix}list-group-border-width);
     }
   }
+}
 
-  // Interactive list items
-  //
-  // Use anchor or button elements instead of `li`s or `div`s to create interactive
-  // list items. Includes an extra `.active` modifier class for selected items.
+// Interactive list items
+//
+// Use anchor or button elements instead of `li`s or `div`s to create interactive
+// list items. Includes an extra `.active` modifier class for selected items.
 
-  .list-group-item-action {
-    width: 100%; // For `<button>`s (anchors become 100% by default though)
-    color: var(--#{$prefix}theme-text, var(--#{$prefix}list-group-action-color));
-    text-align: inherit; // For `<button>`s (anchors inherit)
+.list-group-item-action {
+  width: 100%; // For `<button>`s (anchors become 100% by default though)
+  color: var(--#{$prefix}list-group-action-color);
+  text-align: inherit; // For `<button>`s (anchors inherit)
 
-    &:not(.active) {
-      // Hover state
-      &:hover,
-      &:focus {
-        z-index: 1; // Place hover/focus items above their siblings for proper border styling
-        color: var(--#{$prefix}theme-text-emphasis, var(--#{$prefix}list-group-action-hover-color));
-        text-decoration: none;
-        background-color: var(--#{$prefix}theme-bg-muted, var(--#{$prefix}list-group-action-hover-bg));
-      }
+  &:not(.active) {
+    // Hover state
+    &:hover,
+    &:focus {
+      z-index: 1; // Place hover/focus items above their siblings for proper border styling
+      color: var(--#{$prefix}list-group-action-hover-color);
+      text-decoration: none;
+      background-color: var(--#{$prefix}list-group-action-hover-bg);
+    }
 
-      &:active {
-        color: var(--#{$prefix}theme-text-emphasis, var(--#{$prefix}list-group-action-active-color));
-        background-color: var(--#{$prefix}theme-bg-muted, var(--#{$prefix}list-group-action-active-bg));
-      }
+    &:active {
+      color: var(--#{$prefix}list-group-action-active-color);
+      background-color: var(--#{$prefix}list-group-action-active-bg);
     }
   }
+}
 
-  // Horizontal
-  //
-  // Change the layout of list group items from vertical (default) to horizontal.
+// Horizontal
+//
+// Change the layout of list group items from vertical (default) to horizontal.
 
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+@each $breakpoint in map.keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-      .list-group-horizontal#{$infix} {
-        flex-direction: row;
+    .list-group-horizontal#{$infix} {
+      flex-direction: row;
 
-        > .list-group-item {
-          &:first-child:not(:last-child) {
-            @include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
-            @include border-top-end-radius(0);
-          }
+      > .list-group-item {
+        &:first-child:not(:last-child) {
+          @include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
+          @include border-top-end-radius(0);
+        }
 
-          &:last-child:not(:first-child) {
-            @include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
-            @include border-bottom-start-radius(0);
-          }
+        &:last-child:not(:first-child) {
+          @include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
+          @include border-bottom-start-radius(0);
+        }
+
+        &.active {
+          margin-top: 0;
+        }
+
+        + .list-group-item {
+          border-top-width: var(--#{$prefix}list-group-border-width);
+          border-left-width: 0;
 
           &.active {
-            margin-top: 0;
-          }
-
-          + .list-group-item {
-            border-block-start-width: var(--#{$prefix}list-group-border-width);
-            border-inline-start-width: 0;
-
-            &.active {
-              margin-inline-start: calc(-1 * var(--#{$prefix}list-group-border-width));
-              border-inline-start-width: var(--#{$prefix}list-group-border-width);
-            }
+            margin-left: calc(-1 * var(--#{$prefix}list-group-border-width));
+            border-left-width: var(--#{$prefix}list-group-border-width);
           }
         }
       }
     }
   }
+}
 
 
-  // Flush list items
-  //
-  // Remove borders and border-radius to keep list group items edge-to-edge. Most
-  // useful within other components (e.g., cards).
+// Flush list items
+//
+// Remove borders and border-radius to keep list group items edge-to-edge. Most
+// useful within other components (e.g., cards).
 
-  .list-group-flush {
-    @include border-radius(0);
+.list-group-flush {
+  @include border-radius(0);
 
-    > .list-group-item {
-      border-width: 0 0 var(--#{$prefix}list-group-border-width);
+  > .list-group-item {
+    border-width: 0 0 var(--#{$prefix}list-group-border-width);
 
-      &:last-child {
-        border-block-end-width: 0;
-      }
+    &:last-child {
+      border-bottom-width: 0;
     }
   }
 }
+
+
+// scss-docs-start list-group-modifiers
+// List group contextual variants
+//
+// Add modifier classes to change text and background color on individual items.
+// Organizationally, this must come after the `:hover` states.
+
+@each $state in map.keys($theme-colors) {
+  .list-group-item-#{$state} {
+    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
+    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
+    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
+    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
+    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
+  }
+}
+// scss-docs-end list-group-modifiers

scss/_maps.scss

@@ -0,0 +1,180 @@
+// @use "sass:map";
+// @use "colors" as *;
+// @use "functions" as *;
+// @use "config" as *;
+// @use "variables" as *;
+
+// // Re-assigned maps
+// //
+// // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
+
+// // scss-docs-start theme-colors-rgb
+// $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
+// // scss-docs-end theme-colors-rgb
+
+// // scss-docs-start theme-text-map
+// $theme-colors-text: (
+//   "primary": $primary-text-emphasis,
+//   "secondary": $secondary-text-emphasis,
+//   "success": $success-text-emphasis,
+//   "info": $info-text-emphasis,
+//   "warning": $warning-text-emphasis,
+//   "danger": $danger-text-emphasis,
+//   "light": $light-text-emphasis,
+//   "dark": $dark-text-emphasis,
+// ) !default;
+// // scss-docs-end theme-text-map
+
+// // scss-docs-start theme-bg-subtle-map
+// $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;
+// // scss-docs-end theme-bg-subtle-map
+
+// // scss-docs-start theme-border-subtle-map
+// $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;
+// // scss-docs-end theme-border-subtle-map
+
+// $theme-colors-text-dark: null !default;
+// $theme-colors-bg-subtle-dark: null !default;
+// $theme-colors-border-subtle-dark: null !default;
+
+// @if $enable-dark-mode {
+//   // scss-docs-start theme-text-dark-map
+//   $theme-colors-text-dark: (
+//     "primary": $primary-text-emphasis-dark,
+//     "secondary": $secondary-text-emphasis-dark,
+//     "success": $success-text-emphasis-dark,
+//     "info": $info-text-emphasis-dark,
+//     "warning": $warning-text-emphasis-dark,
+//     "danger": $danger-text-emphasis-dark,
+//     "light": $light-text-emphasis-dark,
+//     "dark": $dark-text-emphasis-dark,
+//   ) !default;
+//   // scss-docs-end theme-text-dark-map
+
+//   // scss-docs-start theme-bg-subtle-dark-map
+//   $theme-colors-bg-subtle-dark: (
+//     "primary": $primary-bg-subtle-dark,
+//     "secondary": $secondary-bg-subtle-dark,
+//     "success": $success-bg-subtle-dark,
+//     "info": $info-bg-subtle-dark,
+//     "warning": $warning-bg-subtle-dark,
+//     "danger": $danger-bg-subtle-dark,
+//     "light": $light-bg-subtle-dark,
+//     "dark": $dark-bg-subtle-dark,
+//   ) !default;
+//   // scss-docs-end theme-bg-subtle-dark-map
+
+//   // scss-docs-start theme-border-subtle-dark-map
+//   $theme-colors-border-subtle-dark: (
+//     "primary": $primary-border-subtle-dark,
+//     "secondary": $secondary-border-subtle-dark,
+//     "success": $success-border-subtle-dark,
+//     "info": $info-border-subtle-dark,
+//     "warning": $warning-border-subtle-dark,
+//     "danger": $danger-border-subtle-dark,
+//     "light": $light-border-subtle-dark,
+//     "dark": $dark-border-subtle-dark,
+//   ) !default;
+//   // scss-docs-end theme-border-subtle-dark-map
+// }
+
+// // Utilities maps
+// //
+// // Extends the default `$theme-colors` maps to help create our utilities.
+
+// // Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+// // scss-docs-start utilities-colors
+// $utilities-colors: $theme-colors-rgb !default;
+// // scss-docs-end utilities-colors
+
+// // scss-docs-start utilities-text-colors
+// $utilities-text: map.merge(
+//   $utilities-colors,
+//   (
+//     "black": to-rgb($black),
+//     "white": to-rgb($white),
+//     "body": to-rgb($body-color)
+//   )
+// ) !default;
+// $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text") !default;
+
+// $utilities-text-emphasis-colors: (
+//   "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
+//   "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
+//   "success-emphasis": var(--#{$prefix}success-text-emphasis),
+//   "info-emphasis": var(--#{$prefix}info-text-emphasis),
+//   "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
+//   "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
+//   "light-emphasis": var(--#{$prefix}light-text-emphasis),
+//   "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
+// ) !default;
+// // scss-docs-end utilities-text-colors
+
+// // scss-docs-start utilities-bg-colors
+// $utilities-bg: map.merge(
+//   $utilities-colors,
+//   (
+//     "black": to-rgb($black),
+//     "white": to-rgb($white),
+//     "body": to-rgb($body-bg)
+//   )
+// ) !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;
+// // scss-docs-end utilities-bg-colors
+
+// // scss-docs-start utilities-border-colors
+// $utilities-border: map.merge(
+//   $utilities-colors,
+//   (
+//     "black": to-rgb($black),
+//     "white": to-rgb($white)
+//   )
+// ) !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
+
+// $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "link-underline") !default;
+
+// $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+
+// $gutters: $spacers !default;

scss/_modal.scss

@@ -14,235 +14,236 @@
 // .modal-dialog    - positioning shell for the actual modal
 // .modal-content   - actual modal w/ bg and corners and stuff
 
-@layer components {
-  // Container that the modal scrolls within
-  .modal {
-    // scss-docs-start modal-css-vars
-    --#{$prefix}modal-zindex: #{$zindex-modal};
-    --#{$prefix}modal-width: #{$modal-md};
-    --#{$prefix}modal-padding: #{$modal-inner-padding};
-    --#{$prefix}modal-margin: #{$modal-dialog-margin};
-    --#{$prefix}modal-color: #{$modal-content-color};
-    --#{$prefix}modal-bg: #{$modal-content-bg};
-    --#{$prefix}modal-border-color: #{$modal-content-border-color};
-    --#{$prefix}modal-border-width: #{$modal-content-border-width};
-    --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
-    --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
-    --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
-    --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
-    --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
-    --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
-    --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
-    --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
-    --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
-    --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
-    --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
-    --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
-    --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
-    // scss-docs-end modal-css-vars
 
-    position: fixed;
-    inset: 0 auto auto 0;
-    z-index: var(--#{$prefix}modal-zindex);
-    display: none;
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    // Prevent Chrome on Windows from adding a focus outline. For details, see
-    // https://github.com/twbs/bootstrap/pull/10951.
-    outline: 0;
-    // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
-    // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
-    // See also https://github.com/twbs/bootstrap/issues/17695
+// Container that the modal scrolls within
+.modal {
+  // scss-docs-start modal-css-vars
+  --#{$prefix}modal-zindex: #{$zindex-modal};
+  --#{$prefix}modal-width: #{$modal-md};
+  --#{$prefix}modal-padding: #{$modal-inner-padding};
+  --#{$prefix}modal-margin: #{$modal-dialog-margin};
+  --#{$prefix}modal-color: #{$modal-content-color};
+  --#{$prefix}modal-bg: #{$modal-content-bg};
+  --#{$prefix}modal-border-color: #{$modal-content-border-color};
+  --#{$prefix}modal-border-width: #{$modal-content-border-width};
+  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
+  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
+  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
+  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
+  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
+  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
+  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
+  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
+  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
+  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
+  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
+  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
+  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
+  // scss-docs-end modal-css-vars
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--#{$prefix}modal-zindex);
+  display: none;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  // Prevent Chrome on Windows from adding a focus outline. For details, see
+  // https://github.com/twbs/bootstrap/pull/10951.
+  outline: 0;
+  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
+  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
+  // See also https://github.com/twbs/bootstrap/issues/17695
+}
+
+// Shell div to position the modal with bottom padding
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: var(--#{$prefix}modal-margin);
+  // allow clicks to pass through for custom click handling to close modal
+  pointer-events: none;
+
+  // When fading in the modal, animate it to slide down
+  .modal.fade & {
+    transform: $modal-fade-transform;
+    @include transition($modal-transition);
+  }
+  .modal.show & {
+    transform: $modal-show-transform;
   }
 
-  // Shell div to position the modal with bottom padding
-  .modal-dialog {
-    position: relative;
-    width: auto;
-    margin: var(--#{$prefix}modal-margin);
-    // allow clicks to pass through for custom click handling to close modal
-    pointer-events: none;
-
-    // When fading in the modal, animate it to slide down
-    .modal.fade & {
-      transform: $modal-fade-transform;
-      @include transition($modal-transition);
-    }
-    .modal.show & {
-      transform: $modal-show-transform;
-    }
-
-    // When trying to close, animate focus to scale
-    .modal.modal-static & {
-      transform: $modal-scale-transform;
-    }
+  // When trying to close, animate focus to scale
+  .modal.modal-static & {
+    transform: $modal-scale-transform;
   }
+}
 
-  .modal-dialog-scrollable {
-    height: calc(100% - var(--#{$prefix}modal-margin) * 2);
+.modal-dialog-scrollable {
+  height: calc(100% - var(--#{$prefix}modal-margin) * 2);
 
-    .modal-content {
-      max-height: 100%;
-      overflow: hidden;
-    }
-
-    .modal-body {
-      overflow-y: auto;
-    }
-  }
-
-  .modal-dialog-centered {
-    display: flex;
-    align-items: center;
-    min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);
-  }
-
-  // Actual modal
   .modal-content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
-    // counteract the pointer-events: none; in the .modal-dialog
-    color: var(--#{$prefix}modal-color);
-    pointer-events: auto;
-    background-color: var(--#{$prefix}modal-bg);
-    background-clip: padding-box;
-    border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
-    @include border-radius(var(--#{$prefix}modal-border-radius));
-    @include box-shadow(var(--#{$prefix}modal-box-shadow));
-    // Remove focus outline from opened modal
-    outline: 0;
+    max-height: 100%;
+    overflow: hidden;
   }
 
-  // Modal background
-  .modal-backdrop {
-    // scss-docs-start modal-backdrop-css-vars
-    --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
-    --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
-    --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
-    // scss-docs-end modal-backdrop-css-vars
-
-    @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
-  }
-
-  // Modal header
-  // Top section of the modal w/ title and dismiss
-  .modal-header {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    padding: var(--#{$prefix}modal-header-padding);
-    border-block-end: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
-    @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
-
-    .btn-close {
-      padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
-      // Split properties to avoid invalid calc() function if value is 0
-      margin-inline-start: auto;
-      margin-inline-end: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
-      margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
-      margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
-    }
-  }
-
-  // Title text within header
-  .modal-title {
-    margin-bottom: 0;
-    line-height: var(--#{$prefix}modal-title-line-height);
-  }
-
-  // Modal body
-  // Where all modal content resides (sibling of .modal-header and .modal-footer)
   .modal-body {
-    position: relative;
-    // Enable `flex-grow: 1` so that the body take up as much space as possible
-    // when there should be a fixed height on `.modal-dialog`.
-    flex: 1 1 auto;
-    padding: var(--#{$prefix}modal-padding);
+    overflow-y: auto;
+  }
+}
+
+.modal-dialog-centered {
+  display: flex;
+  align-items: center;
+  min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);
+}
+
+// Actual modal
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
+  // counteract the pointer-events: none; in the .modal-dialog
+  color: var(--#{$prefix}modal-color);
+  pointer-events: auto;
+  background-color: var(--#{$prefix}modal-bg);
+  background-clip: padding-box;
+  border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
+  @include border-radius(var(--#{$prefix}modal-border-radius));
+  @include box-shadow(var(--#{$prefix}modal-box-shadow));
+  // Remove focus outline from opened modal
+  outline: 0;
+}
+
+// Modal background
+.modal-backdrop {
+  // scss-docs-start modal-backdrop-css-vars
+  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
+  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
+  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
+  // scss-docs-end modal-backdrop-css-vars
+
+  @include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
+}
+
+// Modal header
+// Top section of the modal w/ title and dismiss
+.modal-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: var(--#{$prefix}modal-header-padding);
+  border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
+  @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
+
+  .btn-close {
+    padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
+    // Split properties to avoid invalid calc() function if value is 0
+    margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
+    margin-right: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
+    margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
+    margin-left: auto;
+  }
+}
+
+// Title text within header
+.modal-title {
+  margin-bottom: 0;
+  line-height: var(--#{$prefix}modal-title-line-height);
+}
+
+// Modal body
+// Where all modal content resides (sibling of .modal-header and .modal-footer)
+.modal-body {
+  position: relative;
+  // Enable `flex-grow: 1` so that the body take up as much space as possible
+  // when there should be a fixed height on `.modal-dialog`.
+  flex: 1 1 auto;
+  padding: var(--#{$prefix}modal-padding);
+}
+
+// Footer (for actions)
+.modal-footer {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center; // vertically center
+  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
+  padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
+  background-color: var(--#{$prefix}modal-footer-bg);
+  border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
+  @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
+
+  // Place margin between footer elements
+  // This solution is far from ideal because of the universal selector usage,
+  // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
+  > * {
+    margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class
+  }
+}
+
+// Scale up the modal
+@include media-breakpoint-up(sm) {
+  .modal {
+    --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};
+    --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};
   }
 
-  // Footer (for actions)
-  .modal-footer {
-    display: flex;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    align-items: center; // vertically center
-    justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-    padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
-    background-color: var(--#{$prefix}modal-footer-bg);
-    border-block-start: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
-    @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
-
-    // Place margin between footer elements
-    // This solution is far from ideal because of the universal selector usage,
-    // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
-    > * {
-      margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class
-    }
+  // Automatically set modal's width for larger viewports
+  .modal-dialog {
+    max-width: var(--#{$prefix}modal-width);
+    margin-right: auto;
+    margin-left: auto;
   }
 
-  // Scale up the modal
-  @include media-breakpoint-up(sm) {
-    .modal {
-      --#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};
-      --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};
-    }
-
-    // Automatically set modal's width for larger viewports
-    .modal-dialog {
-      max-width: var(--#{$prefix}modal-width);
-      margin-inline: auto;
-    }
-
-    .modal-sm {
-      --#{$prefix}modal-width: #{$modal-sm};
-    }
+  .modal-sm {
+    --#{$prefix}modal-width: #{$modal-sm};
   }
+}
 
-  @include media-breakpoint-up(lg) {
-    .modal-lg,
-    .modal-xl {
-      --#{$prefix}modal-width: #{$modal-lg};
-    }
+@include media-breakpoint-up(lg) {
+  .modal-lg,
+  .modal-xl {
+    --#{$prefix}modal-width: #{$modal-lg};
   }
+}
 
-  @include media-breakpoint-up(xl) {
-    .modal-xl {
-      --#{$prefix}modal-width: #{$modal-xl};
-    }
+@include media-breakpoint-up(xl) {
+  .modal-xl {
+    --#{$prefix}modal-width: #{$modal-xl};
   }
+}
 
-  // scss-docs-start modal-fullscreen-loop
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-    $postfix: if($infix != "", $infix + "-down", "");
+// scss-docs-start modal-fullscreen-loop
+@each $breakpoint in map.keys($grid-breakpoints) {
+  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+  $postfix: if($infix != "", $infix + "-down", "");
 
-    @include media-breakpoint-down($breakpoint) {
-      .modal-fullscreen#{$postfix} {
-        width: 100vw;
-        max-width: none;
+  @include media-breakpoint-down($breakpoint) {
+    .modal-fullscreen#{$postfix} {
+      width: 100vw;
+      max-width: none;
+      height: 100%;
+      margin: 0;
+
+      .modal-content {
         height: 100%;
-        margin: 0;
+        border: 0;
+        @include border-radius(0);
+      }
 
-        .modal-content {
-          height: 100%;
-          border: 0;
-          @include border-radius(0);
-        }
+      .modal-header,
+      .modal-footer {
+        @include border-radius(0);
+      }
 
-        .modal-header,
-        .modal-footer {
-          @include border-radius(0);
-        }
-
-        .modal-body {
-          overflow-y: auto;
-        }
+      .modal-body {
+        overflow-y: auto;
       }
     }
   }
-  // scss-docs-end modal-fullscreen-loop
 }
+// scss-docs-end modal-fullscreen-loop

scss/_nav.scss

@@ -5,228 +5,200 @@
 @use "mixins/gradients" as *;
 @use "vendor/rfs" as *;
 
-// scss-docs-start nav-variables
-$nav-link-padding-y:                .5rem !default;
-$nav-link-padding-x:                1rem !default;
-$nav-link-font-size:                null !default;
-$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:           var(--#{$prefix}secondary-color) !default;
-$nav-link-focus-box-shadow:         $focus-ring-box-shadow !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}bg-body) !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:           var(--#{$prefix}border-radius) !default;
-$nav-pills-link-active-color:       $component-active-color !default;
-$nav-pills-link-active-bg:          $component-active-bg !default;
-
-$nav-underline-gap:                 1rem !default;
-$nav-underline-border-width:        .125rem !default;
-$nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
-// scss-docs-end nav-variables
-
 // Base class
 //
 // Kickstart any navigation component with a set of style resets. Works with
 // `<nav>`s, `<ul>`s or `<ol>`s.
 
-@layer components {
-  .nav {
-    // scss-docs-start nav-css-vars
-    --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
-    --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
-    @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
-    --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
-    --#{$prefix}nav-link-color: #{$nav-link-color};
-    --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
-    --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
-    // scss-docs-end nav-css-vars
+.nav {
+  // scss-docs-start nav-css-vars
+  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
+  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
+  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
+  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
+  --#{$prefix}nav-link-color: #{$nav-link-color};
+  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
+  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
+  // scss-docs-end nav-css-vars
 
-    display: flex;
-    flex-wrap: wrap;
-    padding-inline-start: 0;
-    margin-bottom: 0;
-    list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-link {
+  display: block;
+  padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
+  @include font-size(var(--#{$prefix}nav-link-font-size));
+  font-weight: var(--#{$prefix}nav-link-font-weight);
+  color: var(--#{$prefix}nav-link-color);
+  text-decoration: if($link-decoration == none, null, none);
+  background: none;
+  border: 0;
+  @include transition($nav-link-transition);
+
+  &:hover,
+  &:focus {
+    color: var(--#{$prefix}nav-link-hover-color);
+    text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
+  &:focus-visible {
+    outline: 0;
+    box-shadow: $nav-link-focus-box-shadow;
+  }
+
+  // Disabled state lightens text
+  &.disabled,
+  &:disabled {
+    color: var(--#{$prefix}nav-link-disabled-color);
+    pointer-events: none;
+    cursor: default;
+  }
+}
+
+//
+// Tabs
+//
+
+.nav-tabs {
+  // scss-docs-start nav-tabs-css-vars
+  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
+  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
+  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
+  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
+  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
+  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
+  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
+  // scss-docs-end nav-tabs-css-vars
+
+  border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
+
   .nav-link {
-    display: block;
-    padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
-    @include font-size(var(--#{$prefix}nav-link-font-size));
-    font-weight: var(--#{$prefix}nav-link-font-weight);
-    color: var(--#{$prefix}nav-link-color);
-    text-decoration: none;
-    background: none;
-    border: 0;
-    @include transition($nav-link-transition);
+    margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
+    border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
+    @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
 
     &:hover,
     &:focus {
-      color: var(--#{$prefix}nav-link-hover-color);
-    }
-
-    &:focus-visible {
-      outline: 0;
-      box-shadow: $nav-link-focus-box-shadow;
-    }
-
-    // Disabled state lightens text
-    &.disabled,
-    &:disabled {
-      color: var(--#{$prefix}nav-link-disabled-color);
-      pointer-events: none;
-      cursor: default;
+      // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+      isolation: isolate;
+      border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
     }
   }
 
-  //
-  // Tabs
-  //
-
-  .nav-tabs {
-    // scss-docs-start nav-tabs-css-vars
-    --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
-    --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
-    --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
-    --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
-    --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
-    --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
-    --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
-    // scss-docs-end nav-tabs-css-vars
-
-    border-block-end: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
-
-    .nav-link {
-      margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
-      border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
-      @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
-
-      &:hover,
-      &:focus {
-        // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
-        isolation: isolate;
-        border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
-      }
-    }
-
-    .nav-link.active,
-    .nav-item.show .nav-link {
-      color: var(--#{$prefix}nav-tabs-link-active-color);
-      background-color: var(--#{$prefix}nav-tabs-link-active-bg);
-      border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
-    }
-
-    .dropdown-menu {
-      // Make dropdown border overlap tab border
-      margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
-      // Remove the top rounded corners here since there is a hard edge above the menu
-      @include border-top-radius(0);
-    }
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    color: var(--#{$prefix}nav-tabs-link-active-color);
+    background-color: var(--#{$prefix}nav-tabs-link-active-bg);
+    border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
   }
 
-
-  //
-  // Pills
-  //
-
-  .nav-pills {
-    // scss-docs-start nav-pills-css-vars
-    --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
-    --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
-    --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
-    // scss-docs-end nav-pills-css-vars
-
-    .nav-link {
-      @include border-radius(var(--#{$prefix}nav-pills-border-radius));
-    }
-
-    .nav-link.active,
-    .show > .nav-link {
-      color: var(--#{$prefix}nav-pills-link-active-color);
-      @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
-    }
-  }
-
-
-  //
-  // Underline
-  //
-
-  .nav-underline {
-    // scss-docs-start nav-underline-css-vars
-    --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
-    --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
-    --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
-    // scss-docs-end nav-underline-css-vars
-
-    gap: var(--#{$prefix}nav-underline-gap);
-
-    .nav-link {
-      padding-inline: 0;
-      border-block-end: var(--#{$prefix}nav-underline-border-width) solid transparent;
-
-      &:hover,
-      &:focus {
-        border-block-end-color: currentcolor;
-      }
-    }
-
-    .nav-link.active,
-    .show > .nav-link {
-      font-weight: $font-weight-bold;
-      color: var(--#{$prefix}nav-underline-link-active-color);
-      border-block-end-color: currentcolor;
-    }
-  }
-
-
-  //
-  // Justified variants
-  //
-
-  .nav-fill {
-    > .nav-link,
-    .nav-item {
-      flex: 1 1 auto;
-      text-align: center;
-    }
-  }
-
-  .nav-justified {
-    > .nav-link,
-    .nav-item {
-      flex-grow: 1;
-      flex-basis: 0;
-      text-align: center;
-    }
-  }
-
-  .nav-fill,
-  .nav-justified {
-    .nav-item .nav-link {
-      width: 100%; // Make sure button will grow
-    }
-  }
-
-
-  // Tabbable tabs
-  //
-  // Hide tabbable panes to start, show them when `.active`
-
-  .tab-content {
-    > .tab-pane {
-      display: none;
-    }
-    > .active {
-      display: block;
-    }
+  .dropdown-menu {
+    // Make dropdown border overlap tab border
+    margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
+    // Remove the top rounded corners here since there is a hard edge above the menu
+    @include border-top-radius(0);
+  }
+}
+
+
+//
+// Pills
+//
+
+.nav-pills {
+  // scss-docs-start nav-pills-css-vars
+  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
+  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
+  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
+  // scss-docs-end nav-pills-css-vars
+
+  .nav-link {
+    @include border-radius(var(--#{$prefix}nav-pills-border-radius));
+  }
+
+  .nav-link.active,
+  .show > .nav-link {
+    color: var(--#{$prefix}nav-pills-link-active-color);
+    @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
+  }
+}
+
+
+//
+// Underline
+//
+
+.nav-underline {
+  // scss-docs-start nav-underline-css-vars
+  --#{$prefix}nav-underline-gap: #{$nav-underline-gap};
+  --#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
+  --#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
+  // scss-docs-end nav-underline-css-vars
+
+  gap: var(--#{$prefix}nav-underline-gap);
+
+  .nav-link {
+    padding-right: 0;
+    padding-left: 0;
+    border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
+
+    &:hover,
+    &:focus {
+      border-bottom-color: currentcolor;
+    }
+  }
+
+  .nav-link.active,
+  .show > .nav-link {
+    font-weight: $font-weight-bold;
+    color: var(--#{$prefix}nav-underline-link-active-color);
+    border-bottom-color: currentcolor;
+  }
+}
+
+
+//
+// Justified variants
+//
+
+.nav-fill {
+  > .nav-link,
+  .nav-item {
+    flex: 1 1 auto;
+    text-align: center;
+  }
+}
+
+.nav-justified {
+  > .nav-link,
+  .nav-item {
+    flex-grow: 1;
+    flex-basis: 0;
+    text-align: center;
+  }
+}
+
+.nav-fill,
+.nav-justified {
+  .nav-item .nav-link {
+    width: 100%; // Make sure button will grow
+  }
+}
+
+
+// Tabbable tabs
+//
+// Hide tabbable panes to start, show them when `.active`
+
+.tab-content {
+  > .tab-pane {
+    display: none;
+  }
+  > .active {
+    display: block;
   }
 }

scss/_navbar.scss

@@ -1,6 +1,5 @@
 @use "sass:map";
 @use "config" as *;
-@use "colors" as *;
 @use "variables" as *;
 @use "mixins/border-radius" as *;
 @use "mixins/box-shadow" as *;
@@ -11,335 +10,292 @@
 @use "vendor/rfs" as *;
 @use "layout/breakpoints" as *;
 
-// scss-docs-start navbar-variables
-$navbar-padding-y:                  $spacer * .5 !default;
-$navbar-padding-x:                  null !default;
+// Navbar
+//
+// Provide a static navbar from which we expand to create full-width, fixed, and
+// other navbar variations.
 
-$navbar-nav-link-padding-x:         .5rem !default;
+.navbar {
+  // scss-docs-start navbar-css-vars
+  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
+  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
+  --#{$prefix}navbar-color: #{$navbar-light-color};
+  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
+  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
+  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
+  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
+  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
+  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
+  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
+  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
+  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
+  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
+  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
+  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
+  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
+  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
+  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
+  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
+  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
+  // scss-docs-end navbar-css-vars
 
-$navbar-brand-font-size:            $font-size-lg !default;
-// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-// mdo-do: fix this
-// $nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
-// $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-height:               1.5rem !default;
-// $navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5 !default;
-$navbar-brand-padding-y:            $navbar-brand-height * .5 !default;
-$navbar-brand-margin-end:           1rem !default;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap; // allow us to do the line break for collapsing content
+  align-items: center;
+  justify-content: space-between; // space out brand from logo
+  padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
+  @include gradient-bg();
 
-$navbar-toggler-padding-y:          .25rem !default;
-$navbar-toggler-padding-x:          .75rem !default;
-$navbar-toggler-font-size:          $font-size-lg !default;
-$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:                color-mix(in srgb, var(--#{$prefix}fg-black) 65%, transparent) !default;
-$navbar-light-hover-color:          color-mix(in srgb, var(--#{$prefix}fg-black) 80%, transparent) !default;
-$navbar-light-active-color:         color-mix(in srgb, var(--#{$prefix}fg-black) 100%, transparent) !default;
-$navbar-light-disabled-color:       color-mix(in srgb, var(--#{$prefix}fg-black) 30%, transparent) !default;
-$navbar-light-icon-color:           rgba($body-color, .75) !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-icon-color}' 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
-
-// scss-docs-start navbar-dark-variables
-$navbar-dark-color:                 rgba($white, .55) !default;
-$navbar-dark-hover-color:           rgba($white, .75) !default;
-$navbar-dark-active-color:          $white !default;
-$navbar-dark-disabled-color:        rgba($white, .25) !default;
-$navbar-dark-icon-color:            $navbar-dark-color !default;
-$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
-$navbar-dark-brand-color:           $navbar-dark-active-color !default;
-$navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
-// scss-docs-end navbar-dark-variables
-
-@layer components {
-  .navbar {
-    // scss-docs-start navbar-css-vars
-    --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
-    --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
-    --#{$prefix}navbar-color: #{$navbar-light-color};
-    --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
-    --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
-    --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
-    --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
-    --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
-    --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
-    --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
-    --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
-    --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
-    --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
-    --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
-    --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
-    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
-    --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
-    --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
-    --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
-    --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
-    // scss-docs-end navbar-css-vars
-
-    position: relative;
+  // Because flex properties aren't inherited, we need to redeclare these first
+  // few properties so that content nested within behave properly.
+  // The `flex-wrap` property is inherited to simplify the expanded navbars
+  %container-flex-properties {
     display: flex;
-    flex-wrap: wrap; // allow us to do the line break for collapsing content
+    flex-wrap: inherit;
     align-items: center;
-    justify-content: space-between; // space out brand from logo
-    padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
-    @include gradient-bg();
+    justify-content: space-between;
+  }
 
-    // Because flex properties aren't inherited, we need to redeclare these first
-    // few properties so that content nested within behave properly.
-    // The `flex-wrap` property is inherited to simplify the expanded navbars
-    %container-flex-properties {
-      display: flex;
-      flex-wrap: inherit;
-      align-items: center;
-      justify-content: space-between;
-    }
+  > .container,
+  > .container-fluid {
+    @extend %container-flex-properties;
+  }
 
-    > .container,
-    > .container-fluid {
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
       @extend %container-flex-properties;
     }
-
-    @each $breakpoint, $container-max-width in $container-max-widths {
-      > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
-        @extend %container-flex-properties;
-      }
-    }
   }
+}
 
 
-  // Navbar brand
-  //
-  // Used for brand, project, or site names.
+// Navbar brand
+//
+// Used for brand, project, or site names.
 
-  .navbar-brand {
-    padding-top: var(--#{$prefix}navbar-brand-padding-y);
-    padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
-    margin-inline-end: var(--#{$prefix}navbar-brand-margin-end);
-    @include font-size(var(--#{$prefix}navbar-brand-font-size));
-    color: var(--#{$prefix}navbar-brand-color);
-    text-decoration: none;
-    white-space: nowrap;
+.navbar-brand {
+  padding-top: var(--#{$prefix}navbar-brand-padding-y);
+  padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
+  margin-right: var(--#{$prefix}navbar-brand-margin-end);
+  @include font-size(var(--#{$prefix}navbar-brand-font-size));
+  color: var(--#{$prefix}navbar-brand-color);
+  text-decoration: if($link-decoration == none, null, none);
+  white-space: nowrap;
 
-    &:hover,
-    &:focus {
-      color: var(--#{$prefix}navbar-brand-hover-color);
-    }
+  &:hover,
+  &:focus {
+    color: var(--#{$prefix}navbar-brand-hover-color);
+    text-decoration: if($link-hover-decoration == underline, none, null);
   }
+}
 
 
-  // Navbar nav
-  //
-  // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
+// Navbar nav
+//
+// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
 
-  .navbar-nav {
-    // scss-docs-start navbar-nav-css-vars
-    --#{$prefix}nav-link-padding-x: 0;
-    // @mdo-do: fix this, navbar shouldn't need to reuse nav link variables mb? or we need to bring them in…
-    // --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
-    // @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
-    // --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
-    --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
-    --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
-    --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
-    // scss-docs-end navbar-nav-css-vars
+.navbar-nav {
+  // scss-docs-start navbar-nav-css-vars
+  --#{$prefix}nav-link-padding-x: 0;
+  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
+  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
+  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
+  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
+  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
+  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
+  // scss-docs-end navbar-nav-css-vars
 
-    display: flex;
-    flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
-    padding-inline-start: 0;
-    margin-bottom: 0;
-    list-style: none;
+  display: flex;
+  flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
 
-    .nav-link {
-      &.active,
-      &.show {
-        color: var(--#{$prefix}navbar-active-color);
-      }
-    }
-
-    .dropdown-menu {
-      position: static;
-    }
-  }
-
-
-  // Navbar text
-  //
-  //
-
-  .navbar-text {
-    // @mdo-do: fix this too
-    // padding-top: $nav-link-padding-y;
-    // padding-bottom: $nav-link-padding-y;
-    color: var(--#{$prefix}navbar-color);
-
-    a,
-    a:hover,
-    a:focus  {
+  .nav-link {
+    &.active,
+    &.show {
       color: var(--#{$prefix}navbar-active-color);
     }
   }
 
+  .dropdown-menu {
+    position: static;
+  }
+}
 
-  // Responsive navbar
-  //
-  // Custom styles for responsive collapsing and toggling of navbar contents.
-  // Powered by the collapse Bootstrap JavaScript plugin.
 
-  // When collapsed, prevent the toggleable navbar contents from appearing in
-  // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
-  // on the `.navbar` parent.
-  .navbar-collapse {
-    flex-grow: 1;
-    flex-basis: 100%;
-    // For always expanded or extra full navbars, ensure content aligns itself
-    // properly vertically. Can be easily overridden with flex utilities.
-    align-items: center;
+// Navbar text
+//
+//
+
+.navbar-text {
+  padding-top: $nav-link-padding-y;
+  padding-bottom: $nav-link-padding-y;
+  color: var(--#{$prefix}navbar-color);
+
+  a,
+  a:hover,
+  a:focus  {
+    color: var(--#{$prefix}navbar-active-color);
+  }
+}
+
+
+// Responsive navbar
+//
+// Custom styles for responsive collapsing and toggling of navbar contents.
+// Powered by the collapse Bootstrap JavaScript plugin.
+
+// When collapsed, prevent the toggleable navbar contents from appearing in
+// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
+// on the `.navbar` parent.
+.navbar-collapse {
+  flex-grow: 1;
+  flex-basis: 100%;
+  // For always expanded or extra full navbars, ensure content aligns itself
+  // properly vertically. Can be easily overridden with flex utilities.
+  align-items: center;
+}
+
+// Button for toggling the navbar when in its collapsed state
+.navbar-toggler {
+  padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
+  @include font-size(var(--#{$prefix}navbar-toggler-font-size));
+  line-height: 1;
+  color: var(--#{$prefix}navbar-color);
+  background-color: transparent; // remove default button style
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
+  @include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
+  @include transition(var(--#{$prefix}navbar-toggler-transition));
+
+  &:hover {
+    text-decoration: none;
   }
 
-  // Button for toggling the navbar when in its collapsed state
-  .navbar-toggler {
-    padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
-    @include font-size(var(--#{$prefix}navbar-toggler-font-size));
-    line-height: 1;
-    color: var(--#{$prefix}navbar-color);
-    background-color: transparent; // remove default button style
-    border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
-    @include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
-    @include transition(var(--#{$prefix}navbar-toggler-transition));
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    &:focus {
-      text-decoration: none;
-      outline: 0;
-      box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
-    }
+  &:focus {
+    text-decoration: none;
+    outline: 0;
+    box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
   }
+}
 
-  // Keep as a separate element so folks can easily override it with another icon
-  // or image file as needed.
-  .navbar-toggler-icon {
-    display: inline-block;
-    width: 1.5em;
-    height: 1.5em;
-    vertical-align: middle;
-    background-image: var(--#{$prefix}navbar-toggler-icon-bg);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 100%;
-  }
+// Keep as a separate element so folks can easily override it with another icon
+// or image file as needed.
+.navbar-toggler-icon {
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+  background-image: var(--#{$prefix}navbar-toggler-icon-bg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+}
 
-  .navbar-nav-scroll {
-    max-height: var(--#{$prefix}scroll-height, 75vh);
-    overflow-y: auto;
-  }
+.navbar-nav-scroll {
+  max-height: var(--#{$prefix}scroll-height, 75vh);
+  overflow-y: auto;
+}
 
-  // scss-docs-start navbar-expand-loop
-  // Generate series of `.navbar-expand-*` responsive classes for configuring
-  // where your navbar collapses.
-  .navbar-expand {
-    @each $breakpoint in map.keys($grid-breakpoints) {
-      $next: breakpoint-next($breakpoint, $grid-breakpoints);
-      $infix: breakpoint-infix($next, $grid-breakpoints);
+// scss-docs-start navbar-expand-loop
+// Generate series of `.navbar-expand-*` responsive classes for configuring
+// where your navbar collapses.
+.navbar-expand {
+  @each $breakpoint in map.keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
 
-      // stylelint-disable-next-line scss/selector-no-union-class-name
-      &#{$infix} {
-        @include media-breakpoint-up($next) {
-          flex-wrap: nowrap;
-          justify-content: flex-start;
+    // stylelint-disable-next-line scss/selector-no-union-class-name
+    &#{$infix} {
+      @include media-breakpoint-up($next) {
+        flex-wrap: nowrap;
+        justify-content: flex-start;
 
-          .navbar-nav {
-            flex-direction: row;
+        .navbar-nav {
+          flex-direction: row;
 
-            .dropdown-menu {
-              position: absolute;
-            }
-
-            .nav-link {
-              padding-inline: var(--#{$prefix}navbar-nav-link-padding-x);
-            }
+          .dropdown-menu {
+            position: absolute;
           }
 
-          .navbar-nav-scroll {
-            overflow: visible;
+          .nav-link {
+            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
+            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
+          }
+        }
+
+        .navbar-nav-scroll {
+          overflow: visible;
+        }
+
+        .navbar-collapse {
+          display: flex !important; // stylelint-disable-line declaration-no-important
+          flex-basis: auto;
+        }
+
+        .navbar-toggler {
+          display: none;
+        }
+
+        .offcanvas {
+          // stylelint-disable declaration-no-important
+          position: static;
+          z-index: auto;
+          flex-grow: 1;
+          width: auto !important;
+          height: auto !important;
+          visibility: visible !important;
+          background-color: transparent !important;
+          border: 0 !important;
+          transform: none !important;
+          @include box-shadow(none);
+          @include transition(none);
+          // stylelint-enable declaration-no-important
+
+          .offcanvas-header {
+            display: none;
           }
 
-          .navbar-collapse {
-            display: flex !important; // stylelint-disable-line declaration-no-important
-            flex-basis: auto;
-          }
-
-          .navbar-toggler {
-            display: none !important; // stylelint-disable-line declaration-no-important
-          }
-
-          .offcanvas {
-            // stylelint-disable declaration-no-important
-            position: static;
-            z-index: auto;
-            flex-grow: 1;
-            width: auto !important;
-            height: auto !important;
-            visibility: visible !important;
-            background-color: transparent !important;
-            border: 0 !important;
-            transform: none !important;
-            @include box-shadow(none);
-            @include transition(none);
-            // stylelint-enable declaration-no-important
-
-            .offcanvas-header {
-              display: none;
-            }
-
-            .offcanvas-body {
-              display: flex;
-              flex-grow: 0;
-              padding: 0;
-              overflow-y: visible;
-            }
+          .offcanvas-body {
+            display: flex;
+            flex-grow: 0;
+            padding: 0;
+            overflow-y: visible;
           }
         }
       }
     }
   }
-  // scss-docs-end navbar-expand-loop
+}
+// scss-docs-end navbar-expand-loop
 
-  // Navbar themes
-  //
-  // Styles for switching between navbars with light or dark background.
+// Navbar themes
+//
+// Styles for switching between navbars with light or dark background.
 
-  .navbar-light {
-    @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
-  }
+.navbar-light {
+  @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
+}
 
-  .navbar-dark,
-  .navbar[data-bs-theme="dark"] {
-    // scss-docs-start navbar-dark-css-vars
-    --#{$prefix}navbar-color: #{$navbar-dark-color};
-    --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
-    --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
-    --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
-    --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
-    --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
-    --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
-    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
-    // scss-docs-end navbar-dark-css-vars
-  }
+.navbar-dark,
+.navbar[data-bs-theme="dark"] {
+  // scss-docs-start navbar-dark-css-vars
+  --#{$prefix}navbar-color: #{$navbar-dark-color};
+  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
+  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
+  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
+  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
+  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
+  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
+  --#{$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-toggler-icon {
-        --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
-      }
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .navbar-toggler-icon {
+      --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
     }
   }
 }

scss/_offcanvas.scss

@@ -23,133 +23,131 @@
   // scss-docs-end offcanvas-css-vars
 }
 
-@layer components {
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($next, $grid-breakpoints);
+@each $breakpoint in map.keys($grid-breakpoints) {
+  $next: breakpoint-next($breakpoint, $grid-breakpoints);
+  $infix: breakpoint-infix($next, $grid-breakpoints);
 
-    .offcanvas#{$infix} {
-      @extend %offcanvas-css-vars;
-    }
-  }
-
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($next, $grid-breakpoints);
-
-    .offcanvas#{$infix} {
-      @include media-breakpoint-down($next) {
-        position: fixed;
-        bottom: 0;
-        z-index: var(--#{$prefix}offcanvas-zindex);
-        display: flex;
-        flex-direction: column;
-        max-width: 100%;
-        color: var(--#{$prefix}offcanvas-color);
-        visibility: hidden;
-        background-color: var(--#{$prefix}offcanvas-bg);
-        background-clip: padding-box;
-        outline: 0;
-        @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
-        @include transition(var(--#{$prefix}offcanvas-transition));
-
-        &.offcanvas-start {
-          top: 0;
-          left: 0;
-          width: var(--#{$prefix}offcanvas-width);
-          border-inline-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
-          transform: translateX(-100%);
-        }
-
-        &.offcanvas-end {
-          top: 0;
-          right: 0;
-          width: var(--#{$prefix}offcanvas-width);
-          border-inline-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
-          transform: translateX(100%);
-        }
-
-        &.offcanvas-top {
-          top: 0;
-          right: 0;
-          left: 0;
-          height: var(--#{$prefix}offcanvas-height);
-          max-height: 100%;
-          border-block-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
-          transform: translateY(-100%);
-        }
-
-        &.offcanvas-bottom {
-          right: 0;
-          left: 0;
-          height: var(--#{$prefix}offcanvas-height);
-          max-height: 100%;
-          border-block-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
-          transform: translateY(100%);
-        }
-
-        &.showing,
-        &.show:not(.hiding) {
-          transform: none;
-        }
-
-        &.showing,
-        &.hiding,
-        &.show {
-          visibility: visible;
-        }
-      }
-
-      @if not ($infix == "") {
-        @include media-breakpoint-up($next) {
-          --#{$prefix}offcanvas-height: auto;
-          --#{$prefix}offcanvas-border-width: 0;
-          background-color: transparent !important; // stylelint-disable-line declaration-no-important
-
-          .offcanvas-header {
-            display: none;
-          }
-
-          .offcanvas-body {
-            display: flex;
-            flex-grow: 0;
-            padding: 0;
-            overflow-y: visible;
-            // Reset `background-color` in case `.bg-*` classes are used in offcanvas
-            background-color: transparent !important; // stylelint-disable-line declaration-no-important
-          }
-        }
-      }
-    }
-  }
-
-  .offcanvas-backdrop {
-    @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
-  }
-
-  .offcanvas-header {
-    display: flex;
-    align-items: center;
-    padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
-
-    .btn-close {
-      padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
-      // Split properties to avoid invalid calc() function if value is 0
-      margin-inline-start: auto;
-      margin-inline-end: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
-      margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
-      margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
-    }
-  }
-
-  .offcanvas-title {
-    margin-bottom: 0;
-    line-height: var(--#{$prefix}offcanvas-title-line-height);
-  }
-
-  .offcanvas-body {
-    flex-grow: 1;
-    padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
-    overflow-y: auto;
+  .offcanvas#{$infix} {
+    @extend %offcanvas-css-vars;
   }
 }
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+  $next: breakpoint-next($breakpoint, $grid-breakpoints);
+  $infix: breakpoint-infix($next, $grid-breakpoints);
+
+  .offcanvas#{$infix} {
+    @include media-breakpoint-down($next) {
+      position: fixed;
+      bottom: 0;
+      z-index: var(--#{$prefix}offcanvas-zindex);
+      display: flex;
+      flex-direction: column;
+      max-width: 100%;
+      color: var(--#{$prefix}offcanvas-color);
+      visibility: hidden;
+      background-color: var(--#{$prefix}offcanvas-bg);
+      background-clip: padding-box;
+      outline: 0;
+      @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
+      @include transition(var(--#{$prefix}offcanvas-transition));
+
+      &.offcanvas-start {
+        top: 0;
+        left: 0;
+        width: var(--#{$prefix}offcanvas-width);
+        border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+        transform: translateX(-100%);
+      }
+
+      &.offcanvas-end {
+        top: 0;
+        right: 0;
+        width: var(--#{$prefix}offcanvas-width);
+        border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+        transform: translateX(100%);
+      }
+
+      &.offcanvas-top {
+        top: 0;
+        right: 0;
+        left: 0;
+        height: var(--#{$prefix}offcanvas-height);
+        max-height: 100%;
+        border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+        transform: translateY(-100%);
+      }
+
+      &.offcanvas-bottom {
+        right: 0;
+        left: 0;
+        height: var(--#{$prefix}offcanvas-height);
+        max-height: 100%;
+        border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+        transform: translateY(100%);
+      }
+
+      &.showing,
+      &.show:not(.hiding) {
+        transform: none;
+      }
+
+      &.showing,
+      &.hiding,
+      &.show {
+        visibility: visible;
+      }
+    }
+
+    @if not ($infix == "") {
+      @include media-breakpoint-up($next) {
+        --#{$prefix}offcanvas-height: auto;
+        --#{$prefix}offcanvas-border-width: 0;
+        background-color: transparent !important; // stylelint-disable-line declaration-no-important
+
+        .offcanvas-header {
+          display: none;
+        }
+
+        .offcanvas-body {
+          display: flex;
+          flex-grow: 0;
+          padding: 0;
+          overflow-y: visible;
+          // Reset `background-color` in case `.bg-*` classes are used in offcanvas
+          background-color: transparent !important; // stylelint-disable-line declaration-no-important
+        }
+      }
+    }
+  }
+}
+
+.offcanvas-backdrop {
+  @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
+}
+
+.offcanvas-header {
+  display: flex;
+  align-items: center;
+  padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
+
+  .btn-close {
+    padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
+    // Split properties to avoid invalid calc() function if value is 0
+    margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
+    margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
+    margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
+    margin-left: auto;
+  }
+}
+
+.offcanvas-title {
+  margin-bottom: 0;
+  line-height: var(--#{$prefix}offcanvas-title-line-height);
+}
+
+.offcanvas-body {
+  flex-grow: 1;
+  padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
+  overflow-y: auto;
+}

scss/_pagination.scss

@@ -6,47 +6,6 @@
 @use "mixins/gradients" as *;
 @use "vendor/rfs" as *;
 
-// scss-docs-start pagination-variables
-$pagination-padding-y:              .375rem !default;
-$pagination-padding-x:              .75rem !default;
-$pagination-padding-y-sm:           .25rem !default;
-$pagination-padding-x-sm:           .5rem !default;
-$pagination-padding-y-lg:           .75rem !default;
-$pagination-padding-x-lg:           1.5rem !default;
-
-$pagination-font-size:              $font-size-base !default;
-
-$pagination-color:                  var(--#{$prefix}link-color) !default;
-$pagination-bg:                     var(--#{$prefix}bg-body) !default;
-$pagination-border-radius:          var(--#{$prefix}border-radius) !default;
-$pagination-border-width:           var(--#{$prefix}border-width) !default;
-$pagination-margin-start:           calc(-1 * #{$pagination-border-width}) !default;
-$pagination-border-color:           var(--#{$prefix}border-color) !default;
-
-$pagination-focus-color:            var(--#{$prefix}link-hover-color) !default;
-$pagination-focus-bg:               var(--#{$prefix}secondary-bg) !default;
-$pagination-focus-box-shadow:       $focus-ring-box-shadow !default;
-$pagination-focus-outline:          0 !default;
-
-$pagination-hover-color:            var(--#{$prefix}link-hover-color) !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:    $component-active-bg !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;
-
-$pagination-border-radius-sm:       var(--#{$prefix}border-radius-sm) !default;
-$pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
-// scss-docs-end pagination-variables
-
-
 // scss-docs-start pagination-mixin
 @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
   --#{$prefix}pagination-padding-x: #{$padding-x};
@@ -56,113 +15,112 @@ $pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
 }
 // scss-docs-end pagination-mixin
 
-@layer components {
-  .pagination {
-    // scss-docs-start pagination-css-vars
-    --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
-    --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
-    @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
-    --#{$prefix}pagination-color: #{$pagination-color};
-    --#{$prefix}pagination-bg: #{$pagination-bg};
-    --#{$prefix}pagination-border-width: #{$pagination-border-width};
-    --#{$prefix}pagination-border-color: #{$pagination-border-color};
-    --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
-    --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
-    --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
-    --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
-    --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
-    --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
-    --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
-    --#{$prefix}pagination-active-color: #{$pagination-active-color};
-    --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
-    --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
-    --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
-    --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
-    --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
-    // scss-docs-end pagination-css-vars
+.pagination {
+  // scss-docs-start pagination-css-vars
+  --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
+  --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
+  @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
+  --#{$prefix}pagination-color: #{$pagination-color};
+  --#{$prefix}pagination-bg: #{$pagination-bg};
+  --#{$prefix}pagination-border-width: #{$pagination-border-width};
+  --#{$prefix}pagination-border-color: #{$pagination-border-color};
+  --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
+  --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
+  --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
+  --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
+  --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
+  --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
+  --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
+  --#{$prefix}pagination-active-color: #{$pagination-active-color};
+  --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
+  --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
+  --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
+  --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
+  --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
+  // scss-docs-end pagination-css-vars
 
-    display: flex;
-    @include list-unstyled();
+  display: flex;
+  @include list-unstyled();
+}
+
+.page-link {
+  position: relative;
+  display: block;
+  padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
+  @include font-size(var(--#{$prefix}pagination-font-size));
+  color: var(--#{$prefix}pagination-color);
+  text-decoration: if($link-decoration == none, null, none);
+  background-color: var(--#{$prefix}pagination-bg);
+  border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
+  @include transition($pagination-transition);
+
+  &:hover {
+    z-index: 2;
+    color: var(--#{$prefix}pagination-hover-color);
+    text-decoration: if($link-hover-decoration == underline, none, null);
+    background-color: var(--#{$prefix}pagination-hover-bg);
+    border-color: var(--#{$prefix}pagination-hover-border-color);
   }
 
-  .page-link {
-    position: relative;
-    display: block;
-    padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
-    @include font-size(var(--#{$prefix}pagination-font-size));
-    color: var(--#{$prefix}pagination-color);
-    text-decoration: none;
-    background-color: var(--#{$prefix}pagination-bg);
-    border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
-    @include transition($pagination-transition);
-
-    &:hover {
-      z-index: 2;
-      color: var(--#{$prefix}pagination-hover-color);
-      background-color: var(--#{$prefix}pagination-hover-bg);
-      border-color: var(--#{$prefix}pagination-hover-border-color);
-    }
-
-    &:focus {
-      z-index: 3;
-      color: var(--#{$prefix}pagination-focus-color);
-      background-color: var(--#{$prefix}pagination-focus-bg);
-      outline: $pagination-focus-outline;
-      box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
-    }
-
-    &.active,
-    .active > & {
-      z-index: 3;
-      color: var(--#{$prefix}pagination-active-color);
-      @include gradient-bg(var(--#{$prefix}pagination-active-bg));
-      border-color: var(--#{$prefix}pagination-active-border-color);
-    }
-
-    &.disabled,
-    .disabled > & {
-      color: var(--#{$prefix}pagination-disabled-color);
-      pointer-events: none;
-      background-color: var(--#{$prefix}pagination-disabled-bg);
-      border-color: var(--#{$prefix}pagination-disabled-border-color);
-    }
+  &:focus {
+    z-index: 3;
+    color: var(--#{$prefix}pagination-focus-color);
+    background-color: var(--#{$prefix}pagination-focus-bg);
+    outline: $pagination-focus-outline;
+    box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
   }
 
-  .page-item {
-    &:not(:first-child) .page-link {
-      margin-inline-start: $pagination-margin-start;
-    }
-
-    @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
-      &:first-child {
-        .page-link {
-          @include border-start-radius(var(--#{$prefix}pagination-border-radius));
-        }
-      }
-
-      &:last-child {
-        .page-link {
-          @include border-end-radius(var(--#{$prefix}pagination-border-radius));
-        }
-      }
-    } @else {
-      // Add border-radius to all pageLinks in case they have left margin
-      .page-link {
-        @include border-radius(var(--#{$prefix}pagination-border-radius));
-      }
-    }
+  &.active,
+  .active > & {
+    z-index: 3;
+    color: var(--#{$prefix}pagination-active-color);
+    @include gradient-bg(var(--#{$prefix}pagination-active-bg));
+    border-color: var(--#{$prefix}pagination-active-border-color);
   }
 
-
-  //
-  // Sizing
-  //
-
-  .pagination-lg {
-    @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
-  }
-
-  .pagination-sm {
-    @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
+  &.disabled,
+  .disabled > & {
+    color: var(--#{$prefix}pagination-disabled-color);
+    pointer-events: none;
+    background-color: var(--#{$prefix}pagination-disabled-bg);
+    border-color: var(--#{$prefix}pagination-disabled-border-color);
   }
 }
+
+.page-item {
+  &:not(:first-child) .page-link {
+    margin-left: $pagination-margin-start;
+  }
+
+  @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
+    &:first-child {
+      .page-link {
+        @include border-start-radius(var(--#{$prefix}pagination-border-radius));
+      }
+    }
+
+    &:last-child {
+      .page-link {
+        @include border-end-radius(var(--#{$prefix}pagination-border-radius));
+      }
+    }
+  } @else {
+    // Add border-radius to all pageLinks in case they have left margin
+    .page-link {
+      @include border-radius(var(--#{$prefix}pagination-border-radius));
+    }
+  }
+}
+
+
+//
+// Sizing
+//
+
+.pagination-lg {
+  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
+}
+
+.pagination-sm {
+  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
+}

scss/_placeholders.scss

@@ -2,62 +2,54 @@
 @use "config" as *;
 @use "variables" as *;
 
-// scss-docs-start placeholders
-$placeholder-opacity-max:           .5 !default;
-$placeholder-opacity-min:           .2 !default;
-// scss-docs-end placeholders
+.placeholder {
+  display: inline-block;
+  min-height: 1em;
+  vertical-align: middle;
+  cursor: wait;
+  background-color: currentcolor;
+  opacity: $placeholder-opacity-max;
 
-
-@layer components {
-  .placeholder {
+  &.btn::before {
     display: inline-block;
-    min-height: 1em;
-    vertical-align: middle;
-    cursor: wait;
-    background-color: currentcolor;
-    opacity: $placeholder-opacity-max;
-
-    &.btn::before {
-      display: inline-block;
-      content: "";
-    }
-  }
-
-  // Sizing
-  .placeholder-xs {
-    min-height: .6em;
-  }
-
-  .placeholder-sm {
-    min-height: .8em;
-  }
-
-  .placeholder-lg {
-    min-height: 1.2em;
-  }
-
-  // Animation
-  .placeholder-glow {
-    .placeholder {
-      animation: placeholder-glow 2s ease-in-out infinite;
-    }
-  }
-
-  @keyframes placeholder-glow {
-    50% {
-      opacity: $placeholder-opacity-min;
-    }
-  }
-
-  .placeholder-wave {
-    mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
-    mask-size: 200% 100%;
-    animation: placeholder-wave 2s linear infinite;
-  }
-
-  @keyframes placeholder-wave {
-    100% {
-      mask-position: -200% 0%;
-    }
+    content: "";
+  }
+}
+
+// Sizing
+.placeholder-xs {
+  min-height: .6em;
+}
+
+.placeholder-sm {
+  min-height: .8em;
+}
+
+.placeholder-lg {
+  min-height: 1.2em;
+}
+
+// Animation
+.placeholder-glow {
+  .placeholder {
+    animation: placeholder-glow 2s ease-in-out infinite;
+  }
+}
+
+@keyframes placeholder-glow {
+  50% {
+    opacity: $placeholder-opacity-min;
+  }
+}
+
+.placeholder-wave {
+  mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
+  mask-size: 200% 100%;
+  animation: placeholder-wave 2s linear infinite;
+}
+
+@keyframes placeholder-wave {
+  100% {
+    mask-position: -200% 0%;
   }
 }

scss/_popover.scss

@@ -5,219 +5,199 @@
 @use "vendor/rfs" as *;
 @use "mixins/reset-text" as *;
 
-// scss-docs-start popover-variables
-$popover-font-size:                 $font-size-sm !default;
-$popover-bg:                        var(--#{$prefix}bg-body) !default;
-$popover-max-width:                 276px !default;
-$popover-border-width:              var(--#{$prefix}border-width) !default;
-$popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
-$popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
-$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
-$popover-box-shadow:                var(--#{$prefix}box-shadow) !default;
+.popover {
+  // scss-docs-start popover-css-vars
+  --#{$prefix}popover-zindex: #{$zindex-popover};
+  --#{$prefix}popover-max-width: #{$popover-max-width};
+  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
+  --#{$prefix}popover-bg: #{$popover-bg};
+  --#{$prefix}popover-border-width: #{$popover-border-width};
+  --#{$prefix}popover-border-color: #{$popover-border-color};
+  --#{$prefix}popover-border-radius: #{$popover-border-radius};
+  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
+  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
+  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
+  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
+  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
+  --#{$prefix}popover-header-color: #{$popover-header-color};
+  --#{$prefix}popover-header-bg: #{$popover-header-bg};
+  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
+  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
+  --#{$prefix}popover-body-color: #{$popover-body-color};
+  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
+  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
+  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
+  // scss-docs-end popover-css-vars
 
-$popover-header-font-size:          $font-size-base !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;
+  z-index: var(--#{$prefix}popover-zindex);
+  display: block;
+  max-width: var(--#{$prefix}popover-max-width);
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  @include reset-text();
+  @include font-size(var(--#{$prefix}popover-font-size));
+  // Allow breaking very long words so they don't overflow the popover's bounds
+  word-wrap: break-word;
+  background-color: var(--#{$prefix}popover-bg);
+  background-clip: padding-box;
+  border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+  @include border-radius(var(--#{$prefix}popover-border-radius));
+  @include box-shadow(var(--#{$prefix}popover-box-shadow));
 
-$popover-body-color:                var(--#{$prefix}color-body) !default;
-$popover-body-padding-y:            $spacer !default;
-$popover-body-padding-x:            $spacer !default;
-
-$popover-arrow-width:               1rem !default;
-$popover-arrow-height:              .5rem !default;
-// scss-docs-end popover-variables
-
-@layer components {
-  .popover {
-    // scss-docs-start popover-css-vars
-    --#{$prefix}popover-zindex: #{$zindex-popover};
-    --#{$prefix}popover-max-width: #{$popover-max-width};
-    @include rfs($popover-font-size, --#{$prefix}popover-font-size);
-    --#{$prefix}popover-bg: #{$popover-bg};
-    --#{$prefix}popover-border-width: #{$popover-border-width};
-    --#{$prefix}popover-border-color: #{$popover-border-color};
-    --#{$prefix}popover-border-radius: #{$popover-border-radius};
-    --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
-    --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
-    --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
-    --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
-    @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
-    --#{$prefix}popover-header-color: #{$popover-header-color};
-    --#{$prefix}popover-header-bg: #{$popover-header-bg};
-    --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
-    --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
-    --#{$prefix}popover-body-color: #{$popover-body-color};
-    --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
-    --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
-    --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
-    // scss-docs-end popover-css-vars
-
-    z-index: var(--#{$prefix}popover-zindex);
+  .popover-arrow {
     display: block;
-    max-width: var(--#{$prefix}popover-max-width);
-    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-    // So reset our font and text properties to avoid inheriting weird values.
-    @include reset-text();
-    @include font-size(var(--#{$prefix}popover-font-size));
-    // Allow breaking very long words so they don't overflow the popover's bounds
-    word-wrap: break-word;
-    background-color: var(--#{$prefix}popover-bg);
-    background-clip: padding-box;
-    border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
-    @include border-radius(var(--#{$prefix}popover-border-radius));
-    @include box-shadow(var(--#{$prefix}popover-box-shadow));
+    width: var(--#{$prefix}popover-arrow-width);
+    height: var(--#{$prefix}popover-arrow-height);
 
-    .popover-arrow {
-      display: block;
-      width: var(--#{$prefix}popover-arrow-width);
-      height: var(--#{$prefix}popover-arrow-height);
-
-      &::before,
-      &::after {
-        position: absolute;
-        display: block;
-        content: "";
-        border-color: transparent;
-        border-style: solid;
-        border-width: 0;
-      }
-    }
-  }
-
-  .bs-popover-top {
-    > .popover-arrow {
-      bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
-
-      &::before,
-      &::after {
-        border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
-      }
-
-      &::before {
-        bottom: 0;
-        border-block-start-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        bottom: var(--#{$prefix}popover-border-width);
-        border-block-start-color: var(--#{$prefix}popover-bg);
-      }
-    }
-  }
-
-  .bs-popover-end {
-    > .popover-arrow {
-      left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
-      width: var(--#{$prefix}popover-arrow-height);
-      height: var(--#{$prefix}popover-arrow-width);
-
-      &::before,
-      &::after {
-        border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
-      }
-
-      &::before {
-        left: 0;
-        border-inline-end-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        left: var(--#{$prefix}popover-border-width);
-        border-inline-end-color: var(--#{$prefix}popover-bg);
-      }
-    }
-  }
-
-  .bs-popover-bottom {
-    > .popover-arrow {
-      top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
-
-      &::before,
-      &::after {
-        border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
-      }
-
-      &::before {
-        top: 0;
-        border-block-end-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        top: var(--#{$prefix}popover-border-width);
-        border-block-end-color: var(--#{$prefix}popover-bg);
-      }
-    }
-
-    // This will remove the popover-header's border just below the arrow
-    .popover-header::before {
+    &::before,
+    &::after {
       position: absolute;
-      top: 0;
-      left: 50%;
       display: block;
-      width: var(--#{$prefix}popover-arrow-width);
-      margin-inline-start: calc(-.5 * var(--#{$prefix}popover-arrow-width));
       content: "";
-      border-block-end: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
+      border-color: transparent;
+      border-style: solid;
+      border-width: 0;
     }
   }
-
-  .bs-popover-start {
-    > .popover-arrow {
-      right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
-      width: var(--#{$prefix}popover-arrow-height);
-      height: var(--#{$prefix}popover-arrow-width);
-
-      &::before,
-      &::after {
-        border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
-      }
-
-      &::before {
-        right: 0;
-        border-inline-start-color: var(--#{$prefix}popover-arrow-border);
-      }
-
-      &::after {
-        right: var(--#{$prefix}popover-border-width);
-        border-inline-start-color: var(--#{$prefix}popover-bg);
-      }
-    }
-  }
-
-  .bs-popover-auto {
-    &[data-popper-placement^="top"] {
-      @extend .bs-popover-top;
-    }
-    &[data-popper-placement^="right"] {
-      @extend .bs-popover-end;
-    }
-    &[data-popper-placement^="bottom"] {
-      @extend .bs-popover-bottom;
-    }
-    &[data-popper-placement^="left"] {
-      @extend .bs-popover-start;
-    }
-  }
-
-  // Offset the popover to account for the popover arrow
-  .popover-header {
-    padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
-    margin-bottom: 0; // Reset the default from Reboot
-    @include font-size(var(--#{$prefix}popover-header-font-size));
-    color: var(--#{$prefix}popover-header-color);
-    background-color: var(--#{$prefix}popover-header-bg);
-    border-block-end: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
-    @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  .popover-body {
-    padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
-    color: var(--#{$prefix}popover-body-color);
-  }
+}
+
+.bs-popover-top {
+  > .popover-arrow {
+    bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
+
+    &::before,
+    &::after {
+      border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
+    }
+
+    &::before {
+      bottom: 0;
+      border-top-color: var(--#{$prefix}popover-arrow-border);
+    }
+
+    &::after {
+      bottom: var(--#{$prefix}popover-border-width);
+      border-top-color: var(--#{$prefix}popover-bg);
+    }
+  }
+}
+
+/* rtl:begin:ignore */
+.bs-popover-end {
+  > .popover-arrow {
+    left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
+    width: var(--#{$prefix}popover-arrow-height);
+    height: var(--#{$prefix}popover-arrow-width);
+
+    &::before,
+    &::after {
+      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
+    }
+
+    &::before {
+      left: 0;
+      border-right-color: var(--#{$prefix}popover-arrow-border);
+    }
+
+    &::after {
+      left: var(--#{$prefix}popover-border-width);
+      border-right-color: var(--#{$prefix}popover-bg);
+    }
+  }
+}
+
+/* rtl:end:ignore */
+
+.bs-popover-bottom {
+  > .popover-arrow {
+    top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
+
+    &::before,
+    &::after {
+      border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
+    }
+
+    &::before {
+      top: 0;
+      border-bottom-color: var(--#{$prefix}popover-arrow-border);
+    }
+
+    &::after {
+      top: var(--#{$prefix}popover-border-width);
+      border-bottom-color: var(--#{$prefix}popover-bg);
+    }
+  }
+
+  // This will remove the popover-header's border just below the arrow
+  .popover-header::before {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    display: block;
+    width: var(--#{$prefix}popover-arrow-width);
+    margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width));
+    content: "";
+    border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
+  }
+}
+
+/* rtl:begin:ignore */
+.bs-popover-start {
+  > .popover-arrow {
+    right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
+    width: var(--#{$prefix}popover-arrow-height);
+    height: var(--#{$prefix}popover-arrow-width);
+
+    &::before,
+    &::after {
+      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
+    }
+
+    &::before {
+      right: 0;
+      border-left-color: var(--#{$prefix}popover-arrow-border);
+    }
+
+    &::after {
+      right: var(--#{$prefix}popover-border-width);
+      border-left-color: var(--#{$prefix}popover-bg);
+    }
+  }
+}
+
+/* rtl:end:ignore */
+
+.bs-popover-auto {
+  &[data-popper-placement^="top"] {
+    @extend .bs-popover-top;
+  }
+  &[data-popper-placement^="right"] {
+    @extend .bs-popover-end;
+  }
+  &[data-popper-placement^="bottom"] {
+    @extend .bs-popover-bottom;
+  }
+  &[data-popper-placement^="left"] {
+    @extend .bs-popover-start;
+  }
+}
+
+// Offset the popover to account for the popover arrow
+.popover-header {
+  padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
+  margin-bottom: 0; // Reset the default from Reboot
+  @include font-size(var(--#{$prefix}popover-header-font-size));
+  color: var(--#{$prefix}popover-header-color);
+  background-color: var(--#{$prefix}popover-header-bg);
+  border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+  @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
+
+  &:empty {
+    display: none;
+  }
+}
+
+.popover-body {
+  padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
+  color: var(--#{$prefix}popover-body-color);
 }

scss/_progress.scss

@@ -1,5 +1,4 @@
 @use "config" as *;
-@use "colors" as *;
 @use "variables" as *;
 @use "mixins/transition" as *;
 @use "mixins/gradients" as *;
@@ -7,85 +6,70 @@
 @use "mixins/box-shadow" as *;
 @use "vendor/rfs" as *;
 
-// scss-docs-start progress-variables
-$progress-height:                   1rem !default;
-$progress-font-size:                $font-size-base * .75 !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:                   var(--#{$prefix}primary-bg) !default;
-$progress-bar-animation-timing:     1s linear infinite !default;
-$progress-bar-transition:           width .6s ease !default;
-// scss-docs-end progress-variables
-
-
 // Disable animation if transitions are disabled
 
-@layer components {
-  // scss-docs-start progress-keyframes
-  @if $enable-transitions {
-    @keyframes progress-bar-stripes {
-      0% { background-position-x: var(--#{$prefix}progress-height); }
-    }
+// scss-docs-start progress-keyframes
+@if $enable-transitions {
+  @keyframes progress-bar-stripes {
+    0% { background-position-x: var(--#{$prefix}progress-height); }
   }
-  // scss-docs-end progress-keyframes
+}
+// scss-docs-end progress-keyframes
 
-  .progress,
-  .progress-stacked {
-    // scss-docs-start progress-css-vars
-    --#{$prefix}progress-height: #{$progress-height};
-    @include rfs($progress-font-size, --#{$prefix}progress-font-size);
-    --#{$prefix}progress-bg: #{$progress-bg};
-    --#{$prefix}progress-border-radius: #{$progress-border-radius};
-    --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
-    --#{$prefix}progress-bar-color: #{$progress-bar-color};
-    --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
-    --#{$prefix}progress-bar-transition: #{$progress-bar-transition};
-    // scss-docs-end progress-css-vars
+.progress,
+.progress-stacked {
+  // scss-docs-start progress-css-vars
+  --#{$prefix}progress-height: #{$progress-height};
+  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
+  --#{$prefix}progress-bg: #{$progress-bg};
+  --#{$prefix}progress-border-radius: #{$progress-border-radius};
+  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
+  --#{$prefix}progress-bar-color: #{$progress-bar-color};
+  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
+  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};
+  // scss-docs-end progress-css-vars
 
-    display: flex;
-    height: var(--#{$prefix}progress-height);
-    overflow: hidden; // force rounded corners by cropping it
-    @include font-size(var(--#{$prefix}progress-font-size));
-    background-color: var(--#{$prefix}progress-bg);
-    @include border-radius(var(--#{$prefix}progress-border-radius));
-    @include box-shadow(var(--#{$prefix}progress-box-shadow));
-  }
+  display: flex;
+  height: var(--#{$prefix}progress-height);
+  overflow: hidden; // force rounded corners by cropping it
+  @include font-size(var(--#{$prefix}progress-font-size));
+  background-color: var(--#{$prefix}progress-bg);
+  @include border-radius(var(--#{$prefix}progress-border-radius));
+  @include box-shadow(var(--#{$prefix}progress-box-shadow));
+}
 
-  .progress-bar {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    overflow: hidden;
-    color: var(--#{$prefix}progress-bar-color);
-    text-align: center;
-    white-space: nowrap;
-    background-color: var(--#{$prefix}progress-bar-bg);
-    @include transition(var(--#{$prefix}progress-bar-transition));
-  }
+.progress-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  color: var(--#{$prefix}progress-bar-color);
+  text-align: center;
+  white-space: nowrap;
+  background-color: var(--#{$prefix}progress-bar-bg);
+  @include transition(var(--#{$prefix}progress-bar-transition));
+}
 
-  .progress-bar-striped {
-    @include gradient-striped();
-    background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
-  }
+.progress-bar-striped {
+  @include gradient-striped();
+  background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
+}
 
-  .progress-stacked > .progress {
-    overflow: visible;
-  }
+.progress-stacked > .progress {
+  overflow: visible;
+}
 
-  .progress-stacked > .progress > .progress-bar {
-    width: 100%;
-  }
+.progress-stacked > .progress > .progress-bar {
+  width: 100%;
+}
 
-  @if $enable-transitions {
-    .progress-bar-animated {
-      animation: $progress-bar-animation-timing progress-bar-stripes;
+@if $enable-transitions {
+  .progress-bar-animated {
+    animation: $progress-bar-animation-timing progress-bar-stripes;
 
-      @if $enable-reduced-motion {
-        @media (prefers-reduced-motion: reduce) {
-          animation: none;
-        }
+    @if $enable-reduced-motion {
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
       }
     }
   }

scss/_root.scss

@@ -6,45 +6,70 @@
 // @use "maps" as *;
 @use "vendor/rfs" as *;
 @use "mixins/color-mode" as *;
-@use "forms/form-variables" as *;
-
-// mdo-do: do we need theme?
-@layer colors, theme, config, root, reboot, layout, content, forms, components, custom, helpers, utilities;
 
 :root {
   color-scheme: light dark;
 
-  // scss-docs-start root-theme-variables
-  // Generate semantic theme colors
+  @each $color-group-name, $color-group in $all-colors {
+    @if meta.type-of($color-group) == "map" {
+      @each $color-name, $color-value in $color-group {
+        --#{$prefix}#{$color-name}: #{$color-value};
+      }
+    } @else {
+      --#{$prefix}#{$color-group-name}: #{$color-group};
+    }
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
   @each $color-name, $color-map in $new-theme-colors {
     @each $key, $value in $color-map {
       --#{$prefix}#{$color-name}-#{$key}: #{$value};
     }
   }
 
-  @each $color, $value in $theme-bgs {
-    --#{$prefix}bg-#{$color}: #{$value};
-  }
-
-  @each $color, $value in $theme-fgs {
-    --#{$prefix}color-#{$color}: #{$value};
-  }
-
-  @each $color, $value in $theme-borders {
-    --#{$prefix}border-#{$color}: #{$value};
-  }
-
   --#{$prefix}black: #{$black};
   --#{$prefix}white: #{$white};
-  // scss-docs-end root-theme-variables
 }
 
 :root,
 [data-bs-theme="light"] {
-  color-scheme: light;
-
   // Note: Custom variable values only support SassScript inside `#{}`.
 
+  // Colors
+  //
+  // Generate palettes for full colors, grays, and theme colors.
+
+  // @each $color, $value in $colors {
+  //   --#{$prefix}#{$color}: #{$value};
+  // }
+
+  // @each $color, $value in $grays {
+  //   --#{$prefix}gray-#{$color}: #{$value};
+  // }
+
+  // @each $color, $value in $theme-colors {
+  //   --#{$prefix}#{$color}: #{$value};
+  // }
+
+  // @each $color, $value in $theme-colors-rgb {
+  //   --#{$prefix}#{$color}-rgb: #{$value};
+  // }
+
+  // @each $color, $value in $theme-colors-text {
+  //   --#{$prefix}#{$color}-text-emphasis: #{$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)};
 
@@ -62,35 +87,6 @@
     --#{$prefix}root-font-size: #{$font-size-root};
   }
   --#{$prefix}body-font-family: #{meta.inspect($font-family-base)};
-
-  // scss-docs-start root-font-size-variables
-  --#{$prefix}font-size-base: #{$font-size-base}; // 14px
-  // --#{$prefix}font-size-sm: calc(#{$font-size-base} * .9285);
-  // --#{$prefix}font-size-lg: calc(#{$font-size-base} * 1.285);
-
-  --#{$prefix}font-size-xs: clamp(.75rem, .7rem + .25vw, .875rem);
-  --#{$prefix}font-size-sm: clamp(.875rem, .8rem + .375vw, 1rem);
-  --#{$prefix}font-size-md: clamp(1rem, .9rem + .5vw, 1.125rem);
-  --#{$prefix}font-size-lg: clamp(1.25rem, 1rem + .625vw, 1.5rem);
-  --#{$prefix}font-size-xl: clamp(1.5rem, 1.1rem + .75vw, 1.75rem);
-  --#{$prefix}font-size-2xl: clamp(1.75rem, 1.3rem + 1vw, 2.25rem);
-  --#{$prefix}font-size-3xl: clamp(2rem, 1.5rem + 1.875vw, 2.5rem);
-  --#{$prefix}font-size-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
-  --#{$prefix}font-size-5xl: clamp(3rem, 2rem + 5vw, 4rem);
-  --#{$prefix}font-size-6xl: clamp(3.75rem, 2.5rem + 6.25vw, 5rem);
-
-  --#{$prefix}line-height-xs: 1.5;
-  --#{$prefix}line-height-sm: 1.5;
-  --#{$prefix}line-height-md: 1.5;
-  --#{$prefix}line-height-lg: 1.5;
-  --#{$prefix}line-height-xl: calc(2.5 / 1.75);
-  --#{$prefix}line-height-2xl: calc(3 / 2.25);
-  --#{$prefix}line-height-3xl: 1.2;
-  --#{$prefix}line-height-4xl: 1.1;
-  --#{$prefix}line-height-5xl: 1.1;
-  --#{$prefix}line-height-6xl: 1;
-  // scss-docs-end root-font-size-variables
-
   @include rfs($font-size-base, --#{$prefix}body-font-size);
   --#{$prefix}body-font-weight: #{$font-weight-base};
   --#{$prefix}body-line-height: #{$line-height-base};
@@ -113,9 +109,9 @@
     --#{$prefix}border#{$key}: #{$value};
   }
 
-  // --#{$prefix}body-color: #{$body-color};
+  --#{$prefix}body-color: #{$body-color};
   --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
-  // --#{$prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg: #{$body-bg};
   --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
 
   // --#{$prefix}emphasis-color: #{$body-emphasis-color};
@@ -145,6 +141,10 @@
   --#{$prefix}link-decoration: #{$link-decoration};
   --#{$prefix}link-hover-color: color-mix(in oklch, var(--#{$prefix}link-color) 90%, #000);
 
+  @if $link-hover-decoration != null {
+    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
+  }
+
   --#{$prefix}code-color: #{$code-color};
   --#{$prefix}highlight-color: #{$mark-color};
   --#{$prefix}highlight-bg: #{$mark-bg};
@@ -154,16 +154,14 @@
   --#{$prefix}border-style: #{$border-style};
   --#{$prefix}border-color: #{$border-color};
   --#{$prefix}border-color-translucent: #{$border-color-translucent};
-  // scss-docs-end root-border-var
 
-  // scss-docs-start root-border-radius-var
   --#{$prefix}border-radius: #{$border-radius};
   --#{$prefix}border-radius-sm: #{$border-radius-sm};
   --#{$prefix}border-radius-lg: #{$border-radius-lg};
   --#{$prefix}border-radius-xl: #{$border-radius-xl};
-  --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
+  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
   --#{$prefix}border-radius-pill: #{$border-radius-pill};
-  // scss-docs-end root-border-radius-var
+  // scss-docs-end root-border-var
 
   --#{$prefix}box-shadow: #{$box-shadow};
   --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
@@ -172,15 +170,9 @@
 
   // Focus styles
   // scss-docs-start root-focus-variables
-  // --#{$prefix}focus-ring-width: #{$focus-ring-width};
-  // --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
-  // --#{$prefix}focus-ring-color: #{$focus-ring-color};
-
-  --#{$prefix}focus-ring-width: 3px;
-  --#{$prefix}focus-ring-offset: -1px;
-  --#{$prefix}focus-ring-color: var(--#{$prefix}primary-focus-ring);
-  --#{$prefix}focus-ring: var(--#{$prefix}focus-ring-width) solid var(--#{$prefix}focus-ring-color);
-
+  --#{$prefix}focus-ring-width: #{$focus-ring-width};
+  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
+  --#{$prefix}focus-ring-color: #{$focus-ring-color};
   // scss-docs-end root-focus-variables
 
   // scss-docs-start root-form-validation-variables
@@ -196,34 +188,46 @@
     color-scheme: 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}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}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}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)};
+
+    // @each $color, $value in $theme-colors-text-dark {
+    //   --#{$prefix}#{$color}-text-emphasis: #{$value};
+    // }
+
+    // @each $color, $value in $theme-colors-bg-subtle-dark {
+    //   --#{$prefix}#{$color}-bg-subtle: #{$value};
+    // }
+
+    // @each $color, $value in $theme-colors-border-subtle-dark {
+    //   --#{$prefix}#{$color}-border-subtle: #{$value};
+    // }
 
     --#{$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}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}; // removed in v6
-    // --#{$prefix}highlight-color: #{$mark-color-dark};
-    // --#{$prefix}highlight-bg: #{$mark-bg-dark};
+    --#{$prefix}code-color: #{$code-color-dark};
+    --#{$prefix}highlight-color: #{$mark-color-dark};
+    --#{$prefix}highlight-bg: #{$mark-bg-dark};
 
     --#{$prefix}border-color: #{$border-color-dark};
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};

scss/_spinners.scss

@@ -17,87 +17,85 @@ $spinner-border-width-sm: .2em !default;
 // Rotating border
 //
 
-@layer components {
-  .spinner-grow,
-  .spinner-border {
-    display: inline-block;
-    flex-shrink: 0;
-    width: var(--#{$prefix}spinner-width);
-    height: var(--#{$prefix}spinner-height);
-    vertical-align: var(--#{$prefix}spinner-vertical-align);
-    // stylelint-disable-next-line property-disallowed-list
-    border-radius: 50%;
-    animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
+.spinner-grow,
+.spinner-border {
+  display: inline-block;
+  flex-shrink: 0;
+  width: var(--#{$prefix}spinner-width);
+  height: var(--#{$prefix}spinner-height);
+  vertical-align: var(--#{$prefix}spinner-vertical-align);
+  // stylelint-disable-next-line property-disallowed-list
+  border-radius: 50%;
+  animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
+}
+
+// scss-docs-start spinner-border-keyframes
+@keyframes spinner-border {
+  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
+}
+// scss-docs-end spinner-border-keyframes
+
+.spinner-border {
+  // scss-docs-start spinner-border-css-vars
+  --#{$prefix}spinner-width: #{$spinner-width};
+  --#{$prefix}spinner-height: #{$spinner-height};
+  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
+  --#{$prefix}spinner-border-width: #{$spinner-border-width};
+  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
+  --#{$prefix}spinner-animation-name: spinner-border;
+  // scss-docs-end spinner-border-css-vars
+
+  border: var(--#{$prefix}spinner-border-width) solid currentcolor;
+  border-right-color: transparent;
+}
+
+.spinner-border-sm {
+  // scss-docs-start spinner-border-sm-css-vars
+  --#{$prefix}spinner-width: #{$spinner-width-sm};
+  --#{$prefix}spinner-height: #{$spinner-height-sm};
+  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
+  // scss-docs-end spinner-border-sm-css-vars
+}
+
+//
+// Growing circle
+//
+
+// scss-docs-start spinner-grow-keyframes
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
   }
-
-  // scss-docs-start spinner-border-keyframes
-  @keyframes spinner-border {
-    to { transform: rotate(360deg); }
+  50% {
+    opacity: 1;
+    transform: none;
   }
-  // scss-docs-end spinner-border-keyframes
+}
+// scss-docs-end spinner-grow-keyframes
 
-  .spinner-border {
-    // scss-docs-start spinner-border-css-vars
-    --#{$prefix}spinner-width: #{$spinner-width};
-    --#{$prefix}spinner-height: #{$spinner-height};
-    --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
-    --#{$prefix}spinner-border-width: #{$spinner-border-width};
-    --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
-    --#{$prefix}spinner-animation-name: spinner-border;
-    // scss-docs-end spinner-border-css-vars
+.spinner-grow {
+  // scss-docs-start spinner-grow-css-vars
+  --#{$prefix}spinner-width: #{$spinner-width};
+  --#{$prefix}spinner-height: #{$spinner-height};
+  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
+  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
+  --#{$prefix}spinner-animation-name: spinner-grow;
+  // scss-docs-end spinner-grow-css-vars
 
-    border: var(--#{$prefix}spinner-border-width) solid currentcolor;
-    border-inline-end-color: transparent;
-  }
+  background-color: currentcolor;
+  opacity: 0;
+}
 
-  .spinner-border-sm {
-    // scss-docs-start spinner-border-sm-css-vars
-    --#{$prefix}spinner-width: #{$spinner-width-sm};
-    --#{$prefix}spinner-height: #{$spinner-height-sm};
-    --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
-    // scss-docs-end spinner-border-sm-css-vars
-  }
+.spinner-grow-sm {
+  --#{$prefix}spinner-width: #{$spinner-width-sm};
+  --#{$prefix}spinner-height: #{$spinner-height-sm};
+}
 
-  //
-  // Growing circle
-  //
-
-  // scss-docs-start spinner-grow-keyframes
-  @keyframes spinner-grow {
-    0% {
-      transform: scale(0);
-    }
-    50% {
-      opacity: 1;
-      transform: none;
-    }
-  }
-  // scss-docs-end spinner-grow-keyframes
-
-  .spinner-grow {
-    // scss-docs-start spinner-grow-css-vars
-    --#{$prefix}spinner-width: #{$spinner-width};
-    --#{$prefix}spinner-height: #{$spinner-height};
-    --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
-    --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
-    --#{$prefix}spinner-animation-name: spinner-grow;
-    // scss-docs-end spinner-grow-css-vars
-
-    background-color: currentcolor;
-    opacity: 0;
-  }
-
-  .spinner-grow-sm {
-    --#{$prefix}spinner-width: #{$spinner-width-sm};
-    --#{$prefix}spinner-height: #{$spinner-height-sm};
-  }
-
-  @if $enable-reduced-motion {
-    @media (prefers-reduced-motion: reduce) {
-      .spinner-border,
-      .spinner-grow {
-        --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
-      }
+@if $enable-reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    .spinner-border,
+    .spinner-grow {
+      --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
     }
   }
 }

scss/_theme.scss

@@ -15,35 +15,6 @@
   @return $result;
 }
 
-// Generate opacity values using color-mix()
-@function theme-opacity-values($color-var, $opacities: $util-opacity) {
-  $result: ();
-
-  @each $key, $value in $opacities {
-    @if $key == 100 {
-      // For 100%, use direct variable reference (more efficient)
-      $result: map.merge($result, ($key: var($color-var)));
-    } @else {
-      // For other values, use color-mix()
-      $percentage: $key * 1%;
-      $result: map.merge($result, ($key: color-mix(in oklch, var($color-var) $percentage, transparent)));
-    }
-  }
-
-  @return $result;
-}
-
-// Generate theme classes dynamically based on the keys in each theme color map
-@mixin generate-theme-classes() {
-  @each $color-name, $color-map in $new-theme-colors {
-    .theme-#{$color-name} {
-      @each $key, $value in $color-map {
-        --#{$prefix}theme-#{$key}: var(--#{$prefix}#{$color-name}-#{$key});
-      }
-    }
-  }
-}
-
 // Recursive mixin to handle nested maps
 @mixin create-css-vars($map, $parent-key: "") {
   @each $key, $value in $map {
@@ -61,104 +32,90 @@
 $new-theme-colors: (
   "primary": (
     "base": var(--#{$prefix}blue-500),
-    "text": light-dark(var(--#{$prefix}blue-600), var(--#{$prefix}blue-400)),
-    "text-emphasis": light-dark(var(--#{$prefix}blue-800), var(--#{$prefix}blue-200)),
-    "bg": var(--#{$prefix}blue-500),
+    "text": light-dark(var(--#{$prefix}blue-600), var(--#{$prefix}blue-300)),
+    "bg": light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-500)),
     "bg-subtle": light-dark(var(--#{$prefix}blue-100), var(--#{$prefix}blue-900)),
     "bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}blue-200), var(--#{$prefix}blue-300)), var(--#{$prefix}blue-700)),
     "border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-400)) 50%, var(--#{$prefix}bg-body)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}white)
   ),
   "accent": (
     "base": var(--#{$prefix}indigo-500),
-    "text": light-dark(var(--#{$prefix}indigo-600), color-mix(in oklch, var(--#{$prefix}indigo-400), var(--#{$prefix}indigo-300))),
-    "text-emphasis": light-dark(var(--#{$prefix}indigo-800), var(--#{$prefix}indigo-300)),
-    "bg": var(--#{$prefix}indigo-500),
+    "text": light-dark(var(--#{$prefix}indigo-600), var(--#{$prefix}indigo-300)),
+    "bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)),
     "bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)),
     "bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-300)), var(--#{$prefix}indigo-700)),
     "border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-400)) 50%, var(--#{$prefix}bg-body)),
-    "contrast": var(--#{$prefix}white)
-  ),
-  "success": (
-    "base": var(--#{$prefix}green-500),
-    "text": light-dark(var(--#{$prefix}green-600), var(--#{$prefix}green-400)),
-    "text-emphasis": light-dark(var(--#{$prefix}green-800), var(--#{$prefix}green-300)),
-    "bg": var(--#{$prefix}green-500),
-    "bg-subtle": light-dark(var(--#{$prefix}green-100), var(--#{$prefix}green-900)),
-    "bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)),
-    "border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-400)) 50%, var(--#{$prefix}bg-body)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}indigo-500) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}white)
   ),
   "danger": (
     "base": var(--#{$prefix}red-500),
-    "text": light-dark(var(--#{$prefix}red-600), var(--#{$prefix}red-400)),
-    "text-emphasis": light-dark(var(--#{$prefix}red-800), var(--#{$prefix}red-300)),
-    "bg": var(--#{$prefix}red-500),
+    "text": light-dark(var(--#{$prefix}red-600), var(--#{$prefix}red-300)),
+    "bg": light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-500)),
     "bg-subtle": light-dark(var(--#{$prefix}red-100), var(--#{$prefix}red-900)),
     "bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}red-200), var(--#{$prefix}red-300)), var(--#{$prefix}red-700)),
     "border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-400)) 50%, var(--#{$prefix}bg-body)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}white)
   ),
   "warning": (
     "base": var(--#{$prefix}yellow-500),
-    "text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-400)),
-    "text-emphasis": light-dark(var(--#{$prefix}yellow-800), var(--#{$prefix}yellow-300)),
-    "bg": var(--#{$prefix}yellow-500),
+    "text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-300)),
+    "bg": light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-500)),
     "bg-subtle": light-dark(var(--#{$prefix}yellow-100), var(--#{$prefix}yellow-900)),
     "bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-300)), var(--#{$prefix}yellow-700)),
     "border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-400)) 50%, var(--#{$prefix}bg-body)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}gray-900)
   ),
+  "success": (
+    "base": var(--#{$prefix}green-500),
+    "text": light-dark(var(--#{$prefix}green-600), var(--#{$prefix}green-300)),
+    "bg": light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-500)),
+    "bg-subtle": light-dark(var(--#{$prefix}green-100), var(--#{$prefix}green-900)),
+    "bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}green-200), var(--#{$prefix}green-300)), var(--#{$prefix}green-700)),
+    "border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}green-500) 50%, var(--#{$prefix}bg)),
+    "contrast": var(--#{$prefix}white)
+  ),
   "info": (
     "base": var(--#{$prefix}cyan-500),
-    "text": light-dark(var(--#{$prefix}cyan-600), var(--#{$prefix}cyan-400)),
-    "text-emphasis": light-dark(var(--#{$prefix}cyan-800), var(--#{$prefix}cyan-300)),
-    "bg": var(--#{$prefix}cyan-500),
+    "text": light-dark(var(--#{$prefix}cyan-600), var(--#{$prefix}cyan-300)),
+    "bg": light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-500)),
     "bg-subtle": light-dark(var(--#{$prefix}cyan-100), var(--#{$prefix}cyan-900)),
     "bg-muted": light-dark(var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-800)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-300)), var(--#{$prefix}cyan-700)),
     "border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-400)) 50%, var(--#{$prefix}bg-body)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}cyan-500) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}gray-900)
   ),
-  "inverse": (
-    "base": var(--#{$prefix}gray-900),
-    "text": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-200)),
-    "text-emphasis": light-dark(var(--#{$prefix}gray-975), var(--#{$prefix}white)),
-    "bg": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-025)),
-    "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)),
-    "bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)),
-    "border": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-100)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)) 50%, var(--#{$prefix}bg-body)),
-    "contrast": light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900))
-  ),
   "secondary": (
-    "base": var(--#{$prefix}gray-200),
+    "base": var(--#{$prefix}gray-300),
     "text": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
-    "text-emphasis": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
-    "bg": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-600)),
-    "bg-subtle": light-dark(var(--#{$prefix}gray-050), var(--#{$prefix}gray-800)),
-    "bg-muted": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-700)),
+    "bg": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
+    "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
+    "bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
+    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in oklch, var(--#{$prefix}gray-600), var(--#{$prefix}gray-700))),
     "border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-300)) 50%, var(--#{$prefix}bg-body)),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, var(--#{$prefix}bg)),
     "contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
   )
 ) !default;
 // scss-docs-end theme-colors
 
-// Generate theme modifier classes (e.g., .theme-primary, .theme-accent, etc.)
-@include generate-theme-classes();
-
 // mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
 $theme-bgs: (
-  "body": light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-975)),
-  "1": light-dark(var(--#{$prefix}gray-025), var(--#{$prefix}gray-950)),
-  "2": light-dark(var(--#{$prefix}gray-050), var(--#{$prefix}gray-900)),
-  "3": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
+  null: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900)),
+  "1": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-900), var(--#{$prefix}gray-800))),
+  "2": light-dark(color-mix(in srgb, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-700))),
+  "3": light-dark(color-mix(in srgb, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in srgb, var(--#{$prefix}gray-700), var(--#{$prefix}gray-600))),
   "white": var(--#{$prefix}white),
   "black": var(--#{$prefix}black),
   "transparent": transparent,
@@ -166,34 +123,31 @@ $theme-bgs: (
 ) !default;
 
 $theme-fgs: (
-  "body": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-050)),
+  null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
   "1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
   "2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
-  "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-500)),
+  "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
   "white": var(--#{$prefix}white),
   "black": var(--#{$prefix}black),
   "inherit": inherit,
 ) !default;
 
 $theme-borders: (
-  "bg": var(--#{$prefix}bg-body),
-  "body": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-800)),
+  null: light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-700)),
   "muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-800)),
-  "subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)),
+  "subtle": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900))),
   "emphasized": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-600)),
-  "white": var(--#{$prefix}white),
-  "black": var(--#{$prefix}black),
 ) !default;
 
-$util-opacity: (
-  10: .1,
-  20: .2,
-  30: .3,
-  40: .4,
-  50: .5,
-  60: .6,
-  70: .7,
-  80: .8,
-  90: .9,
-  100: 1
-) !default;
+// $util-opacity: (
+//   "10": .1,
+//   "20": .2,
+//   "30": .3,
+//   "40": .4,
+//   "50": .5,
+//   "60": .6,
+//   "70": .7,
+//   "80": .8,
+//   "90": .9,
+//   "100": 1
+// ) !default;

scss/_toasts.scss

@@ -3,96 +3,76 @@
 @use "mixins/border-radius" as *;
 @use "vendor/rfs" as *;
 
-// scss-docs-start toast-variables
-$toast-max-width:                   350px !default;
-$toast-padding-x:                   .75rem !default;
-$toast-padding-y:                   .5rem !default;
-$toast-font-size:                   .875rem !default;
-$toast-color:                       null !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:               var(--#{$prefix}border-radius) !default;
-$toast-box-shadow:                  var(--#{$prefix}box-shadow) !default;
-$toast-spacing:                     $container-padding-x !default;
+.toast {
+  // scss-docs-start toast-css-vars
+  --#{$prefix}toast-zindex: #{$zindex-toast};
+  --#{$prefix}toast-padding-x: #{$toast-padding-x};
+  --#{$prefix}toast-padding-y: #{$toast-padding-y};
+  --#{$prefix}toast-spacing: #{$toast-spacing};
+  --#{$prefix}toast-max-width: #{$toast-max-width};
+  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
+  --#{$prefix}toast-color: #{$toast-color};
+  --#{$prefix}toast-bg: #{$toast-background-color};
+  --#{$prefix}toast-border-width: #{$toast-border-width};
+  --#{$prefix}toast-border-color: #{$toast-border-color};
+  --#{$prefix}toast-border-radius: #{$toast-border-radius};
+  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
+  --#{$prefix}toast-header-color: #{$toast-header-color};
+  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
+  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
+  // scss-docs-end toast-css-vars
 
-$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
+  width: var(--#{$prefix}toast-max-width);
+  max-width: 100%;
+  @include font-size(var(--#{$prefix}toast-font-size));
+  color: var(--#{$prefix}toast-color);
+  pointer-events: auto;
+  background-color: var(--#{$prefix}toast-bg);
+  background-clip: padding-box;
+  border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
+  box-shadow: var(--#{$prefix}toast-box-shadow);
+  @include border-radius(var(--#{$prefix}toast-border-radius));
 
-@layer components {
-  .toast {
-    // scss-docs-start toast-css-vars
-    --#{$prefix}toast-zindex: #{$zindex-toast};
-    --#{$prefix}toast-padding-x: #{$toast-padding-x};
-    --#{$prefix}toast-padding-y: #{$toast-padding-y};
-    --#{$prefix}toast-spacing: #{$toast-spacing};
-    --#{$prefix}toast-max-width: #{$toast-max-width};
-    @include rfs($toast-font-size, --#{$prefix}toast-font-size);
-    --#{$prefix}toast-color: #{$toast-color};
-    --#{$prefix}toast-bg: #{$toast-background-color};
-    --#{$prefix}toast-border-width: #{$toast-border-width};
-    --#{$prefix}toast-border-color: #{$toast-border-color};
-    --#{$prefix}toast-border-radius: #{$toast-border-radius};
-    --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
-    --#{$prefix}toast-header-color: #{$toast-header-color};
-    --#{$prefix}toast-header-bg: #{$toast-header-background-color};
-    --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
-    // scss-docs-end toast-css-vars
-
-    width: var(--#{$prefix}toast-max-width);
-    max-width: 100%;
-    @include font-size(var(--#{$prefix}toast-font-size));
-    color: var(--#{$prefix}toast-color);
-    pointer-events: auto;
-    background-color: var(--#{$prefix}toast-bg);
-    background-clip: padding-box;
-    border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
-    box-shadow: var(--#{$prefix}toast-box-shadow);
-    @include border-radius(var(--#{$prefix}toast-border-radius));
-
-    &.showing {
-      opacity: 0;
-    }
-
-    &:not(.show) {
-      display: none;
-    }
+  &.showing {
+    opacity: 0;
   }
 
-  .toast-container {
-    --#{$prefix}toast-zindex: #{$zindex-toast};
-
-    position: absolute;
-    z-index: var(--#{$prefix}toast-zindex);
-    width: max-content;
-    max-width: 100%;
-    pointer-events: none;
-
-    > :not(:last-child) {
-      margin-bottom: var(--#{$prefix}toast-spacing);
-    }
-  }
-
-  .toast-header {
-    display: flex;
-    align-items: center;
-    padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
-    color: var(--#{$prefix}toast-header-color);
-    background-color: var(--#{$prefix}toast-header-bg);
-    background-clip: padding-box;
-    border-block-end: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
-    @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
-
-    .btn-close {
-      margin-inline-start: var(--#{$prefix}toast-padding-x);
-      margin-inline-end: calc(-.5 * var(--#{$prefix}toast-padding-x));
-    }
-  }
-
-  .toast-body {
-    padding: var(--#{$prefix}toast-padding-x);
-    word-wrap: break-word;
+  &:not(.show) {
+    display: none;
   }
 }
+
+.toast-container {
+  --#{$prefix}toast-zindex: #{$zindex-toast};
+
+  position: absolute;
+  z-index: var(--#{$prefix}toast-zindex);
+  width: max-content;
+  max-width: 100%;
+  pointer-events: none;
+
+  > :not(:last-child) {
+    margin-bottom: var(--#{$prefix}toast-spacing);
+  }
+}
+
+.toast-header {
+  display: flex;
+  align-items: center;
+  padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
+  color: var(--#{$prefix}toast-header-color);
+  background-color: var(--#{$prefix}toast-header-bg);
+  background-clip: padding-box;
+  border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
+  @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
+
+  .btn-close {
+    margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x));
+    margin-left: var(--#{$prefix}toast-padding-x);
+  }
+}
+
+.toast-body {
+  padding: var(--#{$prefix}toast-padding-x);
+  word-wrap: break-word;
+}

scss/_tooltip.scss

@@ -5,143 +5,122 @@
 @use "vendor/rfs" as *;
 @use "mixins/reset-text" as *;
 
-// scss-docs-start tooltip-variables
-$tooltip-font-size:                 $font-size-sm !default;
-$tooltip-max-width:                 200px !default;
-$tooltip-color:                     var(--#{$prefix}bg-body) !default;
-$tooltip-bg:                        var(--#{$prefix}color-body) !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;
-$tooltip-margin:                    null !default; // TODO: remove this in v6
+// Base class
+.tooltip {
+  // scss-docs-start tooltip-css-vars
+  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
+  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
+  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
+  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
+  --#{$prefix}tooltip-margin: #{$tooltip-margin};
+  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
+  --#{$prefix}tooltip-color: #{$tooltip-color};
+  --#{$prefix}tooltip-bg: #{$tooltip-bg};
+  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
+  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
+  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
+  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
+  // scss-docs-end tooltip-css-vars
 
-$tooltip-arrow-width:               .8rem !default;
-$tooltip-arrow-height:              .4rem !default;
-// scss-docs-end tooltip-variables
+  z-index: var(--#{$prefix}tooltip-zindex);
+  display: block;
+  margin: var(--#{$prefix}tooltip-margin);
+  @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  @include reset-text();
+  @include font-size(var(--#{$prefix}tooltip-font-size));
+  // Allow breaking very long words so they don't overflow the tooltip's bounds
+  word-wrap: break-word;
+  opacity: 0;
 
-// Form tooltips must come after regular tooltips
-// scss-docs-start tooltip-feedback-variables
-$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
-$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
-$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
-$form-feedback-tooltip-line-height:   null !default;
-$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
-$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
-// scss-docs-end tooltip-feedback-variables
+  &.show { opacity: var(--#{$prefix}tooltip-opacity); }
 
-
-@layer components {
-  .tooltip {
-    // scss-docs-start tooltip-css-vars
-    --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
-    --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
-    --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
-    --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
-    --#{$prefix}tooltip-margin: #{$tooltip-margin};
-    @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
-    --#{$prefix}tooltip-color: #{$tooltip-color};
-    --#{$prefix}tooltip-bg: #{$tooltip-bg};
-    --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
-    --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
-    --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
-    --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
-    // scss-docs-end tooltip-css-vars
-
-    z-index: var(--#{$prefix}tooltip-zindex);
+  .tooltip-arrow {
     display: block;
-    margin: var(--#{$prefix}tooltip-margin);
-    @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
-    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-    // So reset our font and text properties to avoid inheriting weird values.
-    @include reset-text();
-    @include font-size(var(--#{$prefix}tooltip-font-size));
-    // Allow breaking very long words so they don't overflow the tooltip's bounds
-    word-wrap: break-word;
-    opacity: 0;
-
-    &.show { opacity: var(--#{$prefix}tooltip-opacity); }
-
-    .tooltip-arrow {
-      display: block;
-      width: var(--#{$prefix}tooltip-arrow-width);
-      height: var(--#{$prefix}tooltip-arrow-height);
-
-      &::before {
-        position: absolute;
-        content: "";
-        border-color: transparent;
-        border-style: solid;
-      }
-    }
-  }
-
-  .bs-tooltip-top .tooltip-arrow {
-    bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
+    width: var(--#{$prefix}tooltip-arrow-width);
+    height: var(--#{$prefix}tooltip-arrow-height);
 
     &::before {
-      top: -1px;
-      border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
-      border-block-start-color: var(--#{$prefix}tooltip-bg);
+      position: absolute;
+      content: "";
+      border-color: transparent;
+      border-style: solid;
     }
   }
-
-  .bs-tooltip-end .tooltip-arrow {
-    left: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
-    width: var(--#{$prefix}tooltip-arrow-height);
-    height: var(--#{$prefix}tooltip-arrow-width);
-
-    &::before {
-      right: -1px;
-      border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
-      border-inline-end-color: var(--#{$prefix}tooltip-bg);
-    }
-  }
-
-  .bs-tooltip-bottom .tooltip-arrow {
-    top: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
-
-    &::before {
-      bottom: -1px;
-      border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
-      border-block-end-color: var(--#{$prefix}tooltip-bg);
-    }
-  }
-
-  .bs-tooltip-start .tooltip-arrow {
-    right: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
-    width: var(--#{$prefix}tooltip-arrow-height);
-    height: var(--#{$prefix}tooltip-arrow-width);
-
-    &::before {
-      left: -1px;
-      border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
-      border-inline-start-color: var(--#{$prefix}tooltip-bg);
-    }
-  }
-
-  .bs-tooltip-auto {
-    &[data-popper-placement^="top"] {
-      @extend .bs-tooltip-top;
-    }
-    &[data-popper-placement^="right"] {
-      @extend .bs-tooltip-end;
-    }
-    &[data-popper-placement^="bottom"] {
-      @extend .bs-tooltip-bottom;
-    }
-    &[data-popper-placement^="left"] {
-      @extend .bs-tooltip-start;
-    }
-  }
-
-  // Wrapper for the tooltip content
-  .tooltip-inner {
-    max-width: var(--#{$prefix}tooltip-max-width);
-    padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
-    color: var(--#{$prefix}tooltip-color);
-    text-align: center;
-    background-color: var(--#{$prefix}tooltip-bg);
-    @include border-radius(var(--#{$prefix}tooltip-border-radius));
-  }
+}
+
+.bs-tooltip-top .tooltip-arrow {
+  bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
+
+  &::before {
+    top: -1px;
+    border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
+    border-top-color: var(--#{$prefix}tooltip-bg);
+  }
+}
+
+/* rtl:begin:ignore */
+.bs-tooltip-end .tooltip-arrow {
+  left: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
+  width: var(--#{$prefix}tooltip-arrow-height);
+  height: var(--#{$prefix}tooltip-arrow-width);
+
+  &::before {
+    right: -1px;
+    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
+    border-right-color: var(--#{$prefix}tooltip-bg);
+  }
+}
+
+/* rtl:end:ignore */
+
+.bs-tooltip-bottom .tooltip-arrow {
+  top: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
+
+  &::before {
+    bottom: -1px;
+    border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
+    border-bottom-color: var(--#{$prefix}tooltip-bg);
+  }
+}
+
+/* rtl:begin:ignore */
+.bs-tooltip-start .tooltip-arrow {
+  right: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
+  width: var(--#{$prefix}tooltip-arrow-height);
+  height: var(--#{$prefix}tooltip-arrow-width);
+
+  &::before {
+    left: -1px;
+    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
+    border-left-color: var(--#{$prefix}tooltip-bg);
+  }
+}
+
+/* rtl:end:ignore */
+
+.bs-tooltip-auto {
+  &[data-popper-placement^="top"] {
+    @extend .bs-tooltip-top;
+  }
+  &[data-popper-placement^="right"] {
+    @extend .bs-tooltip-end;
+  }
+  &[data-popper-placement^="bottom"] {
+    @extend .bs-tooltip-bottom;
+  }
+  &[data-popper-placement^="left"] {
+    @extend .bs-tooltip-start;
+  }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+  max-width: var(--#{$prefix}tooltip-max-width);
+  padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
+  color: var(--#{$prefix}tooltip-color);
+  text-align: center;
+  background-color: var(--#{$prefix}tooltip-bg);
+  @include border-radius(var(--#{$prefix}tooltip-border-radius));
 }

scss/_utilities.scss

@@ -5,12 +5,6 @@
 @use "functions" as *;
 @use "theme" as *;
 
-// add:
-// - double check css grid helpers
-//
-// update:
-// - focus-ring if needed
-
 $utilities: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $utilities: map.merge(
@@ -91,9 +85,10 @@ $utilities: map.merge(
     // scss-docs-start utils-display
     "display": (
       responsive: true,
+      print: true,
       property: display,
       class: d,
-      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex contents flow-root none
+      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex flow-root none
     ),
     // scss-docs-end utils-display
     // scss-docs-start utils-shadow
@@ -203,52 +198,42 @@ $utilities: map.merge(
         0: 0,
       )
     ),
-    // scss-docs-end utils-borders
-    // scss-docs-start utils-border-color
     "border-color": (
-      property: (
-        "--#{$prefix}border-color": null,
-        "border-color": var(--#{$prefix}border-color)
-      ),
+      property: border-color,
       class: border,
-      values: map.merge(theme-color-values("bg"), $theme-borders),
-    ),
-    "border-color-subtle": (
-      property: (
-        "--#{$prefix}border-color": null,
-        "border-color": var(--#{$prefix}border-color)
-      ),
-      class: border-subtle,
-      values: theme-color-values("border"),
+      values: theme-color-values("border")
     ),
     "border-width": (
       property: border-width,
       class: border,
       values: $border-widths
     ),
-    "border-opacity": (
-      class: border,
-      property: border-color,
-      values: theme-opacity-values(--#{$prefix}border-color)
-    ),
-    // scss-docs-end utils-border-color
+    // "border-opacity": (
+    //   css-var: true,
+    //   class: border-opacity,
+    //   values: (
+    //     10: .1,
+    //     25: .25,
+    //     50: .5,
+    //     75: .75,
+    //     100: 1
+    //   )
+    // ),
+    // scss-docs-end utils-borders
     // Sizing utilities
-    // scss-docs-start utils-width
+    // scss-docs-start utils-sizing
     "width": (
       property: width,
       class: w,
-      values: map.merge(
-        $sizes,
-        (
-          25: 25%,
-          50: 50%,
-          75: 75%,
-          100: 100%,
-          auto: auto,
-          min: min-content,
-          max: max-content,
-          fit: fit-content,
-        )
+      values: (
+        25: 25%,
+        50: 50%,
+        75: 75%,
+        100: 100%,
+        auto: auto,
+        min: min-content,
+        max: max-content,
+        fit: fit-content,
       )
     ),
     "max-width": (
@@ -274,8 +259,6 @@ $utilities: map.merge(
       class: min-vw,
       values: (100: 100vw)
     ),
-    // scss-docs-end utils-width
-    // scss-docs-start utils-height
     "height": (
       property: height,
       class: h,
@@ -313,7 +296,7 @@ $utilities: map.merge(
       class: min-vh,
       values: (100: 100vh)
     ),
-    // scss-docs-end utils-height
+    // scss-docs-end utils-sizing
     // Flex utilities
     // scss-docs-start utils-flex
     "flex": (
@@ -363,16 +346,6 @@ $utilities: map.merge(
         evenly: space-evenly,
       )
     ),
-    "justify-items": (
-      responsive: true,
-      property: justify-items,
-      values: (
-        start: start,
-        end: end,
-        center: center,
-        stretch: stretch,
-      )
-    ),
     "justify-self": (
       responsive: true,
       property: justify-self,
@@ -417,40 +390,6 @@ $utilities: map.merge(
         stretch: stretch,
       )
     ),
-    "place-items": (
-      responsive: true,
-      property: place-items,
-      values: (
-        start: start,
-        end: end,
-        center: center,
-        stretch: stretch,
-      )
-    ),
-    "grid-column-counts": (
-      responsive: true,
-      property: --#{$prefix}columns,
-      class: grid-cols,
-      values: (
-        3,
-        4,
-        6
-      )
-    ),
-    "grid-columns": (
-      responsive: true,
-      property: grid-column,
-      class: grid-cols,
-      values: (
-        fill: #{"1 / -1"},
-      )
-    ),
-    "grid-auto-flow": (
-      responsive: true,
-      property: grid-auto-flow,
-      class: grid-auto-flow,
-      values: row column dense
-    ),
     "order": (
       responsive: true,
       property: order,
@@ -476,37 +415,37 @@ $utilities: map.merge(
     ),
     "margin-x": (
       responsive: true,
-      property: margin-inline,
+      property: margin-right margin-left,
       class: mx,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-y": (
       responsive: true,
-      property: margin-block,
+      property: margin-top margin-bottom,
       class: my,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-top": (
       responsive: true,
-      property: margin-block-start,
+      property: margin-top,
       class: mt,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-end": (
       responsive: true,
-      property: margin-inline-end,
+      property: margin-right,
       class: me,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-bottom": (
       responsive: true,
-      property: margin-block-end,
+      property: margin-bottom,
       class: mb,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-start": (
       responsive: true,
-      property: margin-inline-start,
+      property: margin-left,
       class: ms,
       values: map.merge($spacers, (auto: auto))
     ),
@@ -519,37 +458,37 @@ $utilities: map.merge(
     // ),
     // "negative-margin-x": (
     //   responsive: true,
-    //   property: margin-inline,
+    //   property: margin-right margin-left,
     //   class: mx,
     //   values: $negative-spacers
     // ),
     // "negative-margin-y": (
     //   responsive: true,
-    //   property: margin-block,
+    //   property: margin-top margin-bottom,
     //   class: my,
     //   values: $negative-spacers
     // ),
     // "negative-margin-top": (
     //   responsive: true,
-    //   property: margin-block-start,
+    //   property: margin-top,
     //   class: mt,
     //   values: $negative-spacers
     // ),
     // "negative-margin-end": (
     //   responsive: true,
-    //   property: margin-inline-end,
+    //   property: margin-right,
     //   class: me,
     //   values: $negative-spacers
     // ),
     // "negative-margin-bottom": (
     //   responsive: true,
-    //   property: margin-block-end,
+    //   property: margin-bottom,
     //   class: mb,
     //   values: $negative-spacers
     // ),
     // "negative-margin-start": (
     //   responsive: true,
-    //   property: margin-inline-start,
+    //   property: margin-left,
     //   class: ms,
     //   values: $negative-spacers
     // ),
@@ -562,37 +501,37 @@ $utilities: map.merge(
     ),
     "padding-x": (
       responsive: true,
-      property: padding-inline,
+      property: padding-right padding-left,
       class: px,
       values: $spacers
     ),
     "padding-y": (
       responsive: true,
-      property: padding-block,
+      property: padding-top padding-bottom,
       class: py,
       values: $spacers
     ),
     "padding-top": (
       responsive: true,
-      property: padding-block-start,
+      property: padding-top,
       class: pt,
       values: $spacers
     ),
     "padding-end": (
       responsive: true,
-      property: padding-inline-end,
+      property: padding-right,
       class: pe,
       values: $spacers
     ),
     "padding-bottom": (
       responsive: true,
-      property: padding-block-end,
+      property: padding-bottom,
       class: pb,
       values: $spacers
     ),
     "padding-start": (
       responsive: true,
-      property: padding-inline-start,
+      property: padding-left,
       class: ps,
       values: $spacers
     ),
@@ -617,31 +556,18 @@ $utilities: map.merge(
     ),
     // scss-docs-end utils-spacing
     // Text
-    // scss-docs-start utils-font-family
+    // scss-docs-start utils-text
     "font-family": (
       property: font-family,
       class: font,
-      values: (
-        "monospace": var(--#{$prefix}font-monospace),
-        "body": var(--#{$prefix}font-sans-serif),
-      )
+      values: (monospace: var(--#{$prefix}font-monospace))
     ),
-    // scss-docs-end utils-font-family
-    // scss-docs-start utils-font-size
     "font-size": (
+      rfs: true,
       property: font-size,
       class: fs,
-      values: map-get-nested($font-sizes, "font-size")
-    ),
-    "text-size": (
-      property: (
-        "font-size": 1rem,
-        "line-height": 1.5
-      ),
-      class: text,
       values: $font-sizes
     ),
-    // scss-docs-end utils-font-size
     "font-style": (
       property: font-style,
       class: fst,
@@ -684,85 +610,77 @@ $utilities: map.merge(
       property: text-decoration,
       values: none underline line-through
     ),
-    // scss-docs-start utils-text-transform
     "text-transform": (
       property: text-transform,
       class: text,
       values: lowercase uppercase capitalize
     ),
-    // scss-docs-end utils-text-transform
-    // "white-space": (
-    //   property: white-space,
-    //   class: text,
-    //   values: (
-    //     wrap: normal,
-    //     nowrap: nowrap,
-    //   )
-    // ),
-    "text-wrap": (
+    "white-space": (
       property: white-space,
       class: text,
-      values: wrap nowrap balance pretty,
+      values: (
+        wrap: normal,
+        nowrap: nowrap,
+      )
     ),
-    // scss-docs-start utils-text-break
     "word-wrap": (
       property: word-wrap word-break,
       class: text,
       values: (break: break-word),
       rtl: false
     ),
-    // scss-docs-end utils-text-break
     // scss-docs-end utils-text
     // scss-docs-start utils-color
-    // "color-attr": (
-    //   selector: "attr-includes",
-    //   class: "fg-",
-    //   property: color,
-    //   values: var(--#{$prefix}fg),
-    // ),
-    "fg": (
-      property: (
-        "--#{$prefix}fg": null,
-        "color": var(--#{$prefix}fg)
-      ),
-      class: fg,
+    "color-attr": (
+      selector: "attr-includes",
+      class: "color-",
+      property: color,
+      values: var(--#{$prefix}color),
+    ),
+    "color": (
+      property: --#{$prefix}color,
+      class: color,
       values: map.merge(theme-color-values("text"), $theme-fgs),
     ),
-    "fg-emphasis": (
-      property: (
-        "--#{$prefix}fg": null,
-        "color": var(--#{$prefix}fg)
-      ),
-      class: fg-emphasis,
-      values: theme-color-values("text-emphasis"),
-    ),
-    "fg-opacity": (
-      class: fg,
+    "color-opacity": (
+      class: color,
       property: color,
-      values: theme-opacity-values(--#{$prefix}fg)
+      values: (
+        10: color-mix(in oklch, var(--#{$prefix}color) 10%, transparent),
+        20: color-mix(in oklch, var(--#{$prefix}color) 20%, transparent),
+        30: color-mix(in oklch, var(--#{$prefix}color) 30%, transparent),
+        40: color-mix(in oklch, var(--#{$prefix}color) 40%, transparent),
+        50: color-mix(in oklch, var(--#{$prefix}color) 50%, transparent),
+        60: color-mix(in oklch, var(--#{$prefix}color) 60%, transparent),
+        70: color-mix(in oklch, var(--#{$prefix}color) 70%, transparent),
+        80: color-mix(in oklch, var(--#{$prefix}color) 80%, transparent),
+        90: color-mix(in oklch, var(--#{$prefix}color) 90%, transparent),
+        100: var(--#{$prefix}color),
+      )
     ),
-    "fg-contrast": (
-      property: (
-        "--#{$prefix}fg": null,
-        "color": var(--#{$prefix}fg)
-      ),
-      class: fg-contrast,
+    "contrast-color": (
+      property: --#{$prefix}color,
+      class: color-on,
       values: theme-color-values("contrast"),
     ),
     // scss-docs-end utils-color
     // scss-docs-start utils-links
     "link-opacity": (
-      property: color,
+      property: --#{$prefix}link-opacity,
       // css-var: true,
-      class: link,
+      class: link-opacity,
       state: hover,
-      values: theme-opacity-values(--#{$prefix}link-color)
+      values: (
+        10: .1,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1
+      )
     ),
-    // scss-docs-end utils-links
-    // scss-docs-start utils-underline
-    "underline-offset": (
+    "link-offset": (
       property: text-underline-offset,
-      class: underline-offset,
+      class: link-offset,
       state: hover,
       values: (
         1: .125em,
@@ -770,59 +688,71 @@ $utilities: map.merge(
         3: .375em,
       )
     ),
-    "underline-color": (
+    "link-underline": (
       property: text-decoration-color,
-      class: underline,
-      values: theme-color-values("text"),
+      class: link-underline,
+      local-vars: (
+        "link-underline-opacity": 1
+      ),
+      // values: map.merge(
+      //   $utilities-links-underline,
+      //   (
+      //     // null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
+      //   )
+      // )
     ),
-    "underline-opacity": (
-      property: text-decoration-color,
-      class: underline,
-      state: hover,
-      values: theme-opacity-values(--#{$prefix}link-color)
-    ),
-    "underline-thickness": (
-      property: text-decoration-thickness,
-      class: underline-thickness,
+    "link-underline-opacity": (
+      // css-var: true,
+      property: --#{$prefix}link-underline-opacity,
+      class: link-underline-opacity,
       state: hover,
       values: (
-        1: 1px,
-        2: 2px,
-        3: 3px,
-        4: 4px,
-        5: 5px,
-      )
-    ),
-    // scss-docs-end utils-underline
-    // scss-docs-start utils-bg-color
-    "bg-color": (
-      property: (
-        "--#{$prefix}bg": null,
-        "background-color": var(--#{$prefix}bg)
+        0: 0,
+        10: .1,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1
       ),
+    ),
+    // scss-docs-end utils-links
+    // scss-docs-start utils-bg-color
+    "bg-attr": (
+      selector: "attr-includes",
+      class: "bg-",
+      property: background-color,
+      values: var(--#{$prefix}bg),
+    ),
+    "bg-color": (
+      property: --#{$prefix}bg,
       class: bg,
       values: map.merge(theme-color-values("bg"), $theme-bgs),
     ),
     "bg-color-subtle": (
-      property: (
-        "--#{$prefix}bg": null,
-        "background-color": var(--#{$prefix}bg)
-      ),
+      property: --#{$prefix}bg,
       class: bg-subtle,
       values: theme-color-values("bg-subtle"),
     ),
     "bg-color-muted": (
-      property: (
-        "--#{$prefix}bg": null,
-        "background-color": var(--#{$prefix}bg)
-      ),
+      property: --#{$prefix}bg,
       class: bg-muted,
       values: theme-color-values("bg-muted"),
     ),
     "bg-opacity": (
       class: bg,
       property: background-color,
-      values: theme-opacity-values(--#{$prefix}bg)
+      values: (
+        10: color-mix(in oklch, var(--#{$prefix}bg) 10%, transparent),
+        20: color-mix(in oklch, var(--#{$prefix}bg) 20%, transparent),
+        30: color-mix(in oklch, var(--#{$prefix}bg) 30%, transparent),
+        40: color-mix(in oklch, var(--#{$prefix}bg) 40%, transparent),
+        50: color-mix(in oklch, var(--#{$prefix}bg) 50%, transparent),
+        60: color-mix(in oklch, var(--#{$prefix}bg) 60%, transparent),
+        70: color-mix(in oklch, var(--#{$prefix}bg) 70%, transparent),
+        80: color-mix(in oklch, var(--#{$prefix}bg) 80%, transparent),
+        90: color-mix(in oklch, var(--#{$prefix}bg) 90%, transparent),
+        100: var(--#{$prefix}bg),
+      )
     ),
     // scss-docs-end utils-bg-color
     "gradient": (
@@ -858,7 +788,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-top": (
-      property: border-start-start-radius border-start-end-radius,
+      property: border-top-left-radius border-top-right-radius,
       class: rounded-top,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -873,7 +803,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-end": (
-      property: border-end-end-radius border-end-start-radius,
+      property: border-top-right-radius border-bottom-right-radius,
       class: rounded-end,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -888,7 +818,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-bottom": (
-      property: border-end-end-radius border-end-start-radius,
+      property: border-bottom-right-radius border-bottom-left-radius,
       class: rounded-bottom,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -903,7 +833,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-start": (
-      property: border-start-start-radius border-start-end-radius,
+      property: border-bottom-left-radius border-top-left-radius,
       class: rounded-start,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -933,7 +863,7 @@ $utilities: map.merge(
       property: z-index,
       class: z,
       values: $zindex-levels,
-    ),
+    )
     // scss-docs-end utils-zindex
   ),
   $utilities

scss/_variables-dark.scss

@@ -0,0 +1,104 @@
+// 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
+// scss-docs-start theme-text-dark-variables
+// $primary-text-emphasis-dark:        tint-color($primary, 40%) !default;
+// $secondary-text-emphasis-dark:      tint-color($secondary, 40%) !default;
+// $success-text-emphasis-dark:        tint-color($success, 40%) !default;
+// $info-text-emphasis-dark:           tint-color($info, 40%) !default;
+// $warning-text-emphasis-dark:        tint-color($warning, 40%) !default;
+// $danger-text-emphasis-dark:         tint-color($danger, 40%) !default;
+// $light-text-emphasis-dark:          $gray-100 !default;
+// $dark-text-emphasis-dark:           $gray-300 !default;
+// scss-docs-end theme-text-dark-variables
+
+// scss-docs-start theme-bg-subtle-dark-variables
+// $primary-bg-subtle-dark:            shade-color($primary, 80%) !default;
+// $secondary-bg-subtle-dark:          shade-color($secondary, 80%) !default;
+// $success-bg-subtle-dark:            shade-color($success, 80%) !default;
+// $info-bg-subtle-dark:               shade-color($info, 80%) !default;
+// $warning-bg-subtle-dark:            shade-color($warning, 80%) !default;
+// $danger-bg-subtle-dark:             shade-color($danger, 80%) !default;
+// $light-bg-subtle-dark:              $gray-800 !default;
+// $dark-bg-subtle-dark:               color.mix($gray-800, $black) !default;
+// scss-docs-end theme-bg-subtle-dark-variables
+
+// scss-docs-start theme-border-subtle-dark-variables
+// $primary-border-subtle-dark:        shade-color($primary, 40%) !default;
+// $secondary-border-subtle-dark:      shade-color($secondary, 40%) !default;
+// $success-border-subtle-dark:        shade-color($success, 40%) !default;
+// $info-border-subtle-dark:           shade-color($info, 40%) !default;
+// $warning-border-subtle-dark:        shade-color($warning, 40%) !default;
+// $danger-border-subtle-dark:         shade-color($danger, 40%) !default;
+// $light-border-subtle-dark:          $gray-700 !default;
+// $dark-border-subtle-dark:           $gray-800 !default;
+// scss-docs-end theme-border-subtle-dark-variables
+
+// $body-color-dark:                   $gray-300 !default;
+// $body-bg-dark:                      $gray-900 !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:             color.mix($gray-800, $gray-900, 50%) !default;
+// $body-emphasis-color-dark:          $white !default;
+// $border-color-dark:                 $gray-700 !default;
+// $border-color-translucent-dark:     rgba($white, .15) !default;
+// $headings-color-dark:               inherit !default;
+// $link-color-dark:                   tint-color($primary, 40%) !default;
+// $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
+// $code-color-dark:                   tint-color($code-color, 40%) !default;
+// $mark-color-dark:                   $body-color-dark !default;
+// $mark-bg-dark:                      $yellow-800 !default;
+
+
+// //
+// // 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;
+
+// // scss-docs-start form-validation-colors-dark
+// $form-valid-color-dark:             $green-300 !default;
+// $form-valid-border-color-dark:      $green-300 !default;
+// $form-invalid-color-dark:           $red-300 !default;
+// $form-invalid-border-color-dark:    $red-300 !default;
+// // scss-docs-end form-validation-colors-dark
+
+
+// //
+// // Accordion
+// //
+
+// $accordion-icon-color-dark:         $primary-text-emphasis-dark !default;
+// $accordion-icon-active-color-dark:  $primary-text-emphasis-dark !default;
+
+// $accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
+// $accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
+// // scss-docs-end sass-dark-mode-vars
+
+
+// //
+// // Carousel
+// //
+
+// // scss-docs-start carousel-dark-variables
+// $carousel-indicator-active-bg-dark:   $black !default;
+// $carousel-caption-color-dark:         $black !default;
+// $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
+// // scss-docs-end carousel-dark-variables
+
+// //
+// // Close button
+// //
+
+// $btn-close-filter-dark: invert(1) grayscale(100%) brightness(200%) !default;

scss/bootstrap-grid.scss

@@ -27,11 +27,9 @@ $utilities: map-get-multiple(
     "flex-shrink",
     "flex-wrap",
     "justify-content",
-    "justify-items",
     "align-items",
     "align-content",
     "align-self",
-    "place-items",
     "margin",
     "margin-x",
     "margin-y",

scss/bootstrap-utilities.scss

@@ -6,11 +6,11 @@
 // @forward "variables";
 
 // Layout & components
-@forward "root";
+@use "root" as *;
 
 // Helpers
 @forward "helpers";
 
 // Utilities
-@forward "utilities";
-@forward "utilities/api";
+@use "utilities" as *;
+@use "utilities/api";

scss/bootstrap.scss

@@ -1,40 +1,46 @@
-@forward "banner";
+@use "banner";
 
 // scss-docs-start import-stack
 // Global CSS variables, layer definitions, and configuration
-@forward "root";
+@use "root";
 
-// Subdir imports
-@forward "content";
-@forward "layout";
-@forward "forms";
-@forward "buttons";
+// Reboot & Content
+@use "content";
+
+// Layout
+@use "layout";
+
+// Forms
+@use "forms";
 
 // Components
-@forward "accordion";
-@forward "alert";
-@forward "badge";
-@forward "breadcrumb";
-@forward "card";
-@forward "carousel";
-@forward "dropdown";
-@forward "list-group";
-@forward "modal";
-@forward "nav";
-@forward "navbar";
-@forward "offcanvas";
-@forward "pagination";
-@forward "placeholders";
-@forward "popover";
-@forward "progress";
-@forward "spinners";
-@forward "toasts";
-@forward "tooltip";
-@forward "transitions";
+@use "accordion";
+@use "alert";
+@use "badge";
+@use "breadcrumb";
+@use "buttons";
+@use "button-group";
+@use "card";
+@use "carousel";
+@use "close";
+@use "dropdown";
+@use "list-group";
+@use "modal";
+@use "nav";
+@use "navbar";
+@use "offcanvas";
+@use "pagination";
+@use "placeholders";
+@use "popover";
+@use "progress";
+@use "spinners";
+@use "toasts";
+@use "tooltip";
+@use "transitions";
 
 // Helpers
-@forward "helpers";
+@use "helpers";
 
 // Utilities
-@forward "utilities/api";
+@use "utilities/api";
 // scss-docs-end import-stack

scss/buttons/_button-group.scss

@@ -1,152 +0,0 @@
-@use "../config" as *;
-@use "../variables" as *;
-@use "../mixins/border-radius" as *;
-@use "../mixins/box-shadow" as *;
-@use "button-variables" as *;
-
-@layer components {
-  // Make the div behave like a button
-  .btn-group,
-  .btn-group-vertical {
-    position: relative;
-    display: inline-flex;
-    vertical-align: middle; // match .btn alignment given font-size hack above
-
-    > .btn {
-      position: relative;
-      flex: 1 1 auto;
-    }
-
-    // Bring the hover, focused, and "active" buttons to the front to overlay
-    // the borders properly
-    > .btn-check:checked + .btn,
-    > .btn-check:focus + .btn,
-    > .btn:hover,
-    > .btn:focus,
-    > .btn:active,
-    > .btn.active {
-      z-index: 1;
-    }
-  }
-
-  // Optional: Group multiple button groups together for a toolbar
-  .btn-toolbar {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-
-    .input-group {
-      width: auto;
-    }
-  }
-
-  .btn-group {
-    @include border-radius($btn-border-radius);
-
-    // Prevent double borders when buttons are next to each other
-    > :not(.btn-check:first-child) + .btn,
-    > .btn-group:not(:first-child) {
-      margin-inline-start: calc(-1 * #{$btn-border-width});
-    }
-
-    // Reset rounded corners
-    > .btn:not(:last-child):not(.dropdown-toggle),
-    > .btn.dropdown-toggle-split:first-child,
-    > .btn-group:not(:last-child) > .btn {
-      @include border-end-radius(0);
-    }
-
-    // The left radius should be 0 if the button is:
-    // - the "third or more" child
-    // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
-    // - part of a btn-group which isn't the first child
-    > .btn:nth-child(n + 3),
-    > :not(.btn-check) + .btn,
-    > .btn-group:not(:first-child) > .btn {
-      @include border-start-radius(0);
-    }
-  }
-
-  // Sizing
-  //
-  // Remix the default button sizing classes into new ones for easier manipulation.
-
-  .btn-group-sm > .btn { @extend .btn-sm; }
-  .btn-group-lg > .btn { @extend .btn-lg; }
-
-
-  //
-  // Split button dropdowns
-  //
-
-  .dropdown-toggle-split {
-    padding-inline: $btn-padding-x * .75;
-
-    &::after,
-    .dropup &::after,
-    .dropend &::after {
-      margin-inline-start: 0;
-    }
-
-    .dropstart &::before {
-      margin-inline-end: 0;
-    }
-  }
-
-  .btn-sm + .dropdown-toggle-split {
-    padding-inline: $btn-padding-x-sm * .75;
-  }
-
-  .btn-lg + .dropdown-toggle-split {
-    padding-inline: $btn-padding-x-lg * .75;
-  }
-
-
-  // The clickable button for toggling the menu
-  // Set the same inset shadow as the :active state
-  .btn-group.show .dropdown-toggle {
-    @include box-shadow($btn-active-box-shadow);
-
-    // Show no shadow for `.btn-link` since it has no other button styles.
-    &.btn-link {
-      @include box-shadow(none);
-    }
-  }
-
-
-  //
-  // Vertical button groups
-  //
-
-  .btn-group-vertical {
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-
-    > .btn,
-    > .btn-group {
-      width: 100%;
-    }
-
-    > .btn:not(:first-child),
-    > .btn-group:not(:first-child) {
-      margin-top: calc(-1 * #{$btn-border-width});
-    }
-
-    // Reset rounded corners
-    > .btn:not(:last-child):not(.dropdown-toggle),
-    > .btn-group:not(:last-child) > .btn {
-      @include border-bottom-radius(0);
-    }
-
-    // The top radius should be 0 if the button is:
-    // - the "third or more" child
-    // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
-    // - part of a btn-group which isn't the first child
-    > .btn:nth-child(n + 3),
-    > :not(.btn-check) + .btn,
-    > .btn-group:not(:first-child) > .btn {
-      @include border-top-radius(0);
-    }
-  }
-}

scss/buttons/_button-variables.scss

@@ -1,55 +0,0 @@
-@use "sass:color";
-@use "../config" as *;
-@use "../colors" as *;
-@use "../variables" as *;
-@use "../functions" as *;
-@use "../forms/form-variables" as *;
-
-// scss-docs-start btn-variables
-$btn-color:                   var(--#{$prefix}color-body) !default;
-$btn-padding-y:               $input-btn-padding-y !default;
-$btn-padding-x:               $input-btn-padding-x !default;
-$btn-font-family:             $input-btn-font-family !default;
-$btn-font-size:               $input-btn-font-size !default;
-$btn-line-height:             $input-btn-line-height !default;
-$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping
-
-$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
-$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
-$btn-font-size-sm:            $input-btn-font-size-sm !default;
-
-$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
-$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
-$btn-font-size-lg:            $input-btn-font-size-lg !default;
-
-$btn-border-width:            $input-btn-border-width !default;
-
-$btn-font-weight:             $font-weight-normal !default;
-$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
-// $btn-focus-width:             $input-btn-focus-width !default;
-// $btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
-$btn-disabled-opacity:        .65 !default;
-$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
-
-$btn-link-color:              var(--#{$prefix}link-color) !default;
-$btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color:     var(--#{$prefix}gray-600) !default;
-// $btn-link-color-contrast:     color-contrast($link-color) !default;
-// $btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
-
-// Allows for customizing button radius independently from global border radius
-$btn-border-radius:           var(--#{$prefix}border-radius) !default;
-$btn-border-radius-sm:        var(--#{$prefix}border-radius-sm) !default;
-$btn-border-radius-lg:        var(--#{$prefix}border-radius-lg) !default;
-
-$btn-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;
-
-$btn-hover-bg-shade-amount:       15% !default;
-$btn-hover-bg-tint-amount:        15% !default;
-$btn-hover-border-shade-amount:   20% !default;
-$btn-hover-border-tint-amount:    10% !default;
-$btn-active-bg-shade-amount:      20% !default;
-$btn-active-bg-tint-amount:       20% !default;
-$btn-active-border-shade-amount:  25% !default;
-$btn-active-border-tint-amount:   10% !default;
-// scss-docs-end btn-variables

scss/buttons/_button.scss

@@ -1,309 +0,0 @@
-@use "sass:color";
-@use "sass:list";
-@use "sass:map";
-@use "sass:meta";
-@use "../colors" as *;
-@use "../config" as *;
-@use "../theme" as *;
-@use "../variables" as *;
-@use "../functions" as *;
-@use "../vendor/rfs" as *;
-@use "../mixins/border-radius" as *;
-@use "../mixins/box-shadow" as *;
-@use "../mixins/focus-ring" as *;
-@use "../mixins/gradients" as *;
-@use "../mixins/transition" as *;
-@use "button-variables" as *;
-
-// scss-docs-start btn-variants
-$button-variants: (
-  "solid": (
-    "base": (
-      "bg": "bg",
-      "color": "contrast",
-      "border-color": "bg"
-    ),
-    "hover": (
-      "bg": "bg",
-      "border-color": "bg",
-      "color": "contrast"
-    ),
-    "active": (
-      "bg": "bg",
-      "border-color": "bg",
-      "color": "contrast"
-    )
-  ),
-  "outline": (
-    "base": (
-      "bg": "transparent",
-      "color": "text",
-      "border-color": "border"
-    ),
-    "hover": (
-      "bg": "bg",
-      "color": "contrast",
-      "border-color": "bg"
-    ),
-    "active": (
-      "bg": "bg",
-      "color": "contrast",
-      "border-color": "bg"
-    )
-  ),
-  "subtle": (
-    "base": (
-      "bg": "bg-subtle",
-      "color": "text",
-      "border-color": "transparent"
-    ),
-    "hover": (
-      "bg": ("bg-muted", "bg-subtle"),
-      "color": "text-emphasis"
-    ),
-    "active": (
-      "bg": "bg-subtle",
-      "color": "text-emphasis"
-    )
-  ),
-  "text": (
-    "base": (
-      "color": "text",
-      "bg": "transparent",
-      "border-color": "transparent"
-    ),
-    "hover": (
-      "color": "text",
-      "bg": "bg-subtle"
-    ),
-    "active": (
-      "color": "text",
-      "bg": "bg-subtle"
-    )
-  )
-) !default;
-// scss-docs-end btn-variants
-
-// // Main button style generator mixin
-
-// Generate button variant classes (e.g., .btn-solid, .btn-outline, etc.)
-// scss-docs-start btn-variant-mixin
-@each $variant, $_ in $button-variants {
-  .btn-#{$variant} {
-    @each $property, $value in map.get($button-variants, $variant, "base") {
-      @if $value == "transparent" {
-        --#{$prefix}btn-#{$property}: transparent;
-      } @else {
-        --#{$prefix}btn-#{$property}: var(--#{$prefix}theme-#{$value});
-      }
-    }
-
-    &:hover {
-      @each $property, $value in map.get($button-variants, $variant, "hover") {
-        @if $value == "transparent" {
-          --#{$prefix}btn-hover-#{$property}: transparent;
-        } @else if meta.type-of($value) == "list" {
-          $first-value: list.nth($value, 1);
-          $second-value: list.nth($value, 2);
-          --#{$prefix}btn-hover-#{$property}: color-mix(in oklch, var(--#{$prefix}theme-#{$first-value}) 50%, var(--#{$prefix}theme-#{$second-value}));
-        } @else if $value == "bg-subtle" {
-          --#{$prefix}btn-hover-#{$property}: var(--#{$prefix}theme-#{$value});
-        } @else {
-          --#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}theme-#{$value}) calc(l * .95) calc(c * 1.1) h);
-        }
-      }
-    }
-
-    &:focus-visible {
-      outline-color: var(--#{$prefix}theme-focus-ring);
-    }
-
-    &:active,
-    &.active {
-      @each $property, $value in map.get($button-variants, $variant, "active") {
-        @if $value == "transparent" {
-          --#{$prefix}btn-active-#{$property}: transparent;
-        } @else if $value == "bg-subtle" {
-          --#{$prefix}btn-active-#{$property}: var(--#{$prefix}theme-#{$value});
-        } @else {
-          --#{$prefix}btn-active-#{$property}: oklch(from var(--#{$prefix}theme-#{$value}) calc(l * .9) calc(c * 1.15) h);
-        }
-      }
-    }
-  }
-}
-// scss-docs-end btn-variant-mixin
-
-// scss-docs-start btn-size-mixin
-@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
-  --#{$prefix}btn-padding-y: #{$padding-y};
-  --#{$prefix}btn-padding-x: #{$padding-x};
-  @include rfs($font-size, --#{$prefix}btn-font-size);
-  --#{$prefix}btn-border-radius: #{$border-radius};
-}
-// scss-docs-end btn-size-mixin
-
-//
-// Base styles
-//
-
-@layer components {
-  .btn,
-  [class*="btn-"] {
-    // scss-docs-start btn-css-vars
-    --#{$prefix}btn-padding-x: #{$btn-padding-x};
-    --#{$prefix}btn-padding-y: #{$btn-padding-y};
-    --#{$prefix}btn-font-family: #{$btn-font-family};
-    @include rfs($btn-font-size, --#{$prefix}btn-font-size);
-    --#{$prefix}btn-font-weight: #{$btn-font-weight};
-    --#{$prefix}btn-line-height: #{$btn-line-height};
-    --#{$prefix}btn-color: #{$btn-color};
-    --#{$prefix}btn-bg: transparent;
-    --#{$prefix}btn-border-width: #{$btn-border-width};
-    --#{$prefix}btn-border-color: transparent;
-    --#{$prefix}btn-border-radius: #{$btn-border-radius};
-    --#{$prefix}btn-hover-border-color: transparent;
-    --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
-    --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
-    // --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
-    // scss-docs-end btn-css-vars
-
-    display: inline-block;
-    padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
-    font-family: var(--#{$prefix}btn-font-family);
-    @include font-size(var(--#{$prefix}btn-font-size));
-    font-weight: var(--#{$prefix}btn-font-weight);
-    line-height: var(--#{$prefix}btn-line-height);
-    color: var(--#{$prefix}btn-color);
-    text-align: center;
-    text-decoration: none;
-    white-space: $btn-white-space;
-    vertical-align: middle;
-    cursor: if($enable-button-pointers, pointer, null);
-    user-select: none;
-    border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
-    @include border-radius(var(--#{$prefix}btn-border-radius));
-    @include gradient-bg(var(--#{$prefix}btn-bg));
-    @include box-shadow(var(--#{$prefix}btn-box-shadow));
-    @include transition($btn-transition);
-
-    &:hover {
-      color: var(--#{$prefix}btn-hover-color);
-      background-color: var(--#{$prefix}btn-hover-bg);
-      border-color: var(--#{$prefix}btn-hover-border-color);
-    }
-
-    .btn-check + &:hover {
-      // override for the checkbox/radio buttons
-      color: var(--#{$prefix}btn-color);
-      background-color: var(--#{$prefix}btn-bg);
-      border-color: var(--#{$prefix}btn-border-color);
-    }
-
-    &:focus-visible {
-      @include focus-ring(true);
-      --#{$prefix}focus-ring-offset: 1px;
-    }
-
-    .btn-check:focus-visible + & {
-      @include focus-ring(true);
-    }
-
-    .btn-check:checked + &,
-    :not(.btn-check) + &:active,
-    &:first-child:active,
-    &.active,
-    &.show {
-      color: var(--#{$prefix}btn-active-color);
-      background-color: var(--#{$prefix}btn-active-bg);
-      // Remove CSS gradients if they're enabled
-      background-image: if($enable-gradients, none, null);
-      border-color: var(--#{$prefix}btn-active-border-color);
-      @include box-shadow(var(--#{$prefix}btn-active-shadow));
-
-      &:focus-visible {
-        @include focus-ring(true);
-      }
-    }
-
-    .btn-check:checked:focus-visible + & {
-      @include focus-ring(true);
-    }
-
-    &:disabled,
-    &.disabled,
-    fieldset:disabled & {
-      color: var(--#{$prefix}btn-disabled-color);
-      pointer-events: none;
-      background-color: var(--#{$prefix}btn-disabled-bg);
-      background-image: if($enable-gradients, none, null);
-      border-color: var(--#{$prefix}btn-disabled-border-color);
-      opacity: var(--#{$prefix}btn-disabled-opacity);
-      @include box-shadow(none);
-    }
-  }
-
-  //
-  // Link buttons
-  //
-
-  // Make a button look and behave like a link
-  .btn-link {
-    --#{$prefix}btn-font-weight: #{$font-weight-normal};
-    --#{$prefix}btn-color: #{$btn-link-color};
-    --#{$prefix}btn-bg: transparent;
-    --#{$prefix}btn-border-color: transparent;
-    --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
-    --#{$prefix}btn-hover-border-color: transparent;
-    --#{$prefix}btn-active-color: #{$btn-link-hover-color};
-    --#{$prefix}btn-active-border-color: transparent;
-    --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
-    --#{$prefix}btn-disabled-border-color: transparent;
-    --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
-    // --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
-
-    text-decoration: var(--#{$prefix}link-decoration);
-
-    @if $enable-gradients {
-      background-image: none;
-    }
-
-    &:focus-visible {
-      color: var(--#{$prefix}btn-color);
-    }
-
-    &:hover {
-      color: var(--#{$prefix}btn-hover-color);
-    }
-
-    // No need for an active state here
-  }
-
-
-  //
-  // Button Sizes
-  //
-
-  .btn-lg {
-    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
-  }
-
-  .btn-sm {
-    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
-  }
-
-  .btn-check {
-    position: absolute;
-    clip: rect(0, 0, 0, 0);
-    pointer-events: none;
-
-    &[disabled],
-    &:disabled {
-      + .btn {
-        pointer-events: none;
-        filter: none;
-        opacity: .65;
-      }
-    }
-  }
-}

scss/buttons/_close.scss

@@ -1,90 +0,0 @@
-@use "../config" as *;
-@use "../colors" as *;
-@use "../variables" as *;
-@use "../mixins/border-radius" as *;
-@use "../mixins/color-mode" as *;
-
-// scss-docs-start close-variables
-$btn-close-width:            1em !default;
-$btn-close-height:           $btn-close-width !default;
-$btn-close-padding-x:        .25em !default;
-$btn-close-padding-y:        $btn-close-padding-x !default;
-$btn-close-color:            $black !default;
-$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !default;
-$btn-close-focus-shadow:     $focus-ring-box-shadow !default;
-$btn-close-opacity:          .5 !default;
-$btn-close-hover-opacity:    .75 !default;
-$btn-close-focus-opacity:    1 !default;
-$btn-close-disabled-opacity: .25 !default;
-$btn-close-filter:           null !default;
-$btn-close-filter-dark: invert(1) grayscale(100%) brightness(200%) !default;
-// scss-docs-end close-variables
-
-// Transparent background and border properties included for button version.
-// iOS requires the button element instead of an anchor tag.
-// If you want the anchor version, it requires `href="#"`.
-// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-
-@layer components {
-  .btn-close {
-    // scss-docs-start close-css-vars
-    --#{$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};
-    // scss-docs-end close-css-vars
-
-    box-sizing: content-box;
-    width: $btn-close-width;
-    height: $btn-close-height;
-    padding: $btn-close-padding-y $btn-close-padding-x;
-    color: var(--#{$prefix}btn-close-color);
-    background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
-    filter: var(--#{$prefix}btn-close-filter);
-    border: 0; // for button elements
-    @include border-radius();
-    opacity: var(--#{$prefix}btn-close-opacity);
-
-    // Override <a>'s hover style
-    &:hover {
-      color: var(--#{$prefix}btn-close-color);
-      text-decoration: none;
-      opacity: var(--#{$prefix}btn-close-hover-opacity);
-    }
-
-    &:focus {
-      outline: 0;
-      box-shadow: var(--#{$prefix}btn-close-focus-shadow);
-      opacity: var(--#{$prefix}btn-close-focus-opacity);
-    }
-
-    &:disabled,
-    &.disabled {
-      pointer-events: none;
-      user-select: none;
-      opacity: var(--#{$prefix}btn-close-disabled-opacity);
-    }
-  }
-
-  @mixin btn-close-white() {
-    --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
-  }
-
-  .btn-close-white {
-    @include btn-close-white();
-  }
-
-  :root,
-  [data-bs-theme="light"] {
-    --#{$prefix}btn-close-filter: #{$btn-close-filter};
-  }
-
-  @if $enable-dark-mode {
-    @include color-mode(dark, true) {
-      @include btn-close-white();
-    }
-  }
-}

scss/buttons/index.scss

@@ -1,4 +0,0 @@
-@forward "button-variables";
-@forward "button";
-@forward "button-group";
-@forward "close";

scss/content/_images.scss

@@ -5,61 +5,45 @@
 @use "../mixins/border-radius" as *;
 @use "../mixins/box-shadow" as *;
 
-// scss-docs-start thumbnail-variables
-$thumbnail-padding:                 .25rem !default;
-$thumbnail-bg:                      var(--#{$prefix}bg-body) !default;
-$thumbnail-border-width:            var(--#{$prefix}border-width) !default;
-$thumbnail-border-color:            var(--#{$prefix}border-color) !default;
-$thumbnail-border-radius:           var(--#{$prefix}border-radius) !default;
-$thumbnail-box-shadow:              var(--#{$prefix}box-shadow-sm) !default;
-// scss-docs-end thumbnail-variables
-
-// scss-docs-start figure-variables
-$figure-caption-font-size:          $small-font-size !default;
-$figure-caption-color:              var(--#{$prefix}secondary-color) !default;
-// scss-docs-end figure-variables
-
-@layer content {
-  // Responsive images (ensure images don't scale beyond their parents)
-  //
-  // This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
-  // We previously tried the "images are responsive by default" approach in Bootstrap v2,
-  // and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
-  // which weren't expecting the images within themselves to be involuntarily resized.
-  // See also https://github.com/twbs/bootstrap/issues/18178
-  .img-fluid {
-    @include img-fluid();
-  }
-
-
-  // Image thumbnails
-  .img-thumbnail {
-    padding: $thumbnail-padding;
-    background-color: $thumbnail-bg;
-    border: $thumbnail-border-width solid $thumbnail-border-color;
-    @include border-radius($thumbnail-border-radius);
-    @include box-shadow($thumbnail-box-shadow);
-
-    // Keep them at most 100% wide
-    @include img-fluid();
-  }
-
-  //
-  // Figures
-  //
-
-  .figure {
-    // Ensures the caption's text aligns with the image.
-    display: inline-block;
-  }
-
-  .figure-img {
-    margin-bottom: $spacer * .5;
-    line-height: 1;
-  }
-
-  .figure-caption {
-    @include font-size($figure-caption-font-size);
-    color: $figure-caption-color;
-  }
+// Responsive images (ensure images don't scale beyond their parents)
+//
+// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
+// We previously tried the "images are responsive by default" approach in Bootstrap v2,
+// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
+// which weren't expecting the images within themselves to be involuntarily resized.
+// See also https://github.com/twbs/bootstrap/issues/18178
+.img-fluid {
+  @include img-fluid();
+}
+
+
+// Image thumbnails
+.img-thumbnail {
+  padding: $thumbnail-padding;
+  background-color: $thumbnail-bg;
+  border: $thumbnail-border-width solid $thumbnail-border-color;
+  @include border-radius($thumbnail-border-radius);
+  @include box-shadow($thumbnail-box-shadow);
+
+  // Keep them at most 100% wide
+  @include img-fluid();
+}
+
+//
+// Figures
+//
+
+.figure {
+  // Ensures the caption's text aligns with the image.
+  display: inline-block;
+}
+
+.figure-img {
+  margin-bottom: $spacer * .5;
+  line-height: 1;
+}
+
+.figure-caption {
+  @include font-size($figure-caption-font-size);
+  color: $figure-caption-color;
 }

scss/content/_prose.scss

@@ -1,137 +0,0 @@
-@use "../config" as *;
-@use "../mixins/transition" as *;
-
-@layer content {
-  .prose {
-    --#{$prefix}content-font-size: 16px;
-    --#{$prefix}content-gap: 24px;
-    --#{$prefix}heading-color: light-dark(var(--bs-gray-900), var(--bs-white));
-
-    position: relative;
-    max-width: 1000px;
-    margin-inline: auto;
-    font-size: var(--#{$prefix}content-font-size);
-    line-height: var(--#{$prefix}content-gap);
-
-    p,
-    ul,
-    ol,
-    dl,
-    pre,
-    table,
-    blockquote {
-      margin-bottom: var(--#{$prefix}content-gap);
-    }
-
-    li:not(:last-child) {
-      margin-bottom: calc(var(--#{$prefix}content-gap) / 4);
-    }
-
-    li ul,
-    li ol {
-      margin-top: calc(var(--#{$prefix}content-gap) / 4);
-    }
-
-    hr {
-      margin: calc(var(--#{$prefix}content-gap) * 1.5) 0;
-      border: 0;
-      border-block-start: 1px solid var(--#{$prefix}border-color);
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      --bs-heading-color: var(--bs-emphasis-color);
-
-      margin-top: 0;
-      margin-bottom: calc(var(--#{$prefix}content-gap) / 2);
-      font-weight: 500;
-      line-height: 1.25;
-    }
-
-    h1,
-    h2 {
-      &:not(:first-child) {
-        margin-top: calc(var(--#{$prefix}content-gap) * 1.5);
-      }
-    }
-
-    h3,
-    h4,
-    h5,
-    h6 {
-      &:not(:first-child) {
-        margin-top: calc(var(--#{$prefix}content-gap) * 1.25);
-      }
-    }
-
-    h1 {
-      font-size: 2.25em;
-      line-height: 1.1;
-    }
-    h2 {
-      font-size: 1.75em;
-    }
-    h3 {
-      margin-bottom: calc(var(--#{$prefix}content-gap) / 4);
-      font-size: 1.5em;
-    }
-    h4 {
-      font-size: 1.25em;
-    }
-    h5 {
-      font-size: 1.125em;
-    }
-    h6 {
-      font-size: 1em;
-    }
-
-    a:not([class]) {
-      color: var(--#{$prefix}link-color);
-      text-decoration: underline;
-      text-decoration-color: color-mix(in srgb, var(--#{$prefix}link-color) 25%, transparent);
-      text-underline-offset: 4px;
-      @include transition(.1s text-decoration-color ease-in-out);
-    }
-
-    a:not([class]):hover {
-      text-decoration-color: var(--#{$prefix}link-hover-color);
-    }
-
-    img {
-      max-width: 100%;
-    }
-
-    blockquote {
-      padding-inline-start: calc(var(--#{$prefix}content-gap) / 2);
-      margin: 0;
-      border-inline-start: 4px solid var(--#{$prefix}border-color);
-    }
-
-    table {
-      width: 100%;
-      border-spacing: 0;
-      border-collapse: collapse;
-    }
-
-    td,
-    th {
-      padding: 6px 12px;
-      text-align: inherit;
-      border: 1px solid var(--#{$prefix}border-color);
-    }
-
-
-    dt {
-      font-weight: 500;
-    }
-
-    video,
-    img {
-      max-width: 100%;
-    }
-  }
-}

scss/content/_tables.scss

@@ -3,213 +3,203 @@
 @use "sass:math";
 @use "../config" as *;
 @use "../colors" as *;
-@use "../theme" as *;
 @use "../variables" as *;
 @use "../functions" as *;
 @use "../layout/breakpoints" as *;
 
-// scss-docs-start table-variables
-$table-cell-padding-y:        .5rem !default;
-$table-cell-padding-x:        .5rem !default;
-$table-cell-padding-y-sm:     .25rem !default;
-$table-cell-padding-x-sm:     .25rem !default;
+// scss-docs-start table-variant
+@mixin table-variant($state, $background) {
+  .table-#{$state} {
+    $color: color-contrast(opaque($body-bg, $background));
+    $hover-bg: color.mix($color, $background, math.percentage($table-hover-bg-factor));
+    $striped-bg: color.mix($color, $background, math.percentage($table-striped-bg-factor));
+    $active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
+    $table-border-color: color.mix($color, $background, math.percentage($table-border-factor));
 
-$table-cell-vertical-align:   top !default;
-
-$table-color:                 var(--#{$prefix}color-body) !default;
-$table-bg:                    var(--#{$prefix}bg-body) !default;
-$table-accent-bg:             transparent !default;
-
-// $table-th-font-weight:        null !default;
-
-$table-striped-color:         $table-color !default;
-$table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-striped-bg-factor)}, transparent) !default;
-
-$table-active-color:          $table-color !default;
-$table-active-bg-factor:      .1 !default;
-$table-active-bg:             color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-active-bg-factor)}, transparent) !default;
-
-$table-hover-color:           $table-color !default;
-$table-hover-bg-factor:       .075 !default;
-$table-hover-bg:              color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-hover-bg-factor)}, transparent) !default;
-
-$table-border-width:          var(--#{$prefix}border-width) !default;
-$table-border-color:          var(--#{$prefix}border-color) !default;
-
-$table-striped-order:         odd !default;
-$table-striped-columns-order: even !default;
-
-$table-group-separator-color: currentcolor !default;
-
-// $table-caption-color:         var(--#{$prefix}secondary-color) !default;
-
-// scss-docs-end table-variables
+    --#{$prefix}table-color: #{$color};
+    --#{$prefix}table-bg: #{$background};
+    --#{$prefix}table-border-color: #{$table-border-color};
+    --#{$prefix}table-striped-bg: #{$striped-bg};
+    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
+    --#{$prefix}table-active-bg: #{$active-bg};
+    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
+    --#{$prefix}table-hover-bg: #{$hover-bg};
+    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
 
+    color: var(--#{$prefix}table-color);
+    border-color: var(--#{$prefix}table-border-color);
+  }
+}
+// scss-docs-end table-variant
 
 //
 // Basic Bootstrap table
 //
 
-@layer content {
-  .table {
-    // Reset needed for nesting tables
-    --#{$prefix}table-color-type: initial;
-    --#{$prefix}table-bg-type: initial;
-    --#{$prefix}table-color-state: initial;
-    --#{$prefix}table-bg-state: initial;
-    // End of reset
+.table {
+  // Reset needed for nesting tables
+  --#{$prefix}table-color-type: initial;
+  --#{$prefix}table-bg-type: initial;
+  --#{$prefix}table-color-state: initial;
+  --#{$prefix}table-bg-state: initial;
+  // End of reset
+  --#{$prefix}table-color: #{$table-color};
+  --#{$prefix}table-bg: #{$table-bg};
+  --#{$prefix}table-border-color: #{$table-border-color};
+  --#{$prefix}table-accent-bg: #{$table-accent-bg};
+  --#{$prefix}table-striped-color: #{$table-striped-color};
+  --#{$prefix}table-striped-bg: #{$table-striped-bg};
+  --#{$prefix}table-active-color: #{$table-active-color};
+  --#{$prefix}table-active-bg: #{$table-active-bg};
+  --#{$prefix}table-hover-color: #{$table-hover-color};
+  --#{$prefix}table-hover-bg: #{$table-hover-bg};
 
-    // scss-docs-start table-css-variables
-    --#{$prefix}table-color: #{$table-color};
-    --#{$prefix}table-bg: #{$table-bg};
-    --#{$prefix}table-border-color: #{$table-border-color};
-    --#{$prefix}table-accent-bg: #{$table-accent-bg};
-    --#{$prefix}table-striped-color: #{$table-striped-color};
-    --#{$prefix}table-striped-bg: #{$table-striped-bg};
-    --#{$prefix}table-active-color: #{$table-active-color};
-    --#{$prefix}table-active-bg: #{$table-active-bg};
-    --#{$prefix}table-hover-color: #{$table-hover-color};
-    --#{$prefix}table-hover-bg: #{$table-hover-bg};
-    // scss-docs-end table-css-variables
+  width: 100%;
+  margin-bottom: $spacer;
+  vertical-align: $table-cell-vertical-align;
+  border-color: var(--#{$prefix}table-border-color);
 
-    width: 100%;
-    margin-bottom: $spacer;
-    vertical-align: $table-cell-vertical-align;
-    border-color: var(--#{$prefix}theme-border, var(--#{$prefix}table-border-color));
+  // Target th & td
+  // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
+  // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
+  // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
+  // stylelint-disable-next-line selector-max-universal
+  > :not(caption) > * > * {
+    padding: $table-cell-padding-y $table-cell-padding-x;
+    // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
+    color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
+    background-color: var(--#{$prefix}table-bg);
+    border-bottom-width: $table-border-width;
+    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
+  }
+
+  > tbody {
+    vertical-align: inherit;
+  }
+
+  > thead {
+    vertical-align: bottom;
+  }
+}
+
+.table-group-divider {
+  border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
+}
+
+//
+// Change placement of captions with a class
+//
+
+.caption-top {
+  caption-side: top;
+}
+
+
+//
+// Condensed table w/ half padding
+//
+
+.table-sm {
+  // stylelint-disable-next-line selector-max-universal
+  > :not(caption) > * > * {
+    padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
+  }
+}
+
+
+// Border versions
+//
+// Add or remove borders all around the table and between all the columns.
+//
+// When borders are added on all sides of the cells, the corners can render odd when
+// these borders do not have the same color or if they are semi-transparent.
+// Therefore we add top and border bottoms to the `tr`s and left and right borders
+// to the `td`s or `th`s
+
+.table-bordered {
+  > :not(caption) > * {
+    border-width: $table-border-width 0;
 
-    // Target th & td
-    // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
-    // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
-    // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
     // stylelint-disable-next-line selector-max-universal
-    > :not(caption) > * > * {
-      padding: $table-cell-padding-y $table-cell-padding-x;
-      // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
-      color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}theme-text, var(--#{$prefix}table-color))));
-      background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-bg));
-      border-block-end-width: $table-border-width;
-      box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-accent-bg))));
-    }
-
-    > tbody {
-      vertical-align: inherit;
-    }
-
-    > thead {
-      vertical-align: bottom;
-    }
-  }
-
-  .table-group-divider {
-    border-block-start: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
-  }
-
-  //
-  // Change placement of captions with a class
-  //
-
-  .caption-top {
-    caption-side: top;
-  }
-
-
-  //
-  // Condensed table w/ half padding
-  //
-
-  .table-sm {
-    // stylelint-disable-next-line selector-max-universal
-    > :not(caption) > * > * {
-      padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
-    }
-  }
-
-
-  // Border versions
-  //
-  // Add or remove borders all around the table and between all the columns.
-  //
-  // When borders are added on all sides of the cells, the corners can render odd when
-  // these borders do not have the same color or if they are semi-transparent.
-  // Therefore we add top and border bottoms to the `tr`s and left and right borders
-  // to the `td`s or `th`s
-
-  .table-bordered {
-    > :not(caption) > * {
-      border-width: $table-border-width 0;
-
-      // stylelint-disable-next-line selector-max-universal
-      > * {
-        border-width: 0 $table-border-width;
-      }
-    }
-  }
-
-  .table-borderless {
-    // stylelint-disable-next-line selector-max-universal
-    > :not(caption) > * > * {
-      border-block-end-width: 0;
-    }
-
-    > :not(:first-child) {
-      border-block-start-width: 0;
-    }
-  }
-
-  // Zebra-striping
-  //
-  // Default zebra-stripe styles (alternating gray and transparent backgrounds)
-
-  // For rows
-  .table-striped {
-    > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
-      --#{$prefix}table-color-type: var(--#{$prefix}theme-text, var(--#{$prefix}table-striped-color));
-      --#{$prefix}table-bg-type: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-striped-bg-factor)}, transparent);
-    }
-  }
-
-  // For columns
-  .table-striped-columns {
-    > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
-      --#{$prefix}table-color-type: var(--#{$prefix}theme-text, var(--#{$prefix}table-striped-color));
-      --#{$prefix}table-bg-type: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-striped-bg-factor)}, transparent);
-    }
-  }
-
-  // Active table
-  //
-  // The `.table-active` class can be added to highlight rows or cells
-
-  .table-active {
-    --#{$prefix}table-color-state: var(--#{$prefix}theme-text, var(--#{$prefix}table-active-color));
-    --#{$prefix}table-bg-state: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-active-bg-factor)}, transparent);
-  }
-
-  // Hover effect
-  //
-  // Placed here since it has to come after the potential zebra striping
-
-  .table-hover {
-    > tbody > tr:hover > * {
-      --#{$prefix}table-color-state: var(--#{$prefix}theme-text, var(--#{$prefix}table-hover-color));
-      --#{$prefix}table-bg-state: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-hover-bg-factor)}, transparent);
-    }
-  }
-
-  // Responsive tables
-  //
-  // Generate series of `.table-responsive-*` classes for configuring the screen
-  // size of where your table will overflow.
-
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    @include media-breakpoint-down($breakpoint) {
-      .table-responsive#{$infix} {
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-      }
+    > * {
+      border-width: 0 $table-border-width;
+    }
+  }
+}
+
+.table-borderless {
+  // stylelint-disable-next-line selector-max-universal
+  > :not(caption) > * > * {
+    border-bottom-width: 0;
+  }
+
+  > :not(:first-child) {
+    border-top-width: 0;
+  }
+}
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+// For rows
+.table-striped {
+  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
+    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
+  }
+}
+
+// For columns
+.table-striped-columns {
+  > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
+    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
+  }
+}
+
+// Active table
+//
+// The `.table-active` class can be added to highlight rows or cells
+
+.table-active {
+  --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
+  --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
+}
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+  > tbody > tr:hover > * {
+    --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
+    --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
+  }
+}
+
+
+// Table variants
+//
+// Table variants set the table cell backgrounds, border colors
+// and the colors of the striped, hovered & active tables
+
+@each $color, $value in $table-variants {
+  @include table-variant($color, $value);
+}
+
+// Responsive tables
+//
+// Generate series of `.table-responsive-*` classes for configuring the screen
+// size of where your table will overflow.
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+  @include media-breakpoint-down($breakpoint) {
+    .table-responsive#{$infix} {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
     }
   }
 }

scss/content/_type.scss

@@ -3,56 +3,70 @@
 @use "../mixins/lists" as *;
 @use "../vendor/rfs" as *;
 
-@layer content {
-  //
-  // Lists
-  //
+.lead {
+  @include font-size($lead-font-size);
+  font-weight: $lead-font-weight;
+}
 
-  .list-unstyled {
-    @include list-unstyled();
-  }
-
-  // Inline turns list items into inline-block
-  .list-inline {
-    @include list-unstyled();
-  }
-  .list-inline-item {
-    display: inline-block;
-
-    &:not(:last-child) {
-      margin-inline-end: $list-inline-padding;
-    }
-  }
-
-
-  //
-  // Misc
-  //
-
-  // Builds on `abbr`
-  .initialism {
-    @include font-size($initialism-font-size);
-    text-transform: uppercase;
-  }
-
-  // Blockquotes
-  .blockquote {
-    margin-bottom: $blockquote-margin-y;
-    @include font-size($blockquote-font-size);
-
-    > :last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .blockquote-footer {
-    margin-top: -$blockquote-margin-y;
-    margin-bottom: $blockquote-margin-y;
-    @include font-size($blockquote-footer-font-size);
-    color: $blockquote-footer-color;
-
-    &::before {
-      content: "\2014\00A0"; // em dash, nbsp
-    }
+// Type display classes
+@each $display, $font-size in $display-font-sizes {
+  .display-#{$display} {
+    font-family: $display-font-family;
+    font-style: $display-font-style;
+    font-weight: $display-font-weight;
+    line-height: $display-line-height;
+    @include font-size($font-size);
+  }
+}
+
+//
+// Lists
+//
+
+.list-unstyled {
+  @include list-unstyled();
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+  @include list-unstyled();
+}
+.list-inline-item {
+  display: inline-block;
+
+  &:not(:last-child) {
+    margin-right: $list-inline-padding;
+  }
+}
+
+
+//
+// Misc
+//
+
+// Builds on `abbr`
+.initialism {
+  @include font-size($initialism-font-size);
+  text-transform: uppercase;
+}
+
+// Blockquotes
+.blockquote {
+  margin-bottom: $blockquote-margin-y;
+  @include font-size($blockquote-font-size);
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.blockquote-footer {
+  margin-top: -$blockquote-margin-y;
+  margin-bottom: $blockquote-margin-y;
+  @include font-size($blockquote-footer-font-size);
+  color: $blockquote-footer-color;
+
+  &::before {
+    content: "\2014\00A0"; // em dash, nbsp
   }
 }

scss/content/index.scss

@@ -2,4 +2,3 @@
 @forward "type";
 @forward "tables";
 @forward "images";
-@forward "prose";

scss/forms/_check.scss

@@ -1,100 +0,0 @@
-@use "../config" as *;
-@use "../colors" as *;
-@use "../variables" as *;
-@use "../functions" as *;
-@use "../vendor/rfs" as *;
-@use "../mixins/border-radius" as *;
-@use "../mixins/box-shadow" as *;
-@use "../mixins/color-mode" as *;
-@use "../mixins/focus-ring" as *;
-@use "../mixins/transition" as *;
-@use "form-variables" as *;
-
-// scss-docs-start check-variables
-$check-border-color: var(--#{$prefix}border-color) !default;
-$check-checked-bg: var(--#{$prefix}primary-base) !default;
-$check-checked-border-color: $check-checked-bg !default;
-$check-indeterminate-bg: var(--#{$prefix}primary-base) !default;
-$check-indeterminate-border-color: $check-indeterminate-bg !default;
-$check-disabled-bg: var(--#{$prefix}bg-3) !default;
-$check-disabled-opacity: .65 !default;
-// scss-docs-end check-variables
-
-@layer forms {
-  b-checkgroup {
-    display: flex;
-    gap: var(--#{$prefix}gap, .5rem);
-    align-items: var(--#{$prefix}align-items, start);
-
-    .description {
-      color: var(--#{$prefix}secondary-text);
-    }
-  }
-
-  .check {
-    // scss-docs-start check-css-variables
-    --#{$prefix}check-bg: transparent;
-    --#{$prefix}check-border-color: #{$check-border-color};
-    --#{$prefix}check-checked-bg: #{$check-checked-bg};
-    --#{$prefix}check-checked-border-color: #{$check-checked-border-color};
-    --#{$prefix}check-indeterminate-bg: #{$check-indeterminate-bg};
-    --#{$prefix}check-indeterminate-border-color: #{$check-indeterminate-border-color};
-    --#{$prefix}check-disabled-bg: #{$check-disabled-bg};
-    --#{$prefix}check-disabled-opacity: #{$check-disabled-opacity};
-    // scss-docs-end check-css-variables
-
-    display: grid;
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-    margin-block: .125rem;
-
-    :where(svg, input) {
-      flex-shrink: 0;
-      grid-row-start: 1;
-      grid-column-start: 1;
-      width: 1rem;
-      height: 1rem;
-    }
-
-    :where(input) {
-      appearance: none;
-      // later: maybe set a tertiary bg color?
-      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-bg));
-      border: 1px solid var(--#{$prefix}theme-bg, var(--#{$prefix}check-border-color));
-      // stylelint-disable-next-line property-disallowed-list
-      border-radius: .25em;
-    }
-
-    :where(input:checked, input:indeterminate) {
-      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-checked-bg));
-      border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-checked-border-color));
-    }
-
-    &:has(input:checked) .checked,
-    &:has(input:indeterminate) .indeterminate {
-      display: block;
-      color: var(--#{$prefix}primary-contrast);
-      stroke: currentcolor;
-    }
-
-    &:has(input:disabled) {
-      --#{$prefix}check-bg: var(--#{$prefix}check-disabled-bg);
-
-      ~ label {
-        color: var(--#{$prefix}secondary-text);
-        cursor: default;
-      }
-    }
-
-    &:has(input:disabled:checked) {
-      opacity: var(--#{$prefix}check-disabled-opacity);
-    }
-
-    :where(svg) {
-      pointer-events: none;
-    }
-
-    :where(svg path) {
-      display: none;
-    }
-  }
-}

scss/forms/_floating-labels.scss

@@ -1,120 +1,102 @@
 @use "../config" as *;
-@use "../colors" as *;
 @use "../variables" as *;
 @use "../mixins/border-radius" as *;
 @use "../mixins/transition" as *;
-@use "form-variables" as *;
 
-// scss-docs-start form-floating-variables
-$form-floating-height:                  calc(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.5em !default;
-$form-floating-label-opacity:           .65 !default;
-$form-floating-label-transform:         scale(.85) translateY(-.5rem) translateX(.15rem) !default;
-$form-floating-label-disabled-color:    var(--#{$prefix}gray-600) !default;
-$form-floating-transition:              opacity .1s ease-in-out, transform .1s ease-in-out !default;
-// scss-docs-end form-floating-variables
+.form-floating {
+  position: relative;
 
-@layer forms {
-  .form-floating {
-    position: relative;
+  > .form-control,
+  > .form-control-plaintext,
+  > .form-select {
+    height: $form-floating-height;
+    min-height: $form-floating-height;
+    line-height: $form-floating-line-height;
+  }
 
-    > .form-control,
-    > .form-control-plaintext,
-    > .form-select {
-      height: $form-floating-height;
-      min-height: $form-floating-height;
-      line-height: $form-floating-line-height;
+  > label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    max-width: 100%;
+    height: 100%; // allow textareas
+    padding: $form-floating-padding-y $form-floating-padding-x;
+    overflow: hidden;
+    color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+    border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
+    transform-origin: 0 0;
+    @include transition($form-floating-transition);
+  }
+
+  > .form-control,
+  > .form-control-plaintext {
+    padding: $form-floating-padding-y $form-floating-padding-x;
+
+    &::placeholder {
+      color: transparent;
     }
 
-    > label {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 2;
-      max-width: 100%;
-      height: 100%; // allow textareas
-      padding: $form-floating-padding-y $form-floating-padding-x;
-      overflow: hidden;
-      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
-      text-align: start;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      pointer-events: none;
-      border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
-      transform-origin: 0 0;
-      @include transition($form-floating-transition);
-    }
-
-    > .form-control,
-    > .form-control-plaintext {
-      padding: $form-floating-padding-y $form-floating-padding-x;
-
-      &::placeholder {
-        color: transparent;
-      }
-
-      &:focus,
-      &:not(:placeholder-shown) {
-        padding-top: $form-floating-input-padding-t;
-        padding-bottom: $form-floating-input-padding-b;
-      }
-      // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
-      &:-webkit-autofill {
-        padding-top: $form-floating-input-padding-t;
-        padding-bottom: $form-floating-input-padding-b;
-      }
-    }
-
-    > .form-select {
-      padding-inline-start: $form-floating-padding-x;
+    &:focus,
+    &:not(:placeholder-shown) {
       padding-top: $form-floating-input-padding-t;
       padding-bottom: $form-floating-input-padding-b;
     }
-
-    > .form-control:focus,
-    > .form-control:not(:placeholder-shown),
-    > .form-control-plaintext,
-    > .form-select {
-      ~ label {
-        transform: $form-floating-label-transform;
-      }
-    }
     // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
-    > .form-control:-webkit-autofill {
-      ~ label {
-        transform: $form-floating-label-transform;
-      }
-    }
-    > textarea:focus,
-    > textarea:not(:placeholder-shown) {
-      ~ label::after {
-        position: absolute;
-        inset: $form-floating-padding-y ($form-floating-padding-x * .5);
-        z-index: -1;
-        height: $form-floating-label-height;
-        content: "";
-        background-color: $input-bg;
-        @include border-radius($input-border-radius);
-      }
-    }
-    > textarea:disabled ~ label::after {
-      background-color: $input-disabled-bg;
-    }
-
-    > .form-control-plaintext {
-      ~ label {
-        border-width: $input-border-width 0; // Required to properly position label text - as explained above
-      }
-    }
-
-    > :disabled ~ label,
-    > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
-      color: $form-floating-label-disabled-color;
+    &:-webkit-autofill {
+      padding-top: $form-floating-input-padding-t;
+      padding-bottom: $form-floating-input-padding-b;
     }
   }
+
+  > .form-select {
+    padding-top: $form-floating-input-padding-t;
+    padding-bottom: $form-floating-input-padding-b;
+    padding-left: $form-floating-padding-x;
+  }
+
+  > .form-control:focus,
+  > .form-control:not(:placeholder-shown),
+  > .form-control-plaintext,
+  > .form-select {
+    ~ label {
+      transform: $form-floating-label-transform;
+    }
+  }
+  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+  > .form-control:-webkit-autofill {
+    ~ label {
+      transform: $form-floating-label-transform;
+    }
+  }
+  > textarea:focus,
+  > textarea:not(:placeholder-shown) {
+    ~ label::after {
+      position: absolute;
+      inset: $form-floating-padding-y ($form-floating-padding-x * .5);
+      z-index: -1;
+      height: $form-floating-label-height;
+      content: "";
+      background-color: $input-bg;
+      @include border-radius($input-border-radius);
+    }
+  }
+  > textarea:disabled ~ label::after {
+    background-color: $input-disabled-bg;
+  }
+
+  > .form-control-plaintext {
+    ~ label {
+      border-width: $input-border-width 0; // Required to properly position label text - as explained above
+    }
+  }
+
+  > :disabled ~ label,
+  > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
+    color: $form-floating-label-disabled-color;
+  }
 }

scss/forms/_form-check.scss

@@ -0,0 +1,198 @@
+@use "../config" as *;
+@use "../variables" as *;
+@use "../functions" as *;
+@use "../vendor/rfs" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+@use "../mixins/transition" as *;
+@use "../mixins/color-mode" as *;
+
+//
+// Check/radio
+//
+
+.form-check {
+  display: block;
+  min-height: $form-check-min-height;
+  padding-left: $form-check-padding-start;
+  margin-bottom: $form-check-margin-bottom;
+
+  .form-check-input {
+    float: left;
+    margin-left: $form-check-padding-start * -1;
+  }
+}
+
+.form-check-reverse {
+  padding-right: $form-check-padding-start;
+  padding-left: 0;
+  text-align: right;
+
+  .form-check-input {
+    float: right;
+    margin-right: $form-check-padding-start * -1;
+    margin-left: 0;
+  }
+}
+
+.form-check-input {
+  --#{$prefix}form-check-bg: #{$form-check-input-bg};
+
+  flex-shrink: 0;
+  width: $form-check-input-width;
+  height: $form-check-input-width;
+  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
+  vertical-align: top;
+  appearance: none;
+  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;
+  border: $form-check-input-border;
+  print-color-adjust: exact; // Keep themed appearance for print
+  @include transition($form-check-transition);
+
+  &[type="checkbox"] {
+    @include border-radius($form-check-input-border-radius);
+  }
+
+  &[type="radio"] {
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: $form-check-radio-border-radius;
+  }
+
+  &:active {
+    filter: $form-check-input-active-filter;
+  }
+
+  &:focus {
+    border-color: $form-check-input-focus-border;
+    outline: 0;
+    box-shadow: $form-check-input-focus-box-shadow;
+  }
+
+  &:checked {
+    background-color: $form-check-input-checked-bg-color;
+    border-color: $form-check-input-checked-border-color;
+
+    &[type="checkbox"] {
+      @if $enable-gradients {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
+      } @else {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
+      }
+    }
+
+    &[type="radio"] {
+      @if $enable-gradients {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
+      } @else {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
+      }
+    }
+  }
+
+  &[type="checkbox"]:indeterminate {
+    background-color: $form-check-input-indeterminate-bg-color;
+    border-color: $form-check-input-indeterminate-border-color;
+
+    @if $enable-gradients {
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
+    } @else {
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
+    }
+  }
+
+  &:disabled {
+    pointer-events: none;
+    filter: none;
+    opacity: $form-check-input-disabled-opacity;
+  }
+
+  // Use disabled attribute in addition of :disabled pseudo-class
+  // See: https://github.com/twbs/bootstrap/issues/28247
+  &[disabled],
+  &:disabled {
+    ~ .form-check-label {
+      cursor: default;
+      opacity: $form-check-label-disabled-opacity;
+    }
+  }
+}
+
+.form-check-label {
+  color: $form-check-label-color;
+  cursor: $form-check-label-cursor;
+}
+
+//
+// Switch
+//
+
+.form-switch {
+  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: var(--#{$prefix}form-switch-bg);
+    background-position: left center;
+    @include border-radius($form-switch-border-radius, 0);
+    @include transition($form-switch-transition);
+
+    &:focus {
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
+    }
+
+    &:checked {
+      background-position: $form-switch-checked-bg-position;
+
+      @if $enable-gradients {
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
+      } @else {
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
+      }
+    }
+  }
+
+  &.form-check-reverse {
+    padding-right: $form-switch-padding-start;
+    padding-left: 0;
+
+    .form-check-input {
+      margin-right: $form-switch-padding-start * -1;
+      margin-left: 0;
+    }
+  }
+}
+
+.form-check-inline {
+  display: inline-block;
+  margin-right: $form-check-inline-margin-end;
+}
+
+.btn-check {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none;
+
+  &[disabled],
+  &:disabled {
+    + .btn {
+      pointer-events: none;
+      filter: none;
+      opacity: $form-check-btn-check-disabled-opacity;
+    }
+  }
+}
+
+@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)};
+    }
+  }
+}

scss/forms/_form-control.scss

@@ -1,244 +1,222 @@
 @use "sass:math";
 @use "../config" as *;
 @use "../variables" as *;
-@use "../functions" as *;
 @use "../vendor/rfs" as *;
 @use "../mixins/border-radius" as *;
 @use "../mixins/box-shadow" as *;
-@use "../mixins/color-mode" as *;
-@use "../mixins/focus-ring" as *;
-@use "../mixins/gradients" as *;
 @use "../mixins/transition" as *;
-@use "form-variables" as *;
+@use "../mixins/gradients" as *;
+//
+// General form controls (plus a few specific high-level interventions)
+//
 
-@layer forms {
-  .form-control {
-    --#{$prefix}control-min-height: #{$control-min-height};
-    --#{$prefix}control-padding-y: #{$control-padding-y};
-    --#{$prefix}control-padding-x: #{$control-padding-x};
-    --#{$prefix}control-font-size: #{$control-font-size};
-    --#{$prefix}control-line-height: #{$control-line-height};
-    --#{$prefix}control-color: #{$control-color};
-    --#{$prefix}control-bg: #{$control-bg};
-    --#{$prefix}control-border-width: #{$control-border-width};
-    --#{$prefix}control-border-color: #{$control-border-color};
-    --#{$prefix}control-border-radius: #{$control-border-radius};
-    --#{$prefix}control-select-bg-color: #{$control-select-indicator-color};
-    --#{$prefix}control-select-bg: #{escape-svg($control-select-indicator)};
-    --#{$prefix}control-select-bg-position: #{$control-select-bg-position};
-    --#{$prefix}control-select-bg-size: #{$control-select-bg-size};
+.form-control {
+  display: block;
+  width: 100%;
+  padding: $input-padding-y $input-padding-x;
+  font-family: $input-font-family;
+  @include font-size($input-font-size);
+  font-weight: $input-font-weight;
+  line-height: $input-line-height;
+  color: $input-color;
+  appearance: none; // Fix appearance for date inputs in Safari
+  background-color: $input-bg;
+  background-clip: padding-box;
+  border: $input-border-width solid $input-border-color;
 
-    display: block;
-    width: 100%;
-    min-height: var(--#{$prefix}control-min-height);
-    padding: var(--#{$prefix}control-padding-y) var(--#{$prefix}control-padding-x);
-    font-size: var(--#{$prefix}control-font-size);
-    line-height: var(--#{$prefix}control-line-height);
-    color: var(--#{$prefix}control-color);
-    appearance: none;
-    background-color: var(--#{$prefix}control-bg);
-    background-clip: padding-box;
-    border: var(--#{$prefix}control-border-width) solid var(--#{$prefix}control-border-color);
-    @include border-radius(var(--#{$prefix}control-border-radius), 0);
-    @include box-shadow($input-box-shadow);
-    @include transition($input-transition);
+  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+  @include border-radius($input-border-radius, 0);
 
-    &[type="file"] {
-      overflow: hidden; // prevent pseudo element button overlap
+  @include box-shadow($input-box-shadow);
+  @include transition($input-transition);
 
-      &:not(:disabled):not([readonly]) {
-        cursor: pointer;
-      }
-    }
-
-    // Customize the `:focus` state to imitate native WebKit styles.
-    &:focus-visible {
-      color: $input-focus-color;
-      background-color: $input-focus-bg;
-      border-color: $input-focus-border-color;
-      @include focus-ring(true);
-    }
-
-    &::-webkit-date-and-time-value {
-      // On Android Chrome, form-control's "width: 100%" makes the input width too small
-      // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
-      //
-      // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
-      // Tested under iOS 16.2 / Safari 16.2
-      min-width: 85px; // Seems to be a good minimum safe width
-
-      // Add some height to date inputs on iOS
-      // https://github.com/twbs/bootstrap/issues/23307
-      // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
-      // Multiply line-height by 1em if it has no unit
-      height: if(math.unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
-
-      // Android Chrome type="date" is taller than the other inputs
-      // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
-      // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
-      margin: 0;
-    }
-
-    // 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;
-      // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
-      opacity: 1;
-    }
-
-    // Disabled inputs
-    //
-    // HTML5 says that controls under a fieldset > legend:first-child won't be
-    // disabled if the fieldset is disabled. Due to implementation difficulty, we
-    // don't honor that edge case; we style them as disabled anyway.
-    &:disabled {
-      color: $input-disabled-color;
-      background-color: $input-disabled-bg;
-      border-color: $input-disabled-border-color;
-      // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
-      opacity: 1;
-    }
-
-    // File input buttons theming
-    &::file-selector-button {
-      min-height: var(--#{$prefix}control-min-height);
-      padding: var(--#{$prefix}control-padding-y) var(--#{$prefix}control-padding-x);
-      margin: calc(var(--#{$prefix}control-padding-y) * -1) calc(var(--#{$prefix}control-padding-x) * -1);
-      margin-inline-end: var(--#{$prefix}control-padding-x);
-      color: $form-file-button-color;
-      @include gradient-bg($form-file-button-bg);
-      pointer-events: none;
-      border-color: inherit;
-      border-style: solid;
-      border-width: 0;
-      border-inline-end-width: var(--#{$prefix}control-border-width);
-      border-radius: 0; // stylelint-disable-line property-disallowed-list
-      @include transition($btn-transition);
-    }
-
-    &:hover:not(:disabled):not([readonly])::file-selector-button {
-      background-color: $form-file-button-hover-bg;
-    }
-  }
-
-  // Readonly controls as plain text
-  //
-  // Apply class to a readonly input to make it appear like regular plain
-  // text (without any border, background color, focus indicator)
-
-  .form-control-plaintext {
-    display: block;
-    width: 100%;
-    padding: $input-padding-y 0;
-    margin-bottom: 0; // match inputs if this class comes on inputs with default margins
-    line-height: $input-line-height;
-    color: $input-plaintext-color;
-    background-color: transparent;
-    border: solid transparent;
-    border-width: $input-border-width 0;
-
-    &:focus {
-      outline: 0;
-    }
-
-    &.form-control-sm,
-    &.form-control-lg {
-      padding-inline: 0;
-    }
-  }
-
-  // stylelint-disable selector-no-qualifying-type
-  select.form-control {
-    padding-inline-end: calc(var(--#{$prefix}control-padding-x) * 3);
-    background-image: var(--#{$prefix}control-select-bg);
-    background-repeat: no-repeat;
-    background-position: var(--#{$prefix}control-select-bg-position);
-    background-size: var(--#{$prefix}control-select-bg-size);
-
-    &[multiple],
-    &[size]:not([size="1"]) {
-      padding-inline-end: var(--#{$prefix}control-padding-x);
-      background-image: none;
-    }
-
-    @if $enable-dark-mode {
-      @include color-mode(dark) {
-        --#{$prefix}control-select-indicator: #{escape-svg($control-select-indicator-dark)};
-      }
-    }
-  }
-  // stylelint-enable selector-no-qualifying-type
-
-  // Form control sizing
-  //
-  // Build on `.form-control` with modifier classes to decrease or increase the
-  // height and font-size of form controls.
-  //
-  // Repeated in `_input_group.scss` to avoid Sass extend issues.
-
-  .form-control-sm {
-    --#{$prefix}control-min-height: #{$control-min-height-sm};
-    --#{$prefix}control-padding-y: #{$control-padding-y-sm};
-    --#{$prefix}control-padding-x: #{$control-padding-x-sm};
-    --#{$prefix}control-font-size: #{$control-font-size-sm};
-    --#{$prefix}control-line-height: #{$control-line-height-sm};
-    --#{$prefix}control-border-radius: #{$control-border-radius-sm};
-  }
-
-  .form-control-lg {
-    --#{$prefix}control-min-height: #{$control-min-height-lg};
-    --#{$prefix}control-padding-y: #{$control-padding-y-lg};
-    --#{$prefix}control-padding-x: #{$control-padding-x-lg};
-    --#{$prefix}control-font-size: #{$control-font-size-lg};
-    --#{$prefix}control-line-height: #{$control-line-height-lg};
-    --#{$prefix}control-border-radius: #{$control-border-radius-lg};
-  }
-
-  // // Make sure textareas don't shrink too much when resized
-  // // https://github.com/twbs/bootstrap/pull/29124
-  // // stylelint-disable selector-no-qualifying-type
-  // textarea {
-  //   &.form-control {
-  //     min-height: $input-height;
-  //   }
-
-  //   &.form-control-sm {
-  //     min-height: $input-height-sm;
-  //   }
-
-  //   &.form-control-lg {
-  //     min-height: $input-height-lg;
-  //   }
-  // }
-  // // stylelint-enable selector-no-qualifying-type
-
-  .form-control-color {
-    width: $form-color-width;
-    height: $input-height;
-    padding: $input-padding-y;
+  &[type="file"] {
+    overflow: hidden; // prevent pseudo element button overlap
 
     &:not(:disabled):not([readonly]) {
       cursor: pointer;
     }
+  }
 
-    &::-moz-color-swatch {
-      border: 0 !important; // stylelint-disable-line declaration-no-important
-      @include border-radius($input-border-radius);
+  // Customize the `:focus` state to imitate native WebKit styles.
+  &:focus {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-focus-box-shadow;
     }
+  }
 
-    &::-webkit-color-swatch {
-      border: 0 !important; // stylelint-disable-line declaration-no-important
-      @include border-radius($input-border-radius);
-    }
+  &::-webkit-date-and-time-value {
+    // On Android Chrome, form-control's "width: 100%" makes the input width too small
+    // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
+    //
+    // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small
+    // Tested under iOS 16.2 / Safari 16.2
+    min-width: 85px; // Seems to be a good minimum safe width
 
-    &.form-control-sm { height: $input-height-sm; }
-    &.form-control-lg { height: $input-height-lg; }
+    // Add some height to date inputs on iOS
+    // https://github.com/twbs/bootstrap/issues/23307
+    // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
+    // Multiply line-height by 1em if it has no unit
+    height: if(math.unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
+
+    // Android Chrome type="date" is taller than the other inputs
+    // because of "margin: 1px 24px 1px 4px" inside the shadow DOM
+    // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109
+    margin: 0;
+  }
+
+  // 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;
+    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+    opacity: 1;
+  }
+
+  // Disabled inputs
+  //
+  // HTML5 says that controls under a fieldset > legend:first-child won't be
+  // disabled if the fieldset is disabled. Due to implementation difficulty, we
+  // don't honor that edge case; we style them as disabled anyway.
+  &:disabled {
+    color: $input-disabled-color;
+    background-color: $input-disabled-bg;
+    border-color: $input-disabled-border-color;
+    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+    opacity: 1;
+  }
+
+  // File input buttons theming
+  &::file-selector-button {
+    padding: $input-padding-y $input-padding-x;
+    margin: (-$input-padding-y) (-$input-padding-x);
+    margin-inline-end: $input-padding-x;
+    color: $form-file-button-color;
+    @include gradient-bg($form-file-button-bg);
+    pointer-events: none;
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+    border-inline-end-width: $input-border-width;
+    border-radius: 0; // stylelint-disable-line property-disallowed-list
+    @include transition($btn-transition);
+  }
+
+  &:hover:not(:disabled):not([readonly])::file-selector-button {
+    background-color: $form-file-button-hover-bg;
   }
 }
+
+// Readonly controls as plain text
+//
+// Apply class to a readonly input to make it appear like regular plain
+// text (without any border, background color, focus indicator)
+
+.form-control-plaintext {
+  display: block;
+  width: 100%;
+  padding: $input-padding-y 0;
+  margin-bottom: 0; // match inputs if this class comes on inputs with default margins
+  line-height: $input-line-height;
+  color: $input-plaintext-color;
+  background-color: transparent;
+  border: solid transparent;
+  border-width: $input-border-width 0;
+
+  &:focus {
+    outline: 0;
+  }
+
+  &.form-control-sm,
+  &.form-control-lg {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// Repeated in `_input_group.scss` to avoid Sass extend issues.
+
+.form-control-sm {
+  min-height: $input-height-sm;
+  padding: $input-padding-y-sm $input-padding-x-sm;
+  @include font-size($input-font-size-sm);
+  @include border-radius($input-border-radius-sm);
+
+  &::file-selector-button {
+    padding: $input-padding-y-sm $input-padding-x-sm;
+    margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
+    margin-inline-end: $input-padding-x-sm;
+  }
+}
+
+.form-control-lg {
+  min-height: $input-height-lg;
+  padding: $input-padding-y-lg $input-padding-x-lg;
+  @include font-size($input-font-size-lg);
+  @include border-radius($input-border-radius-lg);
+
+  &::file-selector-button {
+    padding: $input-padding-y-lg $input-padding-x-lg;
+    margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
+    margin-inline-end: $input-padding-x-lg;
+  }
+}
+
+// Make sure textareas don't shrink too much when resized
+// https://github.com/twbs/bootstrap/pull/29124
+// stylelint-disable selector-no-qualifying-type
+textarea {
+  &.form-control {
+    min-height: $input-height;
+  }
+
+  &.form-control-sm {
+    min-height: $input-height-sm;
+  }
+
+  &.form-control-lg {
+    min-height: $input-height-lg;
+  }
+}
+// stylelint-enable selector-no-qualifying-type
+
+.form-control-color {
+  width: $form-color-width;
+  height: $input-height;
+  padding: $input-padding-y;
+
+  &:not(:disabled):not([readonly]) {
+    cursor: pointer;
+  }
+
+  &::-moz-color-swatch {
+    border: 0 !important; // stylelint-disable-line declaration-no-important
+    @include border-radius($input-border-radius);
+  }
+
+  &::-webkit-color-swatch {
+    border: 0 !important; // stylelint-disable-line declaration-no-important
+    @include border-radius($input-border-radius);
+  }
+
+  &.form-control-sm { height: $input-height-sm; }
+  &.form-control-lg { height: $input-height-lg; }
+}

scss/forms/_form-range.scss

@@ -1,117 +1,97 @@
-@use "../config" as *;
-@use "../colors" as *;
 @use "../variables" as *;
 @use "../mixins/border-radius" as *;
 @use "../mixins/box-shadow" as *;
 @use "../mixins/transition" as *;
 @use "../mixins/gradients" as *;
-@use "form-variables" as *;
 
-// scss-docs-start form-range-variables
-$form-range-track-width:          100% !default;
-$form-range-track-height:         .5rem !default;
-$form-range-track-cursor:         pointer !default;
-$form-range-track-bg:             var(--#{$prefix}secondary-bg) !default;
-$form-range-track-border-radius:  1rem !default;
-$form-range-track-box-shadow:     var(--#{$prefix}box-shadow-inset) !default;
+// Range
+//
+// Style range inputs the same across browsers. Vendor-specific rules for pseudo
+// elements cannot be mixed. As such, there are no shared styles for focus or
+// active states on prefixed selectors.
 
-$form-range-thumb-width:                   1rem !default;
-$form-range-thumb-height:                  $form-range-thumb-width !default;
-$form-range-thumb-bg:                      $component-active-bg !default;
-$form-range-thumb-border:                  0 !default;
-$form-range-thumb-border-radius:           1rem !default;
-$form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
-$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:             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
+.form-range {
+  width: 100%;
+  height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
+  padding: 0; // Need to reset padding
+  appearance: none;
+  background-color: transparent;
 
-@layer forms {
-  .form-range {
-    width: 100%;
-    height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
-    padding: 0; // Need to reset padding
+  &:focus {
+    outline: 0;
+
+    // Pseudo-elements must be split across multiple rulesets to have an effect.
+    // No box-shadow() mixin for focus accessibility.
+    &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
+    &::-moz-range-thumb     { box-shadow: $form-range-thumb-focus-box-shadow; }
+  }
+
+  &::-moz-focus-outer {
+    border: 0;
+  }
+
+  &::-webkit-slider-thumb {
+    width: $form-range-thumb-width;
+    height: $form-range-thumb-height;
+    margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
     appearance: none;
-    background-color: transparent;
+    @include gradient-bg($form-range-thumb-bg);
+    border: $form-range-thumb-border;
+    @include border-radius($form-range-thumb-border-radius);
+    @include box-shadow($form-range-thumb-box-shadow);
+    @include transition($form-range-thumb-transition);
 
-    &:focus {
-      outline: 0;
-
-      // Pseudo-elements must be split across multiple rulesets to have an effect.
-      // No box-shadow() mixin for focus accessibility.
-      &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
-      &::-moz-range-thumb     { box-shadow: $form-range-thumb-focus-box-shadow; }
+    &:active {
+      @include gradient-bg($form-range-thumb-active-bg);
     }
+  }
 
-    &::-moz-focus-outer {
-      border: 0;
+  &::-webkit-slider-runnable-track {
+    width: $form-range-track-width;
+    height: $form-range-track-height;
+    color: transparent; // Why?
+    cursor: $form-range-track-cursor;
+    background-color: $form-range-track-bg;
+    border-color: transparent;
+    @include border-radius($form-range-track-border-radius);
+    @include box-shadow($form-range-track-box-shadow);
+  }
+
+  &::-moz-range-thumb {
+    width: $form-range-thumb-width;
+    height: $form-range-thumb-height;
+    appearance: none;
+    @include gradient-bg($form-range-thumb-bg);
+    border: $form-range-thumb-border;
+    @include border-radius($form-range-thumb-border-radius);
+    @include box-shadow($form-range-thumb-box-shadow);
+    @include transition($form-range-thumb-transition);
+
+    &:active {
+      @include gradient-bg($form-range-thumb-active-bg);
     }
+  }
+
+  &::-moz-range-track {
+    width: $form-range-track-width;
+    height: $form-range-track-height;
+    color: transparent;
+    cursor: $form-range-track-cursor;
+    background-color: $form-range-track-bg;
+    border-color: transparent; // Firefox specific?
+    @include border-radius($form-range-track-border-radius);
+    @include box-shadow($form-range-track-box-shadow);
+  }
+
+  &:disabled {
+    pointer-events: none;
 
     &::-webkit-slider-thumb {
-      width: $form-range-thumb-width;
-      height: $form-range-thumb-height;
-      margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
-      appearance: none;
-      @include gradient-bg($form-range-thumb-bg);
-      border: $form-range-thumb-border;
-      @include border-radius($form-range-thumb-border-radius);
-      @include box-shadow($form-range-thumb-box-shadow);
-      @include transition($form-range-thumb-transition);
-
-      &:active {
-        @include gradient-bg($form-range-thumb-active-bg);
-      }
-    }
-
-    &::-webkit-slider-runnable-track {
-      width: $form-range-track-width;
-      height: $form-range-track-height;
-      color: transparent; // Why?
-      cursor: $form-range-track-cursor;
-      background-color: $form-range-track-bg;
-      border-color: transparent;
-      @include border-radius($form-range-track-border-radius);
-      @include box-shadow($form-range-track-box-shadow);
+      background-color: $form-range-thumb-disabled-bg;
     }
 
     &::-moz-range-thumb {
-      width: $form-range-thumb-width;
-      height: $form-range-thumb-height;
-      appearance: none;
-      @include gradient-bg($form-range-thumb-bg);
-      border: $form-range-thumb-border;
-      @include border-radius($form-range-thumb-border-radius);
-      @include box-shadow($form-range-thumb-box-shadow);
-      @include transition($form-range-thumb-transition);
-
-      &:active {
-        @include gradient-bg($form-range-thumb-active-bg);
-      }
-    }
-
-    &::-moz-range-track {
-      width: $form-range-track-width;
-      height: $form-range-track-height;
-      color: transparent;
-      cursor: $form-range-track-cursor;
-      background-color: $form-range-track-bg;
-      border-color: transparent; // Firefox specific?
-      @include border-radius($form-range-track-border-radius);
-      @include box-shadow($form-range-track-box-shadow);
-    }
-
-    &:disabled {
-      pointer-events: none;
-
-      &::-webkit-slider-thumb {
-        background-color: $form-range-thumb-disabled-bg;
-      }
-
-      &::-moz-range-thumb {
-        background-color: $form-range-thumb-disabled-bg;
-      }
+      background-color: $form-range-thumb-disabled-bg;
     }
   }
 }

scss/forms/_form-select.scss

@@ -0,0 +1,88 @@
+@use "../config" as *;
+@use "../variables" as *;
+@use "../vendor/rfs" as *;
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+@use "../mixins/transition" as *;
+@use "../mixins/color-mode" as *;
+
+// Select
+//
+// Replaces the browser default select with a custom one, mostly pulled from
+// 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;
+  font-family: $form-select-font-family;
+  @include font-size($form-select-font-size);
+  font-weight: $form-select-font-weight;
+  line-height: $form-select-line-height;
+  color: $form-select-color;
+  appearance: none;
+  background-color: $form-select-bg;
+  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;
+  border: $form-select-border-width solid $form-select-border-color;
+  @include border-radius($form-select-border-radius, 0);
+  @include box-shadow($form-select-box-shadow);
+  @include transition($form-select-transition);
+
+  &:focus {
+    border-color: $form-select-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $form-select-focus-box-shadow;
+    }
+  }
+
+  &[multiple],
+  &[size]:not([size="1"]) {
+    padding-right: $form-select-padding-x;
+    background-image: none;
+  }
+
+  &:disabled {
+    color: $form-select-disabled-color;
+    background-color: $form-select-disabled-bg;
+    border-color: $form-select-disabled-border-color;
+  }
+
+  // Remove outline from select box in FF
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 $form-select-color;
+  }
+}
+
+.form-select-sm {
+  padding-top: $form-select-padding-y-sm;
+  padding-bottom: $form-select-padding-y-sm;
+  padding-left: $form-select-padding-x-sm;
+  @include font-size($form-select-font-size-sm);
+  @include border-radius($form-select-border-radius-sm);
+}
+
+.form-select-lg {
+  padding-top: $form-select-padding-y-lg;
+  padding-bottom: $form-select-padding-y-lg;
+  padding-left: $form-select-padding-x-lg;
+  @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)};
+    }
+  }
+}

scss/forms/_form-text.scss

@@ -1,22 +1,13 @@
-@use "../config" as *;
 @use "../variables" as *;
 @use "../vendor/rfs" as *;
-@use "form-variables" as *;
+//
+// Form text
+//
 
-// scss-docs-start form-text-variables
-$form-text-margin-top:  .25rem !default;
-$form-text-font-size:   $small-font-size !default;
-$form-text-font-style:  null !default;
-$form-text-font-weight: null !default;
-$form-text-color:       var(--#{$prefix}secondary-color) !default;
-// scss-docs-end form-text-variables
-
-@layer forms {
-  .form-text {
-    margin-top: $form-text-margin-top;
-    @include font-size($form-text-font-size);
-    font-style: $form-text-font-style;
-    font-weight: $form-text-font-weight;
-    color: $form-text-color;
-  }
+.form-text {
+  margin-top: $form-text-margin-top;
+  @include font-size($form-text-font-size);
+  font-style: $form-text-font-style;
+  font-weight: $form-text-font-weight;
+  color: $form-text-color;
 }

scss/forms/_form-variables.scss

@@ -1,165 +0,0 @@
-@use "../config" as *;
-@use "../colors" as *;
-@use "../variables" as *;
-
-$control-min-height: 2.5rem !default;
-$control-min-height-sm: 2rem !default;
-$control-min-height-lg: 3rem !default;
-$control-padding-y: .375rem !default;
-$control-padding-x: .75rem !default;
-$control-font-size: $font-size-base !default;
-$control-line-height: $line-height-base !default;
-$control-color: var(--#{$prefix}color-body) !default;
-$control-bg: var(--#{$prefix}bg-body) !default;
-$control-border-width: var(--#{$prefix}border-width) !default;
-$control-border-color: var(--#{$prefix}border-color) !default;
-$control-border-radius: var(--#{$prefix}border-radius) !default;
-
-$control-padding-y-sm: .25rem !default;
-$control-padding-x-sm: .5rem !default;
-$control-font-size-sm: $font-size-sm !default;
-$control-line-height-sm: $line-height-sm !default;
-$control-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
-
-$control-padding-y-lg: .5rem !default;
-$control-padding-x-lg: 1rem !default;
-$control-font-size-lg: $font-size-lg !default;
-$control-line-height-lg: $line-height-lg !default;
-$control-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
-
-$control-select-indicator-color:       var(--#{$prefix}gray-600) !default;
-$control-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$control-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
-$control-select-bg-position:           right $control-padding-x center !default;
-$control-select-bg-size:               16px 12px !default;
-
-$control-select-indicator-color-dark:  #fff !default;
-$control-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='#{$control-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
-
-
-// scss-docs-start input-btn-variables
-$input-btn-padding-y:         .375rem !default;
-$input-btn-padding-x:         .75rem !default;
-// $input-btn-font-family:       null !default;
-$input-btn-font-size:         $font-size-base !default;
-$input-btn-line-height:       $line-height-base !default;
-
-// $input-btn-focus-width:         $focus-ring-width !default;
-// $input-btn-focus-color-opacity: $focus-ring-opacity !default;
-// $input-btn-focus-color:         $focus-ring-color !default;
-// $input-btn-focus-blur:          $focus-ring-blur !default;
-// $input-btn-focus-box-shadow:    $focus-ring-box-shadow !default;
-
-$input-btn-padding-y-sm:      .25rem !default;
-$input-btn-padding-x-sm:      .5rem !default;
-$input-btn-font-size-sm:      $font-size-sm !default;
-
-$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:      var(--#{$prefix}border-width) !default;
-// scss-docs-end input-btn-variables
-
-// scss-docs-start form-input-variables
-$input-padding-y:                       $input-btn-padding-y !default;
-$input-padding-x:                       $input-btn-padding-x !default;
-// $input-font-family:                     $input-btn-font-family !default;
-$input-font-size:                       $input-btn-font-size !default;
-// $input-font-weight:                     $font-weight-base !default;
-$input-line-height:                     $input-btn-line-height !default;
-
-$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
-$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
-$input-font-size-sm:                    $input-btn-font-size-sm !default;
-
-$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:                              var(--#{$prefix}bg-body) !default;
-$input-disabled-color:                  null !default;
-$input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
-$input-disabled-border-color:           null !default;
-
-$input-color:                           var(--#{$prefix}color-body) !default;
-$input-border-color:                    var(--#{$prefix}border-color) !default;
-$input-border-width:                    var(--#{$prefix}border-width) !default;
-$input-box-shadow:                      var(--#{$prefix}box-shadow-inset) !default;
-
-$input-border-radius:                   var(--#{$prefix}border-radius) !default;
-$input-border-radius-sm:                var(--#{$prefix}border-radius-sm) !default;
-$input-border-radius-lg:                var(--#{$prefix}border-radius-lg) !default;
-
-$input-focus-bg:                        $input-bg !default;
-$input-focus-border-color:              var(--#{$prefix}primary-border) !default;
-$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:               var(--#{$prefix}secondary-color) !default;
-$input-plaintext-color:                 var(--#{$prefix}color-body) !default;
-
-$input-height-border:                   calc(#{$input-border-width} * 2) !default;
-
-$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;
-$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5) !default;
-
-// $input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
-// $input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
-// $input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
-$input-height:                          2.5rem !default;
-$input-height-sm:                       2rem !default;
-$input-height-lg:                       3rem !default;
-
-$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-$form-color-width:                      3rem !default;
-// scss-docs-end form-input-variables
-
-// scss-docs-start form-file-variables
-$form-file-button-color:          $input-color !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-feedback-variables
-$form-feedback-margin-top:          .5rem !default;
-$form-feedback-font-size:           $font-size-sm !default;
-$form-feedback-font-style:          null !default;
-$form-feedback-valid-color:         var(--#{$prefix}success) !default;
-$form-feedback-invalid-color:       var(--#{$prefix}danger) !default;
-
-$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
-$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>") !default;
-$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
-$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
-// scss-docs-end form-feedback-variables
-
-// scss-docs-start form-validation-colors
-$form-valid-color:                  $form-feedback-valid-color !default;
-$form-valid-border-color:           $form-feedback-valid-color !default;
-$form-invalid-color:                $form-feedback-invalid-color !default;
-$form-invalid-border-color:         $form-feedback-invalid-color !default;
-// scss-docs-end form-validation-colors
-
-// scss-docs-start form-validation-states
-$form-validation-states: (
-  "valid": (
-    "color": var(--#{$prefix}form-valid-color),
-    "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}form-valid-border-color),
-  ),
-  "invalid": (
-    "color": var(--#{$prefix}form-invalid-color),
-    "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}form-invalid-border-color),
-  )
-) !default;
-// scss-docs-end form-validation-states

scss/forms/_input-group.scss

@@ -1,149 +1,138 @@
 @use "sass:map";
 @use "sass:string";
-@use "../config" as *;
-@use "../colors" as *;
 @use "../variables" as *;
 @use "../vendor/rfs" as *;
 @use "../mixins/border-radius" as *;
-@use "form-variables" as *;
 
-// scss-docs-start input-group-variables
-$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:                  var(--#{$prefix}tertiary-bg) !default;
-$input-group-addon-border-color:        $input-border-color !default;
-// scss-docs-end input-group-variables
+//
+// Base styles
+//
 
-@layer forms {
-  .input-group {
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap; // For form validation feedback
+  align-items: stretch;
+  width: 100%;
+
+  > .form-control,
+  > .form-select,
+  > .form-floating {
+    position: relative; // For focus state's z-index
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
+  }
+
+  // Bring the "active" form control to the top of surrounding elements
+  > .form-control:focus,
+  > .form-select:focus,
+  > .form-floating:focus-within {
+    z-index: 5;
+  }
+
+  // Ensure buttons are always above inputs for more visually pleasing borders.
+  // This isn't needed for `.input-group-text` since it shares the same border-color
+  // as our inputs.
+  .btn {
     position: relative;
-    display: flex;
-    flex-wrap: wrap; // For form validation feedback
-    align-items: stretch;
-    width: 100%;
+    z-index: 2;
 
-    > .form-control,
-    > .form-select,
-    > .form-floating {
-      position: relative; // For focus state's z-index
-      flex: 1 1 auto;
-      width: 1%;
-      min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
-    }
-
-    // Bring the "active" form control to the top of surrounding elements
-    > .form-control:focus,
-    > .form-select:focus,
-    > .form-floating:focus-within {
+    &:focus {
       z-index: 5;
     }
-
-    // Ensure buttons are always above inputs for more visually pleasing borders.
-    // This isn't needed for `.input-group-text` since it shares the same border-color
-    // as our inputs.
-    .btn {
-      position: relative;
-      z-index: 2;
-
-      &:focus {
-        z-index: 5;
-      }
-    }
-  }
-
-
-  // Textual addons
-  //
-  // Serves as a catch-all element for any text or radio/checkbox input you wish
-  // to prepend or append to an input.
-
-  .input-group-text {
-    display: flex;
-    align-items: center;
-    padding: $input-group-addon-padding-y $input-group-addon-padding-x;
-    @include font-size($input-font-size); // Match inputs
-    // font-weight: $input-group-addon-font-weight;
-    line-height: $input-line-height;
-    color: $input-group-addon-color;
-    text-align: center;
-    white-space: nowrap;
-    background-color: $input-group-addon-bg;
-    border: $input-border-width solid $input-group-addon-border-color;
-    @include border-radius($input-border-radius);
-  }
-
-
-  // Sizing
-  //
-  // Remix the default form control sizing classes into new ones for easier
-  // manipulation.
-
-  .input-group-lg > .form-control,
-  .input-group-lg > .form-select,
-  .input-group-lg > .input-group-text,
-  .input-group-lg > .btn {
-    padding: $input-padding-y-lg $input-padding-x-lg;
-    @include font-size($input-font-size-lg);
-    @include border-radius($input-border-radius-lg);
-  }
-
-  .input-group-sm > .form-control,
-  .input-group-sm > .form-select,
-  .input-group-sm > .input-group-text,
-  .input-group-sm > .btn {
-    padding: $input-padding-y-sm $input-padding-x-sm;
-    @include font-size($input-font-size-sm);
-    @include border-radius($input-border-radius-sm);
-  }
-
-  .input-group-lg > .form-select,
-  .input-group-sm > .form-select {
-    // mdo-do: need to revisit this
-    // padding-right: $form-select-padding-x + $form-select-indicator-padding;
-  }
-
-
-  // Rounded corners
-  //
-  // These rulesets must come after the sizing ones to properly override sm and lg
-  // border-radius values when extending. They're more specific than we'd like
-  // with the `.input-group >` part, but without it, we cannot override the sizing.
-
-  // stylelint-disable-next-line no-duplicate-selectors
-  .input-group {
-    &:not(.has-validation) {
-      > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
-      > .dropdown-toggle:nth-last-child(n + 3),
-      > .form-floating:not(:last-child) > .form-control,
-      > .form-floating:not(:last-child) > .form-select {
-        @include border-end-radius(0);
-      }
-    }
-
-    &.has-validation {
-      > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
-      > .dropdown-toggle:nth-last-child(n + 4),
-      > .form-floating:nth-last-child(n + 3) > .form-control,
-      > .form-floating:nth-last-child(n + 3) > .form-select {
-        @include border-end-radius(0);
-      }
-    }
-
-    $validation-messages: "";
-    @each $state in map.keys($form-validation-states) {
-      $validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
-    }
-
-    > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-      margin-inline-start: calc(-1 * #{$input-border-width});
-      @include border-start-radius(0);
-    }
-
-    > .form-floating:not(:first-child) > .form-control,
-    > .form-floating:not(:first-child) > .form-select {
-      @include border-start-radius(0);
-    }
+  }
+}
+
+
+// Textual addons
+//
+// Serves as a catch-all element for any text or radio/checkbox input you wish
+// to prepend or append to an input.
+
+.input-group-text {
+  display: flex;
+  align-items: center;
+  padding: $input-group-addon-padding-y $input-group-addon-padding-x;
+  @include font-size($input-font-size); // Match inputs
+  font-weight: $input-group-addon-font-weight;
+  line-height: $input-line-height;
+  color: $input-group-addon-color;
+  text-align: center;
+  white-space: nowrap;
+  background-color: $input-group-addon-bg;
+  border: $input-border-width solid $input-group-addon-border-color;
+  @include border-radius($input-border-radius);
+}
+
+
+// Sizing
+//
+// Remix the default form control sizing classes into new ones for easier
+// manipulation.
+
+.input-group-lg > .form-control,
+.input-group-lg > .form-select,
+.input-group-lg > .input-group-text,
+.input-group-lg > .btn {
+  padding: $input-padding-y-lg $input-padding-x-lg;
+  @include font-size($input-font-size-lg);
+  @include border-radius($input-border-radius-lg);
+}
+
+.input-group-sm > .form-control,
+.input-group-sm > .form-select,
+.input-group-sm > .input-group-text,
+.input-group-sm > .btn {
+  padding: $input-padding-y-sm $input-padding-x-sm;
+  @include font-size($input-font-size-sm);
+  @include border-radius($input-border-radius-sm);
+}
+
+.input-group-lg > .form-select,
+.input-group-sm > .form-select {
+  padding-right: $form-select-padding-x + $form-select-indicator-padding;
+}
+
+
+// Rounded corners
+//
+// These rulesets must come after the sizing ones to properly override sm and lg
+// border-radius values when extending. They're more specific than we'd like
+// with the `.input-group >` part, but without it, we cannot override the sizing.
+
+// stylelint-disable-next-line no-duplicate-selectors
+.input-group {
+  &:not(.has-validation) {
+    > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+    > .dropdown-toggle:nth-last-child(n + 3),
+    > .form-floating:not(:last-child) > .form-control,
+    > .form-floating:not(:last-child) > .form-select {
+      @include border-end-radius(0);
+    }
+  }
+
+  &.has-validation {
+    > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
+    > .dropdown-toggle:nth-last-child(n + 4),
+    > .form-floating:nth-last-child(n + 3) > .form-control,
+    > .form-floating:nth-last-child(n + 3) > .form-select {
+      @include border-end-radius(0);
+    }
+  }
+
+  $validation-messages: "";
+  @each $state in map.keys($form-validation-states) {
+    $validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
+  }
+
+  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
+    margin-left: calc(-1 * #{$input-border-width});
+    @include border-start-radius(0);
+  }
+
+  > .form-floating:not(:first-child) > .form-control,
+  > .form-floating:not(:first-child) > .form-select {
+    @include border-start-radius(0);
   }
 }

scss/forms/_labels.scss

@@ -1,47 +1,38 @@
 @use "../variables" as *;
 @use "../vendor/rfs" as *;
-@use "form-variables" as *;
+//
+// Labels
+//
 
-// scss-docs-start form-label-variables
-$form-label-margin-bottom: .5rem !default;
-$form-label-font-size:     null !default;
-$form-label-font-style:    null !default;
-$form-label-font-weight:   null !default;
-$form-label-color:         null !default;
-// scss-docs-end form-label-variables
-
-
-@layer forms {
-  .form-label {
-    margin-bottom: $form-label-margin-bottom;
-    @include font-size($form-label-font-size);
-    font-style: $form-label-font-style;
-    font-weight: $form-label-font-weight;
-    color: $form-label-color;
-  }
-
-  // For use with horizontal and inline forms, when you need the label (or legend)
-  // text to align with the form controls.
-  .col-form-label {
-    padding-top: add($input-padding-y, $input-border-width);
-    padding-bottom: add($input-padding-y, $input-border-width);
-    margin-bottom: 0; // Override the `<legend>` default
-    @include font-size(inherit); // Override the `<legend>` default
-    font-style: $form-label-font-style;
-    font-weight: $form-label-font-weight;
-    line-height: $input-line-height;
-    color: $form-label-color;
-  }
-
-  .col-form-label-lg {
-    padding-top: add($input-padding-y-lg, $input-border-width);
-    padding-bottom: add($input-padding-y-lg, $input-border-width);
-    @include font-size($input-font-size-lg);
-  }
-
-  .col-form-label-sm {
-    padding-top: add($input-padding-y-sm, $input-border-width);
-    padding-bottom: add($input-padding-y-sm, $input-border-width);
-    @include font-size($input-font-size-sm);
-  }
+.form-label {
+  margin-bottom: $form-label-margin-bottom;
+  @include font-size($form-label-font-size);
+  font-style: $form-label-font-style;
+  font-weight: $form-label-font-weight;
+  color: $form-label-color;
+}
+
+// For use with horizontal and inline forms, when you need the label (or legend)
+// text to align with the form controls.
+.col-form-label {
+  padding-top: add($input-padding-y, $input-border-width);
+  padding-bottom: add($input-padding-y, $input-border-width);
+  margin-bottom: 0; // Override the `<legend>` default
+  @include font-size(inherit); // Override the `<legend>` default
+  font-style: $form-label-font-style;
+  font-weight: $form-label-font-weight;
+  line-height: $input-line-height;
+  color: $form-label-color;
+}
+
+.col-form-label-lg {
+  padding-top: add($input-padding-y-lg, $input-border-width);
+  padding-bottom: add($input-padding-y-lg, $input-border-width);
+  @include font-size($input-font-size-lg);
+}
+
+.col-form-label-sm {
+  padding-top: add($input-padding-y-sm, $input-border-width);
+  padding-bottom: add($input-padding-y-sm, $input-border-width);
+  @include font-size($input-font-size-sm);
 }

scss/forms/_radio.scss

@@ -1,77 +0,0 @@
-@use "../config" as *;
-@use "../colors" as *;
-@use "../variables" as *;
-@use "../functions" as *;
-@use "../vendor/rfs" as *;
-@use "../mixins/border-radius" as *;
-@use "../mixins/box-shadow" as *;
-@use "../mixins/color-mode" as *;
-@use "../mixins/focus-ring" as *;
-@use "../mixins/transition" as *;
-@use "form-variables" as *;
-
-// scss-docs-start radio-variables
-$radio-border-color: var(--#{$prefix}border-color) !default;
-$radio-checked-bg: var(--#{$prefix}primary-base) !default;
-$radio-checked-border-color: $radio-checked-bg !default;
-$radio-disabled-bg: var(--#{$prefix}bg-3) !default;
-$radio-disabled-opacity: .65 !default;
-// scss-docs-end radio-variables
-
-@layer forms {
-  b-radiogroup {
-    display: flex;
-    gap: var(--#{$prefix}gap, .5rem);
-    align-items: var(--#{$prefix}align-items, start);
-
-    .description {
-      color: var(--#{$prefix}secondary-text);
-    }
-  }
-
-  .radio {
-    // scss-docs-start radio-css-variables
-    --#{$prefix}radio-bg: transparent;
-    --#{$prefix}radio-border-color: #{$radio-border-color};
-    --#{$prefix}radio-checked-bg: #{$radio-checked-bg};
-    --#{$prefix}radio-checked-border-color: #{$radio-checked-border-color};
-    --#{$prefix}radio-disabled-bg: #{$radio-disabled-bg};
-    --#{$prefix}radio-disabled-opacity: #{$radio-disabled-opacity};
-    // scss-docs-end radio-css-variables
-
-    position: relative;
-    flex-shrink: 0;
-    width: 1rem;
-    height: 1rem;
-    margin-block: .125rem;
-    appearance: none;
-    background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-bg));
-    border: 1px solid var(--#{$prefix}theme-bg, var(--#{$prefix}radio-border-color));
-    // stylelint-disable-next-line property-disallowed-list
-    border-radius: 50%;
-
-    &:checked {
-      color: var(--#{$prefix}theme-contrast, var(--#{$prefix}primary-contrast));
-      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-bg));
-      border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-border-color));
-
-      &::before {
-        position: absolute;
-        inset: .25rem;
-        content: "";
-        background-color: currentcolor;
-        // stylelint-disable-next-line property-disallowed-list
-        border-radius: 50%;
-      }
-    }
-
-    &:disabled {
-      --#{$prefix}radio-bg: var(--#{$prefix}radio-disabled-bg);
-
-      ~ label {
-        color: var(--#{$prefix}secondary-text);
-        cursor: default;
-      }
-    }
-  }
-}

scss/forms/_switch.scss

@@ -1,91 +0,0 @@
-@use "../config" as *;
-@use "../colors" as *;
-@use "../variables" as *;
-@use "../functions" as *;
-@use "../vendor/rfs" as *;
-@use "../mixins/border-radius" as *;
-@use "../mixins/box-shadow" as *;
-@use "../mixins/color-mode" as *;
-@use "../mixins/focus-ring" as *;
-@use "../mixins/transition" as *;
-@use "form-variables" as *;
-
-@layer forms {
-  .switch {
-    // scss-docs-start switch-css-variables
-    --#{$prefix}switch-height: 1.25rem;
-    --#{$prefix}switch-width: calc(var(--#{$prefix}switch-height) * 1.5);
-    --#{$prefix}switch-padding: .0625rem;
-    --#{$prefix}switch-bg: var(--#{$prefix}secondary-bg);
-    --#{$prefix}switch-border-width: var(--#{$prefix}border-width);
-    --#{$prefix}switch-border-color: var(--#{$prefix}border-color);
-    --#{$prefix}switch-indicator-bg: var(--#{$prefix}white);
-    --#{$prefix}switch-checked-bg: var(--#{$prefix}primary-base);
-    --#{$prefix}switch-checked-border-color: var(--#{$prefix}switch-checked-bg);
-    --#{$prefix}switch-checked-indicator-bg: var(--#{$prefix}white);
-    --#{$prefix}switch-disabled-bg: var(--#{$prefix}secondary-bg);
-    --#{$prefix}switch-disabled-indicator-bg: var(--#{$prefix}secondary-text);
-    // scss-docs-end switch-css-variables
-
-    position: relative;
-    display: flex;
-    flex-shrink: 0;
-    align-items: stretch;
-    justify-content: flex-start;
-    width: var(--#{$prefix}switch-width);
-    height: var(--#{$prefix}switch-height);
-    padding: var(--#{$prefix}switch-padding);
-    background-color: var(--#{$prefix}switch-bg);
-    border: var(--#{$prefix}switch-border-width) solid var(--#{$prefix}switch-border-color);
-    // stylelint-disable-next-line property-disallowed-list
-    border-radius: 10rem;
-    box-shadow: inset 0 1px 2px rgba($black, .05);
-    // stylelint-disable-next-line property-disallowed-list
-    transition: .15s ease-in-out;
-    transition-property: padding-inline-start, background-color;
-
-    &::before {
-      flex-shrink: 0;
-      width: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2) - var(--#{$prefix}switch-border-width) * 2);
-      height: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2) - var(--#{$prefix}switch-border-width) * 2);
-      // width: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2));
-      // height: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2));
-      content: "";
-      background-color: var(--#{$prefix}switch-indicator-bg);
-      // stylelint-disable-next-line property-disallowed-list
-      border-radius: 50%;
-      box-shadow: 0 1px 2px rgba($black, .1);
-    }
-
-    input {
-      position: absolute;
-      inset: 0;
-      appearance: none;
-      background-color: transparent;
-    }
-
-    &:has(input:checked) {
-      padding-inline-start: calc(var(--#{$prefix}switch-height) / 2 + var(--#{$prefix}switch-padding));
-      background-color: var(--#{$prefix}switch-checked-bg);
-      border-color: var(--#{$prefix}switch-checked-border-color);
-    }
-
-    &:has(input:disabled) {
-      --#{$prefix}switch-bg: var(--#{$prefix}switch-disabled-bg);
-      --#{$prefix}switch-indicator-bg: var(--#{$prefix}switch-disabled-indicator-bg);
-
-      &::before { opacity: .4; }
-
-      ~ label {
-        color: var(--#{$prefix}secondary-text);
-        cursor: default;
-      }
-    }
-  }
-  .switch-sm {
-    --#{$prefix}switch-height: 1em;
-  }
-  .switch-lg {
-    --#{$prefix}switch-height: 2em;
-  }
-}

scss/forms/_validation.scss

@@ -1,11 +1,8 @@
 @use "../config" as *;
 @use "../variables" as *;
-@use "../functions" as *;
 @use "../vendor/rfs" as *;
 @use "../mixins/border-radius" as *;
 @use "../mixins/box-shadow" as *;
-@use "form-variables" as *;
-@use "../tooltip" as *; // bring in tooltip variables
 
 // Form validation
 //
@@ -76,7 +73,7 @@
       border-color: $border-color;
 
       @if $enable-validation-icons {
-        padding-inline-end: $input-height-inner;
+        padding-right: $input-height-inner;
         background-image: escape-svg($icon);
         background-repeat: no-repeat;
         background-position: right $input-height-inner-quarter center;
@@ -99,37 +96,37 @@
   textarea.form-control {
     @include form-validation-state-selector($state) {
       @if $enable-validation-icons {
-        padding-inline-end: $input-height-inner;
+        padding-right: $input-height-inner;
         background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
       }
     }
   }
 
-  // .form-select {
-  //   @include form-validation-state-selector($state) {
-  //     border-color: $border-color;
+  .form-select {
+    @include form-validation-state-selector($state) {
+      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-position: $form-select-bg-position, $form-select-feedback-icon-position;
-  //         background-size: $form-select-bg-size, $form-select-feedback-icon-size;
-  //       }
-  //     }
+      @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-position: $form-select-bg-position, $form-select-feedback-icon-position;
+          background-size: $form-select-bg-size, $form-select-feedback-icon-size;
+        }
+      }
 
-  //     &:focus {
-  //       border-color: $border-color;
-  //       @if $enable-shadows {
-  //         @include box-shadow($form-select-box-shadow, $focus-box-shadow);
-  //       } @else {
-  //         // Avoid using mixin so we can pass custom focus shadow properly
-  //         box-shadow: $focus-box-shadow;
-  //       }
-  //     }
-  //   }
-  // }
+      &:focus {
+        border-color: $border-color;
+        @if $enable-shadows {
+          @include box-shadow($form-select-box-shadow, $focus-box-shadow);
+        } @else {
+          // Avoid using mixin so we can pass custom focus shadow properly
+          box-shadow: $focus-box-shadow;
+        }
+      }
+    }
+  }
 
   .form-control-color {
     @include form-validation-state-selector($state) {
@@ -158,7 +155,7 @@
   }
   .form-check-inline .form-check-input {
     ~ .#{$state}-feedback {
-      margin-inline-start: .5em;
+      margin-left: .5em;
     }
   }
 
@@ -178,10 +175,9 @@
 }
 // scss-docs-end form-validation-mixins
 
-@layer forms {
-  // scss-docs-start form-validation-states-loop
-  @each $state, $data in $form-validation-states {
-    @include form-validation-state($state, $data...);
-  }
-  // scss-docs-end form-validation-states-loop
+
+// scss-docs-start form-validation-states-loop
+@each $state, $data in $form-validation-states {
+  @include form-validation-state($state, $data...);
 }
+// scss-docs-end form-validation-states-loop

scss/forms/index.scss

@@ -1,9 +1,8 @@
 @forward "labels";
 @forward "form-text";
 @forward "form-control";
-@forward "check";
-@forward "radio";
-@forward "switch";
+@forward "form-select";
+@forward "form-check";
 @forward "form-range";
 @forward "floating-labels";
 @forward "input-group";

scss/helpers/_color-bg.scss

@@ -1,16 +1,11 @@
+@use "../colors" as *;
 @use "../config" as *;
 @use "../variables" as *;
-@use "../colors" as *;
-@use "../theme" as *;
 
-@layer helpers {
-  // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
-  @each $color, $value in $new-theme-colors {
-    .text-bg-#{$color} {
-      color: var(--#{$prefix}#{$color}-text);
-      --#{$prefix}bg: var(--#{$prefix}#{$color}-bg-subtle);
-      // color: color-contrast($value);
-      // background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1));
-    }
+// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
+@each $color, $value in $theme-colors {
+  .text-bg-#{$color} {
+    color: color-contrast($value) if($enable-important-utilities, !important, null);
+    background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
 }

scss/helpers/_colored-links.scss

@@ -1,22 +1,20 @@
 @use "../config" as *;
 @use "../colors" as *;
-@use "../theme" as *;
 @use "../variables" as *;
 
+// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @layer helpers {
-  @each $color, $value in $new-theme-colors {
+  @each $color, $value in $theme-colors {
     .link-#{$color} {
-      --#{$prefix}link-color: var(--#{$prefix}#{$color}-text);
-      // text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}-text), transparent var(--#{$prefix}link-underline-opacity));
+      color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
+      text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-underline-opacity));
 
       @if $link-shade-percentage != 0 {
         &:hover,
         &:focus {
-          --#{$prefix}link-color: var(--#{$prefix}#{$color}-text-emphasis);
-          --#{$prefix}link-hover-color: var(--#{$prefix}#{$color}-text-emphasis);
-          // $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
-          // color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
-          // text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}-text), transparent var(--#{$prefix}link-underline-opacity));
+          $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
+          color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
+          text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
         }
       }
     }

scss/helpers/_focus-ring.scss

@@ -1,7 +1,7 @@
 @use "../config" as *;
 
-@layer helpers {
-  .focus-ring:focus-visible {
-    outline: var(--#{$prefix}focus-ring);
-  }
+.focus-ring:focus {
+  outline: 0;
+  // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
+  box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
 }

scss/helpers/_icon-link.scss

@@ -2,30 +2,28 @@
 @use "../variables" as *;
 @use "../mixins/transition" as *;
 
-@layer helpers {
-  .icon-link {
-    display: inline-flex;
-    gap: $icon-link-gap;
-    align-items: center;
-    text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
-    text-underline-offset: $icon-link-underline-offset;
-    backface-visibility: hidden;
+.icon-link {
+  display: inline-flex;
+  gap: $icon-link-gap;
+  align-items: center;
+  text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
+  text-underline-offset: $icon-link-underline-offset;
+  backface-visibility: hidden;
 
-    > .bi {
-      flex-shrink: 0;
-      width: $icon-link-icon-size;
-      height: $icon-link-icon-size;
-      fill: currentcolor;
-      @include transition($icon-link-icon-transition);
-    }
+  > .bi {
+    flex-shrink: 0;
+    width: $icon-link-icon-size;
+    height: $icon-link-icon-size;
+    fill: currentcolor;
+    @include transition($icon-link-icon-transition);
   }
+}
 
-  .icon-link-hover {
-    &:hover,
-    &:focus-visible {
-      > .bi {
-        transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
-      }
+.icon-link-hover {
+  &:hover,
+  &:focus-visible {
+    > .bi {
+      transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
     }
   }
 }

scss/helpers/_position.scss

@@ -3,39 +3,39 @@
 @use "../variables" as *;
 @use "../layout/breakpoints" as *;
 
-@layer helpers {
-  .fixed-top {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: $zindex-fixed;
-  }
+// Shorthand
 
-  .fixed-bottom {
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: $zindex-fixed;
-  }
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+}
 
-  // Responsive sticky top and bottom
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+}
 
-      .sticky#{$infix}-top {
-        position: sticky;
-        top: 0;
-        z-index: $zindex-sticky;
-      }
+// Responsive sticky top and bottom
+@each $breakpoint in map.keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-      .sticky#{$infix}-bottom {
-        position: sticky;
-        bottom: 0;
-        z-index: $zindex-sticky;
-      }
+    .sticky#{$infix}-top {
+      position: sticky;
+      top: 0;
+      z-index: $zindex-sticky;
+    }
+
+    .sticky#{$infix}-bottom {
+      position: sticky;
+      bottom: 0;
+      z-index: $zindex-sticky;
     }
   }
 }

scss/helpers/_stacks.scss

@@ -1,28 +1,15 @@
-// stylelint-disable selector-no-qualifying-type
-
-@layer helpers {
-  // scss-docs-start stacks
-  .hstack,
-  b-hstack {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    align-self: stretch;
-  }
-  .hstack-start,
-  b-hstack[align="start"] {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    align-self: stretch;
-  }
-
-  .vstack,
-  b-vstack {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    align-self: stretch;
-  }
-  // scss-docs-end stacks
+// scss-docs-start stacks
+.hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
 }
+
+.vstack {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-self: stretch;
+}
+// scss-docs-end stacks

scss/helpers/_stretched-link.scss

@@ -1,15 +1,17 @@
 @use "../variables" as *;
 
-@layer helpers {
-  .stretched-link {
-    &::#{$stretched-link-pseudo-element} {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: $stretched-link-z-index;
-      content: "";
-    }
+//
+// Stretched link
+//
+
+.stretched-link {
+  &::#{$stretched-link-pseudo-element} {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $stretched-link-z-index;
+    content: "";
   }
 }

scss/helpers/_text-truncation.scss

@@ -1,7 +1,7 @@
 @use "../mixins/text-truncate" as *;
+// Text truncation
+//
 
-@layer helpers {
-  .text-truncate {
-    @include text-truncate();
-  }
+.text-truncate {
+  @include text-truncate();
 }

scss/helpers/_visually-hidden.scss

@@ -1,8 +1,10 @@
 @use "../mixins/visually-hidden" as *;
 
-@layer helpers {
-  .visually-hidden,
-  .visually-hidden-focusable:not(:focus):not(:focus-within) {
-    @include visually-hidden();
-  }
+//
+// Visually hidden
+//
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  @include visually-hidden();
 }

scss/helpers/_vr.scss

@@ -1,12 +1,10 @@
 @use "../variables" as *;
 
-@layer helpers {
-  .vr {
-    display: inline-block;
-    align-self: stretch;
-    width: $vr-border-width;
-    min-height: 1em;
-    background-color: currentcolor;
-    opacity: $hr-opacity;
-  }
+.vr {
+  display: inline-block;
+  align-self: stretch;
+  width: $vr-border-width;
+  min-height: 1em;
+  background-color: currentcolor;
+  opacity: $hr-opacity;
 }

scss/layout/_breakpoints.scss

@@ -6,7 +6,7 @@
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
 //
-//    (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px)
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
 //
 // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
 
@@ -14,48 +14,47 @@
 //
 //    >> breakpoint-next(sm)
 //    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl 2xl))
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
 //    md
 @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
   $n: list.index($breakpoint-names, $name);
   @if not $n {
-    @error "breakpoint `#{$name}` not found in `#{$breakpoint-names}`";
+    @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
   }
   @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map.get($breakpoints, $name);
   @return if($min != 0, $min, null);
 }
 
-// Maximum breakpoint width for range media queries.
-// Returns the breakpoint value to use as an upper bound in range queries.
+// Maximum breakpoint width.
+// The maximum value is reduced by 0.02px to work around the limitations of
+// `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
 //
-//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
-//    576px
-//    >> breakpoint-max(xxl, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
-//    null
+//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
+//    767.98px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
-  @if $name == null {
-    @return null;
-  }
   $max: map.get($breakpoints, $name);
-  @return if($max and $max > 0, $max, null);
+  @return if($max and $max > 0, $max - .02, null);
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
 // Useful for making responsive utilities.
 //
-//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    "-sm"
 @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
   @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
@@ -66,7 +65,7 @@
 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
   @if $min {
-    @media (width >= $min) {
+    @media (min-width: $min) {
       @content;
     }
   } @else {
@@ -79,7 +78,7 @@
 @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
   $max: breakpoint-max($name, $breakpoints);
   @if $max {
-    @media (width < $max) {
+    @media (max-width: $max) {
       @content;
     }
   } @else {
@@ -94,7 +93,7 @@
   $max: breakpoint-max($upper, $breakpoints);
 
   @if $min != null and $max != null {
-    @media (width >= $min) and (width < $max) {
+    @media (min-width: $min) and (max-width: $max) {
       @content;
     }
   } @else if $max == null {
@@ -117,7 +116,7 @@
   $max:  breakpoint-max($next, $breakpoints);
 
   @if $min != null and $max != null {
-    @media (width >= $min) and (width < $max) {
+    @media (min-width: $min) and (max-width: $max) {
       @content;
     }
   } @else if $max == null {

scss/layout/_containers.scss

@@ -10,43 +10,43 @@
   --#{$prefix}gutter-x: #{$gutter};
   --#{$prefix}gutter-y: 0;
   width: 100%;
-  padding-inline: calc(var(--#{$prefix}gutter-x) * .5);
-  margin-inline: auto;
+  padding-right: calc(var(--#{$prefix}gutter-x) * .5);
+  padding-left: calc(var(--#{$prefix}gutter-x) * .5);
+  margin-right: auto;
+  margin-left: auto;
 }
 
-@layer layout {
-  @if $enable-container-classes {
-    // Single container class with breakpoint max-widths
-    .container,
-    // 100% wide container at all breakpoints
-    .container-fluid {
-      @include make-container();
+@if $enable-container-classes {
+  // Single container class with breakpoint max-widths
+  .container,
+  // 100% wide container at all breakpoints
+  .container-fluid {
+    @include make-container();
+  }
+
+  // Responsive containers that are 100% wide until a breakpoint
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    .container-#{$breakpoint} {
+      @extend .container-fluid;
     }
 
-    // Responsive containers that are 100% wide until a breakpoint
-    @each $breakpoint, $container-max-width in $container-max-widths {
-      .container-#{$breakpoint} {
-        @extend .container-fluid;
+    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+      %responsive-container-#{$breakpoint} {
+        max-width: $container-max-width;
       }
 
-      @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
-        %responsive-container-#{$breakpoint} {
-          max-width: $container-max-width;
-        }
+      // Extend each breakpoint which is smaller or equal to the current breakpoint
+      $extend-breakpoint: true;
 
-        // Extend each breakpoint which is smaller or equal to the current breakpoint
-        $extend-breakpoint: true;
+      @each $name, $width in $grid-breakpoints {
+        @if ($extend-breakpoint) {
+          .container#{breakpoint-infix($name, $grid-breakpoints)} {
+            @extend %responsive-container-#{$breakpoint};
+          }
 
-        @each $name, $width in $grid-breakpoints {
-          @if ($extend-breakpoint) {
-            .container#{breakpoint-infix($name, $grid-breakpoints)} {
-              @extend %responsive-container-#{$breakpoint};
-            }
-
-            // Once the current breakpoint is reached, stop extending
-            @if ($breakpoint == $name) {
-              $extend-breakpoint: false;
-            }
+          // Once the current breakpoint is reached, stop extending
+          @if ($breakpoint == $name) {
+            $extend-breakpoint: false;
           }
         }
       }

scss/layout/_grid.scss

@@ -1,76 +1,83 @@
 @use "sass:map";
 @use "../config" as *;
-@use "../mixins/grid" as *;
 @use "breakpoints" as *;
 
 // mdo-do
 // - check gap utilities as replacement for gutter classes from v5
 
+// Row
+//
+// Rows contain your columns.
+
 :root {
   @each $name, $value in $grid-breakpoints {
     --#{$prefix}breakpoint-#{$name}: #{$value};
   }
 }
 
-@layer layout {
-  @if $enable-grid-classes {
-    .row {
-      @include make-row();
+.grid {
+  --#{$prefix}columns: #{$grid-columns};
+  --#{$prefix}rows: 1;
+  --#{$prefix}gap: #{$grid-gutter-width};
 
-      > * {
-        @include make-col-ready();
+  display: grid;
+  grid-template-rows: repeat(var(--#{$prefix}rows), 1fr);
+  grid-template-columns: repeat(var(--#{$prefix}columns), 1fr);
+  gap: var(--#{$prefix}gap);
+}
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+    @if $grid-columns > 0 {
+      @for $i from 1 through $grid-columns {
+        .col#{$infix}-#{$i} {
+          grid-column: auto / span $i;
+        }
+
+        .end#{$infix}-#{$i} {
+          grid-column-end: $i;
+        }
+      }
+
+      // Start with `1` because `0` is an invalid value.
+      // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+      @for $i from 1 through ($grid-columns - 1) {
+        .col-start#{$infix}-#{$i} {
+          grid-column-start: $i;
+        }
       }
     }
-
-    @include make-grid-columns();
   }
-
-  @if $enable-cssgrid {
-    .grid {
-      --#{$prefix}columns: #{$grid-columns};
-      --#{$prefix}rows: 1;
-      --#{$prefix}gap: #{$grid-gutter-width};
-
-      display: grid;
-      grid-template-rows: repeat(var(--#{$prefix}rows), 1fr);
-      grid-template-columns: repeat(var(--#{$prefix}columns), 1fr);
-      gap: var(--#{$prefix}gap);
-
-    }
-
-    @include make-cssgrid();
-  }
-
-  // mdo-do: add to utilities?
-  .grid-cols-subgrid {
-    grid-template-columns: subgrid;
-  }
-
-  .grid-fill {
-    --#{$prefix}gap: #{$grid-gutter-width};
-
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    grid-auto-flow: row;
-    gap: var(--#{$prefix}gap);
-  }
-
-  // .g-col-auto {
-  //   grid-column: auto;
-  // }
-
-  // mdo-do: add to utilities?
-  // .grid-cols-3 {
-  //   --#{$prefix}columns: 3;
-  // }
-  // .grid-cols-4 {
-  //   --#{$prefix}columns: 4;
-  // }
-  // .grid-cols-6 {
-  //   --#{$prefix}columns: 6;
-  // }
-
-  // .grid-full {
-  //   grid-column: 1 / -1;
-  // }
+}
+
+// mdo-do: add to utilities?
+.grid-cols-subgrid {
+  grid-template-columns: subgrid;
+}
+
+.grid-fill {
+  --#{$prefix}gap: #{$grid-gutter-width};
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  grid-auto-flow: row;
+  gap: var(--#{$prefix}gap);
+}
+
+// mdo-do: add to utilities?
+.g-col-auto {
+  grid-column: auto/auto;
+}
+
+// mdo-do: add to utilities?
+.grid-cols-3 {
+  --#{$prefix}columns: 3;
+}
+.grid-cols-4 {
+  --#{$prefix}columns: 4;
+}
+.grid-cols-6 {
+  --#{$prefix}columns: 6;
 }

scss/mixins/_border-radius.scss

@@ -32,53 +32,53 @@
 
 @mixin border-top-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-start-start-radius: valid-radius($radius);
-    border-start-end-radius: valid-radius($radius);
+    border-top-left-radius: valid-radius($radius);
+    border-top-right-radius: valid-radius($radius);
   }
 }
 
 @mixin border-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-start-end-radius: valid-radius($radius);
-    border-end-end-radius: valid-radius($radius);
+    border-top-right-radius: valid-radius($radius);
+    border-bottom-right-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-end-start-radius: valid-radius($radius);
-    border-end-end-radius: valid-radius($radius);
+    border-bottom-right-radius: valid-radius($radius);
+    border-bottom-left-radius: valid-radius($radius);
   }
 }
 
 @mixin border-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-start-start-radius: valid-radius($radius);
-    border-end-start-radius: valid-radius($radius);
+    border-top-left-radius: valid-radius($radius);
+    border-bottom-left-radius: valid-radius($radius);
   }
 }
 
 @mixin border-top-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-start-start-radius: valid-radius($radius);
+    border-top-left-radius: valid-radius($radius);
   }
 }
 
 @mixin border-top-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-start-end-radius: valid-radius($radius);
+    border-top-right-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-end-end-radius: valid-radius($radius);
+    border-bottom-right-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-end-start-radius: valid-radius($radius);
+    border-bottom-left-radius: valid-radius($radius);
   }
 }
 // scss-docs-end border-radius-mixins