Combine original z-index content with approach content

Co-authored-by: mdo <98681+mdo@users.noreply.github.com>

.bundlewatch.config.json

@@ -2,15 +2,15 @@
   "files": [
     {
       "path": "./dist/css/bootstrap-grid.css",
-      "maxSize": "9.00 kB"
+      "maxSize": "10.0 kB"
     },
     {
       "path": "./dist/css/bootstrap-grid.min.css",
-      "maxSize": "8.25 kB"
+      "maxSize": "9.0 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.css",
-      "maxSize": "5.0 kB"
+      "maxSize": "5.5 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.min.css",
@@ -18,11 +18,11 @@
     },
     {
       "path": "./dist/css/bootstrap-utilities.css",
-      "maxSize": "13.5 kB"
+      "maxSize": "15.25 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
-      "maxSize": "12.0 kB"
+      "maxSize": "13.5 kB"
     },
     {
       "path": "./dist/css/bootstrap.css",

.cspell.json

@@ -48,6 +48,7 @@
     "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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/init@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
         with:
           config-file: ./.github/codeql/codeql-config.yml
           languages: "javascript"
           queries: +security-and-quality
 
       - name: Autobuild
-        uses: github/codeql-action/autobuild@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/autobuild@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/analyze@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
         with:
           category: "/language:javascript"

.github/workflows/cspell.yml

@@ -28,7 +28,7 @@ jobs:
           persist-credentials: false
 
       - name: Run cspell
-        uses: streetsidesoftware/cspell-action@dcd03dc3e8a59ec2e360d0c62db517baa0b4bb6d # v7.2.0
+        uses: streetsidesoftware/cspell-action@3294df585d3d639e30f3bc019cb11940b9866e95 # v8.0.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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@3d5ba091319fa7b0ac14703761eebb7d100e6f6d # v1.11.0
+        uses: JustinBeckwith/linkinator-action@af984b9f30f63e796ae2ea5be5e07cb587f1bbd9 # v2.3
         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@45d75b6cf72bf4f254be6230cb887ad002702491 # v3.6.3
+        uses: actions-cool/issues-helper@9861779a695cf1898bd984c727f685f351cfc372 # v3.7.2
         with:
           actions: "close-issues"
           labels: "awaiting-reply"

.github/workflows/issue-labeled.yml

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

.github/workflows/js.yml

@@ -30,7 +30,7 @@ jobs:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.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@05b42c624433fc40578a4040d5cf5e36ddca8cde # v2.4.2
+        uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
         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@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
         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@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
+        uses: github/codeql-action/upload-sarif@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
         with:
           sarif_file: results.sarif

.gitignore

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

README.md

@@ -87,34 +87,18 @@ 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.rtl.css
-  │   ├── bootstrap.rtl.css.map
-  │   ├── bootstrap.rtl.min.css
-  │   └── bootstrap.rtl.min.css.map
+  │   └── bootstrap.min.css.map
   └── js/
       ├── bootstrap.bundle.js
       ├── bootstrap.bundle.js.map
@@ -131,7 +115,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/).
+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.
 
 
 ## Bugs and feature requests

build/generate-sri.mjs

@@ -29,10 +29,6 @@ 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

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

@@ -0,0 +1,112 @@
+// 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,8 +10,7 @@ export default context => {
     plugins: {
       autoprefixer: {
         cascade: false
-      },
-      rtlcss: context.env === 'RTL'
+      }
     }
   }
 }

config.yml

