lint

* Use `@forward` instead of `@use` for proper customization

* linty linterson

* woof

.bundlewatch.config.json

@@ -2,15 +2,15 @@
   "files": [
     {
       "path": "./dist/css/bootstrap-grid.css",
-      "maxSize": "10.0 kB"
+      "maxSize": "7.75 kB"
     },
     {
       "path": "./dist/css/bootstrap-grid.min.css",
-      "maxSize": "9.0 kB"
+      "maxSize": "6.75 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.css",
-      "maxSize": "5.5 kB"
+      "maxSize": "4.5 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.min.css",
@@ -18,19 +18,19 @@
     },
     {
       "path": "./dist/css/bootstrap-utilities.css",
-      "maxSize": "15.25 kB"
+      "maxSize": "13.0 kB"
     },
     {
       "path": "./dist/css/bootstrap-utilities.min.css",
-      "maxSize": "13.5 kB"
+      "maxSize": "12.0 kB"
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "37.5 kB"
+      "maxSize": "36.0 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "33.75 kB"
+      "maxSize": "32.0 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

.cspell.json

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

.github/workflows/browserstack.yml

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

.github/workflows/bundlewatch.yml

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

.github/workflows/codeql.yml

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

.github/workflows/cspell.yml

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

.github/workflows/css.yml

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

.github/workflows/docs.yml

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

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

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

.github/workflows/issue-labeled.yml

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

.github/workflows/js.yml

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

.github/workflows/lint.yml

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

.github/workflows/scorecard.yml

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

.gitignore

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

README.md

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

build/generate-sri.mjs

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

build/generate-utilities-json.mjs

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

build/generate-utilities-metadata.scss

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

build/html-validate.mjs

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

build/postcss.config.mjs

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

build/vnu-jar.mjs

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

config.yml

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

package.json

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

scss/_accordion.scss

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

scss/_alert.scss

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

scss/_badge.scss

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

scss/_breadcrumb.scss

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

scss/_card.scss

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

scss/_carousel.scss

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

scss/_colors.scss

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

scss/_config.scss

@@ -42,21 +42,6 @@ $spacers: (
 ) !default;
 // scss-docs-end spacer-variables-maps
 
-$sizes: (
-  1: $spacer,
-  2: calc($spacer * 2),
-  3: calc($spacer * 3),
-  4: calc($spacer * 4),
-  5: calc($spacer * 5),
-  6: calc($spacer * 6),
-  7: calc($spacer * 7),
-  8: calc($spacer * 8),
-  9: calc($spacer * 9),
-  10: calc($spacer * 10),
-  11: calc($spacer * 11),
-  12: calc($spacer * 12),
-) !default;
-
 // Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,
@@ -67,9 +52,9 @@ $grid-breakpoints: (
   xs: 0,
   sm: 576px,
   md: 768px,
-  lg: 1024px,
-  xl: 1280px,
-  2xl: 1536px
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
 ) !default;
 // scss-docs-end grid-breakpoints
 
@@ -95,8 +80,8 @@ $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
-  xl: 1200px,
-  2xl: 1440px
+  xl: 1140px,
+  xxl: 1320px
 ) !default;
 // scss-docs-end container-max-widths
 

scss/_dropdown.scss

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

scss/_functions.scss

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

scss/_list-group.scss

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

scss/_maps.scss

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

scss/_modal.scss

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

scss/_nav.scss

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

scss/_navbar.scss

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

scss/_offcanvas.scss

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

scss/_pagination.scss

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

scss/_popover.scss

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

scss/_progress.scss

@@ -14,7 +14,7 @@ $progress-bg:                       var(--#{$prefix}secondary-bg) !default;
 $progress-border-radius:            var(--#{$prefix}border-radius) !default;
 $progress-box-shadow:               var(--#{$prefix}box-shadow-inset) !default;
 $progress-bar-color:                $white !default;
-$progress-bar-bg:                   var(--#{$prefix}primary-bg) !default;
+$progress-bar-bg:                   $primary !default;
 $progress-bar-animation-timing:     1s linear infinite !default;
 $progress-bar-transition:           width .6s ease !default;
 // scss-docs-end progress-variables

scss/_root.scss

@@ -14,37 +14,66 @@
 :root {
   color-scheme: light dark;
 
-  // scss-docs-start root-theme-variables
-  // Generate semantic theme colors
+  @each $color-group-name, $color-group in $all-colors {
+    @if meta.type-of($color-group) == "map" {
+      @each $color-name, $color-value in $color-group {
+        --#{$prefix}#{$color-name}: #{$color-value};
+      }
+    } @else {
+      --#{$prefix}#{$color-group-name}: #{$color-group};
+    }
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$prefix}#{$color}: #{$value};
+  }
+
   @each $color-name, $color-map in $new-theme-colors {
     @each $key, $value in $color-map {
       --#{$prefix}#{$color-name}-#{$key}: #{$value};
     }
   }
 
-  @each $color, $value in $theme-bgs {
-    --#{$prefix}bg-#{$color}: #{$value};
-  }
-
-  @each $color, $value in $theme-fgs {
-    --#{$prefix}color-#{$color}: #{$value};
-  }
-
-  @each $color, $value in $theme-borders {
-    --#{$prefix}border-#{$color}: #{$value};
-  }
-
   --#{$prefix}black: #{$black};
   --#{$prefix}white: #{$white};
-  // scss-docs-end root-theme-variables
 }
 
 :root,
 [data-bs-theme="light"] {
-  color-scheme: light;
-
   // Note: Custom variable values only support SassScript inside `#{}`.
 
+  // Colors
+  //
+  // Generate palettes for full colors, grays, and theme colors.
+
+  // @each $color, $value in $colors {
+  //   --#{$prefix}#{$color}: #{$value};
+  // }
+
+  // @each $color, $value in $grays {
+  //   --#{$prefix}gray-#{$color}: #{$value};
+  // }
+
+  // @each $color, $value in $theme-colors {
+  //   --#{$prefix}#{$color}: #{$value};
+  // }
+
+  // @each $color, $value in $theme-colors-rgb {
+  //   --#{$prefix}#{$color}-rgb: #{$value};
+  // }
+
+  // @each $color, $value in $theme-colors-text {
+  //   --#{$prefix}#{$color}-text-emphasis: #{$value};
+  // }
+
+  // @each $color, $value in $theme-colors-bg-subtle {
+  //   --#{$prefix}#{$color}-bg-subtle: #{$value};
+  // }
+
+  // @each $color, $value in $theme-colors-border-subtle {
+  //   --#{$prefix}#{$color}-border-subtle: #{$value};
+  // }
+
   --#{$prefix}white-rgb: #{to-rgb($white)};
   --#{$prefix}black-rgb: #{to-rgb($black)};
 
@@ -63,33 +92,9 @@
   }
   --#{$prefix}body-font-family: #{meta.inspect($font-family-base)};
 
-  // scss-docs-start root-font-size-variables
   --#{$prefix}font-size-base: #{$font-size-base}; // 14px
-  // --#{$prefix}font-size-sm: calc(#{$font-size-base} * .9285);
-  // --#{$prefix}font-size-lg: calc(#{$font-size-base} * 1.285);
-
-  --#{$prefix}font-size-xs: clamp(.75rem, .7rem + .25vw, .875rem);
-  --#{$prefix}font-size-sm: clamp(.875rem, .8rem + .375vw, 1rem);
-  --#{$prefix}font-size-md: clamp(1rem, .9rem + .5vw, 1.125rem);
-  --#{$prefix}font-size-lg: clamp(1.25rem, 1rem + .625vw, 1.5rem);
-  --#{$prefix}font-size-xl: clamp(1.5rem, 1.1rem + .75vw, 1.75rem);
-  --#{$prefix}font-size-2xl: clamp(1.75rem, 1.3rem + 1vw, 2.25rem);
-  --#{$prefix}font-size-3xl: clamp(2rem, 1.5rem + 1.875vw, 2.5rem);
-  --#{$prefix}font-size-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
-  --#{$prefix}font-size-5xl: clamp(3rem, 2rem + 5vw, 4rem);
-  --#{$prefix}font-size-6xl: clamp(3.75rem, 2.5rem + 6.25vw, 5rem);
-
-  --#{$prefix}line-height-xs: 1.5;
-  --#{$prefix}line-height-sm: 1.5;
-  --#{$prefix}line-height-md: 1.5;
-  --#{$prefix}line-height-lg: 1.5;
-  --#{$prefix}line-height-xl: calc(2.5 / 1.75);
-  --#{$prefix}line-height-2xl: calc(3 / 2.25);
-  --#{$prefix}line-height-3xl: 1.2;
-  --#{$prefix}line-height-4xl: 1.1;
-  --#{$prefix}line-height-5xl: 1.1;
-  --#{$prefix}line-height-6xl: 1;
-  // scss-docs-end root-font-size-variables
+  --#{$prefix}font-size-sm: calc(#{$font-size-base} * .9285);
+  --#{$prefix}font-size-lg: calc(#{$font-size-base} * 1.285);
 
   @include rfs($font-size-base, --#{$prefix}body-font-size);
   --#{$prefix}body-font-weight: #{$font-weight-base};
@@ -113,9 +118,9 @@
     --#{$prefix}border#{$key}: #{$value};
   }
 
-  // --#{$prefix}body-color: #{$body-color};
+  --#{$prefix}body-color: #{$body-color};
   --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
-  // --#{$prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg: #{$body-bg};
   --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
 
   // --#{$prefix}emphasis-color: #{$body-emphasis-color};
@@ -145,6 +150,10 @@
   --#{$prefix}link-decoration: #{$link-decoration};
   --#{$prefix}link-hover-color: color-mix(in oklch, var(--#{$prefix}link-color) 90%, #000);
 
+  @if $link-hover-decoration != null {
+    --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
+  }
+
   --#{$prefix}code-color: #{$code-color};
   --#{$prefix}highlight-color: #{$mark-color};
   --#{$prefix}highlight-bg: #{$mark-bg};
@@ -161,7 +170,7 @@
   --#{$prefix}border-radius-sm: #{$border-radius-sm};
   --#{$prefix}border-radius-lg: #{$border-radius-lg};
   --#{$prefix}border-radius-xl: #{$border-radius-xl};
-  --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
+  --#{$prefix}border-radius-xxl: #{$border-radius-xxl};
   --#{$prefix}border-radius-pill: #{$border-radius-pill};
   // scss-docs-end root-border-radius-var
 
@@ -196,34 +205,46 @@
     color-scheme: dark;
 
     // scss-docs-start root-dark-mode-vars
-    // --#{$prefix}body-color: #{$body-color-dark};
-    // --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
-    // --#{$prefix}body-bg: #{$body-bg-dark};
-    // --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+    --#{$prefix}body-color: #{$body-color-dark};
+    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+    --#{$prefix}body-bg: #{$body-bg-dark};
+    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
 
     --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
     --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
 
-    // --#{$prefix}secondary-color: #{$body-secondary-color-dark};
-    // --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
-    // --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
-    // --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+    --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
 
-    // --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
-    // --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
-    // --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
-    // --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+    // @each $color, $value in $theme-colors-text-dark {
+    //   --#{$prefix}#{$color}-text-emphasis: #{$value};
+    // }
+
+    // @each $color, $value in $theme-colors-bg-subtle-dark {
+    //   --#{$prefix}#{$color}-bg-subtle: #{$value};
+    // }
+
+    // @each $color, $value in $theme-colors-border-subtle-dark {
+    //   --#{$prefix}#{$color}-border-subtle: #{$value};
+    // }
 
     --#{$prefix}heading-color: #{$headings-color-dark};
 
-    // --#{$prefix}link-color: #{$link-color-dark};
-    // --#{$prefix}link-hover-color: #{$link-hover-color-dark};
-    // --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
-    // --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+    --#{$prefix}link-color: #{$link-color-dark};
+    --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
 
     // --#{$prefix}code-color: #{$code-color-dark}; // removed in v6
-    // --#{$prefix}highlight-color: #{$mark-color-dark};
-    // --#{$prefix}highlight-bg: #{$mark-bg-dark};
+    --#{$prefix}highlight-color: #{$mark-color-dark};
+    --#{$prefix}highlight-bg: #{$mark-bg-dark};
 
     --#{$prefix}border-color: #{$border-color-dark};
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};

scss/_spinners.scss

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

scss/_theme.scss

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

scss/_toasts.scss

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

scss/_tooltip.scss

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

scss/_utilities.scss

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

scss/_variables.scss

@@ -10,29 +10,62 @@
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
 // scss-docs-start theme-color-variables
-// $primary:       $blue-500 !default;
-// $secondary:     var(--#{$prefix}gray-600) !default;
-// $success:       $green-500 !default;
-// $info:          $cyan-500 !default;
-// $warning:       $yellow-500 !default;
-// $danger:        $red-500 !default;
-// $light:         var(--#{$prefix}gray-100) !default;
-// $dark:          var(--#{$prefix}gray-900) !default;
+$primary:       $blue-500 !default;
+$secondary:     $gray-600 !default;
+$success:       $green-500 !default;
+$info:          $cyan-500 !default;
+$warning:       $yellow-500 !default;
+$danger:        $red-500 !default;
+$light:         $gray-100 !default;
+$dark:          $gray-900 !default;
 // scss-docs-end theme-color-variables
 
 // scss-docs-start theme-colors-map
-// $theme-colors: (
-//   "primary":    $primary,
-//   "secondary":  $secondary,
-//   "success":    $success,
-//   "info":       $info,
-//   "warning":    $warning,
-//   "danger":     $danger,
-//   "light":      $light,
-//   "dark":       $dark
-// ) !default;
+$theme-colors: (
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger,
+  "light":      $light,
+  "dark":       $dark
+) !default;
 // scss-docs-end theme-colors-map
 
+// // scss-docs-start theme-text-variables
+// $primary-text-emphasis:   shade-color($primary, 60%) !default;
+// $secondary-text-emphasis: shade-color($secondary, 60%) !default;
+// $success-text-emphasis:   shade-color($success, 60%) !default;
+// $info-text-emphasis:      shade-color($info, 60%) !default;
+// $warning-text-emphasis:   shade-color($warning, 60%) !default;
+// $danger-text-emphasis:    shade-color($danger, 60%) !default;
+// $light-text-emphasis:     $gray-700 !default;
+// $dark-text-emphasis:      $gray-700 !default;
+// // scss-docs-end theme-text-variables
+
+// // scss-docs-start theme-bg-subtle-variables
+// $primary-bg-subtle:       tint-color($primary, 80%) !default;
+// $secondary-bg-subtle:     tint-color($secondary, 80%) !default;
+// $success-bg-subtle:       tint-color($success, 80%) !default;
+// $info-bg-subtle:          tint-color($info, 80%) !default;
+// $warning-bg-subtle:       tint-color($warning, 80%) !default;
+// $danger-bg-subtle:        tint-color($danger, 80%) !default;
+// $light-bg-subtle:         color.mix($gray-100, $white) !default;
+// $dark-bg-subtle:          $gray-400 !default;
+// // scss-docs-end theme-bg-subtle-variables
+
+// // scss-docs-start theme-border-subtle-variables
+// $primary-border-subtle:   tint-color($primary, 60%) !default;
+// $secondary-border-subtle: tint-color($secondary, 60%) !default;
+// $success-border-subtle:   tint-color($success, 60%) !default;
+// $info-border-subtle:      tint-color($info, 60%) !default;
+// $warning-border-subtle:   tint-color($warning, 60%) !default;
+// $danger-border-subtle:    tint-color($danger, 60%) !default;
+// $light-border-subtle:     $gray-200 !default;
+// $dark-border-subtle:      $gray-500 !default;
+// // scss-docs-end theme-border-subtle-variables
+
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (
   ("<", "%3c"),
@@ -117,14 +150,14 @@ $position-values: (
 // Settings for the `<body>` element.
 
 $body-text-align:           null !default;
-$body-color:                var(--#{$prefix}color-body) !default;
-$body-bg:                   var(--#{$prefix}bg-body) !default;
+$body-color:                $gray-900 !default;
+$body-bg:                   $white !default;
 
-$body-secondary-color:      var(--#{$prefix}color-secondary) !default;
-$body-secondary-bg:         var(--#{$prefix}bg-secondary) !default;
+$body-secondary-color:      rgba($body-color, .75) !default;
+$body-secondary-bg:         $gray-200 !default;
 
-$body-tertiary-color:       var(--#{$prefix}color-muted) !default;
-$body-tertiary-bg:          var(--#{$prefix}bg-muted) !default;
+$body-tertiary-color:       rgba($body-color, .5) !default;
+$body-tertiary-bg:          $gray-100 !default;
 
 $body-emphasis-color:       $black !default;
 
@@ -132,12 +165,12 @@ $body-emphasis-color:       $black !default;
 //
 // Style anchor elements.
 
-// $link-color:                              var !default;
+$link-color:                              $primary !default;
 $link-decoration:                         underline !default;
 $link-underline-offset:                   .2em !default;
 $link-shade-percentage:                   20% !default;
-// $link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
-// $link-hover-decoration:                   $link-decoration !default;
+$link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
+$link-hover-decoration:                   null !default;
 
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
@@ -172,7 +205,7 @@ $border-widths: (
   5: 5px
 ) !default;
 $border-style:                solid !default;
-$border-color:                color-mix(in oklch, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)) !default;
+$border-color:                color.mix($gray-300, $gray-400) !default;
 $border-color-translucent:    rgba($black, .175) !default;
 // scss-docs-end border-variables
 
@@ -181,7 +214,7 @@ $border-radius:               .375rem !default;
 $border-radius-sm:            .25rem !default;
 $border-radius-lg:            .5rem !default;
 $border-radius-xl:            1rem !default;
-$border-radius-2xl:           2rem !default;
+$border-radius-xxl:           2rem !default;
 $border-radius-pill:          50rem !default;
 // scss-docs-end border-radius-variables
 
@@ -192,17 +225,17 @@ $box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
 $box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
 // scss-docs-end box-shadow-variables
 
+$component-active-color:      $white !default;
+$component-active-bg:         $primary !default;
+
 // scss-docs-start focus-ring-variables
 $focus-ring-width:      .25rem !default;
 $focus-ring-opacity:    .25 !default;
-$focus-ring-color:      var(--#{$prefix}primary-focus-ring) !default;
+$focus-ring-color:      rgba($primary, $focus-ring-opacity) !default;
 $focus-ring-blur:       0 !default;
 $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
 // scss-docs-end focus-ring-variables
 
-$component-active-color:      var(--#{$prefix}primary-contrast) !default;
-$component-active-bg:         var(--#{$prefix}primary-bg) !default;
-
 $transition-base:             all .2s ease-in-out !default;
 $transition-fade:             opacity .15s linear !default;
 // scss-docs-start collapse-transition
@@ -253,57 +286,24 @@ $line-height-base:            1.5 !default;
 $line-height-sm:              1.25 !default;
 $line-height-lg:              2 !default;
 
-$h1-font-size: var(--#{$prefix}font-size-3xl) !default;
-$h2-font-size: var(--#{$prefix}font-size-2xl) !default;
-$h3-font-size: var(--#{$prefix}font-size-xl) !default;
-$h4-font-size: var(--#{$prefix}font-size-lg) !default;
-$h5-font-size: var(--#{$prefix}font-size-md) !default;
-$h6-font-size: var(--#{$prefix}font-size-sm) !default;
+$h1-font-size:                $font-size-base * 2.5 !default;
+$h2-font-size:                $font-size-base * 2 !default;
+$h3-font-size:                $font-size-base * 1.75 !default;
+$h4-font-size:                $font-size-base * 1.5 !default;
+$h5-font-size:                $font-size-base * 1.25 !default;
+$h6-font-size:                $font-size-base !default;
 // scss-docs-end font-variables
 
-// Font sizes with line-height for utilities
+// scss-docs-start font-sizes
 $font-sizes: (
-  "xs": (
-    "font-size": var(--#{$prefix}font-size-xs),
-    "line-height": var(--#{$prefix}line-height-xs)
-  ),
-  "sm": (
-    "font-size": var(--#{$prefix}font-size-sm),
-    "line-height": var(--#{$prefix}line-height-sm)
-  ),
-  "md": (
-    "font-size": var(--#{$prefix}font-size-md),
-    "line-height": var(--#{$prefix}line-height-md)
-  ),
-  "lg": (
-    "font-size": var(--#{$prefix}font-size-lg),
-    "line-height": var(--#{$prefix}line-height-lg)
-  ),
-  "xl": (
-    "font-size": var(--#{$prefix}font-size-xl),
-    "line-height": var(--#{$prefix}line-height-xl)
-  ),
-  "2xl": (
-    "font-size": var(--#{$prefix}font-size-2xl),
-    "line-height": var(--#{$prefix}line-height-2xl)
-  ),
-  "3xl": (
-    "font-size": var(--#{$prefix}font-size-3xl),
-    "line-height": var(--#{$prefix}line-height-3xl)
-  ),
-  "4xl": (
-    "font-size": var(--#{$prefix}font-size-4xl),
-    "line-height": var(--#{$prefix}line-height-4xl)
-  ),
-  "5xl": (
-    "font-size": var(--#{$prefix}font-size-5xl),
-    "line-height": var(--#{$prefix}line-height-5xl)
-  ),
-  "6xl": (
-    "font-size": var(--#{$prefix}font-size-6xl),
-    "line-height": var(--#{$prefix}line-height-6xl)
-  ),
+  1: $h1-font-size,
+  2: $h2-font-size,
+  3: $h3-font-size,
+  4: $h4-font-size,
+  5: $h5-font-size,
+  6: $h6-font-size
 ) !default;
+// scss-docs-end font-sizes
 
 // scss-docs-start headings-variables
 $headings-margin-bottom:      $spacer * .5 !default;
@@ -314,7 +314,26 @@ $headings-line-height:        1.2 !default;
 $headings-color:              inherit !default;
 // scss-docs-end headings-variables
 
+// scss-docs-start display-headings
+$display-font-sizes: (
+  1: 5rem,
+  2: 4.5rem,
+  3: 4rem,
+  4: 3.5rem,
+  5: 3rem,
+  6: 2.5rem
+) !default;
+
+$display-font-family: null !default;
+$display-font-style:  null !default;
+$display-font-weight: 300 !default;
+$display-line-height: $headings-line-height !default;
+// scss-docs-end display-headings
+
 // scss-docs-start type-variables
+$lead-font-size:              $font-size-base * 1.25 !default;
+$lead-font-weight:            300 !default;
+
 $small-font-size:             .875em !default;
 
 $sub-sup-font-size:           .75em !default;
@@ -323,7 +342,7 @@ $initialism-font-size:        $small-font-size !default;
 
 $blockquote-margin-y:         $spacer !default;
 $blockquote-font-size:        $font-size-base * 1.25 !default;
-$blockquote-footer-color:     var(--#{$prefix}gray-600) !default;
+$blockquote-footer-color:     $gray-600 !default;
 $blockquote-footer-font-size: $small-font-size !default;
 
 $hr-margin-y:                 $spacer !default;
@@ -347,7 +366,7 @@ $list-inline-padding:         .5rem !default;
 
 $mark-padding:                .1875em !default;
 $mark-color:                  $body-color !default;
-$mark-bg:                     var(--#{$prefix}yellow-100) !default;
+$mark-bg:                     $yellow-100 !default;
 // scss-docs-end type-variables
 
 
@@ -362,7 +381,7 @@ $input-btn-font-family:       null !default;
 $input-btn-font-size:         $font-size-base !default;
 $input-btn-line-height:       $line-height-base !default;
 
-$input-btn-focus-width:         .25em !default;
+$input-btn-focus-width:         $focus-ring-width !default;
 $input-btn-focus-color-opacity: $focus-ring-opacity !default;
 $input-btn-focus-color:         $focus-ring-color !default;
 $input-btn-focus-blur:          $focus-ring-blur !default;
@@ -385,7 +404,7 @@ $input-btn-border-width:      var(--#{$prefix}border-width) !default;
 // For each of Bootstrap's buttons, define text, background, and border color.
 
 // scss-docs-start btn-variables
-$btn-color:                   var(--#{$prefix}color-body) !default;
+$btn-color:                   var(--#{$prefix}body-color) !default;
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;
@@ -412,9 +431,9 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color:     var(--#{$prefix}gray-600) !default;
-// $btn-link-color-contrast:     color-contrast($link-color) !default;
-// $btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
+$btn-link-disabled-color:     $gray-600 !default;
+$btn-link-color-contrast:     color-contrast($link-color) !default;
+$btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;
@@ -475,8 +494,8 @@ $modal-dialog-margin-y-sm-up:       1.75rem !default;
 
 $modal-title-line-height:           $line-height-base !default;
 
-$modal-content-color:               var(--#{$prefix}color-body) !default;
-$modal-content-bg:                  var(--#{$prefix}bg-body) !default;
+$modal-content-color:               var(--#{$prefix}body-color) !default;
+$modal-content-bg:                  var(--#{$prefix}body-bg) !default;
 $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
 $modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
@@ -500,7 +519,7 @@ $modal-footer-border-width:         $modal-header-border-width !default;
 $modal-sm:                          300px !default;
 $modal-md:                          500px !default;
 $modal-lg:                          800px !default;
-$modal-xl:                          1200px !default;
+$modal-xl:                          1140px !default;
 
 $modal-fade-transform:              translate(0, -50px) !default;
 $modal-show-transform:              none !default;
@@ -519,8 +538,8 @@ $offcanvas-transition-duration:     .3s !default;
 $offcanvas-border-color:            $modal-content-border-color !default;
 $offcanvas-border-width:            $modal-content-border-width !default;
 $offcanvas-title-line-height:       $modal-title-line-height !default;
-$offcanvas-bg-color:                var(--#{$prefix}bg-body) !default;
-$offcanvas-color:                   var(--#{$prefix}color-body) !default;
+$offcanvas-bg-color:                var(--#{$prefix}body-bg) !default;
+$offcanvas-color:                   var(--#{$prefix}body-color) !default;
 $offcanvas-box-shadow:              $modal-content-box-shadow-xs !default;
 $offcanvas-backdrop-bg:             $modal-backdrop-bg !default;
 $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
@@ -534,8 +553,8 @@ $code-color:                        var(--#{$prefix}secondary-text) !default;
 $kbd-padding-y:                     .1875rem !default;
 $kbd-padding-x:                     .375rem !default;
 $kbd-font-size:                     $code-font-size !default;
-$kbd-color:                         var(--#{$prefix}bg-body) !default;
-$kbd-bg:                            var(--#{$prefix}color-body) !default;
+$kbd-color:                         var(--#{$prefix}body-bg) !default;
+$kbd-bg:                            var(--#{$prefix}body-color) !default;
 
 $pre-color:                         null !default;
 
@@ -548,18 +567,21 @@ $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-tertiary-bg-dark:             color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900)) !default;
+$body-color-dark:                   $gray-300 !default;
+$body-bg-dark:                      $gray-900 !default;
+$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
+$body-secondary-bg-dark:            $gray-800 !default;
+$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
+$body-tertiary-bg-dark:             color.mix($gray-800, $gray-900, 50%) !default;
 $body-emphasis-color-dark:          $white !default;
-$border-color-dark:                 var(--#{$prefix}gray-700) !default;
+$border-color-dark:                 $gray-700 !default;
 $border-color-translucent-dark:     rgba($white, .15) !default;
 $headings-color-dark:               inherit !default;
-// $mark-color-dark:                   $body-color-dark !default;
-$mark-bg-dark:                      var(--#{$prefix}yellow-800) !default;
+$link-color-dark:                   tint-color($primary, 40%) !default;
+$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
+// $code-color-dark:                   tint-color($code-color, 40%) !default;
+$mark-color-dark:                   $body-color-dark !default;
+$mark-bg-dark:                      $yellow-800 !default;
 
 
 //
@@ -567,9 +589,9 @@ $mark-bg-dark:                      var(--#{$prefix}yellow-800) !default;
 //
 
 // scss-docs-start form-validation-colors-dark
-$form-valid-color-dark:             var(--#{$prefix}green-300) !default;
-$form-valid-border-color-dark:      var(--#{$prefix}green-300) !default;
-$form-invalid-color-dark:           var(--#{$prefix}red-300) !default;
-$form-invalid-border-color-dark:    var(--#{$prefix}red-300) !default;
+$form-valid-color-dark:             $green-300 !default;
+$form-valid-border-color-dark:      $green-300 !default;
+$form-invalid-color-dark:           $red-300 !default;
+$form-invalid-border-color-dark:    $red-300 !default;
 // scss-docs-end form-validation-colors-dark
 // scss-docs-end sass-dark-mode-vars

scss/buttons/_button-group.scss

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

scss/buttons/_button-variables.scss

@@ -6,7 +6,7 @@
 @use "../forms/form-variables" as *;
 
 // scss-docs-start btn-variables
-$btn-color:                   var(--#{$prefix}color-body) !default;
+$btn-color:                   var(--#{$prefix}body-color) !default;
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;
@@ -33,9 +33,9 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color:     var(--#{$prefix}gray-600) !default;
-// $btn-link-color-contrast:     color-contrast($link-color) !default;
-// $btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
+$btn-link-disabled-color:     $gray-600 !default;
+$btn-link-color-contrast:     color-contrast($link-color) !default;
+$btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;

scss/buttons/_button.scss

@@ -1,10 +1,6 @@
 @use "sass:color";
-@use "sass:list";
-@use "sass:map";
-@use "sass:meta";
 @use "../colors" as *;
 @use "../config" as *;
-@use "../theme" as *;
 @use "../variables" as *;
 @use "../functions" as *;
 @use "../vendor/rfs" as *;
@@ -15,125 +11,68 @@
 @use "../mixins/transition" as *;
 @use "button-variables" as *;
 
-// scss-docs-start btn-variants
-$button-variants: (
-  "solid": (
-    "base": (
-      "bg": "bg",
-      "color": "contrast",
-      "border-color": "bg"
-    ),
-    "hover": (
-      "bg": "bg",
-      "border-color": "bg",
-      "color": "contrast"
-    ),
-    "active": (
-      "bg": "bg",
-      "border-color": "bg",
-      "color": "contrast"
-    )
-  ),
-  "outline": (
-    "base": (
-      "bg": "transparent",
-      "color": "text",
-      "border-color": "border"
-    ),
-    "hover": (
-      "bg": "bg",
-      "color": "contrast",
-      "border-color": "bg"
-    ),
-    "active": (
-      "bg": "bg",
-      "color": "contrast",
-      "border-color": "bg"
-    )
-  ),
-  "subtle": (
-    "base": (
-      "bg": "bg-subtle",
-      "color": "text",
-      "border-color": "transparent"
-    ),
-    "hover": (
-      "bg": ("bg-muted", "bg-subtle"),
-      "color": "text-emphasis"
-    ),
-    "active": (
-      "bg": "bg-subtle",
-      "color": "text-emphasis"
-    )
-  ),
-  "text": (
-    "base": (
-      "color": "text",
-      "bg": "transparent",
-      "border-color": "transparent"
-    ),
-    "hover": (
-      "color": "text",
-      "bg": "bg-subtle"
-    ),
-    "active": (
-      "color": "text",
-      "bg": "bg-subtle"
-    )
-  )
-) !default;
-// scss-docs-end btn-variants
+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
 
-// // Main button style generator mixin
-
-// Generate button variant classes (e.g., .btn-solid, .btn-outline, etc.)
 // scss-docs-start btn-variant-mixin
-@each $variant, $_ in $button-variants {
-  .btn-#{$variant} {
-    @each $property, $value in map.get($button-variants, $variant, "base") {
-      @if $value == "transparent" {
-        --#{$prefix}btn-#{$property}: transparent;
-      } @else {
-        --#{$prefix}btn-#{$property}: var(--#{$prefix}theme-#{$value});
-      }
-    }
-
-    &:hover {
-      @each $property, $value in map.get($button-variants, $variant, "hover") {
-        @if $value == "transparent" {
-          --#{$prefix}btn-hover-#{$property}: transparent;
-        } @else if meta.type-of($value) == "list" {
-          $first-value: list.nth($value, 1);
-          $second-value: list.nth($value, 2);
-          --#{$prefix}btn-hover-#{$property}: color-mix(in oklch, var(--#{$prefix}theme-#{$first-value}) 50%, var(--#{$prefix}theme-#{$second-value}));
-        } @else if $value == "bg-subtle" {
-          --#{$prefix}btn-hover-#{$property}: var(--#{$prefix}theme-#{$value});
-        } @else {
-          --#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}theme-#{$value}) calc(l * .95) calc(c * 1.1) h);
-        }
-      }
-    }
-
-    &:focus-visible {
-      outline-color: var(--#{$prefix}theme-focus-ring);
-    }
-
-    &:active,
-    &.active {
-      @each $property, $value in map.get($button-variants, $variant, "active") {
-        @if $value == "transparent" {
-          --#{$prefix}btn-active-#{$property}: transparent;
-        } @else if $value == "bg-subtle" {
-          --#{$prefix}btn-active-#{$property}: var(--#{$prefix}theme-#{$value});
-        } @else {
-          --#{$prefix}btn-active-#{$property}: oklch(from var(--#{$prefix}theme-#{$value}) calc(l * .9) calc(c * 1.15) h);
-        }
-      }
-    }
-  }
+@mixin button-variant(
+  $background,
+  $border,
+  $color: color-contrast($background),
+  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+  $hover-color: color-contrast($hover-background),
+  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+  $active-color: color-contrast($active-background),
+  $disabled-background: $background,
+  $disabled-border: $border,
+  $disabled-color: color-contrast($disabled-background)
+) {
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: #{$background};
+  --#{$prefix}btn-border-color: #{$border};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  // --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(color.mix($color, $border, 15%))};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-bg: #{$disabled-background};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
 }
 // scss-docs-end btn-variant-mixin
 
+// scss-docs-start btn-outline-variant-mixin
+@mixin button-outline-variant(
+  $color,
+  $color-hover: color-contrast($color),
+  $active-background: $color,
+  $active-border: $color,
+  $active-color: color-contrast($active-background)
+) {
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-border-color: #{$color};
+  --#{$prefix}btn-hover-color: #{$color-hover};
+  --#{$prefix}btn-hover-bg: #{$active-background};
+  --#{$prefix}btn-hover-border-color: #{$active-border};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$color};
+  --#{$prefix}btn-disabled-bg: transparent;
+  --#{$prefix}btn-disabled-border-color: #{$color};
+  --#{$prefix}gradient: none;
+}
+// scss-docs-end btn-outline-variant-mixin
+
 // scss-docs-start btn-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
   --#{$prefix}btn-padding-y: #{$padding-y};
@@ -143,13 +82,13 @@ $button-variants: (
 }
 // scss-docs-end btn-size-mixin
 
+
 //
 // Base styles
 //
 
 @layer components {
-  .btn,
-  [class*="btn-"] {
+  .btn {
     // scss-docs-start btn-css-vars
     --#{$prefix}btn-padding-x: #{$btn-padding-x};
     --#{$prefix}btn-padding-y: #{$btn-padding-y};
@@ -176,7 +115,7 @@ $button-variants: (
     line-height: var(--#{$prefix}btn-line-height);
     color: var(--#{$prefix}btn-color);
     text-align: center;
-    text-decoration: none;
+    text-decoration: if($link-decoration == none, null, none);
     white-space: $btn-white-space;
     vertical-align: middle;
     cursor: if($enable-button-pointers, pointer, null);
@@ -189,6 +128,7 @@ $button-variants: (
 
     &:hover {
       color: var(--#{$prefix}btn-hover-color);
+      text-decoration: if($link-hover-decoration == underline, none, null);
       background-color: var(--#{$prefix}btn-hover-bg);
       border-color: var(--#{$prefix}btn-hover-border-color);
     }
@@ -201,11 +141,15 @@ $button-variants: (
     }
 
     &:focus-visible {
+      color: var(--#{$prefix}btn-hover-color);
+      @include gradient-bg(var(--#{$prefix}btn-hover-bg));
+      border-color: var(--#{$prefix}btn-hover-border-color);
       @include focus-ring(true);
       --#{$prefix}focus-ring-offset: 1px;
     }
 
     .btn-check:focus-visible + & {
+      border-color: var(--#{$prefix}btn-hover-border-color);
       @include focus-ring(true);
     }
 
@@ -243,6 +187,46 @@ $button-variants: (
     }
   }
 
+
+  //
+  // Alternate buttons
+  //
+
+  // scss-docs-start btn-variant-loops
+  @each $color, $value in $theme-colors {
+    .btn-#{$color} {
+      @if $color == "light" {
+        @include button-variant(
+          $value,
+          $value,
+          $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+          $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+          $active-background: shade-color($value, $btn-active-bg-shade-amount),
+          $active-border: shade-color($value, $btn-active-border-shade-amount)
+        );
+      } @else if $color == "dark" {
+        @include button-variant(
+          $value,
+          $value,
+          $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
+          $hover-border: tint-color($value, $btn-hover-border-tint-amount),
+          $active-background: tint-color($value, $btn-active-bg-tint-amount),
+          $active-border: tint-color($value, $btn-active-border-tint-amount)
+        );
+      } @else {
+        @include button-variant($value, $value);
+      }
+    }
+  }
+
+  @each $color, $value in $theme-colors {
+    .btn-outline-#{$color} {
+      @include button-outline-variant($value);
+    }
+  }
+  // scss-docs-end btn-variant-loops
+
+
   //
   // Link buttons
   //
@@ -262,12 +246,16 @@ $button-variants: (
     --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
     // --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
 
-    text-decoration: var(--#{$prefix}link-decoration);
-
+    text-decoration: $link-decoration;
     @if $enable-gradients {
       background-image: none;
     }
 
+    &:hover,
+    &:focus-visible {
+      text-decoration: $link-hover-decoration;
+    }
+
     &:focus-visible {
       color: var(--#{$prefix}btn-color);
     }

scss/content/_images.scss

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

scss/content/_prose.scss

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

scss/content/_reboot.scss

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

scss/content/_tables.scss

@@ -3,7 +3,6 @@
 @use "sass:math";
 @use "../config" as *;
 @use "../colors" as *;
-@use "../theme" as *;
 @use "../variables" as *;
 @use "../functions" as *;
 @use "../layout/breakpoints" as *;
@@ -16,24 +15,25 @@ $table-cell-padding-x-sm:     .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 var(--#{$prefix}color-body) !default;
-$table-bg:                    var(--#{$prefix}bg-body) !default;
+$table-color:                 var(--#{$prefix}emphasis-color) !default;
+$table-bg:                    var(--#{$prefix}body-bg) !default;
 $table-accent-bg:             transparent !default;
 
 // $table-th-font-weight:        null !default;
 
 $table-striped-color:         $table-color !default;
 $table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-striped-bg-factor)}, transparent) !default;
+$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
 
 $table-active-color:          $table-color !default;
 $table-active-bg-factor:      .1 !default;
-$table-active-bg:             color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-active-bg-factor)}, transparent) !default;
+$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
 
 $table-hover-color:           $table-color !default;
 $table-hover-bg-factor:       .075 !default;
-$table-hover-bg:              color-mix(in srgb, var(--#{$prefix}table-color) #{math.percentage($table-hover-bg-factor)}, transparent) !default;
+$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
 
+$table-border-factor:         .2 !default;
 $table-border-width:          var(--#{$prefix}border-width) !default;
 $table-border-color:          var(--#{$prefix}border-color) !default;
 
@@ -44,8 +44,46 @@ $table-group-separator-color: currentcolor !default;
 
 // $table-caption-color:         var(--#{$prefix}secondary-color) !default;
 
+$table-bg-scale:              -80% !default;
 // scss-docs-end table-variables
 
+// scss-docs-start table-loop
+$table-variants: (
+  "primary":    shift-color($primary, $table-bg-scale),
+  "secondary":  shift-color($secondary, $table-bg-scale),
+  "success":    shift-color($success, $table-bg-scale),
+  "info":       shift-color($info, $table-bg-scale),
+  "warning":    shift-color($warning, $table-bg-scale),
+  "danger":     shift-color($danger, $table-bg-scale),
+  "light":      $light,
+  "dark":       $dark,
+) !default;
+// scss-docs-end table-loop
+
+// scss-docs-start table-variant
+@mixin table-variant($state, $background) {
+  .table-#{$state} {
+    $color: color-contrast(opaque($body-bg, $background));
+    $hover-bg: color.mix($color, $background, math.percentage($table-hover-bg-factor));
+    $striped-bg: color.mix($color, $background, math.percentage($table-striped-bg-factor));
+    $active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
+    $table-border-color: color.mix($color, $background, math.percentage($table-border-factor));
+
+    --#{$prefix}table-color: #{$color};
+    --#{$prefix}table-bg: #{$background};
+    --#{$prefix}table-border-color: #{$table-border-color};
+    --#{$prefix}table-striped-bg: #{$striped-bg};
+    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
+    --#{$prefix}table-active-bg: #{$active-bg};
+    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
+    --#{$prefix}table-hover-bg: #{$hover-bg};
+    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
+
+    color: var(--#{$prefix}table-color);
+    border-color: var(--#{$prefix}table-border-color);
+  }
+}
+// scss-docs-end table-variant
 
 //
 // Basic Bootstrap table
@@ -59,8 +97,6 @@ $table-group-separator-color: currentcolor !default;
     --#{$prefix}table-color-state: initial;
     --#{$prefix}table-bg-state: initial;
     // End of reset
-
-    // scss-docs-start table-css-variables
     --#{$prefix}table-color: #{$table-color};
     --#{$prefix}table-bg: #{$table-bg};
     --#{$prefix}table-border-color: #{$table-border-color};
@@ -71,12 +107,11 @@ $table-group-separator-color: currentcolor !default;
     --#{$prefix}table-active-bg: #{$table-active-bg};
     --#{$prefix}table-hover-color: #{$table-hover-color};
     --#{$prefix}table-hover-bg: #{$table-hover-bg};
-    // scss-docs-end table-css-variables
 
     width: 100%;
     margin-bottom: $spacer;
     vertical-align: $table-cell-vertical-align;
-    border-color: var(--#{$prefix}theme-border, var(--#{$prefix}table-border-color));
+    border-color: var(--#{$prefix}table-border-color);
 
     // Target th & td
     // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
@@ -86,10 +121,10 @@ $table-group-separator-color: currentcolor !default;
     > :not(caption) > * > * {
       padding: $table-cell-padding-y $table-cell-padding-x;
       // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
-      color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}theme-text, var(--#{$prefix}table-color))));
-      background-color: var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-bg));
-      border-block-end-width: $table-border-width;
-      box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}theme-bg-subtle, var(--#{$prefix}table-accent-bg))));
+      color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
+      background-color: var(--#{$prefix}table-bg);
+      border-bottom-width: $table-border-width;
+      box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
     }
 
     > tbody {
@@ -102,7 +137,7 @@ $table-group-separator-color: currentcolor !default;
   }
 
   .table-group-divider {
-    border-block-start: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
+    border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
   }
 
   //
@@ -149,11 +184,11 @@ $table-group-separator-color: currentcolor !default;
   .table-borderless {
     // stylelint-disable-next-line selector-max-universal
     > :not(caption) > * > * {
-      border-block-end-width: 0;
+      border-bottom-width: 0;
     }
 
     > :not(:first-child) {
-      border-block-start-width: 0;
+      border-top-width: 0;
     }
   }
 
@@ -164,16 +199,16 @@ $table-group-separator-color: currentcolor !default;
   // For rows
   .table-striped {
     > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
-      --#{$prefix}table-color-type: var(--#{$prefix}theme-text, var(--#{$prefix}table-striped-color));
-      --#{$prefix}table-bg-type: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-striped-bg-factor)}, transparent);
+      --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+      --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
     }
   }
 
   // For columns
   .table-striped-columns {
     > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
-      --#{$prefix}table-color-type: var(--#{$prefix}theme-text, var(--#{$prefix}table-striped-color));
-      --#{$prefix}table-bg-type: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-striped-bg-factor)}, transparent);
+      --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
+      --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
     }
   }
 
@@ -182,8 +217,8 @@ $table-group-separator-color: currentcolor !default;
   // The `.table-active` class can be added to highlight rows or cells
 
   .table-active {
-    --#{$prefix}table-color-state: var(--#{$prefix}theme-text, var(--#{$prefix}table-active-color));
-    --#{$prefix}table-bg-state: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-active-bg-factor)}, transparent);
+    --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
+    --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
   }
 
   // Hover effect
@@ -192,11 +227,21 @@ $table-group-separator-color: currentcolor !default;
 
   .table-hover {
     > tbody > tr:hover > * {
-      --#{$prefix}table-color-state: var(--#{$prefix}theme-text, var(--#{$prefix}table-hover-color));
-      --#{$prefix}table-bg-state: color-mix(in srgb, var(--#{$prefix}theme-text, var(--#{$prefix}table-color)) #{math.percentage($table-hover-bg-factor)}, transparent);
+      --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
+      --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
     }
   }
 
+
+  // Table variants
+  //
+  // Table variants set the table cell backgrounds, border colors
+  // and the colors of the striped, hovered & active tables
+
+  @each $color, $value in $table-variants {
+    @include table-variant($color, $value);
+  }
+
   // Responsive tables
   //
   // Generate series of `.table-responsive-*` classes for configuring the screen

scss/content/_type.scss

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

scss/content/index.scss

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

scss/forms/_check.scss

@@ -16,7 +16,8 @@ $check-checked-bg: var(--#{$prefix}primary-base) !default;
 $check-checked-border-color: $check-checked-bg !default;
 $check-indeterminate-bg: var(--#{$prefix}primary-base) !default;
 $check-indeterminate-border-color: $check-indeterminate-bg !default;
-$check-disabled-bg: var(--#{$prefix}bg-3) !default;
+$check-disabled-bg: var(--#{$prefix}secondary-bg) !default;
+$check-disabled-border-color: $check-disabled-bg !default;
 $check-disabled-opacity: .65 !default;
 // scss-docs-end check-variables
 
@@ -40,6 +41,7 @@ $check-disabled-opacity: .65 !default;
     --#{$prefix}check-indeterminate-bg: #{$check-indeterminate-bg};
     --#{$prefix}check-indeterminate-border-color: #{$check-indeterminate-border-color};
     --#{$prefix}check-disabled-bg: #{$check-disabled-bg};
+    --#{$prefix}check-disabled-border-color: #{$check-disabled-border-color};
     --#{$prefix}check-disabled-opacity: #{$check-disabled-opacity};
     // scss-docs-end check-css-variables
 
@@ -58,15 +60,15 @@ $check-disabled-opacity: .65 !default;
     :where(input) {
       appearance: none;
       // later: maybe set a tertiary bg color?
-      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-bg));
-      border: 1px solid var(--#{$prefix}theme-bg, var(--#{$prefix}check-border-color));
+      background-color: var(--#{$prefix}check-bg);
+      border: 1px solid var(--#{$prefix}check-border-color);
       // stylelint-disable-next-line property-disallowed-list
       border-radius: .25em;
     }
 
     :where(input:checked, input:indeterminate) {
-      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-checked-bg));
-      border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-checked-border-color));
+      background-color: var(--#{$prefix}check-checked-bg);
+      border-color: var(--#{$prefix}check-checked-border-color);
     }
 
     &:has(input:checked) .checked,

scss/forms/_floating-labels.scss

@@ -15,7 +15,7 @@ $form-floating-input-padding-b:         .625rem !default;
 $form-floating-label-height:            1.5em !default;
 $form-floating-label-opacity:           .65 !default;
 $form-floating-label-transform:         scale(.85) translateY(-.5rem) translateX(.15rem) !default;
-$form-floating-label-disabled-color:    var(--#{$prefix}gray-600) !default;
+$form-floating-label-disabled-color:    $gray-600 !default;
 $form-floating-transition:              opacity .1s ease-in-out, transform .1s ease-in-out !default;
 // scss-docs-end form-floating-variables
 
@@ -71,9 +71,9 @@ $form-floating-transition:              opacity .1s ease-in-out, transform .1s e
     }
 
     > .form-select {
-      padding-inline-start: $form-floating-padding-x;
       padding-top: $form-floating-input-padding-t;
       padding-bottom: $form-floating-input-padding-b;
+      padding-left: $form-floating-padding-x;
     }
 
     > .form-control:focus,

scss/forms/_form-control.scss

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

scss/forms/_form-variables.scss

@@ -9,8 +9,8 @@ $control-padding-y: .375rem !default;
 $control-padding-x: .75rem !default;
 $control-font-size: $font-size-base !default;
 $control-line-height: $line-height-base !default;
-$control-color: var(--#{$prefix}color-body) !default;
-$control-bg: var(--#{$prefix}bg-body) !default;
+$control-color: var(--#{$prefix}body-color) !default;
+$control-bg: var(--#{$prefix}body-bg) !default;
 $control-border-width: var(--#{$prefix}border-width) !default;
 $control-border-color: var(--#{$prefix}border-color) !default;
 $control-border-radius: var(--#{$prefix}border-radius) !default;
@@ -27,12 +27,12 @@ $control-font-size-lg: $font-size-lg !default;
 $control-line-height-lg: $line-height-lg !default;
 $control-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
 
-$control-select-indicator-color:       var(--#{$prefix}gray-600) !default;
+$control-select-indicator-color:       $gray-600 !default;
 $control-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$control-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
 $control-select-bg-position:           right $control-padding-x center !default;
 $control-select-bg-size:               16px 12px !default;
 
-$control-select-indicator-color-dark:  #fff !default;
+$control-select-indicator-color-dark:  $body-color-dark !default;
 $control-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$control-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
 
 
@@ -76,12 +76,12 @@ $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
 $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
 $input-font-size-lg:                    $input-btn-font-size-lg !default;
 
-$input-bg:                              var(--#{$prefix}bg-body) !default;
+$input-bg:                              var(--#{$prefix}body-bg) !default;
 $input-disabled-color:                  null !default;
 $input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color:           null !default;
 
-$input-color:                           var(--#{$prefix}color-body) !default;
+$input-color:                           var(--#{$prefix}body-color) !default;
 $input-border-color:                    var(--#{$prefix}border-color) !default;
 $input-border-width:                    var(--#{$prefix}border-width) !default;
 $input-box-shadow:                      var(--#{$prefix}box-shadow-inset) !default;
@@ -97,7 +97,7 @@ $input-focus-width:                     $input-btn-focus-width !default;
 $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
 
 $input-placeholder-color:               var(--#{$prefix}secondary-color) !default;
-$input-plaintext-color:                 var(--#{$prefix}color-body) !default;
+$input-plaintext-color:                 var(--#{$prefix}body-color) !default;
 
 $input-height-border:                   calc(#{$input-border-width} * 2) !default;
 

scss/forms/_input-group.scss

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

scss/forms/_radio.scss

@@ -14,7 +14,8 @@
 $radio-border-color: var(--#{$prefix}border-color) !default;
 $radio-checked-bg: var(--#{$prefix}primary-base) !default;
 $radio-checked-border-color: $radio-checked-bg !default;
-$radio-disabled-bg: var(--#{$prefix}bg-3) !default;
+$radio-disabled-bg: var(--#{$prefix}secondary-bg) !default;
+$radio-disabled-border-color: $radio-disabled-bg !default;
 $radio-disabled-opacity: .65 !default;
 // scss-docs-end radio-variables
 
@@ -36,6 +37,7 @@ $radio-disabled-opacity: .65 !default;
     --#{$prefix}radio-checked-bg: #{$radio-checked-bg};
     --#{$prefix}radio-checked-border-color: #{$radio-checked-border-color};
     --#{$prefix}radio-disabled-bg: #{$radio-disabled-bg};
+    --#{$prefix}radio-disabled-border-color: #{$radio-disabled-border-color};
     --#{$prefix}radio-disabled-opacity: #{$radio-disabled-opacity};
     // scss-docs-end radio-css-variables
 
@@ -45,15 +47,15 @@ $radio-disabled-opacity: .65 !default;
     height: 1rem;
     margin-block: .125rem;
     appearance: none;
-    background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-bg));
-    border: 1px solid var(--#{$prefix}theme-bg, var(--#{$prefix}radio-border-color));
+    background-color: var(--#{$prefix}radio-bg);
+    border: 1px solid var(--#{$prefix}radio-border-color);
     // stylelint-disable-next-line property-disallowed-list
     border-radius: 50%;
 
     &:checked {
-      color: var(--#{$prefix}theme-contrast, var(--#{$prefix}primary-contrast));
-      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-bg));
-      border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}radio-checked-border-color));
+      color: var(--#{$prefix}primary-contrast);
+      background-color: var(--#{$prefix}radio-checked-bg);
+      border-color: var(--#{$prefix}radio-checked-border-color);
 
       &::before {
         position: absolute;

scss/forms/_switch.scss

@@ -21,7 +21,6 @@
     --#{$prefix}switch-border-color: var(--#{$prefix}border-color);
     --#{$prefix}switch-indicator-bg: var(--#{$prefix}white);
     --#{$prefix}switch-checked-bg: var(--#{$prefix}primary-base);
-    --#{$prefix}switch-checked-border-color: var(--#{$prefix}switch-checked-bg);
     --#{$prefix}switch-checked-indicator-bg: var(--#{$prefix}white);
     --#{$prefix}switch-disabled-bg: var(--#{$prefix}secondary-bg);
     --#{$prefix}switch-disabled-indicator-bg: var(--#{$prefix}secondary-text);
@@ -66,8 +65,7 @@
 
     &:has(input:checked) {
       padding-inline-start: calc(var(--#{$prefix}switch-height) / 2 + var(--#{$prefix}switch-padding));
-      background-color: var(--#{$prefix}switch-checked-bg);
-      border-color: var(--#{$prefix}switch-checked-border-color);
+      background-color: var(--#{$prefix}primary-base);
     }
 
     &:has(input:disabled) {

scss/forms/_validation.scss

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

scss/helpers/_color-bg.scss

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

scss/helpers/_colored-links.scss

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

scss/layout/_breakpoints.scss

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

scss/layout/_containers.scss

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

scss/layout/_grid.scss

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

scss/mixins/_border-radius.scss

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

scss/mixins/_caret.scss

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

scss/mixins/_forms.scss

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

scss/mixins/_gradients.scss

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

scss/mixins/_grid.scss

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

scss/mixins/_lists.scss

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

scss/mixins/_utilities.scss

@@ -3,205 +3,106 @@
 @use "sass:meta";
 @use "sass:string";
 @use "../config" as *;
-@use "../vendor/rfs" as *;
-
-// stylelint-disable scss/dollar-variable-pattern
 
 // Utility generator
-
-// - Utilities can use three different types of selectors:
-//   - class: .class
-//   - attr-starts: [class^="class"]
-//   - attr-includes: [class*="class"]
-// - Utilities can generate regular CSS properties and CSS custom properties
-// - Utilities can be responsive or not
-// - Utilities can have state variants (e.g., hover, focus, active)
-// - Utilities can define local CSS variables
-//
-// CSS custom properties can be generated in two ways:
-//
-// 1. Property map with null values (CSS var receives the utility value):
-// "bg-color": (
-//   property: (
-//     "--#{$prefix}bg": null,
-//     "background-color": var(--#{$prefix}bg)
-//   ),
-//   class: bg,
-//   values: (
-//     primary: var(--#{$prefix}blue-500),
-//   )
-// )
-// Generates:
-// .bg-primary {
-//   --bs-bg: var(--bs-blue-500);
-//   background-color: var(--bs-bg);
-// }
-//
-// 2. Variables map (static CSS custom properties on every class):
-// "link-underline": (
-//   property: text-decoration-color,
-//   class: link-underline,
-//   variables: (
-//     "link-underline-opacity": 1
-//   ),
-//   values: (...)
-// )
-// Generates:
-// .link-underline {
-//   --bs-link-underline-opacity: 1;
-//   text-decoration-color: ...;
-// }
-
-// 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"])
-  $selectorClass: map.get($utility, class);
-
-  // Get the list or map of values and ensure it's a map
+// Used to generate utilities & print utilities
+@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
   $values: map.get($utility, values);
-  @if meta.type-of($values) != "map" {
-    @if meta.type-of($values) == "list" {
-      $list: ();
-      @each $value in $values {
-        $list: map.merge($list, ($value: $value));
-      }
-      $values: $list;
+
+  // If the values are a list or string, convert it into a map
+  @if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
+    // A single value is converted to a map with a null key.
+    @if list.length($values) == 1 {
+      $values: (null: list.nth($values, 1));
     } @else {
-      $values: (null: $values);
+      $values: list.zip($values, $values);
     }
   }
 
-  // Calculate infix once, before the loop
-  // Note: $infix already includes the leading dash from breakpoint-infix()
-  // $infix: if($infix == "", "", "-" + $infix);
-
   @each $key, $value in $values {
     $properties: map.get($utility, property);
-    $propertyMap: null;
-    $customClass: "";
 
-    // Check if property is a map (new Property-Value Mapping approach)
-    // @debug "Properties type: #{meta.type-of($properties)}";
-    // @debug "Properties: #{$properties}";
-    @if meta.type-of($properties) == "map" {
-      $propertyMap: $properties;
-      // For property maps, we need to determine the class from the utility definition
-      $customClass: if(map.has-key($utility, class), map.get($utility, class), "");
-    } @else {
-      // Legacy approach: Multiple properties are possible, for example with vertical or horizontal margins or paddings
-      @if meta.type-of($properties) == "string" {
-        $properties: list.append((), $properties);
-      }
-      // Use custom class if present, otherwise use the first value from the list of properties
-      $customClass: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
-      $customClass: if($customClass == null, "", $customClass);
+    // Multiple properties are possible, for example with vertical or horizontal margins or paddings
+    @if meta.type-of($properties) == "string" {
+      $properties: list.append((), $properties);
     }
 
+    // Use custom class if present
+    $property-class: if(map.has-key($utility, class), map.get($utility, class), list.nth($properties, 1));
+    $property-class: if($property-class == null, "", $property-class);
+
     // Use custom 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));
+    $css-variable-name: if(map.has-key($utility, css-variable-name), map.get($utility, css-variable-name), map.get($utility, class));
 
-    // State params to generate state variants
+    // State params to generate pseudo-classes
     $state: if(map.has-key($utility, state), map.get($utility, state), ());
 
-    // $infix: if($customClass == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
+    $infix: if($property-class == "" and string.slice($infix, 1, 1) == "-", string.slice($infix, 2), $infix);
 
     // Don't prefix if value key is null (e.g. with shadow class)
-    $customClassModifier: if($key, if($customClass == "" and $infix == "", "", "-") + $key, "");
+    $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
 
-    $selector: "";
-    @if $selectorType == "class" {
-      // Use the fallback of the first property if no `class` key is used
-      @if $customClass != "" {
-        $selector: ".#{$customClass + $infix + $customClassModifier}";
-      } @else {
-        $selector: ".#{$selectorClass + $infix + $customClassModifier}";
+    @if map.get($utility, rfs) {
+      // Inside the media query
+      @if $is-rfs-media-query {
+        $val: rfs-value($value);
+
+        // Do not render anything if fluid and non fluid values are the same
+        $value: if($val == rfs-fluid-value($value), null, $val);
+      }
+      @else {
+        $value: rfs-fluid-value($value);
       }
-    } @else if $selectorType == "attr-starts" {
-      $selector: "[class^=\"#{$selectorClass}\"]";
-    } @else if $selectorType == "attr-includes" {
-      $selector: "[class*=\"#{$selectorClass}\"]";
     }
 
-    // @debug $utility;
-    // @debug $selectorType;
-    // @debug $selector;
-    // @debug $properties;
-    // @debug $values;
+    $is-css-var: map.get($utility, css-var);
+    $is-local-vars: map.get($utility, local-vars);
+    $is-rtl: map.get($utility, rtl);
+    $is-important: map.get($utility, important);
 
-    #{$selector} {
-      // Generate CSS custom properties (variables) if provided
-      // Variables receive the current utility value, then properties reference them
-      @if map.has-key($utility, variables) {
-        $variables: map.get($utility, variables);
-        @if meta.type-of($variables) == "list" {
-          // If variables is a list, each variable gets the utility value
-          @each $var-name in $variables {
-            --#{$prefix}#{$var-name}: #{$value};
-          }
-        } @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};
+    @if $value != null {
+      @if $is-rtl == false {
+        /* rtl:begin:remove */
+      }
+
+      @if $is-css-var {
+        .#{$property-class + $infix + $property-class-modifier} {
+          --#{$prefix}#{$css-variable-name}: #{$value};
+        }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            --#{$prefix}#{$css-variable-name}: #{$value};
           }
         }
-      }
-      @include generate-properties($utility, $propertyMap, $properties, $value);
-    }
-
-    // Generate state variants
-    @if $state != () {
-      @each $state-variant in $state {
-        #{$selector}-#{$state-variant}:#{$state-variant} {
-          // Generate CSS custom properties (variables) if provided
-          @if map.has-key($utility, variables) {
-            $variables: map.get($utility, variables);
-            @if meta.type-of($variables) == "list" {
-              // If variables is a list, each variable gets the utility value
-              @each $var-name in $variables {
-                --#{$prefix}#{$var-name}: #{$value};
-              }
-            } @else if meta.type-of($variables) == "map" {
-              // If variables is a map, use the provided values (for static variables)
-              @each $var-key, $var-value in $variables {
-                --#{$prefix}#{$var-key}: #{$var-value};
+      } @else {
+        .#{$property-class + $infix + $property-class-modifier} {
+          @each $property in $properties {
+            @if $is-local-vars {
+              @each $local-var, $variable in $is-local-vars {
+                --#{$prefix}#{$local-var}: #{$variable};
               }
             }
+            #{$property}: $value if($is-important, !important, null);
           }
-          @include generate-properties($utility, $propertyMap, $properties, $value);
         }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            @each $property in $properties {
+              @if $is-local-vars {
+                @each $local-var, $variable in $is-local-vars {
+                  --#{$prefix}#{$local-var}: #{$variable};
+                }
+              }
+              #{$property}: $value if($is-important, !important, null);
+            }
+          }
+        }
+      }
+
+      @if $is-rtl == false {
+        /* rtl:end:remove */
       }
     }
   }

scss/tests/mixins/_breakpoints.test.scss

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

scss/tests/utilities/_api.test.scss

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

site/data/breakpoints.yml

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

site/data/colors.yml

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

site/data/grays.yml

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

site/data/sidebar.yml

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

site/data/theme-colors.yml

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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