bundlewatch again

* new colors

* WIP: Redo some theming

* Fix sass warnings on unquoted map keys

* Revamp colors, update docs, couple new utils

* Remove key attributes

* Bump bundlewatch

* Bundlewatch

* Fix some things up

* Clean up tables, more color changes

* Fix more table color generation, simplify markup with new Table component prop

* More docs improvements, including utilities API, and checkbox and radio theme variants

.bundlewatch.config.json

@@ -2,15 +2,15 @@
   "files": [
     {
       "path": "./dist/css/bootstrap-grid.css",
-      "maxSize": "7.5 kB"
+      "maxSize": "9.00 kB"
     },
     {
       "path": "./dist/css/bootstrap-grid.min.css",
-      "maxSize": "6.75 kB"
+      "maxSize": "8.25 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.css",
-      "maxSize": "4.5 kB"
+      "maxSize": "5.0 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.min.css",
@@ -18,7 +18,7 @@
     },
     {
       "path": "./dist/css/bootstrap-utilities.css",
-      "maxSize": "13.0 kB"
+      "maxSize": "13.5 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "35.75 kB"
+      "maxSize": "37.5 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "31.5 kB"
+      "maxSize": "33.75 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

.cspell.json

@@ -21,6 +21,7 @@
     "callout",
     "callouts",
     "camelCase",
+    "checkgroup",
     "clearfix",
     "Codesniffer",
     "combinator",

.github/workflows/docs.yml

@@ -30,8 +30,6 @@ jobs:
           node-version: "${{ env.NODE }}"
           cache: npm
 
-      - run: java -version
-
       - name: Install npm dependencies
         run: npm ci
 
@@ -39,7 +37,7 @@ jobs:
         run: npm run docs-build
 
       - name: Validate HTML
-        run: npm run docs-vnu
+        run: npm run docs-html-validate
 
       - name: Run linkinator
         uses: JustinBeckwith/linkinator-action@3d5ba091319fa7b0ac14703761eebb7d100e6f6d # v1.11.0

.markdownlint.json

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

build/html-validate.mjs

@@ -0,0 +1,104 @@
+#!/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/vnu-jar.mjs

@@ -1,66 +0,0 @@
-#!/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)
-})

package.json

@@ -77,8 +77,8 @@
     "docs": "npm-run-all docs-build docs-lint",
     "docs-build": "npm run astro-build",
     "docs-compile": "npm run docs-build",
-    "docs-vnu": "node build/vnu-jar.mjs",
-    "docs-lint": "npm-run-all docs-prettier-check docs-vnu",
+    "docs-html-validate": "node build/html-validate.mjs",
+    "docs-lint": "npm-run-all docs-prettier-check docs-html-validate",
     "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",
@@ -143,6 +143,7 @@
     "github-slugger": "^2.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",
@@ -179,7 +180,6 @@
     "stylelint-config-twbs-bootstrap": "^16.1.0",
     "terser": "^5.44.0",
     "unist-util-visit": "^5.0.0",
-    "vnu-jar": "24.10.17",
     "zod": "^4.1.9"
   },
   "files": [

scss/_alert.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "config" as *;
+@use "theme" as *;
 @use "variables" as *;
 @use "mixins/border-radius" as *;
 
@@ -69,9 +70,9 @@ $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers widt
 
   // scss-docs-start alert-modifiers
   // Generate contextual modifier classes for colorizing the alert
-  @each $state in map.keys($theme-colors) {
+  @each $state in map.keys($new-theme-colors) {
     .alert-#{$state} {
-      --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
+      --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text);
       --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
       --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
       --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);

scss/_colors.scss

@@ -1,282 +1,61 @@
-$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;
+@use "config" as *;
 
-$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;
+// stylelint-disable hue-degree-notation, @stylistic/number-leading-zero
 
-$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;
+// 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;
 
-$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;
+$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;
 
-$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;
+:root {
+  @each $color, $hue in $hues {
+    --#{$prefix}#{$color}-025: color-mix(in srgb, #fff 94%, #{$hue});
+    --#{$prefix}#{$color}-050: color-mix(in srgb, #fff 90%, #{$hue});
+    --#{$prefix}#{$color}-100: color-mix(in srgb, #fff 80%, #{$hue});
+    --#{$prefix}#{$color}-200: color-mix(in srgb, #fff 60%, #{$hue});
+    --#{$prefix}#{$color}-300: color-mix(in srgb, #fff 40%, #{$hue});
+    --#{$prefix}#{$color}-400: color-mix(in srgb, #fff 20%, #{$hue});
+    --#{$prefix}#{$color}-500: #{$hue};
+    --#{$prefix}#{$color}-600: color-mix(in srgb, #000 16%, #{$hue});
+    --#{$prefix}#{$color}-700: color-mix(in srgb, #000 32%, #{$hue});
+    --#{$prefix}#{$color}-800: color-mix(in srgb, #000 48%, #{$hue});
+    --#{$prefix}#{$color}-900: color-mix(in srgb, #000 64%, #{$hue});
+    --#{$prefix}#{$color}-950: color-mix(in srgb, #000 76%, #{$hue});
+    --#{$prefix}#{$color}-975: color-mix(in srgb, #000 88%, #{$hue});
+  }
+}
 
 $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

@@ -52,9 +52,9 @@ $grid-breakpoints: (
   xs: 0,
   sm: 576px,
   md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px
+  lg: 1024px,
+  xl: 1280px,
+  2xl: 1536px
 ) !default;
 // scss-docs-end grid-breakpoints
 
@@ -80,8 +80,8 @@ $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
-  xl: 1140px,
-  xxl: 1320px
+  xl: 1200px,
+  2xl: 1440px
 ) !default;
 // scss-docs-end container-max-widths
 

scss/_dropdown.scss

@@ -38,14 +38,14 @@ $dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color) !default;
 $dropdown-item-padding-y:           $spacer * .25 !default;
 $dropdown-item-padding-x:           $spacer !default;
 
-$dropdown-header-color:             $gray-600 !default;
+$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
 
 // scss-docs-start dropdown-dark-variables
