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": "10.0 kB"
+      "maxSize": "9.00 kB"
     },
     {
       "path": "./dist/css/bootstrap-grid.min.css",
-      "maxSize": "9.0 kB"
+      "maxSize": "8.25 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.css",
-      "maxSize": "5.5 kB"
+      "maxSize": "5.0 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.min.css",
@@ -18,11 +18,11 @@
     },
     {
       "path": "./dist/css/bootstrap-utilities.css",
-      "maxSize": "15.25 kB"
+      "maxSize": "13.5 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
-      "maxSize": "13.5 kB"
+      "maxSize": "12.0 kB"
     },
     {
       "path": "./dist/css/bootstrap.css",

.cspell.json

@@ -48,7 +48,6 @@
     "favicons",
     "fieldsets",
     "flexbox",
-    "frontmatter",
     "fullscreen",
     "getbootstrap",
     "Grayscale",

.github/workflows/browserstack.yml

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

.github/workflows/bundlewatch.yml

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

.github/workflows/codeql.yml

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

.github/workflows/cspell.yml

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

.github/workflows/css.yml

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

.github/workflows/docs.yml

@@ -25,7 +25,7 @@ jobs:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version: "${{ env.NODE }}"
           cache: npm
@@ -40,7 +40,7 @@ jobs:
         run: npm run docs-html-validate
 
       - name: Run linkinator
-        uses: JustinBeckwith/linkinator-action@af984b9f30f63e796ae2ea5be5e07cb587f1bbd9 # v2.3
+        uses: JustinBeckwith/linkinator-action@3d5ba091319fa7b0ac14703761eebb7d100e6f6d # v1.11.0
         with:
           paths: _site
           recurse: true

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

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

.github/workflows/issue-labeled.yml

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

.github/workflows/js.yml

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

.github/workflows/lint.yml

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

.github/workflows/scorecard.yml

@@ -39,7 +39,7 @@ jobs:
           persist-credentials: false
 
       - name: "Run analysis"
-        uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
+        uses: ossf/scorecard-action@05b42c624433fc40578a4040d5cf5e36ddca8cde # v2.4.2
         with:
           results_file: results.sarif
           results_format: sarif
@@ -64,7 +64,7 @@ jobs:
       # Upload the results as artifacts (optional). Commenting out will disable uploads of run results in SARIF
       # format to the repository Actions tab.
       - name: "Upload artifact"
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: SARIF file
           path: results.sarif
@@ -73,6 +73,6 @@ jobs:
       # Upload the results to GitHub's code scanning dashboard (optional).
       # Commenting out will disable upload of results to your repo's Code Scanning dashboard
       - name: "Upload to code-scanning"
-        uses: github/codeql-action/upload-sarif@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
+        uses: github/codeql-action/upload-sarif@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
         with:
           sarif_file: results.sarif

.gitignore

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

README.md

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

build/generate-sri.mjs

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

build/generate-utilities-json.mjs

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

build/generate-utilities-metadata.scss

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

build/postcss.config.mjs

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

config.yml

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

package.json

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

scss/_accordion.scss

@@ -10,8 +10,8 @@
 // scss-docs-start accordion-variables
 $accordion-padding-y:                     1rem !default;
 $accordion-padding-x:                     1.25rem !default;
-$accordion-color:                         var(--#{$prefix}color-body) !default;
-$accordion-bg:                            var(--#{$prefix}bg-body) !default;
+$accordion-color:                         var(--#{$prefix}body-color) !default;
+$accordion-bg:                            var(--#{$prefix}body-bg) !default;
 $accordion-border-width:                  var(--#{$prefix}border-width) !default;
 $accordion-border-color:                  var(--#{$prefix}border-color) !default;
 $accordion-border-radius:                 var(--#{$prefix}border-radius-lg) !default;
@@ -70,7 +70,7 @@ $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w
     padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
     @include font-size($font-size-base);
     color: var(--#{$prefix}accordion-btn-color);
-    text-align: start; // Reset button style
+    text-align: left; // Reset button style
     background-color: var(--#{$prefix}accordion-btn-bg);
     border: 0;
     @include border-radius(0);
@@ -93,7 +93,7 @@ $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w
       flex-shrink: 0;
       width: var(--#{$prefix}accordion-btn-icon-width);
       height: var(--#{$prefix}accordion-btn-icon-width);
-      margin-inline-start: auto;
+      margin-left: auto;
       content: "";
       background-color: var(--#{$prefix}accordion-btn-color);
       mask: var(--#{$prefix}accordion-btn-icon) no-repeat center 100%;
@@ -129,7 +129,7 @@ $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w
     }
 
     &:not(:first-of-type) {
-      border-block-start: 0;
+      border-top: 0;
     }
 
     // Only set a border-radius on the last item if the accordion is collapsed
@@ -159,11 +159,12 @@ $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w
 
   .accordion-flush {
     > .accordion-item {
-      border-inline: 0;
+      border-right: 0;
+      border-left: 0;
       @include border-radius(0);
 
-      &:first-child { border-block-start: 0; }
-      &:last-child { border-block-end: 0; }
+      &:first-child { border-top: 0; }
+      &:last-child { border-bottom: 0; }
 
       // stylelint-disable selector-max-class
       > .accordion-collapse,

scss/_alert.scss

@@ -17,20 +17,20 @@ $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers widt
 @layer components {
   .alert {
     // scss-docs-start alert-css-vars
-    --#{$prefix}alert-bg: var(--#{$prefix}theme-bg-subtle, transparent);
+    --#{$prefix}alert-bg: transparent;
     --#{$prefix}alert-padding-x: #{$alert-padding-x};
     --#{$prefix}alert-padding-y: #{$alert-padding-y};
     --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
-    --#{$prefix}alert-color: var(--#{$prefix}theme-text, inherit);
+    --#{$prefix}alert-color: inherit;
     --#{$prefix}alert-border-color: transparent;
-    --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}theme-border, var(--#{$prefix}alert-border-color));
+    --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
     --#{$prefix}alert-border-radius: #{$alert-border-radius};
     --#{$prefix}alert-link-color: inherit;
     // scss-docs-end alert-css-vars
 
     position: relative;
     padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
-    // margin-bottom: var(--#{$prefix}alert-margin-bottom);
+    margin-bottom: var(--#{$prefix}alert-margin-bottom);
     color: var(--#{$prefix}alert-color);
     background-color: var(--#{$prefix}alert-bg);
     border: var(--#{$prefix}alert-border);
@@ -55,7 +55,7 @@ $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers widt
   // Expand the right padding and account for the close button's positioning.
 
   .alert-dismissible {
-    padding-inline-end: $alert-dismissible-padding-r;
+    padding-right: $alert-dismissible-padding-r;
 
     // Adjust close link position
     .btn-close {
@@ -66,4 +66,17 @@ $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers widt
       padding: $alert-padding-y * 1.25 $alert-padding-x;
     }
   }
+
+
+  // scss-docs-start alert-modifiers
+  // Generate contextual modifier classes for colorizing the alert
+  @each $state in map.keys($new-theme-colors) {
+    .alert-#{$state} {
+      --#{$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-docs-end alert-modifiers
 }

scss/_badge.scss

@@ -1,7 +1,6 @@
 @use "config" as *;
 @use "colors" as *;
 @use "variables" as *;
-@use "theme" as *;
 @use "mixins/border-radius" as *;
 @use "mixins/gradients" as *;
 @use "vendor/rfs" as *;
@@ -9,9 +8,9 @@
 // scss-docs-start badge-variables
 $badge-font-size:                   .75em !default;
 $badge-font-weight:                 $font-weight-bold !default;
-$badge-color:                       inherit !default;
+$badge-color:                       $white !default;
 $badge-padding-y:                   .35em !default;
-$badge-padding-x:                   .5em !default;
+$badge-padding-x:                   .65em !default;
 $badge-border-radius:               var(--#{$prefix}border-radius) !default;
 // scss-docs-end badge-variables
 
@@ -22,8 +21,7 @@ $badge-border-radius:               var(--#{$prefix}border-radius) !default;
     --#{$prefix}badge-padding-y: #{$badge-padding-y};
     @include rfs($badge-font-size, --#{$prefix}badge-font-size);
     --#{$prefix}badge-font-weight: #{$badge-font-weight};
-    --#{$prefix}badge-color: var(--#{$prefix}theme-contrast, #{$badge-color});
-    --#{$prefix}badge-bg: var(--#{$prefix}theme-bg, var(--#{$prefix}bg-2));
+    --#{$prefix}badge-color: #{$badge-color};
     --#{$prefix}badge-border-radius: #{$badge-border-radius};
     // scss-docs-end badge-css-vars
 
@@ -36,7 +34,6 @@ $badge-border-radius:               var(--#{$prefix}border-radius) !default;
     text-align: center;
     white-space: nowrap;
     vertical-align: baseline;
-    background-color: var(--#{$prefix}badge-bg);
     @include border-radius(var(--#{$prefix}badge-border-radius));
     @include gradient-bg();
 
@@ -51,9 +48,4 @@ $badge-border-radius:               var(--#{$prefix}border-radius) !default;
     position: relative;
     top: -1px;
   }
-
-  .badge-subtle {
-    --#{$prefix}badge-color: var(--#{$prefix}theme-text);
-    --#{$prefix}badge-bg: var(--#{$prefix}theme-bg-subtle);
-  }
 }

scss/_breadcrumb.scss

@@ -46,20 +46,16 @@ $breadcrumb-border-radius:          null !default;
   .breadcrumb-item {
     // The separator between breadcrumbs (by default, a forward-slash: "/")
     + .breadcrumb-item {
-      padding-inline-start: var(--#{$prefix}breadcrumb-item-padding-x);
+      padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
 
       &::before {
-        float: inline-start; // Suppress inline spacings and underlining of the separator
-        padding-inline-end: var(--#{$prefix}breadcrumb-item-padding-x);
+        float: left; // Suppress inline spacings and underlining of the separator
+        padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
         color: var(--#{$prefix}breadcrumb-divider-color);
-        content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider));
+        content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
       }
     }
 
-    [dir="rtl"] &:not(:first-child)::before {
-      content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped));
-    }
-
     &.active {
       color: var(--#{$prefix}breadcrumb-item-active-color);
     }

scss/_card.scss

@@ -21,7 +21,7 @@ $card-cap-bg:                       rgba(var(--#{$prefix}body-color-rgb), .03) !
 $card-cap-color:                    null !default;
 $card-height:                       null !default;
 $card-color:                        null !default;
-$card-bg:                           var(--#{$prefix}bg-body) !default;
+$card-bg:                           var(--#{$prefix}body-bg) !default;
 $card-img-overlay-padding:          $spacer !default;
 $card-group-margin:                 $grid-gutter-width * .5 !default;
 // scss-docs-end card-variables
@@ -55,7 +55,7 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     flex-direction: column;
     min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
     height: var(--#{$prefix}card-height);
-    color: var(--#{$prefix}color-body);
+    color: var(--#{$prefix}body-color);
     word-wrap: break-word;
     background-color: var(--#{$prefix}card-bg);
     background-clip: border-box;
@@ -64,19 +64,21 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     @include box-shadow(var(--#{$prefix}card-box-shadow));
 
     > hr {
-      margin-inline: 0;
+      margin-right: 0;
+      margin-left: 0;
     }
 
     > .list-group {
-      border-block: inherit;
+      border-top: inherit;
+      border-bottom: inherit;
 
       &:first-child {
-        border-block-start-width: 0;
+        border-top-width: 0;
         @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
       }
 
       &:last-child  {
-        border-block-end-width: 0;
+        border-bottom-width: 0;
         @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
       }
     }
@@ -85,7 +87,7 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     // use a child selector here to prevent double borders.
     > .card-header + .list-group,
     > .list-group + .card-footer {
-      border-block-start: 0;
+      border-top: 0;
     }
   }
 
@@ -114,11 +116,11 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 
   .card-link {
     &:hover {
-      text-decoration: none;
+      text-decoration: if($link-hover-decoration == underline, none, null);
     }
 
     + .card-link {
-      margin-inline-start: var(--#{$prefix}card-spacer-x);
+      margin-left: var(--#{$prefix}card-spacer-x);
     }
   }
 
@@ -131,7 +133,7 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     margin-bottom: 0; // Removes the default margin-bottom of <hN>
     color: var(--#{$prefix}card-cap-color);
     background-color: var(--#{$prefix}card-cap-bg);
-    border-block-end: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+    border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
 
     &:first-child {
       @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
@@ -142,7 +144,7 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
     color: var(--#{$prefix}card-cap-color);
     background-color: var(--#{$prefix}card-cap-bg);
-    border-block-start: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+    border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
 
     &:last-child {
       @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
@@ -155,24 +157,29 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
   //
 
   .card-header-tabs {
-    margin-inline: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+    margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
     margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y));
-    border-block-end: 0;
+    margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+    border-bottom: 0;
 
     .nav-link.active {
       background-color: var(--#{$prefix}card-bg);
-      border-block-end-color: var(--#{$prefix}card-bg);
+      border-bottom-color: var(--#{$prefix}card-bg);
     }
   }
 
   .card-header-pills {
-    margin-inline: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+    margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+    margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
   }
 
   // Card image
   .card-img-overlay {
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     padding: var(--#{$prefix}card-img-overlay-padding);
     @include border-radius(var(--#{$prefix}card-inner-border-radius));
   }
@@ -215,8 +222,8 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
         margin-bottom: 0;
 
         + .card {
-          margin-inline-start: 0;
-          border-inline-start: 0;
+          margin-left: 0;
+          border-left: 0;
         }
 
         // Handle rounded corners
@@ -226,11 +233,13 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 
             > .card-img-top,
             > .card-header {
-              border-start-end-radius: 0;
+              // stylelint-disable-next-line property-disallowed-list
+              border-top-right-radius: 0;
             }
             > .card-img-bottom,
             > .card-footer {
-              border-end-end-radius: 0;
+              // stylelint-disable-next-line property-disallowed-list
+              border-bottom-right-radius: 0;
             }
           }
 
@@ -239,11 +248,13 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 
             > .card-img-top,
             > .card-header {
-              border-start-start-radius: 0;
+              // stylelint-disable-next-line property-disallowed-list
+              border-top-left-radius: 0;
             }
             > .card-img-bottom,
             > .card-footer {
-              border-end-start-radius: 0;
+              // stylelint-disable-next-line property-disallowed-list
+              border-bottom-left-radius: 0;
             }
           }
         }

scss/_carousel.scss

@@ -75,9 +75,9 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
   .carousel-item {
     position: relative;
     display: none;
-    float: inline-start;
+    float: left;
     width: 100%;
-    margin-inline-end: -100%;
+    margin-right: -100%;
     backface-visibility: hidden;
     @include transition($carousel-transition);
   }
@@ -133,7 +133,8 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
   .carousel-control-prev,
   .carousel-control-next {
     position: absolute;
-    inset-block: 0;
+    top: 0;
+    bottom: 0;
     z-index: 1;
     // Use flex for alignment (1-3)
     display: flex; // 1. allow flex styles
@@ -159,11 +160,11 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
     }
   }
   .carousel-control-prev {
-    inset-inline-start: 0;
+    left: 0;
     background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
   }
   .carousel-control-next {
-    inset-inline-end: 0;
+    right: 0;
     background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
   }
 
@@ -179,19 +180,10 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
   }
 
   .carousel-control-prev-icon {
-    background-image: escape-svg($carousel-control-prev-icon-bg);
+    background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
   }
-
-  [dir="rtl"] .carousel-control-prev-icon {
-    background-image: escape-svg($carousel-control-next-icon-bg);
-  }
-
   .carousel-control-next-icon {
-    background-image: escape-svg($carousel-control-next-icon-bg);
-  }
-
-  [dir="rtl"] .carousel-control-next-icon {
-    background-image: escape-svg($carousel-control-prev-icon-bg);
+    background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
   }
 
   // Optional indicator pips/controls
@@ -201,14 +193,17 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
 
   .carousel-indicators {
     position: absolute;
-    inset: auto 0 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: 2;
     display: flex;
     justify-content: center;
     padding: 0;
     // Use the .carousel-control's width as margin so we don't overlay those
-    margin-inline: $carousel-control-width;
+    margin-right: $carousel-control-width;
     margin-bottom: 1rem;
+    margin-left: $carousel-control-width;
 
     [data-bs-target] {
       box-sizing: content-box;
@@ -216,14 +211,16 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
       width: $carousel-indicator-width;
       height: $carousel-indicator-height;
       padding: 0;
-      margin-inline: $carousel-indicator-spacer;
+      margin-right: $carousel-indicator-spacer;
+      margin-left: $carousel-indicator-spacer;
       text-indent: -999px;
       cursor: pointer;
       background-color: var(--#{$prefix}carousel-indicator-active-bg);
       background-clip: padding-box;
       border: 0;
       // Use transparent borders to increase the hit area by 10px on top and bottom.
-      border-block: $carousel-indicator-hit-area-height solid transparent;
+      border-top: $carousel-indicator-hit-area-height solid transparent;
+      border-bottom: $carousel-indicator-hit-area-height solid transparent;
       opacity: $carousel-indicator-opacity;
       @include transition($carousel-indicator-transition);
     }

scss/_colors.scss

@@ -41,19 +41,19 @@ $hues: (
 
 :root {
   @each $color, $hue in $hues {
-    --#{$prefix}#{$color}-025: color-mix(in lab, #fff 94%, #{$hue});
-    --#{$prefix}#{$color}-050: color-mix(in lab, #fff 90%, #{$hue});
-    --#{$prefix}#{$color}-100: color-mix(in lab, #fff 80%, #{$hue});
-    --#{$prefix}#{$color}-200: color-mix(in lab, #fff 60%, #{$hue});
-    --#{$prefix}#{$color}-300: color-mix(in lab, #fff 40%, #{$hue});
-    --#{$prefix}#{$color}-400: color-mix(in lab, #fff 20%, #{$hue});
+    --#{$prefix}#{$color}-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 lab, #000 16%, #{$hue});
-    --#{$prefix}#{$color}-700: color-mix(in lab, #000 32%, #{$hue});
-    --#{$prefix}#{$color}-800: color-mix(in lab, #000 48%, #{$hue});
-    --#{$prefix}#{$color}-900: color-mix(in lab, #000 64%, #{$hue});
-    --#{$prefix}#{$color}-950: color-mix(in lab, #000 76%, #{$hue});
-    --#{$prefix}#{$color}-975: color-mix(in lab, #000 88%, #{$hue});
+    --#{$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});
   }
 }
 

scss/_config.scss

@@ -42,21 +42,6 @@ $spacers: (
 ) !default;
 // scss-docs-end spacer-variables-maps
 
-$sizes: (
-  1: $spacer,
-  2: calc($spacer * 2),
-  3: calc($spacer * 3),
-  4: calc($spacer * 4),
-  5: calc($spacer * 5),
-  6: calc($spacer * 6),
-  7: calc($spacer * 7),
-  8: calc($spacer * 8),
-  9: calc($spacer * 9),
-  10: calc($spacer * 10),
-  11: calc($spacer * 11),
-  12: calc($spacer * 12),
-) !default;
-
 // Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,

scss/_dropdown.scss

@@ -16,8 +16,8 @@ $dropdown-padding-x:                0 !default;
 $dropdown-padding-y:                .5rem !default;
 $dropdown-spacer:                   .125rem !default;
 $dropdown-font-size:                $font-size-base !default;
-$dropdown-color:                    var(--#{$prefix}color-body) !default;
-$dropdown-bg:                       var(--#{$prefix}bg-body) !default;
+$dropdown-color:                    var(--#{$prefix}body-color) !default;
+$dropdown-bg:                       var(--#{$prefix}body-bg) !default;
 $dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
 $dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
 $dropdown-border-width:             var(--#{$prefix}border-width) !default;
@@ -26,7 +26,7 @@ $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
 $dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
 
-$dropdown-link-color:               var(--#{$prefix}color-body) !default;
+$dropdown-link-color:               var(--#{$prefix}body-color) !default;
 $dropdown-link-hover-color:         $dropdown-link-color !default;
 $dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg) !default;
 
@@ -115,7 +115,7 @@ $dropdown-dark-header-color:        var(--#{$prefix}gray-500) !default;
     margin: 0; // Override default margin of ul
     @include font-size(var(--#{$prefix}dropdown-font-size));
     color: var(--#{$prefix}dropdown-color);
-    text-align: start; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
     list-style: none;
     background-color: var(--#{$prefix}dropdown-bg);
     background-clip: padding-box;
@@ -191,8 +191,8 @@ $dropdown-dark-header-color:        var(--#{$prefix}gray-500) !default;
       top: 0;
       right: auto;
       left: 100%;
-      margin-inline-start: var(--#{$prefix}dropdown-spacer);
       margin-top: 0;
+      margin-left: var(--#{$prefix}dropdown-spacer);
     }
 
     .dropdown-toggle {
@@ -208,8 +208,8 @@ $dropdown-dark-header-color:        var(--#{$prefix}gray-500) !default;
       top: 0;
       right: 100%;
       left: auto;
-      margin-inline-end: var(--#{$prefix}dropdown-spacer);
       margin-top: 0;
+      margin-right: var(--#{$prefix}dropdown-spacer);
     }
 
     .dropdown-toggle {
@@ -226,7 +226,7 @@ $dropdown-dark-header-color:        var(--#{$prefix}gray-500) !default;
     height: 0;
     margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
     overflow: hidden;
-    border-block-start: 1px solid var(--#{$prefix}dropdown-divider-bg);
+    border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
     opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
   }
 
@@ -241,7 +241,7 @@ $dropdown-dark-header-color:        var(--#{$prefix}gray-500) !default;
     font-weight: $font-weight-normal;
     color: var(--#{$prefix}dropdown-link-color);
     text-align: inherit; // For `<button>`s
-    text-decoration: none;
+    text-decoration: if($link-decoration == none, null, none);
     white-space: nowrap; // prevent links from randomly breaking onto new lines
     background-color: transparent; // For `<button>`s
     border: 0; // For `<button>`s
@@ -250,12 +250,14 @@ $dropdown-dark-header-color:        var(--#{$prefix}gray-500) !default;
     &:hover,
     &:focus {
       color: var(--#{$prefix}dropdown-link-hover-color);
+      text-decoration: if($link-hover-decoration == underline, none, null);
       @include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
     }
 
     &.active,
     &:active {
       color: var(--#{$prefix}dropdown-link-active-color);
+      text-decoration: none;
       @include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
     }
 

scss/_functions.scss

@@ -105,23 +105,6 @@
   @return $result;
 }
 
-// Extract a specific nested property from all items in a map
-// Useful for extracting a single property from nested map structures
-// Example: map-get-nested($font-sizes, "font-size")
-// Returns: ("xs": clamp(...), "sm": clamp(...), ...)
-@function map-get-nested($map, $nested-key) {
-  $result: ();
-  @each $key, $value in $map {
-    @if meta.type-of($value) == "map" {
-      $nested-value: map.get($value, $nested-key);
-      @if $nested-value != null {
-        $result: map.merge($result, ($key: $nested-value));
-      }
-    }
-  }
-  @return $result;
-}
-
 // Merge multiple maps
 @function map-merge-multiple($maps...) {
   $merged-maps: ();

scss/_list-group.scss

@@ -8,8 +8,8 @@
 @use "layout/breakpoints" as *;
 
 // scss-docs-start list-group-variables
-$list-group-color:                  var(--#{$prefix}color-body) !default;
-$list-group-bg:                     var(--#{$prefix}bg-body) !default;
+$list-group-color:                  var(--#{$prefix}body-color) !default;
+$list-group-bg:                     var(--#{$prefix}body-bg) !default;
 $list-group-border-color:           var(--#{$prefix}border-color) !default;
 $list-group-border-width:           var(--#{$prefix}border-width) !default;
 $list-group-border-radius:          var(--#{$prefix}border-radius) !default;
@@ -28,7 +28,7 @@ $list-group-disabled-bg:            $list-group-bg !default;
 $list-group-action-color:           var(--#{$prefix}secondary-color) !default;
 $list-group-action-hover-color:     var(--#{$prefix}emphasis-color) !default;
 
-$list-group-action-active-color:    var(--#{$prefix}color-body) !default;
+$list-group-action-active-color:    var(--#{$prefix}body-color) !default;
 $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
 // scss-docs-end list-group-variables
 
@@ -58,7 +58,7 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
     flex-direction: column;
 
     // No need to set list-style: none; since .list-group-item is block level
-    padding-inline-start: 0; // reset padding because ul and ol
+    padding-left: 0; // reset padding because ul and ol
     margin-bottom: 0;
     @include border-radius(var(--#{$prefix}list-group-border-radius));
   }
@@ -82,10 +82,10 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
     position: relative;
     display: block;
     padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
-    color: var(--#{$prefix}theme-text, var(--#{$prefix}list-group-color));
+    color: var(--#{$prefix}list-group-color);
     text-decoration: if($link-decoration == none, null, none);
-    background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}list-group-bg));
-    border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}theme-border, var(--#{$prefix}list-group-border-color));
+    background-color: var(--#{$prefix}list-group-bg);
+    border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
 
     &:first-child {
       @include border-top-radius(inherit);
@@ -112,11 +112,11 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
 
     // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
     & + .list-group-item {
-      border-block-start-width: 0;
+      border-top-width: 0;
 
       &.active {
         margin-top: calc(-1 * var(--#{$prefix}list-group-border-width));
-        border-block-start-width: var(--#{$prefix}list-group-border-width);
+        border-top-width: var(--#{$prefix}list-group-border-width);
       }
     }
   }
@@ -128,7 +128,7 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
 
   .list-group-item-action {
     width: 100%; // For `<button>`s (anchors become 100% by default though)
-    color: var(--#{$prefix}theme-text, var(--#{$prefix}list-group-action-color));
+    color: var(--#{$prefix}list-group-action-color);
     text-align: inherit; // For `<button>`s (anchors inherit)
 
     &:not(.active) {
@@ -136,14 +136,14 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
       &:hover,
       &:focus {
         z-index: 1; // Place hover/focus items above their siblings for proper border styling
-        color: var(--#{$prefix}theme-text-emphasis, var(--#{$prefix}list-group-action-hover-color));
+        color: var(--#{$prefix}list-group-action-hover-color);
         text-decoration: none;
-        background-color: var(--#{$prefix}theme-bg-muted, var(--#{$prefix}list-group-action-hover-bg));
+        background-color: var(--#{$prefix}list-group-action-hover-bg);
       }
 
       &:active {
-        color: var(--#{$prefix}theme-text-emphasis, var(--#{$prefix}list-group-action-active-color));
-        background-color: var(--#{$prefix}theme-bg-muted, var(--#{$prefix}list-group-action-active-bg));
+        color: var(--#{$prefix}list-group-action-active-color);
+        background-color: var(--#{$prefix}list-group-action-active-bg);
       }
     }
   }
@@ -175,12 +175,12 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
           }
 
           + .list-group-item {
-            border-block-start-width: var(--#{$prefix}list-group-border-width);
-            border-inline-start-width: 0;
+            border-top-width: var(--#{$prefix}list-group-border-width);
+            border-left-width: 0;
 
             &.active {
-              margin-inline-start: calc(-1 * var(--#{$prefix}list-group-border-width));
-              border-inline-start-width: var(--#{$prefix}list-group-border-width);
+              margin-left: calc(-1 * var(--#{$prefix}list-group-border-width));
+              border-left-width: var(--#{$prefix}list-group-border-width);
             }
           }
         }
@@ -201,8 +201,31 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
       border-width: 0 0 var(--#{$prefix}list-group-border-width);
 
       &:last-child {
-        border-block-end-width: 0;
+        border-bottom-width: 0;
       }
     }
   }
+
+
+  // scss-docs-start list-group-modifiers
+  // List group contextual variants
+  //
+  // Add modifier classes to change text and background color on individual items.
+  // Organizationally, this must come after the `:hover` states.
+
+  @each $state in map.keys($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);
+      --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
+      --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
+      --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
+      --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
+      --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
+      --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
+      --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
+      --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
+    }
+  }
+  // scss-docs-end list-group-modifiers
 }

scss/_modal.scss

@@ -42,7 +42,8 @@
     // scss-docs-end modal-css-vars
 
     position: fixed;
-    inset: 0 auto auto 0;
+    top: 0;
+    left: 0;
     z-index: var(--#{$prefix}modal-zindex);
     display: none;
     width: 100%;
@@ -135,16 +136,16 @@
     flex-shrink: 0;
     align-items: center;
     padding: var(--#{$prefix}modal-header-padding);
-    border-block-end: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
+    border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
     @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
 
     .btn-close {
       padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
       // Split properties to avoid invalid calc() function if value is 0
-      margin-inline-start: auto;
-      margin-inline-end: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
       margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
+      margin-right: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
       margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
+      margin-left: auto;
     }
   }
 
@@ -173,7 +174,7 @@
     justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
     padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
     background-color: var(--#{$prefix}modal-footer-bg);
-    border-block-start: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
+    border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
     @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
 
     // Place margin between footer elements
@@ -194,7 +195,8 @@
     // Automatically set modal's width for larger viewports
     .modal-dialog {
       max-width: var(--#{$prefix}modal-width);
-      margin-inline: auto;
+      margin-right: auto;
+      margin-left: auto;
     }
 
     .modal-sm {

scss/_nav.scss

@@ -21,7 +21,7 @@ $nav-tabs-border-width:             var(--#{$prefix}border-width) !default;
 $nav-tabs-border-radius:            var(--#{$prefix}border-radius) !default;
 $nav-tabs-link-hover-border-color:  var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
 $nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color) !default;
-$nav-tabs-link-active-bg:           var(--#{$prefix}bg-body) !default;
+$nav-tabs-link-active-bg:           var(--#{$prefix}body-bg) !default;
 $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
 
 $nav-pills-border-radius:           var(--#{$prefix}border-radius) !default;
@@ -52,7 +52,7 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
 
     display: flex;
     flex-wrap: wrap;
-    padding-inline-start: 0;
+    padding-left: 0;
     margin-bottom: 0;
     list-style: none;
   }
@@ -63,7 +63,7 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
     @include font-size(var(--#{$prefix}nav-link-font-size));
     font-weight: var(--#{$prefix}nav-link-font-weight);
     color: var(--#{$prefix}nav-link-color);
-    text-decoration: none;
+    text-decoration: if($link-decoration == none, null, none);
     background: none;
     border: 0;
     @include transition($nav-link-transition);
@@ -71,6 +71,7 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
     &:hover,
     &:focus {
       color: var(--#{$prefix}nav-link-hover-color);
+      text-decoration: if($link-hover-decoration == underline, none, null);
     }
 
     &:focus-visible {
@@ -102,7 +103,7 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
     --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
     // scss-docs-end nav-tabs-css-vars
 
-    border-block-end: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
+    border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
 
     .nav-link {
       margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
@@ -170,12 +171,13 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
     gap: var(--#{$prefix}nav-underline-gap);
 
     .nav-link {
-      padding-inline: 0;
-      border-block-end: var(--#{$prefix}nav-underline-border-width) solid transparent;
+      padding-right: 0;
+      padding-left: 0;
+      border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
 
       &:hover,
       &:focus {
-        border-block-end-color: currentcolor;
+        border-bottom-color: currentcolor;
       }
     }
 
@@ -183,7 +185,7 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
     .show > .nav-link {
       font-weight: $font-weight-bold;
       color: var(--#{$prefix}nav-underline-link-active-color);
-      border-block-end-color: currentcolor;
+      border-bottom-color: currentcolor;
     }
   }
 

scss/_navbar.scss

@@ -120,15 +120,16 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
   .navbar-brand {
     padding-top: var(--#{$prefix}navbar-brand-padding-y);
     padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
-    margin-inline-end: var(--#{$prefix}navbar-brand-margin-end);
+    margin-right: var(--#{$prefix}navbar-brand-margin-end);
     @include font-size(var(--#{$prefix}navbar-brand-font-size));
     color: var(--#{$prefix}navbar-brand-color);
-    text-decoration: none;
+    text-decoration: if($link-decoration == none, null, none);
     white-space: nowrap;
 
     &:hover,
     &:focus {
       color: var(--#{$prefix}navbar-brand-hover-color);
+      text-decoration: if($link-hover-decoration == underline, none, null);
     }
   }
 
@@ -151,7 +152,7 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
 
     display: flex;
     flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
-    padding-inline-start: 0;
+    padding-left: 0;
     margin-bottom: 0;
     list-style: none;
 
@@ -264,7 +265,8 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
             }
 
             .nav-link {
-              padding-inline: var(--#{$prefix}navbar-nav-link-padding-x);
+              padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
+              padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
             }
           }
 

scss/_offcanvas.scss

@@ -57,7 +57,7 @@
           top: 0;
           left: 0;
           width: var(--#{$prefix}offcanvas-width);
-          border-inline-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
           transform: translateX(-100%);
         }
 
@@ -65,7 +65,7 @@
           top: 0;
           right: 0;
           width: var(--#{$prefix}offcanvas-width);
-          border-inline-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
           transform: translateX(100%);
         }
 
@@ -75,7 +75,7 @@
           left: 0;
           height: var(--#{$prefix}offcanvas-height);
           max-height: 100%;
-          border-block-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
           transform: translateY(-100%);
         }
 
@@ -84,7 +84,7 @@
           left: 0;
           height: var(--#{$prefix}offcanvas-height);
           max-height: 100%;
-          border-block-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
           transform: translateY(100%);
         }
 
@@ -135,10 +135,10 @@
     .btn-close {
       padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
       // Split properties to avoid invalid calc() function if value is 0
-      margin-inline-start: auto;
-      margin-inline-end: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
       margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
+      margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
       margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
+      margin-left: auto;
     }
   }
 

scss/_pagination.scss

@@ -17,7 +17,7 @@ $pagination-padding-x-lg:           1.5rem !default;
 $pagination-font-size:              $font-size-base !default;
 
 $pagination-color:                  var(--#{$prefix}link-color) !default;
-$pagination-bg:                     var(--#{$prefix}bg-body) !default;
+$pagination-bg:                     var(--#{$prefix}body-bg) !default;
 $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
 $pagination-border-width:           var(--#{$prefix}border-width) !default;
 $pagination-margin-start:           calc(-1 * #{$pagination-border-width}) !default;
@@ -91,7 +91,7 @@ $pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
     padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
     @include font-size(var(--#{$prefix}pagination-font-size));
     color: var(--#{$prefix}pagination-color);
-    text-decoration: none;
+    text-decoration: if($link-decoration == none, null, none);
     background-color: var(--#{$prefix}pagination-bg);
     border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
     @include transition($pagination-transition);
@@ -99,6 +99,7 @@ $pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
     &:hover {
       z-index: 2;
       color: var(--#{$prefix}pagination-hover-color);
+      text-decoration: if($link-hover-decoration == underline, none, null);
       background-color: var(--#{$prefix}pagination-hover-bg);
       border-color: var(--#{$prefix}pagination-hover-border-color);
     }
@@ -130,7 +131,7 @@ $pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
 
   .page-item {
     &:not(:first-child) .page-link {
-      margin-inline-start: $pagination-margin-start;
+      margin-left: $pagination-margin-start;
     }
 
     @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {

scss/_popover.scss

@@ -7,7 +7,7 @@
 
 // scss-docs-start popover-variables
 $popover-font-size:                 $font-size-sm !default;
-$popover-bg:                        var(--#{$prefix}bg-body) !default;
+$popover-bg:                        var(--#{$prefix}body-bg) !default;
 $popover-max-width:                 276px !default;
 $popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
@@ -21,7 +21,7 @@ $popover-header-color:              $headings-color !default;
 $popover-header-padding-y:          .5rem !default;
 $popover-header-padding-x:          $spacer !default;
 
-$popover-body-color:                var(--#{$prefix}color-body) !default;
+$popover-body-color:                var(--#{$prefix}body-color) !default;
 $popover-body-padding-y:            $spacer !default;
 $popover-body-padding-x:            $spacer !default;
 
@@ -97,16 +97,17 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         bottom: 0;
-        border-block-start-color: var(--#{$prefix}popover-arrow-border);
+        border-top-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         bottom: var(--#{$prefix}popover-border-width);
-        border-block-start-color: var(--#{$prefix}popover-bg);
+        border-top-color: var(--#{$prefix}popover-bg);
       }
     }
   }
 
+  /* rtl:begin:ignore */
   .bs-popover-end {
     > .popover-arrow {
       left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
@@ -120,16 +121,18 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         left: 0;
-        border-inline-end-color: var(--#{$prefix}popover-arrow-border);
+        border-right-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         left: var(--#{$prefix}popover-border-width);
-        border-inline-end-color: var(--#{$prefix}popover-bg);
+        border-right-color: var(--#{$prefix}popover-bg);
       }
     }
   }
 
+  /* rtl:end:ignore */
+
   .bs-popover-bottom {
     > .popover-arrow {
       top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
@@ -141,12 +144,12 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         top: 0;
-        border-block-end-color: var(--#{$prefix}popover-arrow-border);
+        border-bottom-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         top: var(--#{$prefix}popover-border-width);
-        border-block-end-color: var(--#{$prefix}popover-bg);
+        border-bottom-color: var(--#{$prefix}popover-bg);
       }
     }
 
@@ -157,12 +160,13 @@ $popover-arrow-height:              .5rem !default;
       left: 50%;
       display: block;
       width: var(--#{$prefix}popover-arrow-width);
-      margin-inline-start: calc(-.5 * var(--#{$prefix}popover-arrow-width));
+      margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width));
       content: "";
-      border-block-end: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
+      border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
     }
   }
 
+  /* rtl:begin:ignore */
   .bs-popover-start {
     > .popover-arrow {
       right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
@@ -176,16 +180,18 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         right: 0;
-        border-inline-start-color: var(--#{$prefix}popover-arrow-border);
+        border-left-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         right: var(--#{$prefix}popover-border-width);
-        border-inline-start-color: var(--#{$prefix}popover-bg);
+        border-left-color: var(--#{$prefix}popover-bg);
       }
     }
   }
 
+  /* rtl:end:ignore */
+
   .bs-popover-auto {
     &[data-popper-placement^="top"] {
       @extend .bs-popover-top;
@@ -208,7 +214,7 @@ $popover-arrow-height:              .5rem !default;
     @include font-size(var(--#{$prefix}popover-header-font-size));
     color: var(--#{$prefix}popover-header-color);
     background-color: var(--#{$prefix}popover-header-bg);
-    border-block-end: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+    border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
     @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
 
     &:empty {

scss/_root.scss

@@ -23,15 +23,15 @@
   }
 
   @each $color, $value in $theme-bgs {
-    --#{$prefix}bg-#{$color}: #{$value};
+    --#{$prefix}#{$color}: #{$value};
   }
 
   @each $color, $value in $theme-fgs {
-    --#{$prefix}color-#{$color}: #{$value};
+    --#{$prefix}#{$color}: #{$value};
   }
 
   @each $color, $value in $theme-borders {
-    --#{$prefix}border-#{$color}: #{$value};
+    --#{$prefix}#{$color}: #{$value};
   }
 
   --#{$prefix}black: #{$black};
@@ -41,8 +41,6 @@
 
 :root,
 [data-bs-theme="light"] {
-  color-scheme: light;
-
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   --#{$prefix}white-rgb: #{to-rgb($white)};
@@ -63,33 +61,9 @@
   }
   --#{$prefix}body-font-family: #{meta.inspect($font-family-base)};
 
-  // scss-docs-start root-font-size-variables
   --#{$prefix}font-size-base: #{$font-size-base}; // 14px
-  // --#{$prefix}font-size-sm: calc(#{$font-size-base} * .9285);
-  // --#{$prefix}font-size-lg: calc(#{$font-size-base} * 1.285);
-
-  --#{$prefix}font-size-xs: clamp(.75rem, .7rem + .25vw, .875rem);
-  --#{$prefix}font-size-sm: clamp(.875rem, .8rem + .375vw, 1rem);
-  --#{$prefix}font-size-md: clamp(1rem, .9rem + .5vw, 1.125rem);
-  --#{$prefix}font-size-lg: clamp(1.25rem, 1rem + .625vw, 1.5rem);
-  --#{$prefix}font-size-xl: clamp(1.5rem, 1.1rem + .75vw, 1.75rem);
-  --#{$prefix}font-size-2xl: clamp(1.75rem, 1.3rem + 1vw, 2.25rem);
-  --#{$prefix}font-size-3xl: clamp(2rem, 1.5rem + 1.875vw, 2.5rem);
-  --#{$prefix}font-size-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
-  --#{$prefix}font-size-5xl: clamp(3rem, 2rem + 5vw, 4rem);
-  --#{$prefix}font-size-6xl: clamp(3.75rem, 2.5rem + 6.25vw, 5rem);
-
-  --#{$prefix}line-height-xs: 1.5;
-  --#{$prefix}line-height-sm: 1.5;
-  --#{$prefix}line-height-md: 1.5;
-  --#{$prefix}line-height-lg: 1.5;
-  --#{$prefix}line-height-xl: calc(2.5 / 1.75);
-  --#{$prefix}line-height-2xl: calc(3 / 2.25);
-  --#{$prefix}line-height-3xl: 1.2;
-  --#{$prefix}line-height-4xl: 1.1;
-  --#{$prefix}line-height-5xl: 1.1;
-  --#{$prefix}line-height-6xl: 1;
-  // scss-docs-end root-font-size-variables
+  --#{$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};
@@ -113,9 +87,9 @@
     --#{$prefix}border#{$key}: #{$value};
   }
 
-  // --#{$prefix}body-color: #{$body-color};
+  --#{$prefix}body-color: #{$body-color};
   --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
-  // --#{$prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg: #{$body-bg};
   --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
 
   // --#{$prefix}emphasis-color: #{$body-emphasis-color};
@@ -145,6 +119,10 @@
   --#{$prefix}link-decoration: #{$link-decoration};
   --#{$prefix}link-hover-color: color-mix(in oklch, var(--#{$prefix}link-color) 90%, #000);
 
+  @if $link-hover-decoration != null {
+    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
+  }
+
   --#{$prefix}code-color: #{$code-color};
   --#{$prefix}highlight-color: #{$mark-color};
   --#{$prefix}highlight-bg: #{$mark-bg};
@@ -196,23 +174,23 @@
     color-scheme: dark;
 
     // scss-docs-start root-dark-mode-vars
-    // --#{$prefix}body-color: #{$body-color-dark};
-    // --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
-    // --#{$prefix}body-bg: #{$body-bg-dark};
-    // --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+    --#{$prefix}body-color: #{$body-color-dark};
+    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+    --#{$prefix}body-bg: #{$body-bg-dark};
+    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
 
     --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
     --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
 
-    // --#{$prefix}secondary-color: #{$body-secondary-color-dark};
-    // --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
-    // --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
-    // --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+    --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
 
-    // --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
-    // --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
-    // --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
-    // --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
 
     --#{$prefix}heading-color: #{$headings-color-dark};
 
@@ -222,8 +200,8 @@
     // --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
 
     // --#{$prefix}code-color: #{$code-color-dark}; // removed in v6
-    // --#{$prefix}highlight-color: #{$mark-color-dark};
-    // --#{$prefix}highlight-bg: #{$mark-bg-dark};
+    --#{$prefix}highlight-color: #{$mark-color-dark};
+    --#{$prefix}highlight-bg: #{$mark-bg-dark};
 
     --#{$prefix}border-color: #{$border-color-dark};
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};

scss/_spinners.scss

@@ -32,7 +32,7 @@ $spinner-border-width-sm: .2em !default;
 
   // scss-docs-start spinner-border-keyframes
   @keyframes spinner-border {
-    to { transform: rotate(360deg); }
+    to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
   }
   // scss-docs-end spinner-border-keyframes
 
@@ -47,7 +47,7 @@ $spinner-border-width-sm: .2em !default;
     // scss-docs-end spinner-border-css-vars
 
     border: var(--#{$prefix}spinner-border-width) solid currentcolor;
-    border-inline-end-color: transparent;
+    border-right-color: transparent;
   }
 
   .spinner-border-sm {

scss/_theme.scss

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

scss/_toasts.scss

@@ -82,12 +82,12 @@ $toast-header-border-color:         $toast-border-color !default;
     color: var(--#{$prefix}toast-header-color);
     background-color: var(--#{$prefix}toast-header-bg);
     background-clip: padding-box;
-    border-block-end: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
+    border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
     @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
 
     .btn-close {
-      margin-inline-start: var(--#{$prefix}toast-padding-x);
-      margin-inline-end: calc(-.5 * var(--#{$prefix}toast-padding-x));
+      margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x));
+      margin-left: var(--#{$prefix}toast-padding-x);
     }
   }
 

scss/_tooltip.scss

@@ -8,8 +8,8 @@
 // scss-docs-start tooltip-variables
 $tooltip-font-size:                 $font-size-sm !default;
 $tooltip-max-width:                 200px !default;
-$tooltip-color:                     var(--#{$prefix}bg-body) !default;
-$tooltip-bg:                        var(--#{$prefix}color-body) !default;
+$tooltip-color:                     var(--#{$prefix}body-bg) !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;
@@ -82,10 +82,11 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
     &::before {
       top: -1px;
       border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
-      border-block-start-color: var(--#{$prefix}tooltip-bg);
+      border-top-color: var(--#{$prefix}tooltip-bg);
     }
   }
 
+  /* rtl:begin:ignore */
   .bs-tooltip-end .tooltip-arrow {
     left: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
     width: var(--#{$prefix}tooltip-arrow-height);
@@ -94,20 +95,23 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
     &::before {
       right: -1px;
       border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
-      border-inline-end-color: var(--#{$prefix}tooltip-bg);
+      border-right-color: var(--#{$prefix}tooltip-bg);
     }
   }
 
+  /* rtl:end:ignore */
+
   .bs-tooltip-bottom .tooltip-arrow {
     top: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
 
     &::before {
       bottom: -1px;
       border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
-      border-block-end-color: var(--#{$prefix}tooltip-bg);
+      border-bottom-color: var(--#{$prefix}tooltip-bg);
     }
   }
 
+  /* rtl:begin:ignore */
   .bs-tooltip-start .tooltip-arrow {
     right: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
     width: var(--#{$prefix}tooltip-arrow-height);
@@ -116,10 +120,12 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
     &::before {
       left: -1px;
       border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
-      border-inline-start-color: var(--#{$prefix}tooltip-bg);
+      border-left-color: var(--#{$prefix}tooltip-bg);
     }
   }
 
+  /* rtl:end:ignore */
+
   .bs-tooltip-auto {
     &[data-popper-placement^="top"] {
       @extend .bs-tooltip-top;

scss/_utilities.scss

@@ -6,6 +6,7 @@
 @use "theme" as *;
 
 // add:
+// - placeItems
 // - double check css grid helpers
 //
 // update:
@@ -91,8 +92,10 @@ $utilities: map.merge(
     // scss-docs-start utils-display
     "display": (
       responsive: true,
+      print: true,
       property: display,
       class: d,
+      important: true,
       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
@@ -119,6 +122,7 @@ $utilities: map.merge(
     // scss-docs-start utils-position
     "position": (
       property: position,
+      important: true,
       values: static relative absolute fixed sticky
     ),
     "top": (
@@ -203,52 +207,42 @@ $utilities: map.merge(
         0: 0,
       )
     ),
-    // scss-docs-end utils-borders
-    // scss-docs-start utils-border-color
     "border-color": (
-      property: (
-        "--#{$prefix}border-color": null,
-        "border-color": var(--#{$prefix}border-color)
-      ),
+      property: border-color,
       class: border,
-      values: map.merge(theme-color-values("bg"), $theme-borders),
-    ),
-    "border-color-subtle": (
-      property: (
-        "--#{$prefix}border-color": null,
-        "border-color": var(--#{$prefix}border-color)
-      ),
-      class: border-subtle,
-      values: theme-color-values("border"),
+      values: theme-color-values("border")
     ),
     "border-width": (
       property: border-width,
       class: border,
       values: $border-widths
     ),
-    "border-opacity": (
-      class: border,
-      property: border-color,
-      values: theme-opacity-values(--#{$prefix}border-color)
-    ),
-    // scss-docs-end utils-border-color
+    // "border-opacity": (
+    //   css-var: true,
+    //   class: border-opacity,
+    //   values: (
+    //     10: .1,
+    //     25: .25,
+    //     50: .5,
+    //     75: .75,
+    //     100: 1
+    //   )
+    // ),
+    // scss-docs-end utils-borders
     // Sizing utilities
-    // scss-docs-start utils-width
+    // scss-docs-start utils-sizing
     "width": (
       property: width,
       class: w,
-      values: map.merge(
-        $sizes,
-        (
-          25: 25%,
-          50: 50%,
-          75: 75%,
-          100: 100%,
-          auto: auto,
-          min: min-content,
-          max: max-content,
-          fit: fit-content,
-        )
+      values: (
+        25: 25%,
+        50: 50%,
+        75: 75%,
+        100: 100%,
+        auto: auto,
+        min: min-content,
+        max: max-content,
+        fit: fit-content,
       )
     ),
     "max-width": (
@@ -274,8 +268,6 @@ $utilities: map.merge(
       class: min-vw,
       values: (100: 100vw)
     ),
-    // scss-docs-end utils-width
-    // scss-docs-start utils-height
     "height": (
       property: height,
       class: h,
@@ -313,7 +305,7 @@ $utilities: map.merge(
       class: min-vh,
       values: (100: 100vh)
     ),
-    // scss-docs-end utils-height
+    // scss-docs-end utils-sizing
     // Flex utilities
     // scss-docs-start utils-flex
     "flex": (
@@ -427,30 +419,6 @@ $utilities: map.merge(
         stretch: stretch,
       )
     ),
-    "grid-column-counts": (
-      responsive: true,
-      property: --#{$prefix}columns,
-      class: grid-cols,
-      values: (
-        3,
-        4,
-        6
-      )
-    ),
-    "grid-columns": (
-      responsive: true,
-      property: grid-column,
-      class: grid-cols,
-      values: (
-        fill: #{"1 / -1"},
-      )
-    ),
-    "grid-auto-flow": (
-      responsive: true,
-      property: grid-auto-flow,
-      class: grid-auto-flow,
-      values: row column dense
-    ),
     "order": (
       responsive: true,
       property: order,
@@ -476,37 +444,37 @@ $utilities: map.merge(
     ),
     "margin-x": (
       responsive: true,
-      property: margin-inline,
+      property: margin-right margin-left,
       class: mx,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-y": (
       responsive: true,
-      property: margin-block,
+      property: margin-top margin-bottom,
       class: my,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-top": (
       responsive: true,
-      property: margin-block-start,
+      property: margin-top,
       class: mt,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-end": (
       responsive: true,
-      property: margin-inline-end,
+      property: margin-right,
       class: me,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-bottom": (
       responsive: true,
-      property: margin-block-end,
+      property: margin-bottom,
       class: mb,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-start": (
       responsive: true,
-      property: margin-inline-start,
+      property: margin-left,
       class: ms,
       values: map.merge($spacers, (auto: auto))
     ),
@@ -519,37 +487,37 @@ $utilities: map.merge(
     // ),
     // "negative-margin-x": (
     //   responsive: true,
-    //   property: margin-inline,
+    //   property: margin-right margin-left,
     //   class: mx,
     //   values: $negative-spacers
     // ),
     // "negative-margin-y": (
     //   responsive: true,
-    //   property: margin-block,
+    //   property: margin-top margin-bottom,
     //   class: my,
     //   values: $negative-spacers
     // ),
     // "negative-margin-top": (
     //   responsive: true,
-    //   property: margin-block-start,
+    //   property: margin-top,
     //   class: mt,
     //   values: $negative-spacers
     // ),
     // "negative-margin-end": (
     //   responsive: true,
-    //   property: margin-inline-end,
+    //   property: margin-right,
     //   class: me,
     //   values: $negative-spacers
     // ),
     // "negative-margin-bottom": (
     //   responsive: true,
-    //   property: margin-block-end,
+    //   property: margin-bottom,
     //   class: mb,
     //   values: $negative-spacers
     // ),
     // "negative-margin-start": (
     //   responsive: true,
-    //   property: margin-inline-start,
+    //   property: margin-left,
     //   class: ms,
     //   values: $negative-spacers
     // ),
@@ -562,37 +530,37 @@ $utilities: map.merge(
     ),
     "padding-x": (
       responsive: true,
-      property: padding-inline,
+      property: padding-right padding-left,
       class: px,
       values: $spacers
     ),
     "padding-y": (
       responsive: true,
-      property: padding-block,
+      property: padding-top padding-bottom,
       class: py,
       values: $spacers
     ),
     "padding-top": (
       responsive: true,
-      property: padding-block-start,
+      property: padding-top,
       class: pt,
       values: $spacers
     ),
     "padding-end": (
       responsive: true,
-      property: padding-inline-end,
+      property: padding-right,
       class: pe,
       values: $spacers
     ),
     "padding-bottom": (
       responsive: true,
-      property: padding-block-end,
+      property: padding-bottom,
       class: pb,
       values: $spacers
     ),
     "padding-start": (
       responsive: true,
-      property: padding-inline-start,
+      property: padding-left,
       class: ps,
       values: $spacers
     ),
@@ -617,31 +585,18 @@ $utilities: map.merge(
     ),
     // scss-docs-end utils-spacing
     // Text
-    // scss-docs-start utils-font-family
+    // scss-docs-start utils-text
     "font-family": (
       property: font-family,
       class: font,
-      values: (
-        "monospace": var(--#{$prefix}font-monospace),
-        "body": var(--#{$prefix}font-sans-serif),
-      )
+      values: (monospace: var(--#{$prefix}font-monospace))
     ),
-    // scss-docs-end utils-font-family
-    // scss-docs-start utils-font-size
     "font-size": (
+      rfs: true,
       property: font-size,
       class: fs,
-      values: map-get-nested($font-sizes, "font-size")
-    ),
-    "text-size": (
-      property: (
-        "font-size": 1rem,
-        "line-height": 1.5
-      ),
-      class: text,
       values: $font-sizes
     ),
-    // scss-docs-end utils-font-size
     "font-style": (
       property: font-style,
       class: fst,
@@ -684,85 +639,77 @@ $utilities: map.merge(
       property: text-decoration,
       values: none underline line-through
     ),
-    // scss-docs-start utils-text-transform
     "text-transform": (
       property: text-transform,
       class: text,
       values: lowercase uppercase capitalize
     ),
-    // scss-docs-end utils-text-transform
-    // "white-space": (
-    //   property: white-space,
-    //   class: text,
-    //   values: (
-    //     wrap: normal,
-    //     nowrap: nowrap,
-    //   )
-    // ),
-    "text-wrap": (
+    "white-space": (
       property: white-space,
       class: text,
-      values: wrap nowrap balance pretty,
+      values: (
+        wrap: normal,
+        nowrap: nowrap,
+      )
     ),
-    // scss-docs-start utils-text-break
     "word-wrap": (
       property: word-wrap word-break,
       class: text,
       values: (break: break-word),
       rtl: false
     ),
-    // scss-docs-end utils-text-break
     // scss-docs-end utils-text
     // scss-docs-start utils-color
-    // "color-attr": (
-    //   selector: "attr-includes",
-    //   class: "fg-",
-    //   property: color,
-    //   values: var(--#{$prefix}fg),
-    // ),
-    "fg": (
-      property: (
-        "--#{$prefix}fg": null,
-        "color": var(--#{$prefix}fg)
-      ),
-      class: fg,
+    "color-attr": (
+      selector: "attr-includes",
+      class: "color-",
+      property: color,
+      values: var(--#{$prefix}color),
+    ),
+    "color": (
+      property: --#{$prefix}color,
+      class: color,
       values: map.merge(theme-color-values("text"), $theme-fgs),
     ),
-    "fg-emphasis": (
-      property: (
-        "--#{$prefix}fg": null,
-        "color": var(--#{$prefix}fg)
-      ),
-      class: fg-emphasis,
-      values: theme-color-values("text-emphasis"),
-    ),
-    "fg-opacity": (
-      class: fg,
+    "color-opacity": (
+      class: color,
       property: color,
-      values: theme-opacity-values(--#{$prefix}fg)
+      values: (
+        10: color-mix(in oklch, var(--#{$prefix}color) 10%, transparent),
+        20: color-mix(in oklch, var(--#{$prefix}color) 20%, transparent),
+        30: color-mix(in oklch, var(--#{$prefix}color) 30%, transparent),
+        40: color-mix(in oklch, var(--#{$prefix}color) 40%, transparent),
+        50: color-mix(in oklch, var(--#{$prefix}color) 50%, transparent),
+        60: color-mix(in oklch, var(--#{$prefix}color) 60%, transparent),
+        70: color-mix(in oklch, var(--#{$prefix}color) 70%, transparent),
+        80: color-mix(in oklch, var(--#{$prefix}color) 80%, transparent),
+        90: color-mix(in oklch, var(--#{$prefix}color) 90%, transparent),
+        100: var(--#{$prefix}color),
+      )
     ),
-    "fg-contrast": (
-      property: (
-        "--#{$prefix}fg": null,
-        "color": var(--#{$prefix}fg)
-      ),
-      class: fg-contrast,
+    "contrast-color": (
+      property: --#{$prefix}color,
+      class: color-on,
       values: theme-color-values("contrast"),
     ),
     // scss-docs-end utils-color
     // scss-docs-start utils-links
     "link-opacity": (
-      property: color,
+      property: --#{$prefix}link-opacity,
       // css-var: true,
-      class: link,
+      class: link-opacity,
       state: hover,
-      values: theme-opacity-values(--#{$prefix}link-color)
+      values: (
+        10: .1,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1
+      )
     ),
-    // scss-docs-end utils-links
-    // scss-docs-start utils-underline
-    "underline-offset": (
+    "link-offset": (
       property: text-underline-offset,
-      class: underline-offset,
+      class: link-offset,
       state: hover,
       values: (
         1: .125em,
@@ -770,59 +717,71 @@ $utilities: map.merge(
         3: .375em,
       )
     ),
-    "underline-color": (
+    "link-underline": (
       property: text-decoration-color,
-      class: underline,
-      values: theme-color-values("text"),
+      class: link-underline,
+      local-vars: (
+        "link-underline-opacity": 1
+      ),
+      // values: map.merge(
+      //   $utilities-links-underline,
+      //   (
+      //     // null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
+      //   )
+      // )
     ),
-    "underline-opacity": (
-      property: text-decoration-color,
-      class: underline,
-      state: hover,
-      values: theme-opacity-values(--#{$prefix}link-color)
-    ),
-    "underline-thickness": (
-      property: text-decoration-thickness,
-      class: underline-thickness,
+    "link-underline-opacity": (
+      // css-var: true,
+      property: --#{$prefix}link-underline-opacity,
+      class: link-underline-opacity,
       state: hover,
       values: (
-        1: 1px,
-        2: 2px,
-        3: 3px,
-        4: 4px,
-        5: 5px,
-      )
-    ),
-    // scss-docs-end utils-underline
-    // scss-docs-start utils-bg-color
-    "bg-color": (
-      property: (
-        "--#{$prefix}bg": null,
-        "background-color": var(--#{$prefix}bg)
+        0: 0,
+        10: .1,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1
       ),
+    ),
+    // scss-docs-end utils-links
+    // scss-docs-start utils-bg-color
+    "bg-attr": (
+      selector: "attr-includes",
+      class: "bg-",
+      property: background-color,
+      values: var(--#{$prefix}bg),
+    ),
+    "bg-color": (
+      property: --#{$prefix}bg,
       class: bg,
       values: map.merge(theme-color-values("bg"), $theme-bgs),
     ),
     "bg-color-subtle": (
-      property: (
-        "--#{$prefix}bg": null,
-        "background-color": var(--#{$prefix}bg)
-      ),
+      property: --#{$prefix}bg,
       class: bg-subtle,
       values: theme-color-values("bg-subtle"),
     ),
     "bg-color-muted": (
-      property: (
-        "--#{$prefix}bg": null,
-        "background-color": var(--#{$prefix}bg)
-      ),
+      property: --#{$prefix}bg,
       class: bg-muted,
       values: theme-color-values("bg-muted"),
     ),
     "bg-opacity": (
       class: bg,
       property: background-color,
-      values: theme-opacity-values(--#{$prefix}bg)
+      values: (
+        10: color-mix(in oklch, var(--#{$prefix}bg) 10%, transparent),
+        20: color-mix(in oklch, var(--#{$prefix}bg) 20%, transparent),
+        30: color-mix(in oklch, var(--#{$prefix}bg) 30%, transparent),
+        40: color-mix(in oklch, var(--#{$prefix}bg) 40%, transparent),
+        50: color-mix(in oklch, var(--#{$prefix}bg) 50%, transparent),
+        60: color-mix(in oklch, var(--#{$prefix}bg) 60%, transparent),
+        70: color-mix(in oklch, var(--#{$prefix}bg) 70%, transparent),
+        80: color-mix(in oklch, var(--#{$prefix}bg) 80%, transparent),
+        90: color-mix(in oklch, var(--#{$prefix}bg) 90%, transparent),
+        100: var(--#{$prefix}bg),
+      )
     ),
     // scss-docs-end utils-bg-color
     "gradient": (
@@ -858,7 +817,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-top": (
-      property: border-start-start-radius border-start-end-radius,
+      property: border-top-left-radius border-top-right-radius,
       class: rounded-top,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -873,7 +832,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-end": (
-      property: border-end-end-radius border-end-start-radius,
+      property: border-top-right-radius border-bottom-right-radius,
       class: rounded-end,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -888,7 +847,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-bottom": (
-      property: border-end-end-radius border-end-start-radius,
+      property: border-bottom-right-radius border-bottom-left-radius,
       class: rounded-bottom,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -903,7 +862,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-start": (
-      property: border-start-start-radius border-start-end-radius,
+      property: border-bottom-left-radius border-top-left-radius,
       class: rounded-start,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -922,6 +881,7 @@ $utilities: map.merge(
     "visibility": (
       property: visibility,
       class: null,
+      important: true,
       values: (
         visible: visible,
         invisible: hidden,
@@ -935,6 +895,13 @@ $utilities: map.merge(
       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

@@ -117,14 +117,14 @@ $position-values: (
 // Settings for the `<body>` element.
 
 $body-text-align:           null !default;
-$body-color:                var(--#{$prefix}color-body) !default;
-$body-bg:                   var(--#{$prefix}bg-body) !default;
+$body-color:                var(--#{$prefix}gray-900) !default;
+$body-bg:                   $white !default;
 
-$body-secondary-color:      var(--#{$prefix}color-secondary) !default;
-$body-secondary-bg:         var(--#{$prefix}bg-secondary) !default;
+$body-secondary-color:      rgba($body-color, .75) !default;
+$body-secondary-bg:         var(--#{$prefix}gray-200) !default;
 
-$body-tertiary-color:       var(--#{$prefix}color-muted) !default;
-$body-tertiary-bg:          var(--#{$prefix}bg-muted) !default;
+$body-tertiary-color:       rgba($body-color, .5) !default;
+$body-tertiary-bg:          var(--#{$prefix}gray-100) !default;
 
 $body-emphasis-color:       $black !default;
 
@@ -137,7 +137,7 @@ $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-decoration:                   $link-decoration !default;
+$link-hover-decoration:                   null !default;
 
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
@@ -172,7 +172,7 @@ $border-widths: (
   5: 5px
 ) !default;
 $border-style:                solid !default;
-$border-color:                color-mix(in oklch, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)) !default;
+$border-color:                var(--#{$prefix}gray-200) !default;
 $border-color-translucent:    rgba($black, .175) !default;
 // scss-docs-end border-variables
 
@@ -253,57 +253,24 @@ $line-height-base:            1.5 !default;
 $line-height-sm:              1.25 !default;
 $line-height-lg:              2 !default;
 
-$h1-font-size: var(--#{$prefix}font-size-3xl) !default;
-$h2-font-size: var(--#{$prefix}font-size-2xl) !default;
-$h3-font-size: var(--#{$prefix}font-size-xl) !default;
-$h4-font-size: var(--#{$prefix}font-size-lg) !default;
-$h5-font-size: var(--#{$prefix}font-size-md) !default;
-$h6-font-size: var(--#{$prefix}font-size-sm) !default;
+$h1-font-size:                $font-size-base * 2.5 !default;
+$h2-font-size:                $font-size-base * 2 !default;
+$h3-font-size:                $font-size-base * 1.75 !default;
+$h4-font-size:                $font-size-base * 1.5 !default;
+$h5-font-size:                $font-size-base * 1.25 !default;
+$h6-font-size:                $font-size-base !default;
 // scss-docs-end font-variables
 
-// Font sizes with line-height for utilities
+// scss-docs-start font-sizes
 $font-sizes: (
-  "xs": (
-    "font-size": var(--#{$prefix}font-size-xs),
-    "line-height": var(--#{$prefix}line-height-xs)
-  ),
-  "sm": (
-    "font-size": var(--#{$prefix}font-size-sm),
-    "line-height": var(--#{$prefix}line-height-sm)
-  ),
-  "md": (
-    "font-size": var(--#{$prefix}font-size-md),
-    "line-height": var(--#{$prefix}line-height-md)
-  ),
-  "lg": (
-    "font-size": var(--#{$prefix}font-size-lg),
-    "line-height": var(--#{$prefix}line-height-lg)
-  ),
-  "xl": (
-    "font-size": var(--#{$prefix}font-size-xl),
-    "line-height": var(--#{$prefix}line-height-xl)
-  ),
-  "2xl": (
-    "font-size": var(--#{$prefix}font-size-2xl),
-    "line-height": var(--#{$prefix}line-height-2xl)
-  ),
-  "3xl": (
-    "font-size": var(--#{$prefix}font-size-3xl),
-    "line-height": var(--#{$prefix}line-height-3xl)
-  ),
-  "4xl": (
-    "font-size": var(--#{$prefix}font-size-4xl),
-    "line-height": var(--#{$prefix}line-height-4xl)
-  ),
-  "5xl": (
-    "font-size": var(--#{$prefix}font-size-5xl),
-    "line-height": var(--#{$prefix}line-height-5xl)
-  ),
-  "6xl": (
-    "font-size": var(--#{$prefix}font-size-6xl),
-    "line-height": var(--#{$prefix}line-height-6xl)
-  ),
+  1: $h1-font-size,
+  2: $h2-font-size,
+  3: $h3-font-size,
+  4: $h4-font-size,
+  5: $h5-font-size,
+  6: $h6-font-size
 ) !default;
+// scss-docs-end font-sizes
 
 // scss-docs-start headings-variables
 $headings-margin-bottom:      $spacer * .5 !default;
@@ -314,7 +281,26 @@ $headings-line-height:        1.2 !default;
 $headings-color:              inherit !default;
 // scss-docs-end headings-variables
 
+// scss-docs-start display-headings
+$display-font-sizes: (
+  1: 5rem,
+  2: 4.5rem,
+  3: 4rem,
+  4: 3.5rem,
+  5: 3rem,
+  6: 2.5rem
+) !default;
+
+$display-font-family: null !default;
+$display-font-style:  null !default;
+$display-font-weight: 300 !default;
+$display-line-height: $headings-line-height !default;
+// scss-docs-end display-headings
+
 // scss-docs-start type-variables
+$lead-font-size:              $font-size-base * 1.25 !default;
+$lead-font-weight:            300 !default;
+
 $small-font-size:             .875em !default;
 
 $sub-sup-font-size:           .75em !default;
@@ -385,7 +371,7 @@ $input-btn-border-width:      var(--#{$prefix}border-width) !default;
 // For each of Bootstrap's buttons, define text, background, and border color.
 
 // scss-docs-start btn-variables
-$btn-color:                   var(--#{$prefix}color-body) !default;
+$btn-color:                   var(--#{$prefix}body-color) !default;
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;
@@ -475,8 +461,8 @@ $modal-dialog-margin-y-sm-up:       1.75rem !default;
 
 $modal-title-line-height:           $line-height-base !default;
 
-$modal-content-color:               var(--#{$prefix}color-body) !default;
-$modal-content-bg:                  var(--#{$prefix}bg-body) !default;
+$modal-content-color:               var(--#{$prefix}body-color) !default;
+$modal-content-bg:                  var(--#{$prefix}body-bg) !default;
 $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
 $modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
@@ -519,8 +505,8 @@ $offcanvas-transition-duration:     .3s !default;
 $offcanvas-border-color:            $modal-content-border-color !default;
 $offcanvas-border-width:            $modal-content-border-width !default;
 $offcanvas-title-line-height:       $modal-title-line-height !default;
-$offcanvas-bg-color:                var(--#{$prefix}bg-body) !default;
-$offcanvas-color:                   var(--#{$prefix}color-body) !default;
+$offcanvas-bg-color:                var(--#{$prefix}body-bg) !default;
+$offcanvas-color:                   var(--#{$prefix}body-color) !default;
 $offcanvas-box-shadow:              $modal-content-box-shadow-xs !default;
 $offcanvas-backdrop-bg:             $modal-backdrop-bg !default;
 $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
@@ -534,8 +520,8 @@ $code-color:                        var(--#{$prefix}secondary-text) !default;
 $kbd-padding-y:                     .1875rem !default;
 $kbd-padding-x:                     .375rem !default;
 $kbd-font-size:                     $code-font-size !default;
-$kbd-color:                         var(--#{$prefix}bg-body) !default;
-$kbd-bg:                            var(--#{$prefix}color-body) !default;
+$kbd-color:                         var(--#{$prefix}body-bg) !default;
+$kbd-bg:                            var(--#{$prefix}body-color) !default;
 
 $pre-color:                         null !default;
 
@@ -548,17 +534,17 @@ $pre-color:                         null !default;
 //
 
 // scss-docs-start sass-dark-mode-vars
-// $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:            var(--#{$prefix}gray-800) !default;
-// $body-tertiary-color-dark:          rgba($body-color-dark, .5) !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:            var(--#{$prefix}gray-800) !default;
+$body-tertiary-color-dark:          rgba($body-color-dark, .5) !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:                 var(--#{$prefix}gray-700) !default;
 $border-color-translucent-dark:     rgba($white, .15) !default;
 $headings-color-dark:               inherit !default;
-// $mark-color-dark:                   $body-color-dark !default;
+$mark-color-dark:                   $body-color-dark !default;
 $mark-bg-dark:                      var(--#{$prefix}yellow-800) !default;
 
 

scss/buttons/_button-group.scss

@@ -46,7 +46,7 @@
     // Prevent double borders when buttons are next to each other
     > :not(.btn-check:first-child) + .btn,
     > .btn-group:not(:first-child) {
-      margin-inline-start: calc(-1 * #{$btn-border-width});
+      margin-left: calc(-1 * #{$btn-border-width});
     }
 
     // Reset rounded corners
@@ -80,25 +80,28 @@
   //
 
   .dropdown-toggle-split {
-    padding-inline: $btn-padding-x * .75;
+    padding-right: $btn-padding-x * .75;
+    padding-left: $btn-padding-x * .75;
 
     &::after,
     .dropup &::after,
     .dropend &::after {
-      margin-inline-start: 0;
+      margin-left: 0;
     }
 
     .dropstart &::before {
-      margin-inline-end: 0;
+      margin-right: 0;
     }
   }
 
   .btn-sm + .dropdown-toggle-split {
-    padding-inline: $btn-padding-x-sm * .75;
+    padding-right: $btn-padding-x-sm * .75;
+    padding-left: $btn-padding-x-sm * .75;
   }
 
   .btn-lg + .dropdown-toggle-split {
-    padding-inline: $btn-padding-x-lg * .75;
+    padding-right: $btn-padding-x-lg * .75;
+    padding-left: $btn-padding-x-lg * .75;
   }
 
 

scss/buttons/_button-variables.scss

@@ -6,7 +6,7 @@
 @use "../forms/form-variables" as *;
 
 // scss-docs-start btn-variables
-$btn-color:                   var(--#{$prefix}color-body) !default;
+$btn-color:                   var(--#{$prefix}body-color) !default;
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;

scss/buttons/_button.scss

@@ -6,6 +6,7 @@
 @use "../config" as *;
 @use "../theme" as *;
 @use "../variables" as *;
+@use "../theme" as *;
 @use "../functions" as *;
 @use "../vendor/rfs" as *;
 @use "../mixins/border-radius" as *;
@@ -59,11 +60,11 @@ $button-variants: (
     ),
     "hover": (
       "bg": ("bg-muted", "bg-subtle"),
-      "color": "text-emphasis"
+      "color": "text"
     ),
     "active": (
       "bg": "bg-subtle",
-      "color": "text-emphasis"
+      "color": "text"
     )
   ),
   "text": (
@@ -84,49 +85,76 @@ $button-variants: (
 ) !default;
 // scss-docs-end btn-variants
 
-// // Main button style generator mixin
 
-// Generate button variant classes (e.g., .btn-solid, .btn-outline, etc.)
+// 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
-@each $variant, $_ in $button-variants {
-  .btn-#{$variant} {
-    @each $property, $value in map.get($button-variants, $variant, "base") {
+@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}theme-#{$value});
+        --#{$prefix}btn-#{$property}: var(--#{$prefix}#{$color}-#{$value});
       }
     }
 
+    // Hover state
     &:hover {
-      @each $property, $value in map.get($button-variants, $variant, "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}theme-#{$first-value}) 50%, var(--#{$prefix}theme-#{$second-value}));
+          --#{$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}theme-#{$value});
+          --#{$prefix}btn-hover-#{$property}: var(--#{$prefix}#{$color}-#{$value});
         } @else {
-          --#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}theme-#{$value}) calc(l * .95) calc(c * 1.1) h);
+          --#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .95) calc(c * 1.1) h);
         }
       }
     }
 
     &:focus-visible {
-      outline-color: var(--#{$prefix}theme-focus-ring);
+      outline-color: var(--#{$prefix}#{$color}-focus-ring);
     }
 
+    // Active state
     &:active,
     &.active {
-      @each $property, $value in map.get($button-variants, $variant, "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}theme-#{$value});
+          --#{$prefix}btn-active-#{$property}: var(--#{$prefix}#{$color}-#{$value});
         } @else {
-          --#{$prefix}btn-active-#{$property}: oklch(from var(--#{$prefix}theme-#{$value}) calc(l * .9) calc(c * 1.15) h);
+          --#{$prefix}btn-active-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .9) calc(c * 1.15) h);
         }
       }
     }
@@ -134,6 +162,15 @@ $button-variants: (
 }
 // scss-docs-end btn-variant-mixin
 
+// 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-start btn-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
   --#{$prefix}btn-padding-y: #{$padding-y};
@@ -143,13 +180,13 @@ $button-variants: (
 }
 // scss-docs-end btn-size-mixin
 
+
 //
 // Base styles
 //
 
 @layer components {
-  .btn,
-  [class*="btn-"] {
+  .btn {
     // scss-docs-start btn-css-vars
     --#{$prefix}btn-padding-x: #{$btn-padding-x};
     --#{$prefix}btn-padding-y: #{$btn-padding-y};
@@ -176,7 +213,7 @@ $button-variants: (
     line-height: var(--#{$prefix}btn-line-height);
     color: var(--#{$prefix}btn-color);
     text-align: center;
-    text-decoration: none;
+    text-decoration: if($link-decoration == none, null, none);
     white-space: $btn-white-space;
     vertical-align: middle;
     cursor: if($enable-button-pointers, pointer, null);
@@ -189,6 +226,7 @@ $button-variants: (
 
     &:hover {
       color: var(--#{$prefix}btn-hover-color);
+      text-decoration: if($link-hover-decoration == underline, none, null);
       background-color: var(--#{$prefix}btn-hover-bg);
       border-color: var(--#{$prefix}btn-hover-border-color);
     }
@@ -262,12 +300,16 @@ $button-variants: (
     --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
     // --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
 
-    text-decoration: var(--#{$prefix}link-decoration);
-
+    text-decoration: $link-decoration;
     @if $enable-gradients {
       background-image: none;
     }
 
+    &:hover,
+    &:focus-visible {
+      text-decoration: $link-hover-decoration;
+    }
+
     &:focus-visible {
       color: var(--#{$prefix}btn-color);
     }

scss/content/_images.scss

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

scss/content/_prose.scss

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

scss/content/_reboot.scss

@@ -59,9 +59,9 @@
     @include font-size(var(--#{$prefix}body-font-size));
     font-weight: var(--#{$prefix}body-font-weight);
     line-height: var(--#{$prefix}body-line-height);
-    color: var(--#{$prefix}color-body);
+    color: var(--#{$prefix}body-color);
     text-align: var(--#{$prefix}body-text-align);
-    background-color: var(--#{$prefix}bg-body); // 2
+    background-color: var(--#{$prefix}body-bg); // 2
     -webkit-text-size-adjust: 100%; // 3
     -webkit-tap-highlight-color: rgba($black, 0); // 4
   }
@@ -76,7 +76,7 @@
     margin: $hr-margin-y 0;
     color: $hr-color; // 1
     border: 0;
-    border-block-start: $hr-border-width solid $hr-border-color;
+    border-top: $hr-border-width solid $hr-border-color;
     opacity: $hr-opacity;
   }
 
@@ -171,7 +171,7 @@
 
   ol,
   ul {
-    padding-inline-start: 2rem;
+    padding-left: 2rem;
   }
 
   ol,
@@ -195,8 +195,8 @@
   // 1. Undo browser default
 
   dd {
-    margin-inline-start: 0; // 1
     margin-bottom: .5rem;
+    margin-left: 0; // 1
   }
 
 
@@ -262,10 +262,8 @@
     text-underline-offset: $link-underline-offset;
 
     &:hover {
-      // --#{$prefix}link-color: var(--#{$prefix}link-hover-color);
-      // --#{$prefix}link-decoration: var(--#{$prefix}link-hover-decoration, var(--#{$prefix}link-decoration));
       color: var(--#{$prefix}link-hover-color);
-      text-decoration: var(--#{$prefix}link-hover-decoration, var(--#{$prefix}link-decoration));
+      text-decoration: var(--#{$prefix}link-hover-decoration);
     }
   }
 
@@ -371,7 +369,7 @@
     // color: $table-caption-color;
     padding-block: .5rem;
     color: var(--#{$prefix}secondary-color);
-    text-align: start;
+    text-align: left;
   }
 
   // 1. Removes font-weight bold by inheriting
@@ -509,13 +507,13 @@
     border: 0; // 2
   }
 
-  // 1. By using `float: inline-start`, the legend will behave like a block element.
+  // 1. By using `float: left`, the legend will behave like a block element.
   //    This way the border of a fieldset wraps around the legend if present.
   // 2. Fix wrapping bug.
   //    See https://github.com/twbs/bootstrap/issues/29712
 
   legend {
-    float: inline-start; // 1
+    float: left; // 1
     width: 100%;
     padding: 0;
     margin-bottom: $legend-margin-bottom;
@@ -524,7 +522,7 @@
     @include font-size($legend-font-size);
 
     + * {
-      clear: inline-start; // 2
+      clear: left; // 2
     }
   }
 
@@ -562,15 +560,19 @@
     }
   }
 
-  // A few input types should stay LTR regardless of document direction
+  // 1. A few input types should stay LTR
   // See https://rtlstyling.com/posts/rtl-styling#form-inputs
+  // 2. RTL only output
+  // See https://rtlcss.com/learn/usage-guide/control-directives/#raw
 
+  /* rtl:raw:
   [type="tel"],
   [type="url"],
   [type="email"],
   [type="number"] {
     direction: ltr;
   }
+  */
 
   // Remove the inner padding in Chrome and Safari on macOS.
 

scss/content/_tables.scss

@@ -16,8 +16,8 @@ $table-cell-padding-x-sm:     .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 var(--#{$prefix}color-body) !default;
-$table-bg:                    var(--#{$prefix}bg-body) !default;
+$table-color:                 var(--#{$prefix}body-color) !default;
+$table-bg:                    var(--#{$prefix}body-bg) !default;
 $table-accent-bg:             transparent !default;
 
 // $table-th-font-weight:        null !default;
@@ -34,6 +34,7 @@ $table-hover-color:           $table-color !default;
 $table-hover-bg-factor:       .075 !default;
 $table-hover-bg:              color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-hover-bg-factor)}, transparent) !default;
 
+$table-border-factor:         .2 !default;
 $table-border-width:          var(--#{$prefix}border-width) !default;
 $table-border-color:          var(--#{$prefix}border-color) !default;
 
@@ -46,6 +47,35 @@ $table-group-separator-color: currentcolor !default;
 
 // scss-docs-end table-variables
 
+// scss-docs-start table-loop
+$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: 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));
+    $table-border-color: color.mix($color, $background, math.percentage($table-border-factor));
+
+    --#{$prefix}table-color: #{$color};
+    --#{$prefix}table-bg: #{$background};
+    --#{$prefix}table-border-color: #{$table-border-color};
+    --#{$prefix}table-striped-bg: #{$striped-bg};
+    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
+    --#{$prefix}table-active-bg: #{$active-bg};
+    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
+    --#{$prefix}table-hover-bg: #{$hover-bg};
+    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
+
+    color: var(--#{$prefix}table-color);
+    border-color: var(--#{$prefix}table-border-color);
+  }
+}
+// scss-docs-end table-variant
 
 //
 // Basic Bootstrap table
@@ -59,8 +89,6 @@ $table-group-separator-color: currentcolor !default;
     --#{$prefix}table-color-state: initial;
     --#{$prefix}table-bg-state: initial;
     // End of reset
-
-    // scss-docs-start table-css-variables
     --#{$prefix}table-color: #{$table-color};
     --#{$prefix}table-bg: #{$table-bg};
     --#{$prefix}table-border-color: #{$table-border-color};
@@ -71,12 +99,11 @@ $table-group-separator-color: currentcolor !default;
     --#{$prefix}table-active-bg: #{$table-active-bg};
     --#{$prefix}table-hover-color: #{$table-hover-color};
     --#{$prefix}table-hover-bg: #{$table-hover-bg};
-    // scss-docs-end table-css-variables
 
     width: 100%;
     margin-bottom: $spacer;
     vertical-align: $table-cell-vertical-align;
-    border-color: var(--#{$prefix}theme-border, var(--#{$prefix}table-border-color));
+    border-color: var(--#{$prefix}table-border-color);
 
     // Target th & td
     // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
@@ -86,10 +113,10 @@ $table-group-separator-color: currentcolor !default;
     > :not(caption) > * > * {
       padding: $table-cell-padding-y $table-cell-padding-x;
       // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
-      color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}theme-text, var(--#{$prefix}table-color))));
-      background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-bg));
-      border-block-end-width: $table-border-width;
-      box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-accent-bg))));
+      color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
+      background-color: var(--#{$prefix}table-bg);
+      border-bottom-width: $table-border-width;
+      box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
     }
 
     > tbody {
@@ -102,7 +129,7 @@ $table-group-separator-color: currentcolor !default;
   }
 
   .table-group-divider {
-    border-block-start: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
+    border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
   }
 
   //
@@ -149,11 +176,11 @@ $table-group-separator-color: currentcolor !default;
   .table-borderless {
     // stylelint-disable-next-line selector-max-universal
     > :not(caption) > * > * {
-      border-block-end-width: 0;
+      border-bottom-width: 0;
     }
 
     > :not(:first-child) {
-      border-block-start-width: 0;
+      border-top-width: 0;
     }
   }
 
@@ -164,16 +191,16 @@ $table-group-separator-color: currentcolor !default;
   // For rows
   .table-striped {
     > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
-      --#{$prefix}table-color-type: var(--#{$prefix}theme-text, var(--#{$prefix}table-striped-color));
-      --#{$prefix}table-bg-type: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-striped-bg-factor)}, transparent);
+      --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+      --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
     }
   }
 
   // For columns
   .table-striped-columns {
     > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
-      --#{$prefix}table-color-type: var(--#{$prefix}theme-text, var(--#{$prefix}table-striped-color));
-      --#{$prefix}table-bg-type: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-striped-bg-factor)}, transparent);
+      --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+      --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
     }
   }
 
@@ -182,8 +209,8 @@ $table-group-separator-color: currentcolor !default;
   // The `.table-active` class can be added to highlight rows or cells
 
   .table-active {
-    --#{$prefix}table-color-state: var(--#{$prefix}theme-text, var(--#{$prefix}table-active-color));
-    --#{$prefix}table-bg-state: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-active-bg-factor)}, transparent);
+    --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
+    --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
   }
 
   // Hover effect
@@ -192,11 +219,36 @@ $table-group-separator-color: currentcolor !default;
 
   .table-hover {
     > tbody > tr:hover > * {
-      --#{$prefix}table-color-state: var(--#{$prefix}theme-text, var(--#{$prefix}table-hover-color));
-      --#{$prefix}table-bg-state: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-hover-bg-factor)}, transparent);
+      --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
+      --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
     }
   }
 
+
+  // Table variants
+  //
+  // Table variants set the table cell backgrounds, border colors
+  // and the colors of the striped, hovered & active tables
+
+  // 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
   //
   // Generate series of `.table-responsive-*` classes for configuring the screen

scss/content/_type.scss

@@ -4,6 +4,22 @@
 @use "../vendor/rfs" as *;
 
 @layer content {
+  .lead {
+    @include font-size($lead-font-size);
+    font-weight: $lead-font-weight;
+  }
+
+  // Type display classes
+  @each $display, $font-size in $display-font-sizes {
+    .display-#{$display} {
+      font-family: $display-font-family;
+      font-style: $display-font-style;
+      font-weight: $display-font-weight;
+      line-height: $display-line-height;
+      @include font-size($font-size);
+    }
+  }
+
   //
   // Lists
   //
@@ -20,7 +36,7 @@
     display: inline-block;
 
     &:not(:last-child) {
-      margin-inline-end: $list-inline-padding;
+      margin-right: $list-inline-padding;
     }
   }
 

scss/content/index.scss

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

scss/forms/_check.scss

@@ -58,15 +58,15 @@ $check-disabled-opacity: .65 !default;
     :where(input) {
       appearance: none;
       // later: maybe set a tertiary bg color?
-      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-bg));
-      border: 1px solid var(--#{$prefix}theme-bg, var(--#{$prefix}check-border-color));
+      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}theme-bg, var(--#{$prefix}check-checked-bg));
-      border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-checked-border-color));
+      background-color: var(--#{$prefix}check-checked-bg);
+      border-color: var(--#{$prefix}check-checked-border-color);
     }
 
     &:has(input:checked) .checked,

scss/forms/_floating-labels.scss

@@ -71,9 +71,9 @@ $form-floating-transition:              opacity .1s ease-in-out, transform .1s e
     }
 
     > .form-select {
-      padding-inline-start: $form-floating-padding-x;
       padding-top: $form-floating-input-padding-t;
       padding-bottom: $form-floating-input-padding-b;
+      padding-left: $form-floating-padding-x;
     }
 
     > .form-control:focus,

scss/forms/_form-control.scss

@@ -150,13 +150,14 @@
 
     &.form-control-sm,
     &.form-control-lg {
-      padding-inline: 0;
+      padding-right: 0;
+      padding-left: 0;
     }
   }
 
   // stylelint-disable selector-no-qualifying-type
   select.form-control {
-    padding-inline-end: calc(var(--#{$prefix}control-padding-x) * 3);
+    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);
@@ -164,7 +165,7 @@
 
     &[multiple],
     &[size]:not([size="1"]) {
-      padding-inline-end: var(--#{$prefix}control-padding-x);
+      padding-right: var(--#{$prefix}control-padding-x);
       background-image: none;
     }
 

scss/forms/_form-variables.scss

@@ -9,8 +9,8 @@ $control-padding-y: .375rem !default;
 $control-padding-x: .75rem !default;
 $control-font-size: $font-size-base !default;
 $control-line-height: $line-height-base !default;
-$control-color: var(--#{$prefix}color-body) !default;
-$control-bg: var(--#{$prefix}bg-body) !default;
+$control-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;
@@ -32,7 +32,7 @@ $control-select-indicator:             url("data:image/svg+xml,<svg xmlns='http:
 $control-select-bg-position:           right $control-padding-x center !default;
 $control-select-bg-size:               16px 12px !default;
 
-$control-select-indicator-color-dark:  #fff !default;
+$control-select-indicator-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;
 
 
@@ -76,12 +76,12 @@ $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
 $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
 $input-font-size-lg:                    $input-btn-font-size-lg !default;
 
-$input-bg:                              var(--#{$prefix}bg-body) !default;
+$input-bg:                              var(--#{$prefix}body-bg) !default;
 $input-disabled-color:                  null !default;
 $input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color:           null !default;
 
-$input-color:                           var(--#{$prefix}color-body) !default;
+$input-color:                           var(--#{$prefix}body-color) !default;
 $input-border-color:                    var(--#{$prefix}border-color) !default;
 $input-border-width:                    var(--#{$prefix}border-width) !default;
 $input-box-shadow:                      var(--#{$prefix}box-shadow-inset) !default;
@@ -97,7 +97,7 @@ $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
 
 $input-placeholder-color:               var(--#{$prefix}secondary-color) !default;
-$input-plaintext-color:                 var(--#{$prefix}color-body) !default;
+$input-plaintext-color:                 var(--#{$prefix}body-color) !default;
 
 $input-height-border:                   calc(#{$input-border-width} * 2) !default;
 

scss/forms/_input-group.scss

@@ -137,7 +137,7 @@ $input-group-addon-border-color:        $input-border-color !default;
     }
 
     > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-      margin-inline-start: calc(-1 * #{$input-border-width});
+      margin-left: calc(-1 * #{$input-border-width});
       @include border-start-radius(0);
     }
 

scss/forms/_radio.scss

@@ -45,15 +45,15 @@ $radio-disabled-opacity: .65 !default;
     height: 1rem;
     margin-block: .125rem;
     appearance: none;
-    background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-bg));
-    border: 1px solid var(--#{$prefix}theme-bg, var(--#{$prefix}radio-border-color));
+    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}theme-contrast, var(--#{$prefix}primary-contrast));
-      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-bg));
-      border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-border-color));
+      color: var(--#{$prefix}primary-contrast);
+      background-color: var(--#{$prefix}radio-checked-bg);
+      border-color: var(--#{$prefix}radio-checked-border-color);
 
       &::before {
         position: absolute;

scss/forms/_validation.scss

@@ -76,7 +76,7 @@
       border-color: $border-color;
 
       @if $enable-validation-icons {
-        padding-inline-end: $input-height-inner;
+        padding-right: $input-height-inner;
         background-image: escape-svg($icon);
         background-repeat: no-repeat;
         background-position: right $input-height-inner-quarter center;
@@ -99,7 +99,7 @@
   textarea.form-control {
     @include form-validation-state-selector($state) {
       @if $enable-validation-icons {
-        padding-inline-end: $input-height-inner;
+        padding-right: $input-height-inner;
         background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
       }
     }
@@ -158,7 +158,7 @@
   }
   .form-check-inline .form-check-input {
     ~ .#{$state}-feedback {
-      margin-inline-start: .5em;
+      margin-left: .5em;
     }
   }
 

scss/helpers/_color-bg.scss

@@ -8,7 +8,7 @@
   @each $color, $value in $new-theme-colors {
     .text-bg-#{$color} {
       color: var(--#{$prefix}#{$color}-text);
-      --#{$prefix}bg: var(--#{$prefix}#{$color}-bg-subtle);
+      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

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

scss/layout/_breakpoints.scss

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

scss/layout/_containers.scss

@@ -10,8 +10,10 @@
   --#{$prefix}gutter-x: #{$gutter};
   --#{$prefix}gutter-y: 0;
   width: 100%;
-  padding-inline: calc(var(--#{$prefix}gutter-x) * .5);
-  margin-inline: auto;
+  padding-right: calc(var(--#{$prefix}gutter-x) * .5);
+  padding-left: calc(var(--#{$prefix}gutter-x) * .5);
+  margin-right: auto;
+  margin-left: auto;
 }
 
 @layer layout {

scss/layout/_grid.scss

@@ -55,22 +55,23 @@
     gap: var(--#{$prefix}gap);
   }
 
-  // .g-col-auto {
-  //   grid-column: auto;
-  // }
+  // mdo-do: add to utilities?
+  .g-col-auto {
+    grid-column: auto/auto;
+  }
 
   // mdo-do: add to utilities?
-  // .grid-cols-3 {
-  //   --#{$prefix}columns: 3;
-  // }
-  // .grid-cols-4 {
-  //   --#{$prefix}columns: 4;
-  // }
-  // .grid-cols-6 {
-  //   --#{$prefix}columns: 6;
-  // }
+  .grid-cols-3 {
+    --#{$prefix}columns: 3;
+  }
+  .grid-cols-4 {
+    --#{$prefix}columns: 4;
+  }
+  .grid-cols-6 {
+    --#{$prefix}columns: 6;
+  }
 
-  // .grid-full {
-  //   grid-column: 1 / -1;
-  // }
+  .grid-full {
+    grid-column: 1 / -1;
+  }
 }

scss/mixins/_border-radius.scss

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

scss/mixins/_caret.scss

@@ -9,30 +9,30 @@ $caret-spacing:               $caret-width * .85 !default;
 
 // scss-docs-start caret-mixins
 @mixin caret-down($width: $caret-width) {
-  border-block-start: $width solid;
-  border-block-end: 0;
-  border-inline-start: $width solid transparent;
-  border-inline-end: $width solid transparent;
+  border-top: $width solid;
+  border-right: $width solid transparent;
+  border-bottom: 0;
+  border-left: $width solid transparent;
 }
 
 @mixin caret-up($width: $caret-width) {
-  border-block-start: 0;
-  border-block-end: $width solid;
-  border-inline-start: $width solid transparent;
-  border-inline-end: $width solid transparent;
+  border-top: 0;
+  border-right: $width solid transparent;
+  border-bottom: $width solid;
+  border-left: $width solid transparent;
 }
 
 @mixin caret-end($width: $caret-width) {
-  border-block-start: $width solid transparent;
-  border-block-end: $width solid transparent;
-  border-inline-start: $width solid;
-  border-inline-end: 0;
+  border-top: $width solid transparent;
+  border-right: 0;
+  border-bottom: $width solid transparent;
+  border-left: $width solid;
 }
 
 @mixin caret-start($width: $caret-width) {
-  border-block-start: $width solid transparent;
-  border-block-end: $width solid transparent;
-  border-inline-end: $width solid;
+  border-top: $width solid transparent;
+  border-right: $width solid;
+  border-bottom: $width solid transparent;
 }
 
 @mixin caret(
@@ -44,7 +44,7 @@ $caret-spacing:               $caret-width * .85 !default;
   @if $enable-caret {
     &::after {
       display: inline-block;
-      margin-inline-start: $spacing;
+      margin-left: $spacing;
       vertical-align: $vertical-align;
       content: "";
       @if $direction == down {
@@ -63,7 +63,7 @@ $caret-spacing:               $caret-width * .85 !default;
 
       &::before {
         display: inline-block;
-        margin-inline-end: $spacing;
+        margin-right: $spacing;
         vertical-align: $vertical-align;
         content: "";
         @include caret-start($width);
@@ -71,7 +71,7 @@ $caret-spacing:               $caret-width * .85 !default;
     }
 
     &:empty::after {
-      margin-inline-start: 0;
+      margin-left: 0;
     }
   }
 }

scss/mixins/_forms.scss

@@ -60,7 +60,7 @@
       border-color: $border-color;
 
       @if $enable-validation-icons {
-        padding-inline-end: $input-height-inner;
+        padding-right: $input-height-inner;
         background-image: escape-svg($icon);
         background-repeat: no-repeat;
         background-position: right $input-height-inner-quarter center;
@@ -83,7 +83,7 @@
   textarea.form-control {
     @include form-validation-state-selector($state) {
       @if $enable-validation-icons {
-        padding-inline-end: $input-height-inner;
+        padding-right: $input-height-inner;
         background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
       }
     }
@@ -97,7 +97,7 @@
         &:not([multiple]):not([size]),
         &:not([multiple])[size="1"] {
           --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
-          padding-inline-end: $form-select-feedback-icon-padding-end;
+          padding-right: $form-select-feedback-icon-padding-end;
           background-position: $form-select-bg-position, $form-select-feedback-icon-position;
           background-size: $form-select-bg-size, $form-select-feedback-icon-size;
         }
@@ -142,7 +142,7 @@
   }
   .form-check-inline .form-check-input {
     ~ .#{$state}-feedback {
-      margin-inline-start: .5em;
+      margin-left: .5em;
     }
   }
 

scss/mixins/_grid.scss

@@ -14,8 +14,9 @@
   display: flex;
   flex-wrap: wrap;
   // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
-  margin-inline: calc(-.5 * var(--#{$prefix}gutter-x));
   margin-top: calc(-1 * var(--#{$prefix}gutter-y));
+  margin-right: calc(-.5 * var(--#{$prefix}gutter-x));
+  margin-left: calc(-.5 * var(--#{$prefix}gutter-x));
 }
 
 @mixin make-col-ready() {
@@ -27,7 +28,8 @@
   flex-shrink: 0;
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-inline: calc(var(--#{$prefix}gutter-x) * .5);
+  padding-right: calc(var(--#{$prefix}gutter-x) * .5);
+  padding-left: calc(var(--#{$prefix}gutter-x) * .5);
   margin-top: var(--#{$prefix}gutter-y);
 }
 
@@ -49,7 +51,7 @@
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: math.div($size, $columns);
-  margin-inline-start: if($num == 0, 0, math.percentage($num));
+  margin-left: if($num == 0, 0, math.percentage($num));
 }
 
 // Row columns

scss/mixins/_lists.scss

@@ -2,6 +2,6 @@
 
 // Unstyled keeps list items block level, just removes default browser padding and list-style
 @mixin list-unstyled {
-  padding-inline-start: 0;
+  padding-left: 0;
   list-style: none;
 }

scss/mixins/_utilities.scss

@@ -9,81 +9,15 @@
 
 // Utility generator
 
-// - Utilities can use three different types of selectors:
+// - Utilities can three different types of selectors:
 //   - class: .class
 //   - attr-starts: [class^="class"]
 //   - attr-includes: [class*="class"]
-// - Utilities can generate regular CSS properties and CSS custom properties
+// - Utilities can generate a regular CSS property or a CSS custom property
 // - Utilities can be responsive or not
-// - Utilities can have state variants (e.g., hover, focus, active)
-// - Utilities can define local CSS variables
-//
-// CSS custom properties can be generated in two ways:
-//
-// 1. Property map with null values (CSS var receives the utility value):
-// "bg-color": (
-//   property: (
-//     "--#{$prefix}bg": null,
-//     "background-color": var(--#{$prefix}bg)
-//   ),
-//   class: bg,
-//   values: (
-//     primary: var(--#{$prefix}blue-500),
-//   )
-// )
-// Generates:
-// .bg-primary {
-//   --bs-bg: var(--bs-blue-500);
-//   background-color: var(--bs-bg);
-// }
-//
-// 2. Variables map (static CSS custom properties on every class):
-// "link-underline": (
-//   property: text-decoration-color,
-//   class: link-underline,
-//   variables: (
-//     "link-underline-opacity": 1
-//   ),
-//   values: (...)
-// )
-// Generates:
-// .link-underline {
-//   --bs-link-underline-opacity: 1;
-//   text-decoration-color: ...;
-// }
+// - Utilities can have a state (e.g., :hover, :focus, :active, etc.)
 
-// Helper mixin to generate CSS properties for both legacy and property map approaches
-@mixin generate-properties($utility, $propertyMap, $properties, $value) {
-  @if $propertyMap != null {
-    // New Property-Value Mapping approach
-    @each $property, $defaultValue in $propertyMap {
-      // If value is a map, check if it has a key for this property
-      // Otherwise, use defaultValue (or $value if defaultValue is null)
-      $actualValue: $defaultValue;
-      @if meta.type-of($value) == "map" and map.has-key($value, $property) {
-        $actualValue: map.get($value, $property);
-      } @else if $defaultValue == null {
-        $actualValue: $value;
-      }
-      @if map.get($utility, important) {
-        #{$property}: $actualValue !important; // stylelint-disable-line declaration-no-important
-      } @else {
-        #{$property}: $actualValue;
-      }
-    }
-  } @else {
-    // Legacy approach
-    @each $property in $properties {
-      @if map.get($utility, important) {
-        #{$property}: $value !important; // stylelint-disable-line declaration-no-important
-      } @else {
-        #{$property}: $value;
-      }
-    }
-  }
-}
-
-@mixin generate-utility($utility, $infix: "") {
+@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"])
@@ -109,31 +43,21 @@
 
   @each $key, $value in $values {
     $properties: map.get($utility, property);
-    $propertyMap: null;
-    $customClass: "";
 
-    // Check if property is a map (new Property-Value Mapping approach)
-    // @debug "Properties type: #{meta.type-of($properties)}";
-    // @debug "Properties: #{$properties}";
-    @if meta.type-of($properties) == "map" {
-      $propertyMap: $properties;
-      // For property maps, we need to determine the class from the utility definition
-      $customClass: if(map.has-key($utility, class), map.get($utility, class), "");
-    } @else {
-      // Legacy approach: Multiple properties are possible, for example with vertical or horizontal margins or paddings
-      @if meta.type-of($properties) == "string" {
-        $properties: list.append((), $properties);
-      }
-      // 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);
+    // Multiple properties are possible, for example with vertical or horizontal margins or paddings
+    @if meta.type-of($properties) == "string" {
+      $properties: list.append((), $properties);
     }
 
+    // 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`
     // 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 state variants
+    // State params to generate pseudo-classes
     $state: if(map.has-key($utility, state), map.get($utility, state), ());
 
     // $infix: if($customClass == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
@@ -162,47 +86,77 @@
     // @debug $values;
 
     #{$selector} {
-      // Generate CSS custom properties (variables) if provided
-      // Variables receive the current utility value, then properties reference them
-      @if map.has-key($utility, variables) {
-        $variables: map.get($utility, variables);
-        @if meta.type-of($variables) == "list" {
-          // If variables is a list, each variable gets the utility value
-          @each $var-name in $variables {
-            --#{$prefix}#{$var-name}: #{$value};
+      @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.";
+        }
+        @if $is-rfs-media-query {
+          @each $property in $properties {
+            @include rfs($value, $property);
           }
-        } @else if meta.type-of($variables) == "map" {
-          // If variables is a map, use the provided values (for static variables)
-          @each $var-key, $var-value in $variables {
-            --#{$prefix}#{$var-key}: #{$var-value};
+        }
+        @else {
+          @each $property in $properties {
+            @include rfs($value, $property);
+          }
+        }
+      } @else {
+        @each $property in $properties {
+          @if map.get($utility, important) {
+            #{$property}: $value !important; // stylelint-disable-line declaration-no-important
+          } @else {
+            #{$property}: $value;
           }
         }
       }
-      @include generate-properties($utility, $propertyMap, $properties, $value);
     }
 
-    // Generate state variants
-    @if $state != () {
-      @each $state-variant in $state {
-        #{$selector}-#{$state-variant}:#{$state-variant} {
-          // Generate CSS custom properties (variables) if provided
-          @if map.has-key($utility, variables) {
-            $variables: map.get($utility, variables);
-            @if meta.type-of($variables) == "list" {
-              // If variables is a list, each variable gets the utility value
-              @each $var-name in $variables {
-                --#{$prefix}#{$var-name}: #{$value};
-              }
-            } @else if meta.type-of($variables) == "map" {
-              // If variables is a map, use the provided values (for static variables)
-              @each $var-key, $var-value in $variables {
-                --#{$prefix}#{$var-key}: #{$var-value};
-              }
-            }
-          }
-          @include generate-properties($utility, $propertyMap, $properties, $value);
-        }
-      }
-    }
+    // @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/mixins/_breakpoints.test.scss

@@ -1,95 +0,0 @@
-@import "true";
-@import "../../mixins/breakpoints";
-
-// Test breakpoint functions and mixins for range media query syntax
-
-@include test-module("Breakpoint Functions") {
-  $test-breakpoints: (
-    xs: 0,
-    sm: 576px,
-    md: 768px,
-    lg: 1024px,
-    xl: 1280px,
-    xxl: 1536px
-  );
-
-  @include test("breakpoint-max with range syntax") {
-    @include assert-equal(breakpoint-max(xs, $test-breakpoints), null);
-    @include assert-equal(breakpoint-max(sm, $test-breakpoints), 576px);
-    @include assert-equal(breakpoint-max(md, $test-breakpoints), 768px);
-    @include assert-equal(breakpoint-max(lg, $test-breakpoints), 1024px);
-    @include assert-equal(breakpoint-max(xl, $test-breakpoints), 1280px);
-    @include assert-equal(breakpoint-max(xxl, $test-breakpoints), 1536px);
-  }
-}
-
-@include test-module("Media Query Mixins - Range Syntax") {
-  $test-breakpoints: (
-    xs: 0,
-    sm: 576px,
-    md: 768px,
-    lg: 1024px,
-    xl: 1280px,
-    xxl: 1536px
-  );
-
-  @include test("media-breakpoint-up generates range syntax") {
-    @include assert() {
-      @include output() {
-        @include media-breakpoint-up(sm, $test-breakpoints) {
-          .test { color: #f00; }
-        }
-      }
-      @include expect() {
-        @media (width >= 576px) {
-          .test { color: #f00; }
-        }
-      }
-    }
-  }
-
-  @include test("media-breakpoint-down generates range syntax") {
-    @include assert() {
-      @include output() {
-        @include media-breakpoint-down(md, $test-breakpoints) {
-          .test { color: #00f; }
-        }
-      }
-      @include expect() {
-        @media (width < 768px) {
-          .test { color: #00f; }
-        }
-      }
-    }
-  }
-
-  @include test("media-breakpoint-between generates range syntax") {
-    @include assert() {
-      @include output() {
-        @include media-breakpoint-between(sm, lg, $test-breakpoints) {
-          .test { color: #0f0; }
-        }
-      }
-      @include expect() {
-        @media (width >= 576px) and (width < 1024px) {
-          .test { color: #0f0; }
-        }
-      }
-    }
-  }
-
-  @include test("media-breakpoint-only generates range syntax") {
-    @include assert() {
-      @include output() {
-        @include media-breakpoint-only(md, $test-breakpoints) {
-          .test { color: #ff0; }
-        }
-      }
-      @include expect() {
-        @media (width >= 768px) and (width < 1024px) {
-          .test { color: #ff0; }
-        }
-      }
-    }
-  }
-}

scss/tests/utilities/_api.test.scss

@@ -53,13 +53,13 @@ $utilities: ();
           font-size: 1.25rem !important;
         }
 
-        @media (width >= 333px) {
+        @media (min-width: 333px) {
           .padding-sm-1rem {
             padding: 1rem !important;
           }
         }
 
-        @media (width >= 666px) {
+        @media (min-width: 666px) {
           .padding-md-1rem {
             padding: 1rem !important;
           }

site/data/sidebar.yml

@@ -10,17 +10,12 @@
     - title: Contents
     - title: Browsers & devices
     - title: JavaScript
-    - title: Accessibility
-    - title: RFS
-    - title: RTL
-
-- title: Guides
-  icon: map
-  icon_color: green
-  pages:
     - title: Webpack
     - title: Parcel
     - title: Vite
+    - title: Accessibility
+    - title: RFS
+    - title: RTL
     - title: Contribute
 
 - title: Customize
@@ -59,7 +54,6 @@
     - title: Images
     - title: Tables
     - title: Figures
-    - title: Prose
 
 - title: Forms
   icon: ui-radios
@@ -125,10 +119,10 @@
   icon_color: red
   pages:
     - title: API
-    - group: Color
-      pages:
-        - title: Colors
-        - title: Background
+    - title: Background
+    - title: Border
+    - title: Border radius
+    - title: Colors
     - group: Layout
       pages:
         - title: Aspect ratio
@@ -145,8 +139,6 @@
         - title: Align items
         - title: Align self
         - title: Flex
-        - title: Gap
-        - title: Grid
         - title: Justify content
         - title: Justify items
         - title: Place items
@@ -160,23 +152,11 @@
         - title: Padding
     - group: Type
       pages:
-        - title: Font family
-        - title: Font size
         - title: Font style
-        - title: Font weight
-        - title: Line height
-        - title: Link
         - title: Text alignment
         - title: Text decoration
-        - title: Text transform
         - title: Text wrapping
         - title: Vertical align
-        - title: Word break
-    - group: Borders
-      pages:
-        - title: Border
-        - title: Border color
-        - title: Border radius
     - group: Interactions
       pages:
         - title: Pointer events
@@ -186,6 +166,13 @@
         - title: Opacity
         - title: Shadows
 
+- title: Extend
+  icon: tools
+  icon_color: blue
+  pages:
+    - title: Approach
+    - title: Icons
+
 - title: About
   icon: globe2
   icon_color: indigo

site/data/theme-colors.yml

@@ -4,5 +4,5 @@
 - name: danger
 - name: warning
 - name: info
-- name: inverse
+- name: emphasis
 - name: secondary

site/src/assets/examples/blog-rtl/index.astro

@@ -1,7 +1,7 @@
 ---
 export const title = 'قالب المدونة'
 export const direction = 'rtl'
-export const extra_css = ['https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap', '../blog/blog.css']
+export const extra_css = ['https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap', '../blog/blog.rtl.css']
 import Placeholder from "@shortcodes/Placeholder.astro"
 ---
 

site/src/assets/examples/blog/blog.css

@@ -1,29 +1,16 @@
 /* stylelint-disable @stylistic/selector-list-comma-newline-after */
 
 .blog-header-logo {
-  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
+  font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
   font-size: 2.25rem;
 }
 
-[dir="rtl"] .blog-header-logo {
-  font-family: Amiri, Georgia, "Times New Roman", serif;
-}
-
 .blog-header-logo:hover {
   text-decoration: none;
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
-}
-
-[dir="rtl"] h1,
-[dir="rtl"] h2,
-[dir="rtl"] h3,
-[dir="rtl"] h4,
-[dir="rtl"] h5,
-[dir="rtl"] h6 {
-  font-family: Amiri, Georgia, "Times New Roman", serif;
+  font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
 }
 
 .flex-auto {

site/src/assets/examples/blog/blog.rtl.css

@@ -0,0 +1,39 @@
+/* stylelint-disable @stylistic/selector-list-comma-newline-after */
+
+.blog-header-logo {
+  font-family: Amiri, Georgia, "Times New Roman", serif;
+  font-size: 2.25rem;
+}
+
+.blog-header-logo:hover {
+  text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: Amiri, Georgia, "Times New Roman", serif;
+}
+
+.flex-auto {
+  flex: 0 0 auto;
+}
+
+.h-250 { height: 250px; }
+@media (min-width: 768px) {
+  .h-md-250 { height: 250px; }
+}
+
+/* Pagination */
+.blog-pagination {
+  margin-bottom: 4rem;
+}
+
+/*
+ * Blog posts
+ */
+.blog-post {
+  margin-bottom: 4rem;
+}
+.blog-post-meta {
+  margin-bottom: 1.25rem;
+  color: #727272;
+}

site/src/assets/examples/carousel-rtl/index.astro

@@ -1,7 +1,7 @@
 ---
 export const title = 'قالب  شرائح العرض'
 export const direction = 'rtl'
-export const extra_css = ['../carousel/carousel.css']
+export const extra_css = ['../carousel/carousel.rtl.css']
 import Placeholder from "@shortcodes/Placeholder.astro"
 ---
 

site/src/assets/examples/carousel/carousel.rtl.css

@@ -0,0 +1,74 @@
+/* GLOBAL STYLES
+-------------------------------------------------- */
+/* Padding below the footer and lighter body text */
+
+body {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  color: rgb(var(--bs-tertiary-color-rgb));
+}
+
+
+/* CUSTOMIZE THE CAROUSEL
+-------------------------------------------------- */
+
+/* Carousel base class */
+.carousel {
+  margin-bottom: 4rem;
+}
+/* Since positioning the image, we need to help out the caption */
+.carousel-caption {
+  bottom: 3rem;
+  z-index: 10;
+}
+
+/* Declare heights because of positioning of img element */
+.carousel-item {
+  height: 32rem;
+}
+
+
+/* MARKETING CONTENT
+-------------------------------------------------- */
+
+/* Center align the text within the three columns below the carousel */
+.marketing .col-lg-4 {
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+.marketing .col-lg-4 p {
+  margin-right: .75rem;
+  margin-left: .75rem;
+}
+
+
+/* Featurettes
+------------------------- */
+
+.featurette-divider {
+  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
+}
+
+/* Thin out the marketing headings */
+
+/* RESPONSIVE CSS
+-------------------------------------------------- */
+
+@media (min-width: 40em) {
+  /* Bump up size of carousel content */
+  .carousel-caption p {
+    margin-bottom: 1.25rem;
+    font-size: 1.25rem;
+    line-height: 1.4;
+  }
+
+  .featurette-heading {
+    font-size: 50px;
+  }
+}
+
+@media (min-width: 62em) {
+  .featurette-heading {
+    margin-top: 7rem;
+  }
+}

site/src/assets/examples/cheatsheet-rtl/index.astro

@@ -4,7 +4,7 @@ import { getVersionedDocsPath } from '@libs/path'
 import Example from '@shortcodes/Example.astro'
 
 export const title = 'ورقة الغش'
-export const extra_css = ['../cheatsheet/cheatsheet.css']
+export const extra_css = ['../cheatsheet/cheatsheet.rtl.css']
 export const extra_js = [{src: '../cheatsheet/cheatsheet.js'}]
 export const body_class = 'bg-body-tertiary'
 export const direction = 'rtl'

site/src/assets/examples/cheatsheet/cheatsheet.rtl.css

@@ -0,0 +1,156 @@
+body {
+  scroll-behavior: smooth;
+}
+
+/**
+ * Bootstrap "Journal code" icon
+ * @link https://icons.getbootstrap.com/icons/journal-code/
+ */
+.bd-heading a::before {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-left: .25rem;
+  content: "";
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
+  background-size: 1em;
+}
+
+/* stylelint-disable-next-line selector-max-universal */
+.bd-heading + div > * + * {
+  margin-top: 3rem;
+}
+
+/* Table of contents */
+.bd-aside a {
+  padding: .1875rem .5rem;
+  margin-top: .125rem;
+  margin-right: .3125rem;
+  color: var(--bs-body-color);
+}
+
+.bd-aside a:hover,
+.bd-aside a:focus {
+  color: var(--bs-body-color);
+  background-color: rgba(121, 82, 179, .1);
+}
+
+.bd-aside .active {
+  font-weight: 600;
+  color: var(--bs-body-color);
+}
+
+.bd-aside .btn {
+  padding: .25rem .5rem;
+  font-weight: 600;
+  color: var(--bs-body-color);
+}
+
+.bd-aside .btn:hover,
+.bd-aside .btn:focus {
+  color: var(--bs-body-color);
+  background-color: rgba(121, 82, 179, .1);
+}
+
+.bd-aside .btn:focus {
+  box-shadow: 0 0 0 1px rgba(121, 82, 179, .7);
+}
+
+.bd-aside .btn::before {
+  width: 1.25em;
+  line-height: 0;
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+  transition: transform .35s ease;
+  transform: rotate(180deg) translateX(-2px);
+  transform-origin: .5em 50%;
+}
+
+.bd-aside .btn[aria-expanded="true"]::before {
+  transform: rotate(90deg);
+}
+
+
+/* Examples */
+.scrollspy-example {
+  height: 200px;
+}
+
+[id="modal"] .bd-example .btn,
+[id="buttons"] .bd-example .btn,
+[id="tooltips"] .bd-example .btn,
+[id="popovers"] .bd-example .btn,
+[id="dropdowns"] .bd-example .btn-group,
+[id="dropdowns"] .bd-example .dropdown,
+[id="dropdowns"] .bd-example .dropup,
+[id="dropdowns"] .bd-example .dropend,
+[id="dropdowns"] .bd-example .dropstart {
+  margin: 0 0 1rem 1rem;
+}
+
+/* Layout */
+@media (min-width: 1200px) {
+  body {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr 4fr 1fr;
+    gap: 1rem;
+  }
+
+  .bd-header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1030;
+    grid-column: 1 / span 3;
+  }
+
+  .bd-aside,
+  .bd-cheatsheet {
+    padding-top: 4rem;
+  }
+
+  /**
+   * 1. Too bad only Firefox supports subgrids ATM
+   */
+  .bd-cheatsheet,
+  .bd-cheatsheet section,
+  .bd-cheatsheet article {
+    display: inherit; /* 1 */
+    grid-template-rows: auto;
+    grid-template-columns: 1fr 4fr;
+    grid-column: 1 / span 2;
+    gap: inherit; /* 1 */
+  }
+
+  .bd-aside {
+    grid-area: 1 / 3;
+    scroll-margin-top: 4rem;
+  }
+
+  .bd-cheatsheet section,
+  .bd-cheatsheet section > h2 {
+    top: 2rem;
+    scroll-margin-top: 2rem;
+  }
+
+  .bd-cheatsheet section > h2::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: -2rem;
+    left: 0;
+    z-index: -1;
+    content: "";
+  }
+
+  .bd-cheatsheet article,
+  .bd-cheatsheet .bd-heading {
+    top: 8rem;
+    scroll-margin-top: 8rem;
+  }
+
+  .bd-cheatsheet .bd-heading {
+    z-index: 1;
+  }
+}

site/src/assets/examples/dashboard-rtl/index.astro

@@ -1,7 +1,7 @@
 ---
 export const title = 'قالب لوحة القيادة'
 export const direction = 'rtl'
-export const extra_css = ['../dashboard/dashboard.css']
+export const extra_css = ['../dashboard/dashboard.rtl.css']
 export const extra_js = [
   { src: 'https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js', integrity: 'sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp'},
   { src: 'dashboard.js'}

site/src/assets/examples/dashboard/dashboard.rtl.css

@@ -0,0 +1,48 @@
+.bi {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+}
+
+/*
+ * Sidebar
+ */
+
+@media (min-width: 768px) {
+  .sidebar .offcanvas-lg {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 48px;
+  }
+  .navbar-search {
+    display: block;
+  }
+}
+
+.sidebar .nav-link {
+  font-size: .875rem;
+  font-weight: 500;
+}
+
+.sidebar .nav-link.active {
+  color: #2470dc;
+}
+
+.sidebar-heading {
+  font-size: .75rem;
+}
+
+/*
+ * Navbar
+ */
+
+.navbar-brand {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  background-color: rgba(0, 0, 0, .25);
+  box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25);
+}
+
+.navbar .form-control {
+  padding: .75rem 1rem;
+}

site/src/assets/examples/starter-template/index.astro

@@ -75,25 +75,25 @@ export const title = 'Starter Template'
             </a>
           </li>
           <li>
-            <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/webpack')}>
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/webpack')}>
               <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap Webpack guide
             </a>
           </li>
           <li>
-            <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/parcel')}>
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/parcel')}>
               <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap Parcel guide
             </a>
           </li>
           <li>
-            <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/vite')}>
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/vite')}>
               <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Bootstrap Vite guide
             </a>
           </li>
           <li>
-            <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/contribute')}>
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/getting-started/contribute')}>
               <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-right-circle"/></svg>
               Contributing to Bootstrap
             </a>

site/src/components/DocsSidebar.astro

@@ -20,7 +20,7 @@ const sidebar = getData('sidebar')
                 {group.icon && (
                   <svg
                     class="bi me-2"
-                    style={group.icon_color && `color: light-dark(var(--bs-${group.icon_color}-500), var(--bs-${group.icon_color}-400));`}
+                    style={group.icon_color && `color: light-dark(var(--bs-${group.icon_color}-500), var(--bs-${group.icon_color}-300));`}
                     aria-hidden="true"
                   >
                     <use xlink:href={`#${group.icon}`} />

site/src/components/HelperReferenceTable.astro

@@ -1,41 +0,0 @@
----
-interface ClassItem {
-  class: string;
-  description: string;
-}
-
-interface Props {
-  classes: ClassItem[];
-  className?: string;
-}
-
-const {
-  classes,
-  className = "table reference-table"
-} = Astro.props;
-
-// Format class names with dot prefix if needed
-const tableData = classes.map(item => ({
-  class: item.class.startsWith('.') ? item.class : `.${item.class}`,
-  description: item.description
-}));
----
-
-<div class="table-responsive bd-reference-table">
-  <table class={className}>
-    <thead>
-      <tr>
-        <th scope="col">Class</th>
-        <th scope="col">Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      {tableData.map((row) => (
-        <tr>
-          <td><code>{row.class}</code></td>
-          <td>{row.description}</td>
-        </tr>
-      ))}
-    </tbody>
-  </table>
-</div>

site/src/components/ReferenceTable.astro

@@ -1,12 +1,7 @@
 ---
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-
 interface ReferenceItem {
   class: string;
-  styles?: string | string[] | Record<string, string>;
-  description?: string;
-  comment?: string; // Optional manual comment to append
+  styles: string | string[] | Record<string, string>;
   [key: string]: any; // Allow additional properties
 }
 
@@ -27,67 +22,6 @@ const {
 // Use explicit reference prop or data prop
 const referenceData = reference || data || [];
 
-// Parse CSS variables from _root.scss at build time
-function parseCSSVariables(): Record<string, string> {
-  try {
-    const projectRoot = process.cwd();
-    const rootScssPath = join(projectRoot, 'scss/_root.scss');
-    const scssContent = readFileSync(rootScssPath, 'utf-8');
-
-    const cssVarValues: Record<string, string> = {};
-
-    // Match CSS variable declarations: --#{$prefix}variable-name: value;
-    // This regex captures the variable name and its value
-    const varRegex = /--#\{\$prefix\}([a-z0-9-]+):\s*([^;]+);/gi;
-    let match;
-
-    while ((match = varRegex.exec(scssContent)) !== null) {
-      const varName = `--bs-${match[1]}`;
-      let value = match[2].trim();
-
-      // Clean up SCSS interpolation syntax (e.g., #{$variable})
-      value = value.replace(/#\{[^}]+\}/g, '').trim();
-
-      // Remove inline comments
-      value = value.replace(/\/\/.*$/gm, '').trim();
-
-      // Only store if we have a clean value (not empty after removing interpolations)
-      if (value) {
-        cssVarValues[varName] = value;
-      }
-    }
-
-    return cssVarValues;
-  } catch (error) {
-    console.warn('Could not parse CSS variables from _root.scss:', error);
-    return {};
-  }
-}
-
-const cssVarValues = parseCSSVariables();
-
-// Function to add CSS variable value comments
-function addVarComments(cssValue: string): string {
-  const comments: string[] = [];
-
-  // Collect resolved values for all CSS variables
-  cssValue.replace(/var\((--[a-z0-9-]+)\)/gi, (match, varName) => {
-    const resolvedValue = cssVarValues[varName];
-    if (resolvedValue) {
-      comments.push(`<span class="color-3">/* ${resolvedValue} */</span>`);
-    }
-    return match;
-  });
-
-  // Append comments after the last semicolon or at the end
-  if (comments.length > 0) {
-    const hasSemicolon = cssValue.trimEnd().endsWith(';');
-    return `${cssValue}${hasSemicolon ? '' : ';'} ${comments.join(' ')}`;
-  }
-
-  return cssValue;
-}
-
 // If no explicit columns provided, infer from the first data item
 const inferredColumns = columns || (() => {
   if (referenceData.length === 0) {
@@ -98,12 +32,10 @@ const inferredColumns = columns || (() => {
   }
 
   const firstItem = referenceData[0];
-  return Object.keys(firstItem)
-    .filter(key => key !== 'comment') // Exclude comment field from columns
-    .map(key => ({
-      label: key.charAt(0).toUpperCase() + key.slice(1),
-      key: key
-    }));
+  return Object.keys(firstItem).map(key => ({
+    label: key.charAt(0).toUpperCase() + key.slice(1), // Capitalize first letter
+    key: key
+  }));
 })();
 
 // Transform frontmatter format to table format
@@ -119,40 +51,26 @@ const tableData = referenceData.map((item: ReferenceItem) => {
     }
 
     if (key === 'styles') {
-      let processedStyles = '';
-
       if (typeof value === 'string') {
-        processedStyles = addVarComments(value);
+        transformedItem[key] = value;
       } else if (typeof value === 'object' && !Array.isArray(value)) {
         // Handle object syntax: { prop: value, prop2: value2 }
-        processedStyles = Object.entries(value)
-          .map(([prop, val]) => {
-            const cssLine = `${prop}: ${val};`;
-            return addVarComments(cssLine);
-          })
+        transformedItem[key] = Object.entries(value)
+          .map(([prop, val]) => `${prop}: ${val};`)
           .join('<br/>');
       } else if (Array.isArray(value)) {
-        processedStyles = value.map((style: any) => {
+        transformedItem[key] = value.map((style: any) => {
           if (typeof style === 'string') {
-            const formattedStyle = style.includes(':') ? style + (style.endsWith(';') ? '' : ';') : style;
-            return addVarComments(formattedStyle);
+            return style.includes(':') ? style + (style.endsWith(';') ? '' : ';') : style;
           }
           if (typeof style === 'object') {
-            const cssLine = Object.entries(style).map(([prop, val]) => `${prop}: ${val};`).join(' ');
-            return addVarComments(cssLine);
+            return Object.entries(style).map(([prop, val]) => `${prop}: ${val};`).join(' ');
           }
           return style;
         }).join('<br/>');
       } else {
-        processedStyles = value || '';
+        transformedItem[key] = value || '';
       }
-
-      // Append manual comment if provided in frontmatter
-      if (item.comment) {
-        processedStyles += `<br/><span class="color-3">/* ${item.comment} */</span>`;
-      }
-
-      transformedItem[key] = processedStyles;
     } else {
       transformedItem[key] = value;
     }

site/src/components/UtilityReferenceTable.astro

@@ -1,173 +0,0 @@
----
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-
-interface Props {
-  utility: string | string[]; // The utility key(s) from the metadata (e.g., "font-size" or ["font-size", "text-size"])
-  className?: string;
-}
-
-const {
-  utility,
-  className = "table reference-table"
-} = Astro.props;
-
-// Normalize to array
-const utilities = Array.isArray(utility) ? utility : [utility];
-
-// Parse CSS variables from _root.scss at build time
-function parseCSSVariables(): Record<string, string> {
-  try {
-    const projectRoot = process.cwd();
-    const rootScssPath = join(projectRoot, 'scss/_root.scss');
-    const scssContent = readFileSync(rootScssPath, 'utf-8');
-
-    const cssVarValues: Record<string, string> = {};
-    const varRegex = /--#\{\$prefix\}([a-z0-9-]+):\s*([^;]+);/gi;
-    let match;
-
-    while ((match = varRegex.exec(scssContent)) !== null) {
-      const varName = `--bs-${match[1]}`;
-      let value = match[2].trim();
-      value = value.replace(/#\{[^}]+\}/g, '').trim();
-      value = value.replace(/\/\/.*$/gm, '').trim();
-
-      if (value) {
-        cssVarValues[varName] = value;
-      }
-    }
-
-    return cssVarValues;
-  } catch (error) {
-    console.warn('Could not parse CSS variables from _root.scss:', error);
-    return {};
-  }
-}
-
-// Load utilities metadata
-function loadUtilitiesMetadata(): any {
-  try {
-    const projectRoot = process.cwd();
-    const metadataPath = join(projectRoot, 'dist/css/bootstrap-utilities.metadata.json');
-    const metadataContent = readFileSync(metadataPath, 'utf-8');
-    return JSON.parse(metadataContent);
-  } catch (error) {
-    console.warn('Could not load utilities metadata:', error);
-    return { utilities: {} };
-  }
-}
-
-// Parse compiled CSS to extract styles for given class selectors
-function parseCompiledCSS(classNames: string[]): Record<string, string[]> {
-  try {
-    const projectRoot = process.cwd();
-    const bootstrapCssPath = join(projectRoot, 'dist/css/bootstrap.css');
-    const cssContent = readFileSync(bootstrapCssPath, 'utf-8');
-
-    const classStyles: Record<string, string[]> = {};
-
-    classNames.forEach(className => {
-      // Match ONLY single class selectors: .classname { declarations }
-      const escapedClass = className.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-      const selectorRegex = new RegExp(`(?:^|\\n)\\s*\\.${escapedClass}\\s*\\{([^}]+)\\}`, 'gm');
-
-      let match;
-      let foundDeclarations: string[] = [];
-
-      while ((match = selectorRegex.exec(cssContent)) !== null) {
-        const declarations = match[1]
-          .split(';')
-          .map(decl => decl.trim())
-          .filter(decl => decl.length > 0)
-          .map(decl => `${decl};`);
-
-        if (declarations.length > 0) {
-          foundDeclarations = declarations;
-          break;
-        }
-      }
-
-      classStyles[className] = foundDeclarations;
-    });
-
-    return classStyles;
-  } catch (error) {
-    console.warn('Could not parse compiled CSS:', error);
-    return {};
-  }
-}
-
-const cssVarValues = parseCSSVariables();
-const metadata = loadUtilitiesMetadata();
-
-// Collect classes from all specified utilities
-let allClasses: string[] = [];
-
-utilities.forEach(util => {
-  const utilityMeta = metadata.utilities[util];
-
-  if (!utilityMeta) {
-    console.warn(`Utility "${util}" not found in metadata. Available utilities: ${Object.keys(metadata.utilities).join(', ')}`);
-    return;
-  }
-
-  const classes = utilityMeta.classes || [];
-  allClasses = allClasses.concat(classes);
-});
-
-if (allClasses.length === 0) {
-  throw new Error(`No classes found for utilities: ${utilities.join(', ')}`);
-}
-
-const classStyles = parseCompiledCSS(allClasses);
-
-// Function to add CSS variable value comments
-function addVarComments(cssValue: string): string {
-  const comments: string[] = [];
-
-  cssValue.replace(/var\((--[a-z0-9-]+)\)/gi, (match, varName) => {
-    const resolvedValue = cssVarValues[varName];
-    if (resolvedValue) {
-      comments.push(`<span class="color-3">/* ${resolvedValue} */</span>`);
-    }
-    return match;
-  });
-
-  if (comments.length > 0) {
-    const hasSemicolon = cssValue.trimEnd().endsWith(';');
-    return `${cssValue}${hasSemicolon ? '' : ';'} ${comments.join(' ')}`;
-  }
-
-  return cssValue;
-}
-
-// Build table data
-const tableData = allClasses.map(cls => {
-  const styles = classStyles[cls] || [];
-  const formattedStyles = styles.map(style => addVarComments(style)).join('<br/>');
-
-  return {
-    class: `.${cls}`,
-    styles: formattedStyles || '<em>Not found</em>'
-  };
-});
----
-
-<div class="table-responsive bd-reference-table">
-  <table class={className}>
-    <thead>
-      <tr>
-        <th scope="col">Class</th>
-        <th scope="col">Styles</th>
-      </tr>
-    </thead>
-    <tbody>
-      {tableData.map((row) => (
-        <tr>
-          <td>{row.class}</td>
-          <td><Fragment set:html={row.styles} /></td>
-        </tr>
-      ))}
-    </tbody>
-  </table>
-</div>

site/src/components/footer/Footer.astro

@@ -48,9 +48,9 @@ import { getVersionedDocsPath } from '@libs/path'
         <ul class="list-unstyled">
           <li class="mb-2"><a href={getVersionedDocsPath('getting-started')}>Getting started</a></li>
           <li class="mb-2"><a href={getVersionedDocsPath('examples/starter-template')}>Starter template</a></li>
-          <li class="mb-2"><a href={getVersionedDocsPath('guides/webpack')}>Webpack</a></li>
-          <li class="mb-2"><a href={getVersionedDocsPath('guides/parcel')}>Parcel</a></li>
-          <li class="mb-2"><a href={getVersionedDocsPath('guides/vite')}>Vite</a></li>
+          <li class="mb-2"><a href={getVersionedDocsPath('getting-started/webpack')}>Webpack</a></li>
+          <li class="mb-2"><a href={getVersionedDocsPath('getting-started/parcel')}>Parcel</a></li>
+          <li class="mb-2"><a href={getVersionedDocsPath('getting-started/vite')}>Vite</a></li>
         </ul>
       </div>
       <div class="col-6 col-lg-2 mb-3">

site/src/components/home/ComponentUtilities.astro

@@ -28,7 +28,7 @@ import Code from '@shortcodes/Code.astro'
         Apply any of our included utility classes to our components to customize their appearance, like the navigation
         example below. There are hundreds of classes available—from <a href={getVersionedDocsPath('utilities/position')}
           >positioning</a
-        > and <a href={getVersionedDocsPath('utilities/width')}>sizing</a> to <a
+        > and <a href={getVersionedDocsPath('utilities/sizing')}>sizing</a> to <a
           href={getVersionedDocsPath('utilities/colors')}>colors</a
         > and <a href={getVersionedDocsPath('utilities/shadows')}>effects</a>. Mix them with CSS variable overrides for
         even more control.

site/src/components/home/GetStarted.astro

@@ -70,7 +70,7 @@ import Code from '@shortcodes/Code.astro'
     <div class="d-flex flex-wrap align-items-center justify-content-center gap-4 mt-4">
       <a
         class="d-flex flex-column align-items-center text-decoration-none animate-img"
-        href={getVersionedDocsPath('guides/webpack/')}
+        href={getVersionedDocsPath('getting-started/webpack/')}
       >
         <img
           class="d-block mb-2"
@@ -84,7 +84,7 @@ import Code from '@shortcodes/Code.astro'
       </a>
       <a
         class="d-flex flex-column align-items-center text-decoration-none animate-img"
-        href={getVersionedDocsPath('guides/parcel/')}
+        href={getVersionedDocsPath('getting-started/parcel/')}
       >
         <img
           class="d-block mb-2"
@@ -98,7 +98,7 @@ import Code from '@shortcodes/Code.astro'
       </a>
       <a
         class="d-flex flex-column align-items-center text-decoration-none animate-img"
-        href={getVersionedDocsPath('guides/vite/')}
+        href={getVersionedDocsPath('getting-started/vite/')}
       >
         <img
           class="d-block mb-2"

site/src/components/icons/Symbols.astro

@@ -96,9 +96,6 @@
       d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"
     ></path>
   </symbol>
-  <symbol id="map" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M15.817.113A.5.5 0 0 1 16 .5v14a.5.5 0 0 1-.402.49l-5 1a.5.5 0 0 1-.196 0L5.5 15.01l-4.902.98A.5.5 0 0 1 0 15.5v-14a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0L10.5.99l4.902-.98a.5.5 0 0 1 .415.103M10 1.91l-4-.8v12.98l4 .8zm1 12.98 4-.8V1.11l-4 .8zm-6-.8V1.11l-4 .8v12.98z"/>
-  </symbol>
   <symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
     <path
       d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"

site/src/components/shortcodes/Callout.astro

@@ -13,6 +13,7 @@ interface Props {
     | 'info-npm-starter'
     | 'info-prefersreducedmotion'
     | 'info-sanitizer'
+    | 'warning-color-assistive-technologies'
     | 'warning-data-bs-title-vs-title'
     | 'warning-input-support'
   /**
@@ -27,13 +28,13 @@ const { name, type = 'info' } = Astro.props
 let Content: MarkdownInstance<{}>['Content'] | undefined
 
 if (name) {
-  const callout = await getCalloutByName(name) as any
+  const callout = await getCalloutByName(name)
 
   if (!callout) {
     throw new Error(`Could not find callout with name '${name}'.`)
   }
 
-  const namedCallout = await callout.render() as any
+  const namedCallout = await callout.render()
   Content = namedCallout.Content
 }
 ---

site/src/components/shortcodes/DETAILS_README.md

@@ -1,126 +0,0 @@
-# Details Component
-
-The Details component is an expandable/collapsible content component that looks similar to the Callout component but requires a click to reveal the full content. It uses the native HTML `<details>` and `<summary>` elements under the hood.
-
-## Features
-
-- **Expandable/Collapsible**: Content is hidden by default and expands when the summary is clicked
-- **Markdown Support**: Can reference external `.md` files using the `name` prop
-- **Flexible Content**: Accepts inline content via slot or named markdown files
-- **Simple Styling**: Single, unified design that works everywhere
-
-## Usage
-
-### Basic Usage with Inline Content
-
-```astro
-<Details summary="Click to expand">
-  This is the content that will be hidden until the user clicks the summary.
-</Details>
-```
-
-### With Named Content (External Markdown File)
-
-Create a markdown file in `site/src/content/details/` with a `title` in the frontmatter:
-
-```markdown
-<!-- site/src/content/details/my-example.md -->
----
-title: Click to see more
----
-
-**This is the content** from an external markdown file.
-
-It supports full markdown formatting including:
-- Lists
-- Links
-- **Bold** and *italic* text
-```
-
-Then use it in your component (the title from frontmatter will be used as the summary):
-
-```astro
-<Details name="my-example" />
-```
-
-You can also override the title with a custom summary:
-
-```astro
-<Details summary="Custom summary text" name="my-example" />
-```
-
-### With Markdown Formatting in Slot
-
-```astro
-<Details summary="Advanced usage">
-  You can use **markdown** formatting, including:
-
-  - Lists
-  - [Links](#)
-  - `code`
-  - And more!
-</Details>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `summary` | `string` | *Optional* | The text displayed in the summary (always visible). If not provided, uses the `title` from the markdown frontmatter when `name` is set. |
-| `name` | `string` | `undefined` | Reference to a markdown file in `src/content/details/` |
-
-**Note:** Either `summary` must be provided, or `name` must reference a markdown file with a `title` in its frontmatter.
-
-## Creating Named Content Files
-
-1. Create a new `.md` file in `site/src/content/details/`
-2. Add a `title` in the frontmatter for the summary text
-3. Write your markdown content
-4. Reference it using the `name` prop (without the `.md` extension)
-
-Example:
-
-```bash
-# Create the file
-cat > site/src/content/details/api-notes.md << EOF
----
-title: API Authentication Notes
----
-
-**API Note:** This endpoint requires authentication.
-EOF
-```
-
-```astro
-<!-- Use it (title from frontmatter is used automatically) -->
-<Details name="api-notes" />
-
-<!-- Or override the title with a custom summary -->
-<Details summary="Custom summary" name="api-notes" />
-```
-
-## Styling
-
-The Details component has a simple, unified style:
-- `.bd-details` - Base class with neutral, theme-aware styling
-- Uses Bootstrap's tertiary background color
-- Automatically adapts to light and dark modes
-
-The styling is defined in `site/src/scss/_details.scss`.
-
-## Examples
-
-See the [Docs Reference](/docsref/) page for live examples of the Details component in action.
-
-## When to Use
-
-**Use Details when:**
-- Content is supplementary and doesn't need to be immediately visible
-- You want to reduce visual clutter on the page
-- Information is relevant but not critical to understanding the main content
-- You're documenting edge cases, advanced tips, or optional information
-
-**Use Callout instead when:**
-- Information must be immediately visible
-- Content is critical to user success
-- You want to draw immediate attention to important information

site/src/components/shortcodes/Details.astro

@@ -1,59 +0,0 @@
----
-import { getDetailsByName } from '@libs/content'
-import type { MarkdownInstance } from 'astro'
-
-interface Props {
-  /**
-   * The name of an existing details content to display located in `src/content/details`.
-   * This will override any content passed in via the default slot.
-   */
-  name?:
-    | 'danger-example'
-    | 'info-example'
-    | 'warning-color-assistive-technologies'
-    | 'warning-example'
-  /**
-   * The summary text displayed before the details are expanded.
-   * If not provided and `name` is set, will use the `title` from the markdown frontmatter.
-   */
-  summary?: string
-}
-
-const { name } = Astro.props
-let { summary } = Astro.props
-
-let Content: MarkdownInstance<{}>['Content'] | undefined
-
-if (name) {
-  const details = await getDetailsByName(name) as any
-
-  if (!details) {
-    throw new Error(`Could not find details with name '${name}'.`)
-  }
-
-  // Use title from frontmatter if summary is not provided
-  if (!summary && details.data?.title) {
-    summary = details.data.title
-  }
-
-  const namedDetails = await details.render() as any
-  Content = namedDetails.Content
-}
-
-// Ensure summary is always provided
-if (!summary) {
-  throw new Error('Details component requires either a `summary` prop or a `title` in the markdown frontmatter.')
-}
----
-
-<details class="bd-details">
-  <summary class="bd-details-summary">
-    <svg class="bd-details-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-      <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
-    </svg>
-    {summary}
-  </summary>
-  <div class="bd-details-content">
-    {Content ? <Content /> : <slot />}
-  </div>
-</details>

site/src/components/shortcodes/Swatch.astro

@@ -5,10 +5,11 @@ export interface Props {
   size?: 'inline' | 'medium' | 'large'
   contrast?: string
   contrastDark?: string
+  cssVar?: string
   showVar?: boolean
 }
 
-const { bg, fg, size = 'inline', contrast, contrastDark, showVar = true } = Astro.props
+const { bg, fg, size = 'inline', contrast, contrastDark, cssVar, showVar = true } = Astro.props
 
 // Styles for different sizes
 const baseStyles = {
@@ -54,8 +55,8 @@ const contrastStyles = {
 
 const combinedStyles = { ...baseStyles, ...sizeStyles[size] }
 
-// Use bg prop as the CSS variable name
-const displayCssVar = bg
+// Determine which CSS variable to display
+const displayCssVar = cssVar || bg
 ---
 
 <style>
@@ -80,6 +81,8 @@ const displayCssVar = bg
   /* 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);
   }
 
@@ -109,10 +112,10 @@ const displayCssVar = bg
       {contrastDark && <span style={{...contrastStyles, color: isLowContrastDark ? 'red' : 'inherit'}} class="contrast-dark">{contrastDark}</span>}
     </span>
     {showVar && displayCssVar && (
-      <code class="css-var" data-css-var={`--bs-${displayCssVar}`}>
+      <span class="css-var" data-css-var={`--bs-${displayCssVar}`}>
         <span class="css-var-light">Loading...</span>
         <span class="css-var-dark">Loading...</span>
-      </code>
+      </span>
     )}
   </>
 ) : size === 'large' ? (