@@ -36,8 +36,6 @@ 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,19 +41,17 @@
   "scripts": {
     "start": "npm-run-all --parallel watch docs-serve",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
-    "css": "npm-run-all css-compile css-prefix css-rtl css-minify",
+    "css": "npm-run-all css-compile css-prefix css-minify css-docs",
     "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-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-docs": "node build/generate-utilities-json.mjs",
     "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/*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-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-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*",
-    "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
+    "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.tmp.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-*",
@@ -95,7 +93,6 @@
     "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\"",
@@ -108,31 +105,31 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.4",
-    "@astrojs/markdown-remark": "^6.3.6",
-    "@astrojs/mdx": "^4.3.5",
+    "@astrojs/check": "^0.9.5",
+    "@astrojs/markdown-remark": "^6.3.8",
+    "@astrojs/mdx": "^4.3.10",
     "@astrojs/prism": "^3.3.0",
     "@astrojs/sitemap": "^3.6.0",
     "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
     "@docsearch/js": "^3.9.0",
     "@popperjs/core": "^2.11.8",
-    "@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",
+    "@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",
     "@stackblitz/sdk": "^1.11.0",
     "@types/js-yaml": "^4.0.9",
     "@types/mime": "^4.0.0",
     "@types/prismjs": "^1.26.5",
-    "astro": "^5.13.9",
-    "astro-auto-import": "^0.4.4",
-    "autoprefixer": "^10.4.21",
+    "astro": "^5.15.6",
+    "astro-auto-import": "^0.4.5",
+    "autoprefixer": "^10.4.22",
     "bundlewatch": "^0.4.1",
     "clean-css-cli": "^5.6.3",
     "clipboard": "^2.0.11",
-    "cross-env": "^10.0.0",
+    "cross-env": "^10.1.0",
     "eslint": "8.57.1",
     "eslint-config-xo": "0.45.0",
     "eslint-plugin-html": "^8.1.3",
@@ -141,14 +138,14 @@
     "eslint-plugin-unicorn": "56.0.1",
     "find-unused-sass-variables": "^6.1.0",
     "github-slugger": "^2.0.0",
-    "globby": "^14.1.0",
+    "globby": "^15.0.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.10.0",
-    "js-yaml": "^4.1.0",
+    "jasmine": "^5.12.0",
+    "js-yaml": "^4.1.1",
     "karma": "^6.4.4",
     "karma-browserstack-launcher": "1.4.0",
     "karma-chrome-launcher": "^3.2.0",
@@ -161,7 +158,7 @@
     "lockfile-lint": "^4.14.1",
     "markdownlint-cli": "^0.45.0",
     "mime": "^4.1.0",
-    "nodemon": "^3.1.10",
+    "nodemon": "^3.1.11",
     "npm-run-all2": "^8.0.4",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
@@ -170,17 +167,16 @@
     "rehype-autolink-headings": "^7.1.0",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",
-    "rollup": "^4.52.0",
+    "rollup": "^4.53.2",
     "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.24.0",
+    "stylelint": "^16.25.0",
     "stylelint-config-twbs-bootstrap": "^16.1.0",
-    "terser": "^5.44.0",
+    "terser": "^5.44.1",
     "unist-util-visit": "^5.0.0",
-    "zod": "^4.1.9"
+    "zod": "^4.1.12"
   },
   "files": [
     "dist/{css,js}/*.{css,js,map}",
@@ -206,5 +202,8 @@
     "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}body-color) !default;
-$accordion-bg:                            var(--#{$prefix}body-bg) !default;
+$accordion-color:                         var(--#{$prefix}color-body) !default;
+$accordion-bg:                            var(--#{$prefix}bg-body) !default;
 $accordion-border-width:                  var(--#{$prefix}border-width) !default;
 $accordion-border-color:                  var(--#{$prefix}border-color) !default;
 $accordion-border-radius:                 var(--#{$prefix}border-radius-lg) !default;
@@ -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: left; // Reset button style
+    text-align: start; // 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-left: auto;
+      margin-inline-start: 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-top: 0;
+      border-block-start: 0;
     }
 
     // Only set a border-radius on the last item if the accordion is collapsed
@@ -159,12 +159,11 @@ $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w
 
   .accordion-flush {
     > .accordion-item {
-      border-right: 0;
-      border-left: 0;
+      border-inline: 0;
       @include border-radius(0);
 
-      &:first-child { border-top: 0; }
-      &:last-child { border-bottom: 0; }
+      &:first-child { border-block-start: 0; }
+      &:last-child { border-block-end: 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: transparent;
+    --#{$prefix}alert-bg: var(--#{$prefix}theme-bg-subtle, transparent);
     --#{$prefix}alert-padding-x: #{$alert-padding-x};
     --#{$prefix}alert-padding-y: #{$alert-padding-y};
     --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
-    --#{$prefix}alert-color: inherit;
+    --#{$prefix}alert-color: var(--#{$prefix}theme-text, inherit);
     --#{$prefix}alert-border-color: transparent;
-    --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
+    --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}theme-border, var(--#{$prefix}alert-border-color));
     --#{$prefix}alert-border-radius: #{$alert-border-radius};
     --#{$prefix}alert-link-color: inherit;
     // scss-docs-end alert-css-vars
 
     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-right: $alert-dismissible-padding-r;
+    padding-inline-end: $alert-dismissible-padding-r;
 
     // Adjust close link position
     .btn-close {
@@ -66,17 +66,4 @@ $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,6 +1,7 @@
 @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 *;
@@ -8,9 +9,9 @@
 // scss-docs-start badge-variables
 $badge-font-size:                   .75em !default;
 $badge-font-weight:                 $font-weight-bold !default;
-$badge-color:                       $white !default;
+$badge-color:                       inherit !default;
 $badge-padding-y:                   .35em !default;
-$badge-padding-x:                   .65em !default;
+$badge-padding-x:                   .5em !default;
 $badge-border-radius:               var(--#{$prefix}border-radius) !default;
 // scss-docs-end badge-variables
 
@@ -21,7 +22,8 @@ $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: #{$badge-color};
+    --#{$prefix}badge-color: var(--#{$prefix}theme-contrast, #{$badge-color});
+    --#{$prefix}badge-bg: var(--#{$prefix}theme-bg, var(--#{$prefix}bg-2));
     --#{$prefix}badge-border-radius: #{$badge-border-radius};
     // scss-docs-end badge-css-vars
 
@@ -34,6 +36,7 @@ $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();
 
@@ -48,4 +51,9 @@ $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,16 +46,20 @@ $breadcrumb-border-radius:          null !default;
   .breadcrumb-item {
     // The separator between breadcrumbs (by default, a forward-slash: "/")
     + .breadcrumb-item {
-      padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
+      padding-inline-start: var(--#{$prefix}breadcrumb-item-padding-x);
 
       &::before {
-        float: left; // Suppress inline spacings and underlining of the separator
-        padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
+        float: inline-start; // Suppress inline spacings and underlining of the separator
+        padding-inline-end: var(--#{$prefix}breadcrumb-item-padding-x);
         color: var(--#{$prefix}breadcrumb-divider-color);
-        content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
+        content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider));
       }
     }
 
+    [dir="rtl"] &:not(:first-child)::before {
+      content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped));
+    }
+
     &.active {
       color: var(--#{$prefix}breadcrumb-item-active-color);
     }

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}body-bg) !default;
+$card-bg:                           var(--#{$prefix}bg-body) !default;
 $card-img-overlay-padding:          $spacer !default;
 $card-group-margin:                 $grid-gutter-width * .5 !default;
 // scss-docs-end card-variables
@@ -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}body-color);
+    color: var(--#{$prefix}color-body);
     word-wrap: break-word;
     background-color: var(--#{$prefix}card-bg);
     background-clip: border-box;
@@ -64,21 +64,19 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     @include box-shadow(var(--#{$prefix}card-box-shadow));
 
     > hr {
-      margin-right: 0;
-      margin-left: 0;
+      margin-inline: 0;
     }
 
     > .list-group {
-      border-top: inherit;
-      border-bottom: inherit;
+      border-block: inherit;
 
       &:first-child {
-        border-top-width: 0;
+        border-block-start-width: 0;
         @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
       }
 
       &:last-child  {
-        border-bottom-width: 0;
+        border-block-end-width: 0;
         @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
       }
     }
@@ -87,7 +85,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-top: 0;
+      border-block-start: 0;
     }
   }
 
@@ -116,11 +114,11 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 
   .card-link {
     &:hover {
-      text-decoration: if($link-hover-decoration == underline, none, null);
+      text-decoration: none;
     }
 
     + .card-link {
-      margin-left: var(--#{$prefix}card-spacer-x);
+      margin-inline-start: var(--#{$prefix}card-spacer-x);
     }
   }
 
@@ -133,7 +131,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-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+    border-block-end: 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);
@@ -144,7 +142,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-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+    border-block-start: 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));
@@ -157,29 +155,24 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
   //
 
   .card-header-tabs {
-    margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+    margin-inline: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
     margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y));
-    margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
-    border-bottom: 0;
+    border-block-end: 0;
 
     .nav-link.active {
       background-color: var(--#{$prefix}card-bg);
-      border-bottom-color: var(--#{$prefix}card-bg);
+      border-block-end-color: var(--#{$prefix}card-bg);
     }
   }
 
   .card-header-pills {
-    margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
-    margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+    margin-inline: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
   }
 
   // Card image
   .card-img-overlay {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     padding: var(--#{$prefix}card-img-overlay-padding);
     @include border-radius(var(--#{$prefix}card-inner-border-radius));
   }
@@ -222,8 +215,8 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
         margin-bottom: 0;
 
         + .card {
-          margin-left: 0;
-          border-left: 0;
+          margin-inline-start: 0;
+          border-inline-start: 0;
         }
 
         // Handle rounded corners
@@ -233,13 +226,11 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 
             > .card-img-top,
             > .card-header {
-              // stylelint-disable-next-line property-disallowed-list
-              border-top-right-radius: 0;
+              border-start-end-radius: 0;
             }
             > .card-img-bottom,
             > .card-footer {
-              // stylelint-disable-next-line property-disallowed-list
-              border-bottom-right-radius: 0;
+              border-end-end-radius: 0;
             }
           }
 
@@ -248,13 +239,11 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 
             > .card-img-top,
             > .card-header {
-              // stylelint-disable-next-line property-disallowed-list
-              border-top-left-radius: 0;
+              border-start-start-radius: 0;
             }
             > .card-img-bottom,
             > .card-footer {
-              // stylelint-disable-next-line property-disallowed-list
-              border-bottom-left-radius: 0;
+              border-end-start-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: left;
+    float: inline-start;
     width: 100%;
-    margin-right: -100%;
+    margin-inline-end: -100%;
     backface-visibility: hidden;
     @include transition($carousel-transition);
   }
@@ -133,8 +133,7 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
   .carousel-control-prev,
   .carousel-control-next {
     position: absolute;
-    top: 0;
-    bottom: 0;
+    inset-block: 0;
     z-index: 1;
     // Use flex for alignment (1-3)
     display: flex; // 1. allow flex styles
@@ -160,11 +159,11 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
     }
   }
   .carousel-control-prev {
-    left: 0;
+    inset-inline-start: 0;
     background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
   }
   .carousel-control-next {
-    right: 0;
+    inset-inline-end: 0;
     background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
   }
 
@@ -180,10 +179,19 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
   }
 
   .carousel-control-prev-icon {
-    background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
+    background-image: escape-svg($carousel-control-prev-icon-bg);
   }
+
+  [dir="rtl"] .carousel-control-prev-icon {
+    background-image: escape-svg($carousel-control-next-icon-bg);
+  }
+
   .carousel-control-next-icon {
-    background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
+    background-image: escape-svg($carousel-control-next-icon-bg);
+  }
+
+  [dir="rtl"] .carousel-control-next-icon {
+    background-image: escape-svg($carousel-control-prev-icon-bg);
   }
 
   // Optional indicator pips/controls
@@ -193,17 +201,14 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
 
   .carousel-indicators {
     position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: auto 0 0;
     z-index: 2;
     display: flex;
     justify-content: center;
     padding: 0;
     // Use the .carousel-control's width as margin so we don't overlay those
-    margin-right: $carousel-control-width;
+    margin-inline: $carousel-control-width;
     margin-bottom: 1rem;
-    margin-left: $carousel-control-width;
 
     [data-bs-target] {
       box-sizing: content-box;
@@ -211,16 +216,14 @@ $carousel-control-icon-filter-dark:   invert(1) grayscale(100) !default;
       width: $carousel-indicator-width;
       height: $carousel-indicator-height;
       padding: 0;
-      margin-right: $carousel-indicator-spacer;
-      margin-left: $carousel-indicator-spacer;
+      margin-inline: $carousel-indicator-spacer;
       text-indent: -999px;
       cursor: pointer;
       background-color: var(--#{$prefix}carousel-indicator-active-bg);
       background-clip: padding-box;
       border: 0;
       // Use transparent borders to increase the hit area by 10px on top and bottom.
-      border-top: $carousel-indicator-hit-area-height solid transparent;
-      border-bottom: $carousel-indicator-hit-area-height solid transparent;
+      border-block: $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 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}-025: color-mix(in lab, #fff 94%, #{$hue});
+    --#{$prefix}#{$color}-050: color-mix(in lab, #fff 90%, #{$hue});
+    --#{$prefix}#{$color}-100: color-mix(in lab, #fff 80%, #{$hue});
+    --#{$prefix}#{$color}-200: color-mix(in lab, #fff 60%, #{$hue});
+    --#{$prefix}#{$color}-300: color-mix(in lab, #fff 40%, #{$hue});
+    --#{$prefix}#{$color}-400: color-mix(in lab, #fff 20%, #{$hue});
     --#{$prefix}#{$color}-500: #{$hue};
-    --#{$prefix}#{$color}-600: color-mix(in 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});
+    --#{$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});
   }
 }
 

scss/_config.scss

@@ -42,6 +42,21 @@ $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}body-color) !default;
-$dropdown-bg:                       var(--#{$prefix}body-bg) !default;
+$dropdown-color:                    var(--#{$prefix}color-body) !default;
+$dropdown-bg:                       var(--#{$prefix}bg-body) !default;
 $dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
 $dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
 $dropdown-border-width:             var(--#{$prefix}border-width) !default;
@@ -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}body-color) !default;
+$dropdown-link-color:               var(--#{$prefix}color-body) !default;
 $dropdown-link-hover-color:         $dropdown-link-color !default;
 $dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg) !default;
 
@@ -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: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+    text-align: start; // Ensures proper alignment if parent has it changed (e.g., modal footer)
     list-style: none;
     background-color: var(--#{$prefix}dropdown-bg);
     background-clip: padding-box;
@@ -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-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
+    border-block-start: 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: if($link-decoration == none, null, none);
+    text-decoration: none;
     white-space: nowrap; // prevent links from randomly breaking onto new lines
     background-color: transparent; // For `<button>`s
     border: 0; // For `<button>`s
@@ -250,14 +250,12 @@ $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,6 +105,23 @@
   @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}body-color) !default;
-$list-group-bg:                     var(--#{$prefix}body-bg) !default;
+$list-group-color:                  var(--#{$prefix}color-body) !default;
+$list-group-bg:                     var(--#{$prefix}bg-body) !default;
 $list-group-border-color:           var(--#{$prefix}border-color) !default;
 $list-group-border-width:           var(--#{$prefix}border-width) !default;
 $list-group-border-radius:          var(--#{$prefix}border-radius) !default;
@@ -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}body-color) !default;
+$list-group-action-active-color:    var(--#{$prefix}color-body) !default;
 $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
 // scss-docs-end list-group-variables
 
@@ -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-left: 0; // reset padding because ul and ol
+    padding-inline-start: 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}list-group-color);
+    color: var(--#{$prefix}theme-text, var(--#{$prefix}list-group-color));
     text-decoration: if($link-decoration == none, null, none);
-    background-color: var(--#{$prefix}list-group-bg);
-    border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
+    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));
 
     &: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-top-width: 0;
+      border-block-start-width: 0;
 
       &.active {
         margin-top: calc(-1 * var(--#{$prefix}list-group-border-width));
-        border-top-width: var(--#{$prefix}list-group-border-width);
+        border-block-start-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}list-group-action-color);
+    color: var(--#{$prefix}theme-text, 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}list-group-action-hover-color);
+        color: var(--#{$prefix}theme-text-emphasis, var(--#{$prefix}list-group-action-hover-color));
         text-decoration: none;
-        background-color: var(--#{$prefix}list-group-action-hover-bg);
+        background-color: var(--#{$prefix}theme-bg-muted, var(--#{$prefix}list-group-action-hover-bg));
       }
 
       &:active {
-        color: var(--#{$prefix}list-group-action-active-color);
-        background-color: var(--#{$prefix}list-group-action-active-bg);
+        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));
       }
     }
   }
@@ -175,12 +175,12 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
           }
 
           + .list-group-item {
-            border-top-width: var(--#{$prefix}list-group-border-width);
-            border-left-width: 0;
+            border-block-start-width: var(--#{$prefix}list-group-border-width);
+            border-inline-start-width: 0;
 
             &.active {
-              margin-left: calc(-1 * var(--#{$prefix}list-group-border-width));
-              border-left-width: var(--#{$prefix}list-group-border-width);
+              margin-inline-start: calc(-1 * var(--#{$prefix}list-group-border-width));
+              border-inline-start-width: var(--#{$prefix}list-group-border-width);
             }
           }
         }
@@ -201,31 +201,8 @@ $list-group-action-active-bg:       var(--#{$prefix}secondary-bg) !default;
       border-width: 0 0 var(--#{$prefix}list-group-border-width);
 
       &:last-child {
-        border-bottom-width: 0;
+        border-block-end-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,8 +42,7 @@
     // scss-docs-end modal-css-vars
 
     position: fixed;
-    top: 0;
-    left: 0;
+    inset: 0 auto auto 0;
     z-index: var(--#{$prefix}modal-zindex);
     display: none;
     width: 100%;
@@ -136,16 +135,16 @@
     flex-shrink: 0;
     align-items: center;
     padding: var(--#{$prefix}modal-header-padding);
-    border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
+    border-block-end: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
     @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
 
     .btn-close {
       padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
       // Split properties to avoid invalid calc() function if value is 0
+      margin-inline-start: auto;
+      margin-inline-end: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
       margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
-      margin-right: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
       margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
-      margin-left: auto;
     }
   }
 
@@ -174,7 +173,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-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
+    border-block-start: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
     @include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
 
     // Place margin between footer elements
@@ -195,8 +194,7 @@
     // Automatically set modal's width for larger viewports
     .modal-dialog {
       max-width: var(--#{$prefix}modal-width);
-      margin-right: auto;
-      margin-left: auto;
+      margin-inline: 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}body-bg) !default;
+$nav-tabs-link-active-bg:           var(--#{$prefix}bg-body) !default;
 $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
 
 $nav-pills-border-radius:           var(--#{$prefix}border-radius) !default;
@@ -52,7 +52,7 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
 
     display: flex;
     flex-wrap: wrap;
-    padding-left: 0;
+    padding-inline-start: 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: if($link-decoration == none, null, none);
+    text-decoration: none;
     background: none;
     border: 0;
     @include transition($nav-link-transition);
@@ -71,7 +71,6 @@ $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 {
@@ -103,7 +102,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-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
+    border-block-end: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
 
     .nav-link {
       margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
@@ -171,13 +170,12 @@ $nav-underline-link-active-color:   var(--#{$prefix}emphasis-color) !default;
     gap: var(--#{$prefix}nav-underline-gap);
 
     .nav-link {
-      padding-right: 0;
-      padding-left: 0;
-      border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
+      padding-inline: 0;
+      border-block-end: var(--#{$prefix}nav-underline-border-width) solid transparent;
 
       &:hover,
       &:focus {
-        border-bottom-color: currentcolor;
+        border-block-end-color: currentcolor;
       }
     }
 
@@ -185,7 +183,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-bottom-color: currentcolor;
+      border-block-end-color: currentcolor;
     }
   }
 

scss/_navbar.scss

@@ -120,16 +120,15 @@ $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-right: var(--#{$prefix}navbar-brand-margin-end);
+    margin-inline-end: var(--#{$prefix}navbar-brand-margin-end);
     @include font-size(var(--#{$prefix}navbar-brand-font-size));
     color: var(--#{$prefix}navbar-brand-color);
-    text-decoration: if($link-decoration == none, null, none);
+    text-decoration: none;
     white-space: nowrap;
 
     &:hover,
     &:focus {
       color: var(--#{$prefix}navbar-brand-hover-color);
-      text-decoration: if($link-hover-decoration == underline, none, null);
     }
   }
 
@@ -152,7 +151,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-left: 0;
+    padding-inline-start: 0;
     margin-bottom: 0;
     list-style: none;
 
@@ -265,8 +264,7 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
             }
 
             .nav-link {
-              padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
-              padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
+              padding-inline: var(--#{$prefix}navbar-nav-link-padding-x);
             }
           }
 

scss/_offcanvas.scss

@@ -57,7 +57,7 @@
           top: 0;
           left: 0;
           width: var(--#{$prefix}offcanvas-width);
-          border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-inline-end: 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-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-inline-start: 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-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-block-end: 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-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
+          border-block-start: 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}body-bg) !default;
+$pagination-bg:                     var(--#{$prefix}bg-body) !default;
 $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
 $pagination-border-width:           var(--#{$prefix}border-width) !default;
 $pagination-margin-start:           calc(-1 * #{$pagination-border-width}) !default;
@@ -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: if($link-decoration == none, null, none);
+    text-decoration: none;
     background-color: var(--#{$prefix}pagination-bg);
     border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
     @include transition($pagination-transition);
@@ -99,7 +99,6 @@ $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);
     }
@@ -131,7 +130,7 @@ $pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
 
   .page-item {
     &:not(:first-child) .page-link {
-      margin-left: $pagination-margin-start;
+      margin-inline-start: $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}body-bg) !default;
+$popover-bg:                        var(--#{$prefix}bg-body) !default;
 $popover-max-width:                 276px !default;
 $popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
@@ -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}body-color) !default;
+$popover-body-color:                var(--#{$prefix}color-body) !default;
 $popover-body-padding-y:            $spacer !default;
 $popover-body-padding-x:            $spacer !default;
 
@@ -97,17 +97,16 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         bottom: 0;
-        border-top-color: var(--#{$prefix}popover-arrow-border);
+        border-block-start-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         bottom: var(--#{$prefix}popover-border-width);
-        border-top-color: var(--#{$prefix}popover-bg);
+        border-block-start-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));
@@ -121,18 +120,16 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         left: 0;
-        border-right-color: var(--#{$prefix}popover-arrow-border);
+        border-inline-end-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         left: var(--#{$prefix}popover-border-width);
-        border-right-color: var(--#{$prefix}popover-bg);
+        border-inline-end-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));
@@ -144,12 +141,12 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         top: 0;
-        border-bottom-color: var(--#{$prefix}popover-arrow-border);
+        border-block-end-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         top: var(--#{$prefix}popover-border-width);
-        border-bottom-color: var(--#{$prefix}popover-bg);
+        border-block-end-color: var(--#{$prefix}popover-bg);
       }
     }
 
@@ -160,13 +157,12 @@ $popover-arrow-height:              .5rem !default;
       left: 50%;
       display: block;
       width: var(--#{$prefix}popover-arrow-width);
-      margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width));
+      margin-inline-start: calc(-.5 * var(--#{$prefix}popover-arrow-width));
       content: "";
-      border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
+      border-block-end: 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));
@@ -180,18 +176,16 @@ $popover-arrow-height:              .5rem !default;
 
       &::before {
         right: 0;
-        border-left-color: var(--#{$prefix}popover-arrow-border);
+        border-inline-start-color: var(--#{$prefix}popover-arrow-border);
       }
 
       &::after {
         right: var(--#{$prefix}popover-border-width);
-        border-left-color: var(--#{$prefix}popover-bg);
+        border-inline-start-color: var(--#{$prefix}popover-bg);
       }
     }
   }
 
-  /* rtl:end:ignore */
-
   .bs-popover-auto {
     &[data-popper-placement^="top"] {
       @extend .bs-popover-top;
@@ -214,7 +208,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-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
+    border-block-end: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
     @include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
 
     &:empty {

scss/_root.scss

@@ -23,15 +23,15 @@
   }
 
   @each $color, $value in $theme-bgs {
-    --#{$prefix}#{$color}: #{$value};
+    --#{$prefix}bg-#{$color}: #{$value};
   }
 
   @each $color, $value in $theme-fgs {
-    --#{$prefix}#{$color}: #{$value};
+    --#{$prefix}color-#{$color}: #{$value};
   }
 
   @each $color, $value in $theme-borders {
-    --#{$prefix}#{$color}: #{$value};
+    --#{$prefix}border-#{$color}: #{$value};
   }
 
   --#{$prefix}black: #{$black};
@@ -41,6 +41,8 @@
 
 :root,
 [data-bs-theme="light"] {
+  color-scheme: light;
+
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   --#{$prefix}white-rgb: #{to-rgb($white)};
@@ -61,9 +63,33 @@
   }
   --#{$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-sm: calc(#{$font-size-base} * .9285);
+  // --#{$prefix}font-size-lg: calc(#{$font-size-base} * 1.285);
+
+  --#{$prefix}font-size-xs: clamp(.75rem, .7rem + .25vw, .875rem);
+  --#{$prefix}font-size-sm: clamp(.875rem, .8rem + .375vw, 1rem);
+  --#{$prefix}font-size-md: clamp(1rem, .9rem + .5vw, 1.125rem);
+  --#{$prefix}font-size-lg: clamp(1.25rem, 1rem + .625vw, 1.5rem);
+  --#{$prefix}font-size-xl: clamp(1.5rem, 1.1rem + .75vw, 1.75rem);
+  --#{$prefix}font-size-2xl: clamp(1.75rem, 1.3rem + 1vw, 2.25rem);
+  --#{$prefix}font-size-3xl: clamp(2rem, 1.5rem + 1.875vw, 2.5rem);
+  --#{$prefix}font-size-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
+  --#{$prefix}font-size-5xl: clamp(3rem, 2rem + 5vw, 4rem);
+  --#{$prefix}font-size-6xl: clamp(3.75rem, 2.5rem + 6.25vw, 5rem);
+
+  --#{$prefix}line-height-xs: 1.5;
+  --#{$prefix}line-height-sm: 1.5;
+  --#{$prefix}line-height-md: 1.5;
+  --#{$prefix}line-height-lg: 1.5;
+  --#{$prefix}line-height-xl: calc(2.5 / 1.75);
+  --#{$prefix}line-height-2xl: calc(3 / 2.25);
+  --#{$prefix}line-height-3xl: 1.2;
+  --#{$prefix}line-height-4xl: 1.1;
+  --#{$prefix}line-height-5xl: 1.1;
+  --#{$prefix}line-height-6xl: 1;
+  // scss-docs-end root-font-size-variables
 
   @include rfs($font-size-base, --#{$prefix}body-font-size);
   --#{$prefix}body-font-weight: #{$font-weight-base};
@@ -87,9 +113,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};
@@ -119,10 +145,6 @@
   --#{$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};
@@ -174,23 +196,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};
 
@@ -200,8 +222,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) #{"/* rtl:ignore */"}; }
+    to { transform: rotate(360deg); }
   }
   // 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-right-color: transparent;
+    border-inline-end-color: transparent;
   }
 
   .spinner-border-sm {

scss/_theme.scss

@@ -15,6 +15,35 @@
   @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 {
@@ -32,90 +61,101 @@
 $new-theme-colors: (
   "primary": (
     "base": 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)),
+    "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),
     "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-300)) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-400)) 50%, var(--#{$prefix}bg-body)),
     "contrast": var(--#{$prefix}white)
   ),
   "accent": (
     "base": 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)),
+    "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),
     "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-300)) 50%, var(--#{$prefix}bg)),
+    "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)),
     "contrast": var(--#{$prefix}white)
   ),
   "danger": (
     "base": 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)),
+    "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),
     "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-300)) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-400)) 50%, var(--#{$prefix}bg-body)),
     "contrast": var(--#{$prefix}white)
   ),
   "warning": (
     "base": 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)),
+    "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),
     "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-300)) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-400)) 50%, var(--#{$prefix}bg-body)),
     "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-300)),
-    "bg": light-dark(var(--#{$prefix}cyan-500), 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),
     "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-300)) 50%, var(--#{$prefix}bg)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-400)) 50%, var(--#{$prefix}bg-body)),
     "contrast": var(--#{$prefix}gray-900)
   ),
-  "emphasis": (
+  "inverse": (
     "base": var(--#{$prefix}gray-900),
-    "text": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
-    "bg": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
-    "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-950)),
-    "bg-muted": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
-    "border": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
-    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)) 50%, var(--#{$prefix}bg)),
+    "text": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-200)),
+    "text-emphasis": light-dark(var(--#{$prefix}gray-975), var(--#{$prefix}white)),
+    "bg": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-025)),
+    "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)),
+    "bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)),
+    "border": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-100)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)) 50%, var(--#{$prefix}bg-body)),
     "contrast": light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900))
   ),
   "secondary": (
-    "base": var(--#{$prefix}gray-300),
+    "base": var(--#{$prefix}gray-200),
     "text": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
-    "bg": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
-    "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
-    "bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
+    "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)),
     "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)),
+    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-300)) 50%, var(--#{$prefix}bg-body)),
     "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: (
-  null: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-975)),
+  "body": light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-975)),
   "1": light-dark(var(--#{$prefix}gray-025), var(--#{$prefix}gray-950)),
   "2": light-dark(var(--#{$prefix}gray-050), var(--#{$prefix}gray-900)),
   "3": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
@@ -126,31 +166,34 @@ $theme-bgs: (
 ) !default;
 
 $theme-fgs: (
-  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)),
+  "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)),
   "white": var(--#{$prefix}white),
   "black": var(--#{$prefix}black),
   "inherit": inherit,
 ) !default;
 
 $theme-borders: (
-  null: light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-700)),
+  "bg": var(--#{$prefix}bg-body),
+  "body": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-800)),
   "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-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
+    border-block-end: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
     @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
 
     .btn-close {
-      margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x));
-      margin-left: var(--#{$prefix}toast-padding-x);
+      margin-inline-start: var(--#{$prefix}toast-padding-x);
+      margin-inline-end: calc(-.5 * 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}body-bg) !default;
-$tooltip-bg:                        var(--#{$prefix}body-color) !default;
+$tooltip-color:                     var(--#{$prefix}bg-body) !default;
+$tooltip-bg:                        var(--#{$prefix}color-body) !default;
 $tooltip-border-radius:             var(--#{$prefix}border-radius) !default;
 $tooltip-opacity:                   .9 !default;
 $tooltip-padding-y:                 $spacer * .25 !default;
@@ -82,11 +82,10 @@ $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-top-color: var(--#{$prefix}tooltip-bg);
+      border-block-start-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);
@@ -95,23 +94,20 @@ $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-right-color: var(--#{$prefix}tooltip-bg);
+      border-inline-end-color: var(--#{$prefix}tooltip-bg);
     }
   }
 
-  /* rtl:end:ignore */
-
   .bs-tooltip-bottom .tooltip-arrow {
     top: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
 
     &::before {
       bottom: -1px;
       border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
-      border-bottom-color: var(--#{$prefix}tooltip-bg);
+      border-block-end-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);
@@ -120,12 +116,10 @@ $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-left-color: var(--#{$prefix}tooltip-bg);
+      border-inline-start-color: var(--#{$prefix}tooltip-bg);
     }
   }
 
-  /* rtl:end:ignore */
-
   .bs-tooltip-auto {
     &[data-popper-placement^="top"] {
       @extend .bs-tooltip-top;

scss/_utilities.scss

@@ -6,7 +6,6 @@
 @use "theme" as *;
 
 // add:
-// - placeItems
 // - double check css grid helpers
 //
 // update:
@@ -92,10 +91,8 @@ $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
@@ -122,7 +119,6 @@ $utilities: map.merge(
     // scss-docs-start utils-position
     "position": (
       property: position,
-      important: true,
       values: static relative absolute fixed sticky
     ),
     "top": (
@@ -207,42 +203,52 @@ $utilities: map.merge(
         0: 0,
       )
     ),
+    // scss-docs-end utils-borders
+    // scss-docs-start utils-border-color
     "border-color": (
-      property: border-color,
+      property: (
+        "--#{$prefix}border-color": null,
+        "border-color": var(--#{$prefix}border-color)
+      ),
       class: border,
-      values: theme-color-values("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"),
     ),
     "border-width": (
       property: border-width,
       class: border,
       values: $border-widths
     ),
-    // "border-opacity": (
-    //   css-var: true,
-    //   class: border-opacity,
-    //   values: (
-    //     10: .1,
-    //     25: .25,
-    //     50: .5,
-    //     75: .75,
-    //     100: 1
-    //   )
-    // ),
-    // scss-docs-end utils-borders
+    "border-opacity": (
+      class: border,
+      property: border-color,
+      values: theme-opacity-values(--#{$prefix}border-color)
+    ),
+    // scss-docs-end utils-border-color
     // Sizing utilities
-    // scss-docs-start utils-sizing
+    // scss-docs-start utils-width
     "width": (
       property: width,
       class: w,
-      values: (
-        25: 25%,
-        50: 50%,
-        75: 75%,
-        100: 100%,
-        auto: auto,
-        min: min-content,
-        max: max-content,
-        fit: fit-content,
+      values: map.merge(
+        $sizes,
+        (
+          25: 25%,
+          50: 50%,
+          75: 75%,
+          100: 100%,
+          auto: auto,
+          min: min-content,
+          max: max-content,
+          fit: fit-content,
+        )
       )
     ),
     "max-width": (
@@ -268,6 +274,8 @@ $utilities: map.merge(
       class: min-vw,
       values: (100: 100vw)
     ),
+    // scss-docs-end utils-width
+    // scss-docs-start utils-height
     "height": (
       property: height,
       class: h,
@@ -305,7 +313,7 @@ $utilities: map.merge(
       class: min-vh,
       values: (100: 100vh)
     ),
-    // scss-docs-end utils-sizing
+    // scss-docs-end utils-height
     // Flex utilities
     // scss-docs-start utils-flex
     "flex": (
@@ -419,6 +427,30 @@ $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,
@@ -444,37 +476,37 @@ $utilities: map.merge(
     ),
     "margin-x": (
       responsive: true,
-      property: margin-right margin-left,
+      property: margin-inline,
       class: mx,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-y": (
       responsive: true,
-      property: margin-top margin-bottom,
+      property: margin-block,
       class: my,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-top": (
       responsive: true,
-      property: margin-top,
+      property: margin-block-start,
       class: mt,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-end": (
       responsive: true,
-      property: margin-right,
+      property: margin-inline-end,
       class: me,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-bottom": (
       responsive: true,
-      property: margin-bottom,
+      property: margin-block-end,
       class: mb,
       values: map.merge($spacers, (auto: auto))
     ),
     "margin-start": (
       responsive: true,
-      property: margin-left,
+      property: margin-inline-start,
       class: ms,
       values: map.merge($spacers, (auto: auto))
     ),
@@ -487,37 +519,37 @@ $utilities: map.merge(
     // ),
     // "negative-margin-x": (
     //   responsive: true,
-    //   property: margin-right margin-left,
+    //   property: margin-inline,
     //   class: mx,
     //   values: $negative-spacers
     // ),
     // "negative-margin-y": (
     //   responsive: true,
-    //   property: margin-top margin-bottom,
+    //   property: margin-block,
     //   class: my,
     //   values: $negative-spacers
     // ),
     // "negative-margin-top": (
     //   responsive: true,
-    //   property: margin-top,
+    //   property: margin-block-start,
     //   class: mt,
     //   values: $negative-spacers
     // ),
     // "negative-margin-end": (
     //   responsive: true,
-    //   property: margin-right,
+    //   property: margin-inline-end,
     //   class: me,
     //   values: $negative-spacers
     // ),
     // "negative-margin-bottom": (
     //   responsive: true,
-    //   property: margin-bottom,
+    //   property: margin-block-end,
     //   class: mb,
     //   values: $negative-spacers
     // ),
     // "negative-margin-start": (
     //   responsive: true,
-    //   property: margin-left,
+    //   property: margin-inline-start,
     //   class: ms,
     //   values: $negative-spacers
     // ),
@@ -530,37 +562,37 @@ $utilities: map.merge(
     ),
     "padding-x": (
       responsive: true,
-      property: padding-right padding-left,
+      property: padding-inline,
       class: px,
       values: $spacers
     ),
     "padding-y": (
       responsive: true,
-      property: padding-top padding-bottom,
+      property: padding-block,
       class: py,
       values: $spacers
     ),
     "padding-top": (
       responsive: true,
-      property: padding-top,
+      property: padding-block-start,
       class: pt,
       values: $spacers
     ),
     "padding-end": (
       responsive: true,
-      property: padding-right,
+      property: padding-inline-end,
       class: pe,
       values: $spacers
     ),
     "padding-bottom": (
       responsive: true,
-      property: padding-bottom,
+      property: padding-block-end,
       class: pb,
       values: $spacers
     ),
     "padding-start": (
       responsive: true,
-      property: padding-left,
+      property: padding-inline-start,
       class: ps,
       values: $spacers
     ),
@@ -585,18 +617,31 @@ $utilities: map.merge(
     ),
     // scss-docs-end utils-spacing
     // Text
-    // scss-docs-start utils-text
+    // scss-docs-start utils-font-family
     "font-family": (
       property: font-family,
       class: font,
-      values: (monospace: var(--#{$prefix}font-monospace))
+      values: (
+        "monospace": var(--#{$prefix}font-monospace),
+        "body": var(--#{$prefix}font-sans-serif),
+      )
     ),
+    // 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,
@@ -639,77 +684,85 @@ $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
     ),
-    "white-space": (
+    // scss-docs-end utils-text-transform
+    // "white-space": (
+    //   property: white-space,
+    //   class: text,
+    //   values: (
+    //     wrap: normal,
+    //     nowrap: nowrap,
+    //   )
+    // ),
+    "text-wrap": (
       property: white-space,
       class: text,
-      values: (
-        wrap: normal,
-        nowrap: nowrap,
-      )
+      values: wrap nowrap balance pretty,
     ),
+    // 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: "color-",
-      property: color,
-      values: var(--#{$prefix}color),
-    ),
-    "color": (
-      property: --#{$prefix}color,
-      class: 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,
       values: map.merge(theme-color-values("text"), $theme-fgs),
     ),
-    "color-opacity": (
-      class: color,
-      property: color,
-      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-emphasis": (
+      property: (
+        "--#{$prefix}fg": null,
+        "color": var(--#{$prefix}fg)
+      ),
+      class: fg-emphasis,
+      values: theme-color-values("text-emphasis"),
     ),
-    "contrast-color": (
-      property: --#{$prefix}color,
-      class: color-on,
+    "fg-opacity": (
+      class: fg,
+      property: color,
+      values: theme-opacity-values(--#{$prefix}fg)
+    ),
+    "fg-contrast": (
+      property: (
+        "--#{$prefix}fg": null,
+        "color": var(--#{$prefix}fg)
+      ),
+      class: fg-contrast,
       values: theme-color-values("contrast"),
     ),
     // scss-docs-end utils-color
     // scss-docs-start utils-links
     "link-opacity": (
-      property: --#{$prefix}link-opacity,
+      property: color,
       // css-var: true,
-      class: link-opacity,
+      class: link,
       state: hover,
-      values: (
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
-      )
+      values: theme-opacity-values(--#{$prefix}link-color)
     ),
-    "link-offset": (
+    // scss-docs-end utils-links
+    // scss-docs-start utils-underline
+    "underline-offset": (
       property: text-underline-offset,
-      class: link-offset,
+      class: underline-offset,
       state: hover,
       values: (
         1: .125em,
@@ -717,71 +770,59 @@ $utilities: map.merge(
         3: .375em,
       )
     ),
-    "link-underline": (
+    "underline-color": (
       property: text-decoration-color,
-      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)),
-      //   )
-      // )
+      class: underline,
+      values: theme-color-values("text"),
     ),
-    "link-underline-opacity": (
-      // css-var: true,
-      property: --#{$prefix}link-underline-opacity,
-      class: link-underline-opacity,
+    "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,
       state: hover,
       values: (
-        0: 0,
-        10: .1,
-        25: .25,
-        50: .5,
-        75: .75,
-        100: 1
-      ),
+        1: 1px,
+        2: 2px,
+        3: 3px,
+        4: 4px,
+        5: 5px,
+      )
     ),
-    // scss-docs-end utils-links
+    // scss-docs-end utils-underline
     // 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,
+      property: (
+        "--#{$prefix}bg": null,
+        "background-color": var(--#{$prefix}bg)
+      ),
       class: bg,
       values: map.merge(theme-color-values("bg"), $theme-bgs),
     ),
     "bg-color-subtle": (
-      property: --#{$prefix}bg,
+      property: (
+        "--#{$prefix}bg": null,
+        "background-color": var(--#{$prefix}bg)
+      ),
       class: bg-subtle,
       values: theme-color-values("bg-subtle"),
     ),
     "bg-color-muted": (
-      property: --#{$prefix}bg,
+      property: (
+        "--#{$prefix}bg": null,
+        "background-color": var(--#{$prefix}bg)
+      ),
       class: bg-muted,
       values: theme-color-values("bg-muted"),
     ),
     "bg-opacity": (
       class: bg,
       property: background-color,
-      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),
-      )
+      values: theme-opacity-values(--#{$prefix}bg)
     ),
     // scss-docs-end utils-bg-color
     "gradient": (
@@ -817,7 +858,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-top": (
-      property: border-top-left-radius border-top-right-radius,
+      property: border-start-start-radius border-start-end-radius,
       class: rounded-top,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -832,7 +873,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-end": (
-      property: border-top-right-radius border-bottom-right-radius,
+      property: border-end-end-radius border-end-start-radius,
       class: rounded-end,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -847,7 +888,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-bottom": (
-      property: border-bottom-right-radius border-bottom-left-radius,
+      property: border-end-end-radius border-end-start-radius,
       class: rounded-bottom,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -862,7 +903,7 @@ $utilities: map.merge(
       )
     ),
     "rounded-start": (
-      property: border-bottom-left-radius border-top-left-radius,
+      property: border-start-start-radius border-start-end-radius,
       class: rounded-start,
       values: (
         null: var(--#{$prefix}border-radius),
@@ -881,7 +922,6 @@ $utilities: map.merge(
     "visibility": (
       property: visibility,
       class: null,
-      important: true,
       values: (
         visible: visible,
         invisible: hidden,
@@ -895,13 +935,6 @@ $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}gray-900) !default;
-$body-bg:                   $white !default;
+$body-color:                var(--#{$prefix}color-body) !default;
+$body-bg:                   var(--#{$prefix}bg-body) !default;
 
-$body-secondary-color:      rgba($body-color, .75) !default;
-$body-secondary-bg:         var(--#{$prefix}gray-200) !default;
+$body-secondary-color:      var(--#{$prefix}color-secondary) !default;
+$body-secondary-bg:         var(--#{$prefix}bg-secondary) !default;
 
-$body-tertiary-color:       rgba($body-color, .5) !default;
-$body-tertiary-bg:          var(--#{$prefix}gray-100) !default;
+$body-tertiary-color:       var(--#{$prefix}color-muted) !default;
+$body-tertiary-bg:          var(--#{$prefix}bg-muted) !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:                   null !default;
+// $link-hover-decoration:                   $link-decoration !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:                var(--#{$prefix}gray-200) !default;
+$border-color:                color-mix(in oklch, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)) !default;
 $border-color-translucent:    rgba($black, .175) !default;
 // scss-docs-end border-variables
 
@@ -253,24 +253,57 @@ $line-height-base:            1.5 !default;
 $line-height-sm:              1.25 !default;
 $line-height-lg:              2 !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;
+$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;
 // scss-docs-end font-variables
 
-// scss-docs-start font-sizes
+// Font sizes with line-height for utilities
 $font-sizes: (
-  1: $h1-font-size,
-  2: $h2-font-size,
-  3: $h3-font-size,
-  4: $h4-font-size,
-  5: $h5-font-size,
-  6: $h6-font-size
+  "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)
+  ),
 ) !default;
-// scss-docs-end font-sizes
 
 // scss-docs-start headings-variables
 $headings-margin-bottom:      $spacer * .5 !default;
@@ -281,26 +314,7 @@ $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;
@@ -371,7 +385,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}body-color) !default;
+$btn-color:                   var(--#{$prefix}color-body) !default;
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;
@@ -461,8 +475,8 @@ $modal-dialog-margin-y-sm-up:       1.75rem !default;
 
 $modal-title-line-height:           $line-height-base !default;
 
-$modal-content-color:               var(--#{$prefix}body-color) !default;
-$modal-content-bg:                  var(--#{$prefix}body-bg) !default;
+$modal-content-color:               var(--#{$prefix}color-body) !default;
+$modal-content-bg:                  var(--#{$prefix}bg-body) !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;
@@ -505,8 +519,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}body-bg) !default;
-$offcanvas-color:                   var(--#{$prefix}body-color) !default;
+$offcanvas-bg-color:                var(--#{$prefix}bg-body) !default;
+$offcanvas-color:                   var(--#{$prefix}color-body) !default;
 $offcanvas-box-shadow:              $modal-content-box-shadow-xs !default;
 $offcanvas-backdrop-bg:             $modal-backdrop-bg !default;
 $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
@@ -520,8 +534,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}body-bg) !default;
-$kbd-bg:                            var(--#{$prefix}body-color) !default;
+$kbd-color:                         var(--#{$prefix}bg-body) !default;
+$kbd-bg:                            var(--#{$prefix}color-body) !default;
 
 $pre-color:                         null !default;
 
@@ -534,17 +548,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-left: calc(-1 * #{$btn-border-width});
+      margin-inline-start: calc(-1 * #{$btn-border-width});
     }
 
     // Reset rounded corners
@@ -80,28 +80,25 @@
   //
 
   .dropdown-toggle-split {
-    padding-right: $btn-padding-x * .75;
-    padding-left: $btn-padding-x * .75;
+    padding-inline: $btn-padding-x * .75;
 
     &::after,
     .dropup &::after,
     .dropend &::after {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
 
     .dropstart &::before {
-      margin-right: 0;
+      margin-inline-end: 0;
     }
   }
 
   .btn-sm + .dropdown-toggle-split {
-    padding-right: $btn-padding-x-sm * .75;
-    padding-left: $btn-padding-x-sm * .75;
+    padding-inline: $btn-padding-x-sm * .75;
   }
 
   .btn-lg + .dropdown-toggle-split {
-    padding-right: $btn-padding-x-lg * .75;
-    padding-left: $btn-padding-x-lg * .75;
+    padding-inline: $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}body-color) !default;
+$btn-color:                   var(--#{$prefix}color-body) !default;
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;

scss/buttons/_button.scss

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

scss/content/_prose.scss

@@ -0,0 +1,137 @@
+@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}body-color);
+    color: var(--#{$prefix}color-body);
     text-align: var(--#{$prefix}body-text-align);
-    background-color: var(--#{$prefix}body-bg); // 2
+    background-color: var(--#{$prefix}bg-body); // 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-top: $hr-border-width solid $hr-border-color;
+    border-block-start: $hr-border-width solid $hr-border-color;
     opacity: $hr-opacity;
   }
 
@@ -171,7 +171,7 @@
 
   ol,
   ul {
-    padding-left: 2rem;
+    padding-inline-start: 2rem;
   }
 
   ol,
@@ -195,8 +195,8 @@
   // 1. Undo browser default
 
   dd {
+    margin-inline-start: 0; // 1
     margin-bottom: .5rem;
-    margin-left: 0; // 1
   }
 
 
@@ -262,8 +262,10 @@
     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);
+      text-decoration: var(--#{$prefix}link-hover-decoration, var(--#{$prefix}link-decoration));
     }
   }
 
@@ -369,7 +371,7 @@
     // color: $table-caption-color;
     padding-block: .5rem;
     color: var(--#{$prefix}secondary-color);
-    text-align: left;
+    text-align: start;
   }
 
   // 1. Removes font-weight bold by inheriting
@@ -507,13 +509,13 @@
     border: 0; // 2
   }
 
-  // 1. By using `float: left`, the legend will behave like a block element.
+  // 1. By using `float: inline-start`, 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: left; // 1
+    float: inline-start; // 1
     width: 100%;
     padding: 0;
     margin-bottom: $legend-margin-bottom;
@@ -522,7 +524,7 @@
     @include font-size($legend-font-size);
 
     + * {
-      clear: left; // 2
+      clear: inline-start; // 2
     }
   }
 
@@ -560,19 +562,15 @@
     }
   }
 
-  // 1. A few input types should stay LTR
+  // A few input types should stay LTR regardless of document direction
   // 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}body-color) !default;
-$table-bg:                    var(--#{$prefix}body-bg) !default;
+$table-color:                 var(--#{$prefix}color-body) !default;
+$table-bg:                    var(--#{$prefix}bg-body) !default;
 $table-accent-bg:             transparent !default;
 
 // $table-th-font-weight:        null !default;
@@ -34,7 +34,6 @@ $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;
 
@@ -47,35 +46,6 @@ $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
@@ -89,6 +59,8 @@ $table-variants: $new-theme-colors !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};
@@ -99,11 +71,12 @@ $table-variants: $new-theme-colors !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}table-border-color);
+    border-color: var(--#{$prefix}theme-border, var(--#{$prefix}table-border-color));
 
     // Target th & td
     // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
@@ -113,10 +86,10 @@ $table-variants: $new-theme-colors !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}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)));
+      color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}theme-text, var(--#{$prefix}table-color))));
+      background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-bg));
+      border-block-end-width: $table-border-width;
+      box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-accent-bg))));
     }
 
     > tbody {
@@ -129,7 +102,7 @@ $table-variants: $new-theme-colors !default;
   }
 
   .table-group-divider {
-    border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
+    border-block-start: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
   }
 
   //
@@ -176,11 +149,11 @@ $table-variants: $new-theme-colors !default;
   .table-borderless {
     // stylelint-disable-next-line selector-max-universal
     > :not(caption) > * > * {
-      border-bottom-width: 0;
+      border-block-end-width: 0;
     }
 
     > :not(:first-child) {
-      border-top-width: 0;
+      border-block-start-width: 0;
     }
   }
 
@@ -191,16 +164,16 @@ $table-variants: $new-theme-colors !default;
   // For rows
   .table-striped {
     > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
-      --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
-      --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
+      --#{$prefix}table-color-type: var(--#{$prefix}theme-text, var(--#{$prefix}table-striped-color));
+      --#{$prefix}table-bg-type: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-striped-bg-factor)}, transparent);
     }
   }
 
   // For columns
   .table-striped-columns {
     > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
-      --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
-      --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
+      --#{$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);
     }
   }
 
@@ -209,8 +182,8 @@ $table-variants: $new-theme-colors !default;
   // The `.table-active` class can be added to highlight rows or cells
 
   .table-active {
-    --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
-    --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
+    --#{$prefix}table-color-state: var(--#{$prefix}theme-text, var(--#{$prefix}table-active-color));
+    --#{$prefix}table-bg-state: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-active-bg-factor)}, transparent);
   }
 
   // Hover effect
@@ -219,36 +192,11 @@ $table-variants: $new-theme-colors !default;
 
   .table-hover {
     > tbody > tr:hover > * {
-      --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
-      --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
+      --#{$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);
     }
   }
 
-
-  // 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,22 +4,6 @@
 @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
   //
@@ -36,7 +20,7 @@
     display: inline-block;
 
     &:not(:last-child) {
-      margin-right: $list-inline-padding;
+      margin-inline-end: $list-inline-padding;
     }
   }
 

scss/content/index.scss

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

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,14 +150,13 @@
 
     &.form-control-sm,
     &.form-control-lg {
-      padding-right: 0;
-      padding-left: 0;
+      padding-inline: 0;
     }
   }
 
   // stylelint-disable selector-no-qualifying-type
   select.form-control {
-    padding-right: calc(var(--#{$prefix}control-padding-x) * 3);
+    padding-inline-end: calc(var(--#{$prefix}control-padding-x) * 3);
     background-image: var(--#{$prefix}control-select-bg);
     background-repeat: no-repeat;
     background-position: var(--#{$prefix}control-select-bg-position);
@@ -165,7 +164,7 @@
 
     &[multiple],
     &[size]:not([size="1"]) {
-      padding-right: var(--#{$prefix}control-padding-x);
+      padding-inline-end: 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}body-color) !default;
-$control-bg: var(--#{$prefix}body-bg) !default;
+$control-color: var(--#{$prefix}color-body) !default;
+$control-bg: var(--#{$prefix}bg-body) !default;
 $control-border-width: var(--#{$prefix}border-width) !default;
 $control-border-color: var(--#{$prefix}border-color) !default;
 $control-border-radius: var(--#{$prefix}border-radius) !default;
@@ -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:  $body-color-dark !default;
+$control-select-indicator-color-dark:  #fff !default;
 $control-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$control-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
 
 
@@ -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}body-bg) !default;
+$input-bg:                              var(--#{$prefix}bg-body) !default;
 $input-disabled-color:                  null !default;
 $input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color:           null !default;
 
-$input-color:                           var(--#{$prefix}body-color) !default;
+$input-color:                           var(--#{$prefix}color-body) !default;
 $input-border-color:                    var(--#{$prefix}border-color) !default;
 $input-border-width:                    var(--#{$prefix}border-width) !default;
 $input-box-shadow:                      var(--#{$prefix}box-shadow-inset) !default;
@@ -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}body-color) !default;
+$input-plaintext-color:                 var(--#{$prefix}color-body) !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-left: calc(-1 * #{$input-border-width});
+      margin-inline-start: 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}radio-bg);
-    border: 1px solid var(--#{$prefix}radio-border-color);
+    background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-bg));
+    border: 1px solid var(--#{$prefix}theme-bg, var(--#{$prefix}radio-border-color));
     // stylelint-disable-next-line property-disallowed-list
     border-radius: 50%;
 
     &:checked {
-      color: var(--#{$prefix}primary-contrast);
-      background-color: var(--#{$prefix}radio-checked-bg);
-      border-color: var(--#{$prefix}radio-checked-border-color);
+      color: var(--#{$prefix}theme-contrast, var(--#{$prefix}primary-contrast));
+      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-bg));
+      border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-border-color));
 
       &::before {
         position: absolute;

scss/forms/_validation.scss

@@ -76,7 +76,7 @@
       border-color: $border-color;
 
       @if $enable-validation-icons {
-        padding-right: $input-height-inner;
+        padding-inline-end: $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-right: $input-height-inner;
+        padding-inline-end: $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-left: .5em;
+      margin-inline-start: .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);
-      background-color: var(--#{$prefix}#{$color}-bg-subtle);
+      --#{$prefix}bg: 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} {
-      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));
+      --#{$prefix}link-color: var(--#{$prefix}#{$color}-text);
+      // 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 `#{$breakpoints}`";
+    @error "breakpoint `#{$name}` not found in `#{$breakpoint-names}`";
   }
   @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
 }
@@ -35,18 +35,19 @@
   @return if($min != 0, $min, null);
 }
 
-// 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
+// Maximum breakpoint width for range media queries.
+// Returns the breakpoint value to use as an upper bound in range queries.
 //
-//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px))
-//    767.98px
+//    >> 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
 @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  @if $name == null {
+    @return null;
+  }
   $max: map.get($breakpoints, $name);
-  @return if($max and $max > 0, $max - .02, null);
+  @return if($max and $max > 0, $max, null);
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@@ -65,7 +66,7 @@
 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
   @if $min {
-    @media (min-width: $min) {
+    @media (width >= $min) {
       @content;
     }
   } @else {
@@ -78,7 +79,7 @@
 @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
   $max: breakpoint-max($name, $breakpoints);
   @if $max {
-    @media (max-width: $max) {
+    @media (width < $max) {
       @content;
     }
   } @else {
@@ -93,7 +94,7 @@
   $max: breakpoint-max($upper, $breakpoints);
 
   @if $min != null and $max != null {
-    @media (min-width: $min) and (max-width: $max) {
+    @media (width >= $min) and (width < $max) {
       @content;
     }
   } @else if $max == null {
@@ -116,7 +117,7 @@
   $max:  breakpoint-max($next, $breakpoints);
 
   @if $min != null and $max != null {
-    @media (min-width: $min) and (max-width: $max) {
+    @media (width >= $min) and (width < $max) {
       @content;
     }
   } @else if $max == null {

scss/layout/_containers.scss

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

scss/layout/_grid.scss

@@ -55,23 +55,22 @@
     gap: var(--#{$prefix}gap);
   }
 
-  // mdo-do: add to utilities?
-  .g-col-auto {
-    grid-column: auto/auto;
-  }
+  // .g-col-auto {
+  //   grid-column: auto;
+  // }
 
   // mdo-do: add to utilities?
-  .grid-cols-3 {
-    --#{$prefix}columns: 3;
-  }
-  .grid-cols-4 {
-    --#{$prefix}columns: 4;
-  }
-  .grid-cols-6 {
-    --#{$prefix}columns: 6;
-  }
+  // .grid-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-top-left-radius: valid-radius($radius);
-    border-top-right-radius: valid-radius($radius);
+    border-start-start-radius: valid-radius($radius);
+    border-start-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-right-radius: valid-radius($radius);
-    border-bottom-right-radius: valid-radius($radius);
+    border-start-end-radius: valid-radius($radius);
+    border-end-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-bottom-right-radius: valid-radius($radius);
-    border-bottom-left-radius: valid-radius($radius);
+    border-end-start-radius: valid-radius($radius);
+    border-end-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
-    border-bottom-left-radius: valid-radius($radius);
+    border-start-start-radius: valid-radius($radius);
+    border-end-start-radius: valid-radius($radius);
   }
 }
 
 @mixin border-top-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
+    border-start-start-radius: valid-radius($radius);
   }
 }
 
 @mixin border-top-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-top-right-radius: valid-radius($radius);
+    border-start-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-end-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-bottom-right-radius: valid-radius($radius);
+    border-end-end-radius: valid-radius($radius);
   }
 }
 
 @mixin border-bottom-start-radius($radius: $border-radius) {
   @if $enable-rounded {
-    border-bottom-left-radius: valid-radius($radius);
+    border-end-start-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-top: $width solid;
-  border-right: $width solid transparent;
-  border-bottom: 0;
-  border-left: $width solid transparent;
+  border-block-start: $width solid;
+  border-block-end: 0;
+  border-inline-start: $width solid transparent;
+  border-inline-end: $width solid transparent;
 }
 
 @mixin caret-up($width: $caret-width) {
-  border-top: 0;
-  border-right: $width solid transparent;
-  border-bottom: $width solid;
-  border-left: $width solid transparent;
+  border-block-start: 0;
+  border-block-end: $width solid;
+  border-inline-start: $width solid transparent;
+  border-inline-end: $width solid transparent;
 }
 
 @mixin caret-end($width: $caret-width) {
-  border-top: $width solid transparent;
-  border-right: 0;
-  border-bottom: $width solid transparent;
-  border-left: $width solid;
+  border-block-start: $width solid transparent;
+  border-block-end: $width solid transparent;
+  border-inline-start: $width solid;
+  border-inline-end: 0;
 }
 
 @mixin caret-start($width: $caret-width) {
-  border-top: $width solid transparent;
-  border-right: $width solid;
-  border-bottom: $width solid transparent;
+  border-block-start: $width solid transparent;
+  border-block-end: $width solid transparent;
+  border-inline-end: $width solid;
 }
 
 @mixin caret(
@@ -44,7 +44,7 @@ $caret-spacing:               $caret-width * .85 !default;
   @if $enable-caret {
     &::after {
       display: inline-block;
-      margin-left: $spacing;
+      margin-inline-start: $spacing;
       vertical-align: $vertical-align;
       content: "";
       @if $direction == down {
@@ -63,7 +63,7 @@ $caret-spacing:               $caret-width * .85 !default;
 
       &::before {
         display: inline-block;
-        margin-right: $spacing;
+        margin-inline-end: $spacing;
         vertical-align: $vertical-align;
         content: "";
         @include caret-start($width);
@@ -71,7 +71,7 @@ $caret-spacing:               $caret-width * .85 !default;
     }
 
     &:empty::after {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
   }
 }

scss/mixins/_forms.scss

@@ -60,7 +60,7 @@
       border-color: $border-color;
 
       @if $enable-validation-icons {
-        padding-right: $input-height-inner;
+        padding-inline-end: $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-right: $input-height-inner;
+        padding-inline-end: $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-right: $form-select-feedback-icon-padding-end;
+          padding-inline-end: $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-left: .5em;
+      margin-inline-start: .5em;
     }
   }
 

scss/mixins/_grid.scss

@@ -14,9 +14,8 @@
   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() {
@@ -28,8 +27,7 @@
   flex-shrink: 0;
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-  padding-right: calc(var(--#{$prefix}gutter-x) * .5);
-  padding-left: calc(var(--#{$prefix}gutter-x) * .5);
+  padding-inline: calc(var(--#{$prefix}gutter-x) * .5);
   margin-top: var(--#{$prefix}gutter-y);
 }
 
@@ -51,7 +49,7 @@
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: math.div($size, $columns);
-  margin-left: if($num == 0, 0, math.percentage($num));
+  margin-inline-start: 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-left: 0;
+  padding-inline-start: 0;
   list-style: none;
 }

scss/mixins/_utilities.scss

@@ -9,15 +9,81 @@
 
 // Utility generator
 
-// - Utilities can three different types of selectors:
+// - Utilities can use three different types of selectors:
 //   - class: .class
 //   - attr-starts: [class^="class"]
 //   - attr-includes: [class*="class"]
-// - Utilities can generate a regular CSS property or a CSS custom property
+// - Utilities can generate regular CSS properties and CSS custom properties
 // - Utilities can be responsive or not
-// - Utilities can have a state (e.g., :hover, :focus, :active, etc.)
+// - 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: ...;
+// }
 
-@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
+// 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: "") {
   // 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"])
@@ -43,21 +109,31 @@
 
   @each $key, $value in $values {
     $properties: map.get($utility, property);
+    $propertyMap: 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);
+    // 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);
     }
 
-    // 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 pseudo-classes
+    // State params to generate state variants
     $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);
@@ -86,77 +162,47 @@
     // @debug $values;
 
     #{$selector} {
-      @if map.get($utility, rfs) {
-        @if map.get($utility, important) {
-          @warn "The `important` option is not compatible with `rfs`. The `important` declaration will be ignored.";
-        }
-        @if $is-rfs-media-query {
-          @each $property in $properties {
-            @include rfs($value, $property);
+      // 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};
           }
-        }
-        @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;
+        } @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);
+    // 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);
+        }
+      }
+    }
   }
 }

scss/tests/mixins/_breakpoints.test.scss

@@ -0,0 +1,95 @@
+@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 (min-width: 333px) {
+        @media (width >= 333px) {
           .padding-sm-1rem {
             padding: 1rem !important;
           }
         }
 
-        @media (min-width: 666px) {
+        @media (width >= 666px) {
           .padding-md-1rem {
             padding: 1rem !important;
           }

site/data/sidebar.yml

@@ -10,12 +10,17 @@
     - title: Contents
     - title: Browsers & devices
     - title: JavaScript
-    - title: Webpack
-    - title: Parcel
-    - title: Vite
     - title: Accessibility
     - title: RFS
     - title: RTL
+
+- title: Guides
+  icon: map
+  icon_color: green
+  pages:
+    - title: Webpack
+    - title: Parcel
+    - title: Vite
     - title: Contribute
 
 - title: Customize
@@ -54,6 +59,7 @@
     - title: Images
     - title: Tables
     - title: Figures
+    - title: Prose
 
 - title: Forms
   icon: ui-radios
@@ -119,10 +125,10 @@
   icon_color: red
   pages:
     - title: API
-    - title: Background
-    - title: Border
-    - title: Border radius
-    - title: Colors
+    - group: Color
+      pages:
+        - title: Colors
+        - title: Background
     - group: Layout
       pages:
         - title: Aspect ratio
@@ -139,6 +145,8 @@
         - title: Align items
         - title: Align self
         - title: Flex
+        - title: Gap
+        - title: Grid
         - title: Justify content
         - title: Justify items
         - title: Place items
@@ -152,11 +160,23 @@
         - 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
@@ -166,13 +186,6 @@
         - 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: emphasis
+- name: inverse
 - 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.rtl.css']
+export const extra_css = ['https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap', '../blog/blog.css']
 import Placeholder from "@shortcodes/Placeholder.astro"
 ---
 

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

@@ -1,16 +1,29 @@
 /* stylelint-disable @stylistic/selector-list-comma-newline-after */
 
 .blog-header-logo {
-  font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
+  font-family: "Playfair Display", 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/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
+  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;
 }
 
 .flex-auto {

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

@@ -1,39 +0,0 @@
-/* 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.rtl.css']
+export const extra_css = ['../carousel/carousel.css']
 import Placeholder from "@shortcodes/Placeholder.astro"
 ---
 

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

@@ -1,74 +0,0 @@
-/* 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.rtl.css']
+export const extra_css = ['../cheatsheet/cheatsheet.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

@@ -1,156 +0,0 @@
-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.rtl.css']
+export const extra_css = ['../dashboard/dashboard.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

@@ -1,48 +0,0 @@
-.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('/getting-started/webpack')}>
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/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('/getting-started/parcel')}>
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/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('/getting-started/vite')}>
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/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('/getting-started/contribute')}>
+            <a class="icon-link mb-1" href={getVersionedDocsPath('/guides/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}-300));`}
+                    style={group.icon_color && `color: light-dark(var(--bs-${group.icon_color}-500), var(--bs-${group.icon_color}-400));`}
                     aria-hidden="true"
                   >
                     <use xlink:href={`#${group.icon}`} />

site/src/components/HelperReferenceTable.astro

@@ -0,0 +1,41 @@
+---
+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,7 +1,12 @@
 ---
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
 interface ReferenceItem {
   class: string;
-  styles: string | string[] | Record<string, string>;
+  styles?: string | string[] | Record<string, string>;
+  description?: string;
+  comment?: string; // Optional manual comment to append
   [key: string]: any; // Allow additional properties
 }
 
@@ -22,6 +27,67 @@ 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) {
@@ -32,10 +98,12 @@ const inferredColumns = columns || (() => {
   }
 
   const firstItem = referenceData[0];
-  return Object.keys(firstItem).map(key => ({
-    label: key.charAt(0).toUpperCase() + key.slice(1), // Capitalize first letter
-    key: key
-  }));
+  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
+    }));
 })();
 
 // Transform frontmatter format to table format
@@ -51,26 +119,40 @@ const tableData = referenceData.map((item: ReferenceItem) => {
     }
 
     if (key === 'styles') {
+      let processedStyles = '';
+
       if (typeof value === 'string') {
-        transformedItem[key] = value;
+        processedStyles = addVarComments(value);
       } else if (typeof value === 'object' && !Array.isArray(value)) {
         // Handle object syntax: { prop: value, prop2: value2 }
-        transformedItem[key] = Object.entries(value)
-          .map(([prop, val]) => `${prop}: ${val};`)
+        processedStyles = Object.entries(value)
+          .map(([prop, val]) => {
+            const cssLine = `${prop}: ${val};`;
+            return addVarComments(cssLine);
+          })
           .join('<br/>');
       } else if (Array.isArray(value)) {
-        transformedItem[key] = value.map((style: any) => {
+        processedStyles = value.map((style: any) => {
           if (typeof style === 'string') {
-            return style.includes(':') ? style + (style.endsWith(';') ? '' : ';') : style;
+            const formattedStyle = style.includes(':') ? style + (style.endsWith(';') ? '' : ';') : style;
+            return addVarComments(formattedStyle);
           }
           if (typeof style === 'object') {
-            return Object.entries(style).map(([prop, val]) => `${prop}: ${val};`).join(' ');
+            const cssLine = Object.entries(style).map(([prop, val]) => `${prop}: ${val};`).join(' ');
+            return addVarComments(cssLine);
           }
           return style;
         }).join('<br/>');
       } else {
-        transformedItem[key] = value || '';
+        processedStyles = 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

@@ -0,0 +1,173 @@
+---
+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('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>
+          <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>
         </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/sizing')}>sizing</a> to <a
+        > and <a href={getVersionedDocsPath('utilities/width')}>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('getting-started/webpack/')}
+        href={getVersionedDocsPath('guides/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('getting-started/parcel/')}
+        href={getVersionedDocsPath('guides/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('getting-started/vite/')}
+        href={getVersionedDocsPath('guides/vite/')}
       >
         <img
           class="d-block mb-2"

site/src/components/icons/Symbols.astro

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

site/src/components/shortcodes/DETAILS_README.md

@@ -0,0 +1,126 @@
+# 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

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