-$dropdown-dark-color:               $gray-300 !default;
-$dropdown-dark-bg:                  $gray-800 !default;
+$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;
@@ -54,8 +54,8 @@ $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: $gray-500 !default;
-$dropdown-dark-header-color:        $gray-500 !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
 
 @layer components {

scss/_functions.scss

@@ -207,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(rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
+  @return color-mix(in srgb, rgba($foreground, 1), $background, color.opacity($foreground) * 100%);
 }
 
 // scss-docs-start color-functions

scss/_list-group.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "colors" as *;
+@use "theme" as *;
 @use "config" as *;
 @use "variables" as *;
 @use "mixins/border-radius" as *;
@@ -212,7 +213,7 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
   // 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) {
+  @each $state in map.keys($new-theme-colors) {
     .list-group-item-#{$state} {
       --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
       --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);

scss/_maps.scss

@@ -1,180 +0,0 @@
-// @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/_navbar.scss

@@ -280,7 +280,7 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
           }
 
           .navbar-toggler {
-            display: none;
+            display: none !important; // stylelint-disable-line declaration-no-important
           }
 
           .offcanvas {

scss/_progress.scss

@@ -14,7 +14,7 @@ $progress-bg:                       var(--#{$prefix}secondary-bg) !default;
 $progress-border-radius:            var(--#{$prefix}border-radius) !default;
 $progress-box-shadow:               var(--#{$prefix}box-shadow-inset) !default;
 $progress-bar-color:                $white !default;
-$progress-bar-bg:                   $primary !default;
+$progress-bar-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

scss/_root.scss

@@ -9,71 +9,40 @@
 @use "forms/form-variables" as *;
 
 // mdo-do: do we need theme?
-@layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities;
+@layer colors, theme, config, root, reboot, layout, content, forms, components, custom, helpers, utilities;
 
 :root {
   color-scheme: light dark;
 
-  @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};
-  }
-
+  // scss-docs-start root-theme-variables
+  // Generate semantic theme colors
   @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}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-fgs {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-borders {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
   --#{$prefix}black: #{$black};
   --#{$prefix}white: #{$white};
+  // scss-docs-end root-theme-variables
 }
 
 :root,
 [data-bs-theme="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)};
 
@@ -91,6 +60,11 @@
     --#{$prefix}root-font-size: #{$font-size-root};
   }
   --#{$prefix}body-font-family: #{meta.inspect($font-family-base)};
+
+  --#{$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);
+
   @include rfs($font-size-base, --#{$prefix}body-font-size);
   --#{$prefix}body-font-weight: #{$font-weight-base};
   --#{$prefix}body-line-height: #{$line-height-base};
@@ -165,7 +139,7 @@
   --#{$prefix}border-radius-sm: #{$border-radius-sm};
   --#{$prefix}border-radius-lg: #{$border-radius-lg};
   --#{$prefix}border-radius-xl: #{$border-radius-xl};
-  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
+  --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
   --#{$prefix}border-radius-pill: #{$border-radius-pill};
   // scss-docs-end root-border-radius-var
 
@@ -218,26 +192,14 @@
     --#{$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};
+    // --#{$prefix}code-color: #{$code-color-dark}; // removed in v6
     --#{$prefix}highlight-color: #{$mark-color-dark};
     --#{$prefix}highlight-bg: #{$mark-bg-dark};
 

scss/_theme.scss

@@ -36,9 +36,8 @@ $new-theme-colors: (
     "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, var(--#{$prefix}blue-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-300)) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}white)
   ),
   "accent": (
@@ -47,9 +46,8 @@ $new-theme-colors: (
     "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, var(--#{$prefix}indigo-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-300)) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}white)
   ),
   "danger": (
@@ -58,9 +56,8 @@ $new-theme-colors: (
     "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, var(--#{$prefix}red-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-300)) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}white)
   ),
   "warning": (
@@ -69,9 +66,8 @@ $new-theme-colors: (
     "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, var(--#{$prefix}yellow-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-300)) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}gray-900)
   ),
   "success": (
@@ -80,9 +76,8 @@ $new-theme-colors: (
     "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)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-300)) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}white)
   ),
   "info": (
@@ -91,20 +86,28 @@ $new-theme-colors: (
     "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, var(--#{$prefix}cyan-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-300)) 50%, var(--#{$prefix}bg)),
     "contrast": var(--#{$prefix}gray-900)
   ),
+  "emphasis": (
+    "base": var(--#{$prefix}gray-900),
+    "text": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
+    "bg": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
+    "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-950)),
+    "bg-muted": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
+    "border": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)) 50%, var(--#{$prefix}bg)),
+    "contrast": light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900))
+  ),
   "secondary": (
     "base": var(--#{$prefix}gray-300),
     "text": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
     "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, var(--#{$prefix}gray-500) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-300)) 50%, var(--#{$prefix}bg)),
     "contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
   )
 ) !default;
@@ -112,10 +115,10 @@ $new-theme-colors: (
 
 // mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
 $theme-bgs: (
-  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))),
+  null: 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)),
   "white": var(--#{$prefix}white),
   "black": var(--#{$prefix}black),
   "transparent": transparent,
@@ -123,10 +126,10 @@ $theme-bgs: (
 ) !default;
 
 $theme-fgs: (
-  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-400)),
+  null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-050)),
+  "1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-100)),
+  "2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-200)),
+  "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-300)),
   "white": var(--#{$prefix}white),
   "black": var(--#{$prefix}black),
   "inherit": inherit,
@@ -135,7 +138,7 @@ $theme-fgs: (
 $theme-borders: (
   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), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900))),
+  "subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)),
   "emphasized": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-600)),
 ) !default;
 

scss/_tooltip.scss

@@ -9,7 +9,7 @@
 $tooltip-font-size:                 $font-size-sm !default;
 $tooltip-max-width:                 200px !default;
 $tooltip-color:                     var(--#{$prefix}body-bg) !default;
-$tooltip-bg:                        var(--#{$prefix}emphasis-color) !default;
+$tooltip-bg:                        var(--#{$prefix}body-color) !default;
 $tooltip-border-radius:             var(--#{$prefix}border-radius) !default;
 $tooltip-opacity:                   .9 !default;
 $tooltip-padding-y:                 $spacer * .25 !default;

scss/_utilities.scss

@@ -96,7 +96,7 @@ $utilities: map.merge(
       property: display,
       class: d,
       important: true,
-      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex flow-root none
+      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex contents flow-root none
     ),
     // scss-docs-end utils-display
     // scss-docs-start utils-shadow
@@ -355,6 +355,16 @@ $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,
@@ -399,6 +409,16 @@ $utilities: map.merge(
         stretch: stretch,
       )
     ),
+    "place-items": (
+      responsive: true,
+      property: place-items,
+      values: (
+        start: start,
+        end: end,
+        center: center,
+        stretch: stretch,
+      )
+    ),
     "order": (
       responsive: true,
       property: order,
@@ -873,8 +893,15 @@ $utilities: map.merge(
       property: z-index,
       class: z,
       values: $zindex-levels,
-    )
+    ),
     // scss-docs-end utils-zindex
+    // scss-docs-start utils-check-colors
+    "check-color": (
+      property: --#{$prefix}check-checked-bg --#{$prefix}check-checked-border-color --#{$prefix}radio-checked-bg --#{$prefix}radio-checked-border-color --#{$prefix}switch-checked-bg,
+      class: checked,
+      values: theme-color-values("bg")
+    )
+    // scss-docs-end utils-check-colors
   ),
   $utilities
 );

scss/_variables.scss

@@ -10,62 +10,29 @@
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
 // scss-docs-start theme-color-variables
-$primary:       $purple-500 !default;
-$secondary:     $gray-600 !default;
-$success:       $green-500 !default;
-$info:          $cyan-500 !default;
-$warning:       $yellow-500 !default;
-$danger:        $red-500 !default;
-$light:         $gray-100 !default;
-$dark:          $gray-900 !default;
+// $primary:       $blue-500 !default;
+// $secondary:     var(--#{$prefix}gray-600) !default;
+// $success:       $green-500 !default;
+// $info:          $cyan-500 !default;
+// $warning:       $yellow-500 !default;
+// $danger:        $red-500 !default;
+// $light:         var(--#{$prefix}gray-100) !default;
+// $dark:          var(--#{$prefix}gray-900) !default;
 // scss-docs-end theme-color-variables
 
 // scss-docs-start theme-colors-map
-$theme-colors: (
-  "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
-  "info":       $info,
-  "warning":    $warning,
-  "danger":     $danger,
-  "light":      $light,
-  "dark":       $dark
-) !default;
+// $theme-colors: (
+//   "primary":    $primary,
+//   "secondary":  $secondary,
+//   "success":    $success,
+//   "info":       $info,
+//   "warning":    $warning,
+//   "danger":     $danger,
+//   "light":      $light,
+//   "dark":       $dark
+// ) !default;
 // scss-docs-end theme-colors-map
 
-// // scss-docs-start theme-text-variables
-// $primary-text-emphasis:   shade-color($primary, 60%) !default;
-// $secondary-text-emphasis: shade-color($secondary, 60%) !default;
-// $success-text-emphasis:   shade-color($success, 60%) !default;
-// $info-text-emphasis:      shade-color($info, 60%) !default;
-// $warning-text-emphasis:   shade-color($warning, 60%) !default;
-// $danger-text-emphasis:    shade-color($danger, 60%) !default;
-// $light-text-emphasis:     $gray-700 !default;
-// $dark-text-emphasis:      $gray-700 !default;
-// // scss-docs-end theme-text-variables
-
-// // scss-docs-start theme-bg-subtle-variables
-// $primary-bg-subtle:       tint-color($primary, 80%) !default;
-// $secondary-bg-subtle:     tint-color($secondary, 80%) !default;
-// $success-bg-subtle:       tint-color($success, 80%) !default;
-// $info-bg-subtle:          tint-color($info, 80%) !default;
-// $warning-bg-subtle:       tint-color($warning, 80%) !default;
-// $danger-bg-subtle:        tint-color($danger, 80%) !default;
-// $light-bg-subtle:         color.mix($gray-100, $white) !default;
-// $dark-bg-subtle:          $gray-400 !default;
-// // scss-docs-end theme-bg-subtle-variables
-
-// // scss-docs-start theme-border-subtle-variables
-// $primary-border-subtle:   tint-color($primary, 60%) !default;
-// $secondary-border-subtle: tint-color($secondary, 60%) !default;
-// $success-border-subtle:   tint-color($success, 60%) !default;
-// $info-border-subtle:      tint-color($info, 60%) !default;
-// $warning-border-subtle:   tint-color($warning, 60%) !default;
-// $danger-border-subtle:    tint-color($danger, 60%) !default;
-// $light-border-subtle:     $gray-200 !default;
-// $dark-border-subtle:      $gray-500 !default;
-// // scss-docs-end theme-border-subtle-variables
-
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (
   ("<", "%3c"),
@@ -150,14 +117,14 @@ $position-values: (
 // Settings for the `<body>` element.
 
 $body-text-align:           null !default;
-$body-color:                $gray-900 !default;
+$body-color:                var(--#{$prefix}gray-900) !default;
 $body-bg:                   $white !default;
 
 $body-secondary-color:      rgba($body-color, .75) !default;
-$body-secondary-bg:         $gray-200 !default;
+$body-secondary-bg:         var(--#{$prefix}gray-200) !default;
 
 $body-tertiary-color:       rgba($body-color, .5) !default;
-$body-tertiary-bg:          $gray-100 !default;
+$body-tertiary-bg:          var(--#{$prefix}gray-100) !default;
 
 $body-emphasis-color:       $black !default;
 
@@ -165,10 +132,11 @@ $body-emphasis-color:       $black !default;
 //
 // Style anchor elements.
 
-$link-color:                              $primary !default;
+// $link-color:                              var !default;
 $link-decoration:                         underline !default;
+$link-underline-offset:                   .2em !default;
 $link-shade-percentage:                   20% !default;
-$link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
+// $link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
 $link-hover-decoration:                   null !default;
 
 $stretched-link-pseudo-element:           after !default;
@@ -204,7 +172,7 @@ $border-widths: (
   5: 5px
 ) !default;
 $border-style:                solid !default;
-$border-color:                $gray-300 !default;
+$border-color:                var(--#{$prefix}gray-200) !default;
 $border-color-translucent:    rgba($black, .175) !default;
 // scss-docs-end border-variables
 
@@ -213,7 +181,7 @@ $border-radius:               .375rem !default;
 $border-radius-sm:            .25rem !default;
 $border-radius-lg:            .5rem !default;
 $border-radius-xl:            1rem !default;
-$border-radius-xxl:           2rem !default;
+$border-radius-2xl:           2rem !default;
 $border-radius-pill:          50rem !default;
 // scss-docs-end border-radius-variables
 
@@ -224,17 +192,17 @@ $box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
 $box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
 // scss-docs-end box-shadow-variables
 
-$component-active-color:      $white !default;
-$component-active-bg:         $primary !default;
-
 // scss-docs-start focus-ring-variables
 $focus-ring-width:      .25rem !default;
 $focus-ring-opacity:    .25 !default;
-$focus-ring-color:      rgba($primary, $focus-ring-opacity) !default;
+$focus-ring-color:      var(--#{$prefix}primary-focus-ring) !default;
 $focus-ring-blur:       0 !default;
 $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
 // scss-docs-end focus-ring-variables
 
+$component-active-color:      var(--#{$prefix}primary-contrast) !default;
+$component-active-bg:         var(--#{$prefix}primary-bg) !default;
+
 $transition-base:             all .2s ease-in-out !default;
 $transition-fade:             opacity .15s linear !default;
 // scss-docs-start collapse-transition
@@ -266,8 +234,8 @@ $font-family-code:            var(--#{$prefix}font-monospace) !default;
 
 // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
 // $font-size-base affects the font size of the body text
-$font-size-root:              null !default;
-$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
+$font-size-root:              16px !default;
+$font-size-base:              14px !default; // Assumes the browser default, typically `16px`
 $font-size-sm:                $font-size-base * .875 !default;
 $font-size-lg:                $font-size-base * 1.25 !default;
 
@@ -341,7 +309,7 @@ $initialism-font-size:        $small-font-size !default;
 
 $blockquote-margin-y:         $spacer !default;
 $blockquote-font-size:        $font-size-base * 1.25 !default;
-$blockquote-footer-color:     $gray-600 !default;
+$blockquote-footer-color:     var(--#{$prefix}gray-600) !default;
 $blockquote-footer-font-size: $small-font-size !default;
 
 $hr-margin-y:                 $spacer !default;
@@ -365,7 +333,7 @@ $list-inline-padding:         .5rem !default;
 
 $mark-padding:                .1875em !default;
 $mark-color:                  $body-color !default;
-$mark-bg:                     $yellow-100 !default;
+$mark-bg:                     var(--#{$prefix}yellow-100) !default;
 // scss-docs-end type-variables
 
 
@@ -380,7 +348,7 @@ $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-width:         .25em !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;
@@ -430,9 +398,9 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color:     $gray-600 !default;
-$btn-link-color-contrast:     color-contrast($link-color) !default;
-$btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !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;
@@ -518,7 +486,7 @@ $modal-footer-border-width:         $modal-header-border-width !default;
 $modal-sm:                          300px !default;
 $modal-md:                          500px !default;
 $modal-lg:                          800px !default;
-$modal-xl:                          1140px !default;
+$modal-xl:                          1200px !default;
 
 $modal-fade-transform:              translate(0, -50px) !default;
 $modal-show-transform:              none !default;
@@ -546,8 +514,8 @@ $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
 
 // Code
 
-$code-font-size:                    $small-font-size !default;
-$code-color:                        $pink !default;
+$code-font-size:                    95% !default;
+$code-color:                        var(--#{$prefix}secondary-text) !default;
 
 $kbd-padding-y:                     .1875rem !default;
 $kbd-padding-x:                     .375rem !default;
@@ -566,37 +534,28 @@ $pre-color:                         null !default;
 //
 
 // scss-docs-start sass-dark-mode-vars
-$body-color-dark:                   $gray-300 !default;
-$body-bg-dark:                      $gray-900 !default;
+$body-color-dark:                   var(--#{$prefix}gray-200) !default;
+$body-bg-dark:                      var(--#{$prefix}gray-975) !default;
 $body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
-$body-secondary-bg-dark:            $gray-800 !default;
+$body-secondary-bg-dark:            var(--#{$prefix}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-tertiary-bg-dark:             color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900)) !default;
 $body-emphasis-color-dark:          $white !default;
-$border-color-dark:                 $gray-700 !default;
+$border-color-dark:                 var(--#{$prefix}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;
+$mark-bg-dark:                      var(--#{$prefix}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;
+$form-valid-color-dark:             var(--#{$prefix}green-300) !default;
+$form-valid-border-color-dark:      var(--#{$prefix}green-300) !default;
+$form-invalid-color-dark:           var(--#{$prefix}red-300) !default;
+$form-invalid-border-color-dark:    var(--#{$prefix}red-300) !default;
 // scss-docs-end form-validation-colors-dark
 // scss-docs-end sass-dark-mode-vars

scss/bootstrap-grid.scss

@@ -27,9 +27,11 @@ $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
-@use "root" as *;
+@forward "root";
 
 // Helpers
 @forward "helpers";
 
 // Utilities
-@use "utilities" as *;
-@use "utilities/api";
+@forward "utilities";
+@forward "utilities/api";

scss/bootstrap.scss

@@ -1,40 +1,40 @@
-@use "banner";
+@forward "banner";
 
 // scss-docs-start import-stack
 // Global CSS variables, layer definitions, and configuration
-@use "root";
+@forward "root";
 
 // Subdir imports
-@use "content";
-@use "layout";
-@use "forms";
-@use "buttons";
+@forward "content";
+@forward "layout";
+@forward "forms";
+@forward "buttons";
 
 // Components
-@use "accordion";
-@use "alert";
-@use "badge";
-@use "breadcrumb";
-@use "card";
-@use "carousel";
-@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";
+@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";
 
 // Helpers
-@use "helpers";
+@forward "helpers";
 
 // Utilities
-@use "utilities/api";
+@forward "utilities/api";
 // scss-docs-end import-stack

scss/buttons/_button-variables.scss

@@ -33,9 +33,9 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color:     $gray-600 !default;
-$btn-link-color-contrast:     color-contrast($link-color) !default;
-$btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !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;

scss/buttons/_button.scss

@@ -1,7 +1,12 @@
 @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 "../theme" as *;
 @use "../functions" as *;
 @use "../vendor/rfs" as *;
 @use "../mixins/border-radius" as *;
@@ -11,67 +16,160 @@
 @use "../mixins/transition" as *;
 @use "button-variables" as *;
 
-// Button variants
-//
-// Easily pump out default styles, as well as :hover, :focus, :active,
-// and disabled options for all buttons
+// 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"
+    ),
+    "active": (
+      "bg": "bg-subtle",
+      "color": "text"
+    )
+  ),
+  "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
 
+
+// Helper function to get nested map values using dot notation
+@function get-nested-value($map, $keys) {
+  $value: $map;
+  @each $key in $keys {
+    @if type-of($value) == "map" {
+      $value: map-get($value, $key);
+    } @else {
+      @return null;
+    }
+  }
+  @return $value;
+}
+
+// Helper function to split dot notation string into list
+@function split-keys($key) {
+  $keys: ();
+  $parts: str-slice($key, 1);
+  @each $part in $parts {
+    $keys: append($keys, $part);
+  }
+  @return $keys;
+}
+
+// Main button style generator mixin
 // 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};
+@mixin button-variant($color, $variant) {
+  $variant-styles: map.get($button-variants, $variant);
+
+  @if $variant-styles {
+    // Base properties
+    @each $property, $value in map.get($variant-styles, "base") {
+      @if $value == "transparent" {
+        --#{$prefix}btn-#{$property}: transparent;
+      } @else {
+        --#{$prefix}btn-#{$property}: var(--#{$prefix}#{$color}-#{$value});
+      }
+    }
+
+    // Hover state
+    &:hover {
+      @each $property, $value in map.get($variant-styles, "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}#{$color}-#{$first-value}) 50%, var(--#{$prefix}#{$color}-#{$second-value}));
+        } @else if $value == "bg-subtle" {
+          --#{$prefix}btn-hover-#{$property}: var(--#{$prefix}#{$color}-#{$value});
+        } @else {
+          --#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .95) calc(c * 1.1) h);
+        }
+      }
+    }
+
+    &:focus-visible {
+      outline-color: var(--#{$prefix}#{$color}-focus-ring);
+    }
+
+    // Active state
+    &:active,
+    &.active {
+      @each $property, $value in map.get($variant-styles, "active") {
+        @if $value == "transparent" {
+          --#{$prefix}btn-active-#{$property}: transparent;
+        } @else if $value == "bg-subtle" {
+          --#{$prefix}btn-active-#{$property}: var(--#{$prefix}#{$color}-#{$value});
+        } @else {
+          --#{$prefix}btn-active-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .9) calc(c * 1.15) h);
+        }
+      }
+    }
+  }
 }
 // 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;
+// Generate all button variants
+@each $color, $_ in $new-theme-colors {
+  @each $variant, $_ in $button-variants {
+    .btn-#{$color}-#{$variant} {
+      @include button-variant($color, $variant);
+    }
+  }
 }
-// scss-docs-end btn-outline-variant-mixin
 
 // scss-docs-start btn-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
@@ -141,15 +239,11 @@
     }
 
     &:focus-visible {
-      color: var(--#{$prefix}btn-hover-color);
-      @include gradient-bg(var(--#{$prefix}btn-hover-bg));
-      border-color: var(--#{$prefix}btn-hover-border-color);
       @include focus-ring(true);
       --#{$prefix}focus-ring-offset: 1px;
     }
 
     .btn-check:focus-visible + & {
-      border-color: var(--#{$prefix}btn-hover-border-color);
       @include focus-ring(true);
     }
 
@@ -187,46 +281,6 @@
     }
   }
 
-
-  //
-  // 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
   //
@@ -279,4 +333,19 @@
   .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/content/_reboot.scss

@@ -33,7 +33,8 @@
 
   :root {
     @if $font-size-root != null {
-      @include font-size(var(--#{$prefix}root-font-size));
+      font-size: var(--#{$prefix}root-font-size);
+      // @include font-size(var(--#{$prefix}root-font-size));
     }
 
     @if $enable-smooth-scroll {
@@ -256,12 +257,13 @@
   // Links
 
   a {
-    color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
-    text-decoration: $link-decoration;
+    color: var(--#{$prefix}link-color);
+    text-decoration: var(--#{$prefix}link-decoration);
+    text-underline-offset: $link-underline-offset;
 
     &:hover {
-      --#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
-      text-decoration: $link-hover-decoration;
+      color: var(--#{$prefix}link-hover-color);
+      text-decoration: var(--#{$prefix}link-hover-decoration);
     }
   }
 

scss/content/_tables.scss

@@ -3,6 +3,7 @@
 @use "sass:math";
 @use "../config" as *;
 @use "../colors" as *;
+@use "../theme" as *;
 @use "../variables" as *;
 @use "../functions" as *;
 @use "../layout/breakpoints" as *;
@@ -15,7 +16,7 @@ $table-cell-padding-x-sm:     .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 var(--#{$prefix}emphasis-color) !default;
+$table-color:                 var(--#{$prefix}body-color) !default;
 $table-bg:                    var(--#{$prefix}body-bg) !default;
 $table-accent-bg:             transparent !default;
 
@@ -23,15 +24,15 @@ $table-accent-bg:             transparent !default;
 
 $table-striped-color:         $table-color !default;
 $table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !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:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !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:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
+$table-hover-bg:              color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-hover-bg-factor)}, transparent) !default;
 
 $table-border-factor:         .2 !default;
 $table-border-width:          var(--#{$prefix}border-width) !default;
@@ -44,26 +45,17 @@ $table-group-separator-color: currentcolor !default;
 
 // $table-caption-color:         var(--#{$prefix}secondary-color) !default;
 
-$table-bg-scale:              -80% !default;
 // scss-docs-end table-variables
 
 // scss-docs-start table-loop
-$table-variants: (
-  "primary":    shift-color($primary, $table-bg-scale),
-  "secondary":  shift-color($secondary, $table-bg-scale),
-  "success":    shift-color($success, $table-bg-scale),
-  "info":       shift-color($info, $table-bg-scale),
-  "warning":    shift-color($warning, $table-bg-scale),
-  "danger":     shift-color($danger, $table-bg-scale),
-  "light":      $light,
-  "dark":       $dark,
-) !default;
+$table-variants: $new-theme-colors !default;
 // scss-docs-end table-loop
 
 // scss-docs-start table-variant
 @mixin table-variant($state, $background) {
   .table-#{$state} {
-    $color: color-contrast(opaque($body-bg, $background));
+    // $color: color-contrast(opaque($body-bg, $background));
+    $color: var(--#{$prefix}#{$state}-text);
     $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));
@@ -238,9 +230,24 @@ $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);
+  // scss-docs-start table-variants-loop
+  @each $color in map.keys($table-variants) {
+    .table-#{$color} {
+      --#{$prefix}table-color: var(--#{$prefix}#{$color}-text);
+      --#{$prefix}table-bg: var(--#{$prefix}#{$color}-bg-subtle);
+      --#{$prefix}table-border-color: var(--#{$prefix}#{$color}-border);
+      --#{$prefix}table-striped-bg: color-mix(in srgb, var(--#{$prefix}#{$color}-bg-subtle), var(--#{$prefix}table-color) #{math.percentage($table-striped-bg-factor)});
+      --#{$prefix}table-striped-color: var(--#{$prefix}table-color);
+      --#{$prefix}table-active-bg: color-mix(in srgb, var(--#{$prefix}#{$color}-bg-subtle), var(--#{$prefix}table-color) #{math.percentage($table-active-bg-factor)});
+      --#{$prefix}table-active-color: var(--#{$prefix}table-color);
+      --#{$prefix}table-hover-bg: color-mix(in srgb, var(--#{$prefix}#{$color}-bg-subtle), var(--#{$prefix}table-color) #{math.percentage($table-hover-bg-factor)});
+      --#{$prefix}table-hover-color: var(--#{$prefix}table-color);
+
+      color: var(--#{$prefix}table-color);
+      border-color: var(--#{$prefix}table-border-color);
+    }
   }
+  // scss-docs-end table-variants-loop
 
   // Responsive tables
   //

scss/forms/_check.scss

@@ -0,0 +1,100 @@
+@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}check-bg);
+      border: 1px solid var(--#{$prefix}check-border-color);
+      // stylelint-disable-next-line property-disallowed-list
+      border-radius: .25em;
+    }
+
+    :where(input:checked, input:indeterminate) {
+      background-color: var(--#{$prefix}check-checked-bg);
+      border-color: 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

@@ -15,7 +15,7 @@ $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:    $gray-600 !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
 

scss/forms/_form-check.scss

@@ -1,252 +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 form-check-variables
-$form-check-input-width:                  1em !default;
-$form-check-min-height:                   $font-size-base * $line-height-base !default;
-$form-check-padding-start:                $form-check-input-width + .5em !default;
-$form-check-margin-bottom:                .125rem !default;
-$form-check-label-color:                  null !default;
-$form-check-label-cursor:                 null !default;
-$form-check-transition:                   null !default;
-
-$form-check-input-active-filter:          brightness(90%) !default;
-
-$form-check-input-bg:                     $input-bg !default;
-$form-check-input-border:                 var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default;
-$form-check-input-border-radius:          .25em !default;
-$form-check-radio-border-radius:          50% !default;
-$form-check-input-focus-border:           $input-focus-border-color !default;
-$form-check-input-focus-box-shadow:       $focus-ring-box-shadow !default;
-
-$form-check-input-checked-color:          $component-active-color !default;
-$form-check-input-checked-bg-color:       $component-active-bg !default;
-$form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
-$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
-$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
-
-$form-check-input-indeterminate-color:          $component-active-color !default;
-$form-check-input-indeterminate-bg-color:       $component-active-bg !default;
-$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;
-$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
-
-$form-check-input-disabled-opacity:        .5 !default;
-$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity !default;
-$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity !default;
-
-$form-check-inline-margin-end:    1rem !default;
-// scss-docs-end form-check-variables
-
-// scss-docs-start form-switch-variables
-$form-switch-color:               rgba($black, .25) !default;
-$form-switch-width:               1.5em !default;
-$form-switch-padding-start:       $form-switch-width + .5em !default;
-$form-switch-bg-image:            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}'/></svg>") !default;
-$form-switch-border-radius:       $form-switch-width !default;
-$form-switch-transition:          background-position .15s ease-in-out !default;
-
-$form-switch-focus-color:         $input-focus-border-color !default;
-$form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
-
-$form-switch-checked-color:       $component-active-color !default;
-$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
-$form-switch-checked-bg-position: right center !default;
-// scss-docs-end form-switch-variables
-
-@layer forms {
-  .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-visible {
-      border-color: $form-check-input-focus-border;
-      @include focus-ring(true);
-      --#{$prefix}focus-ring-offset: 1px;
-      // 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,36 +1,45 @@
 @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 *;
 
-//
-// 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};
+
     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;
+    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: $input-border-width solid $input-border-color;
-
-    // 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);
-
+    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);
 
@@ -99,16 +108,17 @@
 
     // 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;
+      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: $input-border-width;
+      border-inline-end-width: var(--#{$prefix}control-border-width);
       border-radius: 0; // stylelint-disable-line property-disallowed-list
       @include transition($btn-transition);
     }
@@ -145,6 +155,28 @@
     }
   }
 
+  // stylelint-disable selector-no-qualifying-type
+  select.form-control {
+    padding-right: 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-right: 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
@@ -153,48 +185,40 @@
   // 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;
-    }
+    --#{$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 {
-    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;
-    }
+    --#{$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;
-    }
+  // // 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-sm {
+  //     min-height: $input-height-sm;
+  //   }
 
-    &.form-control-lg {
-      min-height: $input-height-lg;
-    }
-  }
-  // stylelint-enable selector-no-qualifying-type
+  //   &.form-control-lg {
+  //     min-height: $input-height-lg;
+  //   }
+  // }
+  // // stylelint-enable selector-no-qualifying-type
 
   .form-control-color {
     width: $form-color-width;

scss/forms/_form-select.scss

@@ -1,127 +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 form-select-variables
-$form-select-padding-y:             $input-padding-y !default;
-$form-select-padding-x:             $input-padding-x !default;
-$form-select-font-family:           $input-font-family !default;
-$form-select-font-size:             $input-font-size !default;
-$form-select-indicator-padding:     $form-select-padding-x * 3 !default; // Extra padding for background-image
-$form-select-font-weight:           $input-font-weight !default;
-$form-select-line-height:           $input-line-height !default;
-$form-select-color:                 $input-color !default;
-$form-select-bg:                    $input-bg !default;
-$form-select-disabled-color:        null !default;
-$form-select-disabled-bg:           $input-disabled-bg !default;
-$form-select-disabled-border-color: $input-disabled-border-color !default;
-$form-select-bg-position:           right $form-select-padding-x center !default;
-$form-select-bg-size:               16px 12px !default; // In pixels because image dimensions
-$form-select-indicator-color:       $gray-800 !default;
-$form-select-indicator:             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}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
-
-$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
-$form-select-feedback-icon-position:    center right $form-select-indicator-padding !default;
-$form-select-feedback-icon-size:        $input-height-inner-half $input-height-inner-half !default;
-
-$form-select-border-width:        $input-border-width !default;
-$form-select-border-color:        $input-border-color !default;
-$form-select-border-radius:       $input-border-radius !default;
-$form-select-box-shadow:          var(--#{$prefix}box-shadow-inset) !default;
-
-$form-select-focus-border-color:  $input-focus-border-color !default;
-$form-select-focus-width:         $input-focus-width !default;
-// $form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focus-color !default;
-
-$form-select-padding-y-sm:        $input-padding-y-sm !default;
-$form-select-padding-x-sm:        $input-padding-x-sm !default;
-$form-select-font-size-sm:        $input-font-size-sm !default;
-$form-select-border-radius-sm:    $input-border-radius-sm !default;
-
-$form-select-padding-y-lg:        $input-padding-y-lg !default;
-$form-select-padding-x-lg:        $input-padding-x-lg !default;
-$form-select-font-size-lg:        $input-font-size-lg !default;
-$form-select-border-radius-lg:    $input-border-radius-lg !default;
-
-$form-select-transition:          $input-transition !default;
-// scss-docs-end form-select-variables
-
-@layer forms {
-  .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-visible {
-      border-color: $form-select-focus-border-color;
-      @include focus-ring(true);
-    }
-
-    &[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-variables.scss

@@ -1,18 +1,53 @@
 @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}body-color) !default;
+$control-bg: var(--#{$prefix}body-bg) !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:  $body-color-dark !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-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-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;
@@ -22,15 +57,15 @@ $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;
+// $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-family:                     $input-btn-font-family !default;
 $input-font-size:                       $input-btn-font-size !default;
-$input-font-weight:                     $font-weight-base !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;
@@ -48,7 +83,7 @@ $input-disabled-border-color:           null !default;
 
 $input-color:                           var(--#{$prefix}body-color) !default;
 $input-border-color:                    var(--#{$prefix}border-color) !default;
-$input-border-width:                    $input-btn-border-width !default;
+$input-border-width:                    var(--#{$prefix}border-width) !default;
 $input-box-shadow:                      var(--#{$prefix}box-shadow-inset) !default;
 
 $input-border-radius:                   var(--#{$prefix}border-radius) !default;
@@ -70,9 +105,12 @@ $input-height-inner:                    add($input-line-height * 1em, $input-pad
 $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:                          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;
 

scss/forms/_input-group.scss

@@ -10,7 +10,7 @@
 // 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-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;
@@ -64,7 +64,7 @@ $input-group-addon-border-color:        $input-border-color !default;
     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;
+    // font-weight: $input-group-addon-font-weight;
     line-height: $input-line-height;
     color: $input-group-addon-color;
     text-align: center;

scss/forms/_radio.scss

@@ -0,0 +1,77 @@
+@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}radio-bg);
+    border: 1px solid var(--#{$prefix}radio-border-color);
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: 50%;
+
+    &:checked {
+      color: var(--#{$prefix}primary-contrast);
+      background-color: var(--#{$prefix}radio-checked-bg);
+      border-color: 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

@@ -0,0 +1,91 @@
+@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/index.scss

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

scss/helpers/_color-bg.scss

@@ -1,13 +1,16 @@
-@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 $theme-colors {
+  @each $color, $value in $new-theme-colors {
     .text-bg-#{$color} {
-      color: color-contrast($value);
-      background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1));
+      color: var(--#{$prefix}#{$color}-text);
+      background-color: var(--#{$prefix}#{$color}-bg-subtle);
+      // color: color-contrast($value);
+      // background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1));
     }
   }
 }

scss/helpers/_colored-links.scss

@@ -1,20 +1,22 @@
 @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 $theme-colors {
+  @each $color, $value in $new-theme-colors {
     .link-#{$color} {
-      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));
+      color: var(--#{$prefix}#{$color}-text);
+      // color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity));
+      text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}-text), transparent var(--#{$prefix}link-underline-opacity));
 
       @if $link-shade-percentage != 0 {
         &:hover,
         &:focus {
-          $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));
+          // $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));
         }
       }
     }

scss/helpers/_stacks.scss

@@ -1,13 +1,24 @@
+// stylelint-disable selector-no-qualifying-type
+
 @layer helpers {
   // scss-docs-start stacks
-  .hstack {
+  .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 {
+  .vstack,
+  b-vstack {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;

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: 992px, xl: 1200px, xxl: 1400px)
+//    (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px)
 //
 // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
 
@@ -14,9 +14,9 @@
 //
 //    >> breakpoint-next(sm)
 //    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
 //    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl 2xl))
 //    md
 @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
   $n: list.index($breakpoint-names, $name);
@@ -28,7 +28,7 @@
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
   $min: map.get($breakpoints, $name);
@@ -42,7 +42,7 @@
 // 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(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
+//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
 //    767.98px
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
   $max: map.get($breakpoints, $name);
@@ -52,9 +52,9 @@
 // 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: 992px, xl: 1200px, xxl: 1400px))
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
 //    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
 //    "-sm"
 @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
   @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");

scss/layout/_grid.scss

@@ -70,4 +70,8 @@
   .grid-cols-6 {
     --#{$prefix}columns: 6;
   }
+
+  .grid-full {
+    grid-column: 1 / -1;
+  }
 }

scss/mixins/_gradients.scss

@@ -17,18 +17,18 @@
 // Horizontal gradient, from left to right
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-x($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $start-percent: 0%, $end-percent: 100%) {
   background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
 }
 
 // Vertical gradient, from top to bottom
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
+@mixin gradient-y($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $start-percent: null, $end-percent: null) {
   background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
 }
 
-@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
+@mixin gradient-directional($start-color: var(--#{$prefix}gray-700), $end-color: var(--#{$prefix}gray-800), $deg: 45deg) {
   background-image: linear-gradient($deg, $start-color, $end-color);
 }
 
@@ -40,7 +40,7 @@
   background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
 }
 
-@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
+@mixin gradient-radial($inner-color: var(--#{$prefix}gray-700), $outer-color: var(--#{$prefix}gray-800)) {
   background-image: radial-gradient(circle, $inner-color, $outer-color);
 }
 

scss/mixins/_utilities.scss

@@ -3,22 +3,44 @@
 @use "sass:meta";
 @use "sass:string";
 @use "../config" as *;
+@use "../vendor/rfs" as *;
+
+// stylelint-disable scss/dollar-variable-pattern
 
 // Utility generator
-// Used to generate utilities & print utilities
-@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
-  $values: map.get($utility, values);
 
-  // If the values are a list or string, convert it into a map
-  @if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
-    // A single value is converted to a map with a null key.
-    @if list.length($values) == 1 {
-      $values: (null: list.nth($values, 1));
+// - Utilities can three different types of selectors:
+//   - class: .class
+//   - attr-starts: [class^="class"]
+//   - attr-includes: [class*="class"]
+// - Utilities can generate a regular CSS property or a CSS custom property
+// - Utilities can be responsive or not
+// - Utilities can have a state (e.g., :hover, :focus, :active, etc.)
+
+@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
+  // Determine if we're generating a class, or an attribute selector
+  $selectorType: if(map.has-key($utility, selector), map.get($utility, selector), "class");
+  // Then get the class name to use in a class (e.g., .class) or in a attribute selector (e.g., [class^="class"])
+  $selectorClass: map.get($utility, class);
+
+  // Get the list or map of values and ensure it's a map
+  $values: map.get($utility, values);
+  @if meta.type-of($values) != "map" {
+    @if meta.type-of($values) == "list" {
+      $list: ();
+      @each $value in $values {
+        $list: map.merge($list, ($value: $value));
+      }
+      $values: $list;
     } @else {
-      $values: list.zip($values, $values);
+      $values: (null: $values);
     }
   }
 
+  // Calculate infix once, before the loop
+  // Note: $infix already includes the leading dash from breakpoint-infix()
+  // $infix: if($infix == "", "", "-" + $infix);
+
   @each $key, $value in $values {
     $properties: map.get($utility, property);
 
@@ -27,83 +49,114 @@
       $properties: list.append((), $properties);
     }
 
-    // Use custom class if present
-    $property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
-    $property-class: if($property-class == null, "", $property-class);
+    // Use custom class if present, otherwise use the first value from the list of properties
+    $customClass: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
+    $customClass: if($customClass == null, "", $customClass);
 
     // Use custom CSS variable name if present, otherwise default to `class`
-    $css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
+    // mdo-do: restore?
+    // $css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
 
     // State params to generate pseudo-classes
     $state: if(map.has-key($utility, state), map.get($utility, state), ());
 
-    $infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.slice($infix, 2), $infix);
+    // $infix: if($customClass == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
 
     // Don't prefix if value key is null (e.g. with shadow class)
-    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
+    $customClassModifier: if($key, if($customClass == "" and $infix == "", "", "-") + $key, "");
 
-    @if map.get($utility, rfs) {
-      // Inside the media query
-      @if $is-rfs-media-query {
-        $val: rfs-value($value);
-
-        // Do not render anything if fluid and non fluid values are the same
-        $value: if($val == rfs-fluid-value($value), null, $val);
-      }
-      @else {
-        $value: rfs-fluid-value($value);
+    $selector: "";
+    @if $selectorType == "class" {
+      // Use the fallback of the first property if no `class` key is used
+      @if $customClass != "" {
+        $selector: ".#{$customClass + $infix + $customClassModifier}";
+      } @else {
+        $selector: ".#{$selectorClass + $infix + $customClassModifier}";
       }
+    } @else if $selectorType == "attr-starts" {
+      $selector: "[class^=\"#{$selectorClass}\"]";
+    } @else if $selectorType == "attr-includes" {
+      $selector: "[class*=\"#{$selectorClass}\"]";
     }
 
-    $is-css-var: map.get($utility, css-var);
-    $is-local-vars: map.get($utility, local-vars);
-    $is-rtl: map.get($utility, rtl);
-    $is-important: map.get($utility, important);
+    // @debug $utility;
+    // @debug $selectorType;
+    // @debug $selector;
+    // @debug $properties;
+    // @debug $values;
 
-    @if $value != null {
-      @if $is-rtl == false {
-        /* rtl:begin:remove */
-      }
-
-      @if $is-css-var {
-        .#{$property-class + $infix + $property-class-modifier} {
-          --#{$prefix}#{$css-variable-name}: #{$value};
+    #{$selector} {
+      @if map.get($utility, rfs) {
+        @if map.get($utility, important) {
+          @warn "The `important` option is not compatible with `rfs`. The `important` declaration will be ignored.";
         }
-
-        @each $pseudo in $state {
-          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
-            --#{$prefix}#{$css-variable-name}: #{$value};
+        @if $is-rfs-media-query {
+          @each $property in $properties {
+            @include rfs($value, $property);
+          }
+        }
+        @else {
+          @each $property in $properties {
+            @include rfs($value, $property);
           }
         }
       } @else {
-        .#{$property-class + $infix + $property-class-modifier} {
-          @each $property in $properties {
-            @if $is-local-vars {
-              @each $local-var, $variable in $is-local-vars {
-                --#{$prefix}#{$local-var}: #{$variable};
-              }
-            }
-            #{$property}: $value if($is-important, !important, null);
+        @each $property in $properties {
+          @if map.get($utility, important) {
+            #{$property}: $value !important; // stylelint-disable-line declaration-no-important
+          } @else {
+            #{$property}: $value;
           }
         }
-
-        @each $pseudo in $state {
-          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
-            @each $property in $properties {
-              @if $is-local-vars {
-                @each $local-var, $variable in $is-local-vars {
-                  --#{$prefix}#{$local-var}: #{$variable};
-                }
-              }
-              #{$property}: $value if($is-important, !important, null);
-            }
-          }
-        }
-      }
-
-      @if $is-rtl == false {
-        /* rtl:end:remove */
       }
     }
+
+    // @if $value != null {
+    //   #{$selector} {
+    //     @each $property in $properties {
+    //       #{$property}: $value;
+    //     }
+    //   }
+
+    //   @if $is-css-var {
+    //     #{$selector} {
+    //       --#{$prefix}#{$css-variable-name}: #{$value};
+    //     }
+
+    //     @each $pseudo in $state {
+    //       #{$selector}-#{$pseudo}:#{$pseudo} {
+    //         --#{$prefix}#{$css-variable-name}: #{$value};
+    //       }
+    //     }
+    //   } @else {
+    //     #{$selector} {
+    //       @each $property in $properties {
+    //         // @if $is-local-vars {
+    //         //   @each $local-var, $variable in $is-local-vars {
+    //         //     --#{$prefix}#{$local-var}: #{$variable};
+    //         //   }
+    //         // }
+    //         #{$property}: $value;
+    //       }
+    //     }
+
+    //   //   @each $pseudo in $state {
+    //   //     #{$selector}-#{$pseudo}:#{$pseudo} {
+    //   //       @each $property in $properties {
+    //   //         @if $is-local-vars {
+    //   //           @each $local-var, $variable in $is-local-vars {
+    //   //             --#{$prefix}#{$local-var}: #{$variable};
+    //   //           }
+    //   //         }
+    //   //         #{$property}: $value;
+    //   //       }
+    //   //     }
+    //   //   }
+    //   }
+    // }
+
+    $is-css-var: map.get($utility, css-var);
+    $is-local-vars: map.get($utility, local-vars);
+    // $is-rtl: map.get($utility, rtl);
   }
 }

scss/tests/jasmine.js

@@ -8,7 +8,7 @@ module.exports = {
   spec_dir: 'scss',
   // Make Jasmine look for `.test.scss` files
   // spec_files: ['**/*.{test,spec}.scss'],
-  spec_files: ['**/_utilities.test.scss'],
+  spec_files: ['**/_utilities.test.scss', '**/modules/_configuration.test.scss'],
   // Compile them into JS scripts running `sass-true`
   requires: [path.join(__dirname, 'sass-true/register')],
   // Ensure we use `require` so that the require.extensions works

scss/tests/modules/_configuration.test.scss

@@ -0,0 +1,52 @@
+// Test @use with configuration syntax using a single module instance
+@use "../../alert" as * with (
+  $alert-margin-bottom: 3rem,
+  $alert-link-font-weight: 800
+);
+@use "../../variables" as *;
+
+$true-terminal-output: false;
+
+@include describe("Bootstrap module configuration") {
+  @include describe("@use with configuration syntax") {
+    @include it("should allow configuring alert variables with @use ... with") {
+      @include assert() {
+        @include output() {
+          .test {
+            margin-bottom: $alert-margin-bottom;
+            font-weight: $alert-link-font-weight;
+          }
+        }
+
+        @include expect() {
+          .test {
+            margin-bottom: 3rem;
+            font-weight: 800;
+          }
+        }
+      }
+    }
+
+    @include it("should maintain other alert variables with default values") {
+      @include assert() {
+        @include output() {
+          .test {
+            padding-y: $alert-padding-y;
+            padding-x: $alert-padding-x;
+            // stylelint-disable-next-line property-disallowed-list
+            border-radius: $alert-border-radius;
+          }
+        }
+
+        @include expect() {
+          .test {
+            padding-y: 1rem;
+            padding-x: 1rem;
+            // stylelint-disable-next-line property-disallowed-list
+            border-radius: var(--bs-border-radius);
+          }
+        }
+      }
+    }
+  }
+}

site/data/breakpoints.yml

@@ -19,17 +19,17 @@
 - breakpoint: lg
   abbr: -lg
   name: Large
-  min-width: 992px
+  min-width: 1024px
   container: 960px
 
 - breakpoint: xl
   abbr: -xl
   name: X-Large
-  min-width: 1200px
-  container: 1140px
+  min-width: 1280px
+  container: 1200px
 
-- breakpoint: xxl
-  abbr: -xxl
-  name: XX-Large
-  min-width: 1400px
-  container: 1320px
+- breakpoint: 2xl
+  abbr: -2xl
+  name: 2X-Large
+  min-width: 1536px
+  container: 1440px

site/data/colors.yml

@@ -1,26 +1,16 @@
 - name: blue
-  hex: '#0d6efd'
 - name: indigo
-  hex: '#6610f2'
+- name: violet
 - name: purple
-  hex: '#6f42c1'
 - name: pink
-  hex: '#d63384'
 - name: red
-  hex: '#dc3545'
 - name: orange
-  hex: '#fd7e14'
+- name: amber
 - name: yellow
-  hex: '#ffc107'
+- name: lime
 - name: green
-  hex: '#198754'
 - name: teal
-  hex: '#20c997'
 - name: cyan
-  hex: '#0dcaf0'
-- name: white
-  hex: '#fff'
+- name: brown
 - name: gray
-  hex: '#6c757d'
-- name: gray-dark
-  hex: '#343a40'
+- name: pewter

site/data/grays.yml

@@ -1,18 +0,0 @@
-- name: 100
-  hex: '#f8f9fa'
-- name: 200
-  hex: '#e9ecef'
-- name: 300
-  hex: '#dee2e6'
-- name: 400
-  hex: '#ced4da'
-- name: 500
-  hex: '#adb5bd'
-- name: 600
-  hex: '#868e96'
-- name: 700
-  hex: '#495057'
-- name: 800
-  hex: '#343a40'
-- name: 900
-  hex: '#212529'

site/data/sidebar.yml

@@ -26,6 +26,7 @@
     - title: Sass
     - title: Options
     - title: Color
+    - title: Theme
     - title: Color modes
     - title: Components
     - title: CSS variables
@@ -60,8 +61,9 @@
   pages:
     - title: Overview
     - title: Form control
-    - title: Select
-    - title: Checks & radios
+    - title: Checkbox
+    - title: Radio
+    - title: Switch
     - title: Range
     - title: Input group
     - title: Floating labels
@@ -117,27 +119,52 @@
   icon_color: red
   pages:
     - title: API
-    - title: Aspect ratio
     - title: Background
     - title: Border
     - title: Border radius
     - title: Colors
-    - title: Display
-    - title: Flex
-    - title: Float
-    - title: Interactions
-    - title: Link
-    - title: Object fit
-    - title: Opacity
-    - title: Overflow
-    - title: Position
-    - title: Shadows
-    - title: Sizing
-    - title: Spacing
-    - title: Text
-    - title: Vertical align
-    - title: Visibility
-    - title: Z-index
+    - group: Layout
+      pages:
+        - title: Aspect ratio
+        - title: Display
+        - title: Float
+        - title: Object fit
+        - title: Overflow
+        - title: Position
+        - title: Visibility
+        - title: Z-index
+    - group: Flex & Grid
+      pages:
+        - title: Align content
+        - title: Align items
+        - title: Align self
+        - title: Flex
+        - title: Justify content
+        - title: Justify items
+        - title: Place items
+    - group: Sizing
+      pages:
+        - title: Width
+        - title: Height
+    - group: Spacing
+      pages:
+        - title: Margin
+        - title: Padding
+    - group: Type
+      pages:
+        - title: Font style
+        - title: Text alignment
+        - title: Text decoration
+        - title: Text wrapping
+        - title: Vertical align
+    - group: Interactions
+      pages:
+        - title: Pointer events
+        - title: User select
+    - group: Effects
+      pages:
+        - title: Opacity
+        - title: Shadows
 
 - title: Extend
   icon: tools

site/data/theme-colors.yml

@@ -1,20 +1,8 @@
 - name: primary
-  hex: '#0d6efd'
-- name: secondary
-  hex: '#6c757d'
+- name: accent
 - name: success
-  hex: '#28a745'
 - name: danger
-  hex: '#dc3545'
 - name: warning
-  hex: '#ffc107'
-  contrast_color: dark
 - name: info
-  hex: '#17a2b8'
-  contrast_color: dark
-- name: light
-  hex: '#f8f9fa'
-  contrast_color: dark
-- name: dark
-  hex: '#343a40'
-  contrast_color: white
+- name: emphasis
+- name: secondary

site/src/assets/examples/buttons/index.astro

@@ -26,7 +26,7 @@ export const title = 'Buttons'
 
 <div class="b-example-divider"></div>
 
-<div class="col-lg-6 col-xxl-4 my-5 mx-auto">
+<div class="col-lg-6 col-2xl-4 my-5 mx-auto">
   <div class="d-grid gap-2">
     <button class="btn btn-outline-secondary" type="button">Secondary action</button>
     <button class="btn btn-primary" type="button">Primary action</button>

site/src/assets/examples/grid/index.astro

@@ -45,9 +45,9 @@ export const body_class = 'py-4'
     </div>
 
     <div class="row mb-3 text-center">
-      <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
-      <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
-      <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+      <div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
+      <div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
+      <div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
     </div>
 
     <h2 class="mt-4">Three equal columns</h2>
@@ -107,8 +107,8 @@ export const body_class = 'py-4'
     <hr class="my-4">
 
     <h2 class="mt-4">Mixed: mobile and desktop</h2>
-    <p>The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
-    <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.</p>
+    <p>The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and 2xl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
+    <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and 2xl, you only need to specify md.</p>
     <div class="row mb-3 text-center">
       <div class="col-md-8 themed-grid-col">.col-md-8</div>
       <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
@@ -172,7 +172,7 @@ export const body_class = 'py-4'
     <hr class="my-4">
 
     <h2 class="mt-4">Containers</h2>
-    <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
+    <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>2xl</code> breakpoint.</p>
   </div>
 
   <div class="container themed-container text-center">.container</div>
@@ -180,6 +180,6 @@ export const body_class = 'py-4'
   <div class="container-md themed-container text-center">.container-md</div>
   <div class="container-lg themed-container text-center">.container-lg</div>
   <div class="container-xl themed-container text-center">.container-xl</div>
-  <div class="container-xxl themed-container text-center">.container-xxl</div>
+  <div class="container-2xl themed-container text-center">.container-2xl</div>
   <div class="container-fluid themed-container text-center">.container-fluid</div>
 </main>

site/src/assets/examples/heroes/index.astro

@@ -40,7 +40,7 @@ export const extra_css = ['heroes.css']
 
   <div class="b-example-divider"></div>
 
-  <div class="container col-xxl-8 px-4 py-5">
+  <div class="container col-2xl-8 px-4 py-5">
     <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
       <div class="col-10 col-sm-8 col-lg-6">
         <img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
@@ -58,7 +58,7 @@ export const extra_css = ['heroes.css']
 
   <div class="b-example-divider"></div>
 
-  <div class="container col-xl-10 col-xxl-8 px-4 py-5">
+  <div class="container col-xl-10 col-2xl-8 px-4 py-5">
     <div class="row align-items-center g-lg-5 py-5">
       <div class="col-lg-7 text-center text-lg-start">
         <h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">Vertically centered hero sign-up form</h1>

site/src/assets/examples/navbars/index.astro

@@ -199,14 +199,14 @@ export const extra_css = ['navbars.css']
     </div>
   </nav>
 
-  <nav class="navbar navbar-expand-xxl navbar-dark bg-dark" aria-label="Seventh navbar example">
+  <nav class="navbar navbar-expand-2xl navbar-dark bg-dark" aria-label="Seventh navbar example">
     <div class="container-fluid">
-      <a class="navbar-brand" href="#">Expand at xxl</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">
+      <a class="navbar-brand" href="#">Expand at 2xl</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample2xl" aria-controls="navbarsExample2xl" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarsExampleXxl">
+      <div class="collapse navbar-collapse" id="navbarsExample2xl">
         <ul class="navbar-nav me-auto mb-2 mb-xl-0">
           <li class="nav-item">
             <a class="nav-link active" aria-current="page" href="#">Home</a>

site/src/components/DocsSidebar.astro

@@ -29,8 +29,50 @@ const sidebar = getData('sidebar')
                 {group.title}
               </strong>
               <ul class="list-unstyled fw-normal pb-2 small">
-                {group.pages?.map((page) => {
-                  const docSlug = getSlug(page.title)
+                {group.pages?.map((item: any) => {
+                  // Handle sub-groups
+                  if (item.group && item.pages) {
+                    return (
+                      <li class="mb-2">
+                        <div class="bd-links-subgroup fw-semibold mt-3">
+                          {item.group}
+                        </div>
+                        <ul class="list-unstyled">
+                          {item.pages.map((page: any) => {
+                            const docSlug = getSlug(page.title)
+                            const unversionedPageSlug = `${groupSlug}/${docSlug}`
+
+                            const url = `/docs/${getConfig().docs_version}/${unversionedPageSlug}`
+                            const active = Astro.params.slug === unversionedPageSlug
+
+                            const generatedPage = docsPages.find((page) => page.slug === unversionedPageSlug)
+
+                            // This test should not be necessary, see comments for `getSlug()` in `src/libs/utils.ts`.
+                            if (!generatedPage) {
+                              throw new Error(
+                                `The page '${page.title}' referenced in 'site/data/sidebar.yml' does not exist at '${url}'.`
+                              )
+                            }
+
+                            return (
+                              <li>
+                                <a
+                                  href={url}
+                                  class:list={['bd-links-link d-inline-block rounded', { active }]}
+                                  aria-current={active ? 'page' : undefined}
+                                >
+                                  {page.title}
+                                </a>
+                              </li>
+                            )
+                          })}
+                        </ul>
+                      </li>
+                    )
+                  }
+
+                  // Handle regular pages
+                  const docSlug = getSlug(item.title)
                   const unversionedPageSlug = `${groupSlug}/${docSlug}`
 
                   const url = `/docs/${getConfig().docs_version}/${unversionedPageSlug}`
@@ -41,7 +83,7 @@ const sidebar = getData('sidebar')
                   // This test should not be necessary, see comments for `getSlug()` in `src/libs/utils.ts`.
                   if (!generatedPage) {
                     throw new Error(
-                      `The page '${page.title}' referenced in 'site/data/sidebar.yml' does not exist at '${url}'.`
+                      `The page '${item.title}' referenced in 'site/data/sidebar.yml' does not exist at '${url}'.`
                     )
                   }
 
@@ -52,7 +94,7 @@ const sidebar = getData('sidebar')
                         class:list={['bd-links-link d-inline-block rounded', { active }]}
                         aria-current={active ? 'page' : undefined}
                       >
-                        {page.title}
+                        {item.title}
                       </a>
                     </li>
                   )

site/src/components/header/Navigation.astro

@@ -22,7 +22,7 @@ const { addedIn, layout, title } = Astro.props
 ---
 
 <header class="navbar navbar-expand-lg bd-navbar sticky-top">
-  <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
+  <nav class="container-2xl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
     {
       layout === 'docs' && (
         <div class="bd-navbar-toggle">

site/src/components/home/MastHead.astro

@@ -7,7 +7,7 @@ import ResponsiveImage from '@layouts/partials/ResponsiveImage.astro'
 ---
 
 <div class="bd-masthead mb-3" id="content">
-  <div class="container-xxl bd-gutter">
+  <div class="container-2xl bd-gutter">
     <div class="col-md-8 mx-auto text-center">
       <a
         class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none"

site/src/components/shortcodes/Example.astro

@@ -13,6 +13,11 @@ interface Props {
    * If an array is passed, elements will be joined with a new line.
    */
   code: string | string[]
+  /**
+   * Custom markup to display in the source code section, different from the preview code.
+   * If provided, this will be used instead of the `code` prop for the source display.
+   */
+  customMarkup?: string | string[]
   /**
    * The CSS class(es) to be added to the preview wrapping `div` element.
    */
@@ -41,6 +46,7 @@ interface Props {
 const {
   addStackblitzJs = false,
   code,
+  customMarkup,
   class: className,
   id,
   lang = 'html',
@@ -51,7 +57,12 @@ const {
 let markup = Array.isArray(code) ? code.join('\n') : code
 markup = replacePlaceholdersInHtml(markup)
 
-const simplifiedMarkup = markup
+// Use customMarkup for source code display if provided, otherwise use the processed markup
+let sourceMarkup = customMarkup
+  ? (Array.isArray(customMarkup) ? customMarkup.join('\n') : customMarkup)
+  : markup
+
+const simplifiedMarkup = sourceMarkup
   .replace(
     /<svg.*class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>/g,
     (match, classes) => `<img src="..."${classes ? ` class="${classes}"` : ''} alt="...">`

site/src/components/shortcodes/JsDocs.astro

@@ -55,8 +55,10 @@ try {
 <Code containerClass="bd-example-snippet bd-code-snippet bd-file-ref" code={content} lang="js">
   <div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
     <a
-      class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
+      class="text-decoration-none color-body"
       href={`${getConfig().repo}/blob/v${getConfig().current_version}/${file}`.replaceAll('\\', '/')}
+      target="_blank"
+      rel="noopener noreferrer"
     >
       {file}
     </a>

site/src/components/shortcodes/ScssDocs.astro

@@ -57,8 +57,10 @@ try {
 <Code containerClass="bd-example-snippet bd-file-ref" code={content} lang="scss">
   <div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
     <a
-      class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
+      class="text-decoration-none color-body"
       href={`${getConfig().repo}/blob/v${getConfig().current_version}/${file}`.replaceAll('\\', '/')}
+      target="_blank"
+      rel="noopener noreferrer"
     >
       {file}
     </a>

site/src/components/shortcodes/Swatch.astro

@@ -0,0 +1,203 @@
+---
+export interface Props {
+  bg: string
+  fg?: string
+  size?: 'inline' | 'medium' | 'large'
+  contrast?: string
+  contrastDark?: string
+  cssVar?: string
+  showVar?: boolean
+}
+
+const { bg, fg, size = 'inline', contrast, contrastDark, cssVar, showVar = true } = Astro.props
+
+// Styles for different sizes
+const baseStyles = {
+  display: 'inline-flex',
+  color: `var(--bs-${fg})`,
+  backgroundColor: `var(--bs-${bg})`,
+  boxShadow: 'inset 0 0 0 1px light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .1))'
+}
+
+const sizeStyles = {
+  inline: {
+    verticalAlign: 'text-bottom',
+    width: '1rem',
+    height: '1rem',
+    borderRadius: 'var(--bs-border-radius-sm)'
+  },
+  medium: {
+    width: '100%',
+    paddingBlock: '1.5rem',
+    borderRadius: 'var(--bs-border-radius)'
+  },
+  large: {
+    width: '100%',
+    paddingBlock: '.5rem',
+    paddingInline: '1rem',
+    borderRadius: 'var(--bs-border-radius-lg)'
+  }
+}
+
+// Parse contrast ratios and determine if they're below 4.5
+const contrastRatio = contrast ? parseFloat(contrast) : null
+const contrastDarkRatio = contrastDark ? parseFloat(contrastDark) : null
+const isLowContrast = contrastRatio !== null && contrastRatio < 4.5
+const isLowContrastDark = contrastDarkRatio !== null && contrastDarkRatio < 4.5
+
+const contrastStyles = {
+  marginLeft: 'auto',
+  opacity: .5,
+  fontSize: '.75rem',
+  fontFamily: 'var(--bs-font-monospace)',
+  color: isLowContrast ? 'red' : 'inherit'
+}
+
+const combinedStyles = { ...baseStyles, ...sizeStyles[size] }
+
+// Determine which CSS variable to display
+const displayCssVar = cssVar || bg
+---
+
+<style>
+  /* Show light contrast by default and in light mode */
+  .contrast-light {
+    display: inline;
+  }
+
+  .contrast-dark {
+    display: none;
+  }
+
+  /* Show dark contrast in dark mode */
+  :global([data-bs-theme="dark"]) .contrast-light {
+    display: none;
+  }
+
+  :global([data-bs-theme="dark"]) .contrast-dark {
+    display: inline;
+  }
+
+  /* CSS variable display styles */
+  .css-var {
+    margin-left: 0.25rem;
+    font-family: var(--bs-font-monospace);
+    font-size: 0.875rem;
+    color: var(--bs-color-3);
+  }
+
+  .css-var-light {
+    display: inline;
+  }
+
+  .css-var-dark {
+    display: none;
+  }
+
+  /* Show dark value in dark mode */
+  :global([data-bs-theme="dark"]) .css-var-light {
+    display: none;
+  }
+
+  :global([data-bs-theme="dark"]) .css-var-dark {
+    display: inline;
+  }
+</style>
+
+{size === 'inline' ? (
+  <>
+    <span style={combinedStyles}>
+      <slot />
+      {contrast && <span style={contrastStyles} class="contrast-light">{contrast}</span>}
+      {contrastDark && <span style={{...contrastStyles, color: isLowContrastDark ? 'red' : 'inherit'}} class="contrast-dark">{contrastDark}</span>}
+    </span>
+    {showVar && displayCssVar && (
+      <span class="css-var" data-css-var={`--bs-${displayCssVar}`}>
+        <span class="css-var-light">Loading...</span>
+        <span class="css-var-dark">Loading...</span>
+      </span>
+    )}
+  </>
+) : size === 'large' ? (
+  <span style={combinedStyles}>
+    <slot />
+    {contrast && <span style={contrastStyles} class="contrast-light">{contrast}</span>}
+    {contrastDark && <span style={{...contrastStyles, color: isLowContrastDark ? 'red' : 'inherit'}} class="contrast-dark">{contrastDark}</span>}
+  </span>
+) : (
+  <div style={combinedStyles}>
+    <slot />
+    {contrast && <span style={contrastStyles} class="contrast-light">{contrast}</span>}
+    {contrastDark && <span style={{...contrastStyles, color: isLowContrastDark ? 'red' : 'inherit'}} class="contrast-dark">{contrastDark}</span>}
+  </div>
+)}
+
+<script>
+  // Handle dynamic CSS variable display with light-dark() function support
+  document.addEventListener('DOMContentLoaded', () => {
+    const cssVarElements = document.querySelectorAll('.css-var[data-css-var]')
+
+    cssVarElements.forEach(element => {
+      const cssVarName = element.getAttribute('data-css-var')
+
+      if (cssVarName) {
+        // Try to get the raw CSS variable definition from stylesheets
+        let rawValue = null
+        for (const stylesheet of document.styleSheets) {
+          try {
+            for (const rule of stylesheet.cssRules) {
+              if (rule.type === CSSRule.STYLE_RULE) {
+                const styleRule = rule as CSSStyleRule
+                for (const prop of styleRule.style) {
+                  if (prop === cssVarName) {
+                    rawValue = styleRule.style.getPropertyValue(cssVarName)
+                    break
+                  }
+                }
+              }
+            }
+          } catch (e) {
+            // Skip stylesheets we can't access (CORS)
+            continue
+          }
+        }
+
+        // If we couldn't get the raw value, fall back to computed value
+        if (!rawValue) {
+          rawValue = getComputedStyle(document.documentElement).getPropertyValue(cssVarName)
+        }
+
+        if (rawValue) {
+          // Check if the value contains light-dark function
+          if (rawValue.includes('light-dark(')) {
+            // Parse the light-dark function to extract light and dark values
+            const lightDarkMatch = rawValue.match(/light-dark\(([^,]+),\s*(.+)\)$/)
+            if (lightDarkMatch) {
+              const lightValue = lightDarkMatch[1].trim()
+              const darkValue = lightDarkMatch[2].trim()
+
+              // Update the spans with the parsed values
+              const lightSpan = element.querySelector('.css-var-light')
+              const darkSpan = element.querySelector('.css-var-dark')
+
+              if (lightSpan) lightSpan.textContent = lightValue
+              if (darkSpan) darkSpan.textContent = darkValue
+            } else {
+              // Fallback: show the full value
+              element.innerHTML = `<span class="css-var-light">${rawValue}</span>`
+            }
+          } else if (rawValue.includes('color-mix(')) {
+            // Handle color-mix functions - show the full function
+            element.innerHTML = `<span class="css-var-light">${rawValue}</span>`
+          } else {
+            // Single value - show it in both light and dark spans
+            element.innerHTML = `<span class="css-var-light">${rawValue}</span>`
+          }
+        } else {
+          // Fallback: show the variable name
+          element.innerHTML = `<span class="css-var-light">${cssVarName}</span>`
+        }
+      }
+    })
+  })
+</script>

site/src/components/shortcodes/Table.astro

@@ -14,19 +14,26 @@ interface Props {
    * @default true
    */
   simplified?: boolean
+  /**
+   * Optional theme for the table.
+   */
+  theme?: 'light' | 'dark'
 }
 
-const { class: className, simplified = true } = Astro.props
+const { class: className, simplified = true, theme } = Astro.props
 
-const tableCode = `<table${className ? ` class="${className}"` : ''}>
+// Build the attributes
+const classAttr = className ? ` class="${className}"` : ''
+const themeAttr = theme ? ` data-bs-theme="${theme}"` : ''
+const allAttrs = `${classAttr}${themeAttr}`
+
+const tableCode = `<table${allAttrs}>
 ${simplified ? '  ...' : await tableContent.compiledContent()}
 </table>`
 
-const exampleCode = `<table${className ? ` class="${className}"` : ''}>
+const exampleCode = `<table${allAttrs}>
 ${await tableContent.compiledContent()}
 </table>`
 ---
 
-<Example showMarkup={false} code={exampleCode} />
-
-<Code code={tableCode} lang="html" />
+<Example code={exampleCode} customMarkup={tableCode} />

site/src/content/docs/components/button-group.mdx

@@ -44,7 +44,7 @@ These classes can also be added to groups of links, as an alternative to the [`.
 
 ## Checkbox and radio button groups
 
-Combine button-like checkbox and radio [toggle buttons]([[docsref:/forms/checks-radios]]) into a seamless looking button group.
+Combine button-like checkbox and radio toggle buttons into a seamless looking button group.
 
 <Example code={`<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
     <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">

site/src/content/docs/components/buttons.mdx

@@ -15,14 +15,14 @@ Bootstrap has a base `.btn` class that sets up basic styles such as padding and
 The `.btn` class is intended to be used in conjunction with our button variants, or to serve as a basis for your own custom styles.
 
 <Callout type="warning">
-If you are using the `.btn` class on its own, remember to at least define some explicit `:focus` and/or `:focus-visible` styles.
+When using `.btn` without a modifier, be sure to add some explicit `:focus-visible` styles.
 </Callout>
 
 ## Variants
 
 Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.
 
-<Example code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn btn-${themeColor.name}">${themeColor.title}</button>`), `
+<Example class="bd-example-buttons" code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn btn-${themeColor.name}-solid justify-self-start">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-outline justify-self-start">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-subtle justify-self-start">${themeColor.title}</button> <button type="button" class="btn btn-${themeColor.name}-text justify-self-start">${themeColor.title}</button>`), `
 <button type="button" class="btn btn-link">Link</button>`]} />
 
 <Callout name="warning-color-assistive-technologies" />
@@ -126,12 +126,82 @@ Additional utilities can be used to adjust the alignment of buttons when horizon
     <button class="btn btn-primary" type="button">Button</button>
   </div>`} />
 
+## Toggle buttons
+
+Create button-like checkboxes and radio buttons by using `.btn` styles rather than `.form-check-label` on the `<label>` elements. These toggle buttons can further be grouped in a [button group]([[docsref:/components/button-group]]) if needed.
+
+### Checkbox toggle buttons
+
+<Example code={`<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
+<label class="btn btn-primary" for="btn-check">Single toggle</label>
+
+<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
+<label class="btn btn-primary" for="btn-check-2">Checked</label>
+
+<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
+<label class="btn btn-primary" for="btn-check-3">Disabled</label>`} />
+
+<Example code={`<input type="checkbox" class="btn-check" id="btn-check-4" autocomplete="off">
+<label class="btn" for="btn-check-4">Single toggle</label>
+
+<input type="checkbox" class="btn-check" id="btn-check-5" checked autocomplete="off">
+<label class="btn" for="btn-check-5">Checked</label>
+
+<input type="checkbox" class="btn-check" id="btn-check-6" autocomplete="off" disabled>
+<label class="btn" for="btn-check-6">Disabled</label>`} />
+
+<Callout>
+Visually, these checkbox toggle buttons are identical to the [button plugin toggle buttons]([[docsref:/components/buttons#button-plugin]]). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked“/“not checked“ (since, despite their appearance, they are fundamentally still checkboxes), whereas the button plugin toggle buttons will be announced as “button“/“button pressed“. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
+</Callout>
+
+### Radio toggle buttons
+
+<Example code={`<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
+<label class="btn btn-secondary" for="option1">Checked</label>
+
+<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
+<label class="btn btn-secondary" for="option2">Radio</label>
+
+<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
+<label class="btn btn-secondary" for="option3">Disabled</label>
+
+<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
+<label class="btn btn-secondary" for="option4">Radio</label>`} />
+
+<Example code={`<input type="radio" class="btn-check" name="options-base" id="option5" autocomplete="off" checked>
+<label class="btn" for="option5">Checked</label>
+
+<input type="radio" class="btn-check" name="options-base" id="option6" autocomplete="off">
+<label class="btn" for="option6">Radio</label>
+
+<input type="radio" class="btn-check" name="options-base" id="option7" autocomplete="off" disabled>
+<label class="btn" for="option7">Disabled</label>
+
+<input type="radio" class="btn-check" name="options-base" id="option8" autocomplete="off">
+<label class="btn" for="option8">Radio</label>`} />
+
+### Outlined styles
+
+Different variants of `.btn`, such as the various outlined styles, are supported.
+
+<Example code={`<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
+<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>
+
+<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
+<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>
+
+<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
+<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>
+
+<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
+<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>`} />
+
 ## Button plugin
 
 The button plugin allows you to create simple on/off toggle buttons.
 
 <Callout>
-Visually, these toggle buttons are identical to the [checkbox toggle buttons]([[docsref:/forms/checks-radios#checkbox-toggle-buttons]]). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked”/“not checked” (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as “button”/“button pressed”. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
+Visually, these toggle buttons are identical to the [checkbox toggle buttons]([[docsref:/forms/checkbox]]). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked”/“not checked” (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as “button”/“button pressed”. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
 </Callout>
 
 ### Toggle states
@@ -206,15 +276,23 @@ Here’s an example of building a custom `.btn-*` modifier class as we do for th
 
 ### Sass variables
 
-<ScssDocs name="btn-variables" file="scss/_variables.scss" />
+<ScssDocs name="btn-variables" file="scss/buttons/_button-variables.scss" />
+
+### Sass map
+
+Button variants—including all their states—are defined in the `$button-variants` Sass map. This map identifies which theme color tokens to use for each variant's state.
+
+For example, a solid button uses the same `bg` token for its background and border colors because we want it to have a seamless look.
+
+<ScssDocs name="btn-variants" file="scss/buttons/_button.scss" />
 
 ### Sass mixins
 
 There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin.
 
-{/*<ScssDocs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" />
+<ScssDocs name="btn-variant-mixin" file="scss/buttons/_button.scss" />
 
-<ScssDocs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" />
+{/*<ScssDocs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" />
 
 <ScssDocs name="btn-size-mixin" file="scss/mixins/_buttons.scss" />*/}
 
@@ -222,4 +300,4 @@ There are three mixins for buttons: button and button outline variant mixins (bo
 
 Button variants (for regular and outline buttons) use their respective mixins with our `$theme-colors` map to generate the modifier classes in `scss/_buttons.scss`.
 
-<ScssDocs name="btn-variant-loops" file="scss/buttons/_button.scss" />
+{/* <ScssDocs name="btn-variant-loops" file="scss/buttons/_button.scss" /> */}

site/src/content/docs/components/card.mdx

@@ -397,7 +397,7 @@ Use [border utilities]([[docsref:/utilities/border]]) to change just the `border
 
 <Example code={getData('theme-colors').map((themeColor) => `<div class="card border-${themeColor.name} mb-3" style="max-width: 18rem;">
     <div class="card-header">Header</div>
-    <div class="card-body${themeColor.contrast_color ? '' : ` text-${themeColor.name}`}">
+    <div class="card-body text-${themeColor.name}">
       <h5 class="card-title">${themeColor.title} card title</h5>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
     </div>

site/src/content/docs/components/dropdowns.mdx

@@ -645,7 +645,7 @@ Add `.dropdown-menu-end` to a `.dropdown-menu` to right align the dropdown menu.
 
 If you want to use responsive alignment, disable dynamic positioning by adding the `data-bs-display="static"` attribute and use the responsive variation classes.
 
-To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end`.
+To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-2xl}-end`.
 
 <Example code={`<div class="btn-group">
     <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
@@ -658,7 +658,7 @@ To align **right** the dropdown menu with the given breakpoint or larger, add `.
     </ul>
   </div>`} />
 
-To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start`.
+To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-end` and `.dropdown-menu{-sm|-md|-lg|-xl|-2xl}-start`.
 
 <Example code={`<div class="btn-group">
     <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">

site/src/content/docs/components/list-group.mdx

@@ -112,7 +112,7 @@ These work great with custom content as well.
 
 ## Horizontal
 
-Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint’s `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
+Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|2xl}` to make a list group horizontal starting at that breakpoint’s `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
 
 **ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.
 

site/src/content/docs/components/modal.mdx

@@ -533,7 +533,7 @@ Modals have three optional sizes, available via modifier classes to be placed on
 | Small | `.modal-sm` | `300px` |
 | Default | <span class="text-body-secondary">None</span> | `500px` |
 | Large | `.modal-lg` | `800px` |
-| Extra large | `.modal-xl` | `1140px` |
+| Extra large | `.modal-xl` | `1200px` |
 </BsTable>
 
 Our default modal without modifier class constitutes the “medium” size modal.
@@ -600,9 +600,9 @@ Another override is the option to pop up a modal that covers the user viewport,
 | `.modal-fullscreen` | Always |
 | `.modal-fullscreen-sm-down` | `576px` |
 | `.modal-fullscreen-md-down` | `768px` |
-| `.modal-fullscreen-lg-down` | `992px` |
-| `.modal-fullscreen-xl-down` | `1200px` |
-| `.modal-fullscreen-xxl-down` | `1400px` |
+| `.modal-fullscreen-lg-down` | `1024px` |
+| `.modal-fullscreen-xl-down` | `1280px` |
+| `.modal-fullscreen-2xl-down` | `1536px` |
 </BsTable>
 
 <Example showMarkup={false} code={`<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full screen</button>
@@ -610,7 +610,7 @@ Another override is the option to pop up a modal that covers the user viewport,
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenMd">Full screen below md</button>
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenLg">Full screen below lg</button>
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXl">Full screen below xl</button>
-  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXxl">Full screen below xxl</button>`} />
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen2xl">Full screen below 2xl</button>`} />
 
 ```html
 <!-- Full screen modal -->
@@ -704,11 +704,11 @@ Another override is the option to pop up a modal that covers the user viewport,
   </div>
 </div>
 
-<div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1" aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true">
-  <div class="modal-dialog modal-fullscreen-xxl-down">
+<div class="modal fade" id="exampleModalFullscreen2xl" tabindex="-1" aria-labelledby="exampleModalFullscreen2xlLabel" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen-2xl-down">
     <div class="modal-content">
       <div class="modal-header">
-        <h1 class="modal-title fs-4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h1>
+        <h1 class="modal-title fs-4" id="exampleModalFullscreen2xlLabel">Full screen below 2xl</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">

site/src/content/docs/components/navbar.mdx

@@ -10,7 +10,7 @@ import { getConfig } from '@libs/config'
 
 Here’s what you need to know before getting started with the navbar:
 
-- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes.
+- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-2xl}` for responsive collapsing and [color scheme](#color-schemes) classes.
 - Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.
 - Use our [spacing]([[docsref:/utilities/spacing]]) and [flex]([[docsref:/utilities/flex]]) utility classes for controlling spacing and alignment within navbars.
 - Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
@@ -499,7 +499,7 @@ Here’s an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-h
 
 ## Responsive behaviors
 
-Navbars can use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
+Navbars can use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-2xl}` classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
 
 For navbars that never collapse, add the `.navbar-expand` class on the navbar. For navbars that always collapse, don’t add any `.navbar-expand` class.
 

site/src/content/docs/components/offcanvas.mdx

@@ -146,7 +146,7 @@ Responsive offcanvas classes hide content outside the viewport from a specified
 - `.offcanvas-md`
 - `.offcanvas-lg`
 - `.offcanvas-xl`
-- `.offcanvas-xxl`
+- `.offcanvas-2xl`
 
 To make a responsive offcanvas, replace the `.offcanvas` base class with a responsive variant and ensure your close button has an explicit `data-bs-target`.
 

site/src/content/docs/content/tables.mdx

@@ -16,11 +16,7 @@ Using the most basic table markup, here’s how `.table`-based tables look in Bo
 
 ## Variants
 
-Use contextual classes to color tables, table rows or individual cells.
-
-<Callout>
-**Heads up!** Because of the more complicated CSS used to generate our table variants, they most likely won’t see color mode adaptive styling until v6.
-</Callout>
+Use theme-specific color classes to style tables, table rows, or individual cells. These adapt to color modes as well.
 
 <div class="bd-example">
   <table class="table">
@@ -81,9 +77,9 @@ Use `.table-striped-columns` to add zebra-striping to any table column.
 
 These classes can also be added to table variants:
 
-<Table class="table table-dark table-striped" />
+<Table class="table table-striped" theme="dark" />
 
-<Table class="table table-dark table-striped-columns" />
+<Table class="table table-striped-columns" theme="dark" />
 
 <Table class="table table-success table-striped" />
 
@@ -105,7 +101,7 @@ These hoverable rows can also be combined with the striped rows variant:
 
 Highlight a table row or cell by adding a `.table-active` class.
 
-<Example showMarkup={false} code={`
+<Example code={`
 <table class="table">
   <thead>
     <tr>
@@ -136,9 +132,7 @@ Highlight a table row or cell by adding a `.table-active` class.
     </tr>
   </tbody>
 </table>
-`} />
-
-```html
+`} customMarkup={`
 <table class="table">
   <thead>
     ...
@@ -158,9 +152,9 @@ Highlight a table row or cell by adding a `.table-active` class.
     </tr>
   </tbody>
 </table>
-```
+`} />
 
-<Example showMarkup={false} code={`
+<Example code={`
 <table class="table table-dark">
   <thead>
     <tr>
@@ -191,9 +185,7 @@ Highlight a table row or cell by adding a `.table-active` class.
     </tr>
   </tbody>
 </table>
-`} />
-
-```html
+`} customMarkup={`
 <table class="table table-dark">
   <thead>
     ...
@@ -213,21 +205,25 @@ Highlight a table row or cell by adding a `.table-active` class.
     </tr>
   </tbody>
 </table>
-```
+`} />
 
 ## How do the variants and accented tables work?
 
 For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants):
 
 - We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don’t get into trouble if semi-transparent colors are used as table backgrounds.
+
 - Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));` to layer on top of any specified `background-color`. It uses custom cascade to override the `box-shadow`, regardless the CSS specificity. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is set to `transparent` by default, we don’t have a default box shadow.
+
 - When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, either `--bs-table-bg-type` or `--bs-table-bg-state` (by default set to `initial`) are set to a semitransparent color (`--bs-table-striped-bg`, `--bs-table-active-bg` or `--bs-table-hover-bg`) to colorize the background and override default `--bs-table-accent-bg`.
+
 - For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color.
+
 - Text and border colors are generated the same way, and their colors are inherited by default.
 
 Behind the scenes it looks like this:
 
-<ScssDocs name="table-variant" file="scss/content/_tables.scss" />
+<ScssDocs name="table-variants-loop" file="scss/content/_tables.scss" />
 
 ## Table borders
 
@@ -296,7 +292,7 @@ Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<
 
 Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]([[docsref:/utilities/vertical-align]]) classes to re-align where needed.
 
-<Example showMarkup={false} code={`
+<Example code={`
 <div class="table-responsive">
   <table class="table align-middle">
     <thead>
@@ -329,9 +325,7 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
     </tbody>
   </table>
 </div>
-`} />
-
-```html
+`} customMarkup={`
 <div class="table-responsive">
   <table class="table align-middle">
     <thead>
@@ -355,13 +349,13 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
     </tbody>
   </table>
 </div>
-```
+`} />
 
 ## Nesting
 
 Border styles, active styles, and table variants are not inherited by nested tables.
 
-<Example showMarkup={false} code={`
+<Example code={`
 <table class="table table-striped table-bordered">
   <thead>
     <tr>
@@ -416,9 +410,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
     </tr>
   </tbody>
 </table>
-`} />
-
-```html
+`} customMarkup={`
 <table class="table table-striped table-bordered">
   <thead>
     ...
@@ -435,7 +427,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
     ...
   </tbody>
 </table>
-```
+`} />
 
 ## How nesting works
 
@@ -443,101 +435,7 @@ To prevent *any* styles from leaking to nested tables, we use the child combinat
 
 Note that if you add `<tr>`s as direct children of a table, those `<tr>` will be wrapped in a `<tbody>` by default, thus making our selectors work as intended.
 
-## Anatomy
-
-### Table head
-
-Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make `<thead>`s appear light or dark gray.
-
-<Example showMarkup={false} code={`
-<table class="table">
-  <thead class="table-light">
-    <tr>
-      <th scope="col">#</th>
-      <th scope="col">First</th>
-      <th scope="col">Last</th>
-      <th scope="col">Handle</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td>John</td>
-      <td>Doe</td>
-      <td>@social</td>
-    </tr>
-  </tbody>
-</table>
-`} />
-
-```html
-<table class="table">
-  <thead class="table-light">
-    ...
-  </thead>
-  <tbody>
-    ...
-  </tbody>
-</table>
-```
-
-<Example showMarkup={false} code={`
-<table class="table">
-  <thead class="table-dark">
-    <tr>
-      <th scope="col">#</th>
-      <th scope="col">First</th>
-      <th scope="col">Last</th>
-      <th scope="col">Handle</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">1</th>
-      <td>Mark</td>
-      <td>Otto</td>
-      <td>@mdo</td>
-    </tr>
-    <tr>
-      <th scope="row">2</th>
-      <td>Jacob</td>
-      <td>Thornton</td>
-      <td>@fat</td>
-    </tr>
-    <tr>
-      <th scope="row">3</th>
-      <td>John</td>
-      <td>Doe</td>
-      <td>@social</td>
-    </tr>
-  </tbody>
-</table>
-`} />
-
-```html
-<table class="table">
-  <thead class="table-dark">
-    ...
-  </thead>
-  <tbody>
-    ...
-  </tbody>
-</table>
-```
-
-### Table foot
+## Footer
 
 <Example showMarkup={false} code={`
 <table class="table">
@@ -594,7 +492,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
 </table>
 ```
 
-### Captions
+## Caption
 
 A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
 
@@ -653,7 +551,7 @@ You can also put the `<caption>` on the top of the table with `.caption-top`.
 
 ## Responsive tables
 
-Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`.
+Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-2xl}`.
 
 <Callout type="warning">
 ##### Vertical clipping/truncation
@@ -665,7 +563,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
 
 Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
 
-<Example showMarkup={false} code={`
+<Example code={`
 <div class="table-responsive">
   <table class="table">
     <thead>
@@ -722,19 +620,17 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
     </tbody>
   </table>
 </div>
-`} />
-
-```html
+`} customMarkup={`
 <div class="table-responsive">
   <table class="table">
     ...
   </table>
 </div>
-```
+`} />
 
 ### Breakpoint specific
 
-Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
+Use `.table-responsive{-sm|-md|-lg|-xl|-2xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
 
 **These tables may appear broken until their responsive styles apply at specific viewport widths.**
 

site/src/content/docs/customize/color.mdx

@@ -1,360 +1,60 @@
 ---
 title: Color
-description: Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
+description: Bootstrap is supported by an extensive color system that powers our revamped theme, components, and color modes. This enables more comprehensive customization and extension for any project.
 toc: true
 ---
 
 import { getData } from '@libs/data'
 import { getSequence } from '@libs/utils'
 
+export const additionalColors = [
+  'white',
+  'black',
+]
+
 ## Colors
 
-Bootstrap’s color palette has continued to expand and become more nuanced in v5.3.0. We’ve added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged.
+There are 13 shades of 16 colors in Bootstrap's new color system, meaning we have 208 colors to work with when using Bootstrap.
 
-Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
+All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
 
-<Callout type="warning">
-**Heads up!** There’s some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6.
-</Callout>
+Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.
 
-<div class="table-responsive">
-  <table class="table table-swatches">
-    <thead>
-      <tr>
-        <th style="width: 340px;">Description</th>
-        <th style="width: 200px;" class="ps-0">Swatch</th>
-        <th>Variables</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td rowspan="2">
-          **Body —** Default foreground (color) and background, including components.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2" style="background-color: var(--bs-body-color);">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-body-color`<br/>`--bs-body-color-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-body-bg`<br/>`--bs-body-bg-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="2">
-          **Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-secondary-color`<br/>`--bs-secondary-color-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-secondary-bg`<br/>`--bs-secondary-bg-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="2">
-          **Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-tertiary-color`<br/>`--bs-tertiary-color-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-tertiary-bg`<br/>`--bs-tertiary-bg-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          **Emphasis —** For higher contrast text. Not applicable for backgrounds.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-emphasis-color`<br/>`--bs-emphasis-color-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          **Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-border-color`<br/>`--bs-border-color-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="4">
-          **Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2 bg-primary">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-primary`<br/>`--bs-primary-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-primary-bg-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-primary-border-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div>
-        </td>
-        <td>
-          `--bs-primary-text-emphasis`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="4">
-          **Success —** Theme color used for positive or successful actions and information.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2 bg-success">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-success`<br/>`--bs-success-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-success-bg-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-success-border-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div>
-        </td>
-        <td>
-          `--bs-success-text-emphasis`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="4">
-          **Danger —** Theme color used for errors and dangerous actions.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2 bg-danger">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-danger`<br/>`--bs-danger-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-danger-bg-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-danger-border-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div>
-        </td>
-        <td>
-          `--bs-danger-text-emphasis`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="4">
-          **Warning —** Theme color used for non-destructive warning messages.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2 bg-warning">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-warning`<br/>`--bs-warning-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-warning-bg-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-warning-border-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div>
-        </td>
-        <td>
-          `--bs-warning-text-emphasis`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="4">
-          **Info —** Theme color used for neutral and informative content.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2 bg-info">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-info`<br/>`--bs-info-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-info-bg-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-info-border-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div>
-        </td>
-        <td>
-          `--bs-info-text-emphasis`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="4">
-          **Light —** Additional theme option for less contrasting colors.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2 bg-light">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-light`<br/>`--bs-light-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-light-bg-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-light-border-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div>
-        </td>
-        <td>
-          `--bs-light-text-emphasis`
-        </td>
-      </tr>
-      <tr>
-        <td rowspan="4">
-          **Dark —** Additional theme option for higher contrasting colors.
-        </td>
-        <td class="ps-0">
-          <div class="p-3 rounded-2 bg-dark">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-dark`<br/>`--bs-dark-rgb`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-dark-bg-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid">&nbsp;</div>
-        </td>
-        <td>
-          `--bs-dark-border-subtle`
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div>
-        </td>
-        <td>
-          `--bs-dark-text-emphasis`
-        </td>
-      </tr>
-    </tbody>
-  </table>
+<div class="grid gap-0" style={{gridTemplateColumns: 'repeat(13, 1fr)', gap: '4px', minWidth: '0'}}>
+  {getData('colors').map((color) => {
+     return (
+       <div class="d-contents grid-full">
+         <h5 class="d-block text-capitalize grid-full">{color.name.replace('-', ' ')}</h5>
+
+         {["025", "050", ...getSequence(100, 900, 100), 950, 975].map((value) => {
+           return (
+             <div class="mb-3 font-monospace small">
+               <Swatch bg={`${color.name}-${value}`} size="medium" />
+               <div class="text-center color-3">{value}</div>
+             </div>
+           )
+         })}
+       </div>
+     )
+   })}
+
+   <div class="d-contents grid-full">
+    <h5 class="d-block text-capitalize grid-full">Additional</h5>
+    {additionalColors.map((color) => {
+      return (
+        <div class="mb-3 font-monospace small">
+          <Swatch bg={`${color}`} size="medium" />
+          <div class="text-center color-3">{color}</div>
+        </div>
+      )
+    })}
+   </div>
 </div>
 
+<Callout>
+  @mdo-do: Move this content to Theme page most likely. Replace with how to modify color variables.
+</Callout>
+
 ### Using the new colors
 
 These new colors are accessible via CSS variables and utility classes—like `--bs-primary-bg-subtle` and `.bg-primary-subtle`—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color’s associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.
@@ -383,53 +83,6 @@ All these colors are available as a Sass map, `$theme-colors`.
 
 Check out [our Sass maps and loops docs]([[docsref:/customize/sass#maps-and-loops]]) for how to modify these colors.
 
-### All colors
-
-All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
-
-Be sure to monitor contrast ratios as you customize colors. As shown below, we’ve added three contrast ratios to each of the main colors—one for the swatch’s current colors, one for against white, and one for against black.
-
-<div class="row font-monospace">
-  {getData('colors').map((color) => {
-    if ((color.name !== "white") && (color.name !== "gray") && (color.name !== "gray-dark")) {
-      return (
-        <div class="col-md-4 mb-3">
-          <div class={`p-3 mb-2 position-relative swatch-${color.name}`}>
-            <strong class="d-block">${color.name}</strong>
-            {color.hex}
-          </div>
-
-          {getSequence(100, 900, 100).map((value) => {
-            return (
-              <div class={`p-3 bd-${color.name}-${value}`}>${color.name}-{value}</div>
-            )
-          })}
-        </div>
-      )
-    }
-  })}
-
-  <div class="col-md-4 mb-3">
-    <div class="p-3 mb-2 position-relative swatch-gray-500"><strong class="d-block">$gray-500</strong>#adb5bd</div>
-    {getData('grays').map((gray) => {
-      return (
-        <div class={`p-3 bd-gray-${gray.name}`}>$gray-{gray.name}</div>
-      )
-    })}
-  </div>
-
-  <div class="col-md-4 mb-3">
-    <div class="p-3 mb-2 bd-black text-white">
-      <strong class="d-block">$black</strong>
-      #000
-    </div>
-    <div class="p-3 mb-2 bd-white border">
-      <strong class="d-block">$white</strong>
-      #fff
-    </div>
-  </div>
-</div>
-
 ### Notes on Sass
 
 Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass’s `mix()` color function.
@@ -444,7 +97,6 @@ Bootstrap’s source Sass files include three maps to help you quickly and easil
 
 - `$colors` lists all our available base (`500`) colors
 - `$theme-colors` lists all semantically named theme colors (shown below)
-- `$grays` lists all tints and shades of gray
 
 Within `scss/_variables.scss`, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the `$colors` Sass map:
 

site/src/content/docs/customize/overview.mdx

@@ -1,6 +1,6 @@
 ---
 title: Customize
-description: Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.
+description: Learn how Bootstrap's colors power our design system theme. Customize and extend Bootstrap with Sass, a boatload of global options, and plenty of global and component-specific CSS variables.
 toc: false
 aliases: "/docs/[[config:docs_version]]/customize/"
 sections:
@@ -9,9 +9,11 @@ sections:
   - title: Options
     description: Customize Bootstrap with built-in variables to easily toggle global CSS preferences.
   - title: Color
-    description: Learn about and customize the color systems that support the entire toolkit.
+    description: Bootstrap includes 11 shades of 14 colors in our color system that can be used to power our theme.
+  - title: Theme
+    description: Semantic colors, typography, settings, and more that can be customized to fit your brand.
   - title: Color modes
-    description: Explore our default light mode and the new dark mode, or create custom color modes yourself.
+    description: Build in light mode, dark mode, or both.
   - title: Components
     description: Learn how we build nearly all our components responsively and with base and modifier classes.
   - title: CSS variables
@@ -35,6 +37,18 @@ For those who want to use the distribution files, review the [getting started pa
 
 As you familiarize yourself with Bootstrap, continue exploring this section for more details on how to utilize our global options, making use of and changing our color system, how we build our components, how to use our growing list of CSS custom properties, and how to optimize your code when building with Bootstrap.
 
+## Sass vs CSS
+
+When Bootstrap 5 first introduced CSS variables, the Sass vs CSS variables setup was a little confusing and somewhat limited. As such, the relationship between Sass and CSS variables was very unclear. In Bootstrap 6, we've clarified that—here's how the two interact.
+
+- At a high level, Sass is a way to manage [global configuration options]([[docsref:/customize/options]]) and generate CSS for our utilities, components, typography, custom properties (aka CSS variables) and more.
+- We consider CSS variables to be the **first-class customization layer** for our users.
+- Sass variables are available for nearly every component—like the new `$check-*` variables for checkboxes. These Sass variables are then consumed by CSS variables on the relevant selector (e.g., `.check` with `--bs-check-bg: #{$check-bg}`) and applied through various properties.
+- CSS variables get their values from Sass variables, or CSS variables, depending on the context.
+- Sass helps us generate CSS variables, too. Think theme and config values, but across components, Sass is consuming CSS variables. This gives you two, clearer avenues for customization.
+
+With that in mind, you can customize Bootstrap 6 via CSS or Sass, both of which are easier than ever thanks to a revamped color system and theme configuration.
+
 ## CSPs and embedded SVGs
 
 Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. **For organizations with more strict <abbr title="Content Security Policy">CSP</abbr> configurations**, we’ve documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options.
@@ -42,10 +56,7 @@ Several Bootstrap components include embedded SVGs in our CSS to style component
 - [Accordion]([[docsref:/components/accordion]])
 - [Carousel controls]([[docsref:/components/carousel#with-controls]])
 - [Close button]([[docsref:/components/close-button]]) (used in alerts and modals)
-- [Form checkboxes and radio buttons]([[docsref:/forms/checks-radios]])
-- [Form switches]([[docsref:/forms/checks-radios#switches]])
 - [Form validation icons]([[docsref:/forms/validation#server-side]])
 - [Navbar toggle buttons]([[docsref:/components/navbar#responsive-behaviors]])
-- [Select menus]([[docsref:/forms/select]])
 
 Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]([[docsref:/getting-started/webpack#extracting-svg-files]]), removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.

site/src/content/docs/customize/theme.mdx

@@ -0,0 +1,209 @@
+---
+title: Theme
+description: The Bootstrap theme is a set of semantically named colors that are used to style our components, utilities, and more. The theme is configurable, responds to color modes, and can be consumed via Sass or CSS.
+toc: true
+---
+
+import { getData } from '@libs/data'
+
+export const themeTokens = [
+  'base',
+  'text',
+  'bg',
+  'bg-subtle',
+  'bg-muted',
+  'border',
+  'focus-ring',
+  'contrast'
+]
+
+export const themeBgs = [
+  'null',
+  '1',
+  '2',
+  '3',
+  'white',
+  'black',
+  'transparent',
+  'inherit',
+]
+
+export const themeFgs = [
+  'null',
+  '1',
+  '2',
+  '3',
+  'white',
+  'black',
+  'transparent',
+  'inherit',
+]
+
+## How it works
+
+Theme colors are defined in the `$new-theme-colors` Sass map. This map is used to generate our theme color values. You'll find these values in the `_theme.scss` file. These are where we define our design tokens for Bootstrap, across both light and dark color modes.
+
+Theme colors include the following semantic colors:
+
+<BsTable>
+| Theme color | Default value | Description |
+| --- | --- | --- |
+| `primary` | <Swatch size="inline" bg="blue-500" /> `var(--bs-blue-500)`| Main brand color for primary actions |
+| `accent` | <Swatch size="inline" bg="indigo-500" /> `var(--bs-indigo-500)` | Secondary brand color (new in v6) |
+| `success` | <Swatch size="inline" bg="green-500" /> `var(--bs-green-500)` | Positive actions and successful states |
+| `danger` | <Swatch size="inline" bg="red-500" /> `var(--bs-red-500)` | Destructive actions and error states |
+| `warning` | <Swatch size="inline" bg="yellow-500" /> `var(--bs-yellow-500)` | Cautionary messages and warning states |
+| `info` | <Swatch size="inline" bg="cyan-500" /> `var(--bs-cyan-500)` | Informational messages and neutral states |
+| `emphasis` | <Swatch size="inline" bg="gray-900" /> `var(--bs-gray-900)` | High contrast text on a dark background |
+| `secondary` | <Swatch size="inline" bg="gray-300" /> `var(--bs-gray-300)` | Less prominent secondary actions |
+</BsTable>
+
+And within each semantic theme color, you'll find the following keys, most of which are color-mode adaptive:
+
+<BsTable>
+| Theme token | Description |
+| --- | --- |
+| `base` | The default color value for the semantic color |
+| `text` | Accessible text color (against body, plus `subtle` and `muted` color tokens) |
+| `bg` | For solid colored backgrounds with high contrast |
+| `bg-subtle` | Lowest contrast backgrounds, usually paired with `text` key for text color |
+| `bg-muted` | Lower contrast backgrounds, often used for disabled states |
+| `border` | Borders and dividers |
+| `focus-ring` | For visible focus indicators and outline styles |
+| `contrast` | Text color that needs to be readable on the `base` and `bg` colors |
+</BsTable>
+
+## Theme colors
+
+Every token is available as a CSS variable, and most are then consumed by our utilities and components. So for the `primary` color, you have the following colors:
+
+<div class="grid gap-0" style={{gridTemplateColumns: 'repeat(8, 1fr)', gap: '8px', minWidth: '0'}}>
+  {getData('theme-colors').map((color) => {
+    return (
+      <div class="d-contents grid-full">
+        <h6 class="d-block text-capitalize grid-full">{color.title}</h6>
+        {themeTokens.map((token) => (
+          <div class="mb-3 font-monospace">
+            <Swatch bg={`${color.name}-${token}`} size="medium" />
+            <div class="text-center small color-3">{token}</div>
+          </div>
+        ))}
+      </div>
+    )
+  })}
+</div>
+
+## `fg`, `bg`, and `border`
+
+While several text, background, and border colors are configured in the base `$new-theme-colors` Sass map, there are several additional options available for more nuanced theming with regards to foreground, background, and border colors.
+
+Tokens for these three themes are defined in their respective `$theme-fgs`, `$theme-bgs`, and `$theme-borders` Sass maps. These maps are used to generate color mode adaptive `color`, `background-color`, and `border-color` values that are then consumed by our utilities and components. You'll find these values in the `_theme.scss` file.
+
+Theme backgrounds include several practical and semantic color options.
+
+<BsTable>
+| Background | Default value | Description |
+| --- | --- | --- |
+| `null` | <Swatch bg="bg" size="inline" cssVar="bg" /> | Default background color |
+| `1` | <Swatch bg="bg-1" size="inline" cssVar="bg-1" /> | Lowest contrast background color |
+| `2` | <Swatch bg="bg-2" size="inline" cssVar="bg-2" /> | Lower contrast background color |
+| `3` | <Swatch bg="bg-3" size="inline" cssVar="bg-3" /> | Medium contrast background color, typically used for disabled states |
+| `white` | <Swatch bg="bg-white" size="inline" cssVar="bg-white" /> | Pure white background color |
+| `black` | <Swatch bg="bg-black" size="inline" cssVar="bg-black" /> | Pure black background color |
+| `transparent` | <Swatch bg="bg-transparent" size="inline" cssVar="bg-transparent" /> | Transparent background color |
+| `inherit` |`inherit` | Inherited background color |
+</BsTable>
+
+Almost all those options are also available for foreground text colors.
+
+<BsTable>
+| Foreground | Default value | Description |
+| --- | --- | --- |
+| `null` | <Swatch bg="fg" size="inline" cssVar="fg" /> | Default foreground color |
+| `1` | <Swatch bg="fg-1" size="inline" cssVar="fg-1" /> | Lowest contrast foreground color |
+| `2` | <Swatch bg="fg-2" size="inline" cssVar="fg-2" /> | Lower contrast foreground color |
+| `3` | <Swatch bg="fg-3" size="inline" cssVar="fg-3" /> | Medium contrast foreground color |
+| `white` | <Swatch bg="fg-white" size="inline" cssVar="fg-white" /> | Pure white foreground color |
+| `black` | <Swatch bg="fg-black" size="inline" cssVar="fg-black" /> | Pure black foreground color |
+| `inherit` | `inherit` | Inherited foreground color |
+</BsTable>
+
+Border colors have similar levels, but different naming.
+
+<BsTable>
+| Border | Default value | Description |
+| --- | --- | --- |
+| `null` | <Swatch bg="border" size="inline" cssVar="border" /> | Default border color |
+| `muted` | <Swatch bg="border-muted" size="inline" cssVar="border-muted" /> | Muted border color |
+| `subtle` | <Swatch bg="border-subtle" size="inline" cssVar="border-subtle" /> | Subtle border color |
+| `emphasized` | <Swatch bg="border-emphasized" size="inline" cssVar="border-emphasized" /> | Emphasized border color |
+</BsTable>
+
+### Suggested pairings
+
+Not all foreground colors are appropriate for all background colors. To maintain color contrast for accessibility, here are some recommended pairings.
+
+<div class="d-flex gap-3 w-100">
+  <div class="d-flex flex-column gap-2 w-100">
+    <Swatch bg="bg" fg="fg" size="large" contrast="15.71" contrastDark="14.59">fg on bg</Swatch>
+    <Swatch bg="bg" fg="fg-1" size="large" contrast="12.50" contrastDark="10.77">fg-1 on bg</Swatch>
+    <Swatch bg="bg" fg="fg-2" size="large" contrast="9.54" contrastDark="7.76">fg-2 on bg</Swatch>
+    <Swatch bg="bg" fg="fg-3" size="large" contrast="7.01" contrastDark="6.32">fg-3 on bg</Swatch>
+  </div>
+  <div class="d-flex flex-column gap-2 w-100">
+    <Swatch bg="bg-1" fg="fg" size="large">fg on bg-1</Swatch>
+    <Swatch bg="bg-1" fg="fg-1" size="large">fg-1 on bg-1</Swatch>
+    <Swatch bg="bg-1" fg="fg-2" size="large">fg-2 on bg-1</Swatch>
+    <Swatch bg="bg-1" fg="fg-3" size="large">fg-3 on bg-1</Swatch>
+  </div>
+  <div class="d-flex flex-column gap-2 w-100">
+    <Swatch bg="bg-2" fg="fg" size="large">fg on bg-2</Swatch>
+    <Swatch bg="bg-2" fg="fg-1" size="large">fg-1 on bg-2</Swatch>
+    <Swatch bg="bg-2" fg="fg-2" size="large">fg-2 on bg-2</Swatch>
+    <Swatch bg="bg-2" fg="fg-3" size="large">fg-3 on bg-2</Swatch>
+  </div>
+  <div class="d-flex flex-column gap-2 w-100">
+    <Swatch bg="bg-3" fg="fg" size="large">fg on bg-3</Swatch>
+    <Swatch bg="bg-3" fg="fg-1" size="large">fg-1 on bg-3</Swatch>
+    <Swatch bg="bg-3" fg="fg-2" size="large">fg-2 on bg-3</Swatch>
+    <Swatch bg="bg-3" fg="fg-3" size="large">fg-3 on bg-3</Swatch>
+  </div>
+</div>
+
+## Theme foregrounds
+
+Theme foregrounds are defined in the `$theme-fgs` Sass map. This map is used to generate our theme foreground values. You'll find these values in the `_theme.scss` file. These are where we define our design tokens for Bootstrap, across both light and dark color modes.
+
+Theme foregrounds include the following semantic colors:
+
+<BsTable>
+| Foreground | Default value | Description |
+| --- | --- | --- |
+| `null` | `var(--bs-gray-900)` | Default foreground color |
+| `1` | `var(--bs-gray-800)` | Lowest contrast foreground color |
+| `2` | `var(--bs-gray-700)` | Lower contrast foreground color |
+| `3` | `var(--bs-gray-600)` | Medium contrast foreground color |
+</BsTable>
+
+<div class="grid gap-0" style={{gridTemplateColumns: 'repeat(8, 1fr)', gap: '8px', minWidth: '0'}}>
+  {themeFgs.map((color) => {
+    return (
+      <div>
+        <Swatch color={`fg-${color}`} size="large" />
+        <div class="text-center color-3">{color}</div>
+      </div>
+    )
+  })}
+</div>
+
+## Theme Sass map
+
+We use a large, nested Sass map to generate our theme color values.
+
+<ScssDocs name="theme-colors" file="scss/_theme.scss" />
+
+## CSS variables
+
+CSS variables are generated from the `$new-theme-colors` Sass map at the `:root` level inside `_root.scss` using a Sass loop.
+
+<ScssDocs name="root-theme-variables" file="scss/_root.scss" />

site/src/content/docs/forms/checkbox.mdx

@@ -0,0 +1,134 @@
+---
+title: Checkbox
+description: Highly customizable, native checkbox `<input>` elements for presenting toggleable options.
+toc: true
+---
+
+import { getData } from '@libs/data'
+
+**Trialing new components with the following rules:**
+
+- New components are purely components, they don't assume layout of any kind.
+- New options for form layout:
+  - Use new form groups to lay out your forms: `.control-group`, `.check-group`, `.radio-group`.
+  - Use helpers to lay out your forms—`.hstack` and `.vstack`—with utilities.
+
+## Basic checkbox
+
+All checkbox styling is contained to a wrapper class, `.check`. This does the following:
+
+- Adds a stacking grid layout for the checkbox and custom SVG icon.
+- Overrides the default `<input>` appearance with themed colors.
+- Handles the toggling of separate paths in our custom SVG for the `:checked` and indeterminate states. Two `<path>`s are included in the SVG, one for each state, and the appropriate `<path>` is shown based on the `<input>`’s state.
+
+For folks looking to replace our provided icons, you'll need to add the `.checked` and `.indeterminate` classes to the `<path>`s and use them in a single `<svg>` element.
+
+Checkbox layout and labels are handled with additional HTML and CSS.
+
+<Example code={`<div class="check">
+    <input type="checkbox" id="check" checked />
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
+      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+    </svg>
+  </div>`} />
+
+## Indeterminate
+
+Checkboxes can utilize the indeterminate pseudo class when manually set via JavaScript. There is no available HTML attribute for specifying it.
+
+<Example addStackblitzJs class="bd-example-indeterminate" code={`<div class="check">
+    <input type="checkbox" id="checkIndeterminate" />
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+      <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
+      <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+    </svg>
+  </div>`} />
+
+## Label
+
+Wrap the `.check` in a `<b-checkgroup>` layout component and add your label. We use a custom element for layout here that sets some basic flexbox styling.
+
+Consider margin utilities for additional spacing, and flex utilities for alignment.
+
+<Example code={`<b-checkgroup>
+    <div class="check">
+      <input type="checkbox" id="checkLabel" />
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      </svg>
+    </div>
+    <label for="checkLabel">Example new checkbox</label>
+  </b-checkgroup>`} />
+
+## Theme colors
+
+Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.check` element. This will set the checked background and border color to the theme color.
+
+<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<b-checkgroup>
+    <div class="check checked-${themeColor.name}">
+      <input type="checkbox" id="check${themeColor.name}" checked />
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      </svg>
+    </div>
+    <label for="check${themeColor.name}">Example ${themeColor.name} checkbox</label>
+  </b-checkgroup>`)} />
+
+## Description
+
+With this layout approach, you can easily add a description or other content after the label. Here we use another custom element, `<b-vstack>`, to stack the label and description.
+
+<Example code={`<b-checkgroup>
+    <div class="check">
+      <input type="checkbox" id="checkDescription" />
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      </svg>
+    </div>
+    <b-vstack>
+      <label for="checkDescription">Example new checkbox</label>
+      <small class="description">Supporting description for the above label.</small>
+    </b-vstack>
+  </b-checkgroup>`} />
+
+## Disabled
+
+Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
+
+<Example code={`<b-checkgroup>
+    <div class="check">
+      <input type="checkbox" id="checkDisabled" disabled />
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      </svg>
+    </div>
+    <label for="checkDisabled">Example new checkbox</label>
+  </b-checkgroup>`} />
+
+<Example code={`<b-checkgroup>
+    <div class="check">
+      <input type="checkbox" id="checkDisabledChecked" checked disabled />
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
+        <path class="checked" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/>
+        <path class="indeterminate" fill='none' stroke='currentcolor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/>
+      </svg>
+    </div>
+    <label for="checkDisabledChecked">Example new checkbox</label>
+  </b-checkgroup>`} />
+
+## CSS
+
+### Variables
+
+CSS variables for the checkbox component are built on the Sass variables.
+
+<ScssDocs name="check-css-variables" file="scss/forms/_check.scss" />
+
+### Sass variables
+
+<ScssDocs name="check-variables" file="scss/forms/_check.scss" />

site/src/content/docs/forms/checks-radios.mdx

@@ -1,311 +0,0 @@
----
-title: Checks and radios
-description: Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
-aliases: "/docs/[[config:docs_version]]/forms/checks/"
-toc: true
----
-
-## Approach
-
-Browser default checkboxes and radios are replaced with the help of `.form-check`, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
-
-Structurally, our `<input>`s and `<label>`s are sibling elements as opposed to an `<input>` within a `<label>`. This is slightly more verbose as you must specify `id` and `for` attributes to relate the `<input>` and `<label>`. We use the sibling selector (`~`) for all our `<input>` states, like `:checked` or `:disabled`. When combined with the `.form-check-label` class, we can easily style the text for each item based on the `<input>`’s state.
-
-Our checks use custom Bootstrap icons to indicate checked or indeterminate states.
-
-## Checks
-
-<Example code={`<div class="form-check">
-    <input class="form-check-input" type="checkbox" value="" id="checkDefault">
-    <label class="form-check-label" for="checkDefault">
-      Default checkbox
-    </label>
-  </div>
-  <div class="form-check">
-    <input class="form-check-input" type="checkbox" value="" id="checkChecked" checked>
-    <label class="form-check-label" for="checkChecked">
-      Checked checkbox
-    </label>
-  </div>`} />
-
-### Indeterminate
-
-Checkboxes can utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
-
-<Example addStackblitzJs class="bd-example-indeterminate" code={`<div class="form-check">
-    <input class="form-check-input" type="checkbox" value="" id="checkIndeterminate">
-    <label class="form-check-label" for="checkIndeterminate">
-      Indeterminate checkbox
-    </label>
-  </div>`} />
-
-### Disabled
-
-Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
-
-<Example addStackblitzJs class="bd-example-indeterminate" code={`<div class="form-check">
-    <input class="form-check-input" type="checkbox" value="" id="checkIndeterminateDisabled" disabled>
-    <label class="form-check-label" for="checkIndeterminateDisabled">
-      Disabled indeterminate checkbox
-    </label>
-  </div>
-  <div class="form-check">
-    <input class="form-check-input" type="checkbox" value="" id="checkDisabled" disabled>
-    <label class="form-check-label" for="checkDisabled">
-      Disabled checkbox
-    </label>
-  </div>
-  <div class="form-check">
-    <input class="form-check-input" type="checkbox" value="" id="checkCheckedDisabled" checked disabled>
-    <label class="form-check-label" for="checkCheckedDisabled">
-      Disabled checked checkbox
-    </label>
-  </div>`} />
-
-## Radios
-
-<Example code={`<div class="form-check">
-    <input class="form-check-input" type="radio" name="radioDefault" id="radioDefault1">
-    <label class="form-check-label" for="radioDefault1">
-      Default radio
-    </label>
-  </div>
-  <div class="form-check">
-    <input class="form-check-input" type="radio" name="radioDefault" id="radioDefault2" checked>
-    <label class="form-check-label" for="radioDefault2">
-      Default checked radio
-    </label>
-  </div>`} />
-
-### Disabled
-
-Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
-
-<Example code={`<div class="form-check">
-    <input class="form-check-input" type="radio" name="radioDisabled" id="radioDisabled" disabled>
-    <label class="form-check-label" for="radioDisabled">
-      Disabled radio
-    </label>
-  </div>
-  <div class="form-check">
-    <input class="form-check-input" type="radio" name="radioDisabled" id="radioCheckedDisabled" checked disabled>
-    <label class="form-check-label" for="radioCheckedDisabled">
-      Disabled checked radio
-    </label>
-  </div>`} />
-
-## Switches
-
-A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Consider using `role="switch"` to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the `disabled` attribute.
-
-<Example code={`<div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" id="switchCheckDefault">
-    <label class="form-check-label" for="switchCheckDefault">Default switch checkbox input</label>
-  </div>
-  <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
-    <label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
-  </div>
-  <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" id="switchCheckDisabled" disabled>
-    <label class="form-check-label" for="switchCheckDisabled">Disabled switch checkbox input</label>
-  </div>
-  <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" id="switchCheckCheckedDisabled" checked disabled>
-    <label class="form-check-label" for="switchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
-  </div>`} />
-
-### Native switches
-
-Progressively enhance your switches for mobile Safari (iOS 17.4+) by adding a `switch` attribute to your input to enable haptic feedback when toggling switches, just like native iOS switches. There are no style changes attached to using this attribute in Bootstrap as all our switches use custom styles.
-
-<Example code={`<div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" value="" id="checkNativeSwitch" switch>
-    <label class="form-check-label" for="checkNativeSwitch">
-      Native switch haptics
-    </label>
-  </div>`} />
-
-Be sure to read more about [the switch attribute on the WebKit blog](https://webkit.org/blog/15054/an-html-switch-control/). Safari 17.4+ on macOS and iOS both have native-style switches in HTML while other browsers simply fall back to the standard checkbox appearance. Applying the attribute to a non-Bootstrap checkbox in more recent versions of Safari will render a native switch.
-
-## Default (stacked)
-
-By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.
-
-<Example code={`<div class="form-check">
-    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
-    <label class="form-check-label" for="defaultCheck1">
-      Default checkbox
-    </label>
-  </div>
-  <div class="form-check">
-    <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
-    <label class="form-check-label" for="defaultCheck2">
-      Disabled checkbox
-    </label>
-  </div>`} />
-
-<Example code={`<div class="form-check">
-    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
-    <label class="form-check-label" for="exampleRadios1">
-      Default radio
-    </label>
-  </div>
-  <div class="form-check">
-    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
-    <label class="form-check-label" for="exampleRadios2">
-      Second default radio
-    </label>
-  </div>
-  <div class="form-check">
-    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
-    <label class="form-check-label" for="exampleRadios3">
-      Disabled radio
-    </label>
-  </div>`} />
-
-## Inline
-
-Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.
-
-<Example code={`<div class="form-check form-check-inline">
-    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
-    <label class="form-check-label" for="inlineCheckbox1">1</label>
-  </div>
-  <div class="form-check form-check-inline">
-    <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
-    <label class="form-check-label" for="inlineCheckbox2">2</label>
-  </div>
-  <div class="form-check form-check-inline">
-    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
-    <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
-  </div>`} />
-
-<Example code={`<div class="form-check form-check-inline">
-    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
-    <label class="form-check-label" for="inlineRadio1">1</label>
-  </div>
-  <div class="form-check form-check-inline">
-    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
-    <label class="form-check-label" for="inlineRadio2">2</label>
-  </div>
-  <div class="form-check form-check-inline">
-    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
-    <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
-  </div>`} />
-
-## Reverse
-
-Put your checkboxes, radios, and switches on the opposite side with the `.form-check-reverse` modifier class.
-
-<Example code={`<div class="form-check form-check-reverse">
-    <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
-    <label class="form-check-label" for="reverseCheck1">
-      Reverse checkbox
-    </label>
-  </div>
-  <div class="form-check form-check-reverse">
-    <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
-    <label class="form-check-label" for="reverseCheck2">
-      Disabled reverse checkbox
-    </label>
-  </div>
-
-  <div class="form-check form-switch form-check-reverse">
-    <input class="form-check-input" type="checkbox" id="switchCheckReverse">
-    <label class="form-check-label" for="switchCheckReverse">Reverse switch checkbox input</label>
-  </div>`} />
-
-## Without labels
-
-Omit the wrapping `.form-check` for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`). See the [forms overview accessibility]([[docsref:/forms/overview/#accessibility]]) section for details.
-
-<Example code={`<div>
-    <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
-  </div>
-
-  <div>
-    <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
-  </div>`} />
-
-## Toggle buttons
-
-Create button-like checkboxes and radio buttons by using `.btn` styles rather than `.form-check-label` on the `<label>` elements. These toggle buttons can further be grouped in a [button group]([[docsref:/components/button-group]]) if needed.
-
-### Checkbox toggle buttons
-
-<Example code={`<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
-<label class="btn btn-primary" for="btn-check">Single toggle</label>
-
-<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
-<label class="btn btn-primary" for="btn-check-2">Checked</label>
-
-<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
-<label class="btn btn-primary" for="btn-check-3">Disabled</label>`} />
-
-<Example code={`<input type="checkbox" class="btn-check" id="btn-check-4" autocomplete="off">
-<label class="btn" for="btn-check-4">Single toggle</label>
-
-<input type="checkbox" class="btn-check" id="btn-check-5" checked autocomplete="off">
-<label class="btn" for="btn-check-5">Checked</label>
-
-<input type="checkbox" class="btn-check" id="btn-check-6" autocomplete="off" disabled>
-<label class="btn" for="btn-check-6">Disabled</label>`} />
-
-<Callout>
-Visually, these checkbox toggle buttons are identical to the [button plugin toggle buttons]([[docsref:/components/buttons#button-plugin]]). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked“/“not checked“ (since, despite their appearance, they are fundamentally still checkboxes), whereas the button plugin toggle buttons will be announced as “button“/“button pressed“. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
-</Callout>
-
-### Radio toggle buttons
-
-<Example code={`<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
-<label class="btn btn-secondary" for="option1">Checked</label>
-
-<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
-<label class="btn btn-secondary" for="option2">Radio</label>
-
-<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
-<label class="btn btn-secondary" for="option3">Disabled</label>
-
-<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
-<label class="btn btn-secondary" for="option4">Radio</label>`} />
-
-<Example code={`<input type="radio" class="btn-check" name="options-base" id="option5" autocomplete="off" checked>
-<label class="btn" for="option5">Checked</label>
-
-<input type="radio" class="btn-check" name="options-base" id="option6" autocomplete="off">
-<label class="btn" for="option6">Radio</label>
-
-<input type="radio" class="btn-check" name="options-base" id="option7" autocomplete="off" disabled>
-<label class="btn" for="option7">Disabled</label>
-
-<input type="radio" class="btn-check" name="options-base" id="option8" autocomplete="off">
-<label class="btn" for="option8">Radio</label>`} />
-
-### Outlined styles
-
-Different variants of `.btn`, such as the various outlined styles, are supported.
-
-<Example code={`<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
-<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>
-
-<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
-<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>
-
-<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
-<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>
-
-<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
-<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>`} />
-
-## CSS
-
-### Sass variables
-
-Variables for checks:
-
-<ScssDocs name="form-check-variables" file="scss/forms/_form-check.scss" />
-
-Variables for switches:
-
-<ScssDocs name="form-switch-variables" file="scss/forms/_form-check.scss" />

site/src/content/docs/forms/form-control.mdx

@@ -1,9 +1,13 @@
 ---
 title: Form controls
-description: Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.
+description: Give textual `<input>`, `<textarea>`, and `<select>` elements an upgrade with custom styles, sizing, focus states, and more.
 toc: true
 ---
 
+<Callout type="info">
+  **Heads up!** As of v6, `<select>` elements are now styled with the `.form-control` class. This reduces a ton of duplication and abstraction while making it easier to consistently customize the appearance of form controls.
+</Callout>
+
 ## Example
 
 Form controls are styled with a mix of Sass and CSS variables, allowing them to adapt to color modes and support any customization method.
@@ -13,17 +17,78 @@ Form controls are styled with a mix of Sass and CSS variables, allowing them to
     <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
   </div>
   <div class="mb-3">
+    <label for="exampleFormControlSelect1" class="form-label">Example select</label>
+    <select class="form-control" id="exampleFormControlSelect1">
+      <option>Open this select menu</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </select>
+  </div>
+  <div>
     <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
     <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
   </div>`} />
 
 ## Sizing
 
-Set heights using classes like `.form-control-lg` and `.form-control-sm`.
+Change the size of a form control by using classes like `.form-control-lg` and `.form-control-sm`. This adjusts `height`, `padding`, `font-size`, `line-height`, and `border-radius`.
 
-<Example code={`<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
-<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
-<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">`} />
+<Example code={`<div class="mb-3">
+    <label for="largeInput" class="form-label">Large input</label>
+    <input class="form-control form-control-lg" type="text" id="largeInput" placeholder="Large input" aria-label="Large input example">
+  </div>
+  <div class="mb-3">
+    <label for="largeSelect" class="form-label">Large select</label>
+    <select class="form-control form-control-lg" id="largeSelect">
+      <option>Open this select menu</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </select>
+  </div>
+  <div>
+    <label for="largeTextarea" class="form-label">Large textarea</label>
+    <textarea class="form-control form-control-lg" id="largeTextarea" rows="3" placeholder="Large textarea" aria-label="Large textarea example"></textarea>
+  </div>`} />
+
+<Example code={`<div class="mb-3">
+    <label for="smallInput" class="form-label">Small input</label>
+    <input class="form-control form-control-sm" type="text" id="smallInput" placeholder="Small input" aria-label="Small input example">
+  </div>
+  <div class="mb-3">
+    <label for="smallSelect" class="form-label">Small select</label>
+    <select class="form-control form-control-sm" id="smallSelect">
+      <option>Open this select menu</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </select>
+  </div>
+  <div>
+    <label for="smallTextarea" class="form-label">Small textarea</label>
+    <textarea class="form-control form-control-sm" id="smallTextarea" rows="3" placeholder="Small textarea" aria-label="Small textarea example"></textarea>
+  </div>`} />
+
+## Select
+
+The `multiple` attribute is supported on select elements:
+
+<Example code={`<select class="form-select" multiple aria-label="Multiple select example">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>`} />
+
+As is the `size` attribute:
+
+<Example code={`<select class="form-select" size="3" aria-label="Size 3 select example">
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>`} />
 
 ## Form text
 
@@ -62,7 +127,13 @@ Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`
 Add the `disabled` boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.
 
 <Example code={`<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
-<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>`} />
+<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>
+<select class="form-select" aria-label="Disabled select example" disabled>
+    <option selected>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>`} />
 
 ## Readonly
 

site/src/content/docs/forms/radio.mdx

@@ -0,0 +1,66 @@
+---
+title: Radio
+description: Highly customizable, native radio `<input>` elements for choosing one option from many.
+toc: true
+---
+
+import { getData } from '@libs/data'
+
+## Basic radio
+
+Similar to checkboxes, radios are styled with the `.radio` class. However, there's no custom SVG as we use a Unicode character for the checked state.
+
+<Example code={`<input type="radio" id="radio" class="radio" />`} />
+
+## Label
+
+Wrap the `.radio` in a `<b-radiogroup>` layout component and add your label. We use a custom element for layout here that sets some basic flexbox styling.
+
+<Example code={`<b-radiogroup>
+    <input type="radio" id="radioLabel" class="radio" />
+    <label for="radioLabel">Example new radio</label>
+  </b-radiogroup>`} />
+
+## Theme colors
+
+Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.radio` element. This will set the checked background and border color to the theme color.
+
+<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => `<b-radiogroup>
+    <input type="radio" id="radio${themeColor.name}" class="radio checked-${themeColor.name}" checked />
+    <label for="radio${themeColor.name}">Example ${themeColor.name} radio</label>
+  </b-radiogroup>`)} />
+
+## Description
+
+With this layout approach, you can easily add a description or other content after the label. Here we use another custom element, `<b-vstack>`, to stack the label and description.
+
+<Example code={`<b-radiogroup>
+    <input type="radio" id="radioLabelDescription" class="radio" />
+    <b-vstack>
+      <label for="radioLabelDescription">Example new radio</label>
+      <small class="description">Supporting description for the above label.</small>
+    </b-vstack>
+  </b-radiogroup>
+  `} />
+
+## Disabled
+
+Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
+
+<Example code={`<b-radiogroup>
+    <input type="radio" id="radioDisabled" class="radio" disabled />
+    <label for="radioDisabled">Example new radio</label>
+  </b-radiogroup>
+  `} />
+
+## CSS
+
+### Variables
+
+CSS variables for the radio component are built on the Sass variables.
+
+<ScssDocs name="radio-css-variables" file="scss/forms/_radio.scss" />
+
+### Sass variables
+
+<ScssDocs name="radio-variables" file="scss/forms/_radio.scss" />

site/src/content/docs/forms/select.mdx

@@ -1,69 +0,0 @@
----
-title: Select
-description: Customize the native `<select>`s with custom CSS that changes the element’s initial appearance.
-toc: true
----
-
-## Default
-
-Custom `<select>` menus need only a custom class, `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`’s initial appearance and cannot modify the `<option>`s due to browser limitations.
-
-<Example code={`<select class="form-select" aria-label="Default select example">
-    <option selected>Open this select menu</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-  </select>`} />
-
-## Sizing
-
-You may also choose from small and large custom selects to match our similarly sized text inputs.
-
-<Example code={`<select class="form-select form-select-lg mb-3" aria-label="Large select example">
-    <option selected>Open this select menu</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-  </select>
-
-  <select class="form-select form-select-sm" aria-label="Small select example">
-    <option selected>Open this select menu</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-  </select>`} />
-
-The `multiple` attribute is also supported:
-
-<Example code={`<select class="form-select" multiple aria-label="Multiple select example">
-    <option selected>Open this select menu</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-  </select>`} />
-
-As is the `size` attribute:
-
-<Example code={`<select class="form-select" size="3" aria-label="Size 3 select example">
-    <option selected>Open this select menu</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-  </select>`} />
-
-## Disabled
-
-Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events.
-
-<Example code={`<select class="form-select" aria-label="Disabled select example" disabled>
-    <option selected>Open this select menu</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-  </select>`} />
-
-## CSS
-
-### Sass variables
-
-<ScssDocs name="form-select-variables" file="scss/forms/_form-select.scss" />

site/src/content/docs/forms/switch.mdx

@@ -0,0 +1,81 @@
+---
+title: Switch
+description: Custom toggle component built on top of native `<input>` checkbox elements.
+toc: true
+---
+
+import { getData } from '@libs/data'
+
+## Basic switch
+
+Switches are built with checkboxes under the hood, so their HTML closely mirrors that of checkboxes, including optional layout components.
+
+Switches work by layering an invisible checkbox over the custom switch indicator. This preserves interactivity while giving you a completely customizable layer underneath.
+
+Switches also include the `switch` attribute for browsers that support it. This provides haptic feedback when toggling the switch.
+
+<Example code={`<div class="switch">
+    <input type="checkbox" value="" id="switch" switch>
+  </div>`} />
+
+## Label
+
+Wrap the `.switch` in a `<b-checkgroup>` layout component and add your label. We use a custom element for layout here that sets some basic flexbox styling. Switches are checkboxes under the hood, so we reused the same custom element here.
+
+Consider margin utilities for additional spacing, and flex utilities for alignment, especially when using small or large switches.
+
+<Example class="d-flex flex-column gap-3" code={`<b-checkgroup>
+    <div class="switch switch-sm mt-1">
+      <input type="checkbox" value="" id="switchSmLabel" switch>
+    </div>
+    <label for="switchSmLabel">Small switch</label>
+  </b-checkgroup>
+
+  <b-checkgroup>
+    <div class="switch">
+      <input type="checkbox" value="" id="switchMdLabel" switch>
+    </div>
+    <label for="switchMdLabel">Default switch</label>
+  </b-checkgroup>`} />
+
+## Theme colors
+
+Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.switch` element. This will set the checked background and border color to the theme color.
+
+<Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => ` <b-checkgroup>
+    <div class="switch switch-sm mt-1 checked-${themeColor.name}">
+      <input type="checkbox" value="" id="switch${themeColor.name}" switch checked>
+    </div>
+    <label for="switch${themeColor.name}">Example ${themeColor.name} switch</label>
+  </b-checkgroup>`)} />
+
+## Disabled
+
+Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input’s state.
+
+<Example class="d-flex flex-column gap-3" code={`<b-checkgroup>
+    <div class="switch">
+      <input type="checkbox" value="" id="switchDisabledLabel" switch disabled>
+    </div>
+    <label for="switchDisabledLabel">Disabled switch</label>
+  </b-checkgroup>`} />
+
+## Sizes
+
+Add a size modifier class to make your switch appear smaller or larger.
+
+<Example class="d-flex flex-column gap-3" code={`<div class="switch switch-sm">
+    <input type="checkbox" value="" id="switchSizeSm" switch>
+  </div>
+  <div class="switch">
+    <input type="checkbox" value="" id="switchSizeMd" switch>
+  </div>
+  <div class="switch switch-lg">
+    <input type="checkbox" value="" id="switchSizeLg" switch>
+  </div>`} />
+
+## CSS
+
+### Variables
+
+<ScssDocs name="switch-css-variables" file="scss/forms/_switch.scss" />

site/src/content/docs/getting-started/rfs.mdx

@@ -29,7 +29,7 @@ The `rfs()` mixin has shorthands for `font-size`, `margin`, `margin-top`, `margi
   font-size: calc(1.525rem + 3.3vw);
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 1280px) {
   .title {
     font-size: 4rem;
   }

site/src/content/docs/helpers/position.mdx

@@ -46,7 +46,7 @@ Responsive variations also exist for `.sticky-top` utility.
 <div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
 <div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
 <div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
-<div class="sticky-xxl-top">Stick to the top on viewports sized XXL (extra-extra-large) or wider</div>
+<div class="sticky-2xl-top">Stick to the top on viewports sized 2XL (extra-extra-large) or wider</div>
 ```
 
 ## Sticky bottom
@@ -66,5 +66,5 @@ Responsive variations also exist for `.sticky-bottom` utility.
 <div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
 <div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
 <div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
-<div class="sticky-xxl-bottom">Stick to the bottom on viewports sized XXL (extra-extra-large) or wider</div>
+<div class="sticky-2xl-bottom">Stick to the bottom on viewports sized 2XL (extra-extra-large) or wider</div>
 ```

site/src/content/docs/layout/breakpoints.mdx

@@ -23,9 +23,9 @@ Bootstrap includes six default breakpoints, sometimes referred to as _grid tiers
 | Extra small | <em>None</em> |&lt;576px |
 | Small | `sm` | &ge;576px |
 | Medium | `md` | &ge;768px |
-| Large | `lg` | &ge;992px |
-| Extra large | `xl` | &ge;1200px |
-| Extra extra large | `xxl` | &ge;1400px |
+| Large | `lg` | &ge;1024px |
+| Extra large | `xl` | &ge;1280px |
+| Extra extra large | `2xl` | &ge;1536px |
 </BsTable>
 
 Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don’t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.
@@ -52,7 +52,7 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in
 @include media-breakpoint-up(md) { ... }
 @include media-breakpoint-up(lg) { ... }
 @include media-breakpoint-up(xl) { ... }
-@include media-breakpoint-up(xxl) { ... }
+@include media-breakpoint-up(2xl) { ... }
 
 // Usage
 
@@ -79,14 +79,14 @@ These Sass mixins translate in our compiled CSS using the values declared in our
 // Medium devices (tablets, 768px and up)
 @media (min-width: 768px) { ... }
 
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) { ... }
+// Large devices (desktops, 1024px and up)
+@media (min-width: 1024px) { ... }
 
-// X-Large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) { ... }
+// X-Large devices (large desktops, 1280px and up)
+@media (min-width: 1280px) { ... }
 
-// XX-Large devices (larger desktops, 1400px and up)
-@media (min-width: 1400px) { ... }
+// XX-Large devices (larger desktops, 1536px and up)
+@media (min-width: 1536px) { ... }
 ```
 
 ### Max-width
@@ -99,7 +99,7 @@ We occasionally use media queries that go in the other direction (the given scre
 @include media-breakpoint-down(md) { ... }
 @include media-breakpoint-down(lg) { ... }
 @include media-breakpoint-down(xl) { ... }
-@include media-breakpoint-down(xxl) { ... }
+@include media-breakpoint-down(2xl) { ... }
 
 // Example: Style from medium breakpoint and down
 @include media-breakpoint-down(md) {
@@ -127,8 +127,8 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us
 // `xl` applies to large devices (desktops, less than 1200px)
 @media (max-width: 1199.98px) { ... }
 
-// `xxl` applies to x-large devices (large desktops, less than 1400px)
-@media (max-width: 1399.98px) { ... }
+// `2xl` applies to x-large devices (large desktops, less than 1600px)
+@media (max-width: 1599.98px) { ... }
 ```
 
 <Callout name="info-mediaqueries-breakpoints" type="warning" />
@@ -143,7 +143,7 @@ There are also media queries and mixins for targeting a single segment of screen
 @include media-breakpoint-only(md) { ... }
 @include media-breakpoint-only(lg) { ... }
 @include media-breakpoint-only(xl) { ... }
-@include media-breakpoint-only(xxl) { ... }
+@include media-breakpoint-only(2xl) { ... }
 ```
 
 For example the `@include media-breakpoint-only(md) { ... }` will result in :

site/src/content/docs/layout/containers.mdx

@@ -19,14 +19,14 @@ The table below illustrates how each container’s `max-width` compares to the o
 See them in action and compare them in our [Grid example]([[docsref:/examples/grid/#containers]]).
 
 <BsTable>
-|  | Extra small<div class="fw-normal">&lt;576px</div> | Small<div class="fw-normal">&ge;576px</div> | Medium<div class="fw-normal">&ge;768px</div> | Large<div class="fw-normal">&ge;992px</div> | X-Large<div class="fw-normal">&ge;1200px</div> | XX-Large<div class="fw-normal">&ge;1400px</div> |
+|  | Extra small<div class="fw-normal">&lt;576px</div> | Small<div class="fw-normal">&ge;576px</div> | Medium<div class="fw-normal">&ge;768px</div> | Large<div class="fw-normal">&ge;1024px</div> | X-Large<div class="fw-normal">&ge;1280px</div> | 2X-Large<div class="fw-normal">&ge;1536px</div> |
 | --- | --- | --- | --- | --- | --- | --- |
-| `.container` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
-| `.container-sm` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
-| `.container-md` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1320px |
-| `.container-lg` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 960px | 1140px | 1320px |
-| `.container-xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1140px | 1320px |
-| `.container-xxl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1320px |
+| `.container` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
+| `.container-sm` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1440px |
+| `.container-md` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1440px |
+| `.container-lg` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 960px | 1140px | 1440px |
+| `.container-xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1140px | 1440px |
+| `.container-2xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1440px |
 | `.container-fluid` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> |
 </BsTable>
 
@@ -42,14 +42,14 @@ Our default `.container` class is a responsive, fixed-width container, meaning i
 
 ## Responsive containers
 
-Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`.
+Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `2xl`.
 
 ```html
 <div class="container-sm">100% wide until small breakpoint</div>
 <div class="container-md">100% wide until medium breakpoint</div>
 <div class="container-lg">100% wide until large breakpoint</div>
 <div class="container-xl">100% wide until extra large breakpoint</div>
-<div class="container-xxl">100% wide until extra extra large breakpoint</div>
+<div class="container-2xl">100% wide until extra extra large breakpoint</div>
 ```
 
 ## Fluid containers

site/src/content/docs/layout/grid.mdx

@@ -35,7 +35,7 @@ The above example creates three equal-width columns across all devices and viewp
 
 Breaking it down, here’s how the grid system comes together:
 
-- **Our grid supports [six responsive breakpoints]([[docsref:/layout/breakpoints]]).**  Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, and `xxl`). This means you can control container and column sizing and behavior by each breakpoint.
+- **Our grid supports [six responsive breakpoints]([[docsref:/layout/breakpoints]]).**  Breakpoints are based on `min-width` media queries, meaning they affect that breakpoint and all those above it (e.g., `.col-sm-4` applies to `sm`, `md`, `lg`, `xl`, and `2xl`). This means you can control container and column sizing and behavior by each breakpoint.
 
 - **Containers center and horizontally pad your content.** Use `.container` for a responsive pixel width, `.container-fluid` for `width: 100%` across all viewports and devices, or a responsive container (e.g., `.container-md`) for a combination of fluid and pixel widths.
 
@@ -58,7 +58,7 @@ Bootstrap’s grid system can adapt across all six default breakpoints, and any
 - Medium (md)
 - Large (lg)
 - Extra large (xl)
-- Extra extra large (xxl)
+- Extra extra large (2xl)
 
 As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here’s how the grid changes across these breakpoints:
 
@@ -70,9 +70,9 @@ As noted above, each of these breakpoints have their own container, unique class
         <th scope="col">xs<br/><span class="fw-normal">&lt;576px</span></th>
         <th scope="col">sm<br/><span class="fw-normal">&ge;576px</span></th>
         <th scope="col">md<br/><span class="fw-normal">&ge;768px</span></th>
-        <th scope="col">lg<br/><span class="fw-normal">&ge;992px</span></th>
-        <th scope="col">xl<br/><span class="fw-normal">&ge;1200px</span></th>
-        <th scope="col">xxl<br/><span class="fw-normal">&ge;1400px</span></th>
+        <th scope="col">lg<br/><span class="fw-normal">&ge;1024px</span></th>
+        <th scope="col">xl<br/><span class="fw-normal">&ge;1280px</span></th>
+        <th scope="col">2xl<br/><span class="fw-normal">&ge;1536px</span></th>
       </tr>
     </thead>
     <tbody>
@@ -83,7 +83,7 @@ As noted above, each of these breakpoints have their own container, unique class
         <td>720px</td>
         <td>960px</td>
         <td>1140px</td>
-        <td>1320px</td>
+        <td>1440px</td>
       </tr>
       <tr>
         <th class="text-nowrap" scope="row">Class prefix</th>
@@ -92,7 +92,7 @@ As noted above, each of these breakpoints have their own container, unique class
         <td><code>.col-md-</code></td>
         <td><code>.col-lg-</code></td>
         <td><code>.col-xl-</code></td>
-        <td><code>.col-xxl-</code></td>
+        <td><code>.col-2xl-</code></td>
       </tr>
       <tr>
         <th class="text-nowrap" scope="row"># of columns</th>
@@ -124,7 +124,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
 
 ### Equal-width
 
-For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
+For example, here are two grid layouts that apply to every device and viewport, from `xs` to `2xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
 
 <Example class="bd-example-row" code={`<div class="container text-center">
     <div class="row">

site/src/content/docs/migration.mdx

@@ -1,744 +1,126 @@
 ---
-title: Migrating to v5
+title: Migrating to v6
 description: Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.
 aliases: "/migration/"
 toc: true
 ---
 
-## v5.3.6
+## v6.0.0 Migration
 
-### Dependencies
+Bootstrap 6 is a major release with many breaking changes to modernize our codebase, adopt newer build tools, and improve customization. Keep reading for a guide on how to migrate from v5 to v6, and a full changelog of what's new.
 
-- Migrated from Hugo to Astro for building our documentation
+1. Bump your Bootstrap dependency:
 
-## v5.3.0
+   ```json
+   {
+     "dependencies": {
+       "bootstrap": "^6.0.0"
+     }
+   }
+   ```
 
-If you’re migrating from our previous alpha releases of v5.3.0, please review their changes in addition to this section.
+2. If using all of Bootstrap's Sass files, include it in your Sass using `@use`:
 
-### Helpers
+   ```scss
+   @use "bootstrap/scss/bootstrap";
+   ```
 
-- [Colored links]([[docsref:/helpers/colored-links]]) once again have `!important` so they work better with our newly added link utilities.
+   With this, you can then easily override Bootstrap's Sass variables and maps:
 
-### Utilities
+   ```scss
+   @use "bootstrap/scss/bootstrap" with (
+    $spacer: 1rem,
+    $enable-reduced-motion: true,
+   );
+   ```
 
-- Added new `.d-inline-grid` [display utility]([[docsref:/utilities/display]]).
+3. If using only certain parts of Bootstrap's Sass files, you can use `@use` to import them individually. Be aware that our Sass file structure has changed and you may need to adjust your imports accordingly.
 
-## v5.3.0-alpha2
+   ```scss
+   @use "bootstrap/scss/forms";
+   ```
 
-If you’re migrating from our previous alpha release of v5.3.0, please review the changes listed below.
+4. Update HTML and CSS per the changelog and updates in the documentation.
 
-### CSS variables
+5. Recompile your Sass to see the changes.
 
-- Removed several duplicate and unused root CSS variables.
+## v6.0.0 Changelog
 
-### Color modes
+### CSS
 
-- Dark mode colors are now derived from our theme colors (e.g., `$primary`) in Sass, rather than color specific tints or shades (e.g., `$blue-300`). This allows for a more automated dark mode when customizing the default theme colors.
-
-- Added Sass maps for generating theme colors for dark mode text, subtle background, and subtle border.
-
-- [Snippet examples]([[docsref:/examples/#snippets]]) are now ready for dark mode with updated markup and reduced custom styles.
-
-- Added `color-scheme: dark` to dark mode CSS to change OS level controls like scrollbars
-
-- Form validation `border-color` and text `color` states now respond to dark mode, thanks to new Sass and CSS variables.
-
-- Dropped recently added form control background CSS variables and reassigned the Sass variables to use CSS variables instead. This simplifies the styling across color modes and avoids an issue where form controls in dark mode wouldn’t update properly.
-
-- Our `box-shadow`s will once again always stay dark instead of inverting to white when in dark mode.
-
-- Improved HTML and JavaScript for our color mode toggle script. The selector for changing the active SVG has been improved, and the markup made more accessible with ARIA attributes.
-
-- Improved docs code syntax colors and more across light and dark modes.
-
-### Typography
-
-- We no longer set a color for `$headings-color-dark` or `--bs-heading-color` for dark mode. To avoid several problems of headings within components appearing the wrong color, we’ve set the Sass variable to `null` and added a `null` check like we use on the default light mode.
-
-### Components
-
-- Cards now have a `color` set on them to improve rendering across color modes.
-
-- Added new `.nav-underline` variant for our navigation with a simpler bottom border under the active nav link. [See the docs for an example.]([[docsref:/components/navs-tabs#underline]])
-
-- Navs now have new `:focus-visible` styles that better match our custom button focus styles.
-
-### Helpers
-
-- Added new `.icon-link` helper to quickly place and align Bootstrap Icons alongside a textual link. Icon links support our new link utilities, too.
-
-- Added new focus ring helper for removing the default `outline` and setting a custom `box-shadow` focus ring.
-
-### Utilities
-
-- Renamed Sass and CSS variables `${color}-text` to `${color}-text-emphasis` to match their associated utilities.
-
-- Added new `.link-body-emphasis` helper alongside our [colored links]([[docsref:/helpers/colored-links]]). This creates a colored link using our color mode responsive emphasis color.
-
-- Added new link utilities for link color opacity, underline offset, underline color, and underline opacity. [Explore the new links utilities.]([[docsref:/utilities/link]])
-
-- CSS variable based `border-width` utilities have been reverted to set their property directly (as was done prior to v5.2.0). This avoids inheritance issues across nested elements, including tables.
-
-- Added new `.border-black` utility to match our `.text-black` and `.bg-black` utilities.
-
-- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.text-muted` utility and `$text-muted` Sass variable have been deprecated and replaced with `.text-body-secondary` and `$body-secondary-color`.
-
-### Docs
-
-- Examples are now displayed with the appropriate light or dark color mode as dictated by the setting in our docs. Each example has an individual color mode picker.
-
-- Improved included JavaScript for live Toast demo.
-
-- Added `twbs/examples` repo contents to the top of the Examples page.
-
-### Tooling
-
-- Added SCSS testing via True to help test our utilities API and other customizations.
-
-- Replaced instances of our bootstrap-npm-starter project with the newer and more complete [twbs/examples repo](https://github.com/twbs/examples).
-
-<hr class="mb-4"/>
-
-For a complete list of changes, [see the v5.3.0-alpha2 project on GitHub](https://github.com/orgs/twbs/projects/13).
-
-## v5.3.0-alpha1
-
-<hr class="mb-4"/>
-
-### Color modes!
-
-Learn more by reading the new [color modes documentation]([[docsref:/customize/color-modes]]).
-
-- **Global support for light (default) and dark color modes.** Set color mode globally on the `:root` element, on groups of elements and components with a wrapper class, or directly on components, with `data-bs-theme="light|dark"`. Also included is a new `color-mode()` mixin that can output a ruleset with the `data-bs-theme` selector or a media query, depending on your preference.
-
-  <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> Color modes replace dark variants for components, so  `.btn-close-white`, `.carousel-dark`, `.dropdown-menu-dark`, and `.navbar-dark` are deprecated.
-
-- **New extended color system.** We’ve added new theme colors (but not in `$theme-colors`) for a more nuanced, system-wide color palette with new secondary, tertiary, and emphasis colors for `color` and `background-color`. These new colors are available as Sass variables, CSS variables, and utilities.
-
-- We’ve also expanded our theme color Sass variables, CSS variables, and utilities to include text emphasis, subtle background colors, and subtle border colors. These are available as Sass variables, CSS variables, and utilities.
-
-- Adds new `_variables-dark.scss` stylesheet to house dark-mode specific overrides. This stylesheet should be imported immediately after the existing `_variables.scss` file in your import stack.
-
-  ```diff
-  diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
-  index 8f8296def..449d70487 100644
-  --- a/scss/bootstrap.scss
-  +++ b/scss/bootstrap.scss
-  @@ -6,6 +6,7 @@
-   // Configuration
-   @import "functions";
-   @import "variables";
-  +@import "variables-dark";
-   @import "maps";
-   @import "mixins";
-   @import "utilities";
-  ```
-
-### CSS variables
-
-- Restores CSS variables for breakpoints, though we don’t use them in our media queries as they’re not supported. However, these can be useful in JS-specific contexts.
-
-- Per the color modes update, we’ve added new utilities for new Sass CSS variables `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps) with the express goal of making it easier to customize across multiple colors modes like light and dark.
-
-- Adds additional variables for alerts, `.btn-close`, and `.offcanvas`.
-
-- The `--bs-heading-color` variable is back with an update and dark mode support. First, we now check for a `null` value on the associated Sass variable, `$headings-color`, before trying to output the CSS variable, so by default it’s not present in our compiled CSS. Second, we use the CSS variable with a fallback value, `inherit`, allowing the original behavior to persist, but also allowing for overrides.
-
-- Converts links to use CSS variables for styling `color`, but not `text-decoration`. Colors are now set with `--bs-link-color-rgb` and `--bs-link-opacity` as `rgba()` color, allowing you to customize the translucency with ease. The `a:hover` pseudo-class now overrides `--bs-link-color-rgb` instead of explicitly setting the `color` property.
-
-- `--bs-border-width` is now being used in more components for greater control over default global styling.
-
-- Adds new root CSS variables for our `box-shadow`s, including `--bs-box-shadow`, `--bs-box-shadow-sm`, `--bs-box-shadow-lg`, and `--bs-box-shadow-inset`.
-
-### Components
-
-#### Alert
-
-- Alert variants are now styled via CSS variables.
-
-- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `alert-variant()` mixin is now deprecated. We now [use a Sass loop]([[docsref:/components/alerts#sass-loops]]) directly to modify the component’s default CSS variables for each variant.
-
-#### List group
-
-- List group item variants are now styled via CSS variables.
-
-- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `list-group-item-variant()` mixin is now deprecated. We now [use a Sass loop]([[docsref:/components/list-group#sass-loops]]) directly to modify the component’s default CSS variables for each variant.
-
-#### Dropdowns
-
-- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.dropdown-menu-dark` class has been deprecated and replaced with `data-bs-theme="dark"` on the dropdown or any parent element. [See the docs for an example.]([[docsref:/components/dropdowns#dark-dropdowns]])
-
-#### Close button
-
-- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.btn-close-white` class has been deprecated and replaced with `data-bs-theme="dark"` on the close button or any parent element. [See the docs for an example.]([[docsref:/components/close-button#dark-variant]])
-
-#### Navbar
-
-- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.navbar-dark` class has been deprecated and replaced with `data-bs-theme="dark"` on the navbar or any parent element. [See the docs for updated examples.]([[docsref:/components/navbar#color-schemes]])
-
-### Progress bars
-
-The markup for [progress bars]([[docsref:/components/progress]]) has been updated in v5.3.0. Due to the placement of `role` and various `aria-` attributes on the inner `.progress-bar` element, **some screen readers were not announcing zero value progress bars**. Now, `role="progressbar"` and the relevant `aria-*` attributes are on the outer `.progress` element, leaving the `.progress-bar` purely for the visual presentation of the bar and optional label.
-
-While we recommend adopting the new markup for improved compatibility with all screen readers, note that the legacy progress bar structure will continue to work as before.
-
-```html
-<!-- Previous markup -->
-<div class="progress">
-  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-
-<!-- New markup -->
-<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
-  <div class="progress-bar" style="width: 25%"></div>
-</div>
-```
-
-We’ve also introduced a new `.progress-stacked` class to more logically wrap [multiple progress bars]([[docsref:/components/progress#multiple-bars]]) into a single stacked progress bar.
-
-```html
-<!-- Previous markup -->
-<div class="progress">
-  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
-  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
-  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-
-<!-- New markup -->
-<div class="progress-stacked">
-  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
-    <div class="progress-bar"></div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
-    <div class="progress-bar bg-success"></div>
-  </div>
-  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
-    <div class="progress-bar bg-info"></div>
-  </div>
-</div>
-```
-
-### Forms
-
-- `.form-control` is now styled with CSS variables to support color modes. This includes the addition of two new root CSS variables for the default and disabled form control backgrounds.
-
-- `.form-check` and `.form-switch` components are now built with CSS variables for setting the `background-image`. The usage here differs from other components in that the various focus, active, etc states for each component aren’t set on the base class. Instead, the states override one variable (e.g., `--bs-form-switch-bg`).
-
-- Floating form labels now have a `background-color` to fix support for `<textarea>` elements. Additional changes have been made to also support disabled states and more.
-
-- Fixed display of date and time inputs in WebKit based browsers.
-
-### Utilities
-
-- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> `.text-muted` will be replaced by `.text-body-secondary` in v6.
-
-  With the addition of the expanded theme colors and variables, the `.text-muted` variables and utility have been deprecated with v5.3.0. Its default value has also been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
-
-- Adds new `.overflow-x`, `.overflow-y`, and several `.object-fit-*` utilities. _The object-fit property is used to specify how an `<img>` or `<video>` should be resized to fit its container, giving us a responsive alternative to using `background-image` for a resizable fill/fit image._
-
-- Adds new `.fw-medium` utility.
-
-- Added new [`.z-*` utilities]([[docsref:/utilities/z-index]]) for `z-index`.
-
-- [Box shadow utilities]([[docsref:/utilities/shadows]]) (and Sass variables) have been updated for dark mode. They now use `--bs-body-color-rgb` to generate the `rgba()` color values, allowing them to easily adapt to color modes based on the specified foreground color.
-
-For a complete list of changes, [see the v5.3.0 project on GitHub](https://github.com/twbs/bootstrap/projects/).
-
-## v5.2.0
-
-<hr class="mb-4"/>
-
-### Refreshed design
-
-Bootstrap v5.2.0 features a subtle design update for a handful of components and properties across the project, **most notably through refined `border-radius` values on buttons and form controls**. Our documentation also has been updated with a new homepage, simpler docs layout that no longer collapses sections of the sidebar, and more prominent examples of [Bootstrap Icons](https://icons.getbootstrap.com).
-
-### More CSS variables
-
-**We’ve updated all our components to use CSS variables.** While Sass still underpins everything, each component has been updated to include CSS variables on the component base classes (e.g., `.btn`), allowing for more real-time customization of Bootstrap. In subsequent releases, we'll continue to expand our use of CSS variables into our layout, forms, helpers, and utilities. Read more about CSS variables in each component on their respective documentation pages.
-
-Our CSS variable usage will be somewhat incomplete until Bootstrap 6. While we’d love to fully implement these across the board, they do run the risk of causing breaking changes. For example, setting `$alert-border-width: var(--bs-border-width)` in our source code breaks potential Sass in your own code if you were doing `$alert-border-width * 2` for some reason.
-
-As such, wherever possible, we will continue to push towards more CSS variables, but please recognize our implementation may be slightly limited in v5.
-
-### New `_maps.scss`
-
-**Bootstrap v5.2.0 introduced a new Sass file with `_maps.scss`.** It pulls out several Sass maps from `_variables.scss` to fix an issue where updates to an original map were not applied to secondary maps that extend them. For example, updates to `$theme-colors` were not being applied to other theme maps that relied on `$theme-colors`, breaking key customization workflows. In short, Sass has a limitation where once a default variable or map has been _used_, it cannot be updated. _There’s a similar shortcoming with CSS variables when they’re used to compose other CSS variables._
-
-This is why variable customizations in Bootstrap have to come after `@import "functions"`, but before `@import "variables"` and the rest of our import stack. The same applies to Sass maps—you must override the defaults before they get used. The following maps have been moved to the new `_maps.scss`:
-
-- `$theme-colors-rgb`
-- `$utilities-colors`
-- `$utilities-text`
-- `$utilities-text-colors`
-- `$utilities-bg`
-- `$utilities-bg-colors`
-- `$negative-spacers`
-- `$gutters`
-
-Your custom Bootstrap CSS builds should now look something like this with a separate maps import.
-
-```diff
-  // Functions come first
-  @import "functions";
-
-  // Optional variable overrides here
-+ $custom-color: #df711b;
-+ $custom-theme-colors: (
-+   "custom": $custom-color
-+ );
-
-  // Variables come next
-  @import "variables";
-
-+ // Optional Sass map overrides here
-+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
-+
-+ // Followed by our default maps
-+ @import "maps";
-+
-  // Rest of our imports
-  @import "mixins";
-  @import "utilities";
-  @import "root";
-  @import "reboot";
-  // etc
-```
-
-### New utilities
-
-- Expanded [`font-weight` utilities]([[docsref:/utilities/text#font-weight-and-italics]]) to include `.fw-semibold` for semibold fonts.
-- Expanded [`border-radius` utilities]([[docsref:/utilities/border-radius#sizes]]) to include two new sizes, `.rounded-4` and `.rounded-5`, for more options.
-
-### Additional changes
-
-- **Introduced new `$enable-container-classes` option. —** Now when opting into the experimental CSS Grid layout, `.container-*` classes will still be compiled, unless this option is set to `false`. Containers also now keep their gutter values.
-
-- **Offcanvas component now has [responsive variations]([[docsref:/components/offcanvas#responsive]]).** The original `.offcanvas` class remains unchanged—it hides content across all viewports. To make it responsive, change that `.offcanvas` class to any `.offcanvas-{sm|md|lg|xl|xxl}` class.
-
-- **Thicker table dividers are now opt-in. —** We’ve removed the thicker and more difficult to override border between table groups and moved it to an optional class you can apply, `.table-group-divider`. [See the table docs for an example.]([[docsref:/content/tables#table-group-dividers]])
-
-- **[Scrollspy has been rewritten](https://github.com/twbs/bootstrap/pull/33421) to use the Intersection Observer API**, which means you no longer need relative parent wrappers, deprecates `offset` config, and more. Look for your Scrollspy implementations to be more accurate and consistent in their nav highlighting.
-
-- **Popovers and tooltips now use CSS variables.** Some CSS variables have been updated from their Sass counterparts to reduce the number of variables. As a result, three variables have been deprecated in this release: `$popover-arrow-color`, `$popover-arrow-outer-color`, and `$tooltip-arrow-color`.
-
-- **Added new `.text-bg-{color}` helpers.** Instead of setting individual `.text-*` and `.bg-*` utilities, you can now use [the `.text-bg-*` helpers]([[docsref:helpers/color-background]]) to set a `background-color` with contrasting foreground `color`.
-
-- Added `.form-check-reverse` modifier to flip the order of labels and associated checkboxes/radios.
-
-- Added [striped columns]([[docsref:/content/tables#striped-columns]]) support to tables via the new `.table-striped-columns` class.
-
-For a complete list of changes, [see the v5.2.0 project on GitHub](https://github.com/twbs/bootstrap/projects/32).
-
-## v5.1.0
-
-<hr class="mb-4"/>
-
-- **Added experimental support for [CSS Grid layout]([[docsref:/layout/css-grid]]). —** This is a work in progress, and is not yet ready for production use, but you can opt into the new feature via Sass. To enable it, disable the default grid, by setting `$enable-grid-classes: false` and enable the CSS Grid by setting `$enable-cssgrid: true`.
-
-- **Updated navbars to support offcanvas. —** Add [offcanvas drawers in any navbar]([[docsref:/components/navbar#offcanvas]]) with the responsive `.navbar-expand-*` classes and some offcanvas markup.
-
-- **Added new [placeholder component]([[docsref:/components/placeholders/]]). —** Our newest component, a way to provide temporary blocks in lieu of real content to help indicate that something is still loading in your site or app.
-
-- **Collapse plugin now supports [horizontal collapsing]([[docsref:/components/collapse#horizontal]]). —** Add `.collapse-horizontal` to your `.collapse` to collapse the `width` instead of the `height`. Avoid browser repainting by setting a `min-height` or `height`.
-
-- **Added new stack and vertical rule helpers. —** Quickly apply multiple flexbox properties to quickly create custom layouts with [stacks]([[docsref:/helpers/stacks/]]). Choose from horizontal (`.hstack`) and vertical (`.vstack`) stacks. Add vertical dividers similar to `<hr>` elements with the [new `.vr` helpers]([[docsref:/helpers/vertical-rule/]]).
-
-- **Added new global `:root` CSS variables. —** Added several new CSS variables to the `:root` level for controlling `<body>` styles. More are in the works, including across our utilities and components, but for now read up [CSS variables in the Customize section]([[docsref:/customize/css-variables/]]).
-
-- **Overhauled color and background utilities to use CSS variables, and added new [text opacity]([[docsref:/utilities/text#opacity]]) and [background opacity]([[docsref:/utilities/background#opacity]]) utilities. —** `.text-*` and `.bg-*` utilities are now built with CSS variables and `rgba()` color values, allowing you to easily customize any utility with new opacity utilities.
-
-- **Added new snippet examples based to show how to customize our components. —** Pull ready to use customized components and other common design patterns with our new [Snippets examples]([[docsref:/examples/#snippets]]). Includes [footers]([[docsref:/examples/footers/]]), [dropdowns]([[docsref:/examples/dropdowns/]]), [list groups]([[docsref:/examples/list-groups/]]), and [modals]([[docsref:/examples/modals/]]).
-
-- **Removed unused positioning styles from popovers and tooltips** as these are handled solely by Popper. `$tooltip-margin` has been deprecated and set to `null` in the process.
-
-Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/)
-
-## v5.0.0
-
-<hr class="mb-4"/>
-
-<Callout>
-**Hey there!** Changes to our first major release of Bootstrap 5, v5.0.0, are documented below. They don’t reflect the additional changes shown above.
-</Callout>
-
-### Dependencies
-
-- Dropped jQuery.
-- Upgraded from Popper v1.x to Popper v2.x.
-- Replaced Libsass with Dart Sass as our Sass compiler given Libsass was deprecated.
-- Migrated from Jekyll to Hugo for building our documentation
-
-### Browser support
-
-- Dropped Internet Explorer 10 and 11
-- Dropped Microsoft Edge < 16 (Legacy Edge)
-- Dropped Firefox < 60
-- Dropped Safari < 12
-- Dropped iOS Safari < 12
-- Dropped Chrome < 60
-
-<hr class="my-5"/>
-
-### Documentation changes
-
-- Redesigned homepage, docs layout, and footer.
-- Added [new Parcel guide]([[docsref:/getting-started/parcel]]).
-- Added [new Customize section]([[docsref:/customize/overview/]]), replacing [v4’s Theming page](https://getbootstrap.com/docs/4.6/getting-started/theming/), with new details on Sass, global configuration options, color schemes, CSS variables, and more.
-- Reorganized all form documentation into [new Forms section]([[docsref:/forms/overview/]]), breaking apart the content into more focused pages.
-- Similarly, updated [the Layout section]([[docsref:/layout/breakpoints]]), to flesh out grid content more clearly.
-- Renamed “Navs” component page to "Navs & Tabs".
-- Renamed “Checks” page to "Checks & radios".
-- Redesigned the navbar and added a new subnav to make it easier to get around our sites and docs versions.
-- Added new keyboard shortcut for the search field: <kbd><kbd>Ctrl</kbd> + <kbd>/</kbd></kbd>.
+- **Implemented CSS layers** in `_root.scss` and applied them to all our Sass files.
+  - Layers are set in `_root.scss` and then utilized across separate Sass partials.
+  - We cannot, unfortunately, wrap `@use` or `@forward` statements in `@layer`—Sass expects those to be top level at all times. Also, while CSS allows `@import "file.css" layer(name)`, Sass also does not support that.
+- Clarified and simplified CSS-Sass setup.
+- New, streamlined color modes and theming.
+  - Removed `_maps.scss`
+  - Removed `_variables-dark.scss`
+  - Added `_colors.scss`, splitting them out from `_variables.scss`,
+  - Added `_theme.scss` where we setup all our global theming for how colors are applied
+- **Updated lg, xl, and 2xl breakpoints and containers.**
+  - Increased the `lg` breakpoint from 992px to 1024px; it's container remains the same at 960px.
+  - Increased the `xl` breakpoint from 1200px to 1280px, and it's container from 1140px to 1200px.
+  - Renamed `2xl` to `2xl` for better scaling with additional custom breakpoints
+  - Increased the `2xl` breakpoint from 1400px to 1536px, and it's container from 1320px to 1440px.
 
 ### Sass
 
-- We’ve ditched the default Sass map merges to make it easier to remove redundant values. Keep in mind you now have to define all values in the Sass maps like `$theme-colors`. Check out how to deal with [Sass maps]([[docsref:/customize/sass#maps-and-loops]]).
+- Dropped support for Node Sass, including no longer testing any of our source CSS against it.
+  - Rearranged several Sass files in the process.
+- Removed `add()` and `subtract()` functions. Use `calc()` instead.
+- **Removes all deprecated Sass variables and values:**
+  - Removed `$variable-prefix`, use `$prefix` instead.
+  - Removed `$nested-kbd-font-weight`, no replacement.
+  - Removed `muted`, `black-50`, and `white-50` from text colors utilities map
+  - Consolidated carousel dark variables, removing `$carousel-dark-indicator-active-bg`, `$carousel-dark-caption-color`, and `$carousel-dark-control-icon-filter` for their reassigned counterparts.
+  - Removed `$btn-close-white-filter` for `$btn-close-filter-dark`.
+  - Removed `$border-radius-2xl`, use `$border-radius-2xl`.
+  - Removed `$text-muted` for secondary color.
+  - Removed `$hr-bg-color` for `$hr-border-color` and `$hr-height` for `$hr-border-width`.
+  - Removed unused `$dropdown-header-padding` for the `-x`/`-y` split variables.
+  - Removed unused `$accordion-button-focus-border-color`.
+  - Removed unused `$tooltip-arrow-color`.
+  - Removed unused `$popover-arrow-color` and `$popover-arrow-outer-color`
+  - Removed unused `$alert-bg-scale`, `$alert-border-scale`, and `$alert-color-scale` (replaced by theme tokens)
+  - Removed unused `$list-group-item-bg-scale` and `$list-group-item-color-scale` (replaced by theme tokens)
 
-- <span class="badge text-bg-danger">Breaking</span> Renamed `color-yiq()` function and related variables to `color-contrast()` as it’s no longer related to YIQ color space. [See #30168.](https://github.com/twbs/bootstrap/pull/30168/)
-  - `$yiq-contrasted-threshold` is renamed to `$min-contrast-ratio`.
-  - `$yiq-text-dark` and `$yiq-text-light` are respectively renamed to `$color-contrast-dark` and `$color-contrast-light`.
+### Reboot
 
-- <span class="badge text-bg-danger">Breaking</span> Media query mixins parameters have changed for a more logical approach.
-  - `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint (e.g., `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` targets viewports smaller than `lg`).
-  - Similarly, the second parameter in `media-breakpoint-between()` also uses the breakpoint itself instead of the next breakpoint (e.g., `media-breakpoint-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` targets viewports between `sm` and `lg`).
-
-- <span class="badge text-bg-danger">Breaking</span> Removed print styles and `$enable-print-styles` variable. Print display classes are still around. [See #28339](https://github.com/twbs/bootstrap/pull/28339).
-
-- <span class="badge text-bg-danger">Breaking</span> Dropped `color()`, `theme-color()`, and `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083).
-
-- <span class="badge text-bg-danger">Breaking</span> Renamed `theme-color-level()` function to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083) **Watch out:** `color-level()` was later on dropped in `v5.0.0-alpha3`.
-
-- <span class="badge text-bg-danger">Breaking</span> Renamed `$enable-prefers-reduced-motion-media-query` and `$enable-pointer-cursor-for-buttons` to `$enable-reduced-motion` and `$enable-button-pointers` for brevity.
-
-- <span class="badge text-bg-danger">Breaking</span> Removed the `bg-gradient-variant()` mixin. Use the `.bg-gradient` class to add gradients to elements instead of the generated `.bg-gradient-*` classes.
-
-- <span class="badge text-bg-danger">Breaking</span> **Removed previously deprecated mixins:**
-  - `hover`, `hover-focus`, `plain-hover-focus`, and `hover-focus-active`
-  - `float()`
-  - `form-control-mixin()`
-  - `nav-divider()`
-  - `retina-img()`
-  - `text-hide()` (also dropped the associated utility class, `.text-hide`)
-  - `visibility()`
-  - `form-control-focus()`
-
-- <span class="badge text-bg-danger">Breaking</span> Renamed `scale-color()` function to `shift-color()` to avoid collision with Sass’s own color scaling function.
-
-- `box-shadow` mixins now allow `null` values and drop `none` from multiple arguments. [See #30394](https://github.com/twbs/bootstrap/pull/30394).
-
-- The `border-radius()` mixin now has a default value.
-
-### Color system
-
-- The color system which worked with `color-level()` and `$theme-color-interval` was removed in favor of a new color system. All `lighten()` and `darken()` functions in our codebase are replaced by `tint-color()` and `shade-color()`. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The `shift-color()` will either tint or shade a color depending on whether its weight parameter is positive or negative. [See #30622](https://github.com/twbs/bootstrap/pull/30622) for more details.
-
-- Added new tints and shades for every color, providing nine separate colors for each base color, as new Sass variables.
-
-- Improved color contrast. Bumped color contrast ratio from 3:1 to 4.5:1 and updated blue, green, cyan, and pink colors to ensure WCAG 2.2 AA contrast. Also changed our color contrast color from `$gray-900` to `$black`.
-
-- To support our color system, we’ve added new custom `tint-color()` and `shade-color()` functions to mix our colors appropriately.
-
-### Grid updates
-
-- **New breakpoint!** Added new `xxl` breakpoint for `1400px` and up. No changes to all other breakpoints.
-
-- **Improved gutters.** Gutters are now set in rems, and are narrower than v4 (`1.5rem`, or about `24px`, down from `30px`). This aligns our grid system’s gutters with our spacing utilities.
-  - Added new [gutter class]([[docsref:/layout/gutters]]) (`.g-*`, `.gx-*`, and `.gy-*`) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters.
-  - <span class="badge text-bg-danger">Breaking</span> Renamed `.no-gutters` to `.g-0` to match new gutter utilities.
-
-- Columns no longer have `position: relative` applied, so you may have to add `.position-relative` to some elements to restore that behavior.
-
-- <span class="badge text-bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-0` to `.order-5` out of the box.
-
-- <span class="badge text-bg-danger">Breaking</span> Dropped the `.media` component as it can be easily replicated with utilities. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]([[docsref:/utilities/flex#media-object]]).
-
-- <span class="badge text-bg-danger">Breaking</span> `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way, our grid styles can be used in more places without interference.
-
-- `$enable-grid-classes` no longer disables the generation of container classes anymore. [See #29146.](https://github.com/twbs/bootstrap/pull/29146)
-
-- Updated the `make-col` mixin to default to equal columns without a specified size.
-
-### Content, Reboot, etc
-
-- **[RFS]([[docsref:/getting-started/rfs]]) is now enabled by default.** Headings using the `font-size()` mixin will automatically adjust their `font-size` to scale with the viewport. _This feature was previously opt-in with v4._
-
-- <span class="badge text-bg-danger">Breaking</span> Overhauled our display typography to replace our `$display-*` variables and with a `$display-font-sizes` Sass map. Also removed the individual `$display-*-weight` variables for a single `$display-font-weight` and adjusted `font-size`s.
-
-- Added two new `.display-*` heading sizes, `.display-5` and `.display-6`.
-
-- **Links are underlined by default** (not just on hover), unless they’re part of specific components.
-
-- **Redesigned tables** to refresh their styles and rebuild them with CSS variables for more control over styling.
-
-- <span class="badge text-bg-danger">Breaking</span> Nested tables do not inherit styles anymore.
-
-- <span class="badge text-bg-danger">Breaking</span> `.thead-light` and `.thead-dark` are dropped in favor of the `.table-*` variant classes which can be used for all table elements (`thead`, `tbody`, `tfoot`, `tr`, `th` and `td`).
-
-- <span class="badge text-bg-danger">Breaking</span> The `table-row-variant()` mixin is renamed to `table-variant()` and accepts only 2 parameters: `$color` (color name) and `$value` (color code). The border color and accent colors are automatically calculated based on the table factor variables.
-
-- Split table cell padding variables into `-y` and `-x`.
-
-- <span class="badge text-bg-danger">Breaking</span> Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135)
-
-- <span class="badge text-bg-danger">Breaking</span> `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267)
-
-- <span class="badge text-bg-danger">Breaking</span> Dropped `.text-justify` class. [See #29793](https://github.com/twbs/bootstrap/pull/29793)
-
-- <span class="badge text-bg-danger">Breaking</span> ~~`<hr>` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `<hr class="py-1">`).~~
-
-- Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
-
-- Added `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877)
-
-### RTL
-
-- Horizontal direction specific variables, utilities, and mixins have all been renamed to use logical properties like those found in flexbox layouts—e.g., `start` and `end` in lieu of `left` and `right`.
+- Relocated heading classes (like `.h1`) and some type classes (`.mark` and `.small`) to Reboot from `_type.scss`. This avoids a dependency in Sass modules and we like to avoid extending selectors in general.
 
 ### Forms
 
-- **Added new floating forms!** We’ve promoted the Floating labels example to fully supported form components. [See the new Floating labels page.]([[docsref:/forms/floating-labels]])
-
-- <span class="badge text-bg-danger">Breaking</span> **Consolidated native and custom form elements.** Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML.
-  - `.custom-control.custom-checkbox` is now `.form-check`.
-  - `.custom-control.custom-radio` is now `.form-check`.
-  - `.custom-control.custom-switch` is now `.form-check.form-switch`.
-  - `.custom-select` is now `.form-select`.
-  - `.custom-file` and `.form-control-file` have been replaced by custom styles on top of `.form-control`.
-  - `.custom-range` is now `.form-range`.
-  - Dropped native `.form-control-file` and `.form-control-range`.
-
-- <span class="badge text-bg-danger">Breaking</span> Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups.
-
-- The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation.
-
-- <span class="badge text-bg-danger">Breaking</span> **Dropped form-specific layout classes for our grid system.** Use our grid and utilities instead of `.form-group`, `.form-row`, or `.form-inline`.
-
-- <span class="badge text-bg-danger">Breaking</span> Form labels now require `.form-label`.
-
-- <span class="badge text-bg-danger">Breaking</span> `.form-text` no longer sets `display`, allowing you to create inline or block help text as you wish just by changing the HTML element.
-
-- Form controls no longer used fixed `height` when possible, instead deferring to `min-height` to improve customization and compatibility with other components.
-
-- Validation icons are no longer applied to `<select>`s with `multiple`.
-
-- Rearranged source Sass files under `scss/forms/`, including input group styles.
-
-<hr class="my-5"/>
-
-### Components
-
-- Unified `padding` values for alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips to be based on our `$spacer` variable. [See #30564](https://github.com/twbs/bootstrap/pull/30564).
-
-#### Accordion
-
-- Added [new accordion component]([[docsref:/components/accordion]]).
-
-#### Alerts
-
-- Alerts now have [examples with icons]([[docsref:/components/alerts#icons]]).
-
-- Removed custom styles for `<hr>`s in each alert since they already use `currentColor`.
-
-#### Badges
-
-- <span class="badge text-bg-danger">Breaking</span> Dropped all `.badge-*` color classes for background utilities (e.g., use `.bg-primary` instead of `.badge-primary`).
-
-- <span class="badge text-bg-danger">Breaking</span> Dropped `.badge-pill`—use the `.rounded-pill` utility instead.
-
-- <span class="badge text-bg-danger">Breaking</span> Removed hover and focus styles for `<a>` and `<button>` elements.
-
-- Increased default padding for badges from `.25em`/`.5em` to `.35em`/`.65em`.
-
-#### Breadcrumbs
-
-- Simplified the default appearance of breadcrumbs by removing `padding`, `background-color`, and `border-radius`.
-
-- Added new CSS custom property `--bs-breadcrumb-divider` for easy customization without needing to recompile CSS.
-
-#### Buttons
-
-- <span class="badge text-bg-danger">Breaking</span> **[Toggle buttons]([[docsref:/forms/checks-radios#toggle-buttons]]), with checkboxes or radios, no longer require JavaScript and have new markup.** We no longer require a wrapping element, add `.btn-check` to the `<input>`, and pair it with any `.btn` classes on the `<label>`. [See #30650](https://github.com/twbs/bootstrap/pull/30650). _The docs for this has moved from our Buttons page to the new Forms section._
-
-- <span class="badge text-bg-danger">Breaking</span> **Dropped `.btn-block` for utilities.** Instead of using `.btn-block` on the `.btn`, wrap your buttons with `.d-grid` and a `.gap-*` utility to space them as needed. Switch to responsive classes for even more control over them. [Read the docs for some examples.]([[docsref:/components/buttons#block-buttons]])
-
-- Updated our `button-variant()` and `button-outline-variant()` mixins to support additional parameters.
-
-- Updated buttons to ensure increased contrast on hover and active states.
-
-- Disabled buttons now have `pointer-events: none;`.
-
-#### Card
-
-- <span class="badge text-bg-danger">Breaking</span> Dropped `.card-deck` in favor of our grid. Wrap your cards in column classes and add a parent `.row-cols-*` container to recreate card decks (but with more control over responsive alignment).
-
-- <span class="badge text-bg-danger">Breaking</span> Dropped `.card-columns` in favor of Masonry. [See #28922](https://github.com/twbs/bootstrap/pull/28922).
-
-- <span class="badge text-bg-danger">Breaking</span> Replaced the `.card` based accordion with a [new Accordion component]([[docsref:/components/accordion]]).
-
-#### Carousel
-
-- Added new [`.carousel-dark` variant]([[docsref:/components/carousel#dark-variant]]) for dark text, controls, and indicators (great for lighter backgrounds).
-
-- Replaced chevron icons for carousel controls with new SVGs from [Bootstrap Icons]([[config:icons]]).
-
-#### Close button
-
-- <span class="badge text-bg-danger">Breaking</span> Renamed `.close` to `.btn-close` for a less generic name.
-
-- Close buttons now use a `background-image` (embedded SVG) instead of a `&times;` in the HTML, allowing for easier customization without the need to touch your markup.
-
-- Added new `.btn-close-white` variant that uses `filter: invert(1)` to enable higher contrast dismiss icons against darker backgrounds.
-
-#### Collapse
-
-- Removed scroll anchoring for accordions.
-
-#### Dropdowns
-
-- Added new `.dropdown-menu-dark` variant and associated variables for on-demand dark dropdowns.
-
-- Added new variable for `$dropdown-padding-x`.
-
-- Darkened the dropdown divider for improved contrast.
-
-- <span class="badge text-bg-danger">Breaking</span> All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element.
-
-- Dropdown menus now have a `data-bs-popper="static"` attribute set when the positioning of the dropdown is static, or dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper’s positioning.
-
-- <span class="badge text-bg-danger">Breaking</span> Dropped `flip` option for dropdown plugin in favor of native Popper configuration. You can now disable the flipping behavior by passing an empty array for [`fallbackPlacements`](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) option in [flip](https://popper.js.org/docs/v2/modifiers/flip/) modifier.
-
-- Dropdown menus can now be clickable with a new `autoClose` option to handle the [auto close behavior]([[docsref:/components/dropdowns#auto-close-behavior]]). You can use this option to accept the click inside or outside the dropdown menu to make it interactive.
-
-- Dropdowns now support `.dropdown-item`s wrapped in `<li>`s.
-
-#### Jumbotron
-
-- <span class="badge text-bg-danger">Breaking</span> Dropped the jumbotron component as it can be replicated with utilities. [See our new Jumbotron example for a demo.]([[docsref:/examples/jumbotron]])
-
-#### List group
-
-- Added new [`.list-group-numbered` modifier]([[docsref:/components/list-group#numbered]]) to list groups.
-
-#### Navs and tabs
-
-- Added new `null` variables for `font-size`, `font-weight`, `color`, and `:hover` `color` to the `.nav-link` class.
-
-#### Navbars
-
-- <span class="badge text-bg-danger">Breaking</span> Navbars now require a container within (to drastically simplify spacing requirements and CSS required).
-- <span class="badge text-bg-danger">Breaking</span> The `.active` class can no longer be applied to `.nav-item`s, it must be applied directly on `.nav-link`s.
-
-#### Offcanvas
-
-- Added the new [offcanvas component]([[docsref:/components/offcanvas]]).
-
-#### Pagination
-
-- Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another.
-
-- Added `transition`s to pagination links.
-
-#### Popovers
-
-- <span class="badge text-bg-danger">Breaking</span> Renamed `.arrow` to `.popover-arrow` in our default popover template.
-
-- Renamed `whiteList` option to `allowList`.
-
-#### Spinners
-
-- Spinners now honor `prefers-reduced-motion: reduce` by slowing down animations. [See #31882](https://github.com/twbs/bootstrap/pull/31882).
-
-- Improved spinner vertical alignment.
-
-#### Toasts
-
-- Toasts can now be [positioned]([[docsref:/components/toasts#placement]]) in a `.toast-container` with the help of [positioning utilities]([[docsref:/utilities/position]]).
-
-- Changed default toast duration to 5 seconds.
-
-- Removed `overflow: hidden` from toasts and replaced with proper `border-radius`s with `calc()` functions.
-
-#### Tooltips
-
-- <span class="badge text-bg-danger">Breaking</span> Renamed `.arrow` to `.tooltip-arrow` in our default tooltip template.
-
-- <span class="badge text-bg-danger">Breaking</span> The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of popper elements.
-
-- <span class="badge text-bg-danger">Breaking</span> Renamed `whiteList` option to `allowList`.
-
-### Utilities
-
-- <span class="badge text-bg-danger">Breaking</span> Renamed several utilities to use logical property names instead of directional names with the addition of RTL support:
-  - Renamed `.float-left` and `.float-right` to `.float-start` and `.float-end`.
-  - Renamed `.border-left` and `.border-right` to `.border-start` and `.border-end`.
-  - Renamed `.rounded-left` and `.rounded-right` to `.rounded-start` and `.rounded-end`.
-  - Renamed `.ml-*` and `.mr-*` to `.ms-*` and `.me-*`.
-  - Renamed `.pl-*` and `.pr-*` to `.ps-*` and `.pe-*`.
-  - Renamed `.text-*-left` and `.text-*-right` to `.text-*-start` and `.text-*-end`.
-
-- <span class="badge text-bg-danger">Breaking</span> Disabled negative margins by default.
-
-- Added new `.bg-body` class for quickly setting the `<body>`’s background to additional elements.
-
-- Added new [position utilities]([[docsref:/utilities/position#arrange-elements]]) for `top`, `right`, `bottom`, and `left`. Values include `0`, `50%`, and `100%` for each property.
-
-- Added new `.translate-middle-x` & `.translate-middle-y` utilities to horizontally or vertically center absolute/fixed positioned elements.
-
-- Added new [`border-width` utilities]([[docsref:/utilities/border#border-width]]).
-
-- <span class="badge text-bg-danger">Breaking</span> Renamed `.text-monospace` to `.font-monospace`.
-
-- <span class="badge text-bg-danger">Breaking</span> Removed `.text-hide` as it’s an antiquated method for hiding text that shouldn’t be used anymore.
-
-- Added `.fs-*` utilities for `font-size` utilities (with RFS enabled). These use the same scale as HTML’s default headings (1-6, large to small), and can be modified via Sass map.
-
-- <span class="badge text-bg-danger">Breaking</span> Renamed `.font-weight-*` utilities as `.fw-*` for brevity and consistency.
-
-- <span class="badge text-bg-danger">Breaking</span> Renamed `.font-italic` utility to `.fst-italic` for brevity and consistency with new `.fst-normal` utility.
-
-- Added `.d-grid` to display utilities and new `gap` utilities (`.gap`) for CSS Grid and flexbox layouts.
-
-- <span class="badge text-bg-danger">Breaking</span> Removed `.rounded-sm` and `rounded-lg`, and introduced a new scale of classes, `.rounded-0` to `.rounded-3`. [See #31687](https://github.com/twbs/bootstrap/pull/31687).
-
-- Added new `line-height` utilities: `.lh-1`, `.lh-sm`, `.lh-base` and `.lh-lg`. See [text utilities]([[docsref:/utilities/text#line-height]]).
-
-- Moved the `.d-none` utility in our CSS to give it more weight over other display utilities.
-
-- Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`.
+- **Refactor checks, radios, and switches.**
+  - Split apart `_form-check.scss` into separate stylesheets: `_checkbox.scss`, `_radio.scss`, and `_switch.scss`.
+  - Also split apart the documentation pages for checks, radios, and switches.
+  - Added new CSS variables on each of these components. _Side note: we could've shared variables here, but chose not to for simplicity's sake._
+  - Removed several now unused Sass variables.
+  - Checkboxes now have a wrapping element and an SVG in the DOM for checked and indeterminate states. Radios and switches do not.
+  - Revamped layout for checks, radios, and switches with labels (and descriptions). We now have custom elements for layout that include basic flexbox styling.
+  - @mdo-do: Decide on fate of `.form-check-reverse` and `.btn-check`
+- **Consolidate `.form-select` into `.form-control`.**
+  - Removed `.form-select`—use `.form-control` on `<select>` elements now. Too much abstraction and duplication at the same time.
+  - Adds new CSS variables on `.form-control` for easier customization without Sass compilation.
+  - `.form-control` now has a `min-height` at all times as opposed to just on `<textarea>` elements. This reduces some CSS for us.
 
 ### Helpers
 
-- <span class="badge text-bg-danger">Breaking</span> **Responsive embed helpers have been renamed to [ratio helpers]([[docsref:/utilities/aspect-ratio]])** with new class names and improved behaviors, as well as a helpful CSS variable.
-  - Classes have been renamed to change `by` to `x` in the aspect ratio. For example, `.ratio-16by9` is now `.ratio-16x9`.
-  - We’ve dropped the `.embed-responsive-item` and element group selector in favor of a simpler `.ratio > *` selector. No more class is needed, and the ratio helper now works with any HTML element.
-  - The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios` and its values have been simplified to include the class name and the percentage as the `key: value` pair.
-  - CSS variables are now generated and included for each value in the Sass map. Modify the `--bs-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]([[docsref:/utilities/aspect-ratio#custom-ratios]]).
+- Ratio helpers have been moved to utilities.
+- Dropped clearfix helper for `.d-flow-root` utility.
 
-- <span class="badge text-bg-danger">Breaking</span> **"Screen reader" classes are now ["visually hidden" classes]([[docsref:/helpers/visually-hidden]]).**
-  - Changed the Sass file from `scss/helpers/_screenreaders.scss` to `scss/helpers/_visually-hidden.scss`
-  - Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable`
-  - Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`.
+### Utilities
 
-- `bootstrap-utilities.css` now also includes our helpers. Helpers don’t need to be imported in custom builds anymore.
+- Ratio helpers are now powered by the utility API and use simplified values without `calc()`.
+- mdo-do: Need to refactor utilities API if we want to restore the commented out custom ratios.
+- **Display utilities:** added `flow-root` option for a modern clearfix.
+- **Sizing utilities:**
+  - Renamed `.mh-*`/`.mw-*` to `.max-h-*`/`.max-w-*`
+  - Added `.min-h-*` and `.min-w-*` utilities with two default values, `0` and `100%`
+  - Added `auto`, `min-content`, `max-content`, and `fit-content` to `width` and `height` utilities.
+- **Flex & Grid utilities:**
+  - Added `.place-items` and `.justify-items` utilities.
 
-### JavaScript
+### Docs
 
-- **Dropped jQuery dependency** and rewrote plugins to be in regular JavaScript.
-
-- <span class="badge text-bg-danger">Breaking</span> Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use `data-bs-toggle` instead of `data-toggle`.
-
-- **All plugins can now accept a CSS selector as the first argument.** You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:
-
-  ```js
-  const modal = new bootstrap.Modal('#myModal')
-  const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-  ```
-
-- `popperConfig` can be passed as a function that accepts the Bootstrap’s default Popper config as an argument, so that you can merge this default configuration in your way. **Applies to dropdowns, popovers, and tooltips.**
-
-- The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of Popper elements. **Applies to dropdowns, popovers, and tooltips.**
-
-- Removed underscore from public static methods like `_getInstance()` → `getInstance()`.
-
-- Removed `util.js`, with its functionality now integrated into individual plugins. If you previously included `util.js` manually, you can safely remove it, as it is no longer needed. Each plugin now contains only the utilities it requires, enhancing modularity and reducing dependencies.
+- Removed all `AddedIn` badges.
+- Rearranged utilities documentation to break apart larger pages that included groups of utilities. Sizing, spacing, flex, type, and more have been broken out into smaller pages with new sub-group headings in the sidebar.

site/src/content/docs/utilities/align-content.mdx

@@ -0,0 +1,212 @@
+---
+title: Align content
+description: Use align-content utilities to align flex items together on the cross axis.
+toc: true
+mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
+---
+
+import { getData } from '@libs/data'
+
+## Overview
+
+Use `align-content` utilities on flexbox containers to align flex items _together_ on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items.
+
+**Heads up!** This property has no effect on single rows of flex items.
+
+## Basic usage
+
+### Start
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex align-content-start flex-wrap" style="height: 200px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex align-content-start flex-wrap">...</div>
+```
+
+### End
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex align-content-end flex-wrap" style="height: 200px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex align-content-end flex-wrap">...</div>
+```
+
+### Center
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex align-content-center flex-wrap" style="height: 200px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex align-content-center flex-wrap">...</div>
+```
+
+### Between
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex align-content-between flex-wrap" style="height: 200px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex align-content-between flex-wrap">...</div>
+```
+
+### Around
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex align-content-around flex-wrap" style="height: 200px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex align-content-around flex-wrap">...</div>
+```
+
+### Stretch
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex align-content-stretch flex-wrap" style="height: 200px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex align-content-stretch flex-wrap">...</div>
+```
+
+## Responsive
+
+Responsive variations also exist for `align-content`.
+
+<ul>
+{getData('breakpoints').map((breakpoint) => {
+  return (
+    <Fragment>
+      <li><code>.align-content{breakpoint.abbr}-start</code></li>
+      <li><code>.align-content{breakpoint.abbr}-end</code></li>
+      <li><code>.align-content{breakpoint.abbr}-center</code></li>
+      <li><code>.align-content{breakpoint.abbr}-between</code></li>
+      <li><code>.align-content{breakpoint.abbr}-around</code></li>
+      <li><code>.align-content{breakpoint.abbr}-stretch</code></li>
+    </Fragment>
+  )
+})}
+</ul>
+
+## CSS
+
+### Sass utilities API
+
+Align content utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
+
+```scss
+"align-content": (
+  responsive: true,
+  property: align-content,
+  values: (
+    start: flex-start,
+    end: flex-end,
+    center: center,
+    between: space-between,
+    around: space-around,
+    stretch: stretch,
+  )
+),
+```

site/src/content/docs/utilities/align-items.mdx

@@ -0,0 +1,88 @@
+---
+title: Align items
+description: Use align-items utilities to change the alignment of flex items on the cross axis.
+toc: true
+mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
+---
+
+import { getData } from '@libs/data'
+
+## Overview
+
+Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
+
+## Basic usage
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex align-items-start mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex align-items-end mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex align-items-center mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex align-items-baseline mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex align-items-stretch" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="d-flex align-items-start">...</div>
+<div class="d-flex align-items-end">...</div>
+<div class="d-flex align-items-center">...</div>
+<div class="d-flex align-items-baseline">...</div>
+<div class="d-flex align-items-stretch">...</div>
+```
+
+## Responsive
+
+Responsive variations also exist for `align-items`.
+
+<ul>
+{getData('breakpoints').map((breakpoint) => {
+  return (
+    <Fragment>
+      <li><code>.align-items{breakpoint.abbr}-start</code></li>
+      <li><code>.align-items{breakpoint.abbr}-end</code></li>
+      <li><code>.align-items{breakpoint.abbr}-center</code></li>
+      <li><code>.align-items{breakpoint.abbr}-baseline</code></li>
+      <li><code>.align-items{breakpoint.abbr}-stretch</code></li>
+    </Fragment>
+  )
+})}
+</ul>
+
+## CSS
+
+### Sass utilities API
+
+Align items utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
+
+```scss
+"align-items": (
+  responsive: true,
+  property: align-items,
+  values: (
+    start: flex-start,
+    end: flex-end,
+    center: center,
+    baseline: baseline,
+    stretch: stretch,
+  )
+),
+```

site/src/content/docs/utilities/align-self.mdx

@@ -0,0 +1,89 @@
+---
+title: Align self
+description: Use align-self utilities to individually change the alignment of flex items on the cross axis.
+toc: true
+mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
+---
+
+import { getData } from '@libs/data'
+
+## Overview
+
+Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
+
+## Basic usage
+
+<div class="bd-example bd-example-flex">
+  <div class="d-flex mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="align-self-start p-2">Aligned flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="align-self-end p-2">Aligned flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="align-self-center p-2">Aligned flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex mb-3" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="align-self-baseline p-2">Aligned flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+  <div class="d-flex" style="height: 100px">
+    <div class="p-2">Flex item</div>
+    <div class="align-self-stretch p-2">Aligned flex item</div>
+    <div class="p-2">Flex item</div>
+  </div>
+</div>
+
+```html
+<div class="align-self-start">Aligned flex item</div>
+<div class="align-self-end">Aligned flex item</div>
+<div class="align-self-center">Aligned flex item</div>
+<div class="align-self-baseline">Aligned flex item</div>
+<div class="align-self-stretch">Aligned flex item</div>
+```
+
+## Responsive
+
+Responsive variations also exist for `align-self`.
+
+<ul>
+{getData('breakpoints').map((breakpoint) => {
+  return (
+    <Fragment>
+      <li><code>.align-self{breakpoint.abbr}-start</code></li>
+      <li><code>.align-self{breakpoint.abbr}-end</code></li>
+      <li><code>.align-self{breakpoint.abbr}-center</code></li>
+      <li><code>.align-self{breakpoint.abbr}-baseline</code></li>
+      <li><code>.align-self{breakpoint.abbr}-stretch</code></li>
+    </Fragment>
+  )
+})}
+</ul>
+
+## CSS
+
+### Sass utilities API
+
+Align self utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
+
+```scss
+"align-self": (
+  responsive: true,
+  property: align-self,
+  values: (
+    auto: auto,
+    start: flex-start,
+    end: flex-end,
+    center: center,
+    baseline: baseline,
+    stretch: stretch,
+  )
+),
+```

site/src/content/docs/utilities/api.mdx

@@ -14,6 +14,7 @@ The `$utilities` map contains all our utilities and is later merged with your cu
 | --- | --- | --- | --- |
 | [`property`](#property) | **Required** | – | Name of the property, this can be a string or an array of strings (e.g., horizontal paddings or margins). |
 | [`values`](#values) | **Required** | – | List of values, or a map if you don't want the class name to be the same as the value. If `null` is used as map key, `class` is not prepended to the class name. |
+| [`selector`](#selector) | Optional | `class` | Type of CSS selector in the generated CSS ruleset. Can be `class`, `attr-starts`, or `attr-includes`. |
 | [`class`](#class) | Optional | null | Name of the generated class. If not provided and `property` is an array of strings, `class` will default to the first element of the `property` array. If not provided and `property` is a string, the `values` keys are used for the `class` names. |
 | [`css-var`](#css-variable-utilities) | Optional | `false` | Boolean to generate CSS variables instead of CSS rules. |
 | [`css-variable-name`](#css-variable-utilities) | Optional | null | Custom un-prefixed name for the CSS variable inside the ruleset. |
@@ -28,7 +29,7 @@ The `$utilities` map contains all our utilities and is later merged with your cu
 
 ## API explained
 
-All utility variables are added to the `$utilities` variable within our `_utilities.scss` stylesheet. Each group of utilities looks something like this:
+All utility variables are added to the `$utilities` variable within our `_utilities.scss` stylesheet, which is a giant, nested Sass map. Each group of utility classes are generated from a block that looks something like this:
 
 ```scss
 $utilities: (
@@ -55,9 +56,11 @@ Which outputs the following:
 .opacity-100 { opacity: 1; }
 ```
 
-### Property
+### `property`
 
-The required `property` key must be set for any utility, and it must contain a valid CSS property. This property is used in the generated utility’s ruleset. When the `class` key is omitted, it also serves as the default class name. Consider the `text-decoration` utility:
+<div class="badge fs-6 bg-accent mb-3">Required</div>
+
+The `property` key must be set for any utility, and it must contain a valid CSS property. This property is used in the generated utility’s ruleset. When the `class` key is omitted, it also serves as the default class name. Consider the `text-decoration` utility:
 
 ```scss
 $utilities: (
@@ -76,7 +79,9 @@ Output:
 .text-decoration-line-through { text-decoration: line-through; }
 ```
 
-### Values
+### `values`
+
+<div class="badge fs-6 bg-accent mb-3">Required</div>
 
 Use the `values` key to specify which values for the specified `property` should be used in the generated class names and rules. Can be a list or map (set in the utilities or in a Sass variable).
 
@@ -104,7 +109,53 @@ As a Sass variable that sets the list or map, as in our [`position` utilities]([
 values: $position-values
 ```
 
-### Class
+### `selector`
+
+<BsTable>
+| Option | Description |
+| --- | --- |
+| No selector | Defaults to `"class"` |
+| `"class"` | Matches elements with a class that matches the specified value |
+| `"attr-starts"` | Matches elements with a class that starts with a string |
+| `"attr-includes"` | Matches elements with a class that includes a string |
+</BsTable>
+
+Use the `selector` option to change the CSS selector used in the generated CSS ruleset. The default option is to generate a class selector. When using an attribute selector—either `attr-starts` or `attr-includes`—**the `class` option is required**. We use these internally to simplify the construction of other utilities.
+
+For attribute selectors, you'll most likely want the `attr-includes` as the starting attribute selector in CSS applies to the entire string of classes in an attribute's value. For example, `[class^="name"]` would not match `class="example name"`.
+
+As an example, to change from `.ratio-*` to `[class*="ratio-"]`:
+
+```scss
+$utilities: (
+  // Create an attribute selector utility
+  "aspect-ratio-attr": (
+    selector: "attr-includes",
+    class: "ratio-",
+    property: aspect-ratio,
+    values: var(--#{$prefix}ratio),
+  ),
+  // Create a CSS variable utility that matches the attribute selector utility
+  "aspect-ratio": (
+    property: --#{$prefix}ratio,
+    class: ratio,
+    values: $aspect-ratios
+  ),
+);
+```
+
+Which outputs the following:
+
+```css
+[class*="ratio-"] { aspect-ratio: var(--bs-ratio); }
+.ratio-auto { --bs-ratio: auto; }
+.ratio-1x1 { --bs-ratio: 1 / 1; }
+.ratio-4x3 { --bs-ratio: 4 / 3; }
+.ratio-16x9 { --bs-ratio: 16 / 9; }
+.ratio-21x9 { --bs-ratio: 21 / 9; }
+```
+
+### `class`
 
 Use the `class` option to change the class prefix used in the compiled CSS. For example, to change from `.opacity-*` to `.o-*`:
 
@@ -296,7 +347,7 @@ Output:
   .opacity-md-100 { opacity: 1; }
 }
 
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
   .opacity-lg-0 { opacity: 0; }
   .opacity-lg-25 { opacity: .25; }
   .opacity-lg-50 { opacity: .5; }
@@ -304,7 +355,7 @@ Output:
   .opacity-lg-100 { opacity: 1; }
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 1280px) {
   .opacity-xl-0 { opacity: 0; }
   .opacity-xl-25 { opacity: .25; }
   .opacity-xl-50 { opacity: .5; }
@@ -312,12 +363,12 @@ Output:
   .opacity-xl-100 { opacity: 1; }
 }
 
-@media (min-width: 1400px) {
-  .opacity-xxl-0 { opacity: 0; }
-  .opacity-xxl-25 { opacity: .25; }
-  .opacity-xxl-50 { opacity: .5; }
-  .opacity-xxl-75 { opacity: .75; }
-  .opacity-xxl-100 { opacity: 1; }
+@media (min-width: 1536px) {
+  .opacity-2xl-0 { opacity: 0; }
+  .opacity-2xl-25 { opacity: .25; }
+  .opacity-2xl-50 { opacity: .5; }
+  .opacity-2xl-75 { opacity: .75; }
+  .opacity-2xl-100 { opacity: 1; }
 }
 ```
 
@@ -507,19 +558,19 @@ This will now generate responsive variations of `.border` and `.border-0` for ea
   .border-md-0 { ... }
 }
 
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
   .border-lg { ... }
   .border-lg-0 { ... }
 }
 
-@media (min-width: 1200px) {
+@media (min-width: 1280px) {
   .border-xl { ... }
   .border-xl-0 { ... }
 }
 
-@media (min-width: 1400px) {
-  .border-xxl { ... }
-  .border-xxl-0 { ... }
+@media (min-width: 1536px) {
+  .border-2xl { ... }
+  .border-2xl-0 { ... }
 }
 ```
 

site/src/content/docs/utilities/background.mdx

@@ -18,7 +18,7 @@ Background utilities like `.bg-*` that generated from our original `$theme-color
 </Callout>
 
 <Example code={[
-  ...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} ${themeColor.contrast_color ? `text-${themeColor.contrast_color}` : `text-white`}">.bg-${themeColor.name}</div>
+  ...getData('theme-colors').map((themeColor) => `<div class="p-3 mb-2 bg-${themeColor.name} text-white">.bg-${themeColor.name}</div>
 <div class="p-3 mb-2 bg-${themeColor.name}-subtle text-${themeColor.name}-emphasis">.bg-${themeColor.name}-subtle</div>`),
   `<div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div>
 <div class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div>
@@ -36,7 +36,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 
 {getData('theme-colors').map((themeColor) => {
   return (
-    <div class={`p-3 mb-2 bg-${themeColor.name} bg-gradient${themeColor.contrast_color ? (' text-' + themeColor.contrast_color) : ' text-white'}`}>.bg-{themeColor.name}.bg-gradient</div>
+    <div class={`p-3 mb-2 bg-${themeColor.name} bg-gradient text-white`}>.bg-{themeColor.name}.bg-gradient</div>
   )
 })}
 <div class="p-3 mb-2 bg-black bg-gradient text-white">.bg-black.bg-gradient</div>
@@ -107,20 +107,6 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen
 
 {/*<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />*/}
 
-RGB colors are generated from a separate Sass map:
-
-<ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" />
-
-Background color opacities build on that with their own map that’s consumed by the utilities API:
-
-<ScssDocs name="utilities-bg-colors" file="scss/_maps.scss" />
-
-Color mode background colors are also available as a Sass map:
-
-<ScssDocs name="theme-bg-subtle-map" file="scss/_maps.scss" />
-
-<ScssDocs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" />
-
 ### Sass mixins
 
 **No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you’d like to create your own gradients.

site/src/content/docs/utilities/border.mdx

@@ -220,14 +220,6 @@ Variables for setting `border-color` in `.border-*-subtle` utilities in light an
 
 {/* <ScssDocs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" /> */}
 
-### Sass maps
-
-Color mode adaptive border colors are also available as a Sass map:
-
-<ScssDocs name="theme-border-subtle-map" file="scss/_maps.scss" />
-
-<ScssDocs name="theme-border-subtle-dark-map" file="scss/_maps.scss" />
-
 ### Sass mixins
 
 <ScssDocs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" />

site/src/content/docs/utilities/colors.mdx

@@ -17,7 +17,7 @@ Color utilities like `.text-*` that generated from our original `$theme-colors`
 </Callout>
 
 <Example code={[
-  ...getData('theme-colors').map((themeColor) => `<p class="text-${themeColor.name}${themeColor.contrast_color ? ` bg-${themeColor.contrast_color}` : ``}">.text-${themeColor.name}</p>
+  ...getData('theme-colors').map((themeColor) => `<p class="text-${themeColor.name}">.text-${themeColor.name}</p>
 <p class="text-${themeColor.name}-emphasis">.text-${themeColor.name}-emphasis</p>`),
   `
 <p class="text-body">.text-body</p>
@@ -72,22 +72,10 @@ In addition to the following Sass functionality, consider reading about our incl
 
 Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
 
-{/*<ScssDocs name="color-variables" file="scss/_variables.scss" />*/}
-
 <ScssDocs name="theme-color-variables" file="scss/_variables.scss" />
 
 Grayscale colors are also available, but only a subset are used to generate any utilities.
 
-{/*<ScssDocs name="gray-color-variables" file="scss/_variables.scss" />*/}
-
-<ScssDocs name="theme-text-map" file="scss/_maps.scss" />
-
-Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode:
-
-{/* <ScssDocs name="theme-text-variables" file="scss/_variables.scss" /> */}
-
-{/* <ScssDocs name="theme-text-dark-variables" file="scss/_variables-dark.scss" /> */}
-
 ### Sass maps
 
 Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more.
@@ -98,20 +86,6 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen
 
 {/*<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />*/}
 
-RGB colors are generated from a separate Sass map:
-
-<ScssDocs name="theme-colors-rgb" file="scss/_maps.scss" />
-
-Color opacities build on that with their own map that’s consumed by the utilities API:
-
-<ScssDocs name="utilities-text-colors" file="scss/_maps.scss" />
-
-Color mode adaptive text colors are also available as a Sass map:
-
-<ScssDocs name="theme-text-map" file="scss/_maps.scss" />
-
-<ScssDocs name="theme-text-dark-map" file="scss/_maps.scss" />
-
 ### Sass utilities API
 
 Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])

site/src/content/docs/utilities/display.mdx

@@ -47,12 +47,12 @@ Change the value of the [`display` property](https://developer.mozilla.org/en-US
 
 ## Notation
 
-Display utility classes that apply to all [breakpoints]([[docsref:/layout/breakpoints]]), from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+Display utility classes that apply to all [breakpoints]([[docsref:/layout/breakpoints]]), from `xs` to `2xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
 As such, the classes are named using the format:
 
 - `.d-{value}` for `xs`
-- `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
+- `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `2xl`.
 
 Where *value* is one of:
 
@@ -70,7 +70,7 @@ Where *value* is one of:
 
 The display values can be altered by changing the `display` values defined in `$utilities` and recompiling the SCSS.
 
-The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, and `xxl` screens.
+The media queries affect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on `lg`, `xl`, and `2xl` screens.
 
 ## Clearfix
 
@@ -92,7 +92,7 @@ There's no more clearfix helper in v6 as it's an outdated technique. Instead, us
 
 For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.
 
-To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation.
+To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,2xl}-none` classes for any responsive screen variation.
 
 To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
 
@@ -104,15 +104,15 @@ To show an element only on a given interval of screen sizes you can combine one
 | Hidden only on sm | `.d-sm-none .d-md-block` |
 | Hidden only on md | `.d-md-none .d-lg-block` |
 | Hidden only on lg | `.d-lg-none .d-xl-block` |
-| Hidden only on xl | `.d-xl-none .d-xxl-block` |
-| Hidden only on xxl | `.d-xxl-none` |
+| Hidden only on xl | `.d-xl-none .d-2xl-block` |
+| Hidden only on 2xl | `.d-2xl-none` |
 | Visible on all | `.d-block` |
 | Visible only on xs | `.d-block .d-sm-none` |
 | Visible only on sm | `.d-none .d-sm-block .d-md-none` |
 | Visible only on md | `.d-none .d-md-block .d-lg-none` |
 | Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
-| Visible only on xl | `.d-none .d-xl-block .d-xxl-none` |
-| Visible only on xxl | `.d-none .d-xxl-block` |
+| Visible only on xl | `.d-none .d-xl-block .d-2xl-none` |
+| Visible only on 2xl | `.d-none .d-2xl-block` |
 </BsTable>
 
 <Example code={`<div class="d-lg-none">hide on lg and wider screens</div>

site/src/content/docs/utilities/flex.mdx

@@ -49,7 +49,7 @@ Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-r
     <div class="p-2">Flex item 3</div>
   </div>`} />
 
-Use `.flex-column` to set a vertical direction, or `.flex-column-reverse`  to start the vertical direction from the opposite side.
+Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to start the vertical direction from the opposite side.
 
 <Example class="bd-example-flex" code={`<div class="d-flex flex-column mb-3">
     <div class="p-2">Flex item 1</div>
@@ -65,191 +65,14 @@ Use `.flex-column` to set a vertical direction, or `.flex-column-reverse`  to st
 Responsive variations also exist for `flex-direction`.
 
 <ul>
-{getData('breakpoints').map((breakpoint) => {
-  return (
-    <Fragment>
-      <li><code>.flex{breakpoint.abbr}-row</code></li>
-      <li><code>.flex{breakpoint.abbr}-row-reverse</code></li>
-      <li><code>.flex{breakpoint.abbr}-column</code></li>
-      <li><code>.flex{breakpoint.abbr}-column-reverse</code></li>
-    </Fragment>
-  )
-})}
-</ul>
-
-## Justify content
-
-Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `evenly`.
-
-<div class="bd-example bd-example-flex">
-  <div class="d-flex justify-content-start mb-3">
-    <div class="p-2 bd-highlight">Justify</div>
-    <div class="p-2 bd-highlight">Content</div>
-    <div class="p-2 bd-highlight">Start</div>
-  </div>
-  <div class="d-flex justify-content-end mb-3">
-    <div class="p-2 bd-highlight">Justify</div>
-    <div class="p-2 bd-highlight">Content</div>
-    <div class="p-2 bd-highlight">End</div>
-  </div>
-  <div class="d-flex justify-content-center mb-3">
-    <div class="p-2 bd-highlight">Justify</div>
-    <div class="p-2 bd-highlight">Content</div>
-    <div class="p-2 bd-highlight">Center</div>
-  </div>
-  <div class="d-flex justify-content-between mb-3">
-    <div class="p-2 bd-highlight">Justify</div>
-    <div class="p-2 bd-highlight">Content</div>
-    <div class="p-2 bd-highlight">Between</div>
-  </div>
-  <div class="d-flex justify-content-around mb-3">
-    <div class="p-2 bd-highlight">Justify</div>
-    <div class="p-2 bd-highlight">Content</div>
-    <div class="p-2 bd-highlight">Around</div>
-  </div>
-  <div class="d-flex justify-content-evenly">
-    <div class="p-2 bd-highlight">Justify</div>
-    <div class="p-2 bd-highlight">Content</div>
-    <div class="p-2 bd-highlight">Evenly</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex justify-content-start">...</div>
-<div class="d-flex justify-content-end">...</div>
-<div class="d-flex justify-content-center">...</div>
-<div class="d-flex justify-content-between">...</div>
-<div class="d-flex justify-content-around">...</div>
-<div class="d-flex justify-content-evenly">...</div>
-```
-
-Responsive variations also exist for `justify-content`.
-
-<ul>
-{getData('breakpoints').map((breakpoint) => {
-  return (
-    <Fragment>
-      <li><code>.justify-content{breakpoint.abbr}-start</code></li>
-      <li><code>.justify-content{breakpoint.abbr}-end</code></li>
-      <li><code>.justify-content{breakpoint.abbr}-center</code></li>
-      <li><code>.justify-content{breakpoint.abbr}-between</code></li>
-      <li><code>.justify-content{breakpoint.abbr}-around</code></li>
-      <li><code>.justify-content{breakpoint.abbr}-evenly</code></li>
-    </Fragment>
-  )
-})}
-</ul>
-
-## Align items
-
-Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
-
-<div class="bd-example bd-example-flex">
-  <div class="d-flex align-items-start mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-  <div class="d-flex align-items-end mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-  <div class="d-flex align-items-center mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-  <div class="d-flex align-items-baseline mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-  <div class="d-flex align-items-stretch" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex align-items-start">...</div>
-<div class="d-flex align-items-end">...</div>
-<div class="d-flex align-items-center">...</div>
-<div class="d-flex align-items-baseline">...</div>
-<div class="d-flex align-items-stretch">...</div>
-```
-
-Responsive variations also exist for `align-items`.
-
-<ul>
-{getData('breakpoints').map((breakpoint) => {
-  return (
-    <Fragment>
-      <li><code>.align-items{breakpoint.abbr}-start</code></li>
-      <li><code>.align-items{breakpoint.abbr}-end</code></li>
-      <li><code>.align-items{breakpoint.abbr}-center</code></li>
-      <li><code>.align-items{breakpoint.abbr}-baseline</code></li>
-      <li><code>.align-items{breakpoint.abbr}-stretch</code></li>
-    </Fragment>
-  )
-})}
-</ul>
-
-## Align self
-
-Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
-
-<div class="bd-example bd-example-flex">
-  <div class="d-flex mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="align-self-start p-2">Aligned flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-  <div class="d-flex mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="align-self-end p-2">Aligned flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-  <div class="d-flex mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="align-self-center p-2">Aligned flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-  <div class="d-flex mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="align-self-baseline p-2">Aligned flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-  <div class="d-flex" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="align-self-stretch p-2">Aligned flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="align-self-start">Aligned flex item</div>
-<div class="align-self-end">Aligned flex item</div>
-<div class="align-self-center">Aligned flex item</div>
-<div class="align-self-baseline">Aligned flex item</div>
-<div class="align-self-stretch">Aligned flex item</div>
-```
-
-Responsive variations also exist for `align-self`.
-
-<ul>
-{getData('breakpoints').map((breakpoint) => {
-  return (
-    <Fragment>
-      <li><code>.align-self{breakpoint.abbr}-start</code></li>
-      <li><code>.align-self{breakpoint.abbr}-end</code></li>
-      <li><code>.align-self{breakpoint.abbr}-center</code></li>
-      <li><code>.align-self{breakpoint.abbr}-baseline</code></li>
-      <li><code>.align-self{breakpoint.abbr}-stretch</code></li>
-    </Fragment>
-  )
-})}
+{getSequence(0, 5).map((i) => (
+  <Fragment>
+    <li><code>.flex{getData('breakpoints')[i].abbr}-row</code></li>
+    <li><code>.flex{getData('breakpoints')[i].abbr}-row-reverse</code></li>
+    <li><code>.flex{getData('breakpoints')[i].abbr}-column</code></li>
+    <li><code>.flex{getData('breakpoints')[i].abbr}-column-reverse</code></li>
+  </Fragment>
+))}
 </ul>
 
 ## Fill
@@ -274,7 +97,7 @@ Responsive variations also exist for `flex-fill`.
 
 ## Grow and shrink
 
-Use `.flex-grow-*` utilities to toggle a flex item’s ability to grow to fill available space. In the example below, the `.flex-grow-1` elements uses all available space it can, while allowing the remaining two flex items their necessary space.
+Use `.flex-grow-*` utilities to toggle a flex item's ability to grow to fill available space. In the example below, the `.flex-grow-1` elements uses all available space it can, while allowing the remaining two flex items their necessary space.
 
 <Example class="bd-example-flex" code={`<div class="d-flex">
     <div class="p-2 flex-grow-1">Flex item</div>
@@ -282,7 +105,7 @@ Use `.flex-grow-*` utilities to toggle a flex item’s ability to grow to fill a
     <div class="p-2">Third flex item</div>
   </div>`} />
 
-Use `.flex-shrink-*` utilities to toggle a flex item’s ability to shrink if necessary. In the example below, the second flex item with `.flex-shrink-1` is forced to wrap its contents to a new line, “shrinking” to allow more space for the previous flex item with `.w-100`.
+Use `.flex-shrink-*` utilities to toggle a flex item's ability to shrink if necessary. In the example below, the second flex item with `.flex-shrink-1` is forced to wrap its contents to a new line, "shrinking" to allow more space for the previous flex item with `.w-100`.
 
 <Example class="bd-example-flex" code={`<div class="d-flex">
     <div class="p-2 w-100">Flex item</div>
@@ -295,51 +118,15 @@ Responsive variations also exist for `flex-grow` and `flex-shrink`.
 {getData('breakpoints').map((breakpoint) => {
   return (
     <Fragment>
-      <li><code>.flex{breakpoint.abbr}-{'{'}grow|shrink{'}'}-0</code></li>
-      <li><code>.flex{breakpoint.abbr}-{'{'}grow|shrink{'}'}-1</code></li>
+      <li><code>.flex{breakpoint.abbr}-grow-0</code></li>
+      <li><code>.flex{breakpoint.abbr}-grow-1</code></li>
+      <li><code>.flex{breakpoint.abbr}-shrink-0</code></li>
+      <li><code>.flex{breakpoint.abbr}-shrink-1</code></li>
     </Fragment>
   )
 })}
 </ul>
 
-## Auto margins
-
-Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.me-auto`), and pushing two items to the left (`.ms-auto`).
-
-<Example class="bd-example-flex" code={`<div class="d-flex mb-3">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-
-  <div class="d-flex mb-3">
-    <div class="me-auto p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-
-  <div class="d-flex mb-3">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="ms-auto p-2">Flex item</div>
-  </div>`} />
-
-### With align-items
-
-Vertically move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`.
-
-<Example class="bd-example-flex" code={`<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
-    <div class="mb-auto p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-
-  <div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="mt-auto p-2">Flex item</div>
-  </div>`} />
-
 ## Wrap
 
 Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, wrapping with `.flex-wrap`, or reverse wrapping with `.flex-wrap-reverse`.
@@ -424,229 +211,6 @@ Responsive variations also exist for `flex-wrap`.
 })}
 </ul>
 
-## Order
-
-Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value from 0 to 5, add custom CSS for any additional values needed.
-
-<Example class="bd-example-flex" code={`<div class="d-flex flex-nowrap">
-    <div class="order-3 p-2">First flex item</div>
-    <div class="order-2 p-2">Second flex item</div>
-    <div class="order-1 p-2">Third flex item</div>
-  </div>`} />
-
-Responsive variations also exist for `order`.
-
-<ul>
-{getData('breakpoints').map((breakpoint) => getSequence(0, 5).map((value) => {
-  return (
-    <li><code>.order{breakpoint.abbr}-{value}</code></li>
-  )
-}))}
-</ul>
-
-Additionally there are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively.
-
-<ul>
-{getData('breakpoints').map((breakpoint) => ['first', 'last'].map((value) => {
-  return (
-    <li><code>.order{breakpoint.abbr}-{value}</code></li>
-  )
-}))}
-</ul>
-
-## Align content
-
-Use `align-content` utilities on flexbox containers to align flex items _together_ on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we’ve enforced `flex-wrap: wrap` and increased the number of flex items.
-
-**Heads up!** This property has no effect on single rows of flex items.
-
-<div class="bd-example bd-example-flex">
-  <div class="d-flex align-content-start flex-wrap mb-3" style="height: 200px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex align-content-start flex-wrap">
-  ...
-</div>
-```
-
-<div class="bd-example bd-example-flex">
-  <div class="d-flex align-content-end flex-wrap mb-3" style="height: 200px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex align-content-end flex-wrap">...</div>
-```
-
-<div class="bd-example bd-example-flex">
-  <div class="d-flex align-content-center flex-wrap mb-3" style="height: 200px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex align-content-center flex-wrap">...</div>
-```
-
-<div class="bd-example bd-example-flex">
-  <div class="d-flex align-content-between flex-wrap mb-3" style="height: 200px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex align-content-between flex-wrap">...</div>
-```
-
-<div class="bd-example bd-example-flex">
-  <div class="d-flex align-content-around flex-wrap mb-3" style="height: 200px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex align-content-around flex-wrap">...</div>
-```
-
-<div class="bd-example bd-example-flex">
-  <div class="d-flex align-content-stretch flex-wrap mb-3" style="height: 200px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-  </div>
-</div>
-
-```html
-<div class="d-flex align-content-stretch flex-wrap">...</div>
-```
-
-Responsive variations also exist for `align-content`.
-
-<ul>
-{getData('breakpoints').map((breakpoint) => {
-  return (
-    <Fragment>
-      <li><code>.align-content{breakpoint.abbr}-start</code></li>
-      <li><code>.align-content{breakpoint.abbr}-end</code></li>
-      <li><code>.align-content{breakpoint.abbr}-center</code></li>
-      <li><code>.align-content{breakpoint.abbr}-between</code></li>
-      <li><code>.align-content{breakpoint.abbr}-around</code></li>
-      <li><code>.align-content{breakpoint.abbr}-stretch</code></li>
-    </Fragment>
-  )
-})}
-</ul>
-
-## Media object
-
-Looking to replicate the [media object component](https://getbootstrap.com/docs/4.6/components/media-object/) from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before.
-
-<Example code={`<div class="d-flex">
-    <div class="flex-shrink-0">
-      <Placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" />
-    </div>
-    <div class="flex-grow-1 ms-3">
-      This is some content from a media component. You can replace this with any content and adjust it as needed.
-    </div>
-  </div>`} />
-
-And say you want to vertically center the content next to the image:
-
-<Example code={`<div class="d-flex align-items-center">
-    <div class="flex-shrink-0">
-      <Placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" />
-    </div>
-    <div class="flex-grow-1 ms-3">
-      This is some content from a media component. You can replace this with any content and adjust it as needed.
-    </div>
-  </div>`} />
-
 ## CSS
 
 ### Sass utilities API

site/src/content/docs/utilities/float.mdx

@@ -34,7 +34,7 @@ Responsive variations also exist for each `float` value.
 <div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
 <div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
 <div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
-<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>`} />
+<div class="float-2xl-end">Float end on viewports sized 2XL (extra extra large) or wider</div><br>`} />
 
 Here are all the support classes:
 

site/src/content/docs/utilities/font-style.mdx

@@ -0,0 +1,122 @@
+---
+title: Font style
+description: Utilities for controlling font properties including size, weight, style, line height, and font family.
+toc: true
+reference:
+  - class: fs-1
+    styles:
+      font-size: 'calc(1.375rem + 1.5vw)'
+  - class: fs-6
+    styles:
+      font-size: '1rem'
+  - class: fw-bold
+    styles:
+      font-weight: '700'
+  - class: fw-normal
+    styles:
+      font-weight: '400'
+  - class: fst-italic
+    styles:
+      font-style: 'italic'
+  - class: fst-normal
+    styles:
+      font-style: 'normal'
+  - class: lh-1
+    styles:
+      line-height: '1'
+  - class: font-monospace
+    styles:
+      font-family: 'var(--bs-font-monospace)'
+---
+
+import { getData } from '@libs/data'
+
+## Font size
+
+Quickly change the `font-size` of text. While our heading classes (e.g., `.h1`–`.h6`) apply `font-size`, `font-weight`, and `line-height`, these utilities _only_ apply `font-size`. Sizing for these utilities matches HTML's heading elements, so as the number increases, their size decreases.
+
+<Example code={`<p class="fs-1">.fs-1 text</p>
+<p class="fs-2">.fs-2 text</p>
+<p class="fs-3">.fs-3 text</p>
+<p class="fs-4">.fs-4 text</p>
+<p class="fs-5">.fs-5 text</p>
+<p class="fs-6">.fs-6 text</p>`} />
+
+Customize your available `font-size`s by modifying the `$font-sizes` Sass map.
+
+## Font weight and italics
+
+Quickly change the `font-weight` or `font-style` of text with these utilities. `font-style` utilities are abbreviated as `.fst-*` and `font-weight` utilities are abbreviated as `.fw-*`.
+
+<Example code={`<p class="fw-bold">Bold text.</p>
+<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
+<p class="fw-semibold">Semibold weight text.</p>
+<p class="fw-medium">Medium weight text.</p>
+<p class="fw-normal">Normal weight text.</p>
+<p class="fw-light">Light weight text.</p>
+<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
+<p class="fst-italic">Italic text.</p>
+<p class="fst-normal">Text with normal font style</p>`} />
+
+## Line height
+
+Change the line height with `.lh-*` utilities.
+
+<Example code={`<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
+<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
+<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
+<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>`} />
+
+## Font family
+
+Change a selection to our monospace font stack with `.font-monospace`.
+
+<Example code={`<p class="font-monospace">This is in monospace</p>`} />
+
+## CSS
+
+### Sass utilities API
+
+Font style utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]])
+
+```scss
+"font-family": (
+  property: font-family,
+  class: font,
+  values: (monospace: var(--#{$prefix}font-monospace))
+),
+"font-size": (
+  rfs: true,
+  property: font-size,
+  class: fs,
+  values: $font-sizes
+),
+"font-style": (
+  property: font-style,
+  class: fst,
+  values: italic normal
+),
+"font-weight": (
+  property: font-weight,
+  class: fw,
+  values: (
+    lighter: $font-weight-lighter,
+    light: $font-weight-light,
+    normal: $font-weight-normal,
+    medium: $font-weight-medium,
+    semibold: $font-weight-semibold,
+    bold: $font-weight-bold,
+    bolder: $font-weight-bolder
+  )
+),
+"line-height": (
+  property: line-height,
+  class: lh,
+  values: (
+    1: 1,
+    sm: $line-height-sm,
+    base: $line-height-base,
+    lg: $line-height-lg,
+  )
+),
